/* type: scaled for room projection (1080p) */
/*
 * AR training film. One dark world: black leads, violet is light, cyan is "virtual".
 * Everything virtual in the 3D scene is cyan; everything real is solid. The page follows suit.
 */
:root {
  --bg: #030208;
  --ink: #FFFFFF;
  --body: #C3BAD6;
  --muted: #8E84A3;
  --dim: #5F566F;
  --line: rgba(185, 138, 255, 0.18);
  --glass: rgba(10, 6, 20, 0.62);
  --violet: #9137FF;
  --violet-soft: #B98AFF;
  --cyan: #00F1FF;
  --ice: #68F5FD;
  --ok: #1FB773;
  --warn: #E8A317;
  --err: #E0443C;
  --hot: #FF5A36;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; }

.stage { position: fixed; inset: 0; overflow: hidden; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 60% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
  linear-gradient(90deg, rgba(3,2,8,0.78) 0%, rgba(3,2,8,0.35) 26%, transparent 42%); }

/* ------------------------------------------------------------------ top bar */
.top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: clamp(14px, 2.4vh, 26px) clamp(18px, 3vw, 48px); z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: clamp(22px, 3vh, 32px); width: auto; display: block; }
.brand .x { color: var(--dim); font-size: 18.5px; }
.brand .ts { font-family: var(--display); font-weight: 700; letter-spacing: 0.16em; font-size: 17px; color: var(--ink); }
.top__title { flex: 1; text-align: center; font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.top__title span { color: var(--violet-soft); }
.tc { font-family: var(--mono); font-size: 16px; color: var(--muted); letter-spacing: 0.06em; }
.tc i { font-style: normal; color: var(--dim); }

/* ------------------------------------------------------------- left copy */
.copy { position: absolute; left: clamp(18px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: min(32vw, 470px); z-index: 20; }
.kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice); display: flex; align-items: center; gap: 9px; }
.kicker b { color: var(--ink); font-weight: 500; }
.kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.kicker__sep { color: var(--dim); }
.headline { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.3vw, 54px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); perspective: 600px; text-wrap: balance; }
.headline .w { display: inline-block; transform-origin: 50% 100%; }
.headline em { font-style: normal; }
.headline em .w { background: linear-gradient(90deg, var(--violet-soft), var(--ice)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
.sub { margin: 0; font-size: clamp(19px, 1.46vw, 22.5px); line-height: 1.5; color: var(--body); max-width: 42ch; }
.src { margin: 12px 0 0; min-height: 1em; font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-soft); }
.chapters { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid; gap: 7px; }
.chapters li { display: grid; grid-template-columns: 28px 1fr 64px; align-items: center; gap: 10px; font-size: 16.5px; color: var(--dim); transition: color .4s; }
.chapters .n { font-family: var(--mono); font-size: 14px; }
.chapters .bar { height: 2px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.chapters .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.chapters li.done { color: var(--muted); }
.chapters li.on { color: var(--ink); }
.chapters li.on .n { color: var(--cyan); }

/* -------------------------------------------------------------- panels */
.panel { position: absolute; z-index: 20; visibility: hidden; opacity: 0; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05); }
.panel__k { margin: 0 0 12px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice); }

.stats { right: clamp(18px, 3vw, 48px); bottom: 17vh; display: flex; gap: 0; padding: 0; overflow: hidden; }
.stat { padding: 16px 22px; display: grid; gap: 4px; min-width: 150px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); letter-spacing: -0.03em; font-weight: 700; }
.stat span { font-size: 16px; line-height: 1.35; color: var(--body); }
.stat--a b { color: var(--cyan); text-shadow: 0 0 22px rgba(0,241,255,0.5); }
.stat--b b { color: var(--violet-soft); }

.ai { right: clamp(18px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: min(52vw, 780px); padding: 18px 20px 14px; }
.ai__head { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.ai__head em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0.02em; font-family: var(--sans); }
.ai__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.msg { display: grid; gap: 6px; margin-bottom: 14px; }
.msg .who { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.msg p { margin: 0; font-size: 21px; line-height: 1.5; min-height: 1.5em; }
.msg--q p { color: var(--ink); background: rgba(145,55,255,0.16); border: 1px solid rgba(145,55,255,0.35); border-radius: 12px 12px 12px 4px; padding: 10px 14px; justify-self: start; }
.msg--a p { color: var(--body); }
.msg--a p b { color: var(--ink); font-weight: 600; }
.cite { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cite span { font-family: var(--mono); font-size: 14px; color: var(--ice); border: 1px solid rgba(0,241,255,0.35); background: rgba(0,241,255,0.07); border-radius: 999px; padding: 5px 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.cite.on span { opacity: 1; transform: none; }
.cite.on span:nth-child(2) { transition-delay: .18s; }
.caret::after { content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--cyan); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.check { right: clamp(18px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: 360px; padding: 18px 18px 14px; }
.check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 18px; line-height: 1.35; color: var(--dim); transition: color .35s; }
.check li small { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.check li i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18); display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 700; transition: all .35s; }
.check li.ok { color: var(--ink); }
.check li.ok i { border-color: var(--ok); background: var(--ok); color: #03140b; }
.check li.ok i::after { content: '✓'; }
.check li.bad { color: #FFD9D6; }
.check li.bad i { border-color: var(--err); background: var(--err); color: #fff; box-shadow: 0 0 0 6px rgba(224,68,60,0.18); }
.check li.bad i::after { content: '!'; }

.lift { right: clamp(18px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: 360px; padding: 18px; }
.att { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.att > div { background: rgba(6,3,14,0.9); padding: 10px 12px; display: grid; gap: 3px; }
.att small { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.att b { font-family: var(--mono); font-weight: 500; font-size: 24px; color: var(--ink); }
#lState { font-family: var(--sans); font-weight: 600; font-size: 19px; }
#lState.stop { color: var(--err); }
#lState.ok { color: var(--ok); }
.calls { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; min-height: 150px; }
.calls li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 17px; color: var(--body); animation: in .4s ease both; }
.calls li .who { font-family: var(--mono); font-size: 14px; color: var(--muted); padding-top: 2px; }
.calls li.ready b { color: var(--ok); }
.calls li.stop b { color: var(--err); }
.calls li.order b { color: var(--ice); }
.note { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
@keyframes in { from { opacity: 0; transform: translateX(10px); } }

.trainer { right: clamp(18px, 2.4vw, 40px); top: 50%; transform: translateY(-50%); width: min(34vw, 470px); padding: 16px; }
.run { color: var(--muted); }
.run b { color: var(--ink); font-weight: 500; }
.pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pip { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid rgba(0,241,255,0.3); background: rgba(0,0,0,0.25); overflow: hidden; }
.pip span { position: absolute; left: 6px; bottom: 5px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; color: var(--ice); text-shadow: 0 1px 3px #000; }
.inject { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(232,163,23,0.35); background: rgba(232,163,23,0.07); margin-bottom: 12px; transition: all .3s; }
.inject b { display: block; color: var(--ink); font-size: 18px; }
.inject small { font-size: 15px; color: var(--muted); }
.inject__ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--warn); color: #1c1200; font-weight: 800; }
.inject.on { background: rgba(232,163,23,0.22); border-color: var(--warn); box-shadow: 0 0 0 4px rgba(232,163,23,0.15); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-family: var(--mono); font-size: 14.5px; color: var(--body); min-height: 100px; }
.log li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; animation: in .35s ease both; }
.log li span { color: var(--muted); }
.log li.warn { color: #FFD38A; }

.steps { position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%); width: min(92vw, 1240px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; z-index: 20; }
.steps li { visibility: hidden; opacity: 0; padding: 16px 18px 18px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; gap: 6px; }
.steps .n { font-family: var(--mono); font-size: 29px; color: var(--ice); }
.steps b { color: var(--ink); font-size: 21px; font-weight: 600; }
.steps p { margin: 0; font-size: 17px; line-height: 1.45; }
.steps li.now { border-color: rgba(0,241,255,0.55); box-shadow: 0 0 0 1px rgba(0,241,255,0.25), 0 20px 60px -20px rgba(0,241,255,0.35); }

/* --------------------------------------------------------- 3D-anchored tags */
.tags { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 7px; color: var(--ink); background: rgba(4,10,16,0.78); border: 1px solid rgba(0,241,255,0.5); box-shadow: 0 0 18px rgba(0,241,255,0.18); opacity: 0; transition: opacity .3s, background .3s, border-color .3s; }
.tag::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: currentColor; opacity: 0.45; }
.tag small { color: var(--muted); margin-left: 6px; }
.tag.on { opacity: 1; }
.tag.ready { border-color: var(--ok); color: #BFF5DA; }
.tag.stop { border-color: var(--err); color: #FFD0CC; background: rgba(60,8,6,0.85); box-shadow: 0 0 22px rgba(224,68,60,0.45); }
.tag.order { border-color: var(--ice); color: var(--ice); }
.tag.warn { border-color: var(--warn); color: #FFE2A8; background: rgba(40,26,0,0.85); }
.tag.big { font-size: 16.5px; padding: 7px 11px; }

/* ----------------------------------------------------------- headset frame */
.visor { position: absolute; inset: 3.2vh 2.4vw; pointer-events: none; z-index: 12; opacity: 0; visibility: hidden; border-radius: 40px; box-shadow: inset 0 0 120px 20px rgba(0,0,0,0.55); }
.vc { position: absolute; width: 46px; height: 46px; border: 2px solid rgba(0,241,255,0.75); filter: drop-shadow(0 0 6px rgba(0,241,255,0.6)); }
.vc--tl { top: 0; left: 0; border-width: 2px 0 0 2px; border-top-left-radius: 26px; }
.vc--tr { top: 0; right: 0; border-width: 2px 2px 0 0; border-top-right-radius: 26px; }
.vc--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 26px; }
.vc--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 26px; }
.visor__top, .visor__bot { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); text-shadow: 0 0 8px rgba(0,241,255,0.5); white-space: nowrap; }
.visor__top { top: 60px; }
.visor__bot { bottom: 92px; color: var(--muted); text-shadow: none; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1.4s steps(2) infinite; }

/* --------------------------------------------------------------- captions */
.captions { position: absolute; left: 50%; bottom: clamp(70px, 9.5vh, 100px); transform: translateX(-50%); max-width: min(64vw, 980px); text-align: center; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.45; color: rgba(255,255,255,0.32); z-index: 25; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.captions .who { display: none; }
.captions span { transition: color .15s; }
.captions span.on { color: rgba(255,255,255,0.92); }
.captions span.now { color: var(--ice); }

/* --------------------------------------------------------------- controls */
.controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px clamp(18px, 3vw, 48px) 20px; z-index: 30; opacity: 0; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); }
.ctl { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.ctl:hover { background: rgba(145,55,255,0.28); border-color: var(--violet); }
.ctl:focus-visible, .play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ctl svg { width: 18px; height: 18px; fill: currentColor; }
.stage .i-play, .stage.paused .i-pause, .stage .i-mute, .stage.muted .i-snd { display: none; }
.stage.paused .i-play, .stage.muted .i-mute { display: block; }
.scrub { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; }
.scrub__track { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.scrub__track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.scrub__ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; color: var(--dim); }
.scrub__ticks span::after { content: ''; position: absolute; left: 50%; top: 12px; width: 1px; height: 8px; background: rgba(255,255,255,0.25); }

/* ----------------------------------------------------------- intro, outro */
.intro, .outro { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; }
.intro { background: radial-gradient(70% 60% at 50% 45%, rgba(79,19,152,0.35), transparent 70%), rgba(3,2,8,0.55); }
.intro__k { margin: 0 0 18px; font-family: var(--mono); font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); }
.intro__h, .outro__h { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.intro__h span, .outro__h span { background: linear-gradient(90deg, var(--violet-soft), var(--ice)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro__s { margin: 22px 0 32px; max-width: 54ch; font-size: clamp(20px, 1.71vw, 25px); line-height: 1.5; }
.intro__n { margin: 18px 0 0; font-family: var(--mono); font-size: 14.5px; color: var(--muted); letter-spacing: 0.08em; }
.play { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px; border: 1px solid rgba(185,138,255,0.5); background: linear-gradient(135deg, rgba(145,55,255,0.4), rgba(79,19,152,0.4)); color: var(--ink); font-weight: 600; font-size: 21px; cursor: pointer; box-shadow: 0 0 40px rgba(145,55,255,0.35); transition: transform .2s, box-shadow .2s, opacity .3s; }
.play:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 60px rgba(145,55,255,0.55); }
.play:disabled { opacity: 0.55; cursor: progress; }
.play__ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #12081f; }
.play__ic svg { width: 18px; height: 18px; fill: currentColor; }
.play--ghost { background: rgba(255,255,255,0.04); box-shadow: none; }
.outro { visibility: hidden; opacity: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(79,19,152,0.28), transparent 70%), rgba(3,2,8,0.72); }
.quals { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: 26px; margin: 40px 0 34px; text-align: left; }
.quals div { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
.quals b { font-family: var(--display); font-size: 29px; color: var(--ice); }
.quals span { font-size: 17px; line-height: 1.4; }
.outro__n { margin: 26px 0 0; max-width: 92ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.outro__n em { font-style: italic; }

@media (max-width: 1100px) {
  .copy { width: 46vw; }
  .chapters { display: none; }
  .ai, .check, .lift, .trainer { width: 44vw; }
  .steps { grid-template-columns: repeat(2, 1fr); bottom: 12vh; }
  .quals { grid-template-columns: repeat(2, minmax(0, 220px)); }
}
@media (max-width: 720px) {
  .copy { top: 70px; transform: none; width: auto; right: 16px; left: 16px; }
  .headline { font-size: 29px; }
  .sub, .src { display: none; }
  .check li small, .lift .note, .log { display: none; }
  .panel { padding: 12px; }
  .stats .stat { min-width: 0; padding: 12px; }
  .stat b { font-size: 31px; }
  .quals { gap: 14px; margin: 24px 0; }
  .visor__top { top: 110px; }
  .ai, .check, .lift, .trainer, .stats { left: 16px; right: 16px; width: auto; top: auto; bottom: 120px; transform: none; }
  .top__title { display: none; }
  .steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .steps p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===================================================== version 2 additions */
.map { margin-top: clamp(18px, 3vh, 30px); }
.map__k { margin: 0 0 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.map__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 330px; }
.map__grid li { padding: 6px 0 5px; text-align: center; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 14.5px; color: var(--dim); transition: all .35s; }
.map__grid li.done { color: var(--ok); border-color: rgba(31,183,115,0.35); }
.map__grid li.on { color: #001a1d; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px rgba(0,241,255,0.45); }

.hit { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 18px; align-items: start; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.hit.on { opacity: 1; transform: none; }
.page { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,241,255,0.35); }
.page img { display: block; width: 100%; height: auto; }
.page figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 9px; font-family: var(--mono); font-size: 14px; color: var(--ice); background: rgba(4,8,14,0.88); }
.hl { position: absolute; border: 2px solid var(--cyan); border-radius: 4px; background: rgba(0,241,255,0.10); box-shadow: 0 0 0 3px rgba(0,241,255,0.18), 0 0 24px rgba(0,241,255,0.5); opacity: 0; transition: opacity .4s; }
.hl.on { opacity: 1; }
.data__k { margin: 0 0 10px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); }
.data ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.data li { display: grid; gap: 2px; padding: 9px 11px; border-radius: 9px; background: rgba(0,241,255,0.06); border: 1px solid rgba(0,241,255,0.25); animation: in .45s ease both; }
.data li b { font-family: var(--display); font-size: 25px; color: var(--ink); letter-spacing: -0.01em; }
.data li span { font-size: 16px; color: var(--body); }
.data .cite { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--violet-soft); line-height: 1.5; }
.ai__note { margin: 12px 0 0; font-size: 14px; color: var(--dim); }

.scen { right: clamp(18px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: 372px; padding: 16px 16px 14px; }
.scen h3 { margin: 0 0 12px; font-family: var(--display); font-size: 26.5px; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.scen__page { position: relative; margin: 0 0 12px; height: 168px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,241,255,0.3); }
.scen__page img { display: block; width: 100%; height: auto; }
.scen__page figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; font-family: var(--mono); font-size: 14px; color: var(--ice); background: rgba(4,8,14,0.9); }
.checks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; font-size: 17px; line-height: 1.35; color: var(--dim); transition: color .35s; }
.checks li i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18); display: grid; place-items: center; font-style: normal; font-size: 14.5px; font-weight: 700; transition: all .35s; }
.checks li.ok { color: var(--ink); }
.checks li.ok i { border-color: var(--ok); background: var(--ok); color: #03140b; }
.checks li.ok i::after { content: '✓'; }
.checks li.bad { color: #FFD9D6; }
.checks li.bad i { border-color: var(--err); background: var(--err); color: #fff; }
.checks li.bad i::after { content: '!'; }
.readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.readout:empty { display: none; }
.readout > div { background: rgba(6,3,14,0.9); padding: 8px 11px; display: grid; gap: 2px; }
.readout small { font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.readout b { font-family: var(--mono); font-weight: 500; font-size: 22.5px; color: var(--ink); }
.readout b.ok { color: var(--ok); }
.readout b.bad { color: var(--err); }
.readout b.warn { color: var(--warn); }

.archer { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); display: flex; gap: 10px; z-index: 18; visibility: hidden; opacity: 0; }
.archer span { width: 58px; height: 64px; display: grid; place-items: center; border-radius: 10px; font-family: var(--display); font-size: 38px; font-weight: 700; color: var(--dim); border: 1px solid rgba(255,255,255,0.12); background: rgba(6,3,14,0.6); transition: all .35s; }
.archer span.on { color: #001a1d; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 24px rgba(0,241,255,0.5); }

.web { left: 50%; top: 47%; transform: translate(-36%, -50%); width: min(54vw, 860px); padding: 0; overflow: hidden; background: rgba(12,10,20,0.94); }
.web__bar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; background: rgba(255,255,255,0.05); border-bottom: 1px solid var(--line); }
.web__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.web__url { margin-left: 10px; flex: 1; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,0.4); font-family: var(--mono); font-size: 15px; color: var(--body); }
.web__view { position: relative; aspect-ratio: 16 / 9; background: #05040a; }
.web__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.web__hint { position: absolute; left: 14px; top: 12px; z-index: 2; font-family: var(--mono); font-size: 14.5px; color: var(--ice); text-shadow: 0 1px 4px #000; }
.web__btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 17px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.web__btn.on { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(145,55,255,0.3); }
.web__res { position: absolute; left: 14px; bottom: 16px; z-index: 2; padding: 6px 11px; border-radius: 8px; font-family: var(--mono); font-size: 16px; color: #BFF5DA; background: rgba(4,20,12,0.85); border: 1px solid var(--ok); opacity: 0; transition: opacity .4s; }
.web__res.on { opacity: 1; }
.web__devs { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.web__devs span { font-family: var(--mono); font-size: 14px; color: var(--body); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.web__devs span:last-child { color: var(--ice); border-color: rgba(0,241,255,0.45); }

@media (max-width: 1100px) {
  .ai, .web { width: 60vw; }
  .hit { grid-template-columns: 1fr; }
  .page { max-height: 34vh; }
  .map { display: none; }
}
@media (max-width: 720px) {
  .ai, .scen, .web { left: 16px; right: 16px; width: auto; top: auto; bottom: 110px; transform: none; }
  .page, .scen__page { display: none; }
  .archer span { width: 40px; height: 44px; font-size: 29px; }
}

.steps5 { grid-template-columns: repeat(5, 1fr); width: min(94vw, 1380px); }
.checks b { color: var(--ink); font-weight: 600; }
#pUse h3 { margin-bottom: 10px; }
@media (max-width: 1100px) { .steps5 { grid-template-columns: repeat(2, 1fr); } }

/* ===================================================== 2D films (form, signup) */
.captions .who { display: inline-block; margin-right: 10px; font-family: var(--mono); font-size: 0.68em; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; vertical-align: 2px; color: #04060a; background: var(--muted); }
.captions[data-who="narrator"] .who { background: var(--violet-soft); }
.captions[data-who="tyson"] .who { background: var(--cyan); }
.captions[data-who="mia"] .who { background: #C6FF1A; }
.captions[data-who="narrator"] .who { display: none; }

/* Captions sized for a room (projector, 1080p): about 30px at 1920 wide, wider so most lines stay on one row */
.captions { bottom: clamp(64px, 7vh, 80px); width: max-content; max-width: min(84vw, 1440px); font-size: clamp(20px, 1.6vw, 32px); line-height: 1.35; }