:root {
  --bg: #050506;
  --ink: #ece6da;
  --dim: #8a8478;
  --faint: #3a3730;
  --gold: #e8c37a;
  --gold-2: #b8914a;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'IBM Plex Mono', ui-monospace, monospace; /* no curves: the old serif slot is mono now */
  --gut: 9vw;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.gated { overflow: hidden; height: 100vh; }
a { color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .08em; font-size: 11px; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.small { font-size: 10px; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#track { height: 1100vh; position: relative; z-index: -1; }

/* focus + texture over the canvas, under the overlays */
#vig { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, rgba(5, 5, 6, .62) 100%); }
#grain { position: fixed; inset: -50%; z-index: 6; pointer-events: none; opacity: .055; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(1) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 4%); } 40% { transform: translate(5%, -2%); } 60% { transform: translate(-4%, -5%); } 80% { transform: translate(3%, 3%); } }

/* ---- gate ---- */
#gate { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
  background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(5, 5, 6, .35), rgba(5, 5, 6, .97) 100%);
  transition: opacity 1s ease, visibility 1s, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
#gate.gone { opacity: 0; visibility: hidden; transform: scale(1.06); filter: blur(6px); }
#gate .tx { display: flex; align-items: center; gap: 8px; }
.cursor { display: inline-block; width: 7px; height: 11px; background: var(--gold); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mark-wrap { position: relative; width: 236px; height: 236px; display: grid; place-items: center; margin: 6px 0; }
#mark { width: 200px; height: 200px; position: relative; z-index: 1; }
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 195, 122, .22); }
.orbit.o1 { border-top-color: var(--gold); animation: spin 9s linear infinite; }
.orbit.o2 { inset: 14px; border-style: dashed; border-color: rgba(232, 195, 122, .16); animation: spin 22s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate-title { font: 700 clamp(26px, 3.2vw, 44px)/1 var(--display); letter-spacing: .34em; padding-left: .34em; }
.gate-sub { color: var(--dim); font-size: clamp(14px, 1.1vw, 17px); max-width: 32em; text-align: center; }
#gate p.mono { display: flex; align-items: center; gap: 8px; text-align: center; }
.gate-btns { display: flex; gap: 10px; margin-top: 6px; }
.btn { font: 500 11px/1 var(--mono); letter-spacing: .12em; padding: 14px 28px; border: 1px solid var(--faint); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .25s, background .25s, color .25s, transform .25s; }
.btn:hover, .btn:focus-visible { border-color: var(--gold); outline: none; transform: translateY(-1px); }
.btn.solid { background: var(--ink); color: #0a0a0a; border-color: var(--ink); }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--gold); border-color: var(--gold); }
.loadbar { width: 180px; height: 1px; background: var(--faint); position: relative; margin-top: 8px; }
.loadbar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.gate-corner { position: absolute; white-space: nowrap; }
.gate-corner i { color: var(--gold); font-style: normal; animation: pulse 2.4s ease-in-out infinite; }
.gate-corner.tl { top: 24px; left: 28px; } .gate-corner.tr { top: 24px; right: 28px; }
.gate-corner.bl { bottom: 24px; left: 28px; } .gate-corner.br { bottom: 24px; right: 28px; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---- hud ---- */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; pointer-events: none; transition: opacity .8s .5s; }
body.gated #hud, body.gated #rail, body.gated #chap, body.gated #cue { opacity: 0 !important; }
#hud > * { pointer-events: auto; }
.brand { font: 700 13px/1 var(--display); letter-spacing: .32em; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.glyph { width: 14px; height: 18px; border: 2px solid var(--ink); border-top-color: transparent; border-bottom-color: transparent; position: relative; }
.glyph::after { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 22px; background: var(--ink); transform: rotate(-38deg); transform-origin: top left; }
.hud-mid { position: absolute; left: 50%; transform: translateX(-50%); }
.hud-mid i { color: var(--gold); font-style: normal; animation: pulse 2.4s ease-in-out infinite; }
.pill { background: rgba(5, 5, 6, .5); color: var(--ink); border: 1px solid var(--faint); border-radius: 99px; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color .25s; }
.pill:hover { border-color: var(--gold); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.pill[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
#rail { position: fixed; left: 28px; top: 50%; width: 1px; height: 32vh; transform: translateY(-50%); background: var(--faint); z-index: 20; }
#rail i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--gold); box-shadow: 0 0 8px rgba(232, 195, 122, .6); }
#chap { position: fixed; left: 28px; bottom: 24px; z-index: 20; display: flex; gap: 14px; color: var(--dim); }
#chap b { color: var(--gold); font-weight: 500; }
#cue { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; color: var(--dim); transition: opacity .4s; }
#cue::after { content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--gold), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---- overlays ---- */
.ov { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; visibility: hidden; }
.ov.on { visibility: visible; }
.ov a, .ov button, .ov li { pointer-events: auto; }
.eyebrow { color: var(--gold); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.eyebrow b { font-weight: 500; }
.sig { color: var(--dim); margin-top: 6px; }

/* hero */
#ov-hero { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); gap: 24px; }
h1 { font: 700 clamp(44px, 8.6vw, 136px)/.9 var(--display); letter-spacing: -.035em; display: flex; flex-direction: column; }
h1 .ln { display: block; }
h1 .ln + .ln { color: var(--gold); -webkit-text-stroke: 0; }
.lede { max-width: 30em; color: #b4ad9f; font-size: clamp(15px, 1.25vw, 18px); }
.stats { list-style: none; display: flex; gap: 0; color: var(--dim); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); max-width: 44em; }
.stats li { padding: 12px 28px 12px 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.stats li + li { padding-left: 28px; border-left: 1px solid var(--faint); }
.stats b { font: 700 22px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.rv { opacity: 0; transform: translateY(26px); filter: blur(6px); }
body.in .rv { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
body.in .rv:nth-child(1), body.in h1 .rv:nth-child(1) { animation-delay: .25s; }
body.in h1 .rv:nth-child(2) { animation-delay: .4s; }
body.in .lede.rv { animation-delay: .62s; }
body.in .stats.rv { animation-delay: .8s; }
body.in .sig.rv { animation-delay: .95s; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

/* ribbon */
.rb-head { position: absolute; left: var(--gut); top: 13vh; display: flex; flex-direction: column; gap: 8px; max-width: 42vw; }
.rb-lab { margin-top: 10px; font-size: 10px; }
#rb-name { font: 700 clamp(30px, 3.6vw, 56px)/.95 var(--display); letter-spacing: -.025em; text-shadow: 0 2px 30px rgba(5, 5, 6, .9); }
.rb-kind { color: var(--gold); }
.rb-head.swap #rb-name, .rb-head.swap .rb-kind { animation: swap .4s ease both; }
.rb-head.swap .rb-kind { animation-delay: .06s; }
.ribbon-note { position: absolute; right: var(--gut); bottom: 15vh; color: var(--dim); text-align: right; max-width: 26em; line-height: 1.7; }
.marquee { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--faint); background: linear-gradient(transparent, rgba(5, 5, 6, .9)); overflow: hidden; padding: 14px 0 62px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-inner { display: flex; gap: 46px; white-space: nowrap; font: 500 clamp(12px, 1.05vw, 15px)/1 var(--display); letter-spacing: .18em; color: var(--dim); will-change: transform; }
.mq-inner span { display: inline-flex; align-items: center; gap: 46px; }
.mq-inner svg { color: var(--gold); flex: none; }

/* vortex */
#ov-vortex .hline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent); transform-origin: center; opacity: .55; }
.col { position: absolute; top: 50%; max-height: 44vh; overflow: hidden; }
.col.left { left: 4vw; bottom: auto; transform: translateY(-100%); padding-bottom: 20px; }
.col.right { right: 4vw; text-align: right; padding-top: 20px; }
.kind-h { font: 700 clamp(18px, 1.9vw, 28px)/1 var(--display); letter-spacing: .02em; margin: 6px 0; }
.kind-h sup { color: var(--gold); font-size: 11px; vertical-align: top; margin-left: 4px; }
.names { list-style: none; font: 500 clamp(11px, .95vw, 14px)/1.25 var(--display); text-transform: uppercase; letter-spacing: .03em; columns: 2; column-gap: 26px; }
.col.right .names { columns: 1; margin-bottom: 14px; }
.names li { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s, color .2s; cursor: pointer; break-inside: avoid; }
.names li.in { opacity: 1; transform: none; }
.names li:hover { color: var(--gold); }
.code { position: absolute; color: #55503f; font-size: 11px; white-space: pre; }
.code.c1 { left: 6vw; top: calc(50% + 40px); }
.code.c2 { right: 6vw; top: calc(50% - 64px); }
.code.c3 { left: 38vw; bottom: 14vh; }

/* roster */
.bignum { position: absolute; left: 3vw; bottom: -4vh; font: 700 clamp(120px, 22vw, 340px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(232, 195, 122, .22); letter-spacing: -.04em; }
#dial { position: absolute; top: 50%; right: calc(6vw + min(400px, 34vw) + 40px); transform: translateY(-50%); list-style: none; display: flex; flex-direction: column; gap: 3px; }
#dial li { width: 14px; height: 1px; background: var(--faint); cursor: pointer; transition: width .3s, background .3s; position: relative; }
#dial li::before { content: ''; position: absolute; inset: -2px -8px; }
#dial li.near { width: 22px; background: var(--dim); }
#dial li.on { width: 40px; background: var(--gold); }
#card { position: absolute; right: 6vw; top: 50%; transform: translateY(-50%); width: min(380px, 34vw); display: flex; flex-direction: column; gap: 10px; --accent: var(--gold); }
#card .idx { color: var(--dim); }
.hold { height: 2px; background: var(--faint); position: relative; overflow: hidden; }
.hold i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.badge { margin-left: 12px; padding: 3px 8px; border: 1px solid var(--gold); color: var(--gold); }
#c-name { font: 700 clamp(28px, 3.2vw, 48px)/.95 var(--display); letter-spacing: -.02em; }
.tag { font: italic 400 clamp(19px, 1.6vw, 24px)/1.15 var(--serif); color: var(--gold); }
.blurb { color: #b9b2a5; font-size: 15px; }
.label { color: var(--dim); font-size: 10px; margin-top: 4px; }
.abil { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: #cfc8ba; }
.abil li { padding-left: 16px; position: relative; }
.abil li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--accent); }
.load { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.load li { border: 1px solid var(--faint); padding: 4px 8px; font-size: 10px; color: #cfc8ba; }
.dom { display: flex; align-items: center; gap: 8px; color: var(--dim); }
#c-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px currentColor; }
#c-open { align-self: flex-start; margin-top: 6px; }
#card.swap > * { animation: swap .45s ease both; }
#card.swap > *:nth-child(2) { animation-delay: .04s; } #card.swap > *:nth-child(3) { animation-delay: .08s; } #card.swap > *:nth-child(4) { animation-delay: .12s; }
@keyframes swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
#card.swap #c-name { animation: slam .55s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes slam { from { opacity: 0; transform: scale(1.35) translateY(-6px); letter-spacing: .05em; filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
#card.swap .abil li, #card.swap .load li { animation: swap .4s ease both; }
#card.swap .abil li:nth-child(2) { animation-delay: .12s; } #card.swap .abil li:nth-child(3) { animation-delay: .2s; }
#card.swap .load li:nth-child(n) { animation-delay: calc(.25s + var(--d, 0s)); }

/* machine */
#labels .nl { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; will-change: transform; }
#labels .nl b { display: block; font: 700 15px/1 var(--display); letter-spacing: .14em; }
#labels .nl span { font: 400 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); }
#labels .nl.agent b { color: var(--gold); font-size: 11px; }
#labels .nl b { transition: color .4s, text-shadow .4s, transform .4s; transform-origin: left bottom; }
#labels .nl.cue b { color: var(--gold); text-shadow: 0 0 14px rgba(232, 195, 122, .9); transform: scale(1.35); }   /* the machine she names (THE FLEET line) */
#log { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); width: min(420px, 36vw); display: flex; flex-direction: column; gap: 14px; background: linear-gradient(90deg, rgba(5, 5, 6, .85), rgba(5, 5, 6, .4)); padding: 20px 22px 22px 0; }
#l-title { font: 700 clamp(30px, 3.4vw, 54px)/.95 var(--display); letter-spacing: -.02em; }
#l-body { color: #c4bdb0; font-size: 15.5px; }
.spec { list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--dim); border-left: 1px solid var(--gold); padding-left: 12px; }
.clock { font-size: 26px; color: var(--gold); letter-spacing: .05em; }
#log.swap > * { animation: swap .45s ease both; }
#log.swap > *:nth-child(2) { animation-delay: .05s; } #log.swap > *:nth-child(3) { animation-delay: .1s; } #log.swap > *:nth-child(4) { animation-delay: .15s; }

/* end */
#ov-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px; padding: 0 16px; }
#ov-end .eyebrow::before { display: none; }
.big { font: 700 clamp(34px, 5.4vw, 84px)/.95 var(--display); letter-spacing: -.03em; }
#ov-end em { font-family: var(--serif); font-weight: 400; color: var(--gold); letter-spacing: 0; }
.end-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.to-menu.pulse { animation: menuPulse 1.6s ease-in-out 3; }
@keyframes menuPulse { 50% { box-shadow: 0 0 34px rgba(232, 195, 122, .55); background: var(--gold); border-color: var(--gold); } }

/* chapter slate */
#slate { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; opacity: 0; }
#slate b { font: 700 clamp(40px, 7vw, 110px)/.9 var(--display); letter-spacing: -.03em; }
#slate .mono { color: var(--gold); }
#slate .ghost { position: absolute; font: 700 clamp(220px, 40vw, 560px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(232, 195, 122, .24); letter-spacing: -.04em; }
#slate .rule { width: 120px; height: 1px; background: var(--gold); margin-top: 6px; }
#slate.go { animation: slate 1.6s cubic-bezier(.2, .7, .2, 1) both; }
#slate.go .ghost { animation: ghost 1.6s cubic-bezier(.2, .7, .2, 1) both; }
#slate.go .rule { animation: rule 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes slate { 0% { opacity: 0; transform: scale(1.14); filter: blur(10px); } 18% { opacity: 1; transform: scale(1); filter: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.97); filter: blur(4px); } }
@keyframes ghost { 0% { transform: scale(1.3); } 100% { transform: scale(.92); } }
@keyframes rule { 0% { transform: scaleX(0); } 30% { transform: scaleX(1); } }

/* ---- phones ---- */
@media (max-width: 760px) {
  :root { --gut: 20px; }
  #grain, #rail, .code, #dial, .hud-mid, .gate-corner.tl, .gate-corner.tr { display: none; }
  #vig { background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(5, 5, 6, .6) 100%); }
  #hud { padding: 16px; }
  #chap { left: 16px; bottom: 16px; }
  #gate { gap: 14px; }
  .mark-wrap { width: 196px; height: 196px; }
  #mark { width: 164px; height: 164px; }
  .gate-sub { font-size: 14px; }
  #gate p.mono { flex-wrap: wrap; justify-content: center; }
  .gate-corner.bl, .gate-corner.br { font-size: 9px; }
  .gate-corner.br { display: none; }
  #ov-hero { gap: 18px; justify-content: flex-start; padding-top: 18vh; }
  h1 { font-size: clamp(44px, 14vw, 64px); }
  .stats { display: grid; grid-template-columns: 1fr 1fr; max-width: none; }
  .stats li { padding: 10px 0; }
  .stats li + li { padding-left: 0; border-left: 0; }
  .stats li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--faint); }
  .stats b { font-size: 18px; }
  .rb-head { top: 11vh; max-width: 62vw; }
  .rb-head .eyebrow span { white-space: nowrap; }
  #rb-name { font-size: 28px; }
  .ribbon-note { right: 16px; left: auto; bottom: 92px; text-align: right; max-width: 15em; }
  .marquee { padding-bottom: 48px; }
  .col { max-height: 28vh; }
  .col.left { left: 16px; right: 16px; top: 12vh; transform: none; padding: 0; }
  .col.right { right: 16px; left: 16px; top: auto; bottom: 9vh; padding: 0; text-align: left; }
  .col.right .names { columns: 2; margin-bottom: 8px; }
  .names { columns: 2; font-size: 11px; }
  .names li:nth-child(n+9) { display: none; }
  .bignum { font-size: 120px; bottom: auto; top: 70px; }
  .abil, .label, .load { display: none; }
  #card { left: 16px; right: 16px; width: auto; top: auto; bottom: 64px; transform: none; gap: 8px; background: linear-gradient(transparent, rgba(5, 5, 6, .92) 18%); padding-top: 30px; }
  .blurb { font-size: 14px; }
  #log { left: 16px; right: 16px; width: auto; top: auto; bottom: 56px; transform: none; padding: 18px 0 0; background: linear-gradient(transparent, rgba(5, 5, 6, .94) 16%); gap: 10px; }
  #l-body { font-size: 14px; }
  #labels .nl span, #labels .nl.agent { display: none; }
  #labels .nl b { font-size: 12px; }
  #slate .ghost { font-size: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  #cue::after, #card.swap > *, #grain, .orbit, .cursor, .hud-mid i, .gate-corner i { animation: none; }
  .rv { opacity: 1; transform: none; filter: none; }
}

/* ---- v3: the flight gates, live spectrum, kind colours, beat ---- */
#eq { width: 64px; height: 16px; margin-left: auto; margin-right: 12px; opacity: .9; }
.gate-labels .gate-l { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; will-change: transform; text-align: center; }
.gate-l b { font: 700 clamp(30px, 4.4vw, 64px)/.9 var(--display); letter-spacing: -.02em; text-shadow: 0 0 30px currentColor; }
.gate-l .mono { color: var(--dim); }
#dial li.on { background: var(--k, var(--gold)); box-shadow: 0 0 10px var(--k, var(--gold)); }
#c-kind { border-color: var(--k, var(--gold)) !important; color: var(--k, var(--gold)) !important; }
.hud-mid i, .pill[aria-pressed="true"]::before { filter: brightness(calc(1 + var(--beat, 0) * 1.5)); }
#rail i { box-shadow: 0 0 calc(4px + var(--beat, 0) * 18px) var(--gold); }

/* ---- v4: the mesh headline + the card stream ---- */
h1.meshed .ln { color: transparent; }
#ov-stream { perspective: 1100px; perspective-origin: 50% 46%; }
.stream { position: absolute; inset: 0; transform-style: preserve-3d; }
.deck-head { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); display: flex; gap: 16px; align-items: baseline; color: var(--dim); white-space: nowrap; }
.deck-head b { color: var(--gold); font-weight: 500; letter-spacing: .2em; }
.card { position: absolute; left: 50%; top: 50%; width: min(1000px, 90vw); display: none; will-change: transform, opacity; pointer-events: auto;
  background: linear-gradient(160deg, rgba(18, 18, 22, .9), rgba(8, 8, 10, .82)); backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 195, 122, .18); border-radius: 18px; padding: 30px 34px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  --a: var(--gold); --k: var(--gold); }
.card::before { content: ''; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, var(--k), transparent 30%, transparent 70%, var(--a)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; }
.card .top { display: flex; align-items: center; gap: 12px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .1em; margin-bottom: 18px; }
.card .top .kb { color: var(--k); border: 1px solid var(--k); padding: 4px 8px; }
.card .top .dom { margin-left: auto; color: var(--a); }
.card .head { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.card .emb { width: 84px; height: 84px; flex: none; }
.card h3 { font: 700 clamp(34px, 4vw, 58px)/.92 var(--display); letter-spacing: -.025em; }
.card .tg { font: italic 400 clamp(18px, 1.5vw, 23px)/1.2 var(--serif); color: var(--a); margin-top: 6px; }
.card .cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 30px; }
.card .bl { color: #d8d1c4; font-size: 15.5px; line-height: 1.55; }
.card .lab { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); margin: 16px 0 8px; }
.card ul.ab { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #cfc8ba; }
.card ul.ab li { padding-left: 16px; position: relative; }
.card ul.ab li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--a); }
.card ul.st { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font: 400 10.5px/1 var(--mono); }
.card ul.st li { border: 1px solid #2c2a25; padding: 5px 8px; color: #cfc8ba; }
.card .deep { border-left: 1px solid var(--a); padding-left: 20px; }
.card .deep p:last-child { color: #b9b2a5; font-size: 13.5px; line-height: 1.6; }
.card.info { width: min(860px, 88vw); }
.card.info h3 { font-size: clamp(36px, 4.6vw, 64px); }
.card.info .bd { color: #d8d1c4; font-size: 17px; line-height: 1.6; max-width: 46em; }
.card.info .row { display: flex; gap: 28px; align-items: flex-end; margin-top: 20px; flex-wrap: wrap; }
.card.info .big { font: 700 clamp(40px, 5vw, 72px)/.9 var(--display); color: var(--a); letter-spacing: -.03em; }
.card.info .big small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; color: var(--dim); margin-top: 8px; }
.card.info ul.sp { list-style: none; display: flex; flex-direction: column; gap: 6px; font: 400 12px/1.4 var(--mono); color: #b9b2a5; border-left: 1px solid var(--a); padding-left: 14px; }
.card.shelf ul.models { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.card.shelf ul.models li { font: 500 12px/1 var(--mono); padding: 7px 10px; border: 1px solid #2c2a25; color: #e6dfd2; background: rgba(255, 255, 255, .02); }
.card.shelf ul.models li i { font-style: normal; color: var(--a); margin-right: 6px; }
@media (max-width: 760px) {
  .deck-head { top: 70px; }
  .card { padding: 20px 18px; border-radius: 14px; width: 92vw; }
  .card .cols { grid-template-columns: 1fr; gap: 12px; }
  .card .emb { width: 54px; height: 54px; }
  .card .head { gap: 14px; margin-bottom: 10px; }
  .card .bl { font-size: 14px; }
  .card ul.ab, .card .lab.abl { display: none; }
  .card .deep p:last-child { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
  .card.info .bd { font-size: 14.5px; }
  .card .top .dom { display: none; }
  .card.shelf ul.models li { font-size: 10.5px; padding: 5px 7px; }
}

/* only facts: the NEMO demo terminal was illustrative, so it stays off */
#ov-minds .mn-term { display: none !important; }

/* ---- industrial type: condensed caps, mono taglines, sharp corners ---- */
h1 { font: 800 clamp(58px, 10.6vw, 176px)/.86 var(--display) !important; letter-spacing: .005em !important; text-transform: uppercase; }
.card h3, #l-title, #slate b, .big, .gate-l b, .kind-h, .card.info .big, #ov-minds .mn-name, #ov-minds .mn-intro li b, #ov-minds .mn-stat b, .gate-title, .stats b {
  font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .01em !important; }
.card h3 { font-size: clamp(40px, 4.8vw, 70px) !important; line-height: .88 !important; }
.tag, .card .tg, #ov-minds .mn-intro li em, #ov-minds .mn-tag {
  font: 500 clamp(11px, .9vw, 13px)/1.4 var(--mono) !important; font-style: normal !important; text-transform: uppercase; letter-spacing: .14em; }
#ov-end em { font-family: var(--display) !important; font-style: normal !important; font-weight: 800; color: var(--gold); }
.big { line-height: .9 !important; }
.card { border-radius: 3px; }
.card::before { border-radius: 3px; }
.card::after { content: ''; position: absolute; inset: 8px; pointer-events: none; opacity: .7;
  background:
    linear-gradient(var(--a), var(--a)) left top / 14px 1px no-repeat, linear-gradient(var(--a), var(--a)) left top / 1px 14px no-repeat,
    linear-gradient(var(--a), var(--a)) right top / 14px 1px no-repeat, linear-gradient(var(--a), var(--a)) right top / 1px 14px no-repeat,
    linear-gradient(var(--a), var(--a)) left bottom / 14px 1px no-repeat, linear-gradient(var(--a), var(--a)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--a), var(--a)) right bottom / 14px 1px no-repeat, linear-gradient(var(--a), var(--a)) right bottom / 1px 14px no-repeat; }
.card .top { border-bottom: 1px solid #23211c; padding-bottom: 12px; }
.btn, .pill { border-radius: 2px; }

/* ---- v5: the ladder graph, emoji moods, SOON media ---- */
.card.graphc { width: min(1040px, 94vw); }
.card .graph { width: 100%; height: auto; margin-top: 14px; }
.graph .gn { font: 800 13px var(--display); letter-spacing: .08em; fill: #ece6da; }
.graph .gs { font: 500 9px var(--mono); letter-spacing: .06em; fill: #8a8478; }
.graph .gd { font: 700 10px var(--mono); letter-spacing: .06em; fill: #5eead4; }
.graph .gl { font: 500 9px var(--mono); fill: #8a8478; }
.card ul.emo { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; }
.card ul.emo li { font: 500 11px/1 var(--mono); letter-spacing: .08em; padding: 7px 9px; border: 1px solid #2c2a25; color: #e6dfd2; }
.card.soon { width: min(980px, 92vw); }
.card.soon .media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid #2c2a25; }
.card.soon .gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.card.soon .gal img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border: 1px solid #2c2a25; }
@media (max-width: 760px) {
  .card.soon .media img { aspect-ratio: 16 / 9; }
  .card.soon .bd { font-size: 13px; }
  .card ul.emo li { font-size: 9.5px; padding: 5px 6px; }
}

/* ---- v6: a centered hook with the route map ---- */
#ov-hero { align-items: center; text-align: center; justify-content: center; gap: 20px; padding-top: 40px; }
#ov-hero h1 { align-items: center; }
#ov-hero .eyebrow::before { display: none; }
#ov-hero .lede { max-width: 40em; margin: 0 auto; font-size: clamp(15px, 1.2vw, 18px); }
.journey { width: min(1060px, 92vw); margin-top: 6px; }
.journey .jh { display: flex; justify-content: center; gap: 16px; color: var(--dim); margin-bottom: 10px; }
.journey .jh b { color: var(--gold); font-weight: 500; letter-spacing: .2em; }
#route { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid #23211c; background: rgba(8, 8, 10, .55); backdrop-filter: blur(6px); }
#route li { pointer-events: auto; cursor: pointer; padding: 12px 10px 13px; text-align: left; border-left: 1px solid #23211c; position: relative; transition: background .25s; }
#route li:first-child { border-left: 0; }
#route li:hover, #route li:focus-visible { background: rgba(232, 195, 122, .06); outline: none; }
#route li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
#route li:hover::after { transform: scaleX(1); }
#route .n { font: 500 10px/1 var(--mono); color: var(--c, var(--gold)); letter-spacing: .1em; }
#route .t { display: block; font: 800 clamp(14px, 1.25vw, 19px)/1 var(--display); letter-spacing: .02em; margin: 6px 0 5px; color: var(--ink); white-space: nowrap; }
#route .d { display: block; font: 400 10px/1.35 var(--mono); color: var(--dim); letter-spacing: .02em; }
body.in .journey.rv { animation-delay: .95s; }
body.in .sig.rv { animation-delay: 1.15s; }
#ov-hero .sig { margin-top: 0; }
@media (max-width: 760px) {
  #ov-hero { justify-content: center; padding-top: 56px; gap: 12px; }
  #route { grid-template-columns: repeat(2, 1fr); }
  #route li { padding: 8px 9px; border-top: 1px solid #23211c; }
  #route li:nth-child(odd) { border-left: 0; }
  #route li:nth-child(-n+2) { border-top: 0; }
  #route .t { font-size: 14px; margin: 3px 0; }
  #route .d { font-size: 9px; }
  #ov-hero .lede { font-size: 13.5px; }
  .journey .jh { flex-direction: column; align-items: center; gap: 4px; }
}

/* ---- v6: the side chapter index ---- */
#toc { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 25; transition: opacity .4s; }
body.gated #toc, body.gated #toc-btn { opacity: 0; pointer-events: none; }
#toc ol { list-style: none; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
#toc li { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0; }
#toc li i { width: 12px; height: 1px; background: #4a463c; transition: width .3s, background .3s; flex: none; }
#toc li span { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s, color .25s; white-space: nowrap; }
#toc:hover li span, #toc:focus-within li span { opacity: 1; transform: none; }
#toc li:hover span, #toc li:focus-visible span { color: var(--ink); }
#toc li.on i { width: 28px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
#toc li.on span { opacity: 1; transform: none; color: var(--gold); }
#toc li.done i { background: #8a7a55; }
#toc li:focus-visible { outline: none; }
#toc-btn { display: none; }
@media (max-width: 760px) {
  #toc { right: 12px; top: auto; bottom: 64px; transform: none; opacity: 0; pointer-events: none; background: rgba(8, 8, 10, .94); border: 1px solid #23211c; padding: 14px 16px; backdrop-filter: blur(8px); }
  #toc.open { opacity: 1; pointer-events: auto; }
  #toc li span { opacity: 1; transform: none; font-size: 11px; }
  #toc-btn { display: block; position: fixed; right: 12px; bottom: 14px; z-index: 26; background: rgba(8, 8, 10, .8); color: var(--ink); border: 1px solid #3a3730; padding: 9px 12px; font-size: 10px; letter-spacing: .14em; border-radius: 2px; }
}

/* ---- v6: a louder scroll cue, and auto-play ---- */
#cue { bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); pointer-events: none; }
#cue b { font: 800 clamp(15px, 1.3vw, 19px)/1 var(--display); letter-spacing: .32em; padding-left: .32em; color: var(--gold); text-shadow: 0 0 18px rgba(232, 195, 122, .55); animation: cuePulse 2s ease-in-out infinite; }
#cue span { font-size: 10px; letter-spacing: .2em; color: #b4ad9f; }
#cue u { text-decoration: none; color: var(--teal, #5eead4); border-bottom: 1px solid currentColor; }
#cue::after { height: 34px; width: 2px; }
@keyframes cuePulse { 0%, 100% { opacity: .75; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }
#auto { margin-right: 10px; }
#auto[aria-pressed="true"] { border-color: #5eead4; color: #5eead4; }
#auto[aria-pressed="true"]::before { background: #5eead4; box-shadow: 0 0 10px #5eead4; animation: cuePulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #cue b { animation: none; } }
@media (max-width: 760px) { #auto { padding: 7px 9px; margin-right: 6px; } #eq { display: none; } }

/* ---- core v2: kind panels and the app sheet ---- */
#ov-vortex .core-h { position: absolute; left: 50%; top: 88px; transform: translateX(-50%); display: flex; gap: 16px; color: var(--dim); white-space: nowrap; }
#ov-vortex .core-h b { color: var(--gold); font-weight: 500; letter-spacing: .2em; }
.kinds { position: absolute; inset: 120px 3vw 60px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; pointer-events: none; }
.kp-col { display: flex; flex-direction: column; gap: 18px; width: min(390px, 30vw); }
.kp { pointer-events: auto; background: rgba(8, 8, 10, .74); backdrop-filter: blur(8px); border: 1px solid #23211c; border-top: 2px solid var(--k); padding: 14px 16px 16px; max-height: calc(100vh - 220px); overflow: auto; }
.kp-self { width: min(470px, 36vw); }
.kp .kh { display: flex; align-items: baseline; gap: 10px; }
.kp .kh b { font: 800 clamp(20px, 1.9vw, 30px)/1 var(--display); letter-spacing: .02em; color: var(--k); }
.kp .kh span { font: 500 11px/1 var(--mono); color: var(--dim); letter-spacing: .1em; }
.kp .kl { font: 400 12.5px/1.45 var(--body); color: #b9b2a5; margin: 8px 0 12px; }
.kp ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.kp li button { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: #e6dfd2; background: rgba(255, 255, 255, .02); border: 1px solid #2c2a25; padding: 7px 9px 7px 8px; cursor: pointer; display: flex; align-items: center; gap: 7px; text-transform: uppercase; transition: border-color .2s, background .2s, color .2s; }
.kp li button i { width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex: none; }
.kp li button:hover, .kp li button:focus-visible { border-color: var(--k); background: rgba(255, 255, 255, .05); color: #fff; outline: none; }
.kp li { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.kp li.in { opacity: 1; transform: none; }
#sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
#sheet[hidden] { display: none; }
#sheet .sh-back { position: absolute; inset: 0; background: rgba(3, 3, 4, .72); backdrop-filter: blur(6px); }
#sheet .sh-card { position: relative; width: min(1000px, 94vw); max-height: 88vh; overflow: auto; background: linear-gradient(160deg, #141418, #0a0a0c); border: 1px solid #2c2a25; border-top: 2px solid var(--k, var(--gold)); padding: 30px 34px; animation: sheetIn .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
#sheet .sh-x { position: absolute; right: 18px; top: 16px; background: none; border: 1px solid #2c2a25; color: var(--dim); padding: 7px 10px; cursor: pointer; font-size: 10px; }
#sheet .sh-x:hover { color: var(--ink); border-color: var(--k); }
#sheet .sh-top { display: flex; gap: 12px; align-items: center; color: var(--dim); margin-bottom: 14px; }
#sheet .sh-top .kb { color: var(--k); border: 1px solid var(--k); padding: 4px 8px; }
#sheet h2 { font: 800 clamp(38px, 5vw, 72px)/.88 var(--display); text-transform: uppercase; letter-spacing: .01em; }
#sheet .sh-tag { color: var(--a, var(--gold)); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 14px; }
#sheet .sh-blurb { font-size: 17px; line-height: 1.55; color: #e0d9cc; max-width: 52em; }
#sheet .sh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 18px 0 22px; }
#sheet .lab { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); margin: 14px 0 8px; }
#sheet .sh-p { font-size: 14px; line-height: 1.65; color: #c4bdb0; }
#sheet .sh-deep { border-left: 1px solid var(--a, var(--gold)); padding-left: 20px; }
#sheet .sh-ab { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #cfc8ba; }
#sheet .sh-ab li { padding-left: 16px; position: relative; }
#sheet .sh-ab li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--a, var(--gold)); }
#sheet .sh-st { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font: 400 10.5px/1 var(--mono); }
#sheet .sh-st li { border: 1px solid #2c2a25; padding: 5px 8px; color: #cfc8ba; }
@media (max-width: 760px) {
  #ov-vortex .core-h { top: 66px; flex-direction: column; align-items: center; gap: 3px; }
  .kinds { inset: 116px 12px 50px; flex-direction: column; gap: 10px; }
  .kp-self, .kp-col { width: 100%; }
  .kp { max-height: none; padding: 10px 12px; }
  .kp .kl { font-size: 11.5px; margin: 6px 0 8px; }
  .kp li button { font-size: 9.5px; padding: 6px 7px; }
  #sheet .sh-card { padding: 22px 18px; }
  #sheet .sh-cols { grid-template-columns: 1fr; gap: 6px; }
  #sheet .sh-blurb { font-size: 15px; }
}

/* ---- the welcome ---- */
#ov-hero .lede b { color: var(--gold); font-weight: 500; }
@media (max-width: 760px) { #ov-hero .sig { display: none; } #cue { bottom: 58px; } }
@media (max-width: 760px) { #cue { display: none; } }

/* ---- the welcome title v3: the mesh builds it, then it settles into solid letters (no outline) ---- */
#ov-hero h1.meshed .ln, #ov-hero h1.meshed .ln + .ln { -webkit-text-stroke: 0 !important; text-shadow: none; color: rgba(236, 230, 218, 0); }
#ov-hero h1.meshed .ln + .ln { color: rgba(232, 195, 122, 0); }
body.in #ov-hero h1.meshed .ln { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both, solidIn 1.6s ease 1.1s forwards !important; }
body.in #ov-hero h1.meshed .ln + .ln { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both, solidGold 1.6s ease 1.3s forwards !important; }
@keyframes solidIn { to { color: rgba(236, 230, 218, 1); text-shadow: 0 0 40px rgba(236, 230, 218, .12); } }
@keyframes solidGold { to { color: rgba(232, 195, 122, 1); text-shadow: 0 0 40px rgba(232, 195, 122, .25); } }

/* ---- the name, alone ---- */
#ov-hero h1.one { font-size: clamp(84px, 17.5vw, 290px) !important; line-height: .82 !important; letter-spacing: .02em !important; }
#ov-hero h1.one .ln.gold { color: rgba(232, 195, 122, 0); }
body.in #ov-hero h1.one .ln.gold { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both, solidGold 1.6s ease 1.1s forwards !important; }
#ov-hero .tagline { font: 600 clamp(13px, 1.25vw, 18px)/1 var(--mono); letter-spacing: .5em; padding-left: .5em; color: var(--ink); margin-top: -4px; }
body.in #ov-hero .tagline.rv { animation-delay: .55s; }
@media (max-width: 760px) { #ov-hero h1.one { font-size: 22vw !important; } #ov-hero .tagline { letter-spacing: .3em; font-size: 11px; } }

/* ---- the name v2: a brushed-gold nameplate, grained, with a slow sheen ---- */
#ov-hero h1.one { font-size: clamp(54px, 8.4vw, 132px) !important; line-height: .9 !important; letter-spacing: .16em !important; padding-left: .16em;
  display: flex; flex-direction: row !important; align-items: center !important; gap: .5em; font-weight: 800 !important; }
#ov-hero h1.one::before, #ov-hero h1.one::after { content: ''; flex: none; width: clamp(28px, 6vw, 110px); height: 7px;
  background: linear-gradient(90deg, transparent, rgba(232, 195, 122, .7)) center / 100% 1px no-repeat,
              linear-gradient(45deg, transparent 42%, #e8c37a 42% 58%, transparent 58%) right center / 7px 7px no-repeat; opacity: .85; }
#ov-hero h1.one::after { transform: scaleX(-1); margin-left: -.16em; }
#ov-hero h1.one .ln.gold {
  color: transparent !important; -webkit-text-stroke: 0 !important;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 250, 235, .75) 47%, transparent 56%) 0 0 / 260% 100% no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 160px 160px,
    linear-gradient(180deg, #fff7e3 0%, #f4d796 38%, #dcae5f 70%, #a8803f 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 28px rgba(232, 195, 122, .22)) drop-shadow(-3px 2px 0 rgba(94, 234, 212, .10));
}
body.in #ov-hero h1.one .ln.gold { animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) both, sheen 7s ease-in-out 2.2s infinite !important; }
@keyframes sheen { 0% { background-position: 130% 0, 0 0, 0 0; } 45%, 100% { background-position: -40% 0, 0 0, 0 0; } }
#ov-hero .tagline { letter-spacing: .62em; font-size: clamp(11px, .95vw, 14px); color: #cfc8ba; margin-top: 6px; }
@media (max-width: 760px) { #ov-hero h1.one { font-size: 13.5vw !important; letter-spacing: .1em !important; gap: .3em; } #ov-hero h1.one::before, #ov-hero h1.one::after { width: 18px; } }
@media (prefers-reduced-motion: reduce) { body.in #ov-hero h1.one .ln.gold { animation: none !important; } }

/* ---- the living logo: neural activity drawn over the gold ---- */
#neuro { position: absolute; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
#speed { margin-right: 10px; }
#speed::before { display: none; }
@media (max-width: 760px) { #speed { padding: 7px 8px; margin-right: 6px; font-size: 9.5px; } }

/* ---- NABUBITO in neuron lettering: the canvas draws the word; the text stays for layout and readers ---- */
#ov-hero h1.one { font-size: clamp(66px, 11vw, 186px) !important; letter-spacing: .13em !important; padding-left: .13em; }
#ov-hero h1.one .ln.gold { background: none !important; color: transparent !important; filter: none !important; -webkit-text-stroke: 0 !important; }
body.in #ov-hero h1.one .ln.gold { animation: none !important; opacity: 1; transform: none; }
#neuro { mix-blend-mode: normal; }
@media (max-width: 760px) { #ov-hero h1.one { font-size: 16vw !important; letter-spacing: .08em !important; } }

#swarm { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 11; transition: opacity .3s; }
@media (max-width: 760px) { #speed { display: none; } }

/* ---- folds and narrow screens ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  #toc li span { display: none; }                 /* ticks only; the labels covered the content */
  #toc li { min-height: 14px; }                   /* the same row height with or without labels: hovering never shifts the rows under the pointer (surgeon 10-31: a click on one row landed on the row above) */
  #toc:hover li span, #toc:focus-within li span { display: inline; }
  .hud-mid { display: none; }
}
@media (max-width: 760px) {
  #ov-hero h1.one { font-size: 19vw !important; letter-spacing: .05em !important; padding-left: .05em; gap: .15em; }
  #ov-hero h1.one::before, #ov-hero h1.one::after { width: 10px; }
}
@media (max-width: 360px) {                         /* a folded Fold's cover screen */
  #ov-hero .lede { font-size: 12.5px; }
  #route .d { display: none; }
  #route li { padding: 7px 8px; }
  .card { padding: 16px 14px; }
  .card h3 { font-size: 34px !important; }
}

/* ---- chapter titles v2: scroll-driven, in their own gap, over a scrim ---- */
#slate { opacity: 0; animation: none !important; }
#slate::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(ellipse 55% 40% at 50% 50%, rgba(4, 4, 6, .82), rgba(4, 4, 6, .5) 55%, transparent 80%); }
#slate b { transform: translateY(calc(var(--d, 0) * -60px)) scale(calc(.94 + var(--w, 0) * .06)); filter: blur(calc((1 - var(--w, 0)) * 8px)); text-shadow: 0 0 40px rgba(5, 5, 6, .9); }
#slate .mono { transform: translateY(calc(var(--d, 0) * -40px)); letter-spacing: calc(.2em + (1 - var(--w, 0)) * .5em); }
#slate .ghost { transform: translateY(calc(var(--d, 0) * -140px)) scale(calc(1.1 - var(--w, 0) * .1)); opacity: calc(var(--w, 0) * .9); animation: none !important; }
#slate .rule { transform: scaleX(var(--w, 0)); animation: none !important; }
@media (max-width: 760px) { #route li:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } }

/* ---- full screen toggle ---- */
#fs { margin-right: 10px; }
#fs::before { display: none; }
#fs.ask { border-color: #5eead4; color: #5eead4; animation: fsAsk 1.4s ease-in-out 6; }
@keyframes fsAsk { 0%, 100% { box-shadow: 0 0 0 rgba(94, 234, 212, 0); } 50% { box-shadow: 0 0 18px rgba(94, 234, 212, .55); } }
@media (max-width: 760px) { #fs { padding: 7px 8px; margin-right: 6px; font-size: 9.5px; } }

@media (max-width: 760px) { #fs { font-size: 15px; padding: 4px 9px; line-height: 1; } }

/* ---- splash v3: a mode menu ---- */
#gate .mark-wrap { width: 176px; height: 176px; margin: 0; }
#gate #mark { width: 150px; height: 150px; }
.menu-h { letter-spacing: .3em; margin-top: 10px; }
.gate-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(980px, 100%); }
.opt { position: relative; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; min-height: 128px; cursor: pointer;
  background: rgba(12, 12, 14, .72); border: 1px solid var(--faint); color: var(--ink); border-radius: 2px;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s; }
.opt .k { font: 500 10px/1 var(--mono); color: var(--gold); letter-spacing: .2em; }
.opt b { font: 700 26px/1 var(--display); letter-spacing: .04em; }
.opt .d { font-size: 13px; line-height: 1.45; color: var(--dim); }
.opt .tag { position: absolute; top: 14px; right: 14px; font: 500 9px/1 var(--mono); letter-spacing: .2em; color: #0a0a0a; background: var(--gold); padding: 4px 6px; }
.opt::before, .opt::after { content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--gold); opacity: 0; transition: opacity .2s; }
.opt::before { top: -5px; left: -5px; border-top-width: 1px; border-left-width: 1px; }
.opt::after { bottom: -5px; right: -5px; border-bottom-width: 1px; border-right-width: 1px; }
.opt:hover, .opt:focus-visible { outline: none; border-color: var(--gold); transform: translateY(-3px); background: rgba(232, 195, 122, .06); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.opt:hover::before, .opt:hover::after, .opt:focus-visible::before, .opt:focus-visible::after { opacity: 1; }
.opt.prime { border-color: rgba(232, 195, 122, .55); background: rgba(232, 195, 122, .08); }
.gate-suite { color: var(--dim); letter-spacing: .18em; text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 3px; }
.gate-suite:hover, .gate-suite:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
#route.pick li { animation: routePick 1.3s ease-in-out 4; }
@keyframes routePick { 50% { border-color: var(--gold); background: rgba(232, 195, 122, .08); } }
@media (max-width: 1000px) { .gate-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #gate { gap: 10px; justify-content: flex-start; padding-top: 56px; overflow-y: auto; }
  #gate .mark-wrap { width: 104px; height: 104px; }
  #gate #mark { width: 88px; height: 88px; }
  .gate-sub { font-size: 13px; }
  .gate-menu { grid-template-columns: 1fr; gap: 8px; }
  .opt { min-height: 0; padding: 12px 14px; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 4px; }
  .opt .k { grid-row: 1 / 3; align-self: center; }
  .opt b { font-size: 20px; }
  .opt .d { font-size: 12px; }
  .opt .tag { top: 12px; right: 12px; }
  .gate-corner.bl, .gate-corner.br { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  #gate { gap: 12px; }
  #gate .mark-wrap { width: 120px; height: 120px; }
  #gate #mark { width: 100px; height: 100px; }
}

.gate-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(620px, 100%); }
@media (max-width: 760px) { .gate-menu { grid-template-columns: 1fr; } }

/* ---- the voice guide toggle on the splash ---- */
.gate-guide { background: none; border: 1px solid var(--faint); color: var(--ink); letter-spacing: .2em; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; border-radius: 2px; }
.gate-guide i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: background .2s, box-shadow .2s; }
.gate-guide[aria-pressed="true"] { border-color: rgba(94, 234, 212, .5); color: #5eead4; }
.gate-guide[aria-pressed="true"] i { background: #5eead4; box-shadow: 0 0 10px #5eead4; }
.gate-guide:hover, .gate-guide:focus-visible { border-color: var(--gold); outline: none; }


/* ---- cues: the screen answers her words ---- */
.kp { transition: box-shadow .5s, border-color .5s, transform .5s; }
.kp.cue { border-color: var(--k); box-shadow: 0 0 0 1px var(--k), 0 0 46px color-mix(in srgb, var(--k) 45%, transparent); transform: scale(1.025); }
.kp.cue li button { border-color: color-mix(in srgb, var(--k) 70%, transparent); color: #fff; }
.kp.wave li button { animation: chipWave 1.6s ease-out; }
.kp.wave li:nth-child(3n+1) button { animation-delay: .05s; } .kp.wave li:nth-child(3n+2) button { animation-delay: .2s; } .kp.wave li:nth-child(3n) button { animation-delay: .35s; }
@keyframes chipWave { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 14px var(--a, #e8c37a); border-color: var(--a, #e8c37a); } }
.kp li button { position: relative; }
.kp li button.bt { animation: btFlash .5s ease-in-out 6; border-color: #fff; color: #fff; z-index: 3; }
.kp li button.bt::after { content: attr(data-bt); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap;
  font: 700 10px/1 var(--mono, monospace); letter-spacing: .14em; color: #0a0a0a; background: #fff; padding: 4px 7px; pointer-events: none; text-decoration: line-through; text-decoration-thickness: 2px; }
@keyframes btFlash { 50% { background: rgba(255, 255, 255, .22); box-shadow: 0 0 22px rgba(255, 255, 255, .7); } }

@media (max-width: 760px) { #hud .pill { white-space: nowrap; } #guide[aria-pressed="true"]::before, #snd[aria-pressed="true"]::before { background: #5eead4; box-shadow: 0 0 8px #5eead4; } }

/* ---- she waits for your swipe ---- */
#guide-wait { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 40; pointer-events: none;
  font-size: 10.5px; letter-spacing: .22em; color: #0a0a0a; background: #5eead4; padding: 8px 14px; border-radius: 2px;
  box-shadow: 0 0 24px rgba(94, 234, 212, .45); animation: waitPulse 1.6s ease-in-out infinite; }
#guide-wait i { font-style: normal; display: inline-block; animation: waitArrow 1.6s ease-in-out infinite; }
@keyframes waitPulse { 50% { box-shadow: 0 0 6px rgba(94, 234, 212, .2); opacity: .85; } }
@keyframes waitArrow { 50% { transform: translateY(3px); } }

/* ---- the tour: standby and continue ---- */
#tour-continue { position: fixed; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: contIn .5s ease-out; }
#tour-continue[hidden] { display: none; }
#tour-continue p { font-size: 10px; letter-spacing: .26em; color: var(--dim); margin: 0; }
#tour-continue .btn { box-shadow: 0 0 30px rgba(232, 195, 122, .35); }
@keyframes contIn { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 760px) { #pace { padding: 7px 8px; } }

.opt .tag.tag-free { background: #5eead4; }

/* ---- the end: a live teaser of the Neuron map, to walk on into the Suite ---- */
.neuron-tease { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.nt-frame { position: relative; width: min(540px, 86vw); aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(94, 234, 212, .35); border-radius: 3px;
  background: #05070d; box-shadow: 0 0 60px rgba(94, 234, 212, .12); transition: box-shadow .4s, border-color .4s, transform .4s; }
.nt-hold { position: absolute; inset: 0; }
.nt-hold iframe { position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.nt-glass { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 5, 6, .75) 100%); pointer-events: none; }
.nt-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; font-size: 10.5px; letter-spacing: .2em; }
.nt-cap b { color: #5eead4; font-weight: 600; } .nt-cap i { font-style: normal; color: var(--dim); letter-spacing: .12em; } .nt-cap em { font-style: normal; color: var(--gold); }
.neuron-tease:hover .nt-frame, .neuron-tease:focus-visible .nt-frame { border-color: #5eead4; box-shadow: 0 0 80px rgba(94, 234, 212, .3); transform: translateY(-2px); }
.neuron-tease:focus-visible { outline: none; }
@media (max-width: 760px) { #ov-end { gap: 18px; } #ov-end h2.big { font-size: clamp(26px, 8vw, 40px); } }
@media (max-height: 760px) and (min-width: 761px) { .nt-frame { width: min(420px, 60vw); } #ov-end { gap: 16px; } }

.nt-cap em { font-family: var(--mono, monospace) !important; font-weight: 500 !important; font-size: 10.5px; letter-spacing: .2em; color: var(--gold) !important; }
@media (max-width: 760px) { #hud .brand-text, #hud .brand span:not(:first-child) { display: none; } #hud .pill { padding-left: 9px; padding-right: 9px; } }

#ov-end .nt-cap em { font-family: var(--mono, monospace) !important; font-weight: 500 !important; font-size: 10.5px; letter-spacing: .2em; color: var(--gold) !important; }
/* ---- a soft nudge to keep going ---- */
#keep-going { position: fixed; left: 50%; bottom: 70px; transform: translate(-50%, 8px); z-index: 30; pointer-events: none;
  font-size: 10.5px; letter-spacing: .24em; color: var(--ink); opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; text-align: center; padding: 0 16px; }
#keep-going.on { opacity: .75; transform: translate(-50%, 0); animation: keepBob 2.6s ease-in-out infinite 1.2s; }
@keyframes keepBob { 50% { transform: translate(-50%, 4px); opacity: .5; } }

.opt .tag.tag-new { background: #f472b6; }
.vol { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 0 10px; height: 32px; border: 1px solid var(--line, #2a2722); }
.vol span { font-size: 9.5px; letter-spacing: .18em; color: var(--dim); }
.vol input { width: 74px; accent-color: #e8c37a; cursor: pointer; }
@media (max-width: 760px) { .vol span { display: none; } .vol { padding: 0 6px; margin-left: 4px; } .vol input { width: 52px; } }

/* three ways in: one even row of three (stacked on phones) */
.gate-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(940px, 100%); }
@media (max-width: 860px) { .gate-menu { grid-template-columns: 1fr; width: min(520px, 100%); } }

#eta { color: var(--gold); letter-spacing: .14em; min-width: 92px; justify-content: center; cursor: default; }
#eta::before { display: none; }
@media (max-width: 760px) { #eta { min-width: 0; font-size: 9px; } }

/* the bar stays on one line: the estate status gives way first; on phones the timer sits under the bar and the phone keys do volume */
@media (max-width: 1600px) { .hud-mid { display: none; } }
@media (max-width: 760px) { #eta { position: fixed; top: 64px; right: 16px; border: 0; background: none; padding: 0; min-width: 0; font-size: 10px; opacity: .85; } .vol { display: none; } }

#guide-wait { pointer-events: auto; cursor: pointer; border: 0; font: inherit; }
#guide-wait:hover { filter: brightness(1.12); }

/* ---- plain-words gate line, about/privacy links (review fixes 10-25) ---- */
.gate-sub { max-width: 38em; line-height: 1.5; }
.gate-sub b { color: var(--ink); font-weight: 500; }
.gate-corner a, .sig a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--faint); }
.gate-corner a:hover, .gate-corner a:focus-visible, .sig a:hover, .sig a:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
@media (hover: none) { .gate-corner.bl { display: none; } .gate-corner.br { display: block; } }
@media (max-width: 760px) { .gate-corner.br { position: static; order: 99; margin-top: 8px; } }

/* the charge ring: how far to the next stop (outer arc fills as you scroll), a burst when you arrive, then the rest that wakes its voice (inner arc) */
#charge { position: fixed; right: 24px; bottom: 18px; width: 60px; height: 60px; z-index: 22; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .5s, transform .5s; }
#charge.on { opacity: 1; transform: none; }
#charge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
#charge circle { fill: none; }
#charge .trk { stroke: var(--faint); stroke-width: 1; }
#charge .arc { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; filter: drop-shadow(0 0 4px rgba(232, 195, 122, .7)); transition: stroke-dashoffset .12s linear; }
#charge .rest { stroke: var(--teal, #5eead4); stroke-width: 1.5; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; opacity: .9; filter: drop-shadow(0 0 3px rgba(94, 234, 212, .6)); }
#charge .core { fill: var(--gold-2); opacity: .5; transition: fill .3s, opacity .3s; }
#charge b { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font-size: 8px; letter-spacing: .22em; padding-left: .22em; color: var(--dim); white-space: nowrap; transition: color .3s; }
#charge .burst { position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
#charge.hit .burst { animation: chargeBurst .7s ease-out; }
#charge.hit .arc { stroke: #fff4d6; }
#charge.at .core { fill: var(--gold); opacity: 1; }
#charge.at b { color: var(--gold); }
#charge.live .core { fill: var(--teal, #5eead4); opacity: 1; animation: chargeLive 1.1s ease-in-out infinite; }
#charge.live b { color: var(--teal, #5eead4); }
@keyframes chargeBurst { 0% { transform: scale(.6); opacity: .9; border-width: 3px; } 100% { transform: scale(1.9); opacity: 0; border-width: 1px; } }
@keyframes chargeLive { 50% { transform: scale(1.8); transform-origin: 30px 30px; } }
body.gated #charge { opacity: 0 !important; }
@media (max-width: 720px) { #charge { right: 12px; bottom: 64px; width: 46px; height: 46px; } #charge b { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { #charge.hit .burst, #charge.live .core { animation: none; } }

/* 10-27: ESTATE · ONLINE sits in the bar's own flow, right after the brand, so the level meter and the pills can never draw over it (it was centred absolutely and the wider bar ran into it) */
#hud .hud-mid { position: static; transform: none; margin: 0 auto 0 28px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
#hud #eq { flex: none; }

/* PC hint on "how it works": keys + wheel, above the chapter line (Eli 10-29) */
#keyhint { position: fixed; left: 28px; bottom: 64px; z-index: 21; display: flex; align-items: center; gap: 10px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .1em; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; pointer-events: none; }
#keyhint.on { opacity: 1; transform: none; }
#keyhint[hidden] { display: none; }
#keyhint .k { border: 1px solid currentColor; border-bottom-width: 3px; border-radius: 5px; padding: 6px 8px; color: #e8e6e1; }
#keyhint .mouse { color: #e8e6e1; }
#keyhint .wheel { animation: kh-wheel 1.3s ease-in-out infinite; }
@keyframes kh-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---- side index over content (Eli 10-31: the index labels covered THE APPS list) ---- */
@media (min-width: 761px) {
  .kinds { right: calc(3vw + 52px); }                                   /* the index ticks own a clear strip on the right */
  #toc { padding: 10px 12px; margin-right: -12px; border: 1px solid transparent; border-radius: 2px; transition: opacity .4s, background .25s, border-color .25s; }
  #toc:hover, #toc:focus-within { background: rgba(8, 8, 10, .94); border-color: #23211c; backdrop-filter: blur(8px); }   /* labels on a panel, never on the content */
  #toc li.on span { background: rgba(8, 8, 10, .85); padding: 3px 6px; margin: -3px -6px; }
}

/* round 2 (10-31): THE AGENT ladder graph card leaves a strip for the animated ladder beside it (agent.js frames it there) */
@media (min-width: 761px) { .card.graphc { width: min(820px, 62vw); } }