:root{--input:#4da3ff;--hidden:#35e39b;--output:#ff5c8a;--bias:#ffc24d;--pos:#5ce1ff;--neg:#ff9440;--fwd:#eafcff;--back:#c77dff;--panel-w:290px;color:#e9eeff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}@media (width<=1100px){:root{--panel-w:260px}}*{box-sizing:border-box}html,body{background:#070b18;height:100%;margin:0;overflow:hidden}@media (width<=800px){html,body{height:auto;overflow:auto}}body{-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.45}code,var,.mono,kbd{font-family:JetBrains Mono,ui-monospace,monospace;font-style:normal}code{color:#e9eeff;background:#8fb4ff1f;border-radius:5px;padding:1px 5px;font-size:.92em}kbd{border:1px solid #96afff21;border-radius:4px;padding:0 4px;font-size:11px}.muted{color:#7d88aa}.hint{color:#7d88aa;margin:10px 0 0;font-size:12px}.grow{flex:1}.t-input,.c-input{color:#4da3ff}.t-hidden,.c-hidden{color:#35e39b}.t-output,.c-output{color:#ff5c8a}.t-bias,.c-bias{color:#ffc24d}.t-pos,.c-pos{color:#5ce1ff}.t-neg,.c-neg{color:#ff9440}#stage{position:fixed;inset:0}#stage canvas{display:block}@media (width<=800px){#stage{height:58vh;position:relative}}.label-layer{pointer-events:none;position:absolute;inset:0}.hud{pointer-events:none;position:fixed;inset:0}.hud>*{pointer-events:auto;position:absolute}@media (width<=800px){.hud{pointer-events:auto;flex-direction:column;gap:12px;padding:12px 16px 24px;display:flex;position:static}.hud>*{position:static;width:auto!important;transform:none!important}}.brand{pointer-events:none;top:18px;left:18px}.brand h1{letter-spacing:-.01em;margin:0;font-size:19px;font-weight:700}.brand p{color:#b3bddb;margin:2px 0 0}@media (width<=800px){.brand{order:-2}.brand h1{font-size:17px}}.toolbar{gap:8px;display:flex;top:18px;right:18px}@media (width<=800px){.toolbar{order:-1}}body.mode-training .inference-only,body.mode-inference .training-only{display:none}.panel{-webkit-backdrop-filter:blur(14px)saturate(1.2);background:#0d1326bd;border:1px solid #96afff21;border-radius:14px;padding:14px 16px;box-shadow:0 10px 40px #00000059}.panel h2{letter-spacing:.1em;text-transform:uppercase;color:#7d88aa;margin:0 0 10px;font-size:11px;font-weight:600}.panel.left,.panel.right{width:var(--panel-w);animation:.5s cubic-bezier(.2,.8,.2,1) panel-in}@media (prefers-reduced-motion:reduce){.panel.left,.panel.right{animation:none}}.panel.left{top:84px;left:18px}.panel.right{top:66px;right:18px}@keyframes panel-in{0%{opacity:0;transform:translateY(8px)}}.btn{font:inherit;color:#e9eeff;cursor:pointer;background:#8fb4ff1a;border:1px solid #96afff21;border-radius:9px;padding:8px 12px;font-weight:600;transition:background .15s,border-color .15s,transform .1s}.btn:hover:not(:disabled){background:#8fb4ff33;border-color:#8fb4ff59}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{color:#061022;background:linear-gradient(#7fb0ff,#4d8dff);border-color:#0000}.btn.primary:hover:not(:disabled){background:linear-gradient(#92bdff,#5f99ff)}.btn.with-icon{text-align:left;justify-content:center;align-items:center;gap:7px;line-height:1.2;display:inline-flex}.btn .btn-icon{text-align:center;flex:none;width:1em;font-size:.85em}.btn .btn-icon[data-icon=play]{font-size:1.15em}.btn.ghost{background:0 0}.btn.wide{width:100%;margin-top:12px}.btn.chip{padding:4px 10px;font-size:14px}.btn:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #8fb4ff}.btn-row{gap:8px;display:flex}.field{margin-top:14px}.field .hint{margin-top:4px}.field-head{color:#b3bddb;justify-content:space-between;font-weight:500;display:flex}.field-head output{color:#e9eeff;font-family:JetBrains Mono,ui-monospace,monospace}input[type=range]{accent-color:#8fb4ff;width:100%;margin:8px 0 0}.switch{-webkit-backdrop-filter:blur(10px)saturate(1.2);cursor:pointer;color:#b3bddb;background:#0d1326bd;border:1px solid #96afff21;border-radius:99px;align-items:center;gap:6px;padding:6px 12px 6px 8px;display:flex}.switch input{appearance:none;cursor:pointer;background:#8fb4ff33;border-radius:99px;width:26px;height:15px;margin:0;transition:background .2s;position:relative}.switch input:after{content:"";background:#e9eeff;border-radius:50%;width:11px;height:11px;transition:transform .2s;position:absolute;top:2px;left:2px}.switch input:checked{background:#8fb4ff}.switch input:checked:after{transform:translate(11px)}.stat{margin-bottom:12px}.stat-head{color:#b3bddb;justify-content:space-between;align-items:baseline;display:flex}.stat-head small{color:#7d88aa}.stat-head b{color:#e9eeff;font:600 17px JetBrains Mono,ui-monospace,monospace}.progress{background:#8fb4ff1f;border-radius:99px;height:5px;margin-top:6px;overflow:hidden}.progress span{background:#8fb4ff;border-radius:99px;width:0;height:100%;transition:width .3s;display:block}.spark{cursor:crosshair;width:100%;height:34px;margin-top:4px;display:block}.spark-readout{color:#7d88aa;height:14px;font:11px JetBrains Mono,ui-monospace,monospace;display:block}.sample{border-top:1px solid #96afff21;gap:6px;padding-top:10px;display:grid}.sample div{color:#b3bddb;justify-content:space-between;display:flex}.sample b{color:#e9eeff;font-weight:600}.sample i{font-style:normal}#sample-guess.ok{color:#35e39b}#sample-guess.bad{color:#ff5c8a}#pad{aspect-ratio:1;touch-action:none;cursor:crosshair;background:radial-gradient(circle at 50% 40%,#121c38,#0a1124);border:1px dashed #8fb4ff4d;border-radius:10px;width:100%;margin-bottom:10px;display:block}.examples{color:#7d88aa;align-items:center;gap:6px;margin-top:10px;display:flex}.examples span{flex:1}.preview{border-top:1px solid #96afff21;align-items:center;gap:12px;margin-top:12px;padding-top:12px;display:flex}.preview canvas{width:72px;height:72px;image-rendering:pixelated;border-radius:6px;flex:none}.preview p{color:#7d88aa;margin:0;font-size:12px}.preview b{color:#b3bddb;display:block}.pred-result{align-items:center;gap:12px;min-height:56px;display:flex}.pred-result b{font-size:24px}.pred-icon{color:#ff5c8a;text-shadow:0 0 18px #ff5c8a99;font-size:34px}.bars{gap:8px;margin:12px 0;display:grid}.bar-row{color:#b3bddb;grid-template-columns:92px 1fr 46px;align-items:center;gap:8px;display:grid}.bar-row i{margin-right:6px;font-style:normal}.bar-row.win{color:#e9eeff;font-weight:600}.bar-row.win .bar-fill{background:#ff5c8a;box-shadow:0 0 10px #ff5c8a99}.bar-track{background:#8fb4ff1a;border-radius:99px;height:8px;overflow:hidden}.bar-fill{background:#ff5c8a73;border-radius:99px;width:0;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1);display:block}.bar-val{text-align:right;font-family:JetBrains Mono,ui-monospace,monospace}.explain{color:#b3bddb;margin:0}.formulas{width:calc(var(--panel-w) + 30px);bottom:18px;left:18px}.formulas dl{gap:3px;margin:0;display:grid}.formulas dl>div{color:#7d88aa;border-radius:7px;grid-template-columns:84px 1fr;gap:8px;margin:0 -8px;padding:4px 8px;transition:background .25s,color .25s;display:grid}.formulas dl>div.active{color:#e9eeff;background:#8fb4ff29}.formulas dt{font-weight:600}.formulas dd{white-space:nowrap;margin:0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.formulas var{color:inherit}.formulas small{color:#7d88aa}@media (width<=1100px){.formulas{display:none}}.legend{width:var(--panel-w);color:#b3bddb;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:6px 12px;padding:10px 14px;font-size:12px;display:grid;bottom:18px;right:18px}.legend span{white-space:nowrap;align-items:center;gap:6px;display:flex}@media (width<=1100px){.legend{display:none}}.dot{background:var(--c);width:10px;height:10px;box-shadow:0 0 8px var(--c);border-radius:50%;flex:none}.dot.small{width:6px;height:6px}.dot.diamond{border-radius:1px;transform:rotate(45deg)scale(.85)}.line{background:var(--c);border-radius:2px;flex:none;width:14px;height:3px}.caption{-webkit-backdrop-filter:blur(14px)saturate(1.2);width:min(640px, 100vw - 2 * var(--panel-w) - 4 * 18px);background:#0d1326bd;border:1px solid #96afff21;border-radius:14px;padding:10px 16px 12px;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #00000059}@media (width<=1100px){.caption{width:calc(100vw - 2 * var(--panel-w) - 4 * 18px)}}@media (width<=800px){.caption{order:0}}#steps{flex-wrap:wrap;gap:4px;margin:0 0 8px;padding:0;list-style:none;display:flex}#steps li{color:#7d88aa;border-radius:99px;align-items:center;gap:5px;padding:3px 9px 3px 4px;font-size:11.5px;font-weight:600;transition:background .25s,color .25s;display:flex}#steps li span{background:#8fb4ff1f;border-radius:50%;place-items:center;width:17px;height:17px;font-size:10px;display:grid}#steps li.active{color:#e9eeff;background:#8fb4ff2e}#steps li.active span{color:#061022;background:#8fb4ff}#caption-text{color:#b3bddb;min-height:42px;margin:0;font-size:14px}#caption-text b{color:#e9eeff}.label{white-space:nowrap;pointer-events:none;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.layer-title{text-align:center}.layer-title b{letter-spacing:.07em;text-transform:uppercase;font-size:11.5px;line-height:1.25;display:block}.layer-title span{color:#b3bddb;font-size:11.5px}.l-input b{color:#4da3ff}.l-hidden b{color:#35e39b}.l-output b{color:#ff5c8a}.l-card b{color:#b3bddb}.bias-label{color:#ffc24d;font-size:11.5px;font-weight:600}.bias-label span{color:#7d88aa;font-weight:400}@media (width<=800px){.layer-title span,.bias-label span{display:none}}.callout{color:#e9eeff;background:#0d1326b3;border:1px solid #96afff21;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:600}.output-label{background:#0d1326a6;border:1px solid #96afff21;border-radius:99px;align-items:center;gap:7px;padding:4px 10px 4px 8px;font-size:12.5px;transition:border-color .3s,box-shadow .3s;display:flex}.output-label i{color:#ff5c8a;font-style:normal}.output-label em{color:#b3bddb;text-align:right;min-width:42px;font-family:JetBrains Mono,ui-monospace,monospace;font-style:normal}.output-label.win{border-color:#ff5c8a;box-shadow:0 0 16px #ff5c8a73}.output-label.win em{color:#e9eeff}.tooltip{z-index:10;pointer-events:none;background:#090e1ef0;border:1px solid #8fb4ff40;border-radius:10px;max-width:290px;padding:10px 12px;position:fixed;box-shadow:0 12px 40px #00000080}.tooltip h4{margin:0 0 4px;font-size:13px}.tooltip p{color:#b3bddb;margin:3px 0 0}.tooltip p.muted{color:#7d88aa;margin-top:6px;font-size:12px}