:root{color-scheme:dark;font:16px/1.5 system-ui,sans-serif;background:#071522;color:#eaf3fa}*{box-sizing:border-box}body{margin:0;background:radial-gradient(at top right,#12374a,transparent 70%)}header{display:flex;gap:24px;padding:12px 28px;border-bottom:1px solid #284354}header .muted{margin-left:auto}a{color:#70e4b2}main{max-width:1360px;margin:auto;padding:20px 28px}h1{font-size:28px;margin:0 0 16px}h2{font-size:21px;margin:0}h3{font-size:18px;margin:0 0 12px}h4{font-size:14px;margin:0 0 8px}p{margin:8px 0 14px}nav,.buttons,.eval-actions{display:flex;gap:8px;flex-wrap:wrap}button,select,input{font:inherit;font-size:14px;border:1px solid #35576c;background:#132d3f;color:inherit;border-radius:7px;padding:9px 12px}button{cursor:pointer}button:hover{background:#21465b}button:disabled{opacity:.45;cursor:default}button.selected,#run{border-color:#70e4b2;background:#194339}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #70caff;outline-offset:2px}.intro{padding:18px 0;max-width:1000px}.intro p{margin-bottom:0;color:#bfced9}.workspace{display:grid;grid-template-columns:300px 1fr;gap:24px}.controls,.visual{background:#0b202f;border:1px solid #284354;border-radius:12px;padding:20px}.controls label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.controls input{width:100px}.muted,dt{color:#a8bdcc;font-size:14px}dl{margin:16px 0}dl>div{display:flex;justify-content:space-between;padding:6px 0}dd{margin:0;font-variant-numeric:tabular-nums}details{border-top:1px solid #284354;padding:12px 0}summary{cursor:pointer;color:#70e4b2}details p{font-size:14px}.example-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.network{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,1fr) minmax(160px,1fr);gap:16px;align-items:center;margin:20px 0}canvas{width:100%;max-width:210px;background:black;image-rendering:pixelated;display:block;border:1px solid #35576c}#pixel{min-height:42px;max-width:220px;font-variant-numeric:tabular-nums}.hidden{display:flex;align-items:center;gap:12px}.arrow{color:#70caff;font-size:24px}#neurons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.neuron{width:22px;height:22px;border-radius:50%;border:1px solid #6ebfff;background:#122b3c}.prob{display:grid;grid-template-columns:14px 1fr 40px;gap:6px;align-items:center;font-size:13px;margin:4px 0}.track{background:#152f40;height:10px;border-radius:3px;overflow:hidden}.fill{height:100%;background:#6ebfff}.prob.correct .fill{background:#70e4b2}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #284354;padding:16px 0}.metrics span{display:block;color:#a8bdcc;font-size:14px}.metrics strong{font-size:18px;font-variant-numeric:tabular-nums}.eval-actions{align-items:center}#status{min-height:24px;color:#70e4b2;font-size:14px}@media(max-width:950px){.workspace{grid-template-columns:260px 1fr;gap:14px}main{padding:16px}.network{grid-template-columns:1fr 1fr}.hidden{display:none}.controls,.visual{padding:14px}}@media(max-width:650px){.workspace{grid-template-columns:1fr}.example-top{align-items:flex-start;flex-direction:column}header{padding:12px 16px;gap:12px}header .muted{display:none}.metrics{grid-template-columns:1fr}nav button{flex:1}.network{gap:12px}}
:root [hidden]{display:none!important}.lesson-introduction{max-width:740px;margin:28px auto}.lesson-introduction h2{margin-bottom:16px}.lesson-introduction h3{margin-top:24px}.lesson-introduction p{color:#bfced9}.lesson-introduction #startDemo{margin-top:12px}
