:root{--bg:#070a10;--bg2:#0c121b;--panel:#101823cc;--line:#1f2d40;--txt:#dbe5f0;--mut:#8797ab;--acc:#3aa8ff;--acc2:#00e5c0;--warn:#ffd479;--pink:#ff7ab6;--r:16px;
--mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.8 var(--sans);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1000px 600px at 10% -10%,#123a6a55,transparent 60%),radial-gradient(800px 500px at 100% 10%,#00e5c022,transparent 60%),linear-gradient(#ffffff05 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/32px 100%}
a{color:var(--acc)}a:hover{color:var(--acc2)}
.skip{position:absolute;left:-999px}.skip:focus{left:1em;top:1em;z-index:99;background:var(--acc);color:#000;padding:.4em .8em;border-radius:8px}
nav.top{position:sticky;top:0;z-index:20;display:flex;gap:1.1em;align-items:center;padding:.7em 1.2em;background:#070a10d9;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
nav.top b{color:var(--acc2);font-family:var(--mono)}nav.top a{color:var(--mut);text-decoration:none;font-size:.88em}nav.top a:hover{color:var(--txt)}
main{max-width:1120px;margin:0 auto;padding:0 1.2em}
.hero{text-align:center;padding:5em 0 3em}
.hero .kicker{font-family:var(--mono);color:var(--acc2);letter-spacing:.25em;font-size:.8em;text-transform:uppercase}
.hero h1{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.2;margin:.4em 0;font-weight:800;background:linear-gradient(100deg,#fff 10%,var(--acc) 50%,var(--acc2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);max-width:720px;margin:0 auto}
.alpha{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.25em;margin:1.4em 0;padding:.6em 1em;border:1px solid var(--line);border-radius:12px;background:#0c121bb0;font:700 clamp(1.05rem,3vw,1.7rem) var(--mono)}
.alpha span{animation:glow 4s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes glow{0%,100%{color:var(--txt)}50%{color:var(--acc2);text-shadow:0 0 12px #00e5c099}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:2em}
.stat{border:1px solid var(--line);border-radius:12px;padding:.9em;background:var(--panel)}.stat b{display:block;font:800 1.6em var(--mono);color:var(--acc)}.stat span{color:var(--mut);font-size:.85em}
section{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1em,3vw,2.2em);margin:1.8em 0;box-shadow:0 20px 60px -30px #000,inset 0 1px 0 #ffffff08}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:0 0 .8em;display:flex;align-items:center;gap:.6em}
h2 .no{font:700 .7em var(--mono);color:#000;background:linear-gradient(135deg,var(--acc),var(--acc2));padding:.15em .55em;border-radius:8px}
h3{color:var(--acc2);font-size:1.12rem;margin:1.6em 0 .6em}
p,li{color:#c9d5e2}
code{font-family:var(--mono);color:var(--warn);font-size:.92em}
.tbl{overflow-x:auto;margin:1em 0;border-radius:12px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.93em}th,td{padding:.55em .8em;border-bottom:1px solid var(--line);text-align:center}th{background:#0e1825;color:var(--acc);font-weight:600;position:sticky;top:0}tr:hover td{background:#ffffff05}
.grid24{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
.cell{border:1px solid var(--line);border-radius:10px;text-align:center;padding:.5em 0;background:#0b111a;transition:transform .2s,border-color .2s}.cell:hover{transform:translateY(-3px);border-color:var(--acc)}
.cell b{display:block;font:800 1.55em var(--mono)}.cell small{color:var(--mut);font-family:var(--mono)}
.g0 b{color:var(--warn)}.g1 b{color:#7fd1ff}.g2 b{color:var(--acc2)}.g3 b{color:var(--pink)}
.legend{font-size:.85em;color:var(--mut)}.legend i{display:inline-block;width:.8em;height:.8em;border-radius:3px;margin:0 .3em 0 1em;vertical-align:-1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;align-items:center}
figure{margin:1.2em 0;text-align:center}figure svg{width:100%;height:auto;max-width:560px}figcaption{color:var(--mut);font-size:.85em;margin-top:.4em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:14px;padding:1.1em 1.2em;background:linear-gradient(180deg,#0f1824,#0b111a);transition:border-color .25s,transform .25s}.card:hover{border-color:#3aa8ff88;transform:translateY(-2px)}
.card h4{margin:.1em 0 .5em;color:var(--txt);font-size:1.02rem}.card .tag{font:600 .72em var(--mono);color:var(--acc2);letter-spacing:.1em}
.sin .card h4::before{content:"✕ ";color:var(--pink)}.sin .up{color:var(--acc2);font-size:.92em;border-top:1px dashed var(--line);margin-top:.6em;padding-top:.6em}
.note{border-left:4px solid var(--warn);background:#ffd4790d;padding:.8em 1.1em;border-radius:8px;color:#ffe7b0;font-size:.93em}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.9em .6em;margin:1.1em 0;border-radius:12px;background:linear-gradient(90deg,#0b1522,#0d1a28 50%,#0b1522);border:1px solid var(--line)}
.katex{font-size:1.08em;color:#eaf3ff}
pre[class*=language-]{border-radius:12px;border:1px solid var(--line);background:#0a0f17!important;font-size:.85em;max-height:540px}
/* tool */
.tool{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4em}
.tool label{font-size:.85em;color:var(--mut)}
.tool input{width:100%;font:600 1.25em var(--mono);padding:.6em .8em;border-radius:10px;border:1px solid var(--line);background:#060a10;color:var(--txt);outline:none;transition:border-color .2s,box-shadow .2s}
.tool input:focus{border-color:var(--acc);box-shadow:0 0 0 3px #3aa8ff33}
.btns{display:flex;flex-wrap:wrap;gap:.5em;margin:.7em 0}
button{font:600 .9em var(--sans);border:1px solid var(--line);background:#111b28;color:var(--txt);padding:.5em 1em;border-radius:10px;cursor:pointer;transition:background .2s,border-color .2s}button:hover{border-color:var(--acc);background:#15253a}button.pri{background:linear-gradient(135deg,#1d7fd8,#00b89a);border:0;color:#fff}
.out{font-family:var(--mono);font-size:.9em;background:#060a10;border:1px solid var(--line);border-radius:10px;padding:.8em 1em;word-break:break-all}
.out div{display:flex;justify-content:space-between;gap:1em;border-bottom:1px dashed #1f2d4088;padding:.25em 0}.out div span:first-child{color:var(--mut);white-space:nowrap}
.msg{min-height:1.4em;font-size:.88em}.msg.err{color:var(--pink)}.msg.ok{color:var(--acc2)}
.meter{height:10px;border-radius:99px;background:#1a2433;overflow:hidden;margin:.4em 0}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8797ab,var(--acc),var(--acc2));transition:width .5s}
.review .card{position:relative}.review .stamp{position:absolute;top:.9em;right:1em;font:700 .7em var(--mono);padding:.15em .5em;border-radius:6px;border:1px solid}
.stamp.syn{color:var(--acc2);border-color:var(--acc2)}.stamp.ph{color:var(--warn);border-color:var(--warn)}
.ph-box{border:1px dashed var(--warn);border-radius:10px;padding:.8em;color:var(--mut);font-size:.9em;background:#ffd47908}
footer{border-top:1px solid var(--line);margin-top:3em;padding:2.2em 1.2em;color:var(--mut);font-size:.88em}
footer .cols{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5em}
footer h5{color:var(--txt);margin:0 0 .5em;font-size:.95em}footer a{display:block;color:var(--mut);text-decoration:none;line-height:2}footer a:hover{color:var(--acc2)}
.sketch path,.sketch line,.sketch circle{stroke-linecap:round;stroke-linejoin:round}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400}.in .draw{animation:draw 2.4s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
.spin{transform-origin:center;transform-box:fill-box;animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:820px){.two,.tool{grid-template-columns:1fr}.hero{padding:3em 0 2em}}
@media (max-width:480px){body{font-size:15px}th,td{padding:.4em .45em}.grid24{grid-template-columns:repeat(6,1fr)}.cell b{font-size:1.2em}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.draw{stroke-dashoffset:0}}
@media print{
 body{background:#fff;color:#000;font-size:11pt}body::before,nav.top,.btns,.tool input,.skip,.no-print{display:none!important}
 section{background:#fff;border:1px solid #bbb;box-shadow:none;break-inside:avoid-page;page-break-inside:avoid}
 .reveal{opacity:1;transform:none}p,li,td,th,.card,.out{color:#000!important}.hero h1{color:#000;background:none}
 h2,h3,th,a{color:#0050a0!important}.card,.out,.katex-display,pre[class*=language-]{background:#fff!important;border-color:#bbb}
 code{color:#8a5a00}.katex{color:#000}svg text{fill:#000}a[href^=http]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}footer{color:#000}}