:root {
  --ink: #05070b;
  --ink-soft: #0a0d13;
  --paper: #f5f5f7;
  --paper-warm: #f2f0eb;
  --text: #f5f7fb;
  --text-dark: #16171a;
  --soft: #c8ced9;
  --muted: #838b9a;
  --line: rgb(255 255 255 / .12);
  --line-dark: rgb(0 0 0 / .12);
  --cyan: #55d8ff;
  --violet: #9f7cff;
  --amber: #ffb348;
  --green: #69ed91;
  --red: #ff675e;
  --brand-blue: #3a6cff;
  --brand-red: #ff3a2e;
  --brand-orange: #ff9a2e;
  --brand-green: #35e07f;
  --page: 0;
  color: var(--text);
  background: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--ink);
}
img { display: block; max-width: 100%; }
button, a { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.brand-rainbow {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--brand-blue) 0%,
    var(--brand-red) 12.5%,
    var(--brand-orange) 25%,
    var(--brand-green) 37.5%,
    var(--brand-blue) 50%,
    var(--brand-red) 62.5%,
    var(--brand-orange) 75%,
    var(--brand-green) 87.5%,
    var(--brand-blue) 100%
  );
  background-position: 0 50%;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: brand-rainbow-wave 7s linear infinite;
}
@keyframes brand-rainbow-wave {
  to { background-position: -200% 50%; }
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto auto auto;
  column-gap: clamp(.65rem, .9vw, 1rem);
  align-items: center;
  min-height: 3.65rem;
  padding-inline: clamp(1.25rem, 3.8vw, 4.5rem);
  border-bottom: 1px solid rgb(255 255 255 / .08);
  color: var(--text);
  background: rgb(5 7 11 / .78);
  backdrop-filter: blur(22px) saturate(1.35);
  transition:
    color 360ms ease,
    border-color 360ms ease,
    background 360ms ease;
}
.brand {
  width: fit-content;
  color: inherit;
  text-decoration: none;
}
.brand strong {
  display: block;
  font-size: clamp(.9rem, 1.02vw, 1.08rem);
  font-weight: 760;
  letter-spacing: -.03em;
}
.chapter-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: clamp(.65rem, 1.5vw, 1.65rem);
}
.chapter-nav a {
  position: relative;
  display: grid;
  align-content: center;
  color: var(--muted);
  font-size: clamp(.61rem, .72vw, .75rem);
  font-weight: 560;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color 180ms ease;
}
.chapter-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 180ms ease, transform 240ms ease;
}
.chapter-nav a[aria-current="true"] { color: var(--text); }
.chapter-nav a[aria-current="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}
.motion-toggle {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: .45rem;
  min-width: 4.4rem;
  padding: .4rem 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: 680 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.motion-toggle i {
  width: .45rem;
  height: .58rem;
  border-inline: 2px solid currentColor;
}
.motion-toggle[aria-pressed="true"] i {
  width: 0;
  height: 0;
  border: 0;
  border-block: .29rem solid transparent;
  border-left: .45rem solid currentColor;
}
.header-marketplace-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.15rem;
  padding: .45rem .75rem;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 999px;
  color: white;
  background: rgb(9 107 214);
  box-shadow: 0 .45rem 1.2rem rgb(9 107 214 / .18);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.header-marketplace-cta strong {
  padding-left: .4rem;
  border-left: 1px solid rgb(255 255 255 / .25);
  font-weight: 780;
}
.header-marketplace-cta:focus-visible {
  outline: 2px solid #68dfff;
  outline-offset: 2px;
}
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}
.page-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: rgb(255 255 255 / .035);
}
.page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-red), var(--brand-orange), var(--brand-green));
  transform: scaleX(var(--page));
  transform-origin: left;
}

body[data-current-scene="awareness"] .site-header,
body[data-current-scene="shortcuts"] .site-header,
body[data-current-scene="marketplace"] .site-header {
  border-color: rgb(0 0 0 / .1);
  color: var(--text-dark);
  background: rgb(245 245 247 / .82);
}
body[data-current-scene="awareness"] .chapter-nav a,
body[data-current-scene="shortcuts"] .chapter-nav a,
body[data-current-scene="marketplace"] .chapter-nav a,
body[data-current-scene="awareness"] .motion-toggle,
body[data-current-scene="shortcuts"] .motion-toggle,
body[data-current-scene="marketplace"] .motion-toggle {
  color: #737379;
}
body[data-current-scene="awareness"] .chapter-nav a[aria-current="true"],
body[data-current-scene="shortcuts"] .chapter-nav a[aria-current="true"],
body[data-current-scene="marketplace"] .chapter-nav a[aria-current="true"] {
  color: var(--text-dark);
}

.scene {
  --p: 0;
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}
.scene-outcome { height: 210svh; }
.scene-awareness { height: 235svh; }
.scene-approval { height: 185svh; }
.scene-shortcuts { height: 230svh; }
.scene-icons { height: 220svh; }
.scene-light { height: 255svh; }
.scene-marketplace { min-height: 170svh; }
.scene-pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  transform: translateZ(0);
}

.copy { position: absolute; z-index: 12; }
.eyebrow {
  margin: 0 0 1.05rem;
  color: var(--cyan);
  font: 720 .66rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2 {
  margin: 0;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.074em;
  line-height: .91;
  text-wrap: balance;
}
h2 { font-size: clamp(3.2rem, 5.5vw, 6.6rem); }
h1 em, h2 em {
  color: #dce7ff;
  font-style: normal;
}
.lede {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.48;
  text-wrap: balance;
}

.product-shot,
.app-capture {
  position: absolute;
  margin: 0;
}
.product-shot video,
.app-capture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
video[data-cinematic-media] {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateZ(0);
  transition:
    opacity 900ms ease,
    transform 1.1s cubic-bezier(.2, .72, .2, 1),
    filter 900ms ease;
  will-change: opacity, transform, filter;
}
.cinematic-hold {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 900ms ease,
    transform 1.1s cubic-bezier(.2, .72, .2, 1),
    filter 900ms ease;
  will-change: opacity, transform, filter;
}
.hold-active > [data-cinematic-media] { opacity: 0; }
.hold-active > .cinematic-hold { opacity: 1; }
.cinematic-autoplay-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #05070b;
}
.cinematic-autoplay-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cinematic-autoplay-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 52%, transparent 0 18%, rgb(2 4 8 / .18) 48%, rgb(2 4 8 / .42) 100%),
    linear-gradient(180deg, transparent 60%, rgb(2 4 8 / .32));
  pointer-events: none;
}
.cinematic-play-fallback {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: .65rem 1rem;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(5 7 11 / .76);
  box-shadow: 0 .65rem 2rem rgb(0 0 0 / .28);
  color: #fff;
  font: 700 .82rem/1 var(--mono);
  letter-spacing: .02em;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  cursor: pointer;
  touch-action: manipulation;
}
.cinematic-play-fallback span { color: #6adfff; }
[data-autoplay-blocked="true"] > .cinematic-autoplay-cover { display: grid; }
.cinematic-play-fallback:focus-visible {
  outline: 2px solid #68dfff;
  outline-offset: 3px;
}

/* Chapter 01 — a product manifesto. */
.hero-layout {
  background:
    radial-gradient(ellipse 70% 58% at 50% 83%, rgb(38 52 97 / calc(.08 + var(--hero-light, 0) * .32)), transparent 67%),
    linear-gradient(180deg, #05070b 0%, #070912 72%, #05070b 100%);
}
.hero-layout::before {
  position: absolute;
  inset: 40% 0 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse 48% 30% at 50% 70%, rgb(112 131 255 / .2), transparent 68%),
    linear-gradient(180deg, transparent, rgb(255 255 255 / .012));
  filter: blur(.5rem);
  opacity: calc(.06 + var(--hero-light, 0) * .94);
  transition: opacity 500ms linear;
}
.hero-copy {
  top: clamp(5.7rem, 9.5vh, 7.6rem);
  right: 3vw;
  left: 3vw;
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero-brand-lockup {
  display: grid;
  justify-items: center;
  letter-spacing: 0;
  line-height: 1;
}
.hero-product-name {
  font-size: clamp(3.7rem, 6.2vw, 7.7rem);
  font-weight: 735;
  letter-spacing: -.078em;
  line-height: .92;
  white-space: nowrap;
}
.hero-product-for {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .85rem;
  color: #abb2bf;
  font-size: clamp(.9rem, 1.2vw, 1.3rem);
  font-weight: 520;
  letter-spacing: -.02em;
}
.hero-product-for b {
  color: var(--text);
  font-weight: 690;
}
.hero-product-for i {
  width: 1px;
  height: 1em;
  margin-inline: .15rem;
  background: rgb(255 255 255 / .3);
}
.hero-promise {
  max-width: 18ch;
  margin-top: 1.6rem;
  font-size: clamp(2.25rem, 3.65vw, 4.5rem);
  letter-spacing: -.066em;
  line-height: .95;
}
.hero-mantra {
  margin: 1.05rem 0 0;
  color: #8f98aa;
  font-size: clamp(.875rem, 1.02vw, 1.08rem);
  letter-spacing: -.01em;
}
.hero-offer {
  display: grid;
  justify-items: center;
  margin-top: 1.25rem;
}
.hero-offer .primary-cta {
  margin-top: 0;
  border: 1px solid rgb(255 255 255 / .12);
  background: rgb(21 111 221 / .94);
  box-shadow:
    0 .8rem 2.2rem rgb(9 107 214 / .25),
    0 0 0 1px rgb(255 255 255 / .04) inset;
}
.hero-offer p {
  margin-top: .7rem;
  color: #aeb7c8;
  font: 620 clamp(.7rem, .82vw, .82rem)/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .015em;
}
.product-shot-hero {
  z-index: 3;
  top: 67%;
  left: 50%;
  width: min(84rem, 88vw);
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%) scale(calc(.94 + var(--p) * .04));
  filter:
    brightness(calc(.7 + var(--hero-light, 0) * .75))
    saturate(calc(.82 + var(--hero-light, 0) * .24))
    contrast(1.02);
}
.product-shot-hero video {
  object-fit: contain;
  mask-image: radial-gradient(ellipse 80% 78% at 50% 52%, black 65%, transparent 98%);
}
.product-shot-hero::after {
  position: absolute;
  right: 12%;
  bottom: 5%;
  left: 12%;
  z-index: -1;
  height: 18%;
  border-radius: 50%;
  content: "";
  background: rgb(72 90 255 / .15);
  filter: blur(4rem);
  opacity: var(--hero-light, 0);
}

/* Chapter 02 — the entire value proposition in three words. */
.scene-awareness,
.scene-shortcuts,
.scene-marketplace {
  color: var(--text-dark);
  background: var(--paper);
}
.scene-awareness .scene-pin,
.scene-shortcuts .scene-pin,
.scene-marketplace .scene-pin {
  color: var(--text-dark);
  background:
    radial-gradient(circle at 50% 72%, rgb(106 126 180 / .08), transparent 38rem),
    var(--paper);
}
.scene-awareness h2,
.scene-shortcuts h2,
.scene-marketplace h2 {
  color: var(--text-dark);
}
.scene-awareness h2 em,
.scene-shortcuts h2 em,
.scene-marketplace h2 em {
  color: #4164bd;
}
.scene-awareness .lede,
.scene-shortcuts .lede,
.scene-marketplace .lede {
  color: #56575c;
}
.scene-awareness .eyebrow,
.scene-shortcuts .eyebrow,
.scene-marketplace .eyebrow {
  color: #3369ce;
}
.awareness-copy {
  top: clamp(5.6rem, 9vh, 7rem);
  right: 5vw;
  left: 5vw;
  text-align: center;
}
.awareness-copy h2 {
  max-width: 12ch;
  margin-inline: auto;
}
.awareness-copy .lede {
  max-width: 30rem;
  margin-inline: auto;
}
.product-shot-macro {
  z-index: 2;
  bottom: 7%;
  left: 4%;
  /* Bounded by height, not width. At 75vw the shot's height followed the window
     width and climbed into the lede; capping the height keeps it clear of the
     copy at any aspect ratio, and leaves the legend a column of its own. */
  height: min(56svh, 38vw);
  width: auto;
  aspect-ratio: 1.6;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / .09);
  border-radius: clamp(1.5rem, 2.3vw, 2.25rem);
  background: #09111a;
  box-shadow:
    0 3.5rem 9rem rgb(28 42 67 / .22),
    0 0 0 1px rgb(255 255 255 / .35) inset;
}
.product-shot-macro video {
  transform: scale(1.02);
  transition: transform 1.15s cubic-bezier(.2, .7, .2, 1);
}
[data-awareness-state="running"] .product-shot-macro video { transform: translateX(1.5%) scale(1.06); }
[data-awareness-state="attention"] .product-shot-macro video { transform: translateX(-1%) scale(1.07); }
[data-awareness-state="done"] .product-shot-macro video { transform: translateX(-2.5%) scale(1.06); }
[data-awareness-state="together"] .product-shot-macro video { transform: scale(1.02); }
.hardware-focus { display: none; }
.signal-legend {
  position: absolute;
  z-index: 6;
  right: 4%;
  bottom: 7%;
  /* Its own column beside the shot, aligned to the same band, so six states have
     room to sit two-up instead of being crushed into the corner. */
  display: flex;
  align-items: center;
  width: min(30rem, 30vw);
  height: min(56svh, 38vw);
}
.signal-legend .state-grid { width: 100%; }
/* Six states, each on its own clock.
   The old legend named three of them next to a video that already showed them.
   These are the engine's own key faces at 96px — the size the hardware renders —
   so they are the product rather than a drawing of it. Each loops on a whole
   number of its own period, which is why they drift against each other: that
   desynchronisation is what a real board looks like. */
.signal-legend .state-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.signal-legend .state-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .7rem;
  opacity: .92;
}
.state-key {
  grid-row: 1 / span 2;
  width: clamp(2.6rem, 4.6vw, 4.4rem);
  aspect-ratio: 1;
  /* The keycap's own edge, and nothing else.
     The engine renders a full 96x96 square because that is what the hardware
     displays — there is no "outside the key" in the data to extract, and any
     alpha derived from the pixels is invented. Two were tried and both were
     wrong: luminance-as-alpha turned a dark red glow into pale pink over white,
     and un-premultiplying only made it more saturated pale. The transparency
     belongs to the cap's rounded corner, which is geometry, so it is clipped
     here rather than baked into the asset. */
  border-radius: 21%;
  overflow: hidden;

  /* A sprite strip, not a video. H.264 has no alpha, and Chrome refused to pull
     metadata from these 96px clips — readyState 0 with networkState stuck at
     loading, even served on its own URL with working range requests. The strip
     sidesteps the decoder entirely and costs nothing to step exactly.

     steps(n, jump-none) is the exact form: over background-position-x 0% to 100%
     it yields n values including both ends, and since the image is n boxes wide,
     value k lands precisely on frame k. Plain steps(n) never reaches 100% and
     drops the last frame. */
  background-image: var(--strip);
  background-repeat: no-repeat;
  background-size: calc(var(--frames) * 100%) 100%;
  background-position: 0 0;
  animation: state-key-sprite var(--beat) steps(var(--frames), jump-none) infinite;
}
@keyframes state-key-sprite {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  /* Frame 0 is the state at its own rest, so a paused chip is still the state. */
  .state-key { animation-play-state: paused; }
}
.state-name {
  align-self: end;
  color: var(--text-dark);
  font-size: clamp(.82rem, 1.35vw, 1.35rem);
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.state-beat {
  /* The waveform's name, not its duration. "heartbeat" tells you what to look
     for; "1.1s" is a number you cannot check against a chip that is already
     showing you the period. */
  align-self: start;
  color: #8f9096;
  font-size: clamp(.62rem, .95vw, .95rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* Chapter 03 — one physical action, one safe consequence. */
.approval-layout {
  background:
    radial-gradient(ellipse 60% 56% at 50% 74%, rgb(99 79 45 / .16), transparent 66%),
    linear-gradient(180deg, #07090d 0%, #090b10 100%);
}
.approval-copy {
  top: clamp(5.7rem, 9vh, 7rem);
  right: 4vw;
  left: 4vw;
  text-align: center;
}
.approval-copy h2 {
  max-width: 13ch;
  margin-inline: auto;
}
.approval-copy .lede {
  max-width: 36rem;
  margin-inline: auto;
}
.product-shot-approval {
  z-index: 3;
  right: 3%;
  bottom: 4%;
  left: 3%;
  height: 63vh;
  min-height: 29rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: clamp(1.5rem, 2.3vw, 2.25rem);
  background: #070b11;
  box-shadow: 0 3.5rem 10rem rgb(0 0 0 / .72);
}
.product-shot-approval video {
  transform: scale(1.02);
}
.approval-beats {
  position: absolute;
  z-index: 8;
  right: 1.3rem;
  bottom: 1.25rem;
  left: 1.3rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.approval-beats span {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  color: rgb(255 255 255 / .48);
  font-size: clamp(.78rem, 1vw, 1rem);
  font-weight: 620;
  letter-spacing: -.015em;
  text-shadow: 0 .2rem 1rem #000;
  transition: color 240ms ease, transform 360ms cubic-bezier(.2, .7, .2, 1);
}
.approval-beats b {
  color: var(--muted);
  font: 700 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-approval-state="select"] .approval-beat-select,
[data-approval-state="arm"] .approval-beat-decide,
[data-approval-state="return"] .approval-beat-decide {
  color: white;
  transform: translateY(-.2rem);
}
[data-approval-state="select"] .approval-beat-select b { color: var(--amber); }
[data-approval-state="arm"] .approval-beat-decide b,
[data-approval-state="return"] .approval-beat-decide b { color: var(--green); }

/* Chapter 04 — live software evidence, then physical result. */
.shortcuts-copy {
  top: clamp(5.5rem, 8vh, 6.5rem);
  right: 4vw;
  left: 4vw;
  display: grid;
  justify-items: center;
  text-align: center;
}
.shortcuts-copy h2 {
  position: relative;
  width: 100%;
  min-height: 1.84em;
}
.shortcuts-copy h2 span {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 320ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1);
}
.shortcuts-copy h2 span.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.shortcuts-copy .lede {
  max-width: 38rem;
  margin-inline: auto;
}
.shortcut-proof {
  position: absolute;
  z-index: 3;
  top: max(42.5%, 23.75rem);
  right: 3.5%;
  bottom: 3.5%;
  left: 3.5%;
  perspective: 110rem;
}
.app-capture {
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / .11);
  border-radius: clamp(1.25rem, 2vw, 2rem);
  background: #1d1f23;
  box-shadow:
    0 3.5rem 9rem rgb(32 40 58 / .24),
    0 0 0 1px rgb(255 255 255 / .13) inset;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity 420ms ease,
    transform 760ms cubic-bezier(.2, .7, .2, 1),
    filter 420ms ease;
}
.cinema-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #17191d;
}
.cinema-screen > img,
.cinema-screen > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.cinema-reflection {
  position: absolute;
  z-index: 5;
  top: -45%;
  bottom: -45%;
  left: -32%;
  width: 20%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .14), transparent);
  filter: blur(.4rem);
  opacity: 0;
  transform: skewX(-16deg);
}
@keyframes screen-reflection {
  0% { left: -32%; opacity: 0; }
  16% { opacity: .7; }
  64% { opacity: .3; }
  100% { left: 116%; opacity: 0; }
}
.command-focus,
.catalog-proof {
  position: absolute;
  z-index: 7;
  color: white;
  background: rgb(8 10 15 / .8);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .4);
  backdrop-filter: blur(18px);
}
.command-focus {
  right: 4%;
  bottom: 8%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .78rem 1rem;
  border-left: 2px solid var(--cyan);
}
.command-focus span,
.catalog-proof span {
  color: #9ca4b3;
  font: 650 .52rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.command-focus strong { font-size: .76rem; }
.command-focus kbd {
  color: var(--cyan);
  font: 720 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.catalog-proof {
  right: 4%;
  bottom: 7%;
  display: grid;
  padding: .85rem 1rem;
  border-left: 2px solid var(--cyan);
}
.catalog-proof strong {
  color: white;
  font-size: clamp(1.4rem, 2.2vw, 2.5rem);
  letter-spacing: -.055em;
  line-height: .95;
}
.app-capture-chatgpt {
  top: 1%;
  left: 3%;
  width: 74%;
  height: 91%;
  opacity: 1;
  transform: rotateY(5deg) rotateX(1deg) translate3d(-2.5rem, 1.5rem, -2rem) scale(.96);
  transform-origin: 12% 50%;
}
.app-capture-chatgpt .cinema-screen > img {
  object-position: 50% 69%;
  transform:
    translate(
      calc(var(--shot-t, 0) * -7%),
      calc(3% - var(--shot-t, 0) * 10%)
    )
    scale(calc(1.04 + var(--shot-t, 0) * .48));
  transform-origin: 62% 71%;
}
.app-capture-catalog {
  z-index: 5;
  top: 2%;
  right: 5%;
  width: 62%;
  height: 90%;
  transform: rotateY(-5deg) translate3d(3rem, 1rem, 1rem) scale(.96);
  transform-origin: 88% 50%;
}
.app-capture-catalog .cinema-screen > img {
  object-position: 28% 72%;
  transform:
    translate(
      calc(var(--shot-t, 0) * 9%),
      calc(4% - var(--shot-t, 0) * 11%)
    )
    scale(calc(1.08 + var(--shot-t, 0) * .52));
  transform-origin: 27% 60%;
}
[data-shortcut-state="discover"] .app-capture-chatgpt {
  opacity: 1;
  transform: rotateY(3deg) translate3d(0, 0, 0) scale(1);
}
[data-shortcut-state="sync"] .app-capture-chatgpt {
  opacity: .38;
  filter: saturate(.7);
  transform: rotateY(6deg) translate3d(-4rem, 0, -3rem) scale(.96);
}
[data-shortcut-state="sync"] .app-capture-catalog {
  opacity: 1;
  transform: rotateY(-2deg) translate3d(0, 0, 1rem) scale(1);
}
[data-shortcut-state="discover"] .app-capture-chatgpt .cinema-reflection,
[data-shortcut-state="sync"] .app-capture-catalog .cinema-reflection {
  animation: screen-reflection 3.8s cubic-bezier(.2, .5, .2, 1) infinite;
}
[data-shortcut-state="ready"] .app-capture-chatgpt,
[data-shortcut-state="ready"] .app-capture-catalog {
  opacity: 0;
  pointer-events: none;
}
.shortcut-product-plate {
  z-index: 8;
  top: 0;
  left: 50%;
  width: 80%;
  height: 93%;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / .1);
  border-radius: clamp(1.25rem, 2vw, 2rem);
  background: #05070a;
  box-shadow: 0 3.5rem 9rem rgb(31 38 54 / .25);
  opacity: 0;
  transform: translateX(-50%) translateY(2rem) scale(.97);
  transition: opacity 420ms ease, transform 720ms cubic-bezier(.2, .7, .2, 1);
}
.shortcut-product-plate video { object-fit: cover; }
[data-shortcut-state="ready"] .shortcut-product-plate {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.shortcut-progress {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 0;
  list-style: none;
}
.shortcut-progress li {
  padding-top: .65rem;
  border-top: 1px solid rgb(0 0 0 / .12);
  color: #a0a1a6;
  font: 650 .54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.shortcut-progress li.active {
  border-color: #3369ce;
  color: var(--text-dark);
}
.shortcut-progress li.complete { color: #3369ce; }

/* Chapter 05 — visual ownership, rendered on the physical product. */
.icons-layout {
  background:
    radial-gradient(ellipse 52% 42% at 66% 68%, rgb(73 102 195 / .22), transparent 70%),
    radial-gradient(circle at 31% 54%, rgb(116 61 180 / .12), transparent 34rem),
    linear-gradient(180deg, #05070b 0%, #080b12 100%);
}
.icons-layout::before {
  position: absolute;
  inset: 28% 0 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 16%,
    rgb(58 108 255 / .08) 34%,
    rgb(255 58 46 / .07) 50%,
    rgb(255 154 46 / .06) 62%,
    rgb(53 224 127 / .07) 76%,
    transparent 88%
  );
  filter: blur(4rem);
}
.icons-copy {
  top: clamp(5.7rem, 8vh, 6.8rem);
  right: 4vw;
  left: 4vw;
  display: grid;
  justify-items: center;
  text-align: center;
}
.icons-copy h2 {
  max-width: 13ch;
}
.icons-copy .lede {
  max-width: 42rem;
  margin-inline: auto;
}
.icons-product-shot {
  z-index: 3;
  top: 35%;
  right: 3.5%;
  bottom: 4.5%;
  left: 3.5%;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: clamp(1.5rem, 2.5vw, 2.5rem);
  background: #020408;
  box-shadow:
    0 4rem 10rem rgb(0 0 0 / .7),
    0 0 0 1px rgb(255 255 255 / .035) inset;
}
.icons-product-shot::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgb(4 6 10 / .08), transparent 55%, rgb(4 6 10 / .32)),
    linear-gradient(90deg, rgb(4 6 10 / .16), transparent 32%, transparent 72%, rgb(4 6 10 / .1));
}
.icons-product-shot video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.12) saturate(1.08) contrast(1.03);
  transform: scale(1);
}
.icons-proof-stat {
  position: absolute;
  z-index: 7;
  right: 1.5rem;
  bottom: 1.35rem;
  display: grid;
  min-width: 10.5rem;
  padding: .95rem 1.1rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 1rem;
  color: white;
  background: rgb(5 8 13 / .72);
  backdrop-filter: blur(18px);
}
.icons-proof-stat strong {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
  letter-spacing: -.07em;
  line-height: .9;
}
.icons-proof-stat span {
  margin-top: .35rem;
  color: #b9c1cf;
  font: 650 .52rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Chapter 06 — a visual renderer demonstration, not material science. */
.light-layout {
  background:
    radial-gradient(circle at 68% 64%, rgb(45 90 129 / .12), transparent 38rem),
    linear-gradient(180deg, #05070b 0%, #070a10 100%);
}
.light-copy {
  top: clamp(5.7rem, 8vh, 6.8rem);
  right: 4vw;
  left: 4vw;
  text-align: center;
}
.light-copy h2 {
  max-width: 13ch;
  margin-inline: auto;
}
.light-copy .lede {
  max-width: 39rem;
  margin-inline: auto;
}
.cross-key-proof {
  position: absolute;
  z-index: 3;
  top: 35%;
  right: 3.5%;
  bottom: 5.5%;
  left: 3.5%;
  display: grid;
  align-items: center;
}
.renderer-controls {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 2%;
  width: min(28%, 21rem);
  padding: 1.35rem;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 1.35rem;
  background: rgb(5 8 13 / .78);
  box-shadow:
    0 2rem 5rem rgb(0 0 0 / .46),
    0 0 0 1px rgb(255 255 255 / .035) inset;
  backdrop-filter: blur(22px) saturate(1.25);
  transform: translateY(-50%);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2, .7, .2, 1);
}
.renderer-mode {
  display: grid;
  gap: .45rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.renderer-mode span,
.renderer-controls > p {
  color: var(--muted);
  font: 620 .55rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.renderer-mode strong {
  color: white;
  font-size: clamp(.88rem, 1.2vw, 1.2rem);
}
.renderer-control {
  margin-top: 1.25rem;
  opacity: .38;
  transition: opacity 320ms ease, transform 420ms ease;
}
.renderer-control label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--soft);
  font: 650 .6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.renderer-control output { color: white; }
[data-light-state="isolated"] .renderer-control-neighbour,
[data-light-state="influence"] .renderer-control-neighbour,
[data-light-state="ambient"] .renderer-control-ambient {
  opacity: 1;
  transform: translateX(-.25rem);
}
.renderer-controls > p {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .1);
}
/* Chapter 07 — a decisive commercial close. */
.marketplace-layout {
  background:
    radial-gradient(circle at 50% 45%, rgb(77 101 169 / .12), transparent 42rem),
    var(--paper-warm);
}
.marketplace-copy {
  z-index: 8;
  top: 49%;
  left: 8%;
  width: min(38rem, 38vw);
  transform: translateY(-50%);
}
.marketplace-copy h2 {
  max-width: 8ch;
  color: white;
  font-size: clamp(3.4rem, 5.7vw, 7rem);
}
.marketplace-copy h2 em {
  color: #dce7ff;
}
.marketplace-copy .lede {
  max-width: 27rem;
  color: #c4cad7;
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
}
.marketplace-copy .eyebrow { color: var(--cyan); }
.purchase-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.45rem 0 0;
  color: #aab2c1;
  font: 650 .875rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.purchase-note i {
  width: .43rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 .8rem var(--green);
}
.primary-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.55rem;
  padding: .88rem 1.25rem;
  border-radius: 999px;
  color: white;
  background: #096bd6;
  box-shadow: 0 .8rem 2rem rgb(9 107 214 / .2);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.primary-cta:hover,
.primary-cta:focus-visible {
  background: #0876ec;
  transform: translateY(-2px);
}
.product-shot-final {
  z-index: 2;
  top: 8%;
  right: 4%;
  bottom: 8%;
  left: 4%;
  width: auto;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: clamp(1.8rem, 3vw, 3rem);
  background: #05070b;
  box-shadow:
    0 4rem 10rem rgb(38 47 73 / .26),
    0 0 0 1px rgb(255 255 255 / .04) inset;
  opacity: 1;
  filter: brightness(1.35) saturate(1.08) contrast(1.04);
  transform: translateY(calc((1 - var(--p)) * -2rem)) scale(calc(.95 + var(--p) * .05));
}
.product-shot-final::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgb(3 5 9 / .94) 0%, rgb(3 5 9 / .78) 31%, rgb(3 5 9 / .15) 62%, transparent 78%),
    linear-gradient(180deg, rgb(3 5 9 / .12), transparent 42%, rgb(3 5 9 / .2));
}
.product-shot-final video {
  object-fit: cover;
  mask-image: none;
  transform: translateX(10%) scale(1.12);
}
footer {
  position: absolute;
  right: 3rem;
  bottom: 1.7rem;
  left: 3rem;
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgb(0 0 0 / .1);
  color: #7b7c82;
  font-size: .875rem;
}
footer > span { color: #424348; font-weight: 730; }

/* Chapter 06 — the two controls, rendered rather than drawn.
   The stage is one cell of a 9x9 atlas of ray-traced frames. Moving a slider
   moves background-position onto a different frame, so what changes on screen
   changed in the renderer. The previous version cross-faded three stills behind
   two bars that looked like sliders and were scroll progress meters. */
.light-grid-stage {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: clamp(1rem, 1.6vw, 1.6rem);
  background: #05070b;
}
/* The demonstration plays as video, the sliders index stills.
   Sampling a continuous move at nine positions reads as a stutter, so the
   auto-demo is a rendered sweep along the exact path the controls describe. The
   grid underneath only becomes visible once the reader takes over, at which
   point discrete steps are what a slider should feel like. */
.light-grid-auto {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 320ms ease;
}
[data-grid-source="manual"] .light-grid-auto {
  opacity: 0;
  pointer-events: none;
}
.light-grid-render {
  --gx: 8;
  --gy: 0;
  aspect-ratio: 1.6;
  width: 100%;
  background-image: url("media/v120/lightgrid/atlas.jpg");
  background-repeat: no-repeat;
  /* Nine cells per axis, so the sheet is nine boxes wide and nine tall and a
     percentage lands exactly on a cell edge. */
  background-size: 900% 900%;
  background-position: calc(var(--gx) / 8 * 100%) calc(var(--gy) / 8 * 100%);
}
.renderer-control input[type="range"] {
  width: 100%;
  min-height: 2.35rem;
  margin: .35rem 0 0;
  accent-color: #6f9bff;
  cursor: grab;
  touch-action: pan-y;
}
.renderer-control input[type="range"]:active { cursor: grabbing; }
.renderer-control label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: minmax(8.5rem, 1fr) auto auto auto;
    column-gap: .55rem;
    padding-inline: clamp(1.25rem, 2.8vw, 2.25rem);
  }
  .chapter-nav { gap: clamp(.5rem, 1vw, .75rem); }
  .motion-toggle {
    min-width: 2.5rem;
    justify-content: end;
  }
  .motion-toggle span { display: none; }

  .hero-product-name { font-size: clamp(3.2rem, 7vw, 5.4rem); }
  .product-shot-hero { top: 73%; width: 96vw; }

  .awareness-copy { text-align: left; }
  .awareness-copy h2,
  .awareness-copy .lede { margin-inline: 0; }
  .product-shot-macro {
    right: 4%;
    bottom: 24%;
    left: 4%;
    width: auto;
    height: min(38svh, 42vw);
  }
  .signal-legend {
    right: 4%;
    bottom: 4.5%;
    left: 4%;
    display: block;
    width: auto;
    height: auto;
  }
  .signal-legend .state-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem .85rem;
  }
  .signal-legend .state-grid li {
    min-width: 0;
    column-gap: .55rem;
  }
  .state-key { width: clamp(2.25rem, 4.4vw, 3.2rem); }
  .state-name { font-size: clamp(.875rem, 1.55vw, 1.02rem); }
  .state-beat { font-size: clamp(.68rem, 1.2vw, .82rem); }

  .shortcuts-copy,
  .light-copy { text-align: left; }
  .light-copy h2,
  .light-copy .lede { margin-inline: 0; }
  .cross-key-proof {
    top: 40%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: 1rem;
    align-items: center;
  }
  .light-grid-stage {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 100%;
  }
  .renderer-controls {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    transform: none;
  }

  .marketplace-copy { width: min(34rem, 40vw); }
  .marketplace-copy .lede { max-width: 21rem; }
  .product-shot-final { right: 4%; width: auto; }
}

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: .55rem;
    min-height: 3.5rem;
    padding-inline: 1rem;
  }
  .brand {
    min-width: 0;
    overflow: hidden;
  }
  .brand strong {
    overflow: hidden;
    font-size: .82rem;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .motion-toggle {
    min-width: 2.5rem;
    justify-content: end;
  }
  .header-marketplace-cta {
    gap: .35rem;
    padding: .42rem .68rem;
    font-size: .68rem;
  }
  .header-marketplace-cta strong {
    padding-left: .35rem;
  }
  .motion-toggle span { display: none; }
  .chapter-nav { display: none; }
  .scene-outcome,
  .scene-awareness,
  .scene-approval,
  .scene-shortcuts,
  .scene-icons,
  .scene-light,
  .scene-marketplace {
    height: auto;
    min-height: auto;
  }
  .scene-pin {
    position: relative;
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: clamp(1.3rem, 5vw, 2.25rem);
    overflow: visible;
    padding:
      calc(3.5rem + clamp(1.4rem, 6vw, 2.25rem))
      clamp(1rem, 5vw, 1.5rem)
      clamp(2.75rem, 9vw, 4rem);
  }
  .scene-outcome .scene-pin { min-height: 100svh; }
  h2 {
    font-size: clamp(2.45rem, 10.7vw, 3.7rem);
    letter-spacing: -.055em;
  }
  .lede {
    max-width: none;
    font-size: clamp(1rem, 4.1vw, 1.08rem);
    line-height: 1.5;
  }
  .hero-mantra { font-size: .95rem; }
  .hero-offer { margin-top: 1.05rem; }
  .hero-offer .primary-cta {
    min-height: 2.85rem;
    justify-content: center;
  }
  .hero-offer p {
    max-width: 23rem;
    font-size: .72rem;
  }
  .scene-pin > .copy,
  .scene-pin > .signal-legend,
  .scene-pin > .cross-key-proof,
  .scene-pin > .shortcut-proof,
  .scene-pin > footer,
  .scene-pin > .product-shot {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    transform: none;
  }
  .hero-copy { text-align: center; }
  .hero-product-name {
    max-width: 12ch;
    font-size: clamp(2.35rem, 11vw, 3.8rem);
    letter-spacing: -.055em;
    white-space: normal;
  }
  .hero-product-for { flex-wrap: wrap; justify-content: center; }
  .hero-promise { font-size: clamp(2rem, 8.8vw, 3.15rem); }
  .scene-pin > .product-shot {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.6;
    overflow: hidden;
    border-radius: clamp(1rem, 5vw, 1.5rem);
  }
  .product-shot-hero {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .awareness-copy,
  .approval-copy,
  .shortcuts-copy,
  .icons-copy,
  .light-copy {
    text-align: left;
  }
  .awareness-copy h2,
  .awareness-copy .lede,
  .approval-copy h2,
  .approval-copy .lede,
  .icons-copy h2,
  .icons-copy .lede,
  .light-copy h2,
  .light-copy .lede {
    margin-inline: 0;
  }
  .product-shot-macro,
  .product-shot-approval,
  .icons-product-shot,
  .product-shot-final { aspect-ratio: 1.6; }
  .signal-legend {
    display: block;
    height: auto;
    padding: .95rem;
    border: 1px solid rgb(0 0 0 / .1);
    border-radius: .85rem;
    background: rgb(255 255 255 / .46);
  }
  .signal-legend .state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem .65rem;
  }
  .signal-legend .state-grid li {
    min-width: 0;
    column-gap: .55rem;
  }
  .state-key { width: clamp(2.35rem, 12vw, 3.1rem); }
  .state-name { font-size: clamp(.88rem, 3.7vw, 1rem); }
  .state-beat { font-size: .875rem; }
  .approval-beats { gap: 1rem; }
  .approval-beats span {
    max-width: 44%;
    font-size: .75rem;
    line-height: 1.2;
  }

  .shortcuts-copy h2 { min-height: 2.35em; }
  .shortcut-proof {
    aspect-ratio: .9;
    min-height: 26rem;
    overflow: clip;
    contain: paint;
    perspective: 80rem;
  }
  .app-capture-chatgpt {
    top: 0;
    left: 0;
    width: 100%;
    height: 86%;
    transform: translateY(1rem) scale(.96);
  }
  .app-capture-catalog {
    top: 4%;
    right: 0;
    width: 74%;
    height: 82%;
  }
  [data-shortcut-state="discover"] .app-capture-chatgpt {
    transform: translateY(0) scale(1);
  }
  .shortcut-product-plate {
    top: 0;
    left: 0;
    width: 100%;
    height: 86%;
    transform: translateY(1rem) scale(.97);
  }
  [data-shortcut-state="ready"] .shortcut-product-plate {
    transform: translateY(0) scale(1);
  }
  .command-focus {
    right: .7rem;
    bottom: .7rem;
    left: .7rem;
    grid-template-columns: 1fr auto;
    gap: .45rem .7rem;
    padding: .7rem .78rem;
  }
  .command-focus span { grid-column: 1 / -1; }
  .command-focus strong { min-width: 0; font-size: .72rem; }
  .catalog-proof {
    right: .7rem;
    bottom: .7rem;
    padding: .72rem .82rem;
  }
  .shortcut-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }
  .shortcut-progress li {
    min-width: 0;
    font-size: .68rem;
    line-height: 1.25;
    letter-spacing: .02em;
  }

  .icons-proof-stat {
    right: .85rem;
    bottom: .85rem;
    min-width: 0;
    max-width: calc(100% - 1.7rem);
    padding: .78rem .85rem;
  }
  .icons-proof-stat span { font-size: .68rem; }

  .cross-key-proof {
    display: grid;
    grid-template-areas:
      "preview"
      "controls";
    grid-template-columns: 1fr;
    gap: .9rem;
    align-items: stretch;
  }
  .light-grid-stage {
    grid-area: preview;
    width: 100%;
    aspect-ratio: 1.6;
  }
  .light-grid-render { height: 100%; }
  .renderer-controls {
    grid-area: controls;
    width: auto;
    padding: 1rem;
    transform: none;
  }
  .renderer-control { margin-top: .85rem; }
  .renderer-control label {
    align-items: baseline;
    font-size: .78rem;
  }
  .renderer-control input[type="range"] {
    min-height: 2.75rem;
    margin-top: .1rem;
  }
  .renderer-controls > p { font-size: .875rem; }
  .marketplace-layout { min-height: auto; }
  .marketplace-copy {
    order: 1;
    width: auto;
  }
  .marketplace-copy h2 {
    color: var(--text-dark);
    font-size: clamp(2.75rem, 12vw, 4.2rem);
  }
  .marketplace-copy h2 em { color: #4164bd; }
  .marketplace-copy .lede { color: #56575c; }
  .marketplace-copy .eyebrow { color: #3369ce; }
  .purchase-note {
    flex-wrap: wrap;
    color: #56575c;
    font-size: .875rem;
    letter-spacing: .01em;
  }
  .product-shot-final {
    order: 2;
    width: 100%;
    filter: brightness(1.12) saturate(1.04) contrast(1.02);
  }
  .product-shot-final video { transform: none; }
  footer {
    order: 3;
    display: block;
    padding-top: .85rem;
    font-size: .875rem;
  }
  footer small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .brand-rainbow {
    animation: none;
    background-position: 35% 50%;
  }
  .scene {
    height: auto;
    min-height: 100svh;
  }
  .scene-pin { position: relative; }
}