:root {
      color-scheme: dark;
      color: #f5f7fa;
      background: #080f17;
}

*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; cursor: pointer; }

.scene {
      --width: 100vw;
      --height: 100vh;
      --perspective: clamp(720px, 105vw, 1500px);
      --half-width: calc(var(--width) / 2);
      --rest-depth: calc(-1 * var(--half-width));
      --overview-depth: calc(-.76 * var(--width) - .66 * var(--perspective));
}

@supports (height: 100dvh) {
      .scene { --height: 100dvh; }
}

.is-turning .cube-viewport {
      position: fixed;
      inset: 0;
      z-index: 110;
      perspective: var(--perspective);
      background: radial-gradient(ellipse at 50% 42%, #192c3d, #0a1420 62%, #070d14);
}

.is-turning { pointer-events: none; }
.is-turning .camera, .is-turning .cube {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
}

.face {
      background: #112032;
}

.scene:not(.is-turning) .face:is([inert], [aria-hidden="true"]) { display: none; }
.is-turning .face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
}
.is-turning .front  { transform: translateZ(var(--half-width)); }
.is-turning .right  { transform: rotateY(90deg) translateZ(var(--half-width)); }
.is-turning .back   { transform: rotateY(180deg) translateZ(var(--half-width)); }
.is-turning .left   { transform: rotateY(-90deg) translateZ(var(--half-width)); }
.is-turning :is(.top, .bottom) {
      inset-block: calc((var(--height) - var(--width)) / 2) auto;
      height: var(--width);
}
.is-turning .top    { transform: rotateX(90deg) translateZ(calc(var(--height) / 2)); }
.is-turning .bottom { transform: rotateX(-90deg) translateZ(calc(var(--height) / 2)); }

.product {
      --accent: #c5dcfc;
      --wash: #111f3a;
      --image-position: 56% 50%;
      min-height: var(--height);
      isolation: isolate;
}

.is-turning .product { overflow: hidden; }
.is-turning .product .site-header {
      position: absolute;
      translate: 0 var(--cube-scroll-top, 0px);
}

.right {
      --accent: #f0d6a4;
      --wash: #212a1b;
      --image-position: 64% 20%;
      background-color: #172217;
}

.product-image, .product::after {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
}

.product-image {
      display: block;
      object-fit: cover;
      object-position: var(--image-position);
}

.product::after {
      content: "";
      background:
        linear-gradient(180deg, #080f17a6, transparent 33%, #080f1738 49%, #080f17e8 100%),
        linear-gradient(90deg, #080f17b8, transparent 76%);
}

.product-scroll {
      height: 100%;
      overflow: auto;
      overscroll-behavior: contain;
}

.product-inner {
      --gutter: clamp(1.25rem, 5.35vw, 6.5rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: clamp(2rem, 7vh, 5.25rem);
      min-height: 100%;
      padding-block: max(1.3rem, env(safe-area-inset-top)) max(1.7rem, env(safe-area-inset-bottom));
      padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.face-header, .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
}

.brand {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-size: .86rem;
      font-weight: 650;
      letter-spacing: .01em;
      white-space: nowrap;
}

.brand img { display: block; border-radius: .6rem; }

.edition, .product-label {
      color: var(--accent);
      font-size: .67rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: .18em;
      text-transform: uppercase;
}

.edition { margin: 0; text-align: right; }
.edition span { opacity: .65; }
.product-label {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin: 0 0 .55rem;
}

.product-label::before {
      content: "";
      width: 1.45rem;
      height: 1px;
      background: currentColor;
}

.product-title {
      margin: 0 0 clamp(.75rem, 2vw, 1.5rem) -.055em;
      color: #fafbfe;
      font-size: clamp(3rem, 17vw, 21rem);
      font-weight: 300;
      line-height: .86;
      letter-spacing: -.075em;
      text-shadow: 0 4px 32px #060a0d54;
}

.product-meta {
      align-items: flex-end;
      gap: .95rem 2rem;
      padding-top: .9rem;
      border-top: 1px solid #e7f0ff54;
}

.product-meta p { margin: 0; }

.statement { font-size: clamp(1.05rem, 2.1vw, 1.75rem); font-weight: 550; letter-spacing: -.04em; }

.product-meta .description {
      max-width: 47ch;
      margin-top: .2rem;
      color: #e0e7f0;
      font-size: clamp(.87rem, 1.22vw, 1.02rem);
}

.switch {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.3rem;
      flex: none;
      min-height: 3.05rem;
      padding: .62rem 1rem .62rem 1.2rem;
      border: 1px solid #e7efff6b;
      border-radius: 4rem;
      background: var(--wash);
      box-shadow: inset 0 1px 0 #ffffff3a, 0 4px 20px #060a0d30;
      font-size: .88rem;
      font-weight: 650;
      transition: background-color .2s, border-color .2s;
}

.switch:hover { background: #2a3540; border-color: var(--accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.switch[aria-disabled="true"] { cursor: progress; }
.switch span { color: var(--accent); font-size: 1.1rem; }

@media (max-width: 640px) {
      .right { --image-position: 83% center; }
      .edition span { display: none; }
      .product-meta { align-items: flex-start; flex-direction: column; }
      .product-title { font-size: clamp(2.8rem, 20vw, 8rem); }
      .product::after {
        background:
          linear-gradient(180deg, #080f17c0, transparent 32%, #080f1760 51%, #080f17ef 100%),
          linear-gradient(90deg, #080f1755, transparent 77%);
      }
}

@media (max-height: 490px) and (min-width: 641px) {
      .product-inner { gap: 1.25rem; padding-block: 1rem; }
      .product-title { font-size: min(16vw, 29vh); }
}

@media (prefers-reduced-motion: reduce) {
      .switch { transition: none; }
}