:root{--bg:#fbfaf7;--fg:#1d2433;--mut:#5d6679;--card:#fff;--bd:#e5e2da;--acc:#4f46e5;--acc2:#0d9488;--soft:#eef0ff;--code:#f3f1ec}
@media(prefers-color-scheme:dark){:root{--bg:#0f1320;--fg:#e8eaf2;--mut:#9aa3b8;--card:#171c2e;--bd:#2a3150;--acc:#8b87ff;--acc2:#2dd4bf;--soft:#1d2342;--code:#1b2036}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}img{max-width:100%;height:auto}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
nav .wrap{display:flex;align-items:center;gap:20px;height:56px;overflow-x:auto;white-space:nowrap}
nav b{font-size:1.1rem;margin-right:auto}nav a{text-decoration:none;color:var(--mut);font-size:.95rem}nav a:hover{color:var(--fg)}
.hero{padding:72px 0 48px;text-align:center}
.hero h1{font-size:clamp(2.4rem,7vw,4rem);margin:0 0 12px;letter-spacing:-.03em}
.hero h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.25rem;color:var(--mut);max-width:680px;margin:0 auto 28px}
.btn{display:inline-block;padding:11px 22px;border-radius:10px;background:var(--acc);color:#fff;text-decoration:none;font-weight:600;margin:4px}
.btn.alt{background:transparent;color:var(--fg);border:1px solid var(--bd)}
section{padding:48px 0}section h2{font-size:2rem;margin:0 0 8px;letter-spacing:-.02em}
.lead{color:var(--mut);margin:0 0 28px;max-width:720px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:20px}
.card h3{margin:0 0 6px;font-size:1.05rem}.card p{margin:0;color:var(--mut);font-size:.95rem}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--acc);font-weight:700;margin-bottom:8px}
.stat{text-align:center}.stat b{display:block;font-size:2rem;color:var(--acc);letter-spacing:-.02em}.stat span{color:var(--mut);font-size:.9rem}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;justify-content:center}
.flow .card{flex:1 1 180px;text-align:center}.flow .arrow{align-self:center;font-size:1.6rem;color:var(--mut)}
.tok{display:inline-block;padding:3px 10px;margin:3px;border-radius:8px;background:var(--soft);color:var(--acc);font:600 .9rem ui-monospace,Menlo,monospace;transition:all .3s}
.tok.gone{opacity:.25;text-decoration:line-through}
.demo{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:22px;margin-top:12px}
.demo label{font-size:.9rem;color:var(--mut)}input[type=range]{width:100%;accent-color:var(--acc)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pill{border:1px solid var(--bd);background:transparent;color:var(--fg);padding:7px 14px;border-radius:99px;cursor:pointer;font:inherit;font-size:.9rem}
.pill.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.bar{display:grid;grid-template-columns:90px 1fr 60px;gap:10px;align-items:center;margin:6px 0;font-size:.92rem}
.bar i{display:block;height:16px;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .4s}
.fig{margin:20px 0}.fig img{border:1px solid var(--bd);border-radius:12px;background:#fff}.fig figcaption{color:var(--mut);font-size:.9rem;margin-top:6px}
table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{padding:9px 12px;border-bottom:1px solid var(--bd);text-align:left}
pre,code{background:var(--code);border-radius:6px;font:.88rem ui-monospace,Menlo,monospace}code{padding:1px 5px}
pre{padding:14px 16px;overflow-x:auto;line-height:1.5}pre code{padding:0;background:none}
.note{background:var(--soft);border-left:4px solid var(--acc);padding:12px 16px;border-radius:8px;color:var(--fg);margin:16px 0}
footer{border-top:1px solid var(--bd);padding:28px 0;color:var(--mut);font-size:.9rem;text-align:center}
.md{padding:32px 0}.md h1{font-size:2rem}.md h2{margin-top:2em;font-size:1.5rem}.md img{border-radius:10px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-top:24px}