*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);overflow-x:clip;color-scheme:dark;scroll-behavior:smooth}
body{overflow-x:clip;font:400 var(--t-0)/1.55 var(--font-ui);color:var(--fg);overflow-x:hidden;background:
 radial-gradient(900px 700px at 70% 10%,rgba(var(--emit-plasma),.07),transparent 60%),
 radial-gradient(900px 700px at 10% 60%,rgba(70,40,170,.08),transparent 60%),
 radial-gradient(800px 600px at 80% 90%,rgba(var(--emit-cyan),.06),transparent 60%),var(--bg)}
a{color:inherit;text-decoration:none}
em{font-style:normal;background:linear-gradient(100deg,#C7A6FF,#8B5CFF 55%,#8AE9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,3vw,40px);position:relative}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--track-display);font-weight:500}
.kicker{font:600 11px/1 var(--font-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.c{text-align:center}
.btn{display:inline-flex;align-items:center;gap:14px;font:600 14px/1 var(--font-ui);color:#fff;padding:7px 7px 7px 22px;border-radius:999px;
 background:linear-gradient(180deg,rgba(155,104,255,.55),rgba(80,40,190,.55));border:1px solid rgba(199,166,255,.55);
 box-shadow:0 0 22px rgba(var(--emit-plasma),.45),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s var(--ease-out),box-shadow .2s}
.btn i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#B48CFF,#6B35F0);box-shadow:0 0 14px rgba(var(--emit-plasma),.8)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(var(--emit-plasma),.7),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sm{font-size:13px}.btn.sm i{width:30px;height:30px}
.btn:focus-visible,.ghost:focus-visible,.card:focus-visible,.tile:focus-visible,.links a:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:3px}
/* nav */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:12px;z-index:5}
.brand{display:flex;align-items:center;gap:10px}.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand b{font:600 22px/1 var(--font-display);letter-spacing:.06em}.brand small{font-size:11px;color:var(--fg-2)}
.links{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(12,10,30,.5);border:1px solid var(--stroke-1)}
.links a{padding:8px 16px;border-radius:999px;font-size:13px;color:var(--fg-2);transition:color .2s}
.links a:hover{color:#fff}.links a.on{color:#fff;background:linear-gradient(180deg,rgba(139,92,255,.5),rgba(80,40,180,.4));box-shadow:0 0 16px rgba(var(--emit-plasma),.45),inset 0 1px 0 rgba(255,255,255,.2)}
/* hero */
.hero{min-height:min(760px,calc(100svh - 80px));display:flex;align-items:center;padding-block:32px 60px}
#core{position:absolute;-webkit-mask:radial-gradient(farthest-side,#000 62%,transparent);mask:radial-gradient(farthest-side,#000 62%,transparent);top:-10px;right:-120px;width:min(980px,78vw);height:calc(100% + 150px);z-index:0;pointer-events:auto;cursor:grab}
.hero-copy{position:relative;z-index:2;max-width:560px;pointer-events:none}
.hero-copy a{pointer-events:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-2);padding:6px 14px;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(20,14,50,.5);margin-bottom:26px}
.dot{width:7px;height:7px;border-radius:50%;background:#8AE9FF;box-shadow:0 0 10px #3FD8FF}
h1{font-size:clamp(46px,6.6vw,96px);line-height:.95;font-weight:600;letter-spacing:-.035em;display:flex;flex-direction:column}
h1 .grad{background:linear-gradient(100deg,#D9C4FF,#9B68FF 45%,#6E3BFF 75%,#8AE9FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(var(--emit-plasma),.45))}
.tag{margin-top:26px;font:600 16px/1 var(--font-display);letter-spacing:.02em}
.lede{margin-top:14px;max-width:440px;color:var(--fg-2);font-size:15px}
.ctas{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}
.ghost{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--fg-2)}
.play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(199,166,255,.5);font-size:11px;color:#C7A6FF;box-shadow:0 0 14px rgba(var(--emit-plasma),.35)}
.hud{position:absolute;z-index:2;display:grid;gap:2px;padding:12px 16px;border-radius:14px;font-size:11px;color:var(--fg-3);
 background:linear-gradient(155deg,rgba(40,24,90,.55),rgba(10,8,28,.6));border:1px solid rgba(199,166,255,.25);box-shadow:var(--e-1),0 0 20px rgba(var(--emit-plasma),.18);pointer-events:none}
.hud b{font-weight:600;color:var(--fg-2);letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.hud span{font:600 22px/1.1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.hud-a{right:4%;top:18%}.hud-b{right:30%;bottom:16%}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-30px;z-index:3}
.stats{padding:0}.stats>.stat:first-child{border-radius:20px 0 0 20px}
.stat{display:flex;align-items:center;gap:16px;padding:24px 32px;background:linear-gradient(180deg,rgba(26,18,58,.75),rgba(8,6,20,.8));border:1px solid var(--stroke-1);border-left:0}
.stat:first-child{border-left:1px solid var(--stroke-1)}.stat:last-child{border-radius:0 20px 20px 0}
.stats{max-width:calc(1280px - 2*clamp(16px,3vw,40px))}
.ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:#C7A6FF;font-size:18px;border:1px solid rgba(199,166,255,.35);background:radial-gradient(circle,rgba(var(--emit-plasma),.35),transparent 70%);box-shadow:0 0 16px rgba(var(--emit-plasma),.35)}
.stat b{font:600 30px/1 var(--font-display);font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:6px;color:var(--fg-2);font-size:12px}
/* about */
section{margin-top:clamp(64px,8vw,110px)}
.hero{margin-top:0}
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.portal{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid rgba(199,166,255,.25);box-shadow:var(--e-2),0 0 40px rgba(var(--emit-plasma),.15)}
.sky{position:absolute;inset:0;background:
 radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 45%,#d9c4ff,transparent),radial-gradient(1px 1px at 12% 60%,#fff,transparent),radial-gradient(1px 1px at 58% 38%,#fff,transparent),
 radial-gradient(60% 60% at 50% 45%,rgba(120,70,255,.55),transparent 70%),radial-gradient(80% 70% at 80% 10%,rgba(80,40,200,.5),transparent),linear-gradient(180deg,#120a33,#2a1466 60%,#3b1d86)}
.portal .ring{position:absolute;left:50%;top:44%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:3px solid #E6D8FF;
 box-shadow:0 0 18px #A47BFF,0 0 50px rgba(var(--emit-plasma),.9),inset 0 0 30px rgba(var(--emit-plasma),.7);animation:breathe 5s ease-in-out infinite}
.portal .r2{width:62%;border:1px solid rgba(199,166,255,.35);box-shadow:none;animation:spin 40s linear infinite;border-style:dashed}
.moon{position:absolute;right:9%;top:16%;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#b9a2e8,#3a2470 65%,#160c33);box-shadow:-6px 0 20px rgba(160,120,255,.35)}
.ridge{position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(180deg,#2a1560,#09051a);clip-path:polygon(0 40%,12% 22%,22% 38%,34% 14%,44% 36%,50% 30%,58% 40%,70% 18%,82% 34%,92% 20%,100% 32%,100% 100%,0 100%)}
.figure{position:absolute;left:50%;bottom:22%;width:3.2%;aspect-ratio:1/3;translate:-50% 0;background:linear-gradient(180deg,#e8e0ff,#6c5aa8);border-radius:40% 40% 20% 20%/20% 20% 10% 10%;box-shadow:0 0 14px rgba(var(--emit-plasma),.7)}
@keyframes breathe{50%{box-shadow:0 0 26px #A47BFF,0 0 80px rgba(var(--emit-plasma),1),inset 0 0 40px rgba(var(--emit-plasma),.8)}}
@keyframes spin{to{rotate:360deg}}
.about h2,.kit h2,.works h2,.cta h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.about-copy p:not(.kicker){margin-top:18px;color:var(--fg-2);max-width:460px}
.checks{list-style:none;margin:22px 0 28px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:center}
.checks li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;color:#fff;background:linear-gradient(135deg,#B48CFF,#6B35F0);box-shadow:0 0 10px rgba(var(--emit-plasma),.7)}
/* kit cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
.card,.kpi,.tile{position:relative;border-radius:18px;border:1px solid var(--stroke-1);background:linear-gradient(170deg,rgba(28,20,64,.6),rgba(8,6,20,.75));box-shadow:var(--e-1);transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s}
.card{display:grid;gap:10px;padding:26px 24px}
.card svg{width:36px;height:36px;fill:none;stroke:#B48CFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(var(--emit-plasma),.8));margin-bottom:6px}
.card b{font:600 16px/1.2 var(--font-display)}.card span{color:var(--fg-2);font-size:13px}
.card:hover,.kpi:hover,.tile:hover{transform:translateY(-4px);border-color:rgba(199,166,255,.5);box-shadow:var(--e-2),0 0 30px rgba(var(--emit-plasma),.3)}
/* proof */
.proof{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:16px;align-items:stretch}
.proof h2{font-size:clamp(28px,2.8vw,38px);line-height:1.05}
.proof-copy p{margin:14px 0 22px;color:var(--fg-2)}
.kpi{display:flex;flex-direction:column;align-items:center;padding:24px 18px 20px;text-align:center;overflow:hidden}
.kpi b{font:600 40px/1 var(--font-display);font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(var(--emit-plasma),.5)}
.kpi small{margin-top:8px;color:var(--fg-3);font-size:12px}
.kpi.lit{border-color:rgba(199,166,255,.45);box-shadow:var(--e-2),0 0 30px rgba(var(--emit-plasma),.25)}
.spark{width:100%;margin-top:auto;padding-top:16px;overflow:visible}
.spark .line{fill:none;stroke:#B48CFF;stroke-width:2.2;filter:drop-shadow(0 0 4px #9B68FF);stroke-dasharray:400;stroke-dashoffset:400}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;width:100%;margin-top:auto;padding-top:16px}
.bars i{flex:1;height:0;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#B48CFF,rgba(80,40,190,.2));box-shadow:0 0 10px rgba(var(--emit-plasma),.4);transition:height 1s var(--ease-out)}
.ring-k{width:84px;margin-top:auto;padding-top:12px;rotate:-90deg}
.ring-k circle{fill:none;stroke:rgba(160,140,255,.14);stroke-width:9}
.ring-k .v{stroke:#9B68FF;stroke-linecap:round;stroke-dasharray:0 1;filter:drop-shadow(0 0 5px #9B68FF);transition:stroke-dasharray 1.4s var(--ease-out)}
.ring-k.cy .v{stroke:#6FDFFF;filter:drop-shadow(0 0 5px #3FD8FF)}
.in .spark .line{transition:stroke-dashoffset 1.6s var(--ease-out);stroke-dashoffset:0}
.in .bars i{height:var(--h)}
.in .ring-k .v{stroke-dasharray:var(--p) 1}
/* works */
.works{display:grid;grid-template-columns:1fr 3.2fr;gap:24px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;padding:18px}
.tile span{position:relative;font:600 15px/1.1 var(--font-display);letter-spacing:.04em}
.tile::before{content:"";position:absolute;inset:0;transition:transform .5s var(--ease-out)}
.tile:hover::before{transform:scale(1.06)}
.t1::before{background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(199,166,255,.12) 22px 23px),repeating-linear-gradient(0deg,transparent 0 22px,rgba(199,166,255,.12) 22px 23px),radial-gradient(60% 70% at 70% 60%,rgba(155,104,255,.7),transparent),#140a33}
.t2::before{background:conic-gradient(from 200deg at 72% 55%,#9B68FF 0 30%,#3FD8FF 0 48%,#3a1f8a 0 70%,transparent 0),radial-gradient(circle at 72% 55%,#0b0620 22%,transparent 23%),#110829;-webkit-mask:radial-gradient(circle at 72% 55%,transparent 14%,#000 15%)}
.t3::before{background:radial-gradient(circle at 70% 50%,transparent 32%,rgba(155,104,255,.9) 33%,transparent 36%),radial-gradient(circle at 64% 44%,#6a7dff,#20166a 40%,#0a0520 46%),#0a0520}
.t4::before{background:linear-gradient(180deg,transparent 55%,rgba(155,104,255,.5)),conic-gradient(from 45deg at 72% 60%,#3b1d86 25%,#6b35f0 0 50%,#241154 0 75%,#4a26a8 0),#0d0626;-webkit-mask:linear-gradient(#000,#000)}
/* cta */
.cta-in{position:relative;display:flex;align-items:center;gap:40px;padding:42px clamp(24px,6vw,96px);border-radius:24px;overflow:hidden;border:1px solid rgba(199,166,255,.3);
 background:radial-gradient(50% 120% at 80% 50%,rgba(120,70,255,.45),transparent 70%),linear-gradient(90deg,rgba(14,8,34,.95),rgba(36,18,86,.8));box-shadow:var(--e-2)}
.cta-in>div:first-child{position:relative;z-index:2;flex:1}.cta-in p{margin-top:8px;color:var(--fg-2)}
.cta .btn{position:relative;z-index:2}
.cta-portal{position:relative;width:180px;aspect-ratio:1;flex:none}
.cta-portal .ring{position:absolute;inset:10%;border-radius:50%;border:3px solid #E6D8FF;box-shadow:0 0 18px #A47BFF,0 0 50px rgba(var(--emit-plasma),.9),inset 0 0 26px rgba(var(--emit-plasma),.7);animation:breathe 5s ease-in-out infinite}
.cta-portal .figure{bottom:12%;width:7%}
/* footer */
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:32px;margin-top:80px;padding-top:40px;padding-bottom:30px;border-top:1px solid var(--stroke-1)}
.fcol{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--fg-2)}
.fcol h3{font:600 14px/1 var(--font-ui);color:#fff;letter-spacing:0;margin-bottom:6px}
.fcol a:hover{color:#fff}
.news{padding:20px;border-radius:16px;border:1px solid var(--stroke-1);background:rgba(20,14,46,.5)}
.field{display:flex;margin-top:6px;padding:5px 5px 5px 16px;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(4,3,12,.6)}
.field input{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;outline:0}
.field:focus-within{border-color:var(--stroke-focus)}
.field button{width:34px;height:34px;border-radius:50%;border:0;color:#fff;cursor:pointer;background:linear-gradient(135deg,#B48CFF,#6B35F0);box-shadow:0 0 12px rgba(var(--emit-plasma),.7)}
.copy{grid-column:1/-1;text-align:center;color:var(--fg-3);font-size:12px;padding-top:18px}
.reveal{opacity:0;translate:0 24px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out)}
.reveal.in{opacity:1;translate:0 0}
@media (max-width:1100px){.links{display:none}.cards{grid-template-columns:repeat(3,1fr)}.proof{grid-template-columns:repeat(2,1fr)}.proof-copy{grid-column:1/-1}.works{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
 .hero{flex-direction:column;align-items:flex-start;min-height:0;padding-top:min(78vw,380px)}
 #core{top:-40px;right:-20%;width:140%;height:min(96vw,460px)}
 .hud-a{top:12px;right:16px}.hud-b{display:none}
 .nav .btn{font-size:12px;padding-left:14px}.nav .btn i{width:28px;height:28px}
 .stats{grid-template-columns:1fr 1fr;margin:24px 16px 0;gap:0}
 .stat,.stat:first-child,.stat:last-child{border:1px solid var(--stroke-1);border-radius:0;padding:18px 16px}
 .stat:nth-child(1){border-radius:18px 0 0 0}.stat:nth-child(2){border-radius:0 18px 0 0}.stat:nth-child(3){border-radius:0 0 0 18px}.stat:nth-child(4){border-radius:0 0 18px 0}
 .stat b{font-size:24px}.ico{width:36px;height:36px}
 .about{grid-template-columns:1fr;gap:28px}.cards{grid-template-columns:1fr 1fr}.cards .card:last-child{grid-column:1/-1}
 .tiles{grid-template-columns:1fr 1fr}
 .cta-in{flex-direction:column;align-items:flex-start;gap:20px}.cta-portal{position:absolute;right:-30px;bottom:-30px;opacity:.6}
 .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;translate:0}}

/* r2 art plates: layered starfield, nebula and lit horizon so below the fold reads as full art */
.portal::after,.tile::after,.cta-in::before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(1px 1px at 8% 18%,#fff,transparent),radial-gradient(1px 1px at 32% 64%,#e9e0ff,transparent),radial-gradient(1.4px 1.4px at 61% 9%,#fff,transparent),radial-gradient(1px 1px at 77% 71%,#cfe9ff,transparent),radial-gradient(1px 1px at 91% 33%,#fff,transparent),radial-gradient(1px 1px at 47% 41%,#fff,transparent);opacity:.8}
.portal .sky{background:
 radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 12%,#fff,transparent),
 radial-gradient(18% 14% at 50% 44%,rgba(255,255,255,.55),transparent 70%),radial-gradient(40% 34% at 50% 46%,rgba(140,90,255,.6),transparent 70%),
 conic-gradient(from 210deg at 40% 30%,transparent,rgba(63,216,255,.12) 10%,transparent 22%,rgba(155,104,255,.18) 40%,transparent 55%),
 radial-gradient(70% 50% at 25% 15%,rgba(90,50,220,.35),transparent),linear-gradient(180deg,#05030f,#140a38 55%,#2a1466)}
.portal .ridge{background:linear-gradient(180deg,#1b0d42,#030209);filter:drop-shadow(0 -2px 6px rgba(155,104,255,.55))}
.portal .ridge+.ridge{height:22%;background:#020107;clip-path:polygon(0 50%,8% 30%,18% 55%,30% 35%,40% 60%,60% 60%,72% 30%,84% 52%,100% 25%,100% 100%,0 100%)}
.tile{background:#05030f}
.tile span{z-index:2;text-shadow:0 2px 14px #000}
.tile::after{background:linear-gradient(180deg,transparent 40%,rgba(3,2,10,.85)),radial-gradient(1px 1px at 20% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 15%,#fff,transparent),radial-gradient(1px 1px at 55% 30%,#fff,transparent)}
.cta-in{background:radial-gradient(22% 60% at 82% 50%,rgba(255,255,255,.18),transparent 60%),radial-gradient(45% 120% at 82% 50%,rgba(120,70,255,.5),transparent 70%),conic-gradient(from 160deg at 82% 50%,transparent,rgba(63,216,255,.1) 8%,transparent 20%,rgba(155,104,255,.16) 35%,transparent 50%),linear-gradient(90deg,#05030f,rgba(26,12,66,.9))}
/* docs frame */
.doc{max-width:1440px;margin:0 auto;padding:0 clamp(16px,3vw,40px) 40px 0;display:grid;grid-template-columns:264px minmax(0,1fr) 170px;gap:56px}
.doc-main,.doc-toc{padding-top:48px}
.doc>.doc-side{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow:hidden;border-right:1px solid var(--stroke-1);display:block;padding:0;gap:0;font-size:inherit}
@media (max-width:1000px){.doc>.doc-side{display:none}.doc{padding-left:clamp(16px,3vw,40px)}}
.doc-side,.doc-toc{display:flex;flex-direction:column;gap:2px;position:sticky;top:24px;align-self:start;font-size:13px}
.doc-side a,.doc-toc a{color:var(--fg-2);padding:6px 10px;border-radius:8px;border-left:2px solid transparent;transition:color .2s}
.doc-side a:hover,.doc-toc a:hover{color:#fff}
.doc-side a.on{color:#fff;background:rgba(139,92,255,.12);border-left-color:#9B68FF}
.side-h{font:600 11px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin:0 0 10px 10px}
.crumb{font-size:12px;color:var(--fg-3);margin-bottom:10px}
.doc-h{font-size:clamp(32px,4vw,44px);line-height:1.05;letter-spacing:-.02em;display:block}
.doc-lede{margin-top:12px;color:var(--fg-2);font-size:16px;max-width:600px}
.lead{margin-top:40px;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:40px;align-items:start}
.lead .rule{margin:0;padding:0;min-height:0}
.rule h2,.dd h3{font:600 12px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.rule>p{margin-top:14px;color:var(--fg);font:500 18px/1.45 var(--font-ui);letter-spacing:-.005em}
.specs{margin-top:24px;display:grid}
.specs div{padding:12px 0;border-top:1px solid var(--stroke-1);display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline}
.specs dt{font-size:13px;color:var(--fg-3)}
.specs dd{font:500 14px/1.4 var(--font-ui);color:var(--fg)}
.plate{display:block;position:relative;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(110,59,255,.55),0 0 0 1px rgba(255,255,255,.06)}
.plate img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.plate:hover img{transform:scale(1.02)}
.plate-wrap{display:grid;gap:12px;margin:0}
.plate-cap{font-size:13px;color:var(--fg-3)}
.plate-cap a{color:var(--fg-2)}
.plate-cap a:hover{color:#fff}
.dd{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.dd h3{display:flex;align-items:center;gap:8px}
.dd h3::before{content:"";width:8px;height:8px;border-radius:50%;background:#3FD8A0}
.dd .dont h3::before{background:#FF5C7A}
.dd ul{margin-top:12px;list-style:none;padding:0;color:var(--fg);font-size:15px;display:grid}
.dd li{padding:10px 0;border-top:1px solid var(--stroke-1)}
.example-h{max-width:1280px;margin:0 auto;padding:8px clamp(16px,3vw,40px) 14px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;color:var(--fg-3);font-size:13px}
.example-h .side-h{margin:0}
.demo-frame{max-width:1280px;margin:0 auto 48px;border:1px solid var(--stroke-1);border-radius:20px;overflow:clip;position:relative;width:calc(100% - 2*clamp(16px,3vw,40px))}
@media (max-width:1000px){.doc{grid-template-columns:minmax(0,1fr);gap:24px}.doc-side,.doc-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.doc-side .side-h,.doc-toc .side-h{width:100%}.doc-side{order:0}.doc-toc{display:none}.lead{grid-template-columns:minmax(0,1fr)}.plate-wrap{order:-1}}
@media (max-width:640px){.doc{padding-top:28px}.doc-side{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.doc-side a{white-space:nowrap}.dd{grid-template-columns:minmax(0,1fr);gap:28px}.specs div{grid-template-columns:100px minmax(0,1fr)}.demo-frame{width:100%;border-radius:0;border-inline:0}}

.doc-switch{display:none}
@media (max-width:1000px){
 .doc-side{display:none}
 .doc-switch{display:block;position:relative;margin:0 0 22px;border:1px solid var(--stroke-1);border-radius:12px;background:rgba(12,10,30,.55)}
 .doc-switch summary{list-style:none;display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:13px}
 .doc-switch summary::-webkit-details-marker{display:none}
 .sw-k{color:var(--fg-3,#8a8aa3);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
 .sw-v{color:#fff;font-weight:500}
 .doc-switch summary i{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);rotate:45deg;translate:0 -2px;transition:rotate .2s}
 .doc-switch[open] summary i{rotate:225deg;translate:0 2px}
 .sw-list{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px 6px 8px;border-top:1px solid var(--stroke-1)}
 .sw-list a{padding:9px 10px;border-radius:8px;font-size:13px;color:var(--fg-2)}
 .sw-list a.on{color:#fff;background:rgba(139,92,255,.14)}
 .doc-switch summary:focus-visible,.sw-list a:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}
}

/* r2 next steps */
.lead{row-gap:20px}
.lead .rule{grid-row:1/3}
.next{grid-column:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.next a{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke-1);background:rgba(18,12,44,.45);transition:border-color .2s,background .2s}
.next a:hover{border-color:rgba(199,166,255,.45);background:rgba(40,24,90,.4)}
.next a:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}
.next b{font:600 13px/1.2 var(--font-ui);color:#fff}
@media (max-width:1000px){.next a{grid-template-columns:minmax(0,1fr) auto;align-items:center}.next a::after{content:"→";grid-column:2;grid-row:1/3;color:#B48CFF}}
.next span{font-size:12px;line-height:1.35;color:var(--fg-3)}
.dd{margin-top:36px}
@media (max-width:1000px){.lead .rule{grid-row:auto}.next{grid-column:auto;grid-template-columns:minmax(0,1fr);gap:0}
 .next a{grid-template-columns:minmax(0,1fr) auto;border-radius:0;border-inline:0;border-bottom:0;background:none;padding:14px 2px;min-height:48px}
 .next a:last-child{border-bottom:1px solid var(--stroke-1)}}
@media (max-width:640px){.doc-h{font-size:32px;letter-spacing:-.03em;line-height:1.05}.crumb{margin-bottom:8px}.doc-lede{font-size:15px;margin-top:10px}.lead{margin-top:24px}}
/* r3 primary action, plain heading, demoted next steps */
.rule .sec-h{font:600 22px/1.2 var(--font-ui);letter-spacing:-.01em;color:#fff;text-transform:none}
.rule>.eyebrow-doc{margin-top:14px;font:600 12px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.rule>p.rule-s{margin-top:10px}
.primary-link{display:inline-flex;gap:8px;align-items:center;margin-top:14px;font:600 16px/1.3 var(--font-ui);color:#B48CFF;min-height:32px}
.primary-link span{transition:transform .2s}
.primary-link:hover{color:#D2BCFF}.primary-link:hover span{transform:translateX(3px)}
.primary-link:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:3px;border-radius:4px}
.next a{background:none;border-color:rgba(255,255,255,.06)}
.next b{font-weight:500;color:var(--fg-2)}
@media (max-width:640px){.plate-wrap{order:0}.rule .sec-h{font-size:20px}.specs{margin-top:16px}}