:root,[data-theme=dark]{--bg:#07070F;--glass:rgba(22,22,40,.62);--bd:rgba(255,255,255,.1);--code:rgba(8,8,18,.72);--ink:#ECECF8;--mute:#9C9CBA;--a1:#22D3EE;--a2:#A78BFA;--a3:#F472B6;--acc:#22D3EE;--onacc:#05141A;--kw:#F472B6;--st:#86EFAC;--nm:#FBBF24;--cm:#6F6F94;--fn:#67E8F9;--busy:#FBBF24;--idle:#34D399}
[data-theme=light]{--bg:#F6F4FF;--glass:rgba(255,255,255,.72);--bd:rgba(40,30,90,.14);--code:rgba(255,255,255,.85);--ink:#17142E;--mute:#5E5A80;--a1:#0891B2;--a2:#7C3AED;--a3:#DB2777;--acc:#6D28D9;--onacc:#fff;--kw:#C026A3;--st:#15803D;--nm:#B45309;--cm:#8A86A8;--fn:#0E7490;--busy:#B45309;--idle:#15803D}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.65 "IBM Plex Sans",system-ui,sans-serif;transition:background .4s,color .4s}
a{color:var(--a1);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
kbd{font:600 .8em "IBM Plex Mono",monospace;border:1px solid var(--bd);border-bottom-width:2px;border-radius:5px;padding:1px 7px;background:var(--code)}
#net,#spot{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#net{opacity:.85}[data-theme=light] #net{opacity:.45}
#spot{background:radial-gradient(520px circle at var(--x,50%) var(--y,30%),color-mix(in srgb,var(--a2) 16%,transparent),transparent 70%)}

.tb{position:sticky;top:12px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px auto 0;max-width:min(920px,92vw);padding:8px 10px 8px 20px;background:var(--glass);border:1px solid var(--bd);border-radius:99px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fn{font:600 13px "IBM Plex Mono",monospace;margin-right:auto}
.kern{display:inline-flex;align-items:center;gap:8px;font:12px "IBM Plex Mono",monospace;color:var(--mute)}
.kern i{width:9px;height:9px;border-radius:50%;background:var(--idle);box-shadow:0 0 10px var(--idle)}
.kern.busy i{background:var(--busy);box-shadow:0 0 10px var(--busy);animation:pulse .7s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.btns{display:flex;gap:6px}
.btns button{font:500 13px "IBM Plex Sans",sans-serif;color:var(--ink);background:none;border:1px solid var(--bd);border-radius:99px;padding:6px 14px;cursor:pointer;transition:.2s}
.btns button:hover{border-color:var(--a1);color:var(--a1)}

main{max-width:1040px;margin:0 auto;padding:30px 4vw 14vh}
.cell{scroll-margin-top:84px}
.row{display:grid;grid-template-columns:88px 1fr;align-items:start}
.row[hidden]{display:none}
.pr{font:13px/1.5 "IBM Plex Mono",monospace;color:var(--a1);text-align:right;padding:13px 14px 0 0;white-space:nowrap}
.po{color:var(--a3)}
.md{padding:6px 0 6px 88px}
.md h2{font-size:2rem;letter-spacing:-.03em;margin-top:56px;display:flex;align-items:center;gap:18px}
.md h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--a1),var(--a2) 40%,transparent)}
.hero{padding:0!important;min-height:80vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero h1{font-size:clamp(3.4rem,13.5vw,9.5rem);line-height:.95;letter-spacing:-.055em;background:linear-gradient(100deg,var(--ink) 0%,var(--a1) 38%,var(--a2) 68%,var(--a3) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.sub{font:500 1.2rem "IBM Plex Mono",monospace;color:var(--a1)}
.hero p:not(.sub):not(.tip){font-size:1.2rem;max-width:46ch;color:var(--mute)}
.toc{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.toc a{text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--bd);border-radius:99px;padding:6px 18px;backdrop-filter:blur(10px);transition:.2s}
.toc a:hover{border-color:var(--a1);box-shadow:0 0 24px -6px var(--a1);transform:translateY(-2px)}
.tip{color:var(--mute);font-size:.9rem}

.code{margin:6px 0;transition:filter .2s}
.sw{position:relative}
.src{position:relative;background:var(--code);border:1px solid var(--bd);border-radius:14px;padding:14px 84px 14px 18px;font:14px/1.65 "IBM Plex Mono",monospace;overflow-x:auto;white-space:pre;backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .3s}
.code:focus-within .src{border-color:var(--a1);box-shadow:0 0 0 1px var(--a1),0 0 44px -14px var(--a1)}
.code.running .src::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a1) 30%,transparent),transparent);animation:swp .9s linear infinite}
@keyframes swp{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.run{position:absolute;top:9px;right:9px;font:600 12px "IBM Plex Mono",monospace;color:var(--onacc);background:linear-gradient(90deg,var(--a1),var(--a2));border:0;border-radius:99px;padding:5px 14px;cursor:pointer;transition:transform .15s}
.run:hover{transform:scale(1.07)}
.tc{color:var(--cm);font-style:italic}.ts{color:var(--st)}.tk{color:var(--kw)}.tn{color:var(--nm)}.tf{color:var(--fn)}
.ob{padding:12px 0 20px;min-width:0}
.ob.rev{animation:wipe .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes wipe{from{clip-path:inset(0 0 100% 0);opacity:0}to{clip-path:inset(0 0 -40px 0);opacity:1}}
.ob p{max-width:64ch;margin-bottom:.7em;font-size:1.08rem}
.cap{color:var(--mute);font-size:.82rem;margin-top:8px}

.gr{display:block;width:100%;max-width:700px;height:auto;font:13px "IBM Plex Mono",monospace;background:var(--glass);border:1px solid var(--bd);border-radius:16px;padding:8px;backdrop-filter:blur(10px)}
.gr .ln{fill:none;stroke:url(#lg);stroke-width:1.6;opacity:.4;transition:opacity .2s,stroke-width .2s}
.gr.has .ln{opacity:.05}.gr.has .ln.on{opacity:1;stroke-width:2.8}
.nd{cursor:pointer;outline:none}.nd circle{fill:var(--a1);transition:r .2s}.nd.p circle{fill:var(--a3)}
.nd:hover circle,.nd:focus circle{r:8}.nd text{fill:var(--ink)}.nd .ct{fill:var(--mute)}
.grp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:20px}
.grp h4{font:600 13px "IBM Plex Mono",monospace;color:var(--mute);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0}
.chips li{border:1px solid var(--bd);background:var(--glass);border-radius:99px;padding:2px 13px;font-size:.88rem;transition:.2s}
.chips li:hover{border-color:var(--a2);color:var(--a2)}

.tl{list-style:none;position:relative;padding:0 0 0 30px;max-width:680px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:14px;width:2px;background:linear-gradient(var(--a1),var(--a2),var(--a3))}
.tl li{position:relative;padding-bottom:26px}
.tl li::before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--a1);box-shadow:0 0 14px var(--a1)}
.tl .yr{font:600 13px "IBM Plex Mono",monospace;color:var(--a1)}
.tl h3{font-size:1.25rem;line-height:1.3}.tl .org{color:var(--a2);font-weight:500}.tl .nt{color:var(--mute);margin-top:4px}

.pcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;perspective:1000px}
.pc{display:block;color:inherit;text-decoration:none;background:var(--glass);border:1px solid var(--bd);border-radius:18px;overflow:hidden;backdrop-filter:blur(10px);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s,border-color .2s,box-shadow .3s}
.pc:hover,.pc:focus-visible{border-color:var(--a1);box-shadow:0 24px 60px -24px var(--a1)}
.art svg{display:block;width:100%;height:150px}
.pb{padding:16px 18px 20px}
.pb .yr{font:13px "IBM Plex Mono",monospace;color:var(--mute)}
.pb h3{font-size:1.3rem;margin:2px 0 6px;letter-spacing:-.02em}
.pb p{color:var(--mute);font-size:.95rem;margin-bottom:14px}

.wg{display:grid;gap:14px;max-width:560px;background:var(--glass);border:1px solid var(--bd);border-radius:18px;padding:20px;backdrop-filter:blur(12px)}
.wg label{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;font:13px/2.1 "IBM Plex Mono",monospace;color:var(--mute)}
.wg input,.wg textarea{font:15px "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--code);border:1px solid var(--bd);border-radius:10px;padding:8px 12px;width:100%;transition:.2s}
.wg input:focus,.wg textarea:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)}
.wbtn{font:600 13px "IBM Plex Mono",monospace;color:var(--onacc);background:linear-gradient(90deg,var(--a1),var(--a2));border:0;border-radius:99px;padding:10px 26px;cursor:pointer;width:max-content;transition:transform .15s}
.wbtn:hover{transform:translateY(-2px)}
.bot{position:absolute;left:-9999px}
.st{min-height:1.5em;font-size:.92rem}
.lnk{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}

@media(max-width:720px){
.row{grid-template-columns:1fr}.pr{text-align:left;padding:8px 0 4px}
.md{padding-left:0}.src{padding-right:16px;padding-top:42px}
.wg label{grid-template-columns:1fr;line-height:1.5}.tb{border-radius:22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}