@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap";:root{--p-green: #00ff88;--p-green-dim: #00cc6a;--p-green-faint: rgba(0, 255, 136, .12);--p-green-glow: rgba(0, 255, 136, .4);--p-amber: #ffaa00;--p-amber-dim: #cc8800;--p-cyan: #00e5ff;--p-cyan-dim: rgba(0, 229, 255, .7);--neural: #ff4466;--neural-dim: rgba(255, 68, 102, .7);--neural-glow: rgba(255, 68, 102, .35);--bg-void: #000000;--bg-deep: #020507;--bg-panel: #040c0e;--bg-panel-border: rgba(0, 255, 136, .15);--bg-section: rgba(0, 255, 136, .04);--font-mono: "Share Tech Mono", "Courier New", monospace;--font-display: "Orbitron", "Share Tech Mono", monospace;--panel-width: 220px;--header-height: 52px;--radius: 2px;--t-fast: 80ms;--t-med: .2s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-void)}body{font-family:var(--font-mono);color:var(--p-green);font-size:11px;line-height:1.4;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;width:100vw;height:100vh;background:var(--bg-deep);background-image:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.85) 100%)}#header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--bg-panel-border);background:#000c08f2;flex-shrink:0;position:relative;z-index:10}#header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--p-green-glow),transparent)}.header-left{display:flex;align-items:center;gap:14px}.logo-mark{font-family:var(--font-display);font-weight:900;font-size:16px;letter-spacing:.05em;color:var(--p-green);text-shadow:0 0 12px var(--p-green-glow),0 0 24px rgba(0,255,136,.2);white-space:nowrap}.logo-bracket{color:var(--p-amber);text-shadow:0 0 10px rgba(255,170,0,.6)}.title-main{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--p-green);text-shadow:0 0 8px var(--p-green-glow)}.title-sub{font-size:9px;letter-spacing:.12em;color:var(--p-green-dim);opacity:.7;margin-top:1px}.header-right{display:flex;align-items:center;gap:20px}.status-indicator{display:flex;align-items:center;gap:6px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--p-amber);box-shadow:0 0 6px var(--p-amber);animation:blink 1.2s ease-in-out infinite}.status-dot.ready{background:var(--p-green);box-shadow:0 0 8px var(--p-green-glow);animation:pulse-glow 2s ease-in-out infinite}.status-dot.training{background:var(--neural);box-shadow:0 0 8px var(--neural-glow);animation:blink .4s ease-in-out infinite}.status-text{font-size:9px;letter-spacing:.15em;color:var(--p-amber)}.status-text.ready{color:var(--p-green)}.status-text.training{color:var(--neural)}.header-meta{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em;color:var(--p-green-dim)}.meta-sep{opacity:.4}#main{display:flex;flex:1;overflow:hidden;gap:0}#controlPanel,#readoutPanel{width:var(--panel-width);flex-shrink:0;background:var(--bg-panel);overflow-y:auto;overflow-x:hidden;padding:10px 0;scrollbar-width:thin;scrollbar-color:var(--bg-panel-border) transparent}#controlPanel{border-right:1px solid var(--bg-panel-border)}#readoutPanel{border-left:1px solid var(--bg-panel-border)}#controlPanel::-webkit-scrollbar,#readoutPanel::-webkit-scrollbar{width:3px}#controlPanel::-webkit-scrollbar-track,#readoutPanel::-webkit-scrollbar-track{background:transparent}#controlPanel::-webkit-scrollbar-thumb,#readoutPanel::-webkit-scrollbar-thumb{background:var(--bg-panel-border)}.panel-section{padding:10px 12px;border-bottom:1px solid rgba(0,255,136,.06)}.section-header{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--p-amber);text-shadow:0 0 6px rgba(255,170,0,.4);margin-bottom:10px;display:flex;align-items:center;gap:5px}.section-icon{color:var(--p-amber);font-size:8px}.control-group{margin-bottom:10px}.control-label{display:flex;align-items:baseline;gap:4px;color:var(--p-green-dim);font-size:10px;letter-spacing:.05em;margin-bottom:4px}.label-sub{font-size:9px;opacity:.6}.control-value{margin-left:auto;color:var(--p-green);text-shadow:0 0 4px var(--p-green-glow);font-size:11px;min-width:40px;text-align:right}.slider{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#00ff8826;outline:none;border:none;cursor:pointer;border-radius:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:var(--p-green);box-shadow:0 0 6px var(--p-green-glow);cursor:pointer;border-radius:0;transform:rotate(45deg);transition:box-shadow var(--t-fast)}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 12px var(--p-green-glow),0 0 20px #00ff884d}.slider::-moz-range-thumb{width:10px;height:10px;background:var(--p-green);box-shadow:0 0 6px var(--p-green-glow);cursor:pointer;border:none;border-radius:0;transform:rotate(45deg)}.slider::-webkit-slider-runnable-track{background:#00ff8826;height:2px}.neural-stats{margin:8px 0;padding:8px;background:var(--bg-section);border:1px solid rgba(0,255,136,.08)}.stat-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;gap:8px}.stat-row:last-child{margin-bottom:0}.stat-label{font-size:9px;letter-spacing:.1em;color:var(--p-green-dim);opacity:.7;flex-shrink:0}.stat-value{font-size:10px;color:var(--p-green);text-align:right}.progress-bar{flex:1;height:4px;background:#00ff881a;border:1px solid rgba(0,255,136,.15);overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--p-green);box-shadow:0 0 6px var(--p-green-glow);transition:width .1s linear}.btn-retrain{width:100%;padding:8px;background:transparent;border:1px solid rgba(255,68,102,.4);color:var(--neural);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;cursor:pointer;transition:all var(--t-med);text-shadow:0 0 6px var(--neural-glow);margin-top:6px}.btn-retrain:hover{background:#ff446614;border-color:var(--neural);box-shadow:0 0 12px var(--neural-glow)}.btn-retrain:active{background:#ff44662e}.btn-retrain:disabled{opacity:.4;cursor:not-allowed}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.toggle-label{font-size:10px;letter-spacing:.08em;color:var(--p-green-dim)}.toggle{position:relative;display:inline-block;width:28px;height:14px;cursor:pointer}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;inset:0;background:#00ff881a;border:1px solid rgba(0,255,136,.25);transition:all var(--t-med)}.toggle-track:before{content:"";position:absolute;width:8px;height:8px;top:2px;left:2px;background:var(--p-green-dim);transition:all var(--t-med);transform:rotate(45deg)}.toggle input:checked+.toggle-track{background:#00ff8826;border-color:var(--p-green);box-shadow:0 0 6px #0f83}.toggle input:checked+.toggle-track:before{transform:translate(14px) rotate(45deg);background:var(--p-green);box-shadow:0 0 6px var(--p-green-glow)}.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.readout-block{padding:6px 8px;background:#00ff8808;border:1px solid rgba(0,255,136,.1);border-left:2px solid var(--p-green-dim)}.readout-block.neural-readout{border-left-color:var(--neural)}.readout-block.wide{grid-column:1 / -1}.readout-label{font-size:8px;letter-spacing:.12em;color:var(--p-green-dim);opacity:.6;margin-bottom:2px}.readout-value{font-size:12px;color:var(--p-green);text-shadow:0 0 4px var(--p-green-glow);letter-spacing:.02em;font-variant-numeric:tabular-nums}.readout-block.neural-readout .readout-value{color:var(--neural);text-shadow:0 0 4px var(--neural-glow)}.readout-value.highlight{color:var(--p-cyan);text-shadow:0 0 6px rgba(0,229,255,.5)}.arch-display{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;gap:4px}.arch-layer{display:flex;flex-direction:column;align-items:center;gap:4px}.arch-label{font-size:8px;letter-spacing:.1em;color:var(--p-green-dim);opacity:.6}.arch-nodes{display:flex;flex-direction:column;gap:2px}.arch-node{width:6px;height:6px;border:1px solid var(--p-green-dim);border-radius:50%;background:#00ff881a}.arch-node.neural{border-color:var(--neural);background:#ff44661a}.arch-dim{font-size:9px;color:var(--p-amber)}.arch-arrow{color:var(--p-green-dim);opacity:.4;font-size:10px}.arch-details{padding:8px;background:var(--bg-section);border:1px solid rgba(0,255,136,.06);margin-top:6px}.controls-help{display:flex;flex-direction:column;gap:5px}.help-row{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--p-green-dim);opacity:.7}.key{padding:1px 5px;border:1px solid rgba(0,255,136,.25);font-size:8px;letter-spacing:.05em;color:var(--p-green);min-width:40px;text-align:center}#vizWrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;min-width:0;position:relative}#canvasContainer{position:relative;width:100%;flex:1;max-height:calc(100% - 36px)}#mainCanvas{display:block;width:100%;height:100%;background:#000}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);z-index:2}.corner{position:absolute;width:16px;height:16px;z-index:3;pointer-events:none}.corner-tl{top:0;left:0;border-top:2px solid var(--p-green);border-left:2px solid var(--p-green)}.corner-tr{top:0;right:0;border-top:2px solid var(--p-green);border-right:2px solid var(--p-green)}.corner-bl{bottom:0;left:0;border-bottom:2px solid var(--p-green);border-left:2px solid var(--p-green)}.corner-br{bottom:0;right:0;border-bottom:2px solid var(--p-green);border-right:2px solid var(--p-green)}.center-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;opacity:.15}.cross-h{position:absolute;width:20px;height:1px;background:var(--p-green);top:0;left:-10px}.cross-v{position:absolute;width:1px;height:20px;background:var(--p-green);left:0;top:-10px}#legend{display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:.1em;color:var(--p-green-dim);opacity:.8;flex-shrink:0}.legend-item{display:flex;align-items:center;gap:6px}.legend-swatch{width:20px;height:2px;display:inline-block}.swatch-true{background:var(--p-green);box-shadow:0 0 4px var(--p-green-glow)}.swatch-neural{background:var(--neural);box-shadow:0 0 4px var(--neural-glow);border-top:1px dashed var(--neural);height:0;border-bottom:none}.legend-divider{color:var(--p-amber);opacity:.6;font-size:10px}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}@keyframes pulse-glow{0%,to{box-shadow:0 0 6px var(--p-green-glow)}50%{box-shadow:0 0 12px var(--p-green-glow),0 0 20px #0f83}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}#app{animation:fadeIn .4s ease-out forwards}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-panel-border)}::selection{background:var(--p-green-glow);color:var(--bg-void)}