/* Ondues, On AI page. A different world from the rest of the site:
   a dark field of live particles, light that reads the words, glass that shows its work. */

@property --r { syntax: '<percentage>'; inherits: false; initial-value: -10%; }
@property --hold { syntax: '<number>'; inherits: true; initial-value: 0; }

.ai-site {
  --void: #05060A;
  --ai-ink: #F3F1F8;
  --ai-2: #B9BACB;
  --ai-3: #7D7F95;
  --ai-line: rgba(255, 255, 255, .09);
  --ai-line-2: rgba(255, 255, 255, .16);
  --ai-glass: rgba(13, 15, 23, .74);
  --spec: linear-gradient(100deg, #FA4D28 0%, #FF7A45 28%, #D6336A 62%, #7B61FF 100%);
  background: var(--void);
  color: var(--ai-ink);
}
body:has(.ai-site) { background: #05060A; }
.ai-site .nav-pill { background: rgba(255, 255, 255, .93); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 60px -24px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(250, 77, 40, .25); }

/* ---------- the world behind everything ---------- */
.ai-gl { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.ai-flat { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none;
  background: radial-gradient(50% 42% at 50% 32%, rgba(250, 77, 40, .3), transparent 70%), radial-gradient(40% 46% at 78% 70%, rgba(123, 97, 255, .22), transparent 70%), radial-gradient(38% 40% at 20% 76%, rgba(214, 51, 106, .18), transparent 70%), var(--void); }
[data-ai-flat] .ai-flat { display: block; }
/* drawn without WebGL: the browser is compositing on the CPU, so drop the costly extras */
[data-ai-mode="2d"] .ai-veil::after { display: none; }
[data-ai-mode="2d"] .ai-sec .fx { filter: none; }
.ai-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 95% at 50% 45%, transparent 52%, rgba(0, 0, 0, .7) 100%); }
.ai-veil::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url(assets/grain.png); background-size: 220px 220px; }
.ai-glow { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ai-glow i { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 77, 40, .16), rgba(214, 51, 106, .07) 55%, transparent); transform: translate3d(var(--sx, -900px), var(--sy, -900px), 0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); will-change: transform; }

/* ---------- entering: an eyelid of light opens onto the field ---------- */
.ai-curtain { display: none; }
[data-js] .ai-curtain { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.ai-curtain .lid { position: absolute; left: 0; right: 0; height: 50.5%; background: #020305; }
.ai-curtain .lid.t { top: 0; animation: aiLidT 1.5s 1s cubic-bezier(.76, 0, .24, 1) forwards; }
.ai-curtain .lid.b { bottom: 0; animation: aiLidB 1.5s 1s cubic-bezier(.76, 0, .24, 1) forwards; }
.ai-curtain .line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #FA4D28 18%, #FF7A45 38%, #D6336A 62%, #7B61FF 82%, transparent); box-shadow: 0 0 22px rgba(250, 77, 40, .9), 0 0 60px rgba(214, 51, 106, .6); transform: scaleX(0); animation: aiLine .95s .15s cubic-bezier(.16, 1, .3, 1) forwards, aiLineOut .7s 1.25s ease forwards; }
.ai-curtain .cap { position: absolute; left: 0; right: 0; top: calc(50% - 44px); text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; animation: aiCap 1.3s .2s ease forwards; }
@keyframes aiLidT { to { transform: translate3d(0, -101%, 0); } }
@keyframes aiLidB { to { transform: translate3d(0, 101%, 0); } }
@keyframes aiLine { to { transform: scaleX(1); } }
@keyframes aiLineOut { to { opacity: 0; transform: scaleX(1) scaleY(26); } }
@keyframes aiCap { 20% { opacity: 1; letter-spacing: .42em; } 70% { opacity: 1; } 100% { opacity: 0; letter-spacing: .52em; } }

/* ---------- instrument frame and mode readout ---------- */
.ai-frame { position: fixed; inset: 16px; z-index: 3; pointer-events: none; }
.ai-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 154, 112, .45); }
.ai-frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; border-top-left-radius: 8px; }
.ai-frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; border-top-right-radius: 8px; }
.ai-frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; border-bottom-left-radius: 8px; }
.ai-frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; border-bottom-right-radius: 8px; }
.ai-hud { position: fixed; right: 40px; bottom: 34px; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ai-3); }
.ai-hud .dot { width: 6px; height: 6px; border-radius: 99px; background: #FA4D28; box-shadow: 0 0 10px #FA4D28; animation: aiOrb 1.6s ease-in-out infinite; }
.ai-hud .ks { position: relative; height: 14px; min-width: 150px; }
.ai-hud .k { position: absolute; right: 0; top: 0; white-space: nowrap; color: #FFB08E; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .5s ease, transform .6s var(--ease); }
.ai-site:not([data-ai-k]) .ai-hud .k0, .ai-site[data-ai-k="0"] .ai-hud .k0, .ai-site[data-ai-k="1"] .ai-hud .k1, .ai-site[data-ai-k="2"] .ai-hud .k2, .ai-site[data-ai-k="3"] .ai-hud .k3, .ai-site[data-ai-k="4"] .ai-hud .k4, .ai-site[data-ai-k="5"] .ai-hud .k5, .ai-site[data-ai-k="6"] .ai-hud .k6 { opacity: 1; transform: none; }
[data-nav-hide] .ai-frame { opacity: 1; }

/* ---------- shared pieces ---------- */
.ai-sec { position: relative; z-index: 2; --v: var(--p, .5); --vin: clamp(0, calc(var(--v) * 5), 1); --vout: clamp(0, calc((1 - var(--v)) * 5), 1); --vv: calc(var(--vin) * var(--vout)); }
.ai-sec .fx { opacity: var(--vv); transform: translate3d(0, calc((1 - var(--vin)) * 70px - (1 - var(--vout)) * 70px), 0) scale(calc(.955 + var(--vv) * .045)); filter: blur(calc((1 - var(--vv)) * 9px)); will-change: transform, opacity; }
.ai-site .pin { background: transparent; }
.ai-site .wrap { z-index: 2; }

.ai-eb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #FF9A70; }
.ai-eb .orb, .ai-orb { display: inline-block; width: 10px; height: 10px; border-radius: 99px; background: radial-gradient(circle at 35% 30%, #fff 0 14%, #FFB27A 30%, #FA4D28 55%, #D6336A 80%, #7B61FF 100%); box-shadow: 0 0 12px rgba(250, 77, 40, .9); animation: aiOrb 2.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes aiOrb { 50% { transform: scale(.78); box-shadow: 0 0 20px rgba(214, 51, 106, .95); } }

/* decode: every character arrives as noise, then settles, left to right */
.dec { display: inline; }
.dec .wd { display: inline-block; white-space: nowrap; }
.dec .c { position: relative; display: inline-block; white-space: pre; }
.dec .c .f { display: inline-block; }
.dec .c .g { position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: 0; color: #FF9A70; }
[data-js] .dec .c .f { animation: decF .7s both; animation-delay: calc(var(--i, 0) * 34ms + var(--d0, 0ms)); }
[data-js] .dec .c .g.a { animation: decA .7s both; animation-delay: calc(var(--i, 0) * 34ms + var(--d0, 0ms)); }
[data-js] .dec .c .g.b { animation: decB .7s both; animation-delay: calc(var(--i, 0) * 34ms + var(--d0, 0ms)); }
[data-js] .dec:not([data-in]) .c > * { animation-play-state: paused; }
[data-js] .dec.now .c > * { animation-play-state: running; }
@keyframes decF { 0%, 58% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes decA { 0% { opacity: 0; } 8%, 30% { opacity: .95; } 31%, 100% { opacity: 0; } }
@keyframes decB { 0%, 30% { opacity: 0; } 31%, 57% { opacity: .9; } 58%, 100% { opacity: 0; } }

/* read: light passes over the heading like a scanner */
.ai-h2 { position: relative; font-size: clamp(38px, 4.6vw, 74px); line-height: 1; letter-spacing: -.05em; font-weight: 600; margin: 0; text-wrap: balance; color: #F6F4FB; }
.ai-h2 .spec, .spec { background: var(--spec); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
[data-js] .ai-h2 { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--r), rgba(0, 0, 0, .13) calc(var(--r) + 9%)); mask-image: linear-gradient(90deg, #000 0, #000 var(--r), rgba(0, 0, 0, .13) calc(var(--r) + 9%)); }
[data-js] .ai-h2[data-in] { animation: aiRead 1.6s cubic-bezier(.35, .55, .2, 1) forwards; }
[data-js] .ai-h2::after { content: ""; position: absolute; top: -8%; bottom: -8%; left: calc(var(--r) - 1px); width: 2px; border-radius: 2px; background: linear-gradient(#FF9A70, #D6336A); box-shadow: 0 0 16px rgba(250, 77, 40, .9), 0 0 40px rgba(214, 51, 106, .6); opacity: 0; }
[data-js] .ai-h2[data-in]::after { animation: aiBar 1.6s cubic-bezier(.35, .55, .2, 1) forwards; }
@keyframes aiRead { from { --r: -10%; } to { --r: 112%; } }
@keyframes aiBar { 0% { opacity: 0; left: -1%; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: 100%; } }

.ai-lead { font-size: clamp(16px, 1.25vw, 19.5px); line-height: 1.58; color: var(--ai-2); margin: 20px 0 0; max-width: 470px; text-wrap: pretty; }
.ai-site [data-rv] { --d: 0; }
.ai-note { font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .02em; color: var(--ai-3); }

/* glass that shows its work */
.glass { position: relative; border-radius: 26px; background: var(--ai-glass); box-shadow: 0 0 0 1px var(--ai-line) inset, 0 60px 120px -50px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(250, 77, 40, .22); overflow: hidden; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255, 154, 112, .55), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .02) 60%, rgba(123, 97, 255, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.g-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-bottom: 1px solid var(--ai-line); font-size: 13px; font-weight: 560; color: var(--ai-ink); }
.g-bar .dots { display: flex; gap: 6px; }
.g-bar .dots i { width: 9px; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.g-bar .mut { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ai-3); letter-spacing: .04em; }
.g-bar .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .03em; background: rgba(255, 255, 255, .06); color: var(--ai-2); box-shadow: 0 0 0 1px var(--ai-line) inset; white-space: nowrap; }
.chip.ok { background: rgba(46, 204, 124, .12); color: #7EE2AC; box-shadow: 0 0 0 1px rgba(46, 204, 124, .25) inset; }
.chip.warn { background: rgba(255, 176, 64, .12); color: #FFC06E; box-shadow: 0 0 0 1px rgba(255, 176, 64, .25) inset; }
.chip.bad { background: rgba(250, 77, 40, .14); color: #FF9A70; box-shadow: 0 0 0 1px rgba(250, 77, 40, .35) inset; }
.chip.spec2 { background: linear-gradient(100deg, rgba(250, 77, 40, .22), rgba(123, 97, 255, .22)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; }

.btn-spec { background: #fff; color: #0B0D12; box-shadow: 0 18px 50px -18px rgba(250, 77, 40, .7), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.btn-spec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(140px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 170, 130, .55), transparent 70%); opacity: 0; transition: opacity .5s ease; }
.btn-spec:hover::before { opacity: 1; }
.btn-spec:hover { box-shadow: 0 24px 70px -18px rgba(250, 77, 40, .9), 0 0 0 6px rgba(255, 255, 255, .12); }
.btn-void { background: rgba(255, 255, 255, .05); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; }
.btn-void:hover { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset; }

.think { background: linear-gradient(90deg, rgba(255, 255, 255, .28) 0%, #fff 45%, rgba(255, 255, 255, .28) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: aiShim 1.7s linear infinite; }
@keyframes aiShim { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* streaming words: the parent flips ta/tb, which restarts every word */
[data-js] .stream.ta .tok { animation: tokA .5s both; animation-delay: calc(var(--i, 0) * 42ms + var(--d0, 0ms)); }
[data-js] .stream.tb .tok { animation: tokB .5s both; animation-delay: calc(var(--i, 0) * 42ms + var(--d0, 0ms)); }
[data-js] [data-io]:not([data-in]) .stream .tok, [data-js] [data-io]:not([data-in]) .late { animation-play-state: paused; }
@keyframes tokA { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
@keyframes tokB { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
[data-js] .ta .late { animation: lateA .7s var(--ease) both; animation-delay: var(--d1, 0ms); }
[data-js] .tb .late { animation: lateB .7s var(--ease) both; animation-delay: var(--d1, 0ms); }
@keyframes lateA { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes lateB { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.ai-hero { height: 165vh; }
.ai-hero .pin { display: grid; place-items: center; text-align: center; }
.ai-hero .copy { position: absolute; left: 0; right: 0; top: 46.5%; z-index: 3; padding: 0 24px; --o: clamp(0, calc((var(--p, 0) - .3) / .5), 1); opacity: calc(1 - var(--o)); transform: translate3d(0, calc(var(--o) * -90px), 0) scale(calc(1 - var(--o) * .06)); filter: blur(calc(var(--o) * 12px)); }
.ai-title { font-size: clamp(42px, min(6.2vw, 9.6vh), 106px); line-height: .95; letter-spacing: -.058em; font-weight: 600; margin: 22px auto 0; color: #F7F5FB; }
.ai-title .ln { display: block; white-space: nowrap; }
.ai-hero .sub { max-width: 660px; margin: 24px auto 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--ai-2); }
.ai-hero .ctas { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
[data-js] .ai-in { opacity: 0; animation: aiUp 1.3s var(--ease) both; animation-delay: calc(2.35s + var(--d, 0) * 120ms); }
@keyframes aiUp { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.ai-cue { position: absolute; left: max(28px, calc((100vw - 1260px) / 2)); bottom: 30px; z-index: 4; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ai-3); opacity: calc(1 - var(--p, 0) * 5); }
.ai-cue .ln2 { width: 1px; height: 34px; background: linear-gradient(transparent, #FF9A70); position: relative; overflow: hidden; }
.ai-cue .ln2::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: aiDrip 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes aiDrip { to { top: 110%; } }
.ai-ring { position: absolute; left: 50%; top: 28.5%; width: min(40vh, 360px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(1 + var(--p, 0) * 2.2)); border-radius: 50%; pointer-events: none; opacity: calc(.55 - var(--p, 0) * 1.4); box-shadow: 0 0 0 1px rgba(255, 154, 112, .18) inset, 0 0 80px rgba(250, 77, 40, .12) inset; }

/* ---------- scenes: words on the left, the particle shape on the right ---------- */
.ai-duo .pin { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 100px max(28px, calc((100vw - 1260px) / 2)) 40px; }
.ai-duo .left { position: relative; z-index: 4; max-width: min(500px, 37vw); }
.steps2 { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.steps2 button { height: 38px; padding: 0 16px; border-radius: 99px; font-size: 13px; font-weight: 550; color: var(--ai-3); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--ai-line) inset; transition: color .4s ease, background-color .4s ease, box-shadow .4s ease; }
.steps2 button:hover { color: #fff; }

/* ---------- labels pinned to the particle shapes ----------
   ondues-ai.js projects points of the current shape to the screen every frame and
   writes --ax/--ay (and --bx/--by) on each [data-at], and --au (pixels per unit) on the layer. */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  --live: calc(clamp(0, calc((var(--p, 0) - .012) * 40), 1) * clamp(0, calc((.988 - var(--p, 0)) * 40), 1)); }
.hud .at { position: absolute; left: 0; top: 0; transform: translate3d(var(--ax, -3000px), var(--ay, -3000px), 0); }
.hud button { pointer-events: auto; }

/* ---------- it reads: the light, the boxes, the tabs ---------- */
.ai-reads { height: 300vh; }
.scanl { position: absolute; left: 0; top: 0; height: 2px; margin-top: -1px; width: calc(var(--bx, 0px) - var(--ax, 0px)); transform: translate3d(var(--ax, -3000px), var(--ay, -3000px), 0); opacity: calc(var(--so, 0) * var(--live)); border-radius: 2px; background: linear-gradient(90deg, transparent, #FF9A70 14%, #fff 50%, #D6336A 86%, transparent); box-shadow: 0 0 14px rgba(250, 77, 40, .9), 0 0 46px rgba(214, 51, 106, .55); }
.scanl::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 2px; height: 110px; background: linear-gradient(transparent, rgba(250, 77, 40, .14) 70%, rgba(255, 154, 112, .26)); -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }

.ftag { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px; margin-top: -50px; border-radius: 99px; background: rgba(8, 9, 14, .74); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 16px 40px -20px rgba(0, 0, 0, .9); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--ai-2); white-space: nowrap; opacity: 0; transition: opacity .5s ease; }
.ftag .fi { width: 10px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1.4px #FF9A70 inset; flex-shrink: 0; }
.ftag .fn { color: #fff; }
.ftag.lo { margin-top: 16px; padding: 0 14px 0 12px; }
.ftag .k { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #7EE2AC; }
.ftag .dt { width: 7px; height: 7px; border-radius: 99px; background: #2ECC7C; box-shadow: 0 0 10px #2ECC7C; }
.ai-reads:not([data-step]) .ftag.s0, .ai-reads[data-step="0"] .ftag.s0, .ai-reads[data-step="1"] .ftag.s1 { opacity: var(--live); }
.ai-reads[data-step="1"] .ftag.acct { opacity: calc(var(--live) * clamp(0, calc((var(--p, 0) - .7) * 30), 1)); }

.zone { width: calc(var(--bx, 0px) - var(--ax, 0px)); height: 0; --on: 0; }
.ai-reads:not([data-step]) .zone.s0, .ai-reads[data-step="0"] .zone.s0, .ai-reads[data-step="1"] .zone.s1 { --on: clamp(0, calc((var(--p, 0) - var(--at)) * 55), 1); }
.zone .bx { position: absolute; left: 0; right: 0; top: calc(var(--h, 28) * var(--au, .9) * -.5px); height: calc(var(--h, 28) * var(--au, .9) * 1px); border-radius: 7px; background: color-mix(in srgb, var(--zc) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--zc) 78%, transparent) inset, 0 0 28px -6px color-mix(in srgb, var(--zc) 60%, transparent); opacity: calc(var(--on) * var(--live)); transform: scale(calc(1.07 - var(--on) * .07)); transition: opacity .3s ease, transform .5s var(--ease); }
.zone .bx::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; background: linear-gradient(var(--zc), var(--zc)) left top / 9px 1.5px no-repeat, linear-gradient(var(--zc), var(--zc)) left top / 1.5px 9px no-repeat, linear-gradient(var(--zc), var(--zc)) right top / 9px 1.5px no-repeat, linear-gradient(var(--zc), var(--zc)) right top / 1.5px 9px no-repeat, linear-gradient(var(--zc), var(--zc)) left bottom / 9px 1.5px no-repeat, linear-gradient(var(--zc), var(--zc)) left bottom / 1.5px 9px no-repeat, linear-gradient(var(--zc), var(--zc)) right bottom / 9px 1.5px no-repeat, linear-gradient(var(--zc), var(--zc)) right bottom / 1.5px 9px no-repeat; }
.zone .tab { position: absolute; left: -1px; bottom: calc(100% + 7px); display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 5px 0 9px; border-radius: 7px; background: rgba(6, 7, 12, .93); box-shadow: 0 0 0 1px color-mix(in srgb, var(--zc) 50%, transparent) inset, 0 12px 30px -14px rgba(0, 0, 0, .9); white-space: nowrap; font-size: 12.5px; font-weight: 560; letter-spacing: -.005em; color: #fff; transform: translate3d(0, calc((1 - var(--on)) * 5px), 0); transition: transform .5s var(--ease); }
.zone .tab .k { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zc); }
.zone .tab .st { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 4px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--zc); color: #06080B; }
.zone.x .tab .st { display: none; }
.zone.x .tab { padding-right: 9px; }
.zone.bad .bx { animation: zoneAlarm 1.4s ease-in-out infinite; }
@keyframes zoneAlarm { 50% { box-shadow: 0 0 0 1px var(--zc) inset, 0 0 40px -2px color-mix(in srgb, var(--zc) 80%, transparent); } }

.notes { position: relative; margin-top: 28px; min-height: 160px; }
.note { position: absolute; left: 0; top: 0; width: 100%; max-width: 440px; padding: 16px 18px; border-radius: 18px; background: rgba(10, 11, 18, .62); box-shadow: 0 0 0 1px rgba(250, 77, 40, .32) inset, 0 24px 60px -34px rgba(250, 77, 40, .5); --on: 0; opacity: var(--on); transform: translate3d(0, calc((1 - var(--on)) * 14px), 0); }
.note .who { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #FF9A70; }
.note .who .d { width: 6px; height: 6px; border-radius: 99px; background: #FA4D28; box-shadow: 0 0 8px #FA4D28; }
.note .who.warn { color: #FFC06E; }
.note .who.warn .d { background: #FFB040; box-shadow: 0 0 8px #FFB040; }
.note p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #fff; }
.note .ft { margin-top: 10px; font-family: var(--mono); font-size: 10px; color: var(--ai-3); }
.note.n1 { box-shadow: 0 0 0 1px rgba(255, 176, 64, .34) inset, 0 24px 60px -34px rgba(255, 176, 64, .4); }
.ai-reads:not([data-step]) .note.n0, .ai-reads[data-step="0"] .note.n0 { --on: clamp(0, calc((var(--p, 0) - .28) * 25), 1); }
.ai-reads[data-step="1"] .note.n1 { --on: clamp(0, calc((var(--p, 0) - .69) * 25), 1); }
.ai-reads:not([data-step]) .steps2 button:nth-child(1), .ai-reads[data-step="0"] .steps2 button:nth-child(1), .ai-reads[data-step="1"] .steps2 button:nth-child(2) { color: #fff; background: rgba(250, 77, 40, .16); box-shadow: 0 0 0 1px rgba(250, 77, 40, .45) inset; }
.acts { display: flex; gap: 8px; margin-top: 12px; }
.acts .b1, .acts .b2 { height: 36px; padding: 0 15px; border-radius: 99px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.acts .b1 { background: #fff; color: #0B0D12; }
.acts .b2 { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: 0 0 0 1px var(--ai-line-2) inset; }

/* ---------- it notices: finds pinned to the radar ---------- */
.ai-notices { height: 320vh; }
.tally { display: flex; gap: 6px; margin-top: 30px; }
.tally .tk { width: 28px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background-color .5s ease, box-shadow .5s ease; }
.ai-notices:not([data-step]) .tk.a0, .ai-notices[data-step="0"] .tk.a0,
.ai-notices[data-step="1"] .tk.a0, .ai-notices[data-step="1"] .tk.a1,
.ai-notices[data-step="2"] .tk.a0, .ai-notices[data-step="2"] .tk.a1, .ai-notices[data-step="2"] .tk.a2,
.ai-notices[data-step="3"] .tk { background: #FF9A70; box-shadow: 0 0 10px rgba(250, 77, 40, .8); }

.al { position: absolute; inset: 0; }
.al .pt { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 99px; transform: translate3d(var(--ax, -3000px), var(--ay, -3000px), 0); box-shadow: 0 0 0 1.5px #FF9A70 inset, 0 0 18px rgba(250, 77, 40, .8); opacity: 0; transition: opacity .5s ease; }
.al .pt::after { content: ""; position: absolute; inset: -10px; border-radius: 99px; border: 1.5px solid #FF9A70; opacity: 0; }
.al .stem { position: absolute; left: 0; top: 0; width: 1px; height: 44px; transform: translate3d(var(--ax, -3000px), calc(var(--ay, -3000px) - 52px), 0); background: linear-gradient(rgba(255, 154, 112, 0), #FF9A70); opacity: 0; transition: opacity .5s ease; }
.al.dn .stem { transform: translate3d(var(--ax, -3000px), calc(var(--ay, -3000px) + 8px), 0); background: linear-gradient(#FF9A70, rgba(255, 154, 112, 0)); }
.al .card { position: absolute; left: clamp(20px, calc(var(--ax, -3000px) - 150px), calc(100% - 332px)); top: var(--ay, -3000px); width: 300px; padding: 13px 15px; border-radius: 16px; background: rgba(8, 9, 15, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 60px -30px rgba(0, 0, 0, .9); transform: translate3d(0, calc(-100% - 52px), 0); opacity: 0; transition: opacity .55s var(--ease), background-color .5s ease, box-shadow .5s ease; }
.al.dn .card { transform: translate3d(0, 52px, 0); }
.al .top { display: flex; align-items: center; gap: 10px; }
.al .t { font-size: 14px; font-weight: 620; letter-spacing: -.01em; color: #fff; }
.al .more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s ease; }
.al .b { font-size: 13px; line-height: 1.5; color: var(--ai-2); margin-top: 8px; }
.al .ev { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--ai-3); }
.al .ev b { font-weight: 500; color: #FF9A70; }
/* the find being looked at now */
.ai-notices:not([data-step]) .al.a0, .ai-notices[data-step="0"] .al.a0, .ai-notices[data-step="1"] .al.a1, .ai-notices[data-step="2"] .al.a2, .ai-notices[data-step="3"] .al.a3 { z-index: 2; --now: 1; }
/* finds already raised */
.ai-notices[data-step="1"] .al.a0, .ai-notices[data-step="2"] .al.a0, .ai-notices[data-step="2"] .al.a1, .ai-notices[data-step="3"] .al.a0, .ai-notices[data-step="3"] .al.a1, .ai-notices[data-step="3"] .al.a2 { --was: 1; }
.al .pt { opacity: calc(var(--live) * (var(--now, 0) + var(--was, 0) * .55)); }
.al .stem { opacity: calc(var(--live) * (var(--now, 0) + var(--was, 0) * .35)); }
.al .card { opacity: calc(var(--live) * (var(--now, 0) + var(--was, 0) * .6)); }
.ai-notices:not([data-step]) .al.a0 .more, .ai-notices[data-step="0"] .al.a0 .more, .ai-notices[data-step="1"] .al.a1 .more, .ai-notices[data-step="2"] .al.a2 .more, .ai-notices[data-step="3"] .al.a3 .more { max-height: 150px; opacity: 1; }
.ai-notices:not([data-step]) .al.a0 .card, .ai-notices[data-step="0"] .al.a0 .card, .ai-notices[data-step="1"] .al.a1 .card, .ai-notices[data-step="2"] .al.a2 .card, .ai-notices[data-step="3"] .al.a3 .card { background: linear-gradient(125deg, rgba(38, 14, 10, .88), rgba(14, 10, 26, .88)); box-shadow: 0 0 0 1px rgba(250, 77, 40, .45) inset, 0 26px 70px -30px rgba(250, 77, 40, .55); }
.ai-notices:not([data-step]) .al.a0 .pt::after, .ai-notices[data-step="0"] .al.a0 .pt::after, .ai-notices[data-step="1"] .al.a1 .pt::after, .ai-notices[data-step="2"] .al.a2 .pt::after, .ai-notices[data-step="3"] .al.a3 .pt::after { animation: livePing 1.8s var(--ease) infinite; }

/* ---------- it asks: the draft inside the bubble ---------- */
.ai-asks { height: 270vh; }
.miss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: max-content; max-width: min(640px, 52vw); margin-top: -50px; opacity: var(--live); }
.miss .mh { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-3); margin-right: 2px; }
.miss .mi { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(8, 9, 14, .74); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset; font-size: 12.5px; color: #fff; white-space: nowrap; }
.miss .mi .d { width: 7px; height: 7px; border-radius: 99px; background: #FA4D28; box-shadow: 0 0 8px #FA4D28; }
.miss .mi.r { color: var(--ai-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.miss .mi.r .d { background: #2ECC7C; box-shadow: none; }
.hud .bub { width: calc(530 * var(--au, .8) * 1px); transform: translate3d(calc(var(--ax, -3000px) - 50%), calc(var(--ay, -3000px) - 50%), 0); opacity: var(--live); }
.draft { position: relative; font-size: clamp(14px, calc(18.6px * var(--au, .8)), 17.5px); line-height: 1.56; color: #fff; }
.draft::before { content: ""; position: absolute; inset: -34px -44px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(5, 6, 10, .64), rgba(5, 6, 10, .3) 70%, rgba(5, 6, 10, 0)); }
.draft .lab { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; margin-bottom: 10px; direction: ltr; }
.draft .lab .ai-orb { width: 8px; height: 8px; }
.draft[dir="rtl"] { line-height: 1.78; }
.draft[dir="rtl"] .lab { justify-content: flex-end; }
[data-js][data-ai-live] .hud:not([data-live]) .stream .tok { animation-play-state: paused; }
.hud .ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transform: translate3d(calc(var(--ax, -3000px) - 100%), calc(var(--ay, -3000px) + 22px), 0); opacity: var(--live); }
.ctl .opts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ctl .grp { display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(8, 9, 14, .74); box-shadow: 0 0 0 1px var(--ai-line) inset; }
.ctl .grp button { height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12.5px; font-weight: 550; color: var(--ai-3); transition: color .3s ease, background-color .3s ease; }
.ctl .grp button[aria-pressed="true"] { background: rgba(255, 255, 255, .13); color: #fff; }
.ctl .grp button:hover { color: #fff; }
.ctl .send { display: flex; gap: 8px; }
.ctl .wa { height: 40px; padding: 0 16px; border-radius: 99px; background: #25D366; color: #06200F; font-size: 13.5px; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 16px 40px -18px rgba(37, 211, 102, .7); }
.ctl .ed { height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(8, 9, 14, .6); color: #fff; font-size: 13.5px; font-weight: 550; box-shadow: 0 0 0 1px var(--ai-line-2) inset; display: inline-flex; align-items: center; }
.tline { display: flex; flex-direction: column; gap: 9px; margin-top: 30px; }
.tline .tr { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ai-2); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 260ms); }
.tline .tr .tm { font-family: var(--mono); font-size: 10.5px; color: var(--ai-3); width: 42px; flex-shrink: 0; }
.ai-asks[data-step="1"] .tline .tr { opacity: 1; transform: none; }

/* ---------- ask ondues: a command line over the floor ---------- */
.ai-ask { position: relative; padding: 18vh 0 20vh; }
.ai-ask .head { text-align: center; max-width: 820px; margin: 0 auto; }
.ai-ask .head .ai-lead { margin: 20px auto 0; text-align: center; max-width: 560px; }
.cmd { position: relative; max-width: 860px; margin: 58px auto 0; }
.cmd::before { content: ""; position: absolute; inset: -70px -160px -90px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 6, 10, .88), rgba(5, 6, 10, .6) 55%, rgba(5, 6, 10, 0)); }
.cmd .inp { position: relative; display: flex; align-items: center; gap: 16px; min-height: 78px; padding: 0 6px; font-size: clamp(20px, 1.9vw, 28px); font-weight: 520; letter-spacing: -.028em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cmd .inp::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--spec); box-shadow: 0 0 16px rgba(250, 77, 40, .7); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
[data-js] .cmd[data-in] .inp::after, .cmd:not([data-io]) .inp::after { transform: scaleX(1); }
.cmd .inp .caret { width: 2px; height: 28px; background: #FF9A70; animation: aiBlink 1s steps(1) infinite; flex-shrink: 0; }
@keyframes aiBlink { 50% { opacity: 0; } }
.cmd .inp .kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ai-3); padding: 5px 9px; border-radius: 7px; box-shadow: 0 0 0 1px var(--ai-line-2) inset; }
.cmd .qs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 6px; }
.cmd .qs button { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 520; color: var(--ai-2); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--ai-line) inset; transition: color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.cmd .qs button:hover { color: #fff; box-shadow: 0 0 0 1px var(--ai-line-2) inset; }
.cmd .qs button[aria-pressed="true"] { color: #fff; background: linear-gradient(100deg, rgba(250, 77, 40, .22), rgba(123, 97, 255, .2)); box-shadow: 0 0 0 1px rgba(255, 154, 112, .45) inset; }
.cmd .ans { padding: 22px 6px 0; min-height: 340px; }
.cmd .ans .lab { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; }
.cmd .ans .lab .ai-orb { width: 8px; height: 8px; }
.cmd .ans .txt { margin-top: 12px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; letter-spacing: -.01em; color: #fff; max-width: 760px; }
.cmd .rows { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cmd .rw { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 4px; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cmd .rw .a { font-weight: 560; color: #fff; }
.cmd .rw .b { color: var(--ai-2); }
.cmd .src2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.cmd .src2 .ai-note { margin-right: 4px; }

/* ---------- you decide: the button sits in the orb ---------- */
.ai-decide { height: 230vh; }
.ai-decide .pin { display: block; }
.ai-decide .top { position: absolute; left: 0; right: 0; top: clamp(92px, 12.5vh, 136px); z-index: 4; text-align: center; padding: 0 24px; }
.ai-decide .top .ai-h2 { margin: 18px auto 0; max-width: 820px; }
.ai-decide .top .ai-lead { margin: 16px auto 0; max-width: 470px; text-align: center; }
.hud .orbc { display: grid; justify-items: center; transform: translate3d(calc(var(--ax, 50vw) - 50%), calc(var(--ay, 65vh) - 50%), 0); opacity: var(--live); }
.hud .orbc .reset { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.hud .nvl { transform: translate3d(calc(var(--ax, 22vw) - 100%), calc(var(--ay, 65vh) - 50%), 0); opacity: var(--live); }
.hud .nvr { transform: translate3d(var(--ax, 78vw), calc(var(--ay, 65vh) - 50%), 0); opacity: var(--live); }
.hold { --hold: 0; position: relative; width: 236px; height: 236px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; transition: --hold 1.15s linear, transform .6s var(--ease); background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 60%), rgba(10, 11, 18, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 40px 90px -40px rgba(250, 77, 40, .6); }
.hold[data-holding="1"] { --hold: 1; transform: scale(.97); }
.hold:not([data-holding="1"]) { transition: --hold .45s ease-out, transform .6s var(--ease); }
.hold::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(#FA4D28 0, #FF7A45 calc(var(--hold) * 30%), #D6336A calc(var(--hold) * 62%), #7B61FF calc(var(--hold) * 100%), rgba(255, 255, 255, .08) calc(var(--hold) * 100%)); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.hold::after { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 77, 40, calc(.08 + var(--hold) * .3)), transparent); z-index: -1; }
.hold .h1 { font-size: 21px; font-weight: 640; letter-spacing: -.03em; }
.hold .h2x { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ai-3); margin-top: 6px; }
.hold.done { background: radial-gradient(circle at 50% 40%, rgba(46, 204, 124, .2), rgba(46, 204, 124, .03) 62%), rgba(10, 20, 16, .72); }
.hold.done::before { background: conic-gradient(#2ECC7C, #7EE2AC, #2ECC7C); }
.hold .tick { width: 54px; height: 54px; border-radius: 99px; background: #2ECC7C; display: grid; place-items: center; margin: 0 auto 12px; animation: aiPop .7s cubic-bezier(.2, 1.5, .35, 1) both; }
@keyframes aiPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.reset { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ai-3); text-decoration: underline; text-underline-offset: 4px; }
.reset:hover { color: #fff; }
.nevers { display: flex; flex-direction: column; gap: 11px; }
.nevers .nh { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ai-3); margin-bottom: 6px; }
.nevers.r { align-items: flex-start; }
.nevers:not(.r) { align-items: flex-end; text-align: right; }
.nv { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: clamp(17px, 1.45vw, 22px); font-weight: 560; letter-spacing: -.02em; color: var(--ai-2); white-space: nowrap; }
.nevers:not(.r) .nv { flex-direction: row-reverse; }
.nv i { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; background: rgba(250, 77, 40, .14); flex-shrink: 0; }
.nv span { position: relative; }
.nv span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FA4D28, #D6336A); transform: scaleX(0); transform-origin: 0 50%; }
[data-js] .nevers[data-in] .nv span::after { transform: scaleX(1); transition: transform .8s var(--ease); transition-delay: calc(.4s + var(--i, 0) * 140ms); }

/* ---------- how it stays honest: six rules in large type ---------- */
.ai-honest { position: relative; padding: 18vh 0 16vh; }
.ai-honest .head { max-width: 760px; }
.hlist { margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, .1); }
.hrow { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; align-items: baseline; padding: 30px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hrow .t { display: flex; align-items: baseline; gap: 18px; font-size: clamp(28px, 3.3vw, 54px); line-height: 1.04; letter-spacing: -.048em; font-weight: 600; color: #F6F4FB; }
.hrow .dot { width: 11px; height: 11px; border-radius: 99px; flex-shrink: 0; transform: translateY(-.3em); background: radial-gradient(circle at 35% 30%, #fff 0 14%, #FFB27A 30%, #FA4D28 55%, #D6336A 80%, #7B61FF 100%); box-shadow: 0 0 14px rgba(250, 77, 40, .85); }
.hrow .tt { position: relative; }
[data-js] .hrow .tt { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--r), rgba(0, 0, 0, .13) calc(var(--r) + 9%)); mask-image: linear-gradient(90deg, #000 0, #000 var(--r), rgba(0, 0, 0, .13) calc(var(--r) + 9%)); }
[data-js] .hrow[data-in] .tt { animation: aiRead 1.4s cubic-bezier(.35, .55, .2, 1) forwards; }
.hrow .b { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--ai-2); max-width: 440px; }
[data-js] .hrow .b { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .8s var(--ease) .35s, transform .9s var(--ease) .35s; }
[data-js] .hrow[data-in] .b { opacity: 1; transform: none; }
.hrow:hover .t { color: #fff; }

/* ---------- close ---------- */
.ai-cta { position: relative; min-height: 100vh; display: grid; align-items: start; justify-items: center; text-align: center; padding: 15vh 0 42vh; }
.ai-cta .ai-h2 { font-size: clamp(44px, 6vw, 100px); max-width: 1000px; margin: 22px auto 0; }
.ai-cta .ctas { display: flex; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.ai-site .foot { position: relative; z-index: 3; }

/* ---------- without WebGL the labels fall back to a plain column ---------- */
[data-ai-flat] .ai-duo .hud { left: auto; right: max(28px, calc((100vw - 1260px) / 2)); top: 50%; bottom: auto; width: min(440px, 40vw); transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
[data-ai-flat] .ai-duo .hud .at, [data-ai-flat] .ai-duo .hud .al, [data-ai-flat] .ai-duo .al .card, [data-ai-flat] .ai-duo .al.dn .card { position: relative; inset: auto; transform: none; margin: 0; width: auto; max-width: none; }
[data-ai-flat] .zone { height: auto; }
[data-ai-flat] .zone .bx { position: relative; top: 0; height: auto; padding: 8px; }
[data-ai-flat] .zone .tab { position: relative; bottom: auto; }
[data-ai-flat] .al .pt, [data-ai-flat] .al .stem, [data-ai-flat] .scanl { display: none; }
[data-ai-flat] .ai-reads .zone:not(.s0), [data-ai-flat] .ai-reads .ftag:not(.s0) { display: none; }
[data-ai-flat] .ai-asks .hud .ctl { align-items: flex-start; }

@media (max-width: 1380px) { .miss .mi.r { display: none; } }
@media (max-width: 1180px) { .miss .mh { display: none; } }

/* ---------- wide but small screens: same layout, smaller type ---------- */
@media (max-width: 1100px) and (min-aspect-ratio: 1121/1000) {
  .ai-duo .left { max-width: 40vw; }
  .ai-duo .left .ai-h2 { font-size: clamp(30px, 4.3vw, 54px); }
  .ai-duo .left .ai-lead { font-size: 15px; }
}
@media (max-height: 760px) and (min-aspect-ratio: 1121/1000) {
  .ai-decide .top .ai-lead { display: none; }
  .ai-duo .left .ai-lead { font-size: 15.5px; }
  .notes { min-height: 140px; margin-top: 22px; }
}

/* ---------- tall screens: the words sit on top, the shape in the middle ----------
   the particle engine centres its shapes below this aspect ratio too */
@media (max-aspect-ratio: 1120/1000) {
  .ai-duo .pin { padding: 92px 20px 20px; align-content: start; align-items: start; }
  .ai-duo .left { position: absolute; top: 92px; left: 20px; right: 20px; bottom: 20px; max-width: none; pointer-events: none; }
  .ai-duo .left a, .ai-duo .left button { pointer-events: auto; }
  .ai-duo .left > .ai-eb, .ai-duo .left > .ai-h2 { max-width: 600px; }
  .ai-duo .left .ai-lead { display: none; }
  .ai-duo .left .ai-h2 { font-size: clamp(30px, 7.4vw, 46px); }
  .steps2, .tally { display: none; }
  .notes { position: absolute; left: -4px; right: -4px; bottom: 0; margin: 0; min-height: 0; }
  .note { position: absolute; left: 0; right: 0; bottom: 0; top: auto; max-width: none; padding: 13px 15px; }
  .note p { font-size: 13.5px; }
  .note .ft { display: none; }
  .ai-asks .left .tline { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  .miss { display: none; }
  .hud .ctl { left: 50%; align-items: center; transform: translate3d(-50%, calc(var(--ay, -3000px) + 18px), 0); }
  .ctl .opts { justify-content: center; }
  .al .stem { display: none; }
  .al .card, .al.dn .card { left: 16px; right: 16px; top: auto; bottom: 20px; width: auto; max-width: 560px; margin: 0 auto; transform: none; }
  .ai-notices .al .card { opacity: calc(var(--live) * var(--now, 0)); }
  .ai-decide .top .ai-h2 { font-size: clamp(30px, 7.4vw, 46px); }
  .ai-decide .top .ai-lead { display: none; }
  .hud .nvl, .hud .nvr { top: auto; bottom: 20px; transform: none; width: calc(50% - 26px); }
  .hud .nvl { left: 16px; }
  .hud .nvr { left: auto; right: 16px; }
  .nevers { gap: 7px; }
  .nevers .nh { font-size: 9.5px; margin-bottom: 2px; }
  .nevers:not(.r) { align-items: flex-start; text-align: left; }
  .nevers:not(.r) .nv { flex-direction: row; }
  .nv { font-size: 13.5px; white-space: normal; }
  .hrow { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0 26px; }
}
@media (max-width: 860px) {
  .ai-hud { display: none; }
  .ai-frame { inset: 10px; }
  .ai-title { font-size: clamp(32px, 8.9vw, 60px); }
  .ai-title .ln { white-space: normal; }
  .zone .tab { height: 20px; gap: 6px; padding: 0 4px 0 7px; font-size: 11px; bottom: calc(100% + 5px); }
  .zone .tab .k { font-size: 8.5px; letter-spacing: .1em; }
  .zone .tab .st { height: 14px; font-size: 8px; padding: 0 4px; }
  .ftag { height: 28px; font-size: 10px; margin-top: -40px; }
  .ftag.lo { margin-top: 12px; }
  .al .b { font-size: 12.5px; }
  .draft { font-size: 13.5px; line-height: 1.5; }
  .draft::before { inset: -18px -16px; }
  .hud .bub { width: min(calc(560 * var(--au, .5) * 1px), calc(100vw - 48px)); }
  .ctl .send .ed { display: none; }
  .ctl .ai-note { display: none; }
  .cmd .inp { font-size: 17px; min-height: 60px; }
  .cmd .rw { grid-template-columns: minmax(0, 1fr) auto; }
  .cmd .rw .b { display: none; }
  .cmd::before { inset: -40px -30px -60px; }
  .hold { width: 190px; height: 190px; }
  .ai-sec .fx { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-js] .ai-curtain { display: none; }
  [data-js] .dec .c .f { animation: none; opacity: 1; }
  [data-js] .dec .c .g { display: none; }
  [data-js] .ai-h2, [data-js] .hrow .tt { -webkit-mask-image: none; mask-image: none; }
  [data-js] .ai-h2::after { display: none; }
  [data-js] .stream .tok, .late { animation: none !important; opacity: 1 !important; }
  .ai-sec .fx { filter: none; transform: none; }
  .zone.bad .bx { animation: none; }
}