@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --paper:#F5F5F7;--ink:#1D1D1F;--blue:#0071E3;--mute:#6E6E73;--soft:#86868B;
  --pill:#FFFFFF;--pill-ink:#1D1D1F;--stem:rgba(29,29,31,.28);--pop:#FFFFFF;--field:#F5F5F7;
  --e:cubic-bezier(0.16,1,0.3,1);--e2:cubic-bezier(0.33,1,0.68,1);--b:cubic-bezier(0.22,1,0.36,1);
  --m:48px;--hs:72px;--hl:1;
  color-scheme:light;
}
html.dark{
  --paper:#171719;--ink:#E5E5EA;--blue:#0A84FF;--mute:#98989D;--soft:#8E8E93;
  --pill:#303034;--pill-ink:#E5E5EA;--stem:rgba(229,229,234,.34);--pop:#232326;--field:#171719;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100svh;overflow:hidden;background:var(--paper);color:var(--ink);font-family:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{transition:background-color .6s var(--e2)}
body{transition:background-color .6s var(--e2),color .6s var(--e2)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.skip{position:fixed;left:16px;top:-48px;z-index:20;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px;font-size:14px;text-decoration:none}
.skip:focus{top:16px}

.ap{opacity:0;transform:translateY(6px);filter:blur(2px);transition:transform .8s var(--e),opacity .6s var(--e2),filter .6s var(--e2);transition-delay:calc(var(--i) * 60ms + 80ms)}
body.in .ap{opacity:1;transform:none;filter:none}
body.still .ap,body.still .w{transition:none!important}

.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px var(--m)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:20px;letter-spacing:-.03em;line-height:28px}
.mark svg{width:24px;height:24px}
.mark .ink{fill:#1D1D1F}.mark .lead{fill:var(--blue)}
html.dark .mark .ink{fill:#F5F5F7}
.tools{display:flex;align-items:center;gap:16px}
.theme{position:relative;width:32px;height:32px;display:grid;place-items:center;border-radius:9999px;transition:background-color .3s var(--b)}
.theme::after{content:"";position:absolute;inset:-6px;border-radius:9999px}
.theme:hover{background:rgba(127,127,135,.12)}
.theme:active{transform:scale(.96)}
.theme svg{width:20px;height:20px}
.theme circle{fill:none;stroke:var(--ink);stroke-width:1.5}
.theme path{fill:var(--ink)}

.hero{pointer-events:none;position:absolute;z-index:4;left:var(--m);top:clamp(104px,16.5vh,176px);width:calc(100vw - 2 * var(--m))}
h1{margin:0;width:fit-content;max-width:100%;font-weight:600;font-size:var(--hs);line-height:var(--hl);letter-spacing:-.04em;color:var(--ink)}
h1 .ln{display:block;white-space:nowrap}
h1 .w{display:inline-block;opacity:0;transform:translateY(6px);filter:blur(2px);transition:transform .8s var(--e),opacity .6s var(--e2),filter .6s var(--e2),color .6s var(--e2)}
h1 .w.on{opacity:1;transform:none;filter:none}
h1 .ln+.ln{color:var(--ink)}
h1.wrap .ln{white-space:normal;text-wrap:balance}
.sub{margin:24px 0 0;max-width:560px;font-size:18px;line-height:28px;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cta{position:relative;margin-top:32px;display:flex}
html:not(.ph) .cta{width:max-content}
.sub .short{display:none}
.sub .nw{white-space:nowrap}
html.ph .sub .long{display:none}
html.ph .sub .short{display:inline}
.btn{background:var(--ink);color:var(--paper);border-radius:9999px;padding:12px 24px;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;transition:transform .3s var(--b),opacity .3s var(--b)}
.btn:hover{opacity:.86}
.btn:active{transform:scale(.98)}
.pop{position:absolute;top:-16px;left:calc(100% + 16px);width:340px;max-width:calc(100vw - 2 * var(--m));background:var(--pop);border-radius:24px;padding:16px;box-shadow:0 24px 64px rgba(0,0,0,.14);opacity:0;transform:translateY(-6px) scale(.985);filter:blur(2px);pointer-events:none;transition:transform .5s var(--b),opacity .3s var(--b),filter .3s var(--b);z-index:10;transform-origin:0 40px}
html.dark .pop{box-shadow:0 24px 64px rgba(0,0,0,.5)}
.pop.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.pop p{margin:0 0 12px;font-size:14px;line-height:20px;color:var(--ink)}
.mail{display:flex;gap:8px}
.mail input{flex:1;min-width:0;font:inherit;font-size:16px;line-height:24px;border:0;border-radius:8px;padding:8px 12px;color:var(--ink);background:var(--field)}
.mail button{background:var(--blue);color:#fff;border-radius:8px;padding:8px 16px;font-size:14px;line-height:24px;font-weight:600;transition:opacity .3s var(--b)}
.mail button:hover{opacity:.88}
.mail button:active{transform:scale(.98)}

.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
#c{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:blur(14px);transition:opacity .9s var(--e2),filter .9s var(--e2)}
body.scene #c{opacity:1;filter:none}
body.still #c,body.still .pin .chip,body.still .pin .tag,body.still .pin .stem,body.still .pin .end,body.still .pin .txt span,body.still .pin .dot{transition:none!important}
#pins{position:absolute;inset:0;z-index:3}
.pin{position:absolute;left:0;top:0;width:0;height:0}
.pin .tag{position:absolute;left:0;bottom:0;display:grid;opacity:0;filter:blur(4px);scale:.88;transition:opacity .6s var(--e2),filter .6s var(--e2),scale .8s var(--e)}
body.pins .pin .tag{opacity:1;filter:none;scale:1}
.pin .chip{transition:width .3s var(--e),transform .3s var(--e);display:flex;align-items:center;gap:8px;padding:4px 12px 4px 8px;border-radius:9999px;background:var(--pill);color:var(--pill-ink);font-size:13px;line-height:20px;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.pin .dot{width:8px;height:8px;border-radius:9999px;background:var(--soft);flex:none;transition:background-color .4s var(--b),transform .5s var(--e)}
.pin.agent .dot{background:var(--blue)}
html.dark .pin.agent .dot{background:color-mix(in srgb,var(--blue) 45%,var(--soft))}
.pin.hit .dot{transform:scale(1.5)}
.pin .txt{display:grid}
.pin .txt span{grid-area:1/1;justify-self:start;transition:opacity .12s var(--e2),filter .12s var(--e2),transform .12s var(--e2)}
.pin .txt .a{opacity:0;filter:blur(2px);transform:translateY(3px)}
.pin.agent .txt .t{opacity:0;filter:blur(2px);transform:translateY(-3px)}
.pin.agent .txt .a{opacity:1;filter:none;transform:none}
.pin .stem{position:absolute;left:-1px;top:0;width:2px;border-radius:2px;background:var(--stem);transform-origin:50% 0;transition:transform .7s var(--e),opacity .6s var(--e2);opacity:0}
body.pins .pin .stem{opacity:1}
.pin .stem.side{height:2px}
.pin .end{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:9999px;background:var(--stem);opacity:0;transition:transform .7s var(--e),opacity .6s var(--e2)}
body.pins .pin .end{opacity:1}

.foot{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:24px;padding:24px var(--m);font-size:14px;line-height:20px}
.foot a{display:inline-block;padding:4px 0;text-decoration:none;color:var(--mute);transition:color .3s var(--b)}
.foot a:hover{color:var(--ink)}
.foot .man{color:var(--ink);font-weight:500}
.review{font-size:12px;line-height:16px;color:var(--soft);padding:4px 8px;border-radius:9999px;transition:color .3s var(--b),background-color .3s var(--b)}
.review:hover{color:var(--ink);background:rgba(127,127,135,.12)}
.review[hidden]{display:none}
.hero:has(.pop.on){z-index:6}
.info{position:fixed;left:0;top:0;z-index:6;width:min(280px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;background:var(--pop);box-shadow:0 16px 48px rgba(0,0,0,.12);pointer-events:none;opacity:0;filter:blur(2px);scale:.98;transition:opacity .2s var(--e2),filter .2s var(--e2),scale .3s var(--e)}
html.dark .info{box-shadow:0 16px 48px rgba(0,0,0,.5)}
.info.on{opacity:1;filter:none;scale:1}
.info p{margin:0;display:grid;grid-template-columns:56px 1fr;column-gap:8px;font-size:13px;line-height:18px;color:var(--mute)}
.info p+p{margin-top:8px}
.info .n{display:none}
.info em{grid-row:span 2;font-style:normal;font-size:12px;line-height:18px;color:var(--soft)}
.info b{font-weight:600;color:var(--ink)}
.info:not(.ink-a) .a b,.info.ink-a .t b{color:var(--mute)}
.info.ink-a em{color:var(--soft)}

@media (max-width:1100px){:root{--m:32px}}
html.lp{--m:24px}
html.lp .bar{padding:12px var(--m)}
html.lp .hero{top:56px;width:44vw}
html.lp .sub{margin-top:12px;font-size:15px;line-height:22px;max-width:100%}
html.lp .cta{margin-top:16px;width:max-content}
html.lp .pop{top:auto;bottom:calc(100% + 12px);left:0;width:44vw;padding:12px;transform-origin:0 100%}
html.lp .hero:has(.pop.on) .sub{opacity:0;transition:opacity .2s var(--e2)}
html.lp .foot{padding:8px var(--m)}
html.ph{--m:24px}
html.ph .bar{padding:16px var(--m)}
html.ph .tools{gap:4px}
html.ph .hero{top:68px;z-index:4}
html.tb .hero{top:112px}
html.ph .sub{margin-top:12px;font-size:15px;line-height:22px}
html.ph .cta{margin-top:16px}
html.ph .btn{width:100%;min-height:48px}
html.ph .pop{top:auto;left:0;bottom:calc(100% + 6px);width:100%;padding:10px 12px;border-radius:20px;transform-origin:50% 100%}
html.ph .pop p{margin-bottom:6px;font-size:13px;line-height:18px}
html.ph .mail input{padding:6px 12px}
html.ph .mail button{padding:6px 14px}
html.ph .hero:has(.pop.on) .sub{opacity:0;transition:opacity .2s var(--e2)}
html.ph .foot{padding:12px var(--m) calc(12px + env(safe-area-inset-bottom));gap:16px}
html.ph .review{margin-left:auto}
html.ph .pin .chip,html.lp .pin .chip{font-size:13px;line-height:18px;padding:4px 8px;gap:6px}
html.ph .pin .chip{font-size:12px;line-height:16px;padding:3px 7px;gap:5px}
html.ph .pin .dot,html.lp .pin .dot{width:6px;height:6px}
html.ph .foot a{min-height:24px;display:inline-flex;align-items:center}
html.ph .review{line-height:24px}
@media (min-width:1600px){html:not(.lp):not(.ph) .sub{font-size:20px;line-height:30px;max-width:620px}}
@media (prefers-reduced-motion:reduce){
  .ap,h1 .w,#c,.pin .tag,.pin .stem,.pin .end{transition:opacity .4s linear!important;transform:none!important;filter:none!important}
}
html.lb-hover .pin,html.lb-off .pin{opacity:0;transition:opacity .25s var(--e2)}
html.lb-hover .pin.show{opacity:1}
html.lb-off .info{display:none}
:root{--gk:#050505;--gp:#8E8EA0}
html.dark{--gk:#FCFCFC;--gp:#ACACBE}
html .pin.agent.host .dot{width:17px;height:17px;border-radius:0;background:none}
html.ph .pin.agent.host .dot,html.lp .pin.agent.host .dot{width:12px;height:12px}
html .pin.agent.h-e1 .dot{background:var(--gk);-webkit-mask:url(img/brands/grok.svg) center/contain no-repeat;mask:url(img/brands/grok.svg) center/contain no-repeat}
html .pin.agent.h-e2 .dot{background:url(img/brands/claude.svg) center/contain no-repeat}
html .pin.agent.h-e3 .dot{background:var(--gp);-webkit-mask:url(img/brands/chatgpt.svg) center/contain no-repeat;mask:url(img/brands/chatgpt.svg) center/contain no-repeat;animation:enlarge-appear .4s ease-out}
html .pin.agent.h-e4 .dot{background:url(img/brands/muse.svg) center/contain no-repeat;animation:ring-reform .9s var(--e)}
@keyframes enlarge-appear{from{opacity:0;transform:scale(.75) rotate(-90deg)}to{opacity:1;transform:none}}
@keyframes ring-reform{from{opacity:0;transform:rotate(-180deg) scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pin .dot{animation:none!important}}
.hero>*{pointer-events:auto}
.keys{position:fixed;inset:0;z-index:1;pointer-events:none}
.key{position:absolute;left:0;top:0;opacity:0;pointer-events:none;font-size:1px;color:transparent;overflow:hidden}
.ring{position:absolute;left:0;top:0;border-radius:16px;box-shadow:0 0 0 2px var(--blue);opacity:0;transition:opacity .2s var(--e2);pointer-events:none}
.ring.on{opacity:1}
html.touch .mark{min-height:44px;padding:0 4px;margin-left:-4px}
html.touch .theme{width:44px;height:44px;margin-right:-6px}
html.touch .theme::after{inset:0}
html.touch .foot a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0}
html.touch .foot{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
html.lp .foot{padding-top:0;padding-bottom:0;right:auto}
html.touch .bar{padding-top:8px;padding-bottom:8px}
html:is(.ph,.lp) .info{width:max-content;max-width:160px;padding:8px;border-radius:12px}
html:is(.ph,.lp) .info p{display:block;font-size:12px;line-height:16px}
html:is(.ph,.lp) .info p+p{margin-top:2px}
html:is(.ph,.lp) .info p:not(.n) :is(em,b){display:none}
html:is(.ph,.lp) .info .n{display:flex;gap:6px;margin-bottom:2px;font-size:12px;line-height:16px;white-space:nowrap}
html:is(.ph,.lp) .info:not(.ink-a) p.t span,html:is(.ph,.lp) .info.ink-a p.a span{color:var(--ink)}
html:is(.ph,.lp) .info:not(.ink-a) .n .a,html:is(.ph,.lp) .info.ink-a .n .t{color:var(--soft);font-weight:500}
html .pin.pv .tag,html .pin.pv .stem,html .pin.pv .end{opacity:0}
