:root{color-scheme:dark;--bg:#101820;--panel:#17222d;--line:#2c3b48;--ink:#edf3f1;--muted:#9aaeb9;--mint:#9aecc3;--pink:#ec92af;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.6}button,select{font:inherit}button,select,a{touch-action:manipulation}button,select{border:1px solid #405260;color:var(--ink);background:#202f3b;border-radius:7px;padding:10px 15px}button{cursor:pointer;font-weight:600}button:hover{background:#304452;border-color:var(--mint)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}.shell{max-width:1500px;margin:auto;padding:0 42px}nav{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1.3px}nav a{font-size:16px;letter-spacing:-.3px;font-weight:700;text-decoration:none;color:var(--ink)}.local{letter-spacing:0;color:var(--muted)}.local i{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:8px}header{display:flex;justify-content:space-between;align-items:center;padding:38px 0 30px;gap:24px}.eyebrow{color:var(--mint);font:10px var(--mono);letter-spacing:1.6px;margin:0 0 12px}h1{font-family:Sora,Inter,sans-serif;font-size:clamp(30px,3.3vw,49px);line-height:1.2;letter-spacing:-2px;margin:0 0 17px;font-weight:600}h1 em{font-style:normal;color:var(--mint)}.intro{color:var(--muted);font-size:14px;margin:0;line-height:1.7}.architecture{text-align:right;flex:none}.architecture b{display:block;font:26px var(--mono);letter-spacing:-1px;margin-bottom:10px}.architecture b span{color:#5b7c79;padding:0 7px}.architecture>span{font-size:11px;color:var(--muted)}.toolbar{padding:17px 20px;display:flex;gap:20px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#1b2934;margin-bottom:22px;flex-wrap:wrap}.actions{display:flex;gap:8px}.primary{background:var(--mint);color:#123629;border-color:var(--mint);min-width:120px}.primary:hover{background:#c2fadd}.quiet{background:transparent;color:var(--muted)}.speed{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.speed select{font-size:12px;padding:10px}#status{font:11px var(--mono);margin-left:auto;color:var(--mint)}main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:23px;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}.panel-heading .eyebrow{margin-bottom:8px;color:var(--muted)}h2{font-size:18px;letter-spacing:-.5px;font-weight:600;line-height:1.4;margin:0}.badge{font:10px var(--mono);border:1px solid #3c4e59;padding:5px 8px;border-radius:4px;color:var(--muted);white-space:nowrap}.graph-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted);letter-spacing:.8px}.graph-labels b{display:block;font-size:11px;margin-top:4px;color:var(--ink);font-weight:400}.graph-labels span:nth-child(2){text-align:center}.graph-labels span:last-child{text-align:right}#network{width:100%;height:auto;display:block;margin:6px 0 12px}.legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:10px}.legend i{display:inline-block;vertical-align:middle;width:15px;height:2px;margin-right:5px}.positive{background:var(--mint)}.negative{background:var(--pink)}.legend .activation{height:7px;width:7px;border-radius:50%;background:var(--mint)}.caption{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 0}.inspector{display:flex;gap:18px;border-top:1px solid var(--line);margin-top:18px;padding-top:18px;align-items:center}.inspector canvas{width:88px;height:88px;flex:none;border-radius:3px;image-rendering:pixelated}.inspector label{font-size:12px;font-weight:600}.inspector select{padding:4px 6px;font-size:12px;margin-left:5px}.inspector p{font-size:11px;color:var(--muted);margin:7px 0;max-width:450px}.mono{font:10px var(--mono);color:var(--mint)}.drawing-wrap{width:min(100%,256px);height:auto;aspect-ratio:1;margin-inline:auto;position:relative;background:#101a23;border:1px dashed #526876;border-radius:8px;display:grid;place-items:center;overflow:hidden}.drawing-wrap:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#24343d55 1px,transparent 1px),linear-gradient(90deg,#24343d55 1px,transparent 1px);background-size:16px 16px;pointer-events:none}#draw{height:100%;width:auto;max-width:100%;aspect-ratio:1;position:relative;touch-action:none;cursor:crosshair}#draw-hint{position:absolute;pointer-events:none;text-align:center;font-size:14px;color:var(--muted)}#draw-hint span{display:block;margin-top:8px;font:14px var(--mono);letter-spacing:4px;color:#5c7280}.drawing-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin-top:7px}.text-button{background:none;border:0;padding:4px 0;font-size:11px;color:var(--mint)}.text-button:hover{background:none}.result{display:flex;align-items:center;gap:23px;padding:18px 0 12px}.result .eyebrow{font-size:9px;color:var(--muted);display:block;margin:0}.result strong{font:52px/1.2 var(--mono);color:var(--mint);display:block}.result p{font-size:12px;color:var(--muted);margin:0;max-width:230px}.scores{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.score{display:flex;flex-direction:column;align-items:center;font:11px var(--mono);color:var(--muted)}.bar-track{height:62px;width:100%;background:#101a23;display:flex;align-items:flex-end;border-radius:3px;overflow:hidden;margin-bottom:6px}.bar{width:100%;height:0;background:#547569}.score.winner{color:var(--mint)}.winner .bar{background:var(--mint)}.score small{font-size:8px;margin-top:3px}.warning{border-top:1px solid var(--line);padding-top:14px;margin:16px 0 0;font-size:11px;line-height:1.7;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics>div{border-left:1px solid var(--line);padding-left:15px}.metrics>div:first-child{border:0;padding:0}.metrics span{display:block;font-size:10px;color:var(--muted);min-height:32px}.metrics b{font:25px var(--mono);font-weight:400}.metrics>div:nth-child(3) b{color:var(--mint)}#history{width:100%;height:85px;display:block;margin-top:20px}.sample-intro{font-size:11px;color:var(--muted);margin:-10px 0 16px}.samples{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.sample-column{display:flex;flex-direction:column;gap:5px;align-items:stretch}.sample-column>span{text-align:center;font:11px var(--mono);color:var(--muted);margin-bottom:4px}.sample-button{border:1px solid #334652;background:#101a23;padding:2px;border-radius:4px;line-height:0;min-width:0}.sample-button canvas{width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}.sample-button.active{border-color:var(--mint);background:#29443b}.samples-panel .panel-heading{margin-bottom:20px}.learning-panel{align-self:start}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 0 30px;color:#7e949f;font:10px var(--mono)}
@media(min-width:1200px){.network-panel{grid-row:span 1}.learning-panel{min-height:300px}.samples-panel{min-height:300px}}
@media(max-width:1100px){.shell{padding:0 24px}.architecture{display:none}.toolbar{gap:12px}#status{margin-left:0}main{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)}.panel{padding:18px}.panel-heading{flex-wrap:wrap}.badge{font-size:9px}.metrics{grid-template-columns:repeat(2,1fr);row-gap:16px}.metrics>div:nth-child(3){border:0;padding:0}.samples{gap:3px}.sample-button{padding:1px}}
@media(max-width:760px){.shell{padding:0 16px}nav{height:60px}nav>span:not(.local){display:none}.local{font-size:10px}header{padding:28px 0}h1{letter-spacing:-1px}.intro br{display:none}.toolbar{padding:13px}.actions{width:100%;flex-wrap:wrap;gap:6px}.actions button{padding:10px;font-size:12px}.primary{min-width:100px}.speed{width:100%;justify-content:space-between}.speed select{flex:1}main{grid-template-columns:1fr;gap:16px}.panel{padding:18px}.panel-heading{margin-bottom:18px}.network-panel{order:0}.test-panel{order:1}.learning-panel{order:2}.samples-panel{order:3}.drawing-wrap{width:min(100%,256px)}.result{padding-top:20px}.bar-track{height:70px}.metrics{grid-template-columns:repeat(2,1fr)}.legend{gap:10px;font-size:9px}.inspector{gap:12px}.inspector canvas{width:76px;height:76px}.graph-labels{font-size:8px;letter-spacing:0}.sample-button{padding:2px}.samples{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 8px}.sample-button{min-height:44px}footer{flex-direction:column;gap:6px}.caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.network-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px;scrollbar-color:#52766b #101a23}
.network-scroll:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.network-scene{position:relative;min-width:780px;width:100%;aspect-ratio:900/570}
.network-scene #network{width:100%;height:100%;margin:0;display:block}
#neuron-controls{position:absolute;inset:0;pointer-events:none}
.neuron-hit{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto}
.neuron-hit:hover{background:#9aecc322;border:1px solid #9aecc3}
.neuron-hit:focus-visible{outline:2px solid #fff;outline-offset:0;background:#9aecc322}
.network-help{font-size:11px;color:var(--muted);margin:8px 0 14px}
@media(min-width:1300px){.network-scene{min-width:0}}

.precision-bar{display:flex;align-items:center;gap:24px;padding:16px 20px;margin:-7px 0 22px;border:1px solid var(--line);border-radius:10px;background:#14231f}
.precision-bar label{display:flex;gap:12px;align-items:center;flex:none;font-weight:600;font-size:12px}
.precision-bar select{font-size:12px}.precision-bar p{margin:0;font-size:11px;color:var(--muted)}.precision-bar #precision-note{color:var(--mint);margin-bottom:3px}
.weight-atlas{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.atlas-heading h3{font-size:14px;margin:0;font-weight:600}
.weight-strip{display:grid;grid-template-columns:minmax(0,1fr) 86px 95px;gap:14px;align-items:start}
.map-block>span{font-size:9px;color:var(--muted);display:block;margin-bottom:8px}.map-block b{font:9px var(--mono);display:block;color:#d4e5de}
.map-block canvas{display:block;width:100%;image-rendering:pixelated;cursor:crosshair;outline:1px solid #40545b;outline-offset:1px}.map-block canvas:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.map-image{position:relative}#weight-row{position:absolute;left:0;right:0;height:calc(100% / 24);outline:1px solid #eaffef99;pointer-events:none}
#weight-map-bias{height:12px}.atlas-legend{display:flex;align-items:center;gap:6px;margin-top:12px;font:9px var(--mono);color:var(--muted)}.atlas-legend i{width:80px;height:5px;background:linear-gradient(90deg,#ec92af,#172630,#9aecc3)}#map-selection{margin-left:auto;color:var(--mint)}
.parameter-detail{min-height:32px;font:10px/1.7 var(--mono);color:#c0d9d0;overflow-wrap:anywhere;margin:10px 0 0}#precision-difference{margin:0 0 12px}
@media(max-width:1100px){.precision-bar{align-items:flex-start;flex-direction:column;gap:8px}.weight-strip{grid-template-columns:minmax(0,1fr) 72px 80px;gap:10px}}
@media(max-width:760px){.precision-bar{padding:13px}.precision-bar label{width:100%;justify-content:space-between}.weight-strip{grid-template-columns:1fr 1fr;gap:14px}.input-map{grid-column:1/-1}#weight-map-output{width:96px;height:40px}#weight-map-bias{width:136px}.atlas-heading{flex-wrap:wrap}.atlas-legend{flex-wrap:wrap}#map-selection{width:100%;margin:4px 0 0}}