:root{
  --bg:#000;--fg:#fff;--mute:#8c8c8c;--line:#262626;--chip:#141414;
  --sans:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(16px,2.4vw,32px);
}
:root[data-theme="light"]{--bg:#fff;--fg:#000;--mute:#6b6b6b;--line:#e4e4e4;--chip:#f3f3f3}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;padding:14px var(--pad);background:var(--bg);transition:background .3s}
.logo{font-size:11px;font-weight:800;line-height:1.05;letter-spacing:.01em}
.theme{background:none;border:0;color:var(--fg);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);padding:6px 0 10px;color:var(--mute);font-size:clamp(15px,1.4vw,19px);font-weight:500}
.ticker-run{display:inline-flex;gap:14px;animation:tick 40s linear infinite;padding-left:var(--pad)}
.ticker-run i{font-style:normal}
@keyframes tick{to{transform:translateX(-25%)}}

/* hero */
.hero{padding-top:clamp(20px,min(4vw,5vh),56px);padding-bottom:clamp(56px,8vw,120px)}
h1{font-size:clamp(40px,min(6.9vw,12.5vh),124px);font-weight:700;line-height:.94;letter-spacing:-.045em;max-width:13.5em}
.intro{max-width:32em;margin-top:clamp(24px,min(4vw,5vh),56px);font-size:clamp(16px,1.25vw,19px)}
.intro p+p{margin-top:1em}
.down{color:var(--mute)}
.sig{line-height:1.3}

/* CFTC callout: bottom right of the hero on desktop, below the intro on phones (scaled down ~40%) */
.hero-foot{display:grid;gap:0 clamp(32px,5vw,96px);align-items:end}
@media (min-width:1000px){.hero-foot{position:relative;grid-template-columns:minmax(0,32em) minmax(0,21em);justify-content:space-between}.hero-foot .filed{margin-top:0}}
@media (min-width:1200px){.hero-foot .ao-slot{position:absolute;left:0;right:0;bottom:0;width:max-content;margin:0 auto}}
.filed{max-width:21em;margin-top:clamp(28px,3.5vw,48px);border:1px solid var(--line);border-left:2px solid var(--mute);padding:11px 13px 12px;transition:border-color .2s}
.filed:hover{border-color:var(--mute);border-left-color:var(--fg)}
.filed-k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:6px}
.dot-live{width:5px;height:5px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 5px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.filed-t{font-size:clamp(14px,1.15vw,17px);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-top:6px}
.filed-s{color:var(--mute);margin-top:5px;font-size:12.5px;line-height:1.4}
.filed-l{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12.5px;font-weight:600}
.filed-l a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.filed-l a:hover{text-decoration-thickness:2px}

/* sections */
section{margin-bottom:clamp(64px,8vw,128px)}
.sec{font-size:clamp(30px,3.6vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);margin-bottom:clamp(24px,3vw,44px)}
h3{font-size:clamp(16px,1.25vw,19px);font-weight:700;letter-spacing:-.01em;margin:14px 0 4px}
.dots{color:var(--mute);letter-spacing:.3em;margin:-24px 0 clamp(56px,6vw,96px)}

/* work grid */
.grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px)}
@media (min-width:860px){.grid{grid-template-columns:1fr 1fr}}
.work p{color:var(--mute);max-width:36em;font-size:clamp(15px,1.1vw,17px)}
.work:hover p{color:var(--fg)}
.frame{overflow:hidden;background:var(--chip);aspect-ratio:16/9}
.shot{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.shot.pin-top{object-position:top}
.work:hover .shot{transform:scale(1.035)}
.work:hover h3{text-decoration:underline;text-underline-offset:3px}

/* what I bring */
.cols3{display:grid;gap:clamp(28px,3vw,48px)}
@media (min-width:860px){.cols3{grid-template-columns:repeat(3,1fr)}}
.cols3 h3{margin-top:0}
.cols3 p{color:var(--mute);font-size:clamp(15px,1.1vw,17px)}

/* brands */
.brands{list-style:none;columns:2;column-gap:var(--pad);font-size:clamp(17px,1.6vw,24px);font-weight:500;line-height:1.35}
@media (min-width:860px){.brands{columns:3}}
@media (min-width:1300px){.brands{columns:4}}

/* numbers */
.nums{display:grid;gap:clamp(28px,3vw,40px)}
@media (min-width:640px){.nums{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.nums:not(.two){grid-template-columns:repeat(4,1fr)}}
.nums b{display:block;font-size:clamp(48px,6vw,96px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.nums p{color:var(--mute);margin-top:10px;max-width:22em}

/* contact */
.cta p{max-width:30em;font-size:clamp(16px,1.25vw,19px)}
.cta p+p{margin-top:14px}
.cta .big{font-size:clamp(24px,3.4vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-top:28px}
.cta a,.foot a,.back a,.case-cols a,.inline-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cta a:hover,.foot a:hover{text-decoration-thickness:2px}

/* footer */
.foot{border-top:1px solid var(--line);padding:24px var(--pad) 40px;color:var(--mute);font-size:12.5px;line-height:1.6}

/* case page */
.case h1{font-size:clamp(42px,6.4vw,112px);max-width:12em}
.back{margin:8px 0 clamp(24px,3vw,40px);color:var(--mute);font-size:14px}
.role{color:var(--mute);margin-top:18px;font-size:clamp(15px,1.1vw,17px)}
.lede{max-width:32em;margin-top:14px;font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.015em;line-height:1.3}
.hero-img{margin:clamp(32px,4vw,56px) 0 clamp(48px,6vw,88px);aspect-ratio:auto}
.hero-img .shot{height:auto}
.case-cols h2{font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.case-cols p{color:var(--mute);font-size:clamp(15px,1.05vw,16.5px)}
.case-cols p+p{margin-top:12px}
.case-cols .nums b{font-size:clamp(40px,4vw,64px);color:var(--fg)}
.case-cols .nums{grid-template-columns:1fr}
.gallery{display:grid;gap:clamp(24px,3vw,40px)}
.gallery img{background:var(--chip);width:100%}
.gallery figcaption{color:var(--mute);font-size:13px;padding-top:10px;max-width:60em}
.nextcase{border-top:1px solid var(--line);padding-top:28px}
.label{color:var(--mute);font-size:13px;margin-bottom:8px}
.nextcase a{font-size:clamp(30px,4.4vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1}
.nextcase a:hover span{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}.reveal{opacity:1;transform:none;transition:none}.ticker-run{animation:none}.shot{transition:none}}

.ne{display:inline-block;width:.78em;height:.78em;margin-left:.22em;vertical-align:-.02em}

/* logo row under the hero */
.logos{margin-top:calc(-1 * clamp(24px,4vw,64px))}
.logos-k{color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.logos-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px clamp(22px,3vw,48px);font-size:clamp(18px,1.9vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--mute)}
.logos-row li{transition:color .2s}
.logos-row li:hover{color:var(--fg)}
video.shot{display:block;background:var(--chip)}

/* Halo tile: the app splash, 25% slower than in the app (1.05s -> 1.4s draw). .play is toggled by v2.js */
.hs{position:relative;width:100%;height:100%;background:#000;color:#F2F2F2;display:flex;align-items:center;justify-content:center;container-type:inline-size;overflow:hidden}
.hs-c{display:flex;flex-direction:column;align-items:center;gap:1cqw;transform:translateY(-3%)}
.hs-ring{width:30cqw;height:auto;overflow:visible}
.hs-word{font-weight:600;font-size:5.2cqw;letter-spacing:.32em;padding-left:.32em;margin-top:1.6cqw;line-height:1}
.hs-tag{font-size:1.75cqw;color:#8c8c8c;letter-spacing:.04em}
.hs-foot{position:absolute;left:0;right:0;bottom:4.2cqw;display:flex;justify-content:center;gap:3cqw;font-family:ui-monospace,Menlo,monospace;font-size:1.4cqw;color:#595959}
.hs .hs-arc{stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(61,139,255,.7))}
.hs .hs-orb{transform-origin:100px 100px;transform:rotate(360deg)}
.hs .hs-ticks{opacity:.09}
.hs.play .hs-arc{stroke-dashoffset:1;animation:hsDraw 1.4s cubic-bezier(.65,0,.35,1) .13s forwards}
.hs.play .hs-orb{opacity:0;animation:hsOrb 1.4s cubic-bezier(.65,0,.35,1) .13s forwards}
.hs.play .hs-ticks{opacity:0;animation:hsTicks 2.13s ease .33s forwards}
.hs.play .hs-glow{opacity:0;animation:hsGlow 1.87s ease .67s forwards}
.hs.play .hs-word{opacity:0;letter-spacing:.7em;padding-left:.7em;animation:hsWord 1.2s cubic-bezier(.2,.7,.2,1) .73s forwards}
.hs.play .hs-tag{opacity:0;animation:hsFade .8s ease 1.27s forwards}
.hs.play .hs-foot{opacity:0;animation:hsFade .8s ease 1.4s forwards}
.hs .hs-glow{transform-origin:100px 100px}
@keyframes hsDraw{to{stroke-dashoffset:0}}
@keyframes hsOrb{0%{opacity:0;transform:rotate(0)}12%{opacity:1}100%{opacity:1;transform:rotate(360deg)}}
@keyframes hsTicks{0%{opacity:0}50%{opacity:.16}100%{opacity:.09}}
@keyframes hsGlow{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.04)}100%{opacity:.85;transform:scale(1)}}
@keyframes hsWord{to{opacity:1;letter-spacing:.32em;padding-left:.32em}}
@keyframes hsFade{to{opacity:1}}
.hs.fade .hs-c,.hs.fade .hs-foot{opacity:0;transition:opacity .5s ease}
@media (prefers-reduced-motion:reduce){.hs.play *{animation:none!important}}

/* Halo tile, beat 2: the hook */
.hs.hook .hs-c,.hs.hook .hs-foot{opacity:0}
.hs.hook .hk{opacity:1}
.hs.hook.fade .hk{opacity:0}

/* case intro video (Halo) */
.intro-vid{margin:clamp(32px,4vw,56px) 0 clamp(48px,6vw,88px)}
.intro-vid figcaption{color:var(--mute);font-size:13px;padding-top:10px;max-width:60em}

/* Halo case intro: three Ask Halo sessions, trading-terminal style */
.ask3{margin:clamp(32px,4vw,56px) 0 clamp(24px,3vw,40px)}
.ask3-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2A2E39;border:1px solid #2A2E39;border-radius:6px;overflow:hidden}
.ask3-cap{color:var(--mute);font-size:13px;padding-top:10px;max-width:60em}
.ah{--line:#2A2E39;background:#131722;padding:0;height:clamp(460px,37vw,520px);display:flex;flex-direction:column;gap:0;color:#D1D4DC;font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;font-size:13px;line-height:1.5;overflow:hidden}
.ah > *{margin-left:14px;margin-right:14px}
.ah header{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#D1D4DC;padding:9px 14px;background:#1E222D;border-bottom:1px solid var(--line)}
.ah-dot{width:7px;height:7px;border-radius:50%;background:#2962FF}
.ah-deal{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:400;color:#787B86}
.ah-kind{margin-top:12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#787B86;font-weight:600}
.ah-c .ah-kind{color:#2962FF}
.ah-q{margin-top:8px;align-self:stretch;background:#1E222D;border:1px solid var(--line);border-left:2px solid #2962FF;border-radius:3px;padding:8px 10px;color:#D1D4DC;min-height:2.9em}
.ah-tools{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.ah-tools code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#787B86;background:none;border:0;padding:0}
.ah-tools code::before{content:"✓ ";color:#22AB94}
.ah-a{margin-top:10px;display:flex;flex-direction:column;gap:9px;color:#D1D4DC;font-variant-numeric:tabular-nums}
.ah-a p{margin:0}
.ah-next{margin:auto 0 0;font-size:12px;color:#B2B5BE;border-top:1px solid var(--line);padding:9px 14px;background:#1E222D}
.ah-ltv{margin:2px 0}
.ah-ltv-t{position:relative;height:6px;background:#1E222D;border-radius:1px}
.ah-ltv-t i{position:absolute;left:0;top:0;bottom:0;width:82.7%;border-radius:1px;background:linear-gradient(90deg,#2962FF 0%,#2962FF 88%,#F23645 91%);transform-origin:left}
.ah-ltv-t u{position:absolute;left:75%;top:-5px;bottom:-5px;width:0;border-left:1.5px dashed #F23645}
.ah-ltv-l{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#787B86;margin-top:6px}
.ah-ltv-l .cov{color:#F23645}.ah-ltv-l .hit{color:#fff;background:#F23645;padding:0 5px;border-radius:2px;font-weight:600}
.ah-bars{display:flex;flex-direction:column;gap:8px}
.ah-bar{display:grid;grid-template-columns:8.6em 1fr 2.6em;grid-template-rows:auto auto;align-items:center;column-gap:8px;font-size:12px}
.ah-bar i{height:6px;border-radius:1px;background:#1E222D;position:relative;overflow:hidden}
.ah-bar i::after{content:"";position:absolute;inset:0;width:calc(var(--v)*100%);min-width:3px;background:#2962FF;border-radius:1px;transform-origin:left}
.ah-bar b{font-weight:600;text-align:right;font-size:12.5px}
.ah-bar em{grid-column:2/4;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#787B86}
.ah-bar em.ok{color:#22AB94}.ah-bar em.warn{color:#FF9800}.ah-bar em.bad{color:#F23645}
.ah-news{border:1px solid var(--line);border-left:2px solid #F23645;border-radius:3px;padding:8px 10px;background:#1E222D;display:flex;flex-direction:column;gap:3px}
.ah-news-k{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#F23645}
.ah-src{font-size:10.5px;color:#787B86}
/* animation states (v2.js adds .run; [data-s]/[data-stream] hidden until shown) */
.ask3.js .ah [data-s]{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.ask3.js .ah [data-s].on{opacity:1;transform:none}
.ask3.js .ah [data-stream]{min-height:1px}
.ask3.js .ah-ltv-t i,.ask3.js .ah-bar i::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ask3.js .ah-ltv.on .ah-ltv-t i,.ask3.js .ah-bars.on .ah-bar i::after{transform:scaleX(1)}
.ah-caret::after{content:"";display:inline-block;width:2px;height:1em;background:#2962FF;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:900px){.ask3-row{grid-template-columns:repeat(3,86%);overflow-x:auto;scroll-snap-type:x mandatory}.ah{height:auto;min-height:470px;scroll-snap-align:center}}

.intro .focus{color:var(--fg);font-weight:600;letter-spacing:-.01em}
.tags{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.02em;color:#7FB2FF;margin:2px 0 6px}
.case .tags{font-size:13px;margin-top:14px}

/* Halo tile, beat 2: terminal-style chart */
.hk{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .5s ease;font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif}
.hk .sym{fill:#787B86;font-size:22px;letter-spacing:.02em}
.hk .hd{fill:#D1D4DC;font-size:46px;font-weight:600;letter-spacing:-.01em}
.hk .hd2{fill:#2962FF}
.hk .lg{fill:#B2B5BE;font-size:20px}
.hk .g{stroke:#1E222D;stroke-width:1.5}
.hk .ax{fill:#787B86;font-size:19px;font-variant-numeric:tabular-nums}
.hk .ng{stroke:#434651;stroke-width:1.5;stroke-dasharray:6 6}
.hk .nl{fill:#787B86;font-size:17px}
.hk .ln{fill:none;stroke-width:3.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hk .tg text{fill:#fff;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.hk .ft{fill:#4A4E5A;font-size:16px;font-family:ui-monospace,Menlo,monospace}
.hs.hook .hk .ln{stroke-dashoffset:1;animation:hsDraw 1.5s cubic-bezier(.45,0,.25,1) forwards;animation-delay:calc(.35s + var(--i) * .25s)}
.hs.hook .hk .tg{opacity:0;animation:hsFade .4s ease forwards;animation-delay:calc(1.75s + var(--i) * .25s)}

/* Ask Ola: the yellow dot (flat, Braun-like warm yellow) */
:root{--braun:#EBB02E}
.ao-dot{width:48px;height:48px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--braun);animation:aoBreathe 3.6s ease-in-out infinite;transition:transform .2s ease}
.ao-dot:hover{transform:scale(1.06)}
.ao-dot:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@keyframes aoBreathe{0%,100%{box-shadow:0 0 0 0 rgba(235,176,46,.28)}50%{box-shadow:0 0 0 10px rgba(235,176,46,0)}}
.ao-slot{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:end;margin-top:28px}
.ao-cap{font-size:13px;font-weight:500;color:var(--mute);transition:color .2s}
.ao-slot:hover .ao-cap{color:var(--fg)}
.ao-dock{position:fixed;right:24px;bottom:24px;z-index:75;width:48px;height:48px}
.ao-dock.off{visibility:hidden;pointer-events:none}
.ao-tip{position:absolute;right:60px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;padding:6px 10px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}
.ao-dock:hover .ao-tip{opacity:1}
/* panel grows out of the dot that opened it: ask-ola.js sets left/bottom/height and transform-origin */
.ao{margin:0;position:fixed;right:24px;bottom:84px;z-index:70;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 110px));display:flex;flex-direction:column;background:#0c0c0c;color:#f2f2f2;border:1px solid #2a2a2a;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform:scale(.12);transform-origin:bottom right;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);font-size:14px;line-height:1.5}
.ao.on{opacity:1;transform:none}
.ao header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #222}
.ao header b{display:block;font-size:15px}
.ao header small{display:block;color:#8c8c8c;font-size:12px}
.ao-mini{width:18px;height:18px;animation:none;flex:none;cursor:default}
.ao-x{margin-left:auto;background:none;border:0;color:#8c8c8c;font-size:16px;cursor:pointer;padding:4px 6px}
.ao-x:hover{color:#fff}
.ao-log{position:relative;scroll-behavior:smooth;flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.ao-b{max-width:100%;color:#e6e6e6}
.ao-b p+p,.ao-b p+ul,.ao-b ul+p,.ao-b p+ol,.ao-b ol+p{margin-top:8px}
.ao-b ul,.ao-b ol{padding-left:20px;margin-top:6px}
.ao-b li+li{margin-top:4px}
.ao-b a{text-decoration:underline;text-underline-offset:3px}
.ao-src{color:#8c8c8c;font-size:12.5px}
.ao-u{align-self:flex-end;max-width:85%;background:#1c1c1c;border:1px solid #2a2a2a;border-radius:12px 12px 4px 12px;padding:8px 12px}
.ao-st{display:flex;flex-direction:column;gap:6px}
.ao-st button{text-align:left;background:none;border:1px solid #2a2a2a;color:#f2f2f2;border-radius:8px;padding:10px 12px;font:inherit;cursor:pointer;display:flex;justify-content:space-between;gap:10px;transition:border-color .15s,background .15s}
.ao-st button:hover{border-color:var(--braun);background:#15120a}
.ao-st button span{color:var(--braun)}
.ao-hand{margin-top:8px;background:none;border:0;padding:0;color:var(--braun);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ao-mail{display:flex;gap:6px;margin-top:8px}
.ao-mail input{flex:1;min-width:0;background:#141414;border:1px solid #2a2a2a;border-radius:8px;color:#fff;padding:9px 10px;font:inherit;font-size:16px}
.ao-mail button,.ao-form button{background:var(--braun);color:#000;border:0;border-radius:8px;padding:0 14px;font:inherit;font-weight:700;cursor:pointer}
.ao-ok{color:#3ddc84;margin-top:8px}
.ao-think{color:#8c8c8c}
.ao-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid #222}
.ao-in{flex:1;min-width:0;background:#141414;border:1px solid #2a2a2a;border-radius:8px;color:#fff;padding:10px 12px;font:inherit;font-size:16px}
.ao-in:focus{outline:none;border-color:var(--braun)}
.ao-foot{padding:0 14px 12px;color:#6b6b6b;font-size:11.5px}
.ao-gpu{margin-top:10px;border:1px solid #2a2a2a;border-radius:8px;padding:12px;background:#111}
.ao-gpu label{display:flex;justify-content:space-between;font-size:13px;color:#bdbdbd}
.ao-gpu input{width:100%;margin:8px 0 12px;accent-color:var(--braun)}
.ao-bar{position:relative;height:8px;background:#1e1e1e;border-radius:4px}
.ao-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#3d8bff;transition:width .2s ease,background .2s}
.ao-bar i.br{background:#ff4d4f}
.ao-bar u{position:absolute;left:75%;top:-5px;bottom:-5px;border-left:2px dashed var(--braun)}
.ao-row{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.ao-s{color:#3ddc84;font-weight:600}.ao-s.br{color:#ff6b6b}
.ao-note{margin-top:8px;font-size:12.5px;color:#9a9a9a}
@media (max-width:600px){.ao{right:8px!important;left:8px!important;bottom:8px!important;width:auto;height:min(80vh,620px)!important}.ao-dock{right:16px;bottom:16px}.ao-slot{margin-top:28px;align-items:center;flex-direction:row;gap:14px}}
@media (prefers-reduced-motion:reduce){.ao-dot{animation:none}.ao{transition:none}}

.ao-in-anim{animation:aoIn .28s ease both}
@keyframes aoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ao-log{scroll-behavior:auto}.ao-in-anim{animation:none}}
/* hero fills the first screen; intro, dot and CFTC box sit along its bottom edge */
@media (min-width:1000px){.hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--chrome,100px));padding-bottom:clamp(20px,4vh,44px)}.hero-foot{margin-top:auto;padding-top:clamp(20px,3vh,40px)}.hero-foot .ao-slot{bottom:0}}

/* the dot reads as clickable: a small spark that turns on hover, a lift and a soft shadow */
.ao-dot{display:grid;place-items:center}
.ao-hero{position:relative}
.ao-spark{width:42%;height:42%;fill:#3a2a05;opacity:.72;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.ao-dot:hover .ao-spark,.ao-slot:hover .ao-spark{transform:rotate(90deg) scale(1.12);opacity:.9}
.ao-dot:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 22px rgba(235,176,46,.28)}
.ao-dot:active{transform:scale(.96)}
.ao-mini .ao-spark{width:56%;height:56%}
.ao-open .ao-dot[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(235,176,46,.25)}
.ao-open .ao-dot[aria-expanded="true"] .ao-spark{transform:rotate(45deg)}
.ao{transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.34,1.2,.64,1),bottom .45s cubic-bezier(.34,1.2,.64,1),height .3s ease}
.dots{display:none}
.ao-slot.gone .ao-dot{visibility:hidden}
.ao-slot.gone .ao-cap{opacity:0}
.ao-cap{transition:color .2s,opacity .3s}