:root {
  --bg: #07060a;
  --ink: #f5f1f7;
  --muted: #9d96a6;
  --line: rgba(255, 255, 255, .13);
  --line-soft: rgba(255, 255, 255, .07);
  --violet: #b766ff;
  --pink: #ff58ba;
  --blue: #6fa8ff;
  --mint: #66f1c1;
  --amber: #ffc56b;
  --chapter-safe: clamp(184px, 13.5vw, 220px);
  --scene-progress: 0;
  --story-progress: 0;
  --route-draw: 0;
  color-scheme: dark;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 0%, rgba(106, 46, 135, .16), transparent 30rem),
    #07060a;
}

button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

.topbar {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 72px;
  padding: 0 3.2vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 6, 10, .92);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  width: max-content;
  font-weight: 760;
  letter-spacing: .02em;
}

.brand b { color: var(--pink); }
.brand-mark,
img.brand-mark,
.brand .yb-mark {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.top-center {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:18px;
}

.view-switch {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-width:224px;
  padding:3px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}

.view-switch::before {
  content:"";
  position:absolute;
  inset:3px auto 3px 3px;
  width:calc(50% - 3px);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,88,186,.2),rgba(111,168,255,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translate3d(0,0,0);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
}

.view-switch.is-experience::before { transform:translate3d(100%,0,0); }
.view-switch a {
  position:relative;
  z-index:1;
  min-height:30px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#87818c;
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.view-switch a:hover,.view-switch a.is-active { color:#f5f1f7; }

.top-context {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d7d1da;
  font-size: 11px;
  letter-spacing: .12em;
}

.top-context i { width: 54px; height: 1px; background: linear-gradient(90deg, var(--pink), var(--blue)); }

.contact-button {
  justify-self: end;
  min-width: 132px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.contact-button span { margin-left: 10px; color: var(--pink); }
.contact-button:hover { background: rgba(255, 88, 186, .1); border-color: var(--pink); transform: translateY(-1px); }

.story { height: 600vh; min-height: 4200px; }

.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 45%, rgba(138, 63, 179, .15), transparent 31%),
    linear-gradient(135deg, #09070d 0%, #06070b 58%, #0a0710 100%);
}

.world-grid {
  position: absolute;
  inset: 72px 0 0;
  z-index: -4;
  opacity: .44;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 84px 84px;
  transform: perspective(800px) rotateX(64deg) translateY(36%) scale(1.35);
  transform-origin: 50% 80%;
}

.world-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg), transparent 25%, transparent 72%, var(--bg));
}

.color-field {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .04);
  opacity: .6;
  transform: translate3d(0,0,0);
}

.color-field-a {
  width: 35vw; height: 35vw; min-width: 450px; min-height: 450px;
  left: -18vw; top: 17vh;
  box-shadow: inset 0 0 140px rgba(148, 67, 218, .08), 0 0 100px rgba(148, 67, 218, .05);
}

.color-field-b {
  width: 26vw; height: 26vw; min-width: 360px; min-height: 360px;
  right: -10vw; bottom: -7vh;
  box-shadow: inset 0 0 110px rgba(73, 130, 255, .08), 0 0 80px rgba(73, 130, 255, .05);
}

.story-intro {
  position: absolute;
  z-index: 20;
  top: 12.5vh;
  left: 7vw;
  max-width: 740px;
  opacity: var(--intro, 1);
  transform: translate3d(0, calc((1 - var(--intro, 1)) * -30px), 0);
  pointer-events: none;
}

.eyebrow, .scene-number {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #bcb4c3;
}

.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 18px var(--pink); }

.story-intro h1, .scene-copy h2, .growth-branch h2, .closing h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.14;
}

.story-intro h1 { font-size: clamp(50px, 6.7vw, 106px); }
.story-intro h1 em, .scene-copy h2 em, .growth-branch h2 em { color: var(--pink); font-style: normal; }
.intro-copy { width: 470px; max-width: 70vw; margin: 22px 0 0; color: #b7afbb; line-height: 1.8; font-size: 14px; }

.chapter-nav {
  position: absolute;
  z-index: 60;
  top: 50%;
  right: 2.2vw;
  width: 132px;
  padding-left: 20px;
  transform: translateY(-50%);
}

.chapter-progress {
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 1px;
  background: rgba(255,255,255,.1);
}

.chapter-progress i {
  display: block;
  width: 1px;
  height: calc(var(--story-progress) * 100%);
  background: linear-gradient(var(--pink), var(--blue));
  box-shadow: 0 0 10px var(--pink);
}

.chapter-nav button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 7px;
  align-items: center;
  padding: 10px 0;
  border: 0;
  color: #6e6974;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.chapter-nav button b { font-size: 9px; font-weight: 600; }
.chapter-nav button span { font-size: 10px; letter-spacing: .03em; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .22s ease, transform .22s ease; }
.chapter-nav button::before {
  content: "";
  position: absolute;
  left: -23.5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: 1.5px solid #3c3741;
  border-radius: 50%;
  background: var(--bg);
  box-sizing: border-box;
  transition: width .2s ease, height .2s ease, margin-top .2s ease, left .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.chapter-nav button.is-active { color: #fff; transform: none; }
.chapter-nav button.is-active::before {
  left: -24.5px; /* keep center aligned with inactive 8px dot at -23.5 */
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-color: var(--pink);
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,88,186,.16);
}
.chapter-nav button:hover::before { border-color: var(--pink); }
.chapter-nav button.is-active span,
.chapter-nav:hover button span,
.chapter-nav:focus-within button span { opacity: 1; transform: none; }

.scene {
  position: absolute;
  z-index: 10;
  inset: 72px 0 0;
  opacity: var(--presence, 0);
  visibility: var(--visibility, hidden);
  pointer-events: none;
  contain: layout paint style;
  transform: translate3d(0, calc((.5 - var(--phase, .5)) * 28px), 0);
}

.scene-copy {
  position: absolute;
  z-index: 7;
  left: 7vw;
  top: 25vh;
  width: min(31vw, 470px);
}

.scene-copy h2 { font-size: clamp(37px, 3.7vw, 64px); }
.scene-copy > p:last-child { width: 390px; max-width: 100%; margin: 22px 0 0; color: #aaa2ae; font-size: 14px; line-height: 1.75; }
.scene-number { color: var(--pink); }

.stage-footer {
  position: absolute;
  z-index: 70;
  left: 7vw; right: 3.4vw; bottom: 24px;
  display: grid;
  grid-template-columns: 190px 1fr 60px;
  align-items: end;
  gap: 20px;
}

.stage-footer p { margin: 0; display: grid; gap: 6px; }
.stage-footer p span { font-size: 9px; font-weight: 700; color: var(--pink); letter-spacing: .13em; }
.stage-footer p small { color: #77717d; font-size: 9px; }
.stage-footer > b { font-size: 10px; font-weight: 500; letter-spacing: .11em; text-align: right; color: #d2cbd6; }
.scroll-track { height: 1px; background: rgba(255,255,255,.12); }
.scroll-track i { display: block; width: calc(var(--story-progress) * 100%); height: 1px; background: linear-gradient(90deg, var(--pink), var(--blue)); box-shadow: 0 0 10px var(--pink); }

/* One persistent product travels across the entire story. */
.product-actor {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: min(24vw, 350px);
  aspect-ratio: .75;
  transform: translate3d(calc(-50% + var(--actor-dx, 5) * 1vw), calc(-50% + var(--actor-dy, 8) * 1vh), 0) scale(var(--actor-scale, 1)) rotate(var(--actor-rotate, 0deg));
  transform-origin: center;
  will-change: transform;
  opacity: var(--actor-opacity, 1);
  transition: opacity .35s ease;
}

.product-halo {
  position: absolute;
  inset: -20%;
  border: 1px solid rgba(255, 88, 186, .22);
  border-radius: 26px;
  transform: rotate(calc(var(--story-progress) * 220deg));
  opacity: var(--actor-halo, 1);
}

.product-halo::before, .product-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,88,186,.16);
}
.product-halo::before { width: 8px; height: 8px; top: 12%; left: 15%; }
.product-halo::after { width: 6px; height: 6px; right: 8%; bottom: 21%; background: var(--blue); box-shadow: 0 0 0 3px rgba(22,195,224,.16); }

.product-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--actor-radius, 50%);
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translate3d(0,0,0);
}

.product-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: scale(1.015); }
.product-mask { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(4,4,7,.94)); opacity: var(--actor-mask, .7); }
.product-id { position: absolute; left: 18px; right: 18px; top: 15px; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .13em; color: rgba(255,255,255,.66); }
.product-id span, .product-id b { padding: 4px 6px; background: rgba(7,6,10,.76); }
.product-id b { color: var(--pink); }
.product-label { position: absolute; left: 18px; right: 18px; bottom: 17px; display: grid; gap: 3px; color: white; }
.product-label small { font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.product-label b { font-size: 15px; font-weight: 560; }
.label-cn { opacity: var(--label-cn, 1); transform: translateY(calc((1 - var(--label-cn, 1)) * -10px)); }
.label-en { opacity: var(--label-en, 0); transform: translateY(calc((1 - var(--label-en, 0)) * 10px)); }
.actor-line { position: absolute; display: block; width: 52px; height: 1px; background: rgba(255,255,255,.35); }
.actor-line-a { left: -66px; top: 38%; }
.actor-line-b { right: -66px; bottom: 31%; }

/* Scene 01 — vision scan */
.scene-scan .scene-copy {
  top: 51vh;
  opacity: calc(var(--presence, 0) * (1 - var(--intro, 1)));
  transform: translateY(calc(var(--intro, 1) * 22px));
}
.scanner {
  position: absolute;
  left: 37%; top: 19%;
  width: 37vw; height: 62vh;
  min-width: 500px; min-height: 430px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  transform: translate3d(0,0,0) scale(calc(.92 + var(--presence, 0) * .08));
}

.scanner::before, .scanner::after { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(255,255,255,.1); border-radius: 18px; }
.scanner::after { inset: 26%; border-style: solid; border-color: rgba(255,88,186,.16); border-radius: 12px; }
.scanner-corner { position: absolute; width: 32px; height: 32px; border-color: var(--pink); border-style: solid; }
.scanner .c1 { left: 7%; top: 11%; border-width: 1px 0 0 1px; }
.scanner .c2 { right: 7%; top: 11%; border-width: 1px 1px 0 0; }
.scanner .c3 { left: 7%; bottom: 11%; border-width: 0 0 1px 1px; }
.scanner .c4 { right: 7%; bottom: 11%; border-width: 0 1px 1px 0; }
.scan-beam { position: absolute; z-index: 4; left: 14%; right: 14%; top: 15%; height: 1px; background: linear-gradient(90deg, transparent, #fff, var(--pink), transparent); box-shadow: 0 0 16px var(--pink); transform: translateY(calc(var(--phase, .5) * 37vh)); }
.scan-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(111,168,255,.25); }
.ring-a { inset: 5%; border-left-color: transparent; transform: rotate(calc(var(--phase, .5) * 100deg)); }
.ring-b { inset: 19%; border-right-color: transparent; transform: rotate(calc(var(--phase, .5) * -150deg)); }
.focus-dot { position: absolute; width: 8px; height: 8px; border: 1.5px solid var(--blue); border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 0 3px rgba(22,195,224,.14); box-sizing: border-box; }
.d1 { top: 20%; left: 27%; } .d2 { right: 19%; top: 44%; } .d3 { left: 23%; bottom: 16%; }
.scan-status { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); white-space: nowrap; font-size: 8px; letter-spacing: .14em; color: #88818e; }
.scan-status i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 7px; background: var(--mint); box-shadow: 0 0 8px var(--mint); }

.extracted-data {
  position: absolute;
  z-index: 5;
  right: max(168px, 9vw);
  top: 28vh;
  width: 200px;
  border-left: 1px solid rgba(255,88,186,.35);
  padding-left: 32px;
  transform: translateX(calc((1 - var(--presence,0)) * 30px));
}
.extracted-data > p { margin: 0 0 15px; color: var(--pink); font-size: 8px; letter-spacing: .16em; }
.extracted-data div { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.extracted-data span, .extracted-data small { color: #77717e; font-size: 8px; }
.extracted-data b { font-size: 12px; font-weight: 500; }
.extracted-data small { display: block; margin-top: 12px; }

/* Scene 02 — semantic translation */
.scene-translate .scene-copy { top: 18vh; }
.language-field {
  position: absolute;
  left: 40vw; right: var(--chapter-safe); top: 31vh; bottom: 13vh;
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  align-items: center;
}
.language-side { min-height: 250px; padding: 38px; border: 1px solid var(--line); background: rgba(9,8,13,.78); transform: translateX(calc(var(--side, 1) * (1 - var(--presence,0)) * 45px)); }
.language-cn { --side: -1; border-radius: 30px 5px 5px 30px; }
.language-en { --side: 1; border-radius: 5px 30px 30px 5px; }
.language-side > span { color: #746e79; font-size: 8px; letter-spacing: .14em; }
.language-side strong { display: block; margin-top: 36px; font-size: clamp(19px, 2vw, 31px); font-weight: 510; letter-spacing: -.03em; }
.language-side p { min-height: 40px; color: #a69eaa; font-size: 11px; line-height: 1.7; }
.syntax-row { display: flex; gap: 6px; margin-top: 30px; }
.syntax-row i { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #88818e; font-size: 7px; font-style: normal; }
.translation-core { position: relative; z-index: 3; display: grid; place-items: center; aspect-ratio: 1; background: #09070d; border-radius: 50%; }
.translation-core svg { position: absolute; width: 145px; height: 145px; transform:rotate(calc(var(--phase,.5) * 120deg)); }
.translation-core circle, .translation-core path { fill: none; stroke: rgba(255,88,186,.28); stroke-width: 1; }
.translation-core circle:nth-child(2) { stroke: rgba(111,168,255,.25); stroke-dasharray: 4 8; }
.translation-core b { font-size: 28px; font-weight: 430; color: white; }
.translation-core span { position: absolute; top: 63%; color: var(--pink); font-size: 7px; letter-spacing: .14em; }

/* Scene 03 — a storefront assembles visibly. */
.scene-store .scene-copy { top: 23vh; }
.site-construction { position: absolute; left: 40vw; right: var(--chapter-safe); top: 17vh; width: auto; height: 67vh; perspective: 1100px; }
.build-axis { position: absolute; z-index: -1; background: rgba(255,255,255,.09); }
.axis-x { left: -9%; right: 0; top: 50%; height: 1px; transform: scaleX(var(--presence,0)); }
.axis-y { top: -8%; bottom: -7%; left: 50%; width: 1px; transform: scaleY(var(--presence,0)); }
.browser-shell { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: #fff; color: #17151a; box-shadow: 0 34px 90px rgba(0,0,0,.5); transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--presence,0)) * 18deg)) translateY(calc((1 - var(--presence,0)) * 70px)) scale(calc(.88 + var(--presence,0) * .12)); }
.browser-bar { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #d8d4cf; background: #eae6df; font-size: 7px; }
.browser-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #c8c3bc; }
.browser-bar span { margin-left: 10px; color: #817b76; }
.browser-bar b { margin-left: auto; color: #842f72; font-size: 7px; }
.site-nav { height: 56px; padding: 0 30px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #ddd8d0; font-size: 9px; }
.site-nav strong { margin-right: auto; letter-spacing: .1em; }
.site-nav button { border: 0; background: transparent; color: #17151a; font-size: 9px; }
.site-hero { height: calc(100% - 140px); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 280px; }
.site-hero-copy { padding: 8vh 0 3vh 4vw; }
.site-hero-copy small { color: #756f6a; font-size: 7px; letter-spacing: .15em; }
.site-hero-copy h3 { margin: 2.4vh 0; font: 500 clamp(32px,4vw,68px)/.94 Georgia, serif; letter-spacing: -.05em; }
.site-hero-copy button { border: 0; border-bottom: 1px solid #17151a; padding: 0 0 6px; background: none; color: #17151a; font-size: 9px; }
.site-product-echo { position: relative; background: #090909 url("assets/placeholders/north-america-streetwear-model-detw.jpg") 50% 28%/cover no-repeat; clip-path: inset(calc((1 - var(--presence,0)) * 100%) 0 0); }
.site-product-echo::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; }
.site-product-echo::after { content: "AI-BUILT\A PRODUCT STORY"; white-space: pre; position: absolute; left: 10%; bottom: 8%; font-size: 7px; line-height: 1.6; letter-spacing: .14em; }
.site-grid { height: 50px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ded9d2; }
.site-grid div { padding: 10px 18px; display: flex; align-items: center; gap: 10px; border-right: 1px solid #ded9d2; transform: translateY(calc((1 - var(--presence,0)) * 44px)); }
.site-grid div:nth-child(2) { transition-delay: .08s; }.site-grid div:nth-child(3) { transition-delay: .16s; }
.site-grid b { color: #9b9590; font-size: 7px; }.site-grid span { font: italic 12px Georgia, serif; }
.build-log { position: absolute; z-index: 5; left: 10px; right: 10px; top: -38px; min-height: 30px; padding: 0 12px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; border: 1px solid rgba(255,255,255,.13); background: rgba(9,8,13,.94); color: #aaa3ae; font-size:12px; transform: translateY(calc((1 - var(--presence,0)) * 16px)); }
.build-log span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.build-log i { color: var(--pink); font-style: normal; }
.build-log span:last-child i { color: var(--mint); }

/* Scene 04 — plan is generated, a person confirms it. */
.scene-ads .scene-copy { top: 22vh; }
.campaign-console { position: absolute; left: 40vw; right: var(--chapter-safe); top: 16vh; bottom: 12vh; display: grid; grid-template-columns: 1fr 1fr 1.38fr; grid-template-rows: 44px 1fr 74px; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: #0b0910; transform: perspective(1000px) rotateY(calc((1 - var(--presence,0)) * -8deg)) translateX(calc((1 - var(--presence,0)) * 48px)); }
.campaign-head { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line-soft); font-size: 8px; letter-spacing: .12em; }
.campaign-head > small { margin: 0 auto; color: #77717c; letter-spacing: .04em; }
.campaign-head i { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px rgba(47,99,242,.35); }
.campaign-head b { padding: 6px 9px; border-radius: 999px; background: rgba(47,99,242,.1); color: var(--violet); font-weight: 500; }
.ad-creative { position: relative; overflow: hidden; margin-bottom:42px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #09080b; color: #f7f3f7; transform: translateY(calc((1 - var(--presence,0)) * 42px)); }
.ad-creative::after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(7,6,10,.52) 0%,rgba(7,6,10,.04) 35%,rgba(7,6,10,.95) 86%); pointer-events:none; }
.creative-b { transform: translateY(calc((1 - var(--presence,0)) * 62px)); }
.ad-creative small { position: relative; z-index: 3; font-size: 6px; letter-spacing: .12em; }
.ad-creative strong { position: absolute; z-index: 3; left: 15px; bottom: 35px; font: 500 clamp(14px,1.3vw,21px)/1.06 Georgia, serif; }
.ad-creative > span { position: absolute; z-index: 3; left: 15px; bottom: 16px; color: var(--pink); font-size: 6px; letter-spacing: .12em; }
.creative-product { position: absolute; inset: 0; transform: scale(1.025); }
.creative-a .creative-product { background:#fff url("assets/placeholders/psylos1-detw-product.webp") 50% 50%/contain no-repeat; filter:none; }
.creative-b .creative-product { background:#050505 url("assets/placeholders/north-america-streetwear-model-detw.jpg") 50% 24%/cover no-repeat; }
.variant-badge { position:absolute; z-index:4; right:12px; top:12px; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(7,6,10,.72); color:#fff; font-size:15px; }
.ab-split { position:absolute; z-index:8; left:calc(12px + (100% - 44px) / 3.38 + 5px); bottom:90px; width:230px; min-height:38px; padding:5px 10px; display:grid; grid-template-columns:auto 1fr auto 1fr auto; grid-template-rows:auto auto; align-items:center; gap:2px 6px; border:1px solid rgba(255,88,186,.36); border-radius:12px; background:#0b0910; color:#ded7e1; transform:translateX(-50%); pointer-events:none; }
.ab-split i { height:1px; background:linear-gradient(90deg,var(--pink),var(--blue)); }
.ab-split b { color:var(--pink); font-size:12px; }
.ab-split span { font-size:12px; }
.ab-split small { grid-column:1/-1; padding:0; color:#88818c; white-space:nowrap; text-align:center; }
.plan-stack { display: grid; align-content: start; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.plan-stack > div { min-height: 56px; padding: 11px 14px; display: grid; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.plan-stack span { color: #77717c; font-size: 7px; letter-spacing: .08em; }.plan-stack b { font-size: 11px; font-weight: 520; }
.budget-line i { position: relative; display: block; width: 100%; height: 2px; margin-top: 4px; background: #25212a; }.budget-line i::after { content:""; position: absolute; left: 0; width: 61%; height: 2px; background: linear-gradient(90deg,var(--pink),var(--blue)); }
.audience-line p { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }.audience-line i { padding: 4px 6px; border: 1px solid var(--line); border-radius: 999px; color: #c0b9c5; font-size: 6px; font-style: normal; }
.human-gate { grid-column: 1/-1; padding: 10px 12px 10px 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,88,186,.32); border-radius: 14px; background: rgba(255,88,186,.045); transition: border-color .3s ease, background .3s ease; }
.human-gate > span { color: #b8b0bd; font-size: 12px; letter-spacing: .08em; }.human-gate button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--pink); color: #190713; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 0 0 calc(var(--phase,.5) * 7px) rgba(255,88,186,.07); transition: transform .2s ease, background .25s ease; }.human-gate button:hover{transform:translateY(-2px)}.human-gate button i { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:7px; border:1px solid rgba(25,7,19,.35); border-radius:50%; font-style:normal; }
.campaign-console.is-confirmed .human-gate { border-color: rgba(102,241,193,.42); background: rgba(102,241,193,.05); }
.campaign-console.is-confirmed .human-gate button { background: var(--mint); color: #07120e; }
.campaign-console.is-confirmed .campaign-head b { color: var(--mint); background: rgba(102,241,193,.08); }

/* Scene 05 — three visible routes, one reasoned recommendation. */
.scene-logistics .scene-copy { top: 19vh; width:min(33vw,500px); }
.scene-logistics .scene-copy h2 em { white-space:normal; }
.scene-logistics .scene-copy > p:last-child { color: #bbb5be; }
.logistics-photo { position: absolute; inset: 0; margin: 0; clip-path: inset(0 calc((1 - var(--presence,0)) * 45%) 0 0); }
.logistics-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .28; transform: scale(calc(1.08 - var(--presence,0) * .08)); }
.logistics-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#07060a 0%,rgba(7,6,10,.92) 29%,rgba(7,6,10,.45) 58%,rgba(7,6,10,.78)); }
.route-world { position: absolute; left: 34vw; right: var(--chapter-safe); top: 15vh; bottom: 11vh; }
.route-map { position: absolute; inset: 0 0 18%; width: 100%; height: 82%; overflow: visible; }
.map-land { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.13); stroke-width: 1; }
.port { fill: #fff; stroke-width: 3; }.port.origin { stroke: var(--violet); fill:#fff; }.port.target { stroke: #2ee6a8; fill:#fff; }
.route { fill: none; stroke-width: 2; stroke-dasharray: var(--route-draw, 0) 100; vector-effect: non-scaling-stroke; }
.route-cost { stroke: rgba(124,92,242,.7); }.route-balance { stroke: #2ee6a8; stroke-width: 3; }.route-speed { stroke: rgba(47,99,242,.8); }
.route-world[data-selected="cost"] .route:not(.route-cost),
.route-world[data-selected="balance"] .route:not(.route-balance),
.route-world[data-selected="speed"] .route:not(.route-speed) { opacity:.2; }
.route-world[data-selected="cost"] .route-cost { stroke-width:4; opacity:1; }
.route-world[data-selected="balance"] .route-balance { stroke-width:4; opacity:1; }
.route-world[data-selected="speed"] .route-speed { stroke-width:4; opacity:1; }
.parcel-marker { transform: translate(calc(245px + var(--phase,.5) * 390px), calc(247px - var(--phase,.5) * 70px)); }
.parcel-marker .parcel-core { fill: #2ee6a8; }
.parcel-marker .parcel-ring { stroke: #2ee6a8; stroke-width: 2; opacity: .55; }
.route-card { position: absolute; width: 170px; padding: 11px 13px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,7,11,.92); color:inherit; text-align:left; cursor:pointer; transition: transform .28s ease, border-color .28s ease, background .28s ease; }
.route-card span { color: #8d8691; font-size: 7px; }.route-card b { font-size: 12px; font-weight: 550; }.route-card small { color:#756f7a; font-size:7px; }
.route-card-cost { left: 15%; bottom: 5%; }.route-card-balance { left: 45%; bottom: 1%; }.route-card-speed { right: 1%; bottom: 11%; }
.route-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.34); }
.route-card.is-selected { border-color:rgba(255,88,186,.7); transform:translateY(-7px); box-shadow:0 16px 34px rgba(0,0,0,.35); }
.route-card.is-recommended.is-selected { border-color: rgba(46,230,168,.7); box-shadow: 0 0 0 1px rgba(46,230,168,.14), 0 16px 34px rgba(0,0,0,.35); background:rgba(9,18,16,.96); }
.route-card > i { position:absolute; right:8px; top:8px; padding:3px 5px; border-radius:999px; background:rgba(46,230,168,.16); color:#2ee6a8; font-size:5px; font-style:normal; letter-spacing:.08em; }
.decision-reason { position: absolute; top: 7%; right: 1%; width: 220px; padding: 13px 15px; border-left: 1px solid #2ee6a8; background: rgba(7,6,10,.65); }
.decision-reason span { color: #2ee6a8; font-size: 7px; letter-spacing: .13em; }.decision-reason p { margin: 8px 0 0; color: #a9a2ac; font-size: 9px; line-height: 1.65; }

/* Scene 06 — concrete event ledger and visible V1 → V2 update. */
.scene-memory .scene-copy { top:20vh; width:min(31vw,470px); }
.scene-memory .scene-copy > p:last-child { width:min(28vw,360px); }
.memory-ledger { position:absolute; left:40vw; right:var(--chapter-safe); top:14vh; bottom:11vh; display:grid; grid-template-rows:auto 1fr; gap:18px; }
.event-ledger { position:relative; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(255,255,255,.035),transparent); transform:translateY(calc((1 - var(--presence,0))*28px)); }
.event-ledger header,.ledger-row { display:grid; grid-template-columns:45px 105px 1fr auto; align-items:center; min-height:48px; padding:0 16px; border-bottom:1px solid var(--line-soft); }
.event-ledger header { grid-template-columns:1fr auto; color:var(--pink); letter-spacing:.1em; }
.event-ledger header b { color:#ddd7e2; font-weight:520; letter-spacing:0; }
.ledger-row i { color:var(--pink); font-style:normal; }.ledger-row span{color:#8d8792}.ledger-row b{font-weight:520}.ledger-row em{color:var(--mint);font-style:normal;letter-spacing:.08em}
.version-diff { min-height:260px; display:grid; grid-template-columns:1fr 136px 1fr; gap:14px; align-items:stretch; }
.mini-site { position:relative; padding:24px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#0b0910; transform:perspective(800px) rotateY(calc((1 - var(--presence,0))*8deg)) translateY(calc((1 - var(--presence,0))*38px)); }
.mini-site::before { content:""; position:absolute; right:-2%; top:7%; width:45%; aspect-ratio:.75; border-radius:12px; opacity:.84; }
.version-before::before { background:#fff url("assets/placeholders/psylos1-detw-product.webp") 50% 50%/contain no-repeat; }
.version-after::before { background:#050505 url("assets/placeholders/north-america-streetwear-model-detw.jpg") 50% 24%/cover; }
.mini-site>span { position:relative; z-index:2; display:block; width:58%; color:#8b8490; letter-spacing:.06em; }.mini-site strong{position:relative;z-index:2;display:block;width:58%;margin-top:18px;font:500 clamp(19px,2vw,31px)/1.05 Georgia,serif}.mini-site p{position:relative;z-index:2;width:57%;margin:14px 0 0;color:#aaa2ae;line-height:1.55}.mini-site small{display:none}.mini-creative{position:absolute;left:24px;right:24px;bottom:26px;display:flex;gap:6px}.mini-creative i{height:3px;flex:1;background:#302b35}.mini-creative i:first-child{background:#6e6672}.version-after{border-color:rgba(255,88,186,.38);background:linear-gradient(145deg,#120b14,#0a0b10)}.version-after>span{color:var(--pink)}.version-after .mini-creative i:first-child{order:2;background:var(--pink)}
.diff-bridge { display:grid; align-content:center; gap:12px; color:#8e8792; }
.diff-bridge > span { color:var(--pink); font-size:12px; letter-spacing:.1em; text-align:center; }
.diff-items { display:grid; gap:9px; }
.diff-items p { position:relative; margin:0; padding:0 0 8px 13px; border-bottom:1px solid var(--line-soft); display:grid; gap:3px; }
.diff-items p::before { content:""; position:absolute; left:0; top:5px; width:5px; height:5px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px rgba(255,88,186,.55); }
.diff-items b { color:#ded8e1; font-size:12px; font-weight:550; }
.diff-items em { color:#8e8792; font-size:12px; font-style:normal; line-height:1.4; }
body[data-scene="5"] .product-id,
body[data-scene="5"] .product-label { opacity:0; }
body[data-scene="5"] .product-frame { border-color:rgba(255,88,186,.22); }
body[data-scene="2"] .product-actor,
body[data-scene="5"] .product-actor { opacity:0; }
body[data-scene="2"] .product-id,
body[data-scene="2"] .product-label,
body[data-scene="2"] .product-halo,
body[data-scene="2"] .actor-line { opacity:0; }

/* The side branch is intentionally secondary to the core operating loop. */
.growth-branch {
  position: relative;
  min-height: 92vh;
  padding: 16vh 8vw 13vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 9vw;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(135deg,#07060a,#0d0812 55%,#080b11);
}
.growth-branch::before { content:""; position:absolute; left:43%; top:0; width:1px; height:34%; background:linear-gradient(var(--pink),transparent); }
.branch-main p { margin:0 0 25px; color:var(--pink); font-size:9px; letter-spacing:.16em; }.growth-branch h2{font-size:clamp(42px,4.4vw,70px)}
.branch-line { position:absolute; left:45%; top:49%; width:11%; height:1px; background:rgba(255,255,255,.17); transform:rotate(-23deg); transform-origin:left center; }.branch-line::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink)}.branch-line i{position:absolute;left:40%;top:-3px;width:7px;height:7px;border:1px solid var(--blue);border-radius:50%}.branch-line b{position:absolute;right:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px var(--blue)}
.creator-branch { position:relative; min-height:68vh; }
.creator-visual{position:absolute;inset:0;margin:0;overflow:hidden;clip-path:polygon(10% 0,100% 0,100% 91%,91% 100%,0 100%,0 10%);background:#080a0f}
.creator-visual::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(7,6,10,.96) 0%,rgba(7,6,10,.55) 39%,rgba(7,6,10,.05) 75%),linear-gradient(0deg,rgba(7,6,10,.84),transparent 56%)}
.creator-visual::after{content:"LIVE CREATOR SIGNAL";position:absolute;z-index:3;right:18px;top:18px;color:var(--blue);font-size:12px;letter-spacing:.15em}
.creator-visual img{width:100%;height:100%;object-fit:cover;object-position:52% 52%;display:block;filter:saturate(.72) contrast(1.06) brightness(.76)}
.creator-corner{position:absolute;z-index:4;width:42px;height:42px;border-color:var(--blue)}.creator-corner-a{left:16px;top:16px;border-left:1px solid;border-top:1px solid}.creator-corner-b{right:16px;bottom:16px;border-right:1px solid;border-bottom:1px solid}
.creator-map{position:absolute;z-index:4;right:18px;top:48%;display:grid;justify-items:end;gap:7px;color:#d7dcea;font-size:12px;letter-spacing:.09em}.creator-map i{width:132px;height:1px;background:linear-gradient(90deg,transparent,var(--blue))}.creator-map i:nth-of-type(2){width:90px;background:linear-gradient(90deg,transparent,var(--pink))}
.creator-copy{position:absolute;z-index:5;left:-5%;right:7%;bottom:7%;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.branch-tag { color:var(--blue);font-size:8px;letter-spacing:.15em}.creator-branch strong{display:block;margin-top:14px;font-size:clamp(54px,6.6vw,96px);font-weight:440;letter-spacing:-.07em}.creator-copy>p{max-width:420px;color:#c2bbc7;font-size:13px;line-height:1.8}.creator-signal{margin-top:22px;padding:12px 14px;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;background:rgba(5,5,8,.75);color:#b0aab5;font-size:8px}.creator-signal i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}.creator-signal b{color:#5f5a64}

.closing {
  min-height: 82vh;
  padding: 14vh 8vw;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  background:
    linear-gradient(90deg,rgba(7,6,10,.98),rgba(7,6,10,.58)),
    url("assets/placeholders/global-logistics.webp") center/cover;
  border-top:1px solid var(--line);
}
.closing>p{color:var(--pink);font-size:9px;letter-spacing:.17em}.closing h2{max-width:1100px;font-size:clamp(48px,5.4vw,86px)}.closing button{margin-top:42px;padding:15px 22px;border:1px solid var(--pink);border-radius:999px;background:var(--pink);color:#170713;font-size:12px;font-weight:700;cursor:pointer}.closing button span{margin-left:18px}.closing small{margin-top:18px;color:#77717d;font-size:9px}

.contact-dock { position: fixed; z-index: 120; right: 20px; bottom: 22px; }
.contact-dock > button { position:relative; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background:#121018; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.contact-dock > button svg { display:block; width:20px; height:20px; }
.contact-dock > button::after { content:none; }
.qr-card { position:absolute; right:0; bottom:58px; width:190px; padding:16px; display:grid; justify-items:center; gap:7px; border:1px solid var(--line); border-radius:16px; background:#111017; opacity:0; pointer-events:none; transform:translateY(8px) scale(.97); transition:opacity .2s ease,transform .2s ease; }
.contact-dock:hover .qr-card,.contact-dock:focus-within .qr-card{opacity:1;transform:none}.qr-card b{font-size:10px}.qr-card small{color:#77717d;font-size:8px}
.qr-placeholder{position:relative;width:120px;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#fff;border:1px solid #e8eef8}.qr-placeholder img{display:block;width:100%;height:100%;object-fit:contain}.qr-placeholder.large{width:180px}

.contact-modal { position:fixed; z-index:300; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; }
.contact-modal.is-open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(4,3,6,.86);cursor:pointer}.modal-card{position:relative;width:min(420px,calc(100vw - 32px));padding:38px;display:grid;justify-items:center;gap:16px;border:1px solid rgba(255,255,255,.17);border-radius:26px;background:#111017;box-shadow:0 35px 100px rgba(0,0,0,.55)}.modal-close{position:absolute;right:17px;top:13px;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}.modal-card>span{color:var(--pink);font-size:8px;letter-spacing:.16em}.modal-card h2{margin:0;font-size:26px;font-weight:500}.modal-card p{margin:0;color:#817a86;font-size:10px}

@media (max-height: 780px) and (min-width: 761px) {
  .memory-ledger { top:12vh; bottom:9vh; gap:12px; }
  .event-ledger header, .ledger-row { min-height:42px; }
  .version-diff { min-height:230px; }
  .mini-site { padding:18px; }
  .mini-site strong { margin-top:12px; font-size:clamp(18px,1.7vw,24px); }
  .mini-site p { margin-top:9px; font-size:13px; line-height:1.4; }
  .mini-creative { left:18px; right:18px; bottom:18px; }
  .diff-items { gap:6px; }
  .diff-items p { padding-bottom:5px; }
}

@media (max-width: 1100px) {
  .top-context { display:none; }
  .chapter-nav { display: none; }
  .scene-copy { left: 5vw; width: 36vw; }
  .story-intro { left: 5vw; }
  .stage-footer { left: 5vw; }
  .extracted-data { right: 5vw; }
  .language-field { left: 33vw; right: 5vw; }
  .site-construction { left:43vw; right:5vw; width:auto; }
  .campaign-console { left:43vw; right:5vw; }
  .route-world, .memory-ledger { left:43vw; right:4vw; }
}

@media (max-width: 760px) {
  .topbar { padding:0 14px; grid-template-columns:auto 1fr auto; gap:8px; }.top-center{justify-self:center}.view-switch{min-width:194px}.view-switch a{padding:0 9px}.top-context{display:none}.contact-button{min-width:0;padding:0 12px}.contact-button span{display:none}
  .story { height: 600vh; min-height: 4200px; }.story-stage{min-height:620px}
  .story-intro{left:22px;right:22px;top:14vh}.story-intro h1{font-size:47px}.intro-copy{font-size:12px;max-width:88vw}
  .scene-copy{left:22px;right:22px;top:14vh!important;width:auto}.scene-copy h2{font-size:38px}.scene-copy>p:last-child{font-size:11px;width:300px}
  .product-actor{width:180px}.scanner{left:18%;top:36%;min-width:340px;width:78vw;height:44vh;min-height:330px}.extracted-data{display:none}
  .language-field{left:20px;right:20px;top:43vh;bottom:12vh;grid-template-columns:1fr 66px 1fr}.language-side{padding:18px;min-height:210px}.language-side strong{font-size:16px;margin-top:24px}.language-side p{font-size:8px}.translation-core svg{width:74px}.syntax-row{display:none}
  .site-construction{left:20px;right:20px;top:43vh;width:auto;height:42vh}.site-hero-copy{padding:4vh 0 2vh 4vw}.site-hero-copy h3{font-size:28px}.build-log{display:none}
  .campaign-console{left:20px;right:20px;top:42vh;bottom:10vh;grid-template-columns:1fr 1fr;grid-template-rows:36px 1fr 62px}.campaign-head>small{display:none}.plan-stack{display:none}.ad-creative{margin-bottom:34px}.ab-split{left:50%;bottom:75px;width:190px}.human-gate button{font-size:8px;padding:0 9px}.human-gate>span{max-width:132px}
  .route-world{left:14px;right:14px;top:40vh;bottom:10vh}.decision-reason{display:none}.route-card{width:130px}.route-card-cost{left:0}.route-card-balance{left:34%}.route-card-speed{right:0}.route-card small{display:none}
.memory-ledger{left:14px;right:14px;top:40vh;bottom:8vh;grid-template-rows:118px 1fr;gap:10px}.event-ledger header{display:none}.ledger-row{grid-template-columns:30px 82px 1fr;min-height:38px;padding:0 8px}.ledger-row em{display:none}.version-diff{min-height:0;grid-template-columns:1fr 48px 1fr;gap:7px}.mini-site{padding:14px}.mini-site>strong,.mini-site>p{width:100%}.mini-site::before{display:none}.mini-site small{left:14px;bottom:10px}.diff-bridge>span{font-size:12px;writing-mode:vertical-rl}.diff-items{display:none}
  .stage-footer{left:22px;right:22px;grid-template-columns:120px 1fr 43px}.stage-footer p small{display:none}
  .growth-branch{grid-template-columns:1fr;gap:60px;padding:12vh 22px}.branch-line{display:none}.creator-branch{padding:28px}.closing{padding:12vh 22px}.closing h2{font-size:48px}
  .contact-dock{right:13px;bottom:13px}
}

@media (max-width: 540px) {
  .brand > span { display:none; }
  .view-switch { min-width:180px; }
  .contact-button { font-size:12px; padding:0 9px; }
}

/* Desktop readability pass: keep the cinematic composition while giving the story room to breathe. */
@media (min-width: 1121px) {
  .story-intro{top:15vh;left:6vw;max-width:500px}
  .story-intro h1{font-size:clamp(54px,4.85vw,78px);line-height:.97}
  .intro-copy{width:445px;font-size:15px;line-height:1.75}
  .scene{inset:88px 0 0}
  .scene-copy{top:20vh;width:min(30vw,430px)}
  .scene-copy h2{font-size:clamp(38px,3.25vw,56px);line-height:1.1;text-wrap:balance}
  .scene-copy>p:last-child{width:360px;font-size:15px;line-height:1.8}
  .eyebrow,.scene-number{font-size:11px;letter-spacing:.14em}
  .stage-footer{bottom:34px}
  .stage-footer p small,.stage-footer> b{font-size:10px}
  .scene-logistics .scene-copy{width:min(29vw,420px)}
  .scene-logistics .scene-copy em{white-space:normal}
  .route-world{left:39vw;top:17vh;bottom:13vh}
  .route-card{width:180px}
  .route-card small{font-size:8px}
  .decision-reason{width:240px;top:9%;right:2%}
  .scene-memory .scene-copy{top:17vh}
  .memory-ledger{left:38vw;top:17vh;bottom:13vh}
  .event-ledger header,.ledger-row{min-height:54px}
  .ledger-row{font-size:11px}
  .version-diff{grid-template-columns:1fr 112px 1fr}
  .product-actor{width:min(22vw,325px)}
  .scanner{left:43%;width:36vw;min-width:470px}
  .extracted-data{right:max(150px,8.5vw);width:160px;padding-left:28px}
  .chapter-nav{right:.8vw;width:120px}
  .growth-branch{padding:12vh 7vw 11vh;grid-template-columns:.92fr 1.08fr;gap:8vw}
  .creator-branch{min-height:66vh}
  .creator-copy{left:4%;right:auto;bottom:5%;width:min(290px,44%);max-width:calc(100% - 172px);padding:21px 23px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(7,18,38,.82);box-shadow:0 20px 50px rgba(0,0,0,.22);backdrop-filter:blur(14px)}
  .creator-branch strong{margin-top:10px;color:#fff;font-size:clamp(32px,3.2vw,46px);letter-spacing:-.045em}
  .creator-copy>p{max-width:none;margin:14px 0 0;color:#dbe5f6;font-size:14px;line-height:1.7}
  .creator-signal{margin-top:16px;font-size:11px}
  .creator-map{top:15%;right:16px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Readability floor for all visible supporting copy. */
:is(
  .top-context,
  .eyebrow,
  .scene-number,
  .chapter-nav button b,
  .chapter-nav button span,
  .stage-footer p span,
  .stage-footer p small,
  .stage-footer > b,
  .scan-status,
  .extracted-data > p,
  .extracted-data span,
  .extracted-data small,
  .language-side > span,
  .language-side p,
  .syntax-row i,
  .translation-core span,
  .browser-bar,
  .browser-bar b,
  .site-nav,
  .site-nav button,
  .site-hero-copy small,
  .site-hero-copy button,
  .site-grid b,
  .build-log,
  .campaign-head,
  .campaign-head > small,
  .ad-creative small,
  .ad-creative > span,
  .ab-split small,
  .plan-stack span,
  .plan-stack b,
  .audience-line i,
  .human-gate > span,
  .human-gate button,
  .route-card span,
  .route-card small,
  .route-card > i,
  .decision-reason span,
  .decision-reason p,
  .branch-main p,
  .branch-tag,
  .creator-signal,
  .closing > p,
  .closing small,
  .contact-dock > button,
  .qr-card b,
  .qr-card small,
  .modal-card > span,
  .modal-card p,
  .scene-copy > p:last-child
) { font-size: 12px !important; }

.site-product-echo::after,

/* V5.3: calm language comparison, a visible controlled experiment, clear before/after. */
.language-field{left:39vw;right:clamp(160px,13vw,205px);top:10vh;bottom:11vh;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:58px;align-items:stretch}
.language-side{min-width:0;min-height:0;padding:28px 24px;display:flex;flex-direction:column;justify-content:center;border-radius:20px;transform:none}
.language-side>span{font-size:12px!important;line-height:1.5;letter-spacing:.06em}
.language-side strong{margin-top:26px;font-size:clamp(24px,2.15vw,34px);line-height:1.3;letter-spacing:-.02em;overflow-wrap:normal;word-break:normal}
.language-side p{min-height:0;margin:20px 0 0;font-size:14px!important;line-height:1.7}
.syntax-row{flex-wrap:wrap;gap:6px;margin-top:24px}
.syntax-row i{padding:5px 8px;font-size:11px!important}
.translation-core{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:15px}
.translation-core svg,.translation-core span{display:none}
.translation-core b{font-size:23px}
.translation-core::after{content:'→';position:absolute;top:calc(100% + 8px);color:var(--violet);font-size:26px;line-height:1}

.campaign-console{left:39vw;right:clamp(160px,13vw,205px);top:7vh;bottom:11vh;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:34px 64px minmax(175px,1fr) 36px 58px;gap:8px 14px;padding:12px 16px;transform:translateX(calc((1 - var(--presence,0)) * 24px));border-radius:22px}
.campaign-head{grid-row:1;padding:0 2px;letter-spacing:.08em}
.campaign-head>b{font-size:12px;white-space:nowrap}
.ab-source{position:relative;grid-column:1/-1;grid-row:2;min-width:0}
.ab-audience{position:relative;z-index:2;width:max-content;max-width:100%;margin:0 auto;padding:4px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;font-size:12px}
.ab-audience svg{width:25px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ab-audience b{font-size:13px;font-weight:650}.ab-audience>span{padding-left:8px;border-left:1px solid var(--line);font-size:11px}
.ab-fork{position:absolute;inset:31px 0 0;color:var(--violet)}
.ab-fork>i{position:absolute;display:block;border-color:currentColor;border-style:solid}
.fork-stem{left:50%;top:0;height:11px;border-width:0 0 0 2px}
.fork-left{left:25%;right:50%;top:10px;bottom:0;border-width:2px 0 0 2px;border-top-left-radius:8px}
.fork-right{left:50%;right:25%;top:10px;bottom:0;border-width:2px 2px 0 0;border-top-right-radius:8px}
.flow-dot{position:absolute;left:25%;top:7px;width:25%;height:8px;opacity:0;animation:abFlowLeft 2.4s ease-in-out infinite;animation-play-state:paused}
.flow-dot::before{content:'';position:absolute;left:-4px;top:0;width:8px;height:8px;border-radius:50%;background:currentColor}
.flow-dot-b{left:50%;animation-name:abFlowRight}
.ab-motion-active .flow-dot{animation-play-state:running}
@keyframes abFlowLeft{0%,12%{transform:translate(100%,0);opacity:0}20%{opacity:1}64%{transform:translate(0,0);opacity:1}88%,100%{transform:translate(0,19px);opacity:0}}
@keyframes abFlowRight{0%,12%{transform:translate(0,0);opacity:0}20%{opacity:1}64%{transform:translate(100%,0);opacity:1}88%,100%{transform:translate(100%,19px);opacity:0}}
.campaign-console .ad-creative{grid-row:3;min-width:0;min-height:0;margin:0;padding:12px;border-width:2px;transform:none}
.campaign-console .creative-a{grid-column:1}.campaign-console .creative-b{grid-column:2}
.campaign-console .variant-badge{top:10px;left:10px;right:auto;width:34px;height:34px;border-radius:9px;font-size:22px;font-weight:750}
.campaign-console .ad-creative>small{position:absolute;top:12px;right:12px;padding:4px 7px;border-radius:7px;font-size:16px!important;font-weight:700;letter-spacing:0}
.campaign-console .ad-creative>strong{left:14px;bottom:42px;font-size:clamp(21px,2.1vw,32px);line-height:1.03}
.campaign-console .ad-creative>span{left:14px;bottom:16px;font-size:13px!important;letter-spacing:.06em}
.campaign-console .creative-product{transform:none}
.campaign-console .creative-a .creative-product{background-size:contain;background-position:50% 36%;filter:none}
.campaign-console .creative-b .creative-product{background-position:50% 20%}
.campaign-console .ad-creative::after{background:linear-gradient(180deg,rgba(7,12,24,.2),transparent 40%,rgba(7,12,24,.78) 100%)}
.ab-experiment-state{grid-column:1/-1;grid-row:4;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.ab-lock{display:flex;align-items:center;gap:7px;min-width:0}.ab-lock svg{width:12px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.ab-experiment-state>b{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:550;white-space:nowrap}
.ab-experiment-state>b i{width:6px;height:6px;border-radius:50%;background:var(--violet)}
.campaign-console .human-gate{grid-row:5;padding:7px 10px 7px 14px;border-radius:12px;gap:10px}
.campaign-console .human-gate>span{font-size:12px!important;letter-spacing:0}
.campaign-console .human-gate button{height:40px;padding:0 15px;box-shadow:none;white-space:nowrap}

.scene-memory .scene-copy{top:15vh;width:29vw}
.memory-ledger{left:38vw;right:clamp(160px,13vw,205px);top:6vh;bottom:10vh;grid-template-rows:142px minmax(0,1fr);gap:14px}
.event-ledger{border-radius:14px;overflow:hidden;transform:none}
.event-ledger header,.ledger-row{min-height:35px;padding:0 13px;font-size:12px}
.ledger-row{grid-template-columns:25px 86px minmax(0,1fr);gap:6px}
.ledger-row b{font-size:12px;line-height:1.4}.ledger-row em{display:none}
.version-diff{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 76px;gap:12px 16px}
.mini-site{min-width:0;padding:15px;display:flex;flex-direction:column;transform:none}
.mini-site::before{display:none}
.mini-site>span{width:100%;font-size:14px;font-weight:650;line-height:1.4;letter-spacing:0}
.mini-preview{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:10px;align-items:center;margin-top:12px}
.mini-preview strong{width:100%;margin:0;font-size:clamp(21px,1.95vw,31px);line-height:1.08;letter-spacing:-.035em}
.mini-preview img{min-height:0;width:100%;height:100%;max-height:260px;border-radius:9px;object-fit:cover;object-position:50% 24%;background:#ebe9e5}
.version-before .mini-preview img{object-fit:contain}
.version-before .mini-preview{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.version-before .mini-preview strong{font-size:clamp(21px,1.75vw,28px)}
.mini-site>p{width:100%;margin:12px 0 0;font-size:13px;line-height:1.55}
.version-before{grid-column:1;grid-row:1}.version-after{grid-column:2;grid-row:1}
.diff-bridge{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
.diff-bridge>span{font-size:12px;letter-spacing:0;text-align:left}
.diff-items{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px}
.diff-items p{padding:0;border:0;gap:4px}
.diff-items p::before{display:none}.diff-items b,.diff-items em{font-size:12px;line-height:1.4}.diff-items b{white-space:nowrap}.diff-items em{white-space:normal}
.closing h2{max-width:1050px;font-size:clamp(54px,6.5vw,100px);line-height:1.12;letter-spacing:-.04em}

@media(max-width:1120px) and (min-width:761px){
  .language-field{left:36vw;right:140px;gap:42px}.language-side{padding:20px 18px}.language-side strong{font-size:23px}.translation-core{width:40px;height:40px}.translation-core b{font-size:20px}
  .campaign-console{left:35vw;right:140px;padding:10px;column-gap:10px}.ab-audience>span{display:none}.ab-lock{font-size:11px}.campaign-console .human-gate>span{font-size:11px!important}
  .memory-ledger{left:35vw;right:140px}.mini-site{padding:12px}.mini-preview{grid-template-columns:1fr 1fr;gap:6px}.mini-preview strong{font-size:20px}.diff-bridge{grid-template-columns:66px 1fr;padding:8px}.diff-items b,.diff-items em{font-size:11px}
}
@media(max-width:760px){
  .language-field{left:18px;right:18px;top:33vh;bottom:12vh;gap:30px}.language-side{padding:18px 15px;border-radius:15px}.language-side strong{font-size:21px;margin-top:15px}.language-side p{font-size:12px!important;margin-top:12px}.syntax-row{display:none}.translation-core{width:32px;height:32px;border-radius:10px}.translation-core b{font-size:17px}
  .campaign-console{left:18px;right:18px;top:30vh;bottom:9vh;grid-template-rows:30px 52px minmax(115px,1fr) 28px 48px;gap:6px 9px;padding:9px}.campaign-head,.campaign-head>b{font-size:10px!important}.ab-audience{padding:3px 8px}.ab-audience b{font-size:11px}.ab-audience>span{display:none}.ab-fork{inset:26px 0 0}.campaign-console .variant-badge{width:25px;height:25px;font-size:17px}.campaign-console .ad-creative>small{font-size:12px!important}.campaign-console .ad-creative>strong{font-size:20px;bottom:31px}.campaign-console .ad-creative>span{font-size:10px!important;bottom:12px}.ab-experiment-state,.ab-experiment-state>b{font-size:9px}.ab-lock{gap:4px}.campaign-console .human-gate>span{font-size:10px!important}.campaign-console .human-gate button{height:34px;padding:0 10px;font-size:11px!important}
  .scene-memory .scene-copy{top:7vh;left:18px;right:18px;width:auto}.memory-ledger{left:18px;right:18px;top:31vh;bottom:9vh;grid-template-rows:102px minmax(0,1fr);gap:9px}.event-ledger header{display:none}.ledger-row{min-height:34px;grid-template-columns:20px 68px 1fr;font-size:10px}.ledger-row b{font-size:10px}.version-diff{grid-template-rows:minmax(0,1fr) 51px;gap:8px}.mini-site{padding:10px}.mini-site>span{font-size:11px}.mini-preview{margin-top:8px;gap:5px}.mini-preview strong{font-size:17px}.mini-preview img{display:block;max-height:105px}.mini-site>p{font-size:10px;margin-top:7px}.diff-bridge{grid-template-columns:52px 1fr;padding:7px;gap:7px}.diff-bridge>span{writing-mode:initial;font-size:10px}.diff-items{display:grid;gap:5px}.diff-items b,.diff-items em{font-size:9px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.flow-dot{animation:none!important;opacity:0}.campaign-console,.language-side,.mini-site{transform:none}}