:root{--text:#6b6375;--text-h:#08060d;--muted:#7b7285;--bg:#fff;--border:#e5e4e7;--button-bg:#f6f5f8;--accent:#2563eb;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}html{scrollbar-gutter:stable}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--muted:#a1a1aa;--bg:#16171d;--border:#2e303a;--button-bg:#20222b;--accent:#60a5fa}}#root{min-height:100svh}body{background:var(--bg);margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:0;margin:0;font-size:42px;line-height:1.05}@media (width<=1024px){h1{font-size:32px}}h2{letter-spacing:0;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}.app-shell{box-sizing:border-box;grid-template-rows:auto minmax(0,1fr);min-height:100svh;padding:24px;display:grid}.app-header{border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);justify-content:center;align-items:center;height:28px;margin-bottom:16px;padding-bottom:16px;display:flex}.app-header h1{color:var(--accent);letter-spacing:.06em;text-align:center;text-transform:uppercase;white-space:nowrap;margin:0;font-size:clamp(14px,1.5vw,18px);font-weight:700;line-height:1.2}.training-layout{grid-template-columns:minmax(240px,300px) minmax(520px,1fr) minmax(220px,280px);align-items:stretch;gap:24px;width:100%;min-height:0;display:grid}.controls-panel,.stats-panel{flex-direction:column;gap:5px;min-width:0;display:flex}.visualization-panel{min-width:0;display:flex}.visualization-panel>.mlp-visualization-section{flex:1}.heading-group{flex-direction:column;gap:8px;display:flex}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:13px;font-weight:700}.actions{flex-wrap:wrap;gap:12px;display:flex}.training-form{grid-template-columns:1fr;align-items:stretch;gap:14px;display:grid}.training-form label{flex-direction:column;gap:6px;min-width:0;display:flex}.training-form label span{color:var(--muted);font-size:13px}.training-form input:not([type=radio]):not([type=range]),.training-form select{box-sizing:border-box;border:1px solid var(--border);min-width:0;min-height:40px;color:var(--text-h);background:var(--bg);font:14px/1 var(--sans);border-radius:6px;padding:0 10px}.training-form input:not([type=radio]):not([type=range]):focus,.training-form select:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb, var(--accent) 25%, transparent);outline-offset:1px}.training-form .actions{grid-column:1/-1}.training-form fieldset{border:0;min-width:0;margin:0;padding:0}.training-form legend{color:var(--muted);margin-bottom:6px;font-size:13px}.radio-field{flex-direction:column;gap:8px;display:flex}.training-form .radio-option{box-sizing:border-box;border:1px solid var(--border);background:color-mix(in srgb, var(--button-bg) 62%, var(--bg));cursor:pointer;border-radius:6px;flex-direction:row;align-items:center;gap:8px;min-height:48px;padding:8px 10px;transition:border-color .14s,background .14s}.training-form .radio-option:hover:not(:has(input:disabled)){border-color:color-mix(in srgb, var(--accent) 55%, var(--border))}.training-form .radio-option:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--button-bg))}.training-form .radio-option:has(input:disabled){cursor:not-allowed;opacity:.6}.training-form .radio-option input{accent-color:var(--accent);margin:0}.training-form .radio-option span{color:var(--text-h);font-size:14px}.number-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.training-form .actions button,.test-panel .actions button{border-color:color-mix(in srgb, var(--accent) 45%, var(--border));width:100%;min-height:46px;color:var(--text-h);background:color-mix(in srgb, var(--accent) 20%, var(--button-bg));letter-spacing:.01em;font-size:15px}.training-form .actions button:hover:not(:disabled),.test-panel .actions button:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 28%, var(--button-bg))}.range-field>span{justify-content:space-between;align-items:center;gap:12px;display:flex}.range-field strong{color:var(--text-h);font-size:14px;font-weight:700}.training-form input[type=range]{width:100%;min-height:40px;accent-color:var(--accent);margin:0}.training-form input[type=range]:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 25%, transparent);outline-offset:3px}button{border:1px solid var(--border);min-height:40px;color:var(--text-h);background:var(--button-bg);font:600 14px/1 var(--sans);cursor:pointer;border-radius:6px;padding:0 14px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{cursor:not-allowed;opacity:.6}.phase-navigation{z-index:25;box-sizing:border-box;border:1px solid var(--border);background:color-mix(in srgb, var(--button-bg) 86%, var(--bg));border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:min(360px,100vw - 40px);padding:4px;display:grid;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 12px 28px #0f172a29}.phase-navigation button{min-width:0;min-height:44px;color:var(--text-h);opacity:.58;background:0 0;border:0;border-radius:8px;place-items:center;transition:background .16s,opacity .16s;display:grid;position:relative;overflow:hidden}.phase-navigation button:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 10%, transparent);opacity:.82;border-color:#0000}.phase-navigation button[aria-current=page]{cursor:default;color:var(--text-h);background:color-mix(in srgb, var(--accent) 18%, var(--button-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, var(--border));opacity:1}.phase-navigation button span{z-index:1;position:relative}.phase-navigation button:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent);outline-offset:2px}.testing-layout{justify-content:flex-start;align-items:flex-start;gap:24px;min-height:0;display:flex;position:relative}.test-panel{flex-direction:column;gap:24px;width:min(100%,420px);display:flex}.test-panel .actions{margin-top:0}.test-results{flex-direction:column;flex:0 0 240px;gap:8px;width:min(100%,240px);display:flex}.test-result-metrics{display:grid}.test-result-metric{--test-result-color:var(--muted);border-bottom:1px solid var(--border);gap:6px;padding:16px 0;display:grid}.test-result-metric:first-child{padding-top:8px}.test-result-metric:last-child{border-bottom:0}.test-result-metric span{color:var(--muted);font-size:13px}.test-result-metric strong{overflow-wrap:anywhere;width:max-content;max-width:100%;color:var(--test-result-color);background:linear-gradient(135deg, color-mix(in srgb, var(--test-result-color) 74%, #fff), var(--test-result-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:700}.test-session-details{border:1px solid var(--border);display:grid}.test-session-details>div{border-bottom:1px solid var(--border);min-width:0;padding:16px}.test-session-details>div:last-child{border-bottom:0}.test-session-details span{color:var(--muted);margin-bottom:6px;font-size:13px;display:block}.test-session-details strong{overflow-wrap:anywhere;color:var(--text-h);font-size:18px;font-weight:700;display:block}.confusion-matrix{flex-direction:column;flex:1;gap:14px;min-width:0;max-width:960px;display:flex}.confusion-matrix h2{margin:0}.confusion-matrix-empty{border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:20px}.confusion-matrix-scroll{border:1px solid var(--border);background:color-mix(in srgb, var(--button-bg) 60%, var(--bg));border-radius:8px;min-width:0;max-height:calc(100svh - 150px);overflow:auto}.confusion-matrix table{border-spacing:12px;width:100%;min-width:max-content;font-family:var(--mono)}.confusion-matrix th{max-width:clamp(64px,9vw,130px);color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;text-align:center;padding:0 6px;font-size:14px;font-weight:700;overflow:hidden}.confusion-matrix thead th{z-index:2;background:color-mix(in srgb, var(--button-bg) 60%, var(--bg));position:sticky;top:0}.confusion-matrix tbody th{z-index:1;background:color-mix(in srgb, var(--button-bg) 60%, var(--bg));text-align:left;position:sticky;left:0}.confusion-matrix-corner{white-space:nowrap;left:0;z-index:3!important;color:var(--muted)!important;text-overflow:clip!important;overflow:visible!important}.confusion-matrix td{min-width:clamp(56px,8vw,92px);height:clamp(56px,8vw,92px);color:var(--muted);background:color-mix(in srgb, var(--button-bg) 75%, var(--bg));text-align:center;border:1px solid #0000;border-radius:8px;padding:6px}.confusion-matrix td strong,.confusion-matrix td span{display:block}.confusion-matrix td strong{color:var(--text-h);font-size:clamp(19px,2.2vw,27px);line-height:1.1}.confusion-matrix td span{margin-top:6px;font-size:clamp(12px,1.5vw,16px);font-weight:700}.confusion-matrix td[data-result=correct]{border-color:color-mix(in srgb, #16a34a 45%, var(--border));color:#15803d;background:color-mix(in srgb, #16a34a 20%, var(--button-bg))}.confusion-matrix td[data-result=correct] strong{color:#16a34a}.confusion-matrix td[data-result=incorrect]{border-color:color-mix(in srgb, #b91c1c 45%, var(--border));color:#b91c1c;background:color-mix(in srgb, #b91c1c 16%, var(--button-bg))}.confusion-matrix td[data-result=incorrect] strong{color:#b91c1c}.testing-layout .status-grid{border:1px solid var(--border);grid-template-columns:1fr;display:grid}.status-grid>div{border-bottom:1px solid var(--border);min-width:0;padding:16px}.status-grid>div:last-child{border-bottom:0}.status-grid span,.details span{color:var(--muted);margin-bottom:6px;font-size:13px;display:block}.status-grid strong{overflow-wrap:anywhere;color:var(--text-h);font-size:18px;font-weight:700;display:block}.status-grid .connection-stat strong{align-items:center;gap:8px;display:flex}.connection-status-dot{background:#ea580c;border-radius:50%;flex:none;width:10px;height:10px;box-shadow:0 0 0 3px #ea580c24}.connection-stat[data-state=connected] strong{color:#16a34a}.connection-stat[data-state=connected] .connection-status-dot{background:#16a34a;box-shadow:0 0 0 3px #16a34a24}.connection-stat:not([data-state=connected]) strong{color:#ea580c}.connection-stat[data-state=error] strong{color:#dc2626}.connection-stat[data-state=error] .connection-status-dot{background:#dc2626;box-shadow:0 0 0 3px #dc262624}.status-grid .epoch-progress-card{gap:10px;display:grid}.epoch-progress-heading{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.status-grid .epoch-progress-heading span{margin:0}.status-grid .epoch-progress-heading strong{flex-shrink:0;font-size:15px}.epoch-progress-bar{background:color-mix(in srgb, var(--border) 72%, var(--button-bg));border-radius:999px;height:7px;overflow:hidden}.epoch-progress-bar>span{border-radius:inherit;background:var(--accent);height:100%;transition:width .18s;display:block}.epoch-progress-card p{color:var(--muted);margin:0;font-size:13px}.status-grid .topology-card{gap:10px;display:grid}.topology-specs{flex-wrap:wrap;gap:8px;display:flex}.status-grid .topology-spec,.status-grid .topology-empty{border:1px solid var(--border);color:var(--muted);background:color-mix(in srgb, var(--button-bg) 76%, var(--bg));border-radius:5px;align-items:baseline;margin:0;padding:9px 12px;font-size:15px;line-height:1;display:inline-flex}.status-grid .topology-spec strong{color:var(--text-h);font-size:inherit;margin-left:4px;display:inline}.reacting-text{border-block:1px solid var(--border);padding:20px 0}.reacting-text h2{margin-bottom:8px}.reacting-text p,.details p{overflow-wrap:anywhere}.details{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.details>div{min-width:0}.toast-stack{z-index:30;pointer-events:none;flex-direction:column;gap:10px;width:min(360px,100vw - 40px);display:flex;position:fixed;bottom:24px;right:24px}.training-toast{--toast-accent:#2563eb;--toast-bg:#f8fbff;box-sizing:border-box;border:1px solid var(--toast-accent);color:#111827;background:var(--toast-bg);opacity:1;overflow-wrap:anywhere;pointer-events:auto;border-radius:6px;min-height:92px;padding:16px 42px 16px 16px;transition:opacity .22s;position:relative;box-shadow:0 12px 28px #0f172a1f}.training-toast[data-closing=true]{opacity:0}.training-toast[data-tone=danger]{--toast-accent:#dc2626;--toast-bg:#fef2f2}.training-toast[data-tone=success]{--toast-accent:#16a34a;--toast-bg:#f0fdf4}.training-toast[data-tone=warning]{--toast-accent:#ca8a04;--toast-bg:#fefce8}.training-toast[data-tone=orange]{--toast-accent:#ea580c;--toast-bg:#fff7ed}.training-toast[data-tone=info]{--toast-accent:#2563eb;--toast-bg:#eff6ff}.training-toast strong{color:#111827;padding-right:4px;font-size:15px;line-height:1.25;display:block}.training-toast p{color:#374151;margin-top:8px;font-size:14px;line-height:1.35}.toast-close{color:#111827;width:28px;min-width:28px;min-height:28px;font:700 16px/1 var(--sans);background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid;position:absolute;top:8px;right:8px}.toast-close:hover:not(:disabled){background:#11182714;border-color:#0000}@media (width<=1080px){.training-layout{grid-template-columns:minmax(220px,280px) minmax(420px,1fr)}.stats-panel{grid-column:1/-1}.testing-layout{align-items:stretch;min-height:0;display:flex}.status-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.status-grid>div{border-right:1px solid var(--border);border-bottom:0}.status-grid>div:last-child{border-right:0}.toast-stack{bottom:20px;right:20px}}@media (width<=760px){.app-shell{padding:20px}.app-header{height:26px;margin-bottom:12px}.app-header h1{font-size:clamp(12px,3.5vw,16px)}.phase-navigation{width:min(340px,100vw - 32px);bottom:16px}.training-layout,.status-grid,.details{grid-template-columns:1fr}.testing-layout{flex-direction:column}.test-panel{width:100%}.test-results{flex-basis:auto;width:100%}.confusion-matrix{width:100%}.status-grid>div{border-right:0;border-bottom:1px solid var(--border)}.status-grid>div:last-child{border-bottom:0}}.mlp-visualization-section{flex-direction:column;gap:14px;min-width:0;display:flex}.mlp-visualization-heading{flex-direction:column;gap:4px;display:flex}.mlp-visualization-heading p{max-width:720px}.mlp-visualization{aspect-ratio:920/520;border:1px solid var(--border);background:linear-gradient(color-mix(in srgb, var(--border) 28%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 28%, transparent) 1px, transparent 1px), color-mix(in srgb, var(--button-bg) 58%, var(--bg));background-size:46px 46px;border-radius:6px;width:100%;overflow:visible}.mlp-visualization-empty{box-sizing:border-box;place-items:center;display:grid}.mlp-visualization-empty span{color:var(--muted);font:700 14px/1 var(--sans)}.mlp-layer-rail{stroke:color-mix(in srgb, var(--border) 70%, transparent);stroke-width:1px}.mlp-layer-label,.mlp-panel-title{fill:var(--text-h);font:700 14px/1 var(--sans);letter-spacing:0;text-anchor:middle}.mlp-panel-title{text-anchor:start}.mlp-neuron-halo{fill:#0000;stroke:#0000;stroke-width:2px}.mlp-neuron{cursor:pointer}.mlp-neuron-circle{fill:var(--bg);stroke:var(--border);stroke-width:2px}.mlp-neuron[data-kind=input] .mlp-neuron-circle{fill:#f8fafc;stroke:#64748b}.mlp-neuron[data-kind=hidden] .mlp-neuron-circle{fill:#eff6ff;stroke:#2563eb}.mlp-neuron[data-kind=output] .mlp-neuron-circle{fill:#f0fdf4;stroke:#16a34a}.mlp-neuron[data-kind=output][data-error=high] .mlp-neuron-circle{fill:#fff7ed;stroke:#ea580c}.mlp-neuron[data-selected=true] .mlp-neuron-halo{fill:color-mix(in srgb, var(--accent) 14%, transparent);stroke:var(--accent)}.mlp-weight-label-text,.mlp-output-row-label,.mlp-output-row-value,.mlp-progress-meta,.mlp-progress-error{fill:var(--text-h);font-family:var(--mono);letter-spacing:0}.mlp-neuron-id{font-family:var(--mono);letter-spacing:0;text-anchor:middle;font-size:12px;font-weight:700}.mlp-neuron-value{text-anchor:middle;font-size:9px}.mlp-connection-path{fill:none;stroke:#64748b;stroke-linecap:round;opacity:.18}.mlp-connection-hit-area{fill:none;stroke:#0000;stroke-width:14px}.mlp-connection[data-sign=positive] .mlp-connection-path{stroke:#0e7490}.mlp-connection[data-sign=negative] .mlp-connection-path{stroke:#b91c1c}.mlp-connection[data-highlighted=true] .mlp-connection-path{opacity:.88}@keyframes mlp-connection-weight-pulse{0%{opacity:.95}to{opacity:.18}}.mlp-weight-label{opacity:0;transition:opacity .14s}.mlp-weight-label[data-visible=true]{opacity:1}.mlp-weight-label-bg{fill:var(--bg);stroke:var(--border);stroke-width:1px;rx:4}.mlp-weight-label-text{text-anchor:middle;font-size:11px}.mlp-output-row-label{font-size:12px;font-weight:700}.mlp-output-row-value,.mlp-progress-meta,.mlp-progress-error{fill:var(--muted);font-size:12px}.mlp-output-bar-track{fill:color-mix(in srgb, var(--border) 62%, transparent)}.mlp-output-bar-value{fill:#16a34a}.mlp-output-row[data-error=high] .mlp-output-bar-value{fill:#ea580c}.mlp-output-expected{stroke:var(--text-h);stroke-width:2px;stroke-linecap:round}
