:root {
  --bg: #02030a;
  --ink: #eef3ff;
  --ink-dim: rgba(222, 232, 255, 0.62);
  --ink-faint: rgba(222, 232, 255, 0.34);
  --line: rgba(160, 200, 255, 0.18);
  --glow: #9fe8ff;
  --gold: #ffd28a;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --step-h: 125vh;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* One deliberate dark world (deep space); not theme-switched. */
:root { color-scheme: dark; }
html { background: var(--bg); color: var(--ink); scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); margin: 0; font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html:not([data-lang="es"]) [lang="es"] { display: none !important; }
html[data-lang="es"] [lang="en"] { display: none !important; }

/* Boot screen until the 3D starts; if scripts never run, the text page shows after 5 s. */
.boot { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--bg); pointer-events: none; animation: boot-out .6s 5s forwards; }
.boot p { font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); display: flex; align-items: center; gap: .8rem; margin: 0; }
.boot i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px var(--glow); animation: boot-pulse 1.1s ease-in-out infinite; }
html.ready .boot, html.no-webgl .boot { animation: boot-out .7s forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes boot-pulse { 50% { opacity: .25; transform: scale(.7); } }
button { font: inherit; color: inherit; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
html.no-webgl #scene { display: none; }
html.no-webgl body { background: radial-gradient(120% 80% at 70% 10%, #0b1640 0%, #02030a 60%); }

/* ---------- story ---------- */
main { position: relative; z-index: 2; }
.step { min-height: var(--step-h); position: relative; display: flex; padding: 0 clamp(16px, 6vw, 96px); }
.copy { height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
html.webgl .copy { position: fixed; top: 0; left: clamp(16px, 6vw, 96px); opacity: 0; pointer-events: none; }
html.webgl .pos-right .copy { left: auto; right: clamp(56px, 12vw, 200px); }
html.webgl .pos-hero .copy, html.webgl .pos-center .copy { left: 0; right: 0; margin: 0 auto; }
.pos-hero .copy { background: radial-gradient(46% 26% at 50% 66%, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 100%); max-width: none !important; }
.pos-hero .copy, .pos-center .copy { margin: 0 auto; text-align: center; align-items: center; max-width: 52rem; }
.pos-left .copy { justify-content: flex-end; padding-bottom: 16vh; }
.pos-right .copy { justify-content: flex-start; padding-top: 18vh; }
html:not(.webgl) .step { min-height: auto; padding-top: 12vh; padding-bottom: 12vh; }
html:not(.webgl) .copy { height: auto; }

.hero-kicker { font-family: var(--mono); font-size: clamp(.8rem, 1.6vw, 1.05rem) !important; letter-spacing: .9em; text-transform: uppercase; color: var(--ink) !important; margin: 0 0 1.4rem !important; padding-left: .9em; text-shadow: 0 0 20px rgba(0, 0, 0, .9); }
.hero-title { font-weight: 300; font-size: clamp(5.5rem, 22vw, 17rem); letter-spacing: -0.06em; line-height: .82; margin: 0; background: linear-gradient(180deg, #ffffff 10%, #a9c8ff 60%, rgba(140, 170, 255, .25) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px rgba(120, 180, 255, .25); }
.hero-sub { font-size: clamp(1.25rem, 2.7vw, 2rem); font-weight: 500; line-height: 1.3; color: #ffffff; margin: 1.8rem auto 0; max-width: 30ch; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 28px rgba(0, 0, 0, .95), 0 2px 60px rgba(0, 0, 0, .9); }
.hint { font-family: var(--mono); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2.6rem; text-shadow: 0 0 14px rgba(0, 0, 0, 1); }
h2 { text-shadow: 0 0 30px rgba(0, 0, 0, .7); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 1.1rem; text-wrap: balance; }
.copy p { font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.55; color: var(--ink-dim); margin: 0 0 .9rem; text-shadow: 0 0 16px rgba(0, 0, 0, .9); }
.kicker { font-family: var(--mono); font-size: .72rem !important; letter-spacing: .3em; text-transform: uppercase; color: var(--glow) !important; margin-bottom: 1.2rem !important; }
.punch { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; color: var(--ink) !important; font-weight: 500; letter-spacing: -0.02em; }
.mono { font-family: var(--mono); font-size: .9rem !important; letter-spacing: .12em; color: var(--gold) !important; }
.si { display: inline-block; font-family: var(--mono); font-size: .42em; font-weight: 400; letter-spacing: .14em; color: var(--glow); border: 1px solid rgba(159, 232, 255, .6); border-radius: 999px; padding: .2em .7em; vertical-align: .55em; box-shadow: 0 0 18px rgba(110, 200, 255, .25); }
.si-note { font-family: var(--mono); font-size: .72rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--glow) !important; max-width: 46ch; margin: -.2rem auto 1.1rem !important; }
.pos-left .si-note { margin-left: 0 !important; margin-right: 0 !important; }
.equation { font-weight: 300; font-size: clamp(3rem, min(11vw, 15vh), 8rem) !important; line-height: .9 !important; letter-spacing: -0.05em; margin: .2rem 0 1rem !important; color: var(--ink) !important; text-shadow: 0 0 60px rgba(120, 180, 255, .35) !important; }
.equation .plus { color: var(--glow); font-weight: 300; margin: 0 .12em; }
.clv2-link { cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--gold); font-weight: 500; background: none; border: 0; padding: 0 .1em; border-bottom: 1px solid rgba(255, 210, 138, .6); text-shadow: 0 0 14px rgba(255, 210, 138, .5); transition: color .2s, text-shadow .2s; }
.clv2-link:hover, .clv2-link:focus-visible { color: #fff2d6; text-shadow: 0 0 22px rgba(255, 210, 138, .95); outline: none; }
.credit { font-family: var(--mono); font-size: .8rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink) !important; margin-top: 1.4rem !important; }
.credit strong { color: var(--gold); font-weight: 500; }
.small { font-size: .9rem !important; color: var(--ink-faint) !important; }
.legend { list-style: none; padding: 0; margin: .4rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); margin-right: .5rem; vertical-align: .05em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0 .8rem; }
.cta { cursor: pointer; border: 1px solid rgba(160, 230, 255, .55); background: rgba(120, 200, 255, .08); border-radius: 999px; padding: .85rem 1.3rem; font-size: .95rem; letter-spacing: .02em; backdrop-filter: blur(8px); box-shadow: 0 0 30px rgba(110, 200, 255, .15), inset 0 0 20px rgba(110, 200, 255, .08); transition: background .2s, box-shadow .2s; }
.cta:hover { background: rgba(120, 200, 255, .18); box-shadow: 0 0 40px rgba(110, 200, 255, .35); }
.cta.ghost { border-color: var(--line); background: transparent; box-shadow: none; }

/* ---------- offers ---------- */
.pos-center .copy.offers { max-width: 68rem; }
.offer-list { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; text-align: left; }
.offer { padding: 1.1rem 1.15rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 10, 24, .8); backdrop-filter: blur(12px); }
.offers > .small { color: var(--ink-dim) !important; }
.offer.flagship { border-color: rgba(201, 167, 255, .55); box-shadow: 0 0 34px rgba(201, 167, 255, .14); }
.offer h3 { margin: .55rem 0 .55rem; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.offer p { font-size: clamp(.86rem, 1vw, .96rem) !important; line-height: 1.5 !important; margin: 0 0 .55rem !important; }
.o-tag { font-family: var(--mono); font-size: .64rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim) !important; margin: 0 !important; }
.o-tag i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c, #c9a7ff); box-shadow: 0 0 10px var(--c, #c9a7ff); margin-right: .45rem; vertical-align: .04em; }
.o-tag b { font-weight: 500; color: #c9a7ff; }
.o-price { font-family: var(--mono); font-size: .74rem !important; letter-spacing: .04em; color: var(--gold) !important; border-top: 1px solid var(--line); padding-top: .55rem; margin-bottom: 0 !important; }
.o-more { margin: .55rem 0 0 !important; font-size: .78rem !important; }
.o-more a { color: var(--glow); text-decoration: none; }
.o-more a:hover { text-decoration: underline; }
.offers .cta-row { justify-content: center; }
a.cta { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
/* our work: six cards, a little more compact than the offers */
.work-list { gap: .7rem; }
.work-list .offer { padding: .9rem 1rem .85rem; }
.work-list .offer h3 { margin: .4rem 0; }
.work-list .offer p:not(.o-tag):not(.o-price):not(.o-more) { font-size: clamp(.82rem, .92vw, .9rem) !important; margin-bottom: .45rem !important; }
/* laptops with short screens: two rows of cards must fit between the top and bottom bars */
@media (min-width: 761px) and (max-height: 860px) {
  .work-step h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
  .work-step .kicker { margin-bottom: .5rem !important; }
  .work-list { gap: .55rem; margin-bottom: .5rem; }
  .work-list .offer { padding: .65rem .9rem .6rem; }
  .work-list .offer h3 { font-size: 1.05rem; margin: .3rem 0; }
  .work-list .offer p:not(.o-tag):not(.o-price):not(.o-more) { font-size: .8rem !important; line-height: 1.4 !important; margin-bottom: .35rem !important; }
  .work-list .o-price { font-size: .68rem !important; padding-top: .4rem; }
  .work-list .o-more { margin-top: .35rem !important; }
  .work-step .small { font-size: .8rem !important; margin-bottom: 0 !important; }
}

/* ---------- HUD ---------- */
.hud { position: fixed; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(16px, 3vw, 36px); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { top: 0; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.hud-bottom { bottom: 0; align-items: flex-end; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.mark { display: flex; align-items: baseline; gap: .6rem; color: var(--ink); text-decoration: none; }
.mark-word { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.mark-plus { font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; color: var(--ink-faint); margin-left: .35rem; }
.mark-sub { font-family: var(--mono); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); }
.hud-actions { display: flex; gap: .4rem; align-items: center; }
.lang { cursor: pointer; background: none; border: 1px solid transparent; border-radius: 999px; padding: .35rem .6rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--ink-faint); }
.lang[aria-pressed="true"] { color: var(--ink); border-color: var(--line); }
.sound { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; margin-right: .3rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.sound .bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.sound[aria-pressed="true"] { color: var(--ink); border-color: rgba(160, 230, 255, .5); }
.sound .w { display: none; }
.sound.waiting .w { display: inline; }
.sound.waiting .r { display: none; }
.sound.waiting { color: #ffffff; font-size: .9rem; font-weight: 500; letter-spacing: .14em; padding: .75rem 1.4rem; gap: .7rem; border: 1.5px solid rgba(170, 238, 255, .95); background: rgba(80, 195, 255, .32); text-shadow: 0 0 12px rgba(140, 230, 255, .8); animation: call 1.4s ease-in-out infinite; }
.sound.waiting .bars { height: 14px; }
.sound.waiting .bars i { width: 3px; height: 8px; }
@keyframes call { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 220, 255, .7), 0 0 26px rgba(120, 220, 255, .45); transform: scale(1); } 50% { box-shadow: 0 0 0 14px rgba(120, 220, 255, 0), 0 0 46px rgba(120, 220, 255, .75); transform: scale(1.04); } }
.sound[aria-pressed="true"] .bars i { animation: eq 1s ease-in-out infinite; }
.sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.35s; }
.sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 50% { height: 10px; } }
.sound-hint { position: fixed; z-index: 5; top: calc(64px + env(safe-area-inset-top, 0px)); right: clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: .55rem; margin: 0; padding: .4rem .8rem; border: 1px solid rgba(160, 230, 255, .35); border-radius: 999px; background: rgba(6, 10, 24, .6); backdrop-filter: blur(10px); font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.sound-hint i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); animation: boot-pulse 1.1s ease-in-out infinite; }
.sound:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.agent-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; margin-left: .5rem; background: rgba(10, 20, 40, .45); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; backdrop-filter: blur(10px); }
.agent-toggle .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
.agent-toggle[aria-pressed="true"] { border-color: rgba(120, 255, 200, .6); }
.agent-toggle[aria-pressed="true"] .dot { background: #7dffc8; box-shadow: 0 0 12px #7dffc8; }

.readout { font-family: var(--mono); display: flex; flex-direction: column; gap: .2rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.readout-scale { font-size: 1.15rem; letter-spacing: .04em; color: var(--ink); text-transform: none; }
.readout-scale sup { font-size: .6em; }
.readout-name { color: var(--glow); }
.proto { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .7rem; }

.ruler { position: fixed; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); height: 52vh; z-index: 5; display: flex; gap: .7rem; }
.ruler-track { position: relative; width: 1px; background: linear-gradient(var(--line), rgba(160, 200, 255, .5), var(--line)); }
.ruler-marker { position: absolute; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px var(--glow); transform: translateY(-50%); }
.ruler-ticks { list-style: none; margin: 0; padding: 0; position: relative; width: 7.5rem; }
.ruler-ticks li { position: absolute; transform: translateY(-50%); font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: var(--ink-faint); cursor: pointer; white-space: nowrap; transition: color .2s; }
.ruler-ticks li:hover, .ruler-ticks li.on { color: var(--ink); }
.ruler-ticks li sup { font-size: .75em; }

.labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.lbl { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; will-change: transform, opacity; opacity: 0; }
.lbl::before { content: ""; position: absolute; left: -14px; top: 50%; width: 9px; height: 1px; background: currentColor; opacity: .7; }
.lbl small { display: block; color: var(--ink-faint); font-size: .9em; margin-top: .15rem; }

/* ---------- player ---------- */
.player { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 10, 24, .55); backdrop-filter: blur(10px); position: relative; }
.pbtn { cursor: pointer; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--ink); display: grid; place-items: center; }
.pbtn:hover, .speeds button:hover { background: rgba(160, 200, 255, .12); }
.pbtn:focus-visible, .speeds button:focus-visible, .lang:focus-visible, .agent-toggle:focus-visible, .cta:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.play { background: rgba(160, 230, 255, .14); }
.play .ico { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.play[aria-pressed="false"] .ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.speeds { display: flex; gap: .15rem; margin-left: .3rem; }
.speeds button { cursor: pointer; border: 1px solid transparent; background: none; border-radius: 999px; padding: .3rem .6rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.speeds button[aria-pressed="true"] { color: var(--ink); border-color: var(--line); }
.progress { position: absolute; left: 1.2rem; right: 1.2rem; bottom: -1px; height: 1px; background: rgba(160, 200, 255, .12); }
.progress i { display: block; height: 100%; width: 0; background: var(--glow); box-shadow: 0 0 8px var(--glow); }

/* ---------- Condor Lab V2: confidential ---------- */
html.mystery-open .hud, html.mystery-open .copy, html.mystery-open .labels, html.mystery-open .ruler,
html.mystery-open .agent-panel, html.mystery-open .agent-banner { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
.mystery { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.mystery.on { opacity: 1; pointer-events: auto; cursor: pointer; }
.my-file { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: clamp(16px, 3vw, 36px); margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .32em; color: rgba(255, 120, 110, .85); }
.my-close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: clamp(16px, 3vw, 36px); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .4); color: #fff; font-size: 1.4rem; cursor: pointer; }
.my-close:focus-visible { outline: 2px solid #ff6b5e; outline-offset: 2px; }
.my-stamp { position: absolute; left: 50%; top: 46%; width: min(78vw, 980px); height: min(22vw, 250px, 30vh); transform: translate(-50%, -50%) rotate(-4deg) scale(1.6); border: 6px solid rgba(255, 70, 60, .85); border-radius: 18px; box-shadow: 0 0 40px rgba(255, 60, 50, .35), inset 0 0 40px rgba(255, 60, 50, .2); opacity: 0; }
.mystery.stamped .my-stamp { animation: stamp .28s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
.my-foot { position: absolute; left: 50%; bottom: calc(7vh + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(80vw, 560px); display: flex; flex-direction: column; align-items: center; gap: 1rem; opacity: 0; transition: opacity .8s ease .2s; }
.mystery.stamped .my-foot { opacity: 1; }
.my-redact { width: 100%; display: flex; flex-direction: column; gap: .55rem; }
.my-redact i { display: block; height: .7rem; background: #0b0b0d; border: 1px solid rgba(255, 255, 255, .14); }
.my-access { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .4em; text-transform: uppercase; color: rgba(255, 140, 130, .95); }

/* ---------- agent panel ---------- */
.agent-banner { position: fixed; z-index: 6; top: calc(64px + env(safe-area-inset-top, 0px)); left: clamp(16px, 3vw, 40px); max-width: min(52vw, 660px); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.agent-banner.on { opacity: 1; transform: none; }
.agent-banner p { margin: 0; text-shadow: 0 0 18px rgba(0, 0, 0, .95); }
.ab-kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #7dffc8; }
.ab-title { font-size: clamp(1.4rem, min(2.7vw, 4.6vh), 2.6rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; color: #eafff6; margin-top: .5rem !important; }
.ab-sub { font-size: clamp(.85rem, min(1.15vw, 2.2vh), 1.05rem); color: rgba(201, 255, 233, .75); margin-top: .5rem !important; max-width: 44ch; }
.ap-title { display: flex; flex-direction: column; gap: .2rem; }
.ap-title strong { font-weight: 500; font-size: .95rem; color: #eafff6; }
.agent-panel { position: fixed; z-index: 6; right: clamp(16px, 3vw, 40px); top: 76px; bottom: 76px; width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; background: rgba(2, 10, 14, .72); border: 1px solid rgba(120, 255, 200, .25); border-radius: 14px; backdrop-filter: blur(14px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.agent-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.agent-panel header { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(120, 255, 200, .15); }
.agent-panel header .mono { color: #7dffc8 !important; font-size: .72rem !important; }
.agent-panel pre { margin: 0; padding: 1rem; overflow: auto; flex: 1; font-family: var(--mono); font-size: .72rem; line-height: 1.55; color: #c9ffe9; white-space: pre-wrap; word-break: break-word; }
.mini { cursor: pointer; background: none; border: 1px solid rgba(120, 255, 200, .3); border-radius: 999px; padding: .3rem .7rem; font-size: .7rem; color: #c9ffe9; margin-left: .3rem; }

.noscript { padding: 2rem; }

@media (max-width: 760px) {
  :root { --step-h: 115vh; }
  .ruler { display: none; }
  .agent-toggle span[lang], .sound .r { display: none !important; }
  .sound.waiting { font-size: .74rem; padding: .6rem 1rem; }
  html.webgl .pos-right .copy { left: 16px; right: 16px; }
  html.webgl .copy { left: 16px; right: 16px; }
  .copy { justify-content: flex-end !important; padding-bottom: 14vh; padding-top: 0 !important; }
  .pos-hero .copy { justify-content: center !important; padding-bottom: 0; }
  .proto { display: none; }
  .agent-banner { right: 16px; max-width: none; }
  .agent-panel { top: calc(230px + env(safe-area-inset-top, 0px)); }
  .hud-bottom { flex-direction: column; align-items: center; gap: .7rem; }
  .readout { align-self: flex-start; }
  .speeds button { padding: .3rem .45rem; }
  html.webgl .pos-center .copy.offers { left: 16px; right: 16px; }
  .offers-step .copy { justify-content: center !important; padding: 92px 0 calc(12vh + 30px) !important; }
  .offers .kicker { margin-bottom: .5rem !important; }
  .offers h2 { font-size: 1.5rem; margin-bottom: .7rem; }
  .offer-list { align-self: stretch; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; gap: .6rem; margin: 0 -16px .6rem; padding: 0 16px .3rem; }
  .offer { flex: 0 0 78vw; scroll-snap-align: start; padding: .85rem .95rem .8rem; }
  .offer h3 { margin: .4rem 0; }
  .offer p { font-size: .84rem !important; }
  .o-price { font-size: .68rem !important; }
  .offers > .small { font-size: .78rem !important; line-height: 1.45 !important; }
  .offers .cta-row { gap: .5rem; margin: .7rem 0 .4rem; flex-wrap: nowrap; }
  .offers .cta { padding: .6rem .85rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .copy, .agent-panel { transition: none; }
}