@font-face{font-family:Inter;src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:JBMono;src:url(../fonts/jbmono-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:InterFallback;src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
:root{
  --bg:#fafaf9;--bg2:#f2f2f0;--s1:#fff;--s2:#f4f4f5;--line:rgba(9,9,11,.09);--line2:rgba(9,9,11,.15);--line3:rgba(9,9,11,.3);
  --tx:#09090b;--tx2:#3a3a42;--tx3:#55555d;--tx4:#6b6b74;
  --pri:#2f5fe8;--pri2:#2b58dc;--ok:#087d57;--warn:#a2610a;--bad:#c51d40;--cy:#0b7894;
  --glow:rgba(47,95,232,.16);
  --shadow:0 1px 2px rgba(9,9,11,.04),0 24px 60px -28px rgba(9,9,11,.28);
  --mono:JBMono,ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,InterFallback,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:1280px;--r:16px;
  --out:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.65,0,.35,1);
  color-scheme:light
}
[data-theme=dark],.dk,.sheet{
  --bg:#09090b;--bg2:#0d0d10;--s1:#111114;--s2:#18181c;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--line3:rgba(255,255,255,.28);
  --tx:#f5f5f6;--tx2:#c2c2c9;--tx3:#a0a0a9;--tx4:#80808a;
  --pri:#4c7dff;--pri2:#8aa8ff;--ok:#34d3a0;--warn:#ffbf5f;--bad:#ff6b86;--cy:#4fdcf5;
  --glow:rgba(76,125,255,.22);
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 100px -30px rgba(0,0,0,.9);
  color-scheme:dark
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--out)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{background:var(--bg);color:var(--tx);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"cv11","ss01"}
.dk{background:var(--bg);color:var(--tx)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--pri2);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:300;background:var(--pri);color:#fff;padding:8px 14px;border-radius:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kicker{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);display:inline-flex;align-items:center;gap:12px}
.kicker:before{content:"";width:8px;height:8px;background:var(--pri);border-radius:2px;box-shadow:0 0 0 4px var(--glow)}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:1;text-wrap:balance}
h2{font-size:clamp(40px,5.8vw,80px);letter-spacing:-.05em;line-height:.95}
.lead{font-size:clamp(17px,1.45vw,19px);color:var(--tx2);line-height:1.6;max-width:580px}
.sec{padding:clamp(100px,12vw,170px) 0;position:relative}
.sec-h{display:grid;gap:22px;margin-bottom:clamp(56px,7vw,96px)}
.sec-h.c{text-align:center;justify-items:center}
.acc{color:var(--pri2)}
.mono{font-family:var(--mono)}
/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-weight:550;font-size:15px;letter-spacing:-.01em;border:1px solid var(--line2);background:transparent;color:var(--tx);transition:background .3s var(--out),border-color .3s,transform .3s var(--out),box-shadow .3s;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate}
.btn:hover{border-color:var(--line3);background:var(--s2)}
.btn:active{transform:scale(.97)}
.btn svg{transition:transform .35s var(--out)}.btn:hover svg{transform:translateX(3px)}
.btn.w{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.btn.w:hover{box-shadow:0 10px 30px -10px var(--glow),0 0 0 4px var(--glow)}
.btn.w:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--out)}
[data-theme=dark] .btn.w:after,.dk .btn.w:after{background:linear-gradient(105deg,transparent 35%,rgba(9,9,11,.18) 50%,transparent 65%)}
.btn.w:hover:after{transform:translateX(120%)}
.btn.p{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn.p:hover{background:var(--pri);box-shadow:0 12px 30px -10px var(--pri)}
.btn.s{height:40px;padding:0 18px;font-size:14px}
/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .35s,border-color .35s,color .35s;border-bottom:1px solid transparent;view-transition-name:nav}
.nav.over{--tx:#f5f5f6;--tx2:#c2c2c9;--line2:rgba(255,255,255,.18);--line3:rgba(255,255,255,.34);--s2:rgba(255,255,255,.08);--bg:#09090b;color:var(--tx)}
.nav .wrap{display:flex;align-items:center;height:72px;gap:36px}
.nav.solid{background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-color:var(--line)}
.logo{display:flex;align-items:center;gap:11px;font-weight:650;font-size:15px;letter-spacing:.24em;position:relative;z-index:2}
.logo svg{width:26px;height:26px;color:var(--tx);transition:transform .5s var(--out)}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.links{display:flex;gap:2px}
.links a{position:relative;padding:8px 14px;border-radius:999px;color:var(--tx2);font-size:14.5px;font-weight:500;transition:color .25s,background .25s}
.links a:hover{color:var(--tx);background:var(--s2)}
.links a.on{color:var(--tx)}
.links a.on:after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--pri);transform:translateX(-50%)}
.nav .cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav .signin{color:var(--tx2);font-size:14.5px;font-weight:500;padding:8px 12px;transition:color .2s}
.nav .signin:hover{color:var(--tx)}
.tt{width:40px;height:40px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--tx2);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,transform .5s var(--out)}
.tt:hover{color:var(--tx);border-color:var(--line3);transform:rotate(20deg)}
.tt .sun{display:none}[data-theme=dark] .tt .sun{display:block}[data-theme=dark] .tt .moon{display:none}
.burger{display:none;width:46px;height:46px;border-radius:999px;border:1px solid var(--line2);background:transparent;cursor:pointer;position:relative;z-index:2;transition:border-color .3s,background .3s}
.burger i{position:absolute;left:14px;right:14px;height:1.7px;background:var(--tx);border-radius:2px;transition:transform .5s var(--out),top .5s var(--out),width .4s var(--out)}
.burger i:first-child{top:19px}.burger i:last-child{top:26px;right:18px}
.menu-open .burger i:first-child{top:22.2px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:22.2px;right:14px;transform:rotate(-45deg)}
.menu-open .nav{--tx:#f5f5f6;--tx2:#c2c2c9;--line2:rgba(255,255,255,.18);color:var(--tx);background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* ---------- mobile sheet ---------- */
.sheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;height:100dvh;padding:76px 22px max(12px,env(safe-area-inset-bottom));background:radial-gradient(520px 420px at 100% 0,rgba(76,125,255,.22),transparent 70%),radial-gradient(500px 400px at 0 100%,rgba(79,220,245,.08),transparent 70%),#09090b;color:var(--tx);clip-path:circle(0 at calc(100% - 47px) 36px);visibility:hidden;transition:clip-path .45s var(--io),visibility 0s .45s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .sheet{clip-path:circle(150% at calc(100% - 47px) 36px);visibility:visible;transition:clip-path .7s var(--out),visibility 0s}
.menu-open,.menu-open body{overflow:hidden}
.sheet .lbl{display:none;font:500 11.5px var(--mono);letter-spacing:.16em;color:var(--tx4);margin-bottom:6px}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{display:grid;grid-template-columns:28px 1fr 20px;align-items:center;column-gap:10px;padding:clamp(8px,1.8dvh,15px) 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(22px);transition:opacity .3s,transform .3s}
.sheet nav a b{font-size:clamp(22px,4dvh,30px);font-weight:600;letter-spacing:-.045em;line-height:1.1}
.sheet nav a span{display:none;grid-column:2;font-size:13.5px;color:var(--tx3);margin-top:2px}
@media (min-height:820px){.sheet nav a span{display:block}.sheet .lbl{display:block}}
.sheet nav a small{font:500 11px var(--mono);color:var(--pri2);letter-spacing:.06em;grid-row:1}
.sheet nav a svg{grid-column:3;grid-row:1/3;color:var(--tx4);transition:transform .3s var(--out),color .3s}
.sheet nav a:active svg{transform:translateX(4px);color:var(--tx)}
.menu-open .sheet nav a{opacity:1;transform:none;transition:opacity .6s var(--out) calc(.12s + var(--i)*.045s),transform .7s var(--out) calc(.12s + var(--i)*.045s)}
.sheet-foot{margin-top:auto;padding-top:16px;display:grid;gap:8px;opacity:0;transform:translateY(20px);transition:opacity .25s,transform .25s}
.menu-open .sheet-foot{opacity:1;transform:none;transition:opacity .6s var(--out) .38s,transform .7s var(--out) .38s}
.sheet-foot .btn{width:100%;height:clamp(44px,7dvh,54px);font-size:15.5px}
.sheet-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--tx3)}
.seg{display:flex;padding:3px;border:1px solid var(--line2);border-radius:999px}
.seg button{border:0;background:transparent;color:var(--tx3);padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:550;cursor:pointer;transition:background .3s,color .3s}
:root:not([data-theme=dark]) .seg .sl,[data-theme=dark] .seg .sd{background:var(--tx);color:var(--bg)}
/* ---------- hero ---------- */
.hero{position:relative;min-height:max(780px,100svh);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;padding-top:72px}
.hero:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(900px 620px at 76% 44%,rgba(76,125,255,.24),transparent 64%),radial-gradient(700px 500px at 100% 100%,rgba(79,220,245,.09),transparent 70%),radial-gradient(600px 400px at 0 0,rgba(155,123,255,.07),transparent 70%),#09090b}
.hero:after{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 80% at 20% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 20% 40%,#000,transparent 75%)}
.traces{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55}
.traces path{fill:none;stroke:url(#tg);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.2s var(--out) forwards}
.traces path:nth-of-type(2){animation-delay:.4s}.traces path:nth-of-type(3){animation-delay:.8s}.traces path:nth-of-type(4){animation-delay:1.1s}
.traces circle{fill:#8aa8ff;opacity:0;animation:pop .6s var(--out) forwards}
.traces circle:nth-of-type(1){animation-delay:1.2s}.traces circle:nth-of-type(2){animation-delay:1.8s}.traces circle:nth-of-type(3){animation-delay:2.4s}.traces circle:nth-of-type(4){animation-delay:2.9s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:.9;transform:none}}
.hero>.wrap{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;width:100%}
.hero-copy{position:relative;z-index:3;max-width:640px;padding:36px 0 34px}
.hero h1{font-size:clamp(64px,9vw,150px);letter-spacing:-.065em;line-height:.86;font-weight:600;margin:26px 0 28px}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .04em .08em 0;margin-bottom:-.08em}
.hero h1 .ln>span{display:block;animation:rise 1.2s var(--out) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero h1 .ln:nth-child(2)>span{background:linear-gradient(100deg,#fff 0%,#fff 55%,#a9c1ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pt{position:relative;display:inline-block;color:var(--pri)}
.pt:after{content:"";position:absolute;left:50%;bottom:.14em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;box-shadow:0 0 0 0 rgba(76,125,255,.6);animation:ping 2.6s 1.6s var(--out) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(76,125,255,.55)}70%,100%{box-shadow:0 0 0 .35em rgba(76,125,255,0)}}
@keyframes rise{from{transform:translateY(108%)}}
.hero .lead{max-width:500px;animation:fadein 1s .3s var(--out) both}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;animation:fadein 1s .42s var(--out) both}
@keyframes fadein{from{transform:translateY(22px);clip-path:inset(0 0 100% 0)}}
@keyframes fadeo{from{opacity:0;transform:translateY(18px)}}
.hero-shot{position:absolute;z-index:1;left:47%;top:46%;width:min(1180px,74vw);transform:translateY(-48%) perspective(2200px) rotateY(-16deg) rotateX(5deg);transform-origin:0 50%;animation:shotin 1.7s .12s var(--out) both}
@keyframes shotin{from{opacity:0;transform:translateY(-40%) perspective(2200px) rotateY(-26deg) rotateX(9deg)}}
.hero-shot .fr{border-radius:16px;padding:7px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 40%,rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(255,255,255,.06),0 60px 140px -30px rgba(0,0,0,.95),0 0 180px -40px rgba(76,125,255,.6);position:relative;overflow:hidden;clip-path:inset(0 round 16px)}
.hero-shot img{border-radius:10px}
.hero-shot .fr:after{content:"";position:absolute;left:0;right:0;height:160px;top:0;transform:translateY(-170px);background:linear-gradient(transparent,rgba(138,168,255,.14),transparent);animation:scan 7s 2s linear infinite;pointer-events:none}
@keyframes scan{to{transform:translateY(900px)}}
.hero-shot:before{content:"";position:absolute;inset:-2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 58%,#09090b 100%),linear-gradient(0deg,#09090b 0,transparent 26%)}
.finding{position:absolute;z-index:4;left:40%;bottom:23%;width:390px;padding:18px 20px;border-radius:16px;background:rgba(17,17,20,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,92,122,.06);color:#f5f5f6;animation:fadein 1.1s .9s var(--out) both}
.finding .h{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.14em;color:#ff8da3}
.finding .h i{width:7px;height:7px;border-radius:50%;background:#ff5c7a;animation:ping-r 2s 2s infinite}
@keyframes ping-r{0%{box-shadow:0 0 0 0 rgba(255,92,122,.6)}70%,100%{box-shadow:0 0 0 7px rgba(255,92,122,0)}}
.finding .h span{margin-left:auto;color:#80808a;letter-spacing:.06em}
.finding q{display:block;font-size:15px;line-height:1.45;margin-top:12px;quotes:none}
.finding q mark{background:linear-gradient(rgba(255,92,122,.32),rgba(255,92,122,.32)) no-repeat 0 100%/0 100%;color:inherit;border-radius:3px;padding:0 2px;animation:hl 1s var(--out) forwards}
.finding q:nth-of-type(1) mark{animation-delay:1.7s}.finding q:nth-of-type(2) mark{animation-delay:2.3s}
@keyframes hl{to{background-size:100% 100%}}
.finding .vs{font:500 11px var(--mono);color:#80808a;margin:8px 0;letter-spacing:.12em}
.finding .src{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.finding .src b{font:500 11px var(--mono);color:#a9c1ff;background:rgba(76,125,255,.14);border:1px solid rgba(76,125,255,.3);padding:3px 8px;border-radius:6px}
.proof{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(9,9,11,.55),#09090b 60%);animation:fadein 1s .55s var(--out) both}
.proof div{padding:24px 28px 34px 0}
.proof div+div{padding-left:28px;border-left:1px solid var(--line)}
.proof b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.proof span{font-size:14px;color:var(--tx3)}
/* ---------- story (sticky scroll) ---------- */
.ch-n{font:500 13px var(--mono);letter-spacing:.16em;color:var(--tx4);display:flex;gap:14px;align-items:center}
.ch-n b{font-weight:500;color:var(--pri2)}
.step h3{font-size:clamp(46px,6vw,92px);letter-spacing:-.06em;margin:18px 0 22px;line-height:.9}
.step p{color:var(--tx2);font-size:17px;max-width:440px}
.caps{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.caps li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--tx2)}
.caps li span{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx4);padding-top:3px}
.shot{display:block;border-radius:18px;padding:7px;background:linear-gradient(160deg,var(--line2),var(--line) 50%,transparent);box-shadow:var(--shadow);position:relative}
.shot img{border-radius:11px;width:100%}
[data-theme=dark] .lt{display:none}:root:not([data-theme=dark]) .dkimg{display:none}
.dk .lt{display:none!important}.dk .dkimg{display:block!important}
/* ---------- moment ---------- */
.moment{overflow:hidden}
.moment:before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 60%,rgba(255,92,122,.10),transparent 70%),radial-gradient(800px 500px at 50% 100%,rgba(76,125,255,.16),transparent 70%);pointer-events:none}
.mgrid{position:relative;display:grid;grid-template-columns:1fr 180px 1fr;align-items:center}
.mcard{border-radius:18px;background:var(--s1);border:1px solid var(--line2);padding:26px 26px 22px;box-shadow:var(--shadow);position:relative}
.mcard .hd{display:flex;justify-content:space-between;align-items:center;font:500 11.5px var(--mono);letter-spacing:.12em;color:var(--tx4);margin-bottom:18px}
.mcard .hd b{font-weight:500;color:var(--tx2)}
.paper{background:#f4f2ec;color:#1b1b1f;border-color:rgba(255,255,255,.2)}
.paper .hd{color:#6b6a63}.paper .hd b{color:#33322d}
.paper p{font:400 17px/1.65 Georgia,"Times New Roman",serif;color:#2b2a26}
.paper .sig{margin-top:18px;padding-top:12px;border-top:1px solid #d9d6cc;font:500 11.5px var(--mono);color:#6b6a63}
.tl-line{display:grid;grid-template-columns:52px 70px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--tx3)}
.tl-line:last-child{border:0}
.tl-line .ts{font:500 12px var(--mono);color:var(--pri2)}
.tl-line .sp{font-weight:600;font-size:13px;color:var(--tx2)}
.tl-line.key{color:var(--tx)}
mark.m{background:linear-gradient(rgba(255,92,122,.3),rgba(255,92,122,.3)) no-repeat 0 100%/100% 100%;color:inherit;border-radius:3px;padding:0 2px}
.paper mark.m{background-image:linear-gradient(rgba(224,36,74,.2),rgba(224,36,74,.2))}
.link{position:relative;height:100%;display:grid;place-items:center}
.link svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.link path{fill:none;stroke:#ff6b86;stroke-width:1.6;stroke-dasharray:4 5}
.badge-c{position:relative;z-index:2;font:600 10.5px var(--mono);letter-spacing:.12em;color:#fff;background:#e0244a;padding:7px 10px;border-radius:999px;box-shadow:0 10px 30px -6px rgba(224,36,74,.7);white-space:nowrap}
.mfoot{position:relative;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:42px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);font:500 12px var(--mono);color:var(--tx2);background:var(--s1)}
.chip svg{width:14px;height:14px;color:var(--ok)}
@supports (animation-timeline:view()){
  .moment .mgrid{view-timeline-name:--mo}
    mark.m{animation:hlv linear both;animation-timeline:--mo;animation-range:contain 0% contain 30%}
  .mcard.r mark.m{animation-range:contain 12% contain 42%}
  .link path{stroke-dasharray:1;stroke-dashoffset:1;animation:drawv linear both;animation-timeline:--mo;animation-range:contain 28% contain 52%}
  .badge-c{animation:popv linear both;animation-timeline:--mo;animation-range:contain 42% contain 58%}
  .mfoot .chip{animation:fadev linear both;animation-timeline:--mo;animation-range:contain 50% contain 70%}
}
@keyframes hlv{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes drawv{to{stroke-dashoffset:0}}
@keyframes popv{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fadev{from{transform:translateY(12px);clip-path:inset(0 0 100% 0)}}
/* ---------- live graph ---------- */
.gband{position:relative;padding:clamp(100px,12vw,170px) 0 clamp(90px,10vw,140px);overflow:hidden;isolation:isolate}
.gband:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 520px at 50% 58%,rgba(76,125,255,.2),transparent 70%)}
.gband:after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:28px 28px;mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,#000,transparent 80%)}
.graph{position:relative;max-width:1100px;margin:0 auto}
.graph svg{width:100%;height:auto;display:block;overflow:visible}
.graph .e{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.3}
.graph .e.dash{stroke-dasharray:4 6}
.graph .e.hot{stroke:url(#gp);stroke-width:2.4}
.graph .n circle.o{fill:#121216;stroke-width:2}
.graph .n text{fill:#f5f5f6;font:600 13px var(--sans);text-anchor:middle}
.graph .n text.s{fill:#a0a0a9;font:500 11px var(--sans)}
.graph .n text.c{font:700 12px var(--sans)}
.graph .n{transition:opacity .3s}
.graph .halo{fill:url(#gh)}
.graph .runner{fill:#fff;filter:drop-shadow(0 0 6px #8aa8ff)}
.graph:has(.n:hover) .n:not(:hover){opacity:.45}
.graph .n:hover circle.o{stroke-width:3}
@supports (animation-timeline:view()){
  .graph{view-timeline-name:--gr}
  .graph .e{stroke-dasharray:1;stroke-dashoffset:1;animation:drawv linear both;animation-timeline:--gr;animation-range:entry 30% cover 50%}
  .graph .e.dash{stroke-dasharray:1;}
  .graph .n{animation:nodein linear both;animation-timeline:--gr;animation-range:entry calc(10% + var(--d,0)*3%) cover calc(30% + var(--d,0)*2%);transform-box:fill-box;transform-origin:center}
}
@keyframes nodein{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.graph .gm{display:none}
.graph-hint{display:none;justify-content:center;gap:8px;align-items:center;margin-top:12px;font:500 11.5px var(--mono);letter-spacing:.12em;color:var(--tx4)}
.gnotes{display:grid;grid-template-columns:repeat(3,1fr);max-width:1100px;margin:40px auto 0;border-top:1px solid var(--line)}
.gnotes div{padding:24px 28px 0}.gnotes div+div{border-left:1px solid var(--line)}
.gnotes b{display:block;font-size:16px;font-weight:600;margin-bottom:4px;letter-spacing:-.015em}
.gnotes span{font-size:14px;color:var(--tx3)}
/* ---------- spotlight cards ---------- */
.spot{position:relative;isolation:isolate}
.spot:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-200px),var(--glow),transparent 60%);opacity:0;transition:opacity .4s}
.spot:hover:before{opacity:1}
/* ---------- roles ---------- */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.role{border-radius:20px;border:1px solid var(--line);background:var(--s1);padding:34px 32px 30px;display:flex;flex-direction:column;gap:14px;min-height:300px;transition:border-color .35s,transform .5s var(--out),box-shadow .5s var(--out);overflow:hidden}
.role:hover{border-color:var(--line3);transform:translateY(-4px);box-shadow:var(--shadow)}
.role .ix{display:flex;justify-content:space-between;align-items:center;font:500 12px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.role .ix svg{width:20px;height:20px;color:var(--tx3);transition:transform .5s var(--out),color .3s}
.role:hover .ix svg{transform:translate(4px,-4px);color:var(--pri2)}
.role h3{font-size:clamp(30px,3vw,42px);letter-spacing:-.05em;margin-top:auto}
.role p{color:var(--tx3);font-size:15.5px;max-width:420px}
.role .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.role .tags span{font:500 11.5px var(--mono);color:var(--tx3);border:1px solid var(--line2);border-radius:999px;padding:4px 10px}
/* ---------- security ---------- */
.secgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,7vw,110px);align-items:center}
.secgrid .lead{margin-top:26px}
.prov{--br:20px;--beam-bg:#0d0d10;border-radius:20px;padding:26px;background:rgba(255,255,255,.08);color:#f5f5f6;box-shadow:0 40px 90px -30px rgba(9,9,11,.6),0 0 120px -50px rgba(76,125,255,.5);position:relative;overflow:hidden}
.beam{isolation:isolate}
.beam:before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;z-index:-2;background:conic-gradient(transparent 0 270deg,var(--beam1,#4c7dff) 320deg,var(--beam2,#4fdcf5) 345deg,transparent 360deg);animation:spin 7s linear infinite;pointer-events:none}
.beam:after{content:"";position:absolute;inset:1px;border-radius:calc(var(--br,20px) - 1px);background:var(--beam-bg);z-index:-1;pointer-events:none}
@keyframes spin{to{rotate:1turn}}
.prov .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.prov .top b{font:500 11.5px var(--mono);letter-spacing:.14em;color:#a0a0a9}
.seal{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.12em;color:#34d3a0;border:1px solid rgba(52,211,160,.35);background:rgba(52,211,160,.08);padding:5px 10px;border-radius:999px}
.seal svg{width:13px;height:13px}
.prov dl{display:grid;grid-template-columns:110px 1fr;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.prov dt,.prov dd{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.prov dt{color:#80808a;font:500 11.5px var(--mono);letter-spacing:.1em;padding-top:14px}
.prov dd{color:#e4e4e8;font-family:var(--mono);font-size:13px;word-break:break-all}
.prov .hash{display:inline-block;color:#8aa8ff}
.rules{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--line)}
.rules li{padding:26px 26px 4px 0}
.rules li:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--line)}
.rules li:nth-child(n+4){border-top:1px solid var(--line);padding-top:26px;padding-bottom:4px}
.rules b{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.rules b svg{color:var(--ok);width:17px;height:17px}
.rules span{font-size:14.5px;color:var(--tx3)}
.fine-print{margin-top:22px;font-size:13.5px;color:var(--tx4);max-width:560px}
/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{padding:34px 32px;display:flex;flex-direction:column;position:relative;border-radius:22px;border:1px solid var(--line);background:var(--s1);transition:transform .5s var(--out),box-shadow .5s var(--out),border-color .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line2)}
.plan.hot{--br:22px;--beam-bg:var(--s1);border-color:transparent;background:var(--line2);overflow:hidden;box-shadow:0 30px 80px -40px var(--pri)}
.plan .tag{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx4);display:flex;justify-content:space-between;gap:10px}
.plan .tag em{font-style:normal;color:#fff;background:var(--pri);padding:2px 8px;border-radius:999px;letter-spacing:.1em}
.plan h3{font-size:26px;letter-spacing:-.035em;margin-top:22px}
.plan .who{color:var(--tx3);font-size:14.5px;margin-top:6px;min-height:46px}
.plan .price{font-size:58px;font-weight:600;letter-spacing:-.055em;margin:26px 0 2px;line-height:1}
.plan .price span{font-size:16px;color:var(--tx3);font-weight:500;letter-spacing:-.01em}
.plan ul{list-style:none;margin:28px 0 32px;display:grid;gap:12px;flex:1;border-top:1px solid var(--line);padding-top:24px}
.plan li{display:flex;gap:11px;font-size:14.5px;color:var(--tx2)}
.plan li svg{width:16px;height:16px;margin-top:3px;color:var(--pri2)}
.plan .btn{width:100%}
.terms{display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center;margin-top:28px;color:var(--tx3);font-size:14px}
.terms span{display:flex;gap:8px;align-items:center}.terms svg{width:15px;height:15px;color:var(--ok)}
/* ---------- closer + footer ---------- */
.closer{position:relative;padding:clamp(110px,14vw,190px) 0 clamp(90px,10vw,130px);overflow:hidden;isolation:isolate}
.closer:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 500px at 85% 100%,rgba(76,125,255,.3),transparent 70%),radial-gradient(500px 400px at 0 0,rgba(155,123,255,.08),transparent 70%)}
.closer h2{font-size:clamp(52px,8.4vw,132px);letter-spacing:-.065em;line-height:.88;max-width:1100px;margin-top:26px}
.closer .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:52px}
.closer .acts{display:flex;gap:12px;flex-wrap:wrap}
footer{padding:72px 0 0;border-top:1px solid var(--line);overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.fgrid p{color:var(--tx3);font-size:14px;margin-top:16px;max-width:320px}
.fgrid .fh{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx4);margin-bottom:14px}
.fgrid ul{list-style:none;display:grid;gap:9px}
.fgrid li a{color:var(--tx2);font-size:14.5px;transition:color .2s}.fgrid li a:hover{color:var(--tx)}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--tx4);font-size:13px}
.bigmark{font-weight:650;font-size:clamp(48px,16.4vw,250px);letter-spacing:-.045em;line-height:.8;text-align:center;margin-top:40px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;background:linear-gradient(180deg,var(--line3),transparent 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;transform:translateY(12%)}
/* ---------- scroll reveals ---------- */
@supports (animation-timeline:view()){
  .rv{animation:rvin linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .hero-shot .fr{animation:flatten linear both;animation-timeline:scroll(root);animation-range:0 90vh}
}
@keyframes rvin{from{transform:translateY(40px);clip-path:inset(0 0 100% 0 round 20px)}}
@keyframes flatten{to{opacity:.35;filter:blur(2px)}}
/* ---------- responsive ---------- */
@media (max-width:1100px){
  .links,.nav .signin,.nav .cta .btn,.nav .cta .tt{display:none}
  .burger{display:block}
  .hero-shot{position:relative;left:auto;top:auto;width:100%;transform:none;margin:8px 0 0;animation:fadein 1.2s .3s var(--out) both}
  .hero-shot:before{background:linear-gradient(0deg,#09090b 0,transparent 35%)}
  .hero-copy{padding:44px 0 10px}
  .finding{position:relative;left:auto;bottom:auto;width:auto;margin:-90px 16px 0}
  .proof{margin-top:40px}
  .secgrid{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr;gap:0}.link{height:90px}.link svg{display:none}
  .link:before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.6px dashed #ff6b86}
  .roles{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr 1fr}.rules li,.rules li:not(:nth-child(3n+1)){padding:22px 22px 4px 0;border-left:0;border-top:1px solid var(--line)}.rules li:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
  .plans{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (min-width:1101px){.sheet{display:none}}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{min-height:auto}
  .hero h1{font-size:clamp(58px,18vw,82px);margin:22px 0 22px}
  .hero .acts{flex-direction:column;align-items:stretch}.hero .acts .btn{height:54px}
  .hero-shot .fr{padding:5px;border-radius:12px}
  .finding{margin:-64px 0 0;padding:16px}
  .finding q{font-size:14px}
  .proof{grid-template-columns:1fr}.proof div,.proof div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
  .step h3{font-size:58px}
  .caps li{grid-template-columns:1fr;gap:2px}
  .shot{padding:5px;border-radius:13px}.shot img{border-radius:9px}
  .mcard{padding:20px 18px}.paper p{font-size:16px}
  .tl-line{grid-template-columns:44px 1fr;font-size:14px}.tl-line .sp{grid-column:2}.tl-line>span:last-child{grid-column:1/-1}
  .graph .gd{display:none}.graph .gm{display:block}
  .gm .n text{font-size:15px}.gm .n text.s{font-size:12.5px}.gm .n text.c{font-size:13px}
  .gnotes{grid-template-columns:1fr}.gnotes div{padding:20px 0 0}.gnotes div+div{border-left:0;border-top:1px solid var(--line);margin-top:20px}
  .role{padding:26px 22px;min-height:0}
  .rules{grid-template-columns:1fr}.rules li,.rules li:nth-child(even){padding:20px 0 4px;border-left:0}
  .prov{padding:20px}.prov dl{grid-template-columns:84px 1fr}
  .plan{padding:28px 22px}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}
  .closer .acts{flex-direction:column;width:100%}.closer .acts .btn{width:100%;height:54px}
}
@media (max-width:640px){
  .sec{padding:68px 0}
  .sec-h{margin-bottom:34px;gap:16px}
  h2{font-size:clamp(36px,10vw,44px)}
  .lead{font-size:16px}
  .proof{margin-top:28px}.proof div,.proof div+div{padding:14px 0}
  .beams{gap:40px}
  .mani{padding:56px 0}.mtext{font-size:clamp(28px,8.4vw,36px)}
  .step h3{margin:14px 0 16px}.caps{margin-top:20px}.caps li{padding:11px 0}
  .mfoot{margin-top:26px}.link{height:64px}
  .gband{padding:68px 0 56px}.gband .sec-h{margin-bottom:24px}
  .graph-hint{margin-top:2px}
  .gnotes{margin-top:18px}.gnotes div{padding:14px 0 0}.gnotes div+div{margin-top:14px}
  .roles{gap:12px}.role{gap:10px}
  .secgrid{gap:32px}.rules{margin-top:36px}
  .plans{gap:12px}.terms{margin-top:18px}
  .closer{padding:76px 0 64px}.closer h2{margin-top:18px}.closer .row{margin-top:28px;gap:24px}
  footer{padding:52px 0 0}.legal{margin-top:36px}.bigmark{margin-top:20px}
  .kb-cats{margin-top:40px}.kb-help{margin:40px 0 64px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .traces path{stroke-dashoffset:0}.traces circle{opacity:.9}
  .graph .e,.link path{stroke-dashoffset:0;stroke-dasharray:none}.graph .e.dash,.link path{stroke-dasharray:4 6}.runner{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* ---------- knowledge base ---------- */
.kb-hero{position:relative;padding:150px 0 70px;text-align:center;overflow:hidden;isolation:isolate}
.kb-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(760px 360px at 50% 0,rgba(76,125,255,.3),transparent 70%),#09090b}
.kb-hero:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 60% 80% at 50% 0,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 0,#000,transparent 75%)}
.kb-hero h1{font-size:clamp(46px,7vw,96px);letter-spacing:-.06em;line-height:.9;margin:18px 0 18px}
.kb-hero .lead{margin:0 auto}
.kb-search{max-width:640px;margin:34px auto 0;display:flex;align-items:center;gap:12px;height:60px;padding:0 10px 0 22px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(17,17,20,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 6px rgba(76,125,255,.06);transition:box-shadow .3s,border-color .3s}
.kb-search:focus-within{border-color:rgba(138,168,255,.6);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 6px rgba(76,125,255,.18)}
.kb-search svg{color:var(--tx3)}
.kb-search input{flex:1;border:0;background:transparent;color:var(--tx);font:500 16px var(--sans);outline:none;min-width:0}
.kb-search input::placeholder{color:var(--tx4)}
.kb-search kbd{font:500 11px var(--mono);border:1px solid var(--line2);border-radius:8px;padding:5px 9px;color:var(--tx3)}
.kb-pop{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:var(--tx3)}
.kb-pop a{color:var(--tx2);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;transition:border-color .2s,color .2s}
.kb-pop a:hover{border-color:var(--line3);color:var(--tx)}
.kb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.kb-cat{border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--s1);display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .5s var(--out),box-shadow .5s var(--out)}
.kb-cat:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow)}
.kb-cat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tx);color:var(--bg)}
.kb-cat h2{font-size:21px;letter-spacing:-.025em;margin-top:6px}
.kb-cat p{color:var(--tx3);font-size:14px}
.kb-cat ul{list-style:none;display:grid;margin-top:8px}
.kb-cat li a{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--tx2);font-size:14.5px;font-weight:550;border-top:1px solid var(--line);transition:color .2s,padding .3s var(--out)}
.kb-cat li a:hover{color:var(--pri2);padding-left:4px}
.kb-cat li a svg{margin-left:auto;width:15px;height:15px;color:var(--tx4)}
.kb-none{display:none;text-align:center;color:var(--tx3);margin-top:30px}
.kb-help{margin:64px 0 100px;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;border-radius:22px;padding:32px 34px;background:#0d0d10;color:#f5f5f6;position:relative;overflow:hidden}
.kb-help:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 240px at 100% 100%,rgba(76,125,255,.3),transparent 70%)}
.kb-help>*{position:relative}
.kb-help h3{font-size:24px;letter-spacing:-.03em}.kb-help p{color:#a0a0a9;font-size:15px;margin-top:4px}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;background:linear-gradient(90deg,var(--pri),#4fdcf5);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
.doc{display:grid;grid-template-columns:230px minmax(0,1fr) 200px;gap:56px;padding-top:124px;padding-bottom:100px}
.doc-nav{position:sticky;top:100px;align-self:start;font-size:14px;max-height:calc(100vh - 120px);overflow:auto}
.doc-nav .h,.toc .h{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx4);margin:22px 0 8px}
.doc-nav .h:first-child{margin-top:0}
.doc-nav a{display:block;padding:6px 12px;border-radius:9px;color:var(--tx3);font-weight:500;transition:color .2s,background .2s}
.doc-nav a:hover{color:var(--tx);background:var(--s2)}
.doc-nav a.on{color:var(--tx);background:var(--s2);box-shadow:inset 2px 0 0 var(--pri)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--tx4);margin-bottom:18px}
.crumbs a{color:var(--tx3)}.crumbs a:hover{color:var(--pri2)}
article h1{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.055em;line-height:.98;margin-bottom:16px}
article .meta{display:flex;flex-wrap:wrap;gap:6px 14px;white-space:nowrap;font:500 12px var(--mono);letter-spacing:.06em;color:var(--tx4);margin-bottom:28px}
article .meta span{display:flex;gap:6px;align-items:center}
article .intro{font-size:19px;color:var(--tx2);margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}
article h2{font-size:26px;letter-spacing:-.035em;margin:46px 0 14px;scroll-margin-top:96px;display:flex;align-items:center;gap:12px}
article h2:before{content:counter(sec,decimal-leading-zero);counter-increment:sec;font:500 12px var(--mono);color:var(--pri2);letter-spacing:.06em}
article{counter-reset:sec}
article p,article li{color:var(--tx2);font-size:16.5px;line-height:1.7}
article p{margin-bottom:14px}
article ol,article ul{margin:0 0 18px 22px;display:grid;gap:9px}
article ol{list-style:none;margin-left:0;counter-reset:st}
article ol li{position:relative;padding-left:40px;counter-increment:st}
article ol li:before{content:counter(st);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--tx);color:var(--bg);font:600 12.5px var(--sans);display:grid;place-items:center}
article strong{color:var(--tx);font-weight:600}
article code{font:500 13.5px var(--mono);background:var(--s2);border:1px solid var(--line);padding:1px 7px;border-radius:7px;color:var(--tx)}
.callout{display:flex;gap:12px;border:1px solid color-mix(in srgb,var(--pri) 30%,transparent);background:color-mix(in srgb,var(--pri) 6%,transparent);border-radius:14px;padding:15px 18px;margin:22px 0}
.callout svg{color:var(--pri2);margin-top:4px}
.callout.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 7%,transparent)}.callout.warn svg{color:var(--warn)}
.callout p{margin:0;font-size:15.5px}
article .shot{margin:28px 0}
.next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
.next a{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--s1);transition:border-color .3s,transform .4s var(--out)}
.next a:hover{border-color:var(--line3);transform:translateY(-2px)}
.next small{display:block;font:500 11px var(--mono);color:var(--tx4);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.next b{font-size:16px;letter-spacing:-.015em}
.next a:last-child{text-align:right}
.toc{position:sticky;top:100px;align-self:start;font-size:13.5px}
.toc a{display:block;padding:6px 0 6px 14px;color:var(--tx3);border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a:hover,.toc a.on{color:var(--tx);border-color:var(--pri)}
@media (max-width:1100px){.doc{grid-template-columns:1fr;padding-top:110px}.doc-nav,.toc{display:none}.kb-cats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kb-hero{padding:120px 0 52px}.kb-cats,.next{grid-template-columns:1fr}.next a:last-child{text-align:left}.kb-help{padding:26px 22px}}
/* ---------- flow: animated beams (adapted from 21st.dev Animated Beam) ---------- */
.beams{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(60px,12vw,200px);max-width:1080px;margin:0 auto;padding:10px 0}
.bsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bsvg .bp{fill:none;stroke:var(--line2);stroke-width:1.5}
.bsvg .bl{fill:none;stroke:url(#bg1);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 86;stroke-dashoffset:100;animation:beamrun var(--dur,3.6s) var(--del,0s) cubic-bezier(.5,0,.3,1) infinite;filter:drop-shadow(0 0 4px rgba(76,125,255,.7))}
@keyframes beamrun{to{stroke-dashoffset:0}}
.bcol{display:grid;gap:14px;position:relative;z-index:1}
.bn{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:999px;border:1px solid var(--line);background:var(--s1);box-shadow:0 1px 2px rgba(9,9,11,.04),0 10px 30px -18px rgba(9,9,11,.35);transition:border-color .3s,transform .4s var(--out)}
.bn:hover{border-color:var(--line3);transform:translateY(-2px)}
.bn .bi{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--s2);color:var(--tx2);flex:none}
.bn.out .bi{background:var(--tx);color:var(--bg)}
.bn b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.bn small{display:block;font-size:12.5px;color:var(--tx3)}
.bcore{position:relative;z-index:1;width:176px;height:176px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;background:radial-gradient(circle at 50% 30%,#1a1a22,#09090b 70%);color:#f5f5f6;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -20px rgba(9,9,11,.6),0 0 90px -10px rgba(76,125,255,.55)}
.bcore svg{width:46px;height:46px;color:#fff}
.bcore b{font-size:12px;letter-spacing:.26em;font-weight:650}
.bcore small{font:500 10.5px var(--mono);color:#a0a0a9;letter-spacing:.06em}
.bcore .ring{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(76,125,255,.35);animation:ringp 3.2s var(--out) infinite}
.bcore .ring.r2{animation-delay:1.6s}
@keyframes ringp{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (max-width:860px){
  .beams{grid-template-columns:1fr;gap:56px;justify-items:center}
  .bcol{grid-template-columns:1fr 1fr;width:100%;gap:10px}
  .bn{padding:8px 12px 8px 8px;gap:10px}.bn .bi{width:32px;height:32px}.bn small{display:none}.bn b{font-size:13.5px}
  .bcore{width:156px;height:156px}.bcore small{font-size:9.5px;letter-spacing:.02em}
  .bcol .bn:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;min-width:50%}
}
/* ---------- manifesto: word reveal (adapted from 21st.dev Text Reveal) ---------- */
.mani{padding:clamp(90px,11vw,160px) 0}
.mtext{font-size:clamp(32px,4.6vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.08;max-width:1100px;text-wrap:balance}
.mtext .w{display:inline-block}
.mtext .w>span{display:inline-block;color:var(--tx)}
.mtext .em>span{color:var(--pri2)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mtext{view-timeline-name:--mani}
    .mtext .w>span{color:var(--tx4);animation:wordin linear both;animation-timeline:--mani;animation-range:cover calc(18% + var(--i) * (34% / var(--n))) cover calc(26% + var(--i) * (34% / var(--n)))}
    .mtext .em>span{animation-name:wordem}
  }
}
@keyframes wordin{from{transform:translateY(.22em);color:var(--tx4)}to{transform:none;color:var(--tx)}}
@keyframes wordem{from{transform:translateY(.22em);color:var(--tx4)}to{transform:none;color:var(--pri2)}}
/* =================== v4: live visuals =================== */
[data-play] *,[data-play]:before{animation-play-state:paused}
[data-play].in *,[data-play].in:before{animation-play-state:running}
/* split headings: words rise */
.split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em 0;margin-bottom:-.1em}
.split .sw>span{display:inline-block}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .split{view-timeline-name:--sh}
  .split .sw>span{animation:wrise linear both;animation-timeline:--sh;animation-range:entry calc(var(--i)*4%) entry calc(45% + var(--i)*4%)}
}}
@keyframes wrise{from{transform:translateY(105%)}}
/* numbers band */
.nums{position:relative;padding:clamp(90px,11vw,150px) 0;overflow:hidden;isolation:isolate}
.nums:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 360px at 50% 0,rgba(76,125,255,.26),transparent 70%),radial-gradient(500px 300px at 100% 100%,rgba(79,220,245,.1),transparent 70%)}
.nums:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%)}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden}
.nc{background:#0b0b0e;padding:34px 28px 30px;display:flex;flex-direction:column;gap:6px;position:relative}
.num{font-size:clamp(46px,5.6vw,78px);font-weight:600;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.num.acc{color:#ff6b86}
.nc span{color:var(--tx3);font-size:14.5px}
.nbar{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:18px;position:relative;overflow:hidden}
.nbar:after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--v));background:linear-gradient(90deg,#4c7dff,#4fdcf5)}
.nbar.hot:after{background:linear-gradient(90deg,#ff6b86,#ffbf5f)}
.nums.in .nbar:after{animation:nfill 1.6s var(--out) both}
@keyframes nfill{from{transform:scaleX(0)}}
.nnote{text-align:center;margin-top:24px;font-size:13.5px;color:var(--tx4)}
.nnote a,.tl{color:var(--pri2);text-decoration:underline;text-underline-offset:3px}
/* steps with panels */
.steps{display:grid;gap:clamp(90px,11vw,150px)}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center;padding:0}
.step.flip .st-t{order:2}
.st-v{position:relative;perspective:1600px}
.st-v:before{content:"";position:absolute;inset:8% 6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(76,125,255,.38),transparent);filter:blur(40px)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .st-v .panel{animation:pin linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .step.flip .st-v .panel{animation-name:pinr}
}}
@keyframes pin{from{transform:rotateY(14deg) rotateX(8deg) translateY(60px) scale(.92)}}
@keyframes pinr{from{transform:rotateY(-14deg) rotateX(8deg) translateY(60px) scale(.92)}}
.panel{--T:9s;position:relative;border-radius:20px;background:linear-gradient(180deg,#141418,#0c0c0f);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 90px -30px rgba(9,9,11,.55),0 0 0 1px rgba(255,255,255,.03) inset;color:#f5f5f6;padding:18px;font-size:14px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;gap:14px}
.ph{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.08em;color:#a0a0a9}
.pdots{display:flex;gap:5px}.pdots i{width:9px;height:9px;border-radius:50%;background:#2a2a31}
.live{margin-left:auto;font:600 10.5px var(--mono);letter-spacing:.14em;color:#34d3a0;display:flex;align-items:center;gap:6px}
.live:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* find */
.srch{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 14px;border-radius:12px;background:#0a0a0c;border:1px solid rgba(138,168,255,.35);box-shadow:0 0 0 4px rgba(76,125,255,.1)}
.srch svg{color:#80808a}
.typed{white-space:nowrap;overflow:hidden;font-size:15px;animation:typing var(--T) steps(26) infinite both}
.caret{width:2px;height:20px;background:#8aa8ff;animation:blink 1s steps(1) infinite}
.go{margin-left:auto;font-size:12.5px;font-weight:600;background:#4c7dff;color:#fff;padding:8px 13px;border-radius:9px;animation:press var(--T) infinite both}
@keyframes typing{0%,3%{clip-path:inset(0 100% 0 0)}20%,92%{clip-path:inset(0 0 0 0);opacity:1}97%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes press{0%,21%,25%,100%{transform:none}23%{transform:scale(.92)}}
.res{display:grid;gap:8px;flex:1}
.sr{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);animation:rowin var(--T) calc(var(--k)*.3s) infinite both}
.sr .av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:700;background:#1d2440;color:#a9c1ff}
.sr .av.c2{background:#10313a;color:#7fe7f7}.sr .av.c3{background:#3a2c12;color:#ffd08a;font-size:10px}
.sr b{display:block;font-size:14px;font-weight:600;position:relative;width:max-content}
.sr small{display:block;font-size:12px;color:#80808a}
.st{font:600 11px var(--mono);letter-spacing:.06em;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#c2c2c9;animation:stpop var(--T) calc(var(--k)*.45s) infinite both}
.st.ok{color:#7ff0c6;border-color:rgba(52,211,160,.4);background:rgba(52,211,160,.1)}
.st.bad{color:#ff9db0;border-color:rgba(255,107,134,.4);background:rgba(255,107,134,.1)}
.sr.wrong{animation-name:rowwrong}
.strike{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#ff6b86;transform-origin:0 50%;animation:strike var(--T) .45s infinite both}
@keyframes rowin{0%,24%{opacity:0;transform:translateY(14px)}30%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes rowwrong{0%,24%{opacity:0;transform:translateY(14px)}30%,54%{opacity:1;transform:none}60%,92%{opacity:.5;transform:none}98%,100%{opacity:0}}
@keyframes stpop{0%,44%{opacity:0;transform:scale(.6)}49%{opacity:1;transform:scale(1.12)}53%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes strike{0%,54%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.pfoot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.cring{--p:94;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#34d3a0 calc(var(--p)*1%),#24242b 0);animation:ringf var(--T) infinite both;flex:none}
.cring b{width:34px;height:34px;border-radius:50%;background:#111114;display:grid;place-items:center;font:600 12px var(--mono)}
@property --p{syntax:"<number>";inherits:false;initial-value:94}
@keyframes ringf{0%,58%{--p:0}78%,100%{--p:94}}
.pft b{display:block;font-size:13.5px}.pft small{font-size:12px;color:#80808a}
.cnt{margin-left:auto;font:500 11.5px var(--mono);color:#a0a0a9}
/* read */
.files{display:grid;gap:8px}
.fl{display:grid;grid-template-columns:42px 1fr 22px;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);animation:rowin var(--T) calc(var(--k)*.35s) infinite both}
.ft{height:30px;border-radius:8px;display:grid;place-items:center;font:700 10px var(--mono)}
.ft.pdf{background:rgba(255,107,134,.14);color:#ff9db0}.ft.mp4{background:rgba(79,220,245,.14);color:#7fe7f7}.ft.wav{background:rgba(52,211,160,.14);color:#7ff0c6}
.fn b{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.pb{display:block;height:4px;border-radius:4px;background:#24242b;overflow:hidden}
.pb>i{display:block;height:100%;background:linear-gradient(90deg,#4c7dff,#4fdcf5);transform-origin:0 50%;animation:pfill var(--T) calc(var(--k)*.35s) infinite both}
@keyframes pfill{0%,28%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}
.okc{width:22px;height:22px;border-radius:50%;background:#34d3a0;color:#05140e;display:grid;place-items:center;animation:stpop var(--T) calc(var(--k)*.35s) infinite both}
.okc svg{width:13px;height:13px;stroke-width:3}
.wave{position:relative;display:flex;align-items:center;gap:3px;height:64px;padding:0 4px;border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden}
.wave i{flex:1;height:calc(var(--h)*100%);border-radius:3px;background:linear-gradient(180deg,#4fdcf5,#4c7dff);transform-origin:50% 50%;animation:wv 1.1s calc(var(--i)*-.07s) ease-in-out infinite alternate}
@keyframes wv{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.ph2{position:absolute;inset:0;animation:sweep var(--T) linear infinite both}
.ph2 span{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:#fff;box-shadow:0 0 12px #8aa8ff}
@keyframes sweep{0%,10%{transform:translateX(0)}90%,100%{transform:translateX(100%)}}
.lines{display:grid;gap:4px}
.tln{display:grid;grid-template-columns:50px 1fr;gap:10px;font-size:13.5px;color:#a0a0a9;padding:6px 8px;border-radius:8px}
.tln em{font-style:normal;font-weight:600;color:#c2c2c9;margin-right:6px}
.tln .ts{font:500 11.5px var(--mono);color:#8aa8ff;padding-top:2px}
.tln.key{color:#f5f5f6;animation:keyln var(--T) infinite both}
.tln.key mark{color:inherit;background:linear-gradient(rgba(255,92,122,.35),rgba(255,92,122,.35)) no-repeat 0 100%/0 100%;border-radius:3px;animation:hlk var(--T) infinite both}
@keyframes keyln{0%,52%{background:transparent}56%,92%{background:rgba(255,92,122,.08)}100%{background:transparent}}
@keyframes hlk{0%,54%{background-size:0 100%}62%,92%{background-size:100% 100%}100%{background-size:100% 100%}}
/* prove */
.memo{position:relative;flex:1;background:#f4f2ec;color:#1b1b1f;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.mt{font-size:15px;font-weight:650;letter-spacing:-.01em}
.ms{font-size:11.5px;color:#6b6a63;margin-top:-4px}
.ml{display:block;height:8px;width:var(--w);border-radius:4px;background:#d9d6cc;transform-origin:0 50%;animation:mline var(--T) calc(var(--k)*.25s) infinite both}
@keyframes mline{0%,10%{transform:scaleX(0)}22%,92%{transform:scaleX(1);opacity:1}98%,100%{opacity:0}}
.mqt{font:400 14.5px/1.5 Georgia,serif;color:#2b2a26;padding-left:12px;border-left:2px solid #c9c4b6;animation:rowin var(--T) calc(.6s + var(--k)*.35s) infinite both}
.mqt sup{font:700 10px var(--sans);color:#fff;background:#2f5fe8;border-radius:999px;padding:1px 6px;margin-left:4px;display:inline-block;animation:stpop var(--T) calc(.4s + var(--k)*.3s) infinite both}
.stamp{position:absolute;right:16px;bottom:18px;font:700 13px var(--mono);letter-spacing:.14em;color:#e0244a;border:2.5px solid #e0244a;border-radius:8px;padding:6px 10px;transform:rotate(-8deg);animation:stamp var(--T) infinite both;background:rgba(244,242,236,.9)}
@keyframes stamp{0%,58%{opacity:0;transform:scale(1.9) rotate(-16deg)}63%{opacity:1;transform:scale(.94) rotate(-8deg)}67%,92%{opacity:1;transform:rotate(-8deg)}98%,100%{opacity:0;transform:rotate(-8deg)}}
.cite{font:500 11px var(--mono);color:#a9c1ff;background:rgba(76,125,255,.14);border:1px solid rgba(76,125,255,.3);padding:4px 8px;border-radius:7px;animation:stpop var(--T) calc(.3s + var(--k)*.3s) infinite both}
.exp{margin-left:auto;position:relative;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;background:#f5f5f6;color:#09090b;padding:8px 12px;border-radius:999px;overflow:hidden;isolation:isolate}
.exp .eb{position:absolute;inset:0;z-index:-1;background:#c8d6ff;transform-origin:0 50%;animation:pfillx var(--T) infinite both}
.exp svg{width:14px;height:14px;stroke-width:3;color:#087d57;animation:stpopx var(--T) infinite both}
@keyframes pfillx{0%,70%{transform:scaleX(0)}84%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes stpopx{0%,84%{opacity:0;transform:scale(.4)}88%,94%{opacity:1;transform:none}100%{opacity:0}}
/* wall */
.wall{position:relative;padding:clamp(90px,11vw,150px) 0 clamp(60px,7vw,100px);overflow:hidden;isolation:isolate}
.wall:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 420px at 50% 60%,rgba(76,125,255,.22),transparent 70%)}
.wall .sec-h{margin-bottom:56px}
.wstage{position:relative;height:clamp(380px,46vw,620px);perspective:1800px;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in}
.wtilt{position:absolute;left:50%;top:50%;width:2400px;display:grid;gap:22px;transform:translate(-50%,-50%) rotateX(24deg) rotateZ(-8deg) scale(.9);transform-style:preserve-3d}
.wt{display:flex;overflow:hidden}
.wl{display:flex;gap:22px;padding-right:22px;flex:none;animation:wmove 60s linear infinite}
.wt:nth-child(2) .wl{animation-direction:reverse;animation-duration:70s}
.wi{width:520px;flex:none;border-radius:14px;padding:5px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.04));box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.wi img{border-radius:10px;width:100%;height:325px;object-fit:cover;object-position:top left}
@keyframes wmove{to{transform:translateX(-100%)}}
/* role art */
.art{position:relative;height:120px;border-radius:14px;background:var(--s2);border:1px solid var(--line);overflow:hidden;margin-bottom:6px}
.a1 .sh{position:absolute;left:50%;top:22px;width:96px;height:118px;margin-left:-48px;border-radius:8px;background:var(--s1);border:1px solid var(--line2);box-shadow:var(--shadow);transform-origin:50% 100%}
.a1 .s1{animation:fan1 4s var(--out) infinite alternate}.a1 .s2{animation:fan2 4s var(--out) infinite alternate}
@keyframes fan1{from{transform:rotate(0)}to{transform:rotate(-14deg) translateX(-18px)}}
@keyframes fan2{from{transform:rotate(0)}to{transform:rotate(12deg) translateX(18px)}}
.a1 .s3 i{position:absolute;left:12px;height:5px;border-radius:3px;background:var(--line2)}
.a1 .ln1{top:16px;width:60px}.a1 .ln2{top:30px;width:70px}.a1 .ln3{top:58px;width:50px}
.a1 .hl{top:42px;width:72px;height:9px!important;background:rgba(255,191,95,.6)!important;transform-origin:0 50%;animation:hlsw 4s var(--out) infinite}
@keyframes hlsw{0%,20%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.a2{background-image:radial-gradient(var(--line2) 1px,transparent 1.4px);background-size:14px 14px}
.a2 .rd{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--pri) 50%,transparent);animation:rad 3s var(--out) infinite}
.a2 .r2{animation-delay:1s}.a2 .r3{animation-delay:2s}
@keyframes rad{from{transform:scale(.3);opacity:1}to{transform:scale(2.6);opacity:0}}
.a2 .sweep{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:conic-gradient(color-mix(in srgb,var(--pri) 30%,transparent),transparent 25%);animation:spin 3s linear infinite}
.a2 .pin{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50% 50% 50% 0;background:var(--pri);transform:rotate(-45deg);box-shadow:0 0 0 4px var(--glow)}
.a2 .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cy);animation:blink 2s infinite}
.a2 .d1{left:22%;top:30%}.a2 .d2{left:72%;top:62%;animation-delay:.6s}.a2 .d3{left:64%;top:22%;animation-delay:1.2s}
.a3 .gauge{position:absolute;left:50%;bottom:-70px;width:180px;height:180px;margin-left:-90px;border-radius:50%;background:conic-gradient(from -90deg,#34d3a0 0 60deg,#ffbf5f 60deg 120deg,#ff6b86 120deg 180deg,transparent 180deg);-webkit-mask:radial-gradient(circle,transparent 62px,#000 63px);mask:radial-gradient(circle,transparent 62px,#000 63px)}
.a3 .needle{position:absolute;left:50%;bottom:18px;width:4px;height:72px;margin-left:-2px;border-radius:4px;background:var(--tx);transform-origin:50% 100%;animation:needle 4s var(--out) infinite alternate}
.a3 .needle:after{content:"";position:absolute;left:-5px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--tx)}
@keyframes needle{from{transform:rotate(-70deg)}to{transform:rotate(58deg)}}
.a3 .glabel{position:absolute;left:14px;top:12px;font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--tx3);font-style:normal}
.a4 .sb{position:absolute;left:16px;right:16px;top:18px;height:34px;border-radius:999px;background:var(--s1);border:1px solid var(--line2)}
.a4 .sbt{position:absolute;left:14px;top:12px;height:9px;width:62%;border-radius:4px;background:var(--line3);transform-origin:0 50%;animation:typeb 4s steps(12) infinite}
.a4 .sbc{position:absolute;right:6px;top:5px;width:22px;height:22px;border-radius:50%;background:var(--pri)}
@keyframes typeb{0%,8%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
.a4 .rr{position:absolute;left:16px;height:12px;border-radius:6px;background:var(--line2);top:calc(66px + var(--k)*17px);width:calc(78% - var(--k)*14%);transform-origin:0 50%;animation:rrin 4s var(--out) calc(.2s + var(--k)*.2s) infinite both}
@keyframes rrin{0%,45%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
/* provenance hash typing + seal */
.prov .hash{animation:typing 7s steps(32) infinite both}
.prov .seal{animation:sealp 7s var(--out) infinite both}
@keyframes sealp{0%,22%{opacity:0;transform:scale(1.8)}27%{opacity:1;transform:scale(.92)}31%,92%{opacity:1;transform:none}100%{opacity:0}}
/* closer orbs */
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.o1{width:520px;height:520px;right:-120px;bottom:-200px;background:#2f5fe8;animation:drift1 16s ease-in-out infinite alternate}
.o2{width:380px;height:380px;left:-100px;top:-120px;background:#6d4bd6;opacity:.3;animation:drift2 19s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-160px,-90px) scale(1.15)}}
@keyframes drift2{to{transform:translate(140px,80px) scale(.9)}}
/* v4 responsive */
@media (max-width:1100px){
  .step{grid-template-columns:1fr;gap:30px}.step.flip .st-t{order:0}
  .ngrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nums{padding:64px 0}.nc{padding:22px 18px}.num{font-size:40px}.nc span{font-size:13px}
  .steps{gap:72px}
  .panel{min-height:0;padding:14px;gap:12px;border-radius:16px}
  .sr{grid-template-columns:30px 1fr auto;padding:8px 10px;gap:9px}.sr .av{width:30px;height:30px;font-size:11px}
  .sr b{font-size:13px}.sr small{font-size:11px}.st{font-size:10px;padding:4px 7px}
  .typed{font-size:13.5px}.go{display:none}
  .cnt{display:none}
  .tln{grid-template-columns:42px 1fr;font-size:12.5px}
  .memo{padding:14px}.mqt{font-size:13.5px}.stamp{font-size:11px;right:10px;bottom:12px}
  .wall{padding:64px 0 40px}.wall .sec-h{margin-bottom:30px}
  .wstage{height:300px}.wtilt{width:1500px;gap:14px;transform:translate(-50%,-50%) rotateX(22deg) rotateZ(-8deg) scale(.75)}.wi{width:340px}.wi img{height:212px}.wl{gap:14px;padding-right:14px}
  .art{height:104px}
}
@media (max-width:640px){.terms{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){
  .split .sw>span{transform:none}
  .wl{animation:none!important}
  .typed{clip-path:none}
}
.prov dd{word-break:normal;overflow-wrap:anywhere}.prov .hash{word-break:break-all}
.exp{white-space:nowrap;flex:none}
@media (max-width:640px){.pv .pfoot{flex-wrap:wrap;row-gap:8px}.o1{width:360px;height:360px;right:-140px;bottom:-160px}}

/* knowledge base: phone screenshots and numbered steps */
.shot.phone{max-width:360px;margin:22px auto}
.shot.phone img{border-radius:22px}
.steps{counter-reset:s;list-style:none;display:grid;gap:12px;margin:14px 0 18px}
.steps li{position:relative;padding:12px 14px 12px 50px;border:1px solid var(--line);border-radius:14px;background:var(--s1);line-height:1.55}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--tx);color:var(--bg);font:600 12px var(--mono);display:grid;place-items:center}
.doc code{font:500 .92em var(--mono);background:var(--s2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}