:root{--mnist-page:#f5f7fb;--mnist-card:#fff;--mnist-soft:#f8f9fc;--mnist-accent-soft:#eef2ff;--mnist-accent-border:#c7d2fe}@media(prefers-color-scheme:dark){:root{--mnist-page:#0f1420;--mnist-card:#151c2a;--mnist-soft:#1a2333;--mnist-accent-soft:#202a47;--mnist-accent-border:#3d4f7e}}body{background:var(--mnist-page)}.mnist-app{display:grid;gap:24px;max-width:1120px;margin:0 auto;padding:24px}.mnist-app h1,.mnist-app h2,.mnist-app p{margin:0}.mnist-app h1{font-size:clamp(24px,3vw,30px);font-weight:750;letter-spacing:-0.035em;line-height:1.15}.mnist-app h2{font-size:19px;font-weight:720;letter-spacing:-0.02em}.figure-panel,.demo-section{padding:24px;border:1px solid var(--figure-border);border-radius:16px;background:var(--mnist-card)}.figure-panel{gap:20px}.section-heading,.chart-header{display:flex;gap:24px;align-items:center;justify-content:space-between}.eyebrow{margin-bottom:5px!important;color:var(--figure-accent);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.section-description{margin-top:7px!important;color:var(--figure-muted);font-size:12px;line-height:1.5}.status{display:inline-flex;flex:0 1 auto;gap:8px;align-items:center;max-width:48%;padding:8px 11px;border:1px solid var(--mnist-accent-border);border-radius:999px;background:var(--mnist-accent-soft);color:var(--figure-muted);font-size:11px;font-weight:650;line-height:1.2;text-align:right}.status::before{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--figure-accent);content:""}.status[data-state="error"]{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.status[data-state="error"]::before{background:#dc2626}.settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:18px;border:1px solid var(--figure-border);border-radius:12px;background:var(--mnist-soft)}.settings-grid .figure-control{min-width:0;gap:7px}.settings-grid .figure-control label{color:var(--figure-text);font-size:11px;font-weight:700;letter-spacing:.01em}.settings-grid .figure-control input:not([type="range"]),.settings-grid .figure-control select{width:100%;min-height:42px;padding:8px 11px;border-radius:8px;box-shadow:none;font-size:13px;outline:0}.settings-grid .figure-control input:hover,.settings-grid .figure-control select:hover{border-color:var(--figure-muted)}.settings-grid .figure-control input:focus-visible,.settings-grid .figure-control select:focus-visible,.figure-button:focus-visible,.chart-tab:focus-visible{border-color:var(--figure-accent);outline:2px solid var(--mnist-accent-border);outline-offset:2px}.settings-grid .figure-control input[type="range"]{width:100%;margin:7px 0}.settings-grid small{color:var(--figure-muted);font-size:10px;line-height:1.4}.span-2{grid-column:span 2}.actions{display:flex;gap:8px;align-items:end}.actions .figure-button{min-height:42px;flex:1}.figure-button{border-radius:8px;box-shadow:none;font-size:12px;transition:border-color 120ms ease,background-color 120ms ease,color 120ms ease}.figure-button:not([data-primary="true"]):hover:not(:disabled){border-color:var(--figure-muted);background:var(--mnist-soft);filter:none}.figure-button[data-primary="true"]:hover:not(:disabled){background:#1d4ed8;filter:none}.figure-button:disabled{cursor:not-allowed;opacity:.4}.five-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.five-metrics .figure-metric{min-height:76px;padding:13px 14px;border-radius:10px;background:var(--mnist-card)}.five-metrics .figure-metric span{font-size:9px;letter-spacing:.055em}.five-metrics .figure-metric strong{margin-top:7px;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-0.025em}.chart-card{padding:18px;border:1px solid var(--figure-border);border-radius:12px;background:var(--mnist-card)}.chart-header p{margin-top:4px;color:var(--figure-muted);font-size:11px}.segmented{display:flex;gap:3px;padding:3px;border:1px solid var(--figure-border);border-radius:9px;background:var(--mnist-soft)}.chart-tab{min-height:32px;padding:0 11px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--figure-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:750}.chart-tab:hover:not(.active){color:var(--figure-text)}.chart-tab.active{border-color:var(--mnist-accent-border);background:var(--mnist-accent-soft);color:var(--figure-accent)}#metrics-chart{display:block;width:100%;height:300px;margin-top:14px;border:1px solid var(--figure-border);border-radius:9px;background:var(--figure-bg)}.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;min-height:19px;margin-top:10px;color:var(--figure-muted);font-size:10px}.legend-item{display:inline-flex;gap:6px;align-items:center}.legend-swatch{width:12px;height:3px;border-radius:2px}.demo-section{display:grid;gap:20px}.drawing-layout{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:24px;align-items:stretch}#drawing-board{display:block;width:min(100%,280px);height:auto;border:1px solid var(--figure-border);border-radius:12px;background:#000;cursor:crosshair;touch-action:none}.drawing-layout .figure-note{max-width:280px;margin-top:9px;font-size:10px;line-height:1.5}.prediction-panel{min-width:0;padding:20px;border:1px solid var(--figure-border);border-radius:12px;background:var(--mnist-soft)}.prediction-label{color:var(--figure-muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.prediction{display:block;margin:4px 0 16px;color:var(--figure-text);font-size:clamp(25px,5vw,42px);font-weight:780;letter-spacing:-0.04em}.probabilities{display:grid;gap:7px}.probability-row{display:grid;grid-template-columns:18px 1fr 48px;gap:9px;align-items:center;color:var(--figure-muted);font-size:10px;font-variant-numeric:tabular-nums}.probability-row[data-best="true"]{color:var(--figure-text);font-weight:800}.probability-track{height:6px;overflow:hidden;border-radius:999px;background:var(--figure-border)}.probability-fill{height:100%;border-radius:inherit;background:var(--figure-accent);transition:width 160ms ease}.probability-value{text-align:right}@media(max-width:820px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.five-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.mnist-app{gap:14px;padding:12px}.figure-panel,.demo-section{padding:17px;border-radius:12px}.section-heading,.chart-header{align-items:flex-start}.section-heading{display:grid}.chart-header{display:grid;gap:12px}.status{max-width:100%;text-align:left}.settings-grid{grid-template-columns:1fr;padding:14px}.span-2{grid-column:auto}.actions{margin-top:2px}.five-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.five-metrics .figure-metric{min-height:70px}.five-metrics .figure-metric:last-child{grid-column:1 / -1}.settings-grid small,.drawing-layout .figure-note{font-size:11px}.chart-card{padding:14px}.segmented{width:100%}.chart-tab{flex:1}.drawing-layout{grid-template-columns:1fr}#metrics-chart{height:250px}}