:root{--bg:#FBFBFA;--surface:#fff;--ink:#1A1A18;--muted:#6B6862;--faint:#9A968F;--line:#E8E6E3;--line2:#D9D6D2;--violet:#5A50E6;--violet-h:#4940D1;--vrgb:90 80 230;
  --claude:#D77757;--codex:#5B8DEE;--ok:#1F8A5B;--err:#C53A3A;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,0,0,1);--out:cubic-bezier(.33,1,.68,1);
  --dog-s:150px;--overlap:.16;--shelf:61svh;--bt:#fff;--bb:#fff;--bi:#1A1A18;--bm:#6B6862;--bl:#E8E6E3;--bf:#F6F5F2}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);overflow-x:clip;max-width:100%;-webkit-font-smoothing:antialiased}
::selection{background:rgb(var(--vrgb)/.14);color:var(--ink)}
button,input{font:inherit;color:inherit}
#bg,#dog,#fx,#dim,#ids{position:fixed;inset:0;pointer-events:none}
#bg{z-index:0;overflow:hidden;opacity:.82}
main,footer{position:relative;z-index:3}
#dog{z-index:30;width:100%;height:100%}
#fx{z-index:32;width:100%;height:100%}
#dim{z-index:29;opacity:0;background:radial-gradient(circle var(--zr,440px) at var(--zx,50%) var(--zy,30%),rgba(72,56,220,.58) 0,rgba(91,81,232,.34) 26%,rgba(91,141,238,.13) 56%,rgba(91,141,238,0) 100%)}
#ids{z-index:60;display:none}
.site .awt-pill,.site .did{display:none}
#tinyimg{position:fixed;z-index:31;pointer-events:none;display:none;transform-origin:50% 100%;height:auto}
.ids-on #ids{display:block}

/* NAV: the top bar. wordmark, the detected platform, signup. */
.nav{position:fixed;z-index:20;top:16px;left:50%;width:min(1080px,calc(100vw - 28px));height:58px;display:flex;align-items:center;gap:12px;padding:0 9px 0 20px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgb(var(--vrgb)/.14);border-radius:999px;transform:translateX(-50%);transform-origin:6% 50%;will-change:transform;
  box-shadow:0 1px 2px rgba(20,18,40,.04);transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
.nav.glow{border-color:rgb(var(--vrgb)/.26);box-shadow:0 10px 34px -12px rgb(var(--vrgb)/.42),0 1px 2px rgba(20,18,40,.05)}
.brand{display:flex;align-items:center;gap:10px;font:600 19px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand svg{width:20px;height:20px;display:block}
.os{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;
  font:500 11px/1 var(--mono);color:var(--muted);cursor:pointer;transition:border-color .16s,color .16s,transform .2s var(--spring)}
.os:hover{border-color:rgb(var(--vrgb)/.35);color:var(--violet)}
.os:active{transform:scale(.95)}
.os{white-space:nowrap;flex:none}
.os i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,138,91,.14)}
.os.guess i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.os em{font-style:normal;color:var(--faint)}
.os .osw{display:inline-block;transition:transform .28s var(--spring),opacity .16s}
.os.flip .osw{transform:translateY(-6px);opacity:0}
.nav .gap{flex:1}
.perch{width:0;height:0;align-self:flex-end;margin:0 34px 9px 0}
.cta{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgb(var(--vrgb)/.3);background:rgb(var(--vrgb)/.09);
  font:500 12.5px/1 var(--mono);color:var(--violet);text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:background .16s,transform .2s var(--spring)}
.cta:hover{background:rgb(var(--vrgb)/.16)}
.cta:active{transform:scale(.96)}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:104px 20px 34px;text-align:center}
.kck{margin:0 0 16px;font:500 12.5px/1.2 var(--mono);letter-spacing:.01em;color:var(--muted);text-transform:lowercase;min-height:15px}
.kck b{font-weight:500;color:var(--violet)}
/* KST-b: the kicker speaks up. Larger, ink, sitting on a short violet underline */
[data-kst=b] .kck{font:600 15px/1.25 var(--mono);letter-spacing:0;color:var(--ink);min-height:19px;padding-bottom:7px;background:linear-gradient(var(--violet),var(--violet)) 2px 100%/46px 3px no-repeat}
[data-kst=b] .kck b{font-weight:600}
/* KST-c: the bold line as a display line on a marker swipe. It is a shrink-to-fit block, so the swipe grows as the line types in */
[data-kst=c] .kck{display:table;margin-left:auto;margin-right:auto;font:600 22px/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink);padding:3px 11px 5px;min-height:calc(1.15em + 8px);
  background:linear-gradient(100deg,rgb(var(--vrgb)/0) 0,rgb(var(--vrgb)/.22) 3%,rgb(var(--vrgb)/.15) 97%,rgb(var(--vrgb)/0) 100%);border-radius:3px 11px 4px 10px;rotate:-1.3deg;transform-origin:0 100%}
[data-kst=c] .kck b{font-weight:600}
[data-kst=c] .kck .car{height:.82em;width:.34em;vertical-align:-.08em}
@media (min-width:721px){[data-kst=c] .kck{font-size:clamp(24px,2.5vw,38px)}}
[data-kst=b] .kck .car{height:15px}
@media (min-width:721px){[data-kst=b] .kck{font-size:18px;min-height:23px;padding-bottom:9px}[data-kst=b] .kck .car{height:18px;width:9px}}
.kck .car{display:inline-block;width:7px;height:13px;margin-left:5px;vertical-align:-2px;background:var(--violet);animation:car .9s steps(1) infinite}
@keyframes car{50%{opacity:0}}
.kck.typed .car{animation:none;opacity:0;transition:opacity .3s}   /* a finished line does not keep asking for attention */
.ttl{margin:0;font:600 clamp(46px,10.4vw,152px)/.88 var(--sans);letter-spacing:-.052em;color:var(--ink);text-wrap:balance}
.ttl em{font-style:normal;color:var(--violet)}
.ttl .w{display:inline-block;white-space:pre}
.ttl .ch{display:inline-block;transform-origin:50% 86%;will-change:transform}
.stage{position:relative;width:min(590px,92vw);margin-top:calc(var(--dog-s) * (2.34 - var(--overlap)))}
.hook{margin:20px 0 0;font:400 12px/1.4 var(--mono);color:var(--ink);min-height:17px}
.hook span{background:rgb(var(--vrgb)/.12);padding:2px 6px;border-radius:3px}
.sub{margin:10px 0 0;max-width:46ch;font:400 13px/1.55 var(--mono);color:var(--faint)}

/* BEN: the signup, a terminal built like a workbench */
.bench{position:relative;display:block;text-align:left;background:var(--bb);border:1.5px solid var(--bi);border-radius:12px;box-shadow:0 14px 0 -8px rgba(26,26,24,.10),0 26px 40px -22px rgba(30,24,70,.30);
  will-change:transform;font:400 12px/1 var(--mono);color:var(--bi)}
.b-top{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1.5px solid var(--bi);background:var(--bt);border-radius:10.5px 10.5px 0 0}
.b-dots,.b-win{display:flex;gap:6px}
.b-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--bi)}
.b-dots i:nth-child(1){background:var(--claude)} .b-dots i:nth-child(2){background:#E9C46A} .b-dots i:nth-child(3){background:var(--codex)}
.b-win{margin-left:auto;gap:10px;display:none}
.b-win i{width:10px;height:10px;position:relative}
.b-win i:nth-child(1):after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--bi)}
.b-win i:nth-child(2){border:1.5px solid var(--bi)}
.b-win i:nth-child(3):before,.b-win i:nth-child(3):after{content:'';position:absolute;left:-1px;right:-1px;top:4px;height:1.5px;background:var(--bi);transform:rotate(45deg)}
.b-win i:nth-child(3):after{transform:rotate(-45deg)}
[data-os=windows] .b-dots{display:none} [data-os=windows] .b-win{display:flex}
[data-os=windows] .b-tab:first-of-type{margin-left:0}
.b-tab{padding:5px 9px;border-radius:6px;color:var(--bm);font-size:11px}
.b-tab:first-of-type{margin-left:8px}
.b-tab.on{color:var(--bi);background:var(--bf)}
.b-body{padding:12px 12px 12px 14px}
.b-log{color:var(--bm);font-size:11.5px;line-height:1.7;max-height:0;overflow:hidden;transition:max-height .28s var(--ease)}
.b-log.on{max-height:64px}
.b-log .ok{color:var(--ok)} .b-log .er{color:var(--err)} .b-log .vi{color:var(--violet)}
.b-line{display:flex;align-items:center;gap:9px;min-height:44px}
.b-cmd{color:var(--bm);white-space:nowrap}
.b-f{position:relative;flex:1;min-width:0;display:flex}
.b-in{flex:1;min-width:0;width:100%;height:44px;padding:0 10px;border:1.5px solid var(--bl);border-radius:8px;background:var(--bf);font:400 14px/1 var(--mono);color:var(--bi);outline:none;transition:border-color .16s,box-shadow .2s,background .16s}
.b-in::placeholder{color:var(--faint)}
.b-in:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgb(var(--vrgb)/.14);background:var(--bb)}
/* FCS-b: Studio focus ring bloom. Tight and invisible at rest; on focus a surface gap and a solid ring bloom outward (460 ms, emphasized), the border warms in 280 ms */
[data-fcs=b] .b-in{box-shadow:0 0 0 0 var(--bb),0 0 0 0 rgb(var(--vrgb)/0);transition:border-color 280ms cubic-bezier(.4,0,.2,1),box-shadow 460ms cubic-bezier(.2,0,0,1),background .16s}
[data-fcs=b] .b-in:focus{box-shadow:0 0 0 2px var(--bb),0 0 0 4px var(--violet)}
[data-fcs=b] .b-in.ok,[data-fcs=b] .b-in.ok:focus{box-shadow:0 0 0 2px var(--bb),0 0 0 4px #4EBA65}
.b-in.ok,.b-in.ok:focus{border-color:#4EBA65;box-shadow:0 0 0 4px rgba(78,186,101,.16);padding-right:38px}
.b-in.bad{border-color:var(--err);animation:shake .42s cubic-bezier(.65,0,.35,1) both}
.b-ok{position:absolute;right:10px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#4EBA65;display:grid;place-items:center;scale:0;transition:scale .2s var(--spring)}
.b-ok svg{width:14px;height:14px}
.b-in.ok+.b-ok{scale:1}
/* every press recoils (Studio recoil press, 320 ms) */
.rc{animation:recoil .32s both}
@keyframes recoil{0%{scale:1}32%{scale:.91 .93}68%{scale:1.035}100%{scale:1}}
.b-go{position:relative;overflow:hidden;height:44px;padding:0 16px;border:1.5px solid var(--bi);border-radius:8px;background:var(--violet);color:#fff;font:600 13.5px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  box-shadow:0 3px 0 0 var(--bi);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .16s}
.b-go:hover{background:var(--violet-h)}
.b-go:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--bi)}
.b-go:after,.cta:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);opacity:0}
.b-go:hover:after,.cta:hover:after{animation:sheen .9s var(--ease)}
@keyframes sheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.b-foot{display:flex;gap:14px;align-items:center;height:30px;padding:0 14px;border-top:1.5px solid var(--bi);background:var(--bt);border-radius:0 0 10.5px 10.5px;color:var(--bm);font-size:10.5px;white-space:nowrap;overflow:hidden}
.b-st{display:inline-flex;align-items:center;gap:6px;color:var(--bi)}
.b-attention{position:absolute;z-index:1;left:13px;top:50%;width:7px;height:14px;margin-top:-7px;border-radius:0;background:var(--violet);pointer-events:none}
.b-f:focus-within .b-attention,.b-in:not(:placeholder-shown)~.b-attention{visibility:hidden}
.b-f .b-in{padding-left:28px}
.bench.down .b-attention{background:var(--err)}
.bench.merged .b-attention{background:var(--ok)}
.bench.hint .b-attention{animation:email-caret 1.1s steps(1,end) infinite}
@keyframes email-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.bench.hint .b-attention{animation:none}}
.b-mo{position:relative;display:inline-block;width:12px;height:12px}
.b-sp{position:absolute;inset:1px;border:1.5px solid var(--violet);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;opacity:0;transition:opacity .2s var(--out)}
.bench.retry .b-sp{opacity:1}
.b-ck{position:absolute;inset:0;width:12px;height:12px;opacity:0;transition:opacity .2s var(--out)}
.b-ck path{stroke:var(--ok);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .28s var(--out)}
.bench.synced .b-ck{opacity:1}
.bench.synced .b-ck path{stroke-dashoffset:0}
@keyframes spin{to{transform:rotate(360deg)}}
.bench.err{animation:shake .44s cubic-bezier(.65,0,.35,1)}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
[data-ben=b]{--bb:#17161D;--bt:#1F1D27;--bi:#0C0C0B;--bm:#8A8698;--bl:#2F2C3A;--bf:#211F2A}
[data-ben=b] .bench{color:#E9E6F2}
[data-ben=b] .b-in{color:#F3F1FA} [data-ben=b] .b-tab.on{color:#F3F1FA} [data-ben=b] .b-st{color:#E9E6F2}
[data-ben=b] .b-in:focus{background:#26232F}

/* LINES: four short statements */
.lines{padding:9vh 0 6vh;max-width:1180px;margin:0 auto}
.ln{position:relative;display:flex;align-items:baseline;gap:22px;padding:26px 28px;border-top:1px solid var(--line);cursor:default}
.ln:last-child{border-bottom:1px solid var(--line)}
.ln .n{font:500 12px/1 var(--mono);color:var(--faint);min-width:26px}
.ln .t{font:500 clamp(26px,5vw,68px)/1.02 var(--sans);letter-spacing:-.04em;color:var(--ink);margin:0}
.ln .t em{font-style:normal;color:var(--violet);white-space:nowrap}
.ln .t .w{display:inline-block;white-space:pre;transform:translateY(.55em);opacity:0;transition:transform .46s var(--out),opacity .3s var(--out)}
.ln.in .t .w{transform:none;opacity:1}
.ln .g{margin-left:auto;align-self:center;flex:none}
.ln:before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--violet);transition:width .9s var(--ease)}
.ln.in:before{width:100%}
.close{padding:8vh 20px 12vh;text-align:center}
.close p{margin:0 0 18px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.close .cta{height:48px;padding:0 22px;font-size:13.5px}
footer{padding:26px 20px 34px;text-align:center;font:400 11px/1.6 var(--mono);color:var(--faint)}
footer b{display:block;font:600 22px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}

/* LAY-b: the long bench. One shelf crosses the page; the title stands on it, the dog leans over it, the terminal is set into it. */
.tb{display:contents}
.slab,.sub{display:none}
[data-lay=b] .slab{display:block;position:absolute;left:50%;top:-1.5px;width:100vw;height:13px;transform:translateX(-50%);z-index:-1;
  background:linear-gradient(#fff,#F1EFEC);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);box-shadow:0 14px 24px -16px rgba(30,24,70,.4)}
@media (min-width:721px){
  [data-lay=b] .hero{display:block;padding:0;text-align:left;height:100svh;min-height:620px}
  [data-lay=b] .tb{display:block;position:absolute;left:5.6vw;bottom:calc(100% - var(--shelf))}
  [data-lay=b] .ttl{font-size:clamp(50px,7.7vw,118px);line-height:.86;text-align:left;margin-bottom:-.15em}
  [data-lay=b] .kck{margin:0 0 14px 4px}
  [data-lay=b] .stage{position:absolute;top:var(--shelf);left:54vw;width:min(540px,41vw);margin:0}
  [data-lay=b] .slab{left:-54vw;transform:none}
  [data-lay=b] .hook{position:absolute;left:5.9vw;top:calc(var(--shelf) + 40px);margin:0}
  [data-lay=b] .sub{display:block;position:absolute;left:5.9vw;top:calc(var(--shelf) + 78px);margin:0;max-width:40ch}
}

/* TTL-c: a wave runs through the letters now and then. TTL-d: the first line is drawn in outline. */
[data-ttl=c] .ttl .ch{animation:wave 5.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wave{0%,14%,100%{translate:0 0}5%{translate:0 -.1em}10%{translate:0 .03em}}
[data-ttl=d] .ttl .ol{color:var(--bg);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill}
/* TTL-e: the headline printed in two passes, the second colour slightly off register (the same print language as the shapes) */
[data-ttl=e] .ttl .ch{text-shadow:.034em .04em 0 rgb(var(--vrgb)/.3)}
[data-ttl=e] .ttl em .ch{text-shadow:.034em .04em 0 rgba(215,119,87,.72)}
/* a faint paper tooth over the whole page: print, not screen */
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;display:none}
[data-grn=b] #grain{display:block}
[data-sub=b] .sub{display:none!important}
[data-hook=b] .hook{display:none!important}
[data-cnv=a] .cv{display:none}

/* the four lines each get an inked vignette, drawn like the dog: flat fill, thick line */
.ln .g{width:150px;height:96px}
.g svg{display:block;width:100%;height:100%;overflow:visible}
.g *{transform-box:fill-box;transform-origin:center}
.g1 .a{translate:-24px 0;transition:translate .46s var(--spring) .15s}
.g1 .b{translate:24px 0;transition:translate .46s var(--spring) .15s}
.g1 .lens{opacity:0;scale:.3;transition:opacity .2s ease .5s,scale .46s var(--spring) .5s}
.g1 .sp{opacity:0;translate:0 6px;transition:opacity .2s ease .62s,translate .46s var(--spring) .62s}
.ln.in .g1 .a,.ln.in .g1 .b{translate:0 0}
.ln.in .g1 .lens{opacity:1;scale:1}
.ln.in .g1 .sp{opacity:1;translate:0 0}
.g2 .trail{stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .25s}
.g2 .pl{offset-path:path('M14 78C50 10 100 10 136 40');offset-distance:0%;offset-rotate:auto;transform-box:view-box;transform-origin:0 0;transition:offset-distance .9s cubic-bezier(.65,0,.35,1) .25s}
.g2 .t{scale:0;transition:scale .46s var(--spring)}
.g2 .t1{transition-delay:.5s}.g2 .t2{transition-delay:.72s}.g2 .t3{transition-delay:1.05s}
.ln.in .g2 .trail{stroke-dashoffset:0}
.ln.in .g2 .pl{offset-distance:100%}
.ln.in .g2 .t{scale:1}
.g3 .e{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .46s cubic-bezier(.33,1,.68,1)}
.g3 .e1{transition-delay:.42s}.g3 .e2{transition-delay:.54s}.g3 .e3{transition-delay:.66s}
.g3 .c{scale:.5;opacity:0;transition:scale .46s var(--spring),opacity .2s ease}
.g3 .c1{transition-delay:.1s}.g3 .c2{transition-delay:.22s}.g3 .c3{transition-delay:.34s}
.g3 .dot{offset-path:path('M26 70L78 24L124 66L26 70');offset-distance:0%;transform-box:view-box;transform-origin:0 0;opacity:0}
.ln.in .g3 .e{stroke-dashoffset:0}
.ln.in .g3 .c{scale:1;opacity:1}
.ln.in .g3 .dot{opacity:1;animation:tour 4.2s cubic-bezier(.65,0,.35,1) 1.1s infinite}
@keyframes tour{to{offset-distance:100%}}
.g4 .tag{translate:-52px 0;transition:translate .46s var(--spring) .2s}
.g4 .ok{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .3s cubic-bezier(.33,1,.68,1) .7s}
.ln.in .g4 .tag{translate:0 0}
.ln.in .g4 .ok{stroke-dashoffset:0}

@keyframes mesh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5%,-4%) scale(1.08)}66%{transform:translate(-4%,5%) scale(.95)}}

/* RAIL-b: tags hang under the long bench and travel slowly */
.rail{display:none}
@media (min-width:721px){
  [data-lay=b][data-rail=b] .rail{display:block;position:absolute;left:-54vw;top:11.5px;width:100vw;height:74px;overflow:hidden;z-index:-1;pointer-events:none}
  [data-lay=b][data-rail=b] .hook{top:calc(var(--shelf) + 96px)}
  [data-lay=b][data-rail=b] .sub{top:calc(var(--shelf) + 134px)}
}
.rail-t{position:absolute;left:0;top:0;height:100%;will-change:transform}
.tag{position:absolute;top:22px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;white-space:nowrap;font:500 12px/1 var(--mono);color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:8px;transform-origin:50% -22px;box-shadow:0 5px 0 -2px rgba(26,26,24,.12)}
.tag:before{content:'';position:absolute;left:50%;top:-23.5px;width:1.5px;height:22px;background:var(--ink)}
.tag i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink)}

/* LNS-b: a directory tree */
.lines .root{display:none}
[data-lns=b] .lines{padding-left:28px}
[data-lns=b] .lines .root{display:flex;align-items:center;gap:8px;padding:0 0 10px 0;font:500 15px/1 var(--mono);color:var(--muted);opacity:0;transition:opacity .2s var(--out)}
[data-lns=b] .lines .root.in{opacity:1}
[data-lns=b] .lines .root b{font-weight:500;color:var(--violet)}
[data-lns=b] .lines .root .car{display:inline-block;width:8px;height:15px;background:var(--violet);animation:car .9s steps(1) infinite}
[data-lns=b] .ln{border:0;padding:15px 28px 15px 0;gap:16px;align-items:center}
[data-lns=b] .ln:last-child{border:0}
[data-lns=b] .ln:before{left:9px;top:0;bottom:0;width:1.5px;height:auto;background:var(--line2);transition:none}
[data-lns=b] .ln:last-child:before{bottom:50%}
[data-lns=b] .ln.in:before{width:1.5px}
[data-lns=b] .ln .n{font-size:0;min-width:58px;align-self:center}
[data-lns=b] .ln .n:before{content:'';display:block;margin-left:9px;width:44px;height:1.5px;background:var(--line2);transform-origin:0 50%;scale:0 1;transition:scale .28s var(--out)}
[data-lns=b] .ln.in .n:before{scale:1 1}
[data-lns=b] .ln .t .w{transform:translateY(12px);transition:transform .28s var(--out),opacity .28s var(--out)}
[data-lns=b] .ln.in .t .w{transform:none}

/* the bench strip holds the two agents; on a signup they merge */
.b-ag{position:relative;display:inline-flex;align-items:center;gap:6px;margin-left:4px;height:22px}
.b-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--bl);border-radius:6px;font-size:10.5px;color:var(--bm);white-space:nowrap;
  transition:transform .46s var(--spring),opacity .46s var(--out),border-color .28s var(--out)}
.b-chip i{width:6px;height:6px;border-radius:50%}
.b-chip.c1 i{background:var(--claude)} .b-chip.c2 i{background:var(--codex)} .b-chip.c3 i{background:var(--ok)}
.b-chip.c3{position:absolute;left:0;top:0;opacity:0;transform:scale(.8);border-color:var(--ok);color:var(--bi);pointer-events:none}
.bench.merged .b-chip.c1{transform:translateX(34px);opacity:0}
.bench.merged .b-chip.c2{transform:translateX(-44px);opacity:0}
.bench.merged .b-chip.c3{opacity:1;transform:none}
@media (max-width:720px){.b-top{gap:5px;padding-left:10px;padding-right:10px}.b-dots{gap:4px}.b-dots i{width:6px;height:6px}.b-tab{font-size:10px;padding:4px 5px}.b-ag{gap:4px;margin-left:0}.b-chip{font-size:9px;gap:4px;padding:4px 5px}.bench.merged .b-chip.c1{transform:translateX(26px)}.bench.merged .b-chip.c2{transform:translateX(-36px)}}

/* NAV-b: the top bar as a ledge across the page; the tiny dog lies on the line itself */
[data-nav=b] .nav{top:0;left:0;width:100%;height:62px;transform:none;border-radius:0;border:0;border-bottom:1.5px solid var(--ink);padding:0 max(18px,5.6vw);background:rgba(251,251,250,.95);transform-origin:12% 100%;box-shadow:none}
[data-nav=b] .nav.glow{box-shadow:0 12px 26px -18px rgb(var(--vrgb)/.5)}
[data-nav=b] .perch{margin-bottom:0}

/* PRG: reading progress along the bottom edge of the top bar */
.prog{position:absolute;left:26px;right:26px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.prog b{position:relative;display:block;height:100%;width:0;background:var(--violet);border-radius:2px;transition:width .46s cubic-bezier(.2,0,0,1)}
.prog b:after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75))}
[data-nav=b] .prog{left:0;right:0;bottom:-2px;border-radius:0}

/* the context canvas behind line 3 */
.cv{position:absolute;left:0;right:170px;top:6px;bottom:6px;z-index:-1;pointer-events:none;opacity:.5;overflow:hidden}
.cv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cv line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 5;opacity:0;transition:opacity .46s var(--out) .28s}
.cv i{position:absolute;left:calc(100% - 42px);top:38%;width:42px;height:26px;border:2px solid var(--ink);border-radius:7px;background:#D6C5E9;scale:.4;opacity:0;transition:left .46s var(--spring),top .46s var(--spring),scale .46s var(--spring),opacity .2s var(--out)}
.cv i.o{background:#F4CFBF}.cv i.b{background:#C4D5F7}
.ln.in .cv i{left:var(--x);top:var(--y);scale:1;opacity:1}
.ln.in .cv line{opacity:1}
@media (max-width:720px){.cv{right:0;opacity:.32}}

/* pigment: the hook's highlight and the violet words soak in like watercolour (Studio watercolor bleed: 736 ms scale, 460 ms opacity) */
.hook span{position:relative;background:none;isolation:isolate}
.hook span:before{content:'';position:absolute;inset:-5px -10px;z-index:-1;border-radius:40% 46% 42% 48%/60% 52% 56% 50%;
  background:radial-gradient(ellipse at 40% 50%,rgb(var(--vrgb)/.2) 0%,rgb(var(--vrgb)/.13) 46%,transparent 74%);filter:blur(3px);animation:bleed .736s var(--out) .9s both}
@keyframes bleed{from{transform:scale(0);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
.ln .t em{position:relative;isolation:isolate}
.ln .t em:before{content:'';position:absolute;inset:.08em -.12em .02em;z-index:-1;border-radius:46% 40% 48% 42%/58% 50% 54% 60%;
  background:radial-gradient(ellipse at 35% 55%,rgb(var(--vrgb)/.15) 0%,rgb(var(--vrgb)/.09) 50%,transparent 76%);filter:blur(4px);
  transform:scale(0);opacity:0;transition:transform .736s var(--out) .35s,opacity .46s var(--out) .35s}
.ln.in .t em:before{transform:scale(1);opacity:1}

/* the variant chooser that opens from an id tag */
.idpop{position:fixed;z-index:62;width:260px;max-height:60vh;overflow:auto;padding:10px;background:#fff;border:1.5px solid var(--ink);border-radius:10px;box-shadow:0 14px 34px -14px rgba(30,24,70,.45);
  font:400 11px/1.3 var(--mono);color:var(--muted);transform-origin:14px 0;transform:scale(.6);opacity:0;pointer-events:none;transition:transform .2s var(--spring),opacity .12s var(--out)}
.idpop.on{transform:none;opacity:1;pointer-events:auto}
.idpop:before{content:'';position:absolute;left:12px;top:-6px;width:9px;height:9px;background:#fff;border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg)}
.idpop b{font-weight:600;color:var(--ink)} .idpop span{display:inline-block;margin-bottom:8px}
.idpop button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;margin-top:4px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;font:400 11px/1.3 var(--mono);color:var(--ink);cursor:pointer}
.idpop button i{font-style:normal;color:var(--violet);white-space:nowrap}
.idpop button:hover{border-color:rgb(var(--vrgb)/.4)}
.idpop button.on{background:rgb(var(--vrgb)/.09);border-color:rgb(var(--vrgb)/.4)}

/* LAY-d: the headline bench */
.ttl .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
#paws{position:fixed;inset:0;z-index:31;pointer-events:none;width:100%;height:100%}
@media (min-width:721px){
  [data-lay=d] .hero{padding:calc(92px + var(--dog-s) * .8) 0 30px}
  [data-lay=d] .tb{display:block;width:100%}
  [data-lay=d] .kck{text-align:left;margin:0 0 4px 3.9vw}
  [data-lay=d] .ttl{font-size:16.5vw;line-height:.8;text-align:left;padding:0 3.4vw;white-space:nowrap;letter-spacing:-.055em}
  [data-lay=d] .ttl>.w,[data-lay=d] .ttl>.ol{font-size:.3em;letter-spacing:-.045em}
  [data-lay=d] .ttl>.ol .w{font-size:1em}
  [data-lay=d] .ttl em{display:block}
  [data-lay=d] .ttl br{display:none}
  [data-lay=d] .stage{margin-top:calc(1.6vw + 14px);width:min(600px,90vw)}
  [data-lay=d] .hook{margin-top:16px}
}

/* ids overlay */
.idtag{position:fixed;transform:translate(0,-100%);font:500 9.5px/1 var(--mono);color:#fff;background:var(--violet);padding:3px 5px;border-radius:4px 4px 4px 0;white-space:nowrap;pointer-events:auto;cursor:copy}
.idbox{position:fixed;border:1px dashed rgb(var(--vrgb)/.55);border-radius:6px}
.did{position:fixed;left:14px;bottom:14px;z-index:61;font:500 10.5px/1 var(--mono);color:var(--muted);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:8px 11px;pointer-events:auto;cursor:copy}
.did b{font-weight:600;color:var(--ink)}
.bubble{position:fixed;z-index:34;font:500 12px/1 var(--mono);color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:9px 9px 9px 2px;padding:6px 8px;pointer-events:none;transform:translate(-50%,-100%) scale(0);transform-origin:20% 100%;transition:transform .28s var(--spring)}
.bubble.on{transform:translate(-50%,-100%) scale(1)}

@media (max-width:720px){
  .nav{top:10px;height:52px;padding:0 6px 0 14px;gap:8px}
  .brand{font-size:17px} .os{padding:6px 7px;margin-left:0;gap:5px;font-size:10px} .nav .cta{padding-left:14px;padding-right:14px;flex:none;white-space:nowrap} .nav .cta-x{display:none}
  .cta{height:38px;padding:0 12px;font-size:11.5px}
  .perch{margin-right:16px;margin-bottom:8px}
  .hero{padding:84px 14px 28px}
  .stage{margin-top:calc(var(--dog-s) * 2.5)}
  .ttl{font-size:clamp(40px,14.6vw,92px)}
  .b-line{flex-wrap:wrap} .b-cmd{display:none} .b-f{flex:1 1 60%} .b-go{flex:1 1 100%}
  .b-foot span:nth-child(3){display:none}
  .ln{padding:20px 16px;gap:12px} .ln .g{width:74px;height:48px}
}

/* LAY-e: the peel. The light page is a sheet lying on the workbench; the dog holds its corner up; the terminal was under it. */
.sheet,#under{display:none}
[data-lay=e] .sheet{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sheet .pp{fill:#fff;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.sheet .sh{fill:rgba(40,32,96,.058)}
.sheet .ct{fill:none;stroke:rgba(30,24,84,.12);stroke-linecap:butt;stroke-linejoin:round}
.sheet .c1{stroke-width:12}
.sheet .c2{stroke-width:5}
.sheet .apsh{fill:none;stroke:rgba(30,24,84,.15);stroke-width:10}
.sheet .apl{fill:none;stroke:var(--ink);stroke-width:1.5}
.sheet .cr{fill:none;stroke:rgba(26,26,24,.24);stroke-width:1.2;stroke-linecap:round}
.sheet .bend{fill:none;stroke:url(#shg);stroke-linejoin:round}
.sheet .b1{stroke-width:62;stroke-opacity:.05}
.sheet .b2{stroke-width:22;stroke-opacity:.065}
.sheet .dge{fill:#DAD6F6;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
[data-lay=e] #bg,[data-lay=f] #bg{z-index:1;opacity:1}
[data-lay=e] #under,[data-lay=f] #under{display:block;position:absolute;left:0;right:0;top:0;height:100svh;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgb(var(--vrgb)/.15) 1.1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(rgba(224,220,246,.74),rgba(224,220,246,.74));
  -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
[data-ppr=b] .sheet .cr,[data-ppr=b] .sheet .bends,[data-ppr=b] .sheet .ct{display:none}
[data-lay=e][data-wbn=b] #under,[data-lay=f][data-wbn=b] #under{background:linear-gradient(rgb(var(--vrgb)/.13) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgb(var(--vrgb)/.13) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(rgba(224,220,246,.74),rgba(224,220,246,.74))}
[data-lay=e][data-wbn=c] #under,[data-lay=f][data-wbn=c] #under{background:rgba(224,220,246,.78)}
[data-lay=e] .tb,[data-lay=e] .stage,[data-lay=e] .hook,[data-lay=e] .kck,[data-lay=e] .ttl{position:relative}   /* printed on the sheet, so above it (on a phone the kicker was under the paper) */
@media (min-width:721px){
  [data-lay=e] .hero{display:block;padding:0;text-align:left;height:100svh;min-height:620px}
  [data-lay=e] .tb{display:block;position:absolute;left:5.6vw;bottom:calc(100% - var(--shelf) - 48px)}
  [data-lay=e] .ttl{font-size:clamp(46px,6.95vw,132px);line-height:.86;text-align:left;margin-bottom:-.15em}
  [data-lay=e] .kck{margin:0 0 14px 4px}
  [data-lay=e] .stage{position:absolute;top:var(--shelf);left:54vw;width:min(540px,41vw);margin:0}
  [data-lay=e] .hook{position:absolute;left:5.9vw;top:calc(var(--shelf) + 126px);margin:0}
}
@media (min-width:721px) and (max-width:1100px){[data-lay=e] .b-cmd,[data-lay=b] .b-cmd{display:none}}
/* no 3D available: a still dog rests on the terminal */
.nodog-img{position:absolute;left:50%;bottom:calc(100% - 9px);width:min(250px,62%);height:auto;transform:translateX(-50%);pointer-events:none}
.nodog #dog,.nodog #paws{display:none}
/* LAY-f: the wave. The page lies across the top with the headline printed on it in one line; the dog is under it, in the
   middle, and pushes its edge up; the terminal stands on the bench below. Everything is placed from the dog's own size. */
.swell{display:none}
[data-lay=f] .swell{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.swell .pp{fill:#fff;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.swell .sh{fill:rgba(40,32,96,.055)}
.swell .ct{fill:none;stroke:rgba(30,24,84,.12);stroke-linecap:butt;stroke-linejoin:round}
.swell .c1{stroke-width:7}
.swell .c2{stroke-width:3}
.swell .bend{fill:none;stroke:url(#swg);stroke-linejoin:round}
.swell .b1{stroke-width:74;stroke-opacity:.05}
.swell .b2{stroke-width:26;stroke-opacity:.065}
.swell .cr{fill:none;stroke:rgba(26,26,24,.22);stroke-width:1.2;stroke-linecap:round}
[data-ppr=b] .swell .cr,[data-ppr=b] .swell .bends,[data-ppr=b] .swell .ct{display:none}
[data-lay=f] .tb,[data-lay=f] .stage,[data-lay=f] .hook,[data-lay=f] .kck,[data-lay=f] .ttl{position:relative}
[data-lay=f] .kck{will-change:transform}
@media (min-width:721px){
  [data-lay=f]{--shelf2:76svh}
  [data-lay=f] .hero{display:block;padding:0;text-align:center;height:100svh;min-height:640px}
  [data-lay=f] .tb{display:block;position:absolute;left:0;right:0;bottom:calc(100% - var(--shelf2) + var(--dog-s) * 2.0 - 20px)}
  [data-lay=f] .ttl{font-size:min(8.9vw,15svh);line-height:.92;white-space:nowrap;text-align:center}
  [data-lay=f] .ttl br{display:none}
  [data-lay=f] .ttl em{margin-left:.23em}
  [data-lay=f] .kck{margin:0 auto 16px}
  [data-lay=f] .stage{position:absolute;top:var(--shelf2);left:46.5%;width:min(540px,41vw);margin:0;translate:-50% 0}
  [data-lay=f] .hook{position:absolute;left:0;right:0;top:calc(var(--shelf2) + 170px);margin:0}
}
@media (max-width:720px){
  [data-lay=f] .stage{margin-top:calc(var(--dog-s) * 2.36)}
}
/* content that scrolls up behind the top bar dissolves into the page colour before it reaches the bar */
#scrim{position:fixed;left:0;right:0;top:0;height:132px;z-index:19;pointer-events:none;opacity:0;transition:opacity .28s var(--ease);
  background:linear-gradient(var(--bg) 0,rgba(251,251,250,.95) 58%,rgba(251,251,250,0) 100%)}
.scrolled #scrim{opacity:1}


/* Founder-selected D44 refinement. Inputs and tuning controls remain editable. */
.hero,.hero *, .nav,.nav *,#bg,#dog,#paws,#fx,#tinyimg{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
input,textarea,[contenteditable=true],.awt-panel,.awt-panel *{-webkit-user-select:text;user-select:text}
[data-kck=z] .kck{display:none!important}
.brand-mark{display:block;width:38px;height:38px;flex:none;position:relative}
.brand{gap:8px}
.logo-transform #dog,.logo-transform #paws{opacity:var(--dog-opacity,1)!important}
#tinyimg{transform-origin:50% 50%;z-index:31;object-fit:contain}
@media(max-width:720px){.brand-mark{width:29px;height:29px}.brand{gap:5px}.nav{gap:8px;padding-left:12px}.brand{font-size:16px}}
#morph-flash{display:none;position:fixed;z-index:34;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fff 0 39%,rgba(237,230,255,.99) 47%,rgba(187,177,255,.48) 59%,rgba(167,139,250,0) 72%)}
.hero input,.hero textarea,.hero [contenteditable=true],input,textarea{-webkit-user-select:text!important;user-select:text!important}

/* R2: the real app tile docks left; the download remains readable on the right. */
.nav{height:64px;z-index:40}
.brand{position:relative;flex:none;gap:0;padding-left:50px;min-height:44px}
.brand-mark{position:absolute;left:0;top:50%;translate:0 -50%;width:42px;height:42px}
.nav .download{height:48px;gap:9px;padding:0 23px;font:600 14px/1 var(--sans);background:var(--violet);color:#fff;border-color:transparent;flex:none}
.nav .download:hover{background:var(--violet-h)}
.download svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav .perch{margin-right:14px}
.b-go{height:54px;padding:0 22px;font-size:15px;min-width:170px}
.b-in{height:54px}
.b-body{padding-top:20px;padding-bottom:20px}
#tinyimg{left:0;top:0;width:256px;height:256px;transform-origin:0 0;will-change:transform;z-index:44}
#morph-flash{left:0;top:0;width:256px;height:256px;transform-origin:0 0;will-change:transform,opacity;z-index:46;background:radial-gradient(ellipse,rgba(255,255,255,.98) 0 32%,rgba(255,227,189,.6) 45%,rgba(112,168,243,.3) 57%,transparent 70%)}
#logo-assemble{position:fixed;left:0;top:0;width:256px;height:256px;z-index:29;pointer-events:none;display:none;transform-origin:0 0;will-change:transform}
#logo-assemble i{position:absolute;inset:0;border-radius:56px;box-shadow:inset 0 2px 8px #ffffff70}
#logo-assemble .orange{background:linear-gradient(140deg,#ffaf55,#f68c24);clip-path:polygon(0 0,84% 0,75% 22%,55% 36%,35% 100%,0 100%);transform:translate(calc(-1 * var(--apart)),calc(-.4 * var(--apart))) rotate(calc(-1 * var(--turn)))}
#logo-assemble .blue{background:linear-gradient(145deg,#91c5f8,#3884d9);clip-path:polygon(84% 0,100% 0,100% 100%,0 100%,20% 77%,46% 49%,55% 36%,75% 22%);transform:translate(var(--apart),calc(.4 * var(--apart))) rotate(var(--turn))}
#download-dialog{max-width:min(440px,calc(100vw - 36px));padding:32px;border:1px solid var(--line);border-radius:24px;color:var(--ink);background:var(--bg);box-shadow:0 24px 100px #14122d26}
#download-dialog::backdrop{background:#17132d44;backdrop-filter:blur(5px)}
#download-dialog h2{font-size:24px;letter-spacing:-.04em;line-height:1.1;margin:18px 0 12px}
#download-dialog p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 24px}
.download-icon{width:58px;height:58px;display:block}
.dialog-close{position:absolute;top:12px;right:12px;border:0;background:transparent;font-size:26px;cursor:pointer;width:36px;height:36px;border-radius:50%}
.dialog-close:hover{background:var(--line)}
@media(max-width:720px){
 .nav{height:60px;gap:6px;padding-left:12px;padding-right:7px}
 .brand{font-size:16px;padding-left:37px}.brand-mark{width:32px;height:32px}
 .nav .os{margin:0;padding:9px 7px;gap:0}.nav .os i,.nav .osw{display:none}.nav .os em{font-size:10px;color:var(--muted)}
 .nav .download{height:44px;font-size:12px;padding:0 14px;gap:6px}.download svg{width:15px;height:15px}
 .nav .perch{position:absolute;right:50%;bottom:9px;margin:0}
 .b-go{height:54px;min-width:0;font-size:16px}
 .b-body{padding-top:18px}
}
@media(max-width:360px){.nav{gap:4px;padding-left:10px}.brand{font-size:14px}.nav .download{font-size:11px;padding:0 8px;gap:4px}.nav .os{padding:9px 4px}.nav .os em{font-size:9px}}

/* R3: a dedicated blank ledge carries paws; all terminal words sit below it. */
.b-paw-ledge{height:48px;border-radius:10.5px 10.5px 0 0;background:linear-gradient(180deg,var(--bb),var(--bf));border-bottom:1px solid var(--bl)}
.b-top{border-radius:0;height:38px}
@media(min-width:721px){[data-lay=f]{--shelf2:min(76svh,calc(100svh - var(--signup-height,220px) - 24px))}[data-lay=f] .stage{width:min(660px,53vw)}[data-lay=f] .hero{min-height:max(640px,100svh)}}
@media(max-width:720px){.b-paw-ledge{height:38px}.b-top{height:36px}}

/* Clear surfaces: motion belongs to the characters, no dotted routes. */
.cv line,.g2 .trail,.g4 path[stroke-dasharray]{display:none}
.download .platform-icons{display:flex;align-items:center;gap:9px;margin-left:5px}
.download .platform-icons:empty{display:none}
/* Each feature reads as one quiet line. Give phone copy the full row rather
   than squeezing it between a desktop tree indent and a large illustration. */
.ln > .t{font-size:clamp(20px,2.8vw,34px);line-height:1.2;white-space:nowrap}
.ln .g{width:88px;height:64px}
@media(max-width:720px){
 [data-lns=b] .lines{padding-left:16px;padding-right:16px}
 [data-lns=b] .ln{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:20px 0}
 [data-lns=b] .ln .n{font-size:10px;min-width:0}
 [data-lns=b] .ln:before,[data-lns=b] .ln .n:before,.ln .g{display:none}
 .ln > .t{font-size:clamp(14px,4.1vw,22px);letter-spacing:-.035em}
}
.download .platform-icons svg{width:17px;height:17px;fill:currentColor;stroke:none}
.footer-settings{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
footer{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
footer .os{min-height:40px;margin:0;gap:8px}
footer .os em{text-transform:uppercase;color:var(--muted)}
.theme-control{display:flex;gap:8px;align-items:center;font:400 11px/1 var(--mono);color:var(--muted)}
.theme-control select{background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:999px;min-height:40px;padding:0 28px 0 12px;font:inherit}
@media(max-width:720px){.footer-settings{margin-left:0;width:100%;gap:12px;justify-content:center}.footer-credit{max-width:34ch}.download .platform-icons{gap:7px}.download .platform-icons svg{width:15px;height:15px}}

/* Small independent SVG rigs sit above the real cap-height, away from signup. */
.agent-parade{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:clip;contain:layout paint;user-select:none}
.parade-agent{position:absolute;left:0;top:0;transform-origin:50% 94.8%;will-change:transform;visibility:hidden}
.parade-agent svg{width:100%;height:100%;display:block;overflow:visible}
/* Prepare the small reveal layers before the first scroll. */
.ln:not(.in) .t .w,.ln:not(.in) .g1 .a,.ln:not(.in) .g1 .b,.ln:not(.in) .g1 .lens,.ln:not(.in) .g1 .sp{will-change:transform,opacity}
.replay-agents{border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:0 12px;min-height:40px;cursor:pointer;font:400 11px/1 var(--mono)}
@media(max-width:720px){[data-lay=f] .hero{padding-top:152px}[data-lay=f] .ttl{line-height:1.04}}
@media(max-width:720px) and (max-height:689px){[data-lay=f] .hero{padding-top:138px}}
/* App UI5 light + dark tokens; gunmetal is the lighter dark palette, not Abyss. */
:root{--bg:#FAFAF7;--surface:#fff;--raised:#F4F4F0;--ink:#1A1A17;--muted:#6B6B64;--violet:#5B4FE6;--vrgb:91 79 230;--on-accent:#fff}
[data-theme=gunmetal]{--bg:#15141A;--surface:#1C1B22;--raised:#25232E;--ink:#EDECF2;--muted:#A5A2B0;--faint:#A5A2B0;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.18);--violet:#A5A0FF;--violet-h:#B8B4FF;--vrgb:165 160 255;--on-accent:#17151F;--bt:#1C1B22;--bb:#1C1B22;--bi:#EDECF2;--bm:#A5A2B0;--bl:rgba(255,255,255,.18);--bf:#25232E;--ok:#8BC7A6;--err:#FFA8A8}
.swell .pp,.sheet .pp{fill:var(--surface)}
#scrim{background:linear-gradient(var(--bg) 0,color-mix(in srgb,var(--bg) 95%,transparent) 58%,transparent 100%)}
[data-theme=gunmetal] .nav{background:rgba(28,27,34,.94);box-shadow:0 1px 2px #0004}
.nav .download,.b-go{color:var(--on-accent)}
[data-theme=gunmetal] #under{background:linear-gradient(180deg,#25232E,#15141A)!important}
[data-theme=gunmetal] .swell .sh{fill:#0004}
[data-theme=gunmetal] .swell .ct{stroke:#ffffff12}
[data-theme=gunmetal] .swell .cr{stroke:#ffffff26}
[data-theme=gunmetal] .b-chip{background:var(--raised);border-color:var(--line2);color:var(--muted)}
[data-theme=gunmetal] .b-tab.on{background:var(--raised)}
[data-theme=gunmetal] .b-f .b-in:focus{background:var(--surface)}
[data-theme=gunmetal] .did,[data-theme=gunmetal] .idpop,[data-theme=gunmetal] .idpop button,[data-theme=gunmetal] .bubble{background:var(--surface);color:var(--ink)}
[data-theme=gunmetal] .lines .root,[data-theme=gunmetal] .ln .n{color:var(--violet)}
[data-theme=gunmetal] #bg{opacity:.30}
[data-theme=gunmetal] .g3 .e,[data-theme=gunmetal] .g2 .pl{stroke:var(--ink)}

/* Fable review: keep each hat and outline legible at small scale. */
.parade-agent path[stroke-width="2.4"],.parade-agent path[stroke-width="2.20"]{stroke-width:2.8}
[data-theme=gunmetal] .parade-agent[data-palette=gray]{filter:drop-shadow(0 0 .7px #fafaf7b0)}
[data-theme=gunmetal] .bench,[data-theme=gunmetal] .b-top,[data-theme=gunmetal] .b-foot{border-color:var(--line2)}
[data-theme=gunmetal] .awt-pill{background:var(--surface);color:var(--muted);border-color:var(--line2)}

/* R10: append after page.css. See ../../R10_THEME_SOL.md for current app provenance.
   Dark app accent stays #A5A0FF; the canvas already paints pastel shape faces. */
html[data-theme="gunmetal"] {
  --r10-nav-glow: #BBB7BF;
  /* A neutral gray with precisely 5% soft pink, separate from opacity. */
  --r10-nav-glow: color-mix(in srgb, #B8B8BE 95%, #F4ADC8 5%);
}

/* Lift the printed shapes, preserving their scanned texture and depth plates.
   Keep the ambient mesh at about its previous effective alpha (.68 × .44). */
html[data-theme="gunmetal"] #bg {
  opacity: .68;
}
html[data-theme="gunmetal"] #bg > i {
  opacity: .44;
}

/* A quiet gray halo and a fine top rim. No glow layer, filter, or new animation. */
html[data-theme="gunmetal"] .nav {
  border-color: rgb(187 183 191 / .20);
  box-shadow:
    inset 0 1px 0 rgb(237 236 242 / .045),
    0 0 24px -8px rgb(187 183 191 / .15),
    0 8px 28px -16px rgb(187 183 191 / .18),
    0 1px 2px rgb(0 0 0 / .25);
  border-color: color-mix(in srgb, var(--r10-nav-glow) 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(237 236 242 / .045),
    0 0 24px -8px color-mix(in srgb, var(--r10-nav-glow) 15%, transparent),
    0 8px 28px -16px color-mix(in srgb, var(--r10-nav-glow) 18%, transparent),
    0 1px 2px rgb(0 0 0 / .25);
}
html[data-theme="gunmetal"] .nav.glow {
  border-color: rgb(187 183 191 / .25);
  box-shadow:
    inset 0 1px 0 rgb(237 236 242 / .055),
    0 0 28px -8px rgb(187 183 191 / .18),
    0 10px 32px -16px rgb(187 183 191 / .21),
    0 1px 2px rgb(0 0 0 / .25);
  border-color: color-mix(in srgb, var(--r10-nav-glow) 25%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(237 236 242 / .055),
    0 0 28px -8px color-mix(in srgb, var(--r10-nav-glow) 18%, transparent),
    0 10px 32px -16px color-mix(in srgb, var(--r10-nav-glow) 21%, transparent),
    0 1px 2px rgb(0 0 0 / .25);
}