:root{--paper:#EEF2F8;--surface:#FFFFFF;--panel:#F4F7FB;--grid:#E2E8F1;--ink:#13203A;--muted:#506079;--line:#CBD5E3;--wire:#2D5BA6;--signal:#B87503;--ok:#13896A;--bad:#C2384C;--c-dns:#0B8494;--c-tcp:#2D5BA6;--c-tls:#7548C0;--c-http:#B87503;--c-job:#B83E8C;--accent:#087B92;--accent-2:#2563EB;--raised:#FFFFFF;--glow:rgba(37,99,235,.08);--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r:14px;color-scheme:light}:root[data-theme=dark]{--paper:#050B18;--surface:#0D1B30;--panel:#081428;--grid:#13243B;--ink:#F5F9FF;--muted:#A9BDD5;--line:#233954;--wire:#60A5FA;--signal:#F2B33D;--ok:#3CC796;--bad:#F2667A;--c-dns:#3CC5D3;--c-tcp:#73A0EC;--c-tls:#AC8DF2;--c-http:#F2B33D;--c-job:#F07CC4;--accent:#22D3EE;--accent-2:#3B82F6;--raised:#11233D;--glow:rgba(59,130,246,.12);color-scheme:dark}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#050B18;--surface:#0D1B30;--panel:#081428;--grid:#13243B;--ink:#F5F9FF;--muted:#A9BDD5;--line:#233954;--wire:#60A5FA;--signal:#F2B33D;--ok:#3CC796;--bad:#F2667A;--c-dns:#3CC5D3;--c-tcp:#73A0EC;--c-tls:#AC8DF2;--c-http:#F2B33D;--c-job:#F07CC4;--accent:#22D3EE;--accent-2:#3B82F6;--raised:#11233D;--glow:rgba(59,130,246,.12);color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}body{margin:0;background:radial-gradient(ellipse at 75% -10%,var(--glow),transparent 50%),var(--paper);background-attachment:fixed;color:var(--ink);font:15px/1.6 var(--font)}h1,h2,h3{font-family:var(--font);margin:0;letter-spacing:-.01em}:where(a){color:var(--link)}:root{--link:var(--accent-2)}:root[data-theme=dark]{--link:#7DB3FF}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--link:#7DB3FF}}button,input,select{font:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent-2);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}.skip:focus{top:12px}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}kbd{font:600 11px/1 var(--mono);padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel);color:var(--muted)}.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-size:20px;font-weight:750;letter-spacing:-.6px;min-width:0}.brandmark{display:grid;place-items:center;width:34px;height:34px;margin-right:10px;border-radius:10px;background:linear-gradient(140deg,#22d3ee,#3b82f6);color:#04121c;font-size:16px;font-weight:800;flex:none}.brand-accent{color:var(--accent)}.brand-divider{margin:0 14px;color:var(--line);font-weight:400}.brand-lab{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap}.btns{display:flex;flex-wrap:wrap;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13px/1.1 var(--font);min-height:44px;padding:11px 16px;border-radius:10px;border:1px solid var(--accent-2);background:var(--accent-2);color:#fff;cursor:pointer;flex:1 1 auto;text-decoration:none;transition:filter .15s,background .15s}.btn:hover{filter:brightness(1.08)}.btn.ghost{background:transparent;color:var(--link)}.btn.small{min-height:34px;padding:7px 12px;font-size:12px;flex:none}.btn:disabled{opacity:.45;cursor:default;filter:none}.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}.seg button{flex:1;font:500 12.5px/1.25 var(--font);min-height:38px;padding:8px 6px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.seg button:first-child{border-left:0}.seg button[aria-pressed=true]{background:var(--accent-2);color:#fff}.seg button:disabled{opacity:.45;cursor:default}.seg-wrap{flex-wrap:wrap}.seg-wrap button{flex:1 1 45%;border-top:1px solid var(--line);margin-top:-1px}.theme-seg{flex:none;background:var(--surface)}.theme-seg button{flex:none;padding:6px 10px;font-size:11.5px;display:inline-flex;align-items:center;gap:5px}.theme-seg svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px}.toggle input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}.toggle input:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform .15s}.toggle input:checked{background:var(--accent-2)}.toggle input:checked:after{transform:translate(18px)}input[type=range]{width:100%;accent-color:var(--accent-2);margin:0;height:28px}input[type=range]:disabled{opacity:.4}.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stepper button{width:44px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 18px/1 var(--font);cursor:pointer}.stepper output{min-width:2ch;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}.intro{margin-top:6px}.intro h2{font-weight:700;font-size:clamp(21px,3vw,26px);line-height:1.2}.intro p{color:var(--muted);margin:8px 0 0;max-width:80ch;font-size:14px;line-height:1.75}.panel{display:grid;gap:18px;margin-top:18px}@media(min-width:1000px){.panel{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);align-items:start}}.col{display:grid;gap:16px;min-width:0}.stage,.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.box{padding:18px}.box h3{margin:0 0 10px;font-size:13.5px;font-weight:650}canvas{display:block;width:100%}.chart{height:116px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));border-top:1px solid var(--line);margin-bottom:-1px;margin-right:-1px}.stat{padding:12px 14px;box-shadow:inset -1px -1px 0 var(--line)}.stat b{display:block;font:650 20px/1.2 var(--font);font-variant-numeric:tabular-nums}.stat span{font-size:11.5px;color:var(--muted)}.stat b.bad,td.bad{color:var(--bad)}.stat b.warn{color:var(--signal)}.stat b.good,td.good{color:var(--ok)}.controls{display:grid;gap:18px}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:500;margin-bottom:6px}.ctl-head output{font-variant-numeric:tabular-nums;color:var(--wire);font-weight:600;white-space:nowrap}.hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}.tips{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.75}.tips li{margin:4px 0}.tips b{color:var(--ink);font-weight:600}.events{list-style:none;margin:0;padding:0;font-size:13px}.events li{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line)}.events li:first-child{border-top:0}.events time{font-variant-numeric:tabular-nums;color:var(--muted);flex:none}.events .empty{color:var(--muted)}.keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line);line-height:1.8}.keys i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.chart-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);padding:8px 12px 0}.chart-legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--muted)}.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}#netCanvas,#qCanvas,#rlCanvas{height:300px}#beCanvas{height:290px}#scCanvas{height:330px}#kCanvas{height:360px}#gCanvas{height:400px}#shCanvas{height:360px}#repCanvas{height:330px}#resCanvas{height:280px}#evCanvas{height:340px}#rtCanvas{height:330px}#capCanvas{height:260px}@media(min-width:1000px){#netCanvas{height:340px}#beCanvas{height:320px}#scCanvas{height:380px}#kCanvas{height:420px}#gCanvas{height:450px}#qCanvas,#rlCanvas{height:340px}#shCanvas{height:430px}#repCanvas{height:380px}#resCanvas{height:300px}#evCanvas{height:380px}#rtCanvas{height:360px}#capCanvas{height:280px}}.wf-track{height:16px;border-radius:5px;background:var(--panel);border:1px solid var(--line);overflow:hidden}.wf{display:flex;height:100%;transition:width .3s}.wf span{display:block;height:100%}.wf-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}ol.steps{list-style:none;margin:0;padding:0;counter-reset:s}ol.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:2px 8px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;transition:opacity .2s}ol.steps li:first-child{border-top:0}ol.steps li.step:before{counter-increment:s;content:counter(s);font-size:11px;font-weight:600;color:var(--muted);padding-top:2px}ol.steps li.info{grid-template-columns:1fr;color:var(--muted);font-style:italic}ol.steps .lbl{font-weight:600}ol.steps .lbl i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}ol.steps .ms{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}ol.steps .note{grid-column:2/4;color:var(--muted);font-size:12.5px}ol.steps.playing li.step{opacity:.4}ol.steps.playing li.step.done{opacity:1}ol.steps li.now{opacity:1!important;background:var(--panel);margin:0 -18px;padding:8px 18px}.v3d-wrap{position:relative;height:420px;background:radial-gradient(ellipse at center,var(--glow),transparent 70%),var(--panel);touch-action:none;overflow:hidden}@media(min-width:1000px){.v3d-wrap{height:520px}}.v3d-wrap canvas{width:100%;height:100%;cursor:grab}.v3d-labels{position:absolute;inset:0;pointer-events:none}.v3d-labels button{position:absolute;left:0;top:0;pointer-events:auto;font:600 11px/1 var(--font);padding:4px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap;cursor:pointer;opacity:.94}.v3d-labels button.sel{border-color:var(--wire);background:var(--wire);color:var(--surface);opacity:1}.v3d-hint{position:absolute;left:10px;bottom:8px;font-size:11.5px;color:var(--muted);pointer-events:none}.v3d-err{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}.concept h3{font:650 19px/1.25 var(--font);margin:0 0 6px}.concept .what{margin:0 0 10px}.concept .trade{border-left:3px solid var(--signal);padding:2px 0 2px 10px;font-size:13.5px;margin-top:12px}.lesson{border-left:4px solid var(--wire)}.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.lesson-n{font-size:11.5px;font-weight:650;color:var(--wire);text-transform:uppercase;letter-spacing:.07em}.dots{display:flex;gap:5px;align-items:center}.dots button{width:10px;height:10px;border-radius:5px;border:0;background:var(--line);padding:0;cursor:pointer;transition:width .2s}.dots button.on{background:var(--wire);width:22px}.lesson h3{font:650 20px/1.25 var(--font);margin:0 0 6px}.lesson p{margin:0 0 12px}.lesson code,.calc code{font-family:var(--mono);font-size:.88em;background:var(--panel);border:1px solid var(--line);padding:0 5px;border-radius:4px;color:var(--ink)}.lesson-do{background:var(--panel);border:1px dashed var(--signal);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px}.lesson-do b{color:var(--signal)}.pulse{animation:pulse 1.5s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--signal) 70%,transparent)}to{box-shadow:0 0 0 12px transparent}}.conf-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.conf-head h3{margin:0}.conf{font:11.5px/1.6 var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 0;margin:0;overflow-x:auto;color:var(--ink);max-height:560px}.conf .ln{display:block;padding:0 12px;white-space:pre;min-height:1.6em}.conf .ln.hl{background:color-mix(in srgb,var(--signal) 16%,transparent);box-shadow:inset 3px 0 0 var(--signal)}.conf .cm{color:var(--muted)}.bars{display:grid;gap:7px;font-size:12.5px}.bars .row{display:grid;grid-template-columns:62px 1fr 42px;gap:8px;align-items:center}.bars .bar{height:10px;border-radius:3px;background:var(--panel);overflow:hidden;border:1px solid var(--line)}.bars .bar span{display:block;height:100%}.bars b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}.lookup{padding:12px 14px;border-top:1px solid var(--line)}.lookup label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}.lookup-row{display:flex;gap:8px}.lookup input{flex:1;min-width:0;font:500 15px var(--mono);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink)}.lookup .btn{flex:none}.calc{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.65;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.calc b{color:var(--ink)}.cmp-note{font-size:13px;color:var(--muted);margin:10px 0 0}.quorum-math .qm-eq{font:700 22px/1.2 var(--font);font-variant-numeric:tabular-nums;margin-bottom:6px}.quorum-math .qm-eq.good{color:var(--ok)}.quorum-math .qm-eq.warn{color:var(--signal)}.quorum-math p{margin:0 0 8px;font-size:13.5px}.table-wrap{overflow-x:auto;margin:0 -4px}table.cmp{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}table.cmp th,table.cmp td{text-align:right;padding:8px 6px;border-top:1px solid var(--line);white-space:nowrap}table.cmp thead th{border-top:0;color:var(--muted);font-weight:600;vertical-align:bottom;font-size:11.5px}table.cmp th[scope=row],table.cmp thead th:first-child{text-align:left}table.cmp small{font-weight:400}ol.formula{margin:0;padding-left:20px;font-size:13.5px;line-height:1.7;color:var(--muted);font-variant-numeric:tabular-nums}ol.formula li{margin:5px 0;padding-left:4px}ol.formula b{color:var(--ink)}.lat{display:grid;gap:6px;font-size:12.5px}.lat .row{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 60px;gap:8px;align-items:center}.lat .bar{height:8px;border-radius:3px;background:var(--panel);overflow:hidden;border:1px solid var(--line)}.lat .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--signal),var(--bad))}.lat b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}@media(max-width:640px){.box{padding:15px}.stat{padding:10px 12px}.stat b{font-size:18px}.seg button{font-size:12px;padding:8px 4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.pulse{animation:none;outline:2px solid var(--signal);outline-offset:2px}}.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 32px)}.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px -12px #00000073;font-size:13.5px;max-width:380px;animation:toastIn .25s cubic-bezier(.2,.9,.3,1.2);pointer-events:auto}.toast .ico{color:var(--accent);margin-top:2px}.toast span{display:flex;flex-direction:column;gap:2px}.toast small{color:var(--muted);font-size:12px}.toast.out{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}@keyframes toastIn{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}.confetti{position:fixed;inset:0;pointer-events:none;z-index:199;overflow:hidden;contain:strict}.confetti i{position:absolute;top:-20px;border-radius:2px;animation:confetti linear forwards}@keyframes confetti{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}@media(prefers-reduced-motion:reduce){.toast{animation:none}}
