body {
  display: grid;
  grid-template-rows: 5em 1fr 5em;

  perspective: 440vw;
  perspective-origin: 50% 120%;
}

/* CUBE ASSEMBLY */
/* the rest is in cube.ts */

html {
  --side: min(65vh, 70vw);
  --half: calc(var(--side) * .5);
  --nhalf: calc(0em - var(--half));
  --breathe: calc(var(--side) * .1);
}

/* cube shadow */
html {
  background:
    radial-gradient(circle, hsl(330deg 40% 40% / 70%), transparent 58%),
    var(--gradient);
  background-blend-mode: multiply;
}

#outer {
  --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
}

#outer, #cube {
  transform-style: preserve-3d;
  transform-origin: var(--transform-origin);
  width:  calc(var(--side) + 10vw);
  height: calc(var(--side) + 10vh);
  margin: auto;
}

#cube {
  position: relative;
}

#cube > section {
  position: absolute;
  inset: 5vh 5vw;
  overflow: auto;
  transform-origin: var(--transform-origin);
  transform: var(--base-transform);
  overscroll-behavior: contain;
}

@supports (scrollbar-color: pink orange) { /* safari detector */
  #cube:not([data-moving]) > section {
    animation: breathe 9s infinite ease-in-out;
  }
}

@keyframes breathe {
  35% { transform: translateZ(var(--breathe)) var(--base-transform); }
}