:root{--bg-dark: #0b120d;--bg-card: #121d16;--bg-card-hover: #18271e;--bg-panel: #16241b;--border-color: #24382a;--border-glow: #34523d;--accent-lime: #cbeb70;--accent-lime-dim: rgba(203, 235, 112, .15);--accent-lime-glow: rgba(203, 235, 112, .4);--activation-cyan: #38bdf8;--activation-cyan-glow: rgba(56, 189, 248, .5);--loss-rose: #f43f5e;--loss-rose-glow: rgba(244, 63, 94, .4);--text-main: #e2e8f0;--text-muted: #8ba393;--text-dim: #5c7365;--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);font-size:14px;line-height:1.5;height:100vh;overflow:hidden;display:flex;flex-direction:column}header{background:var(--bg-card);border-bottom:1px solid var(--border-color);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-logo-img{height:32px;width:auto;object-fit:contain;filter:drop-shadow(0 0 6px rgba(203,235,112,.4))}.brand h1{font-size:1.25rem;font-weight:700;letter-spacing:-.5px;color:#fff}.brand h1 span{color:var(--accent-lime)}.status-badge{font-family:var(--font-mono);font-size:.75rem;padding:4px 10px;border-radius:20px;background:#cbeb701a;color:var(--accent-lime);border:1px solid var(--border-glow);display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-lime);box-shadow:0 0 8px var(--accent-lime)}.status-dot.idle{background:var(--text-muted);box-shadow:none}.status-dot.training{animation:pulse-dot 1.2s infinite ease-in-out}@keyframes pulse-dot{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}.main-container{display:grid;grid-template-columns:320px 1fr 340px;flex:1;overflow:hidden;height:calc(100vh - 53px)}.left-panel{background:var(--bg-panel);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:16px;gap:16px;overflow-y:auto}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}.card-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center}.canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}.canvas-container{position:relative;width:224px;height:224px;background:#000;border:2px solid var(--border-glow);border-radius:8px;box-shadow:0 0 15px #00000080;cursor:crosshair}#drawCanvas{width:100%;height:100%;border-radius:6px;touch-action:none}.canvas-tools{display:flex;gap:8px;width:100%}.btn{background:var(--bg-panel);color:var(--text-main);border:1px solid var(--border-color);border-radius:6px;padding:8px 12px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover{background:var(--bg-card-hover);border-color:var(--border-glow);color:#fff}.btn-primary{background:var(--accent-lime);color:#0b120d;border:none;font-weight:700}.btn-primary:hover{background:#d9f385;box-shadow:0 0 12px var(--accent-lime-glow);color:#0b120d}.btn-danger{border-color:#f43f5e66;color:var(--loss-rose)}.btn-danger:hover{background:#f43f5e26;border-color:var(--loss-rose)}.btn-sm{padding:4px 8px;font-size:.75rem}.tag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}.tag-btn{background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-main);border-radius:6px;height:36px;font-size:1rem;font-family:var(--font-mono);font-weight:700;cursor:pointer;transition:all .15s ease}.tag-btn:hover{background:var(--accent-lime-dim);border-color:var(--accent-lime);color:var(--accent-lime)}.live-preview-box{display:flex;align-items:center;gap:12px;background:var(--bg-panel);padding:8px 12px;border-radius:6px;border:1px solid var(--border-color)}#previewCanvas{width:48px;height:48px;background:#000;border:1px solid var(--border-glow);image-rendering:pixelated;border-radius:4px}.prediction-info{display:flex;flex-direction:column;gap:2px;flex:1}.pred-top{font-size:1.1rem;font-weight:700;color:var(--accent-lime);font-family:var(--font-mono)}.pred-conf{font-size:.75rem;color:var(--text-muted)}.confidence-list{display:flex;flex-direction:column;gap:4px}.conf-row{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.75rem}.conf-label{width:12px;text-align:right;color:var(--text-muted)}.conf-bar-bg{flex:1;height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.conf-bar-fill{height:100%;background:var(--accent-lime);width:0%;transition:width .15s ease;border-radius:3px}.conf-bar-fill.highest{background:var(--activation-cyan);box-shadow:0 0 6px var(--activation-cyan)}.conf-val{width:32px;text-align:right;color:var(--text-muted)}.dataset-summary{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-muted)}.digit-counts-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.count-chip{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:4px;padding:4px;text-align:center;font-size:.7rem;font-family:var(--font-mono)}.count-chip .num{color:var(--accent-lime);font-weight:700}.center-panel{display:flex;flex-direction:column;position:relative;background:#070d09;overflow:hidden}.visualizer-toolbar{padding:10px 16px;background:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;z-index:5}.view-tabs{display:flex;gap:4px;background:var(--bg-panel);padding:3px;border-radius:6px;border:1px solid var(--border-color)}.tab-btn{background:transparent;border:none;color:var(--text-muted);padding:5px 12px;font-size:.8rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .2s ease}.tab-btn.active{background:var(--bg-card);color:var(--accent-lime);border:1px solid var(--border-glow)}.viz-canvas-container{flex:1;position:relative;width:100%;height:100%}#networkCanvas{width:100%;height:100%;display:block}.viz-tooltip{position:absolute;pointer-events:none;background:#121d16f2;border:1px solid var(--accent-lime);border-radius:6px;padding:8px 12px;font-family:var(--font-mono);font-size:.75rem;color:#fff;box-shadow:0 4px 20px #0009;z-index:20;display:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.right-panel{background:var(--bg-panel);border-left:1px solid var(--border-color);display:flex;flex-direction:column;padding:16px;gap:16px;overflow-y:auto}.control-group{display:flex;flex-direction:column;gap:6px}.control-label{font-size:.75rem;color:var(--text-muted);display:flex;justify-content:space-between}.control-label span.val{color:var(--accent-lime);font-family:var(--font-mono)}select,input[type=range]{width:100%;accent-color:var(--accent-lime)}select{background:var(--bg-panel);color:var(--text-main);border:1px solid var(--border-color);border-radius:6px;padding:6px 10px;font-size:.8rem;outline:none}select:focus{border-color:var(--accent-lime)}.training-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.training-actions .btn-full{grid-column:span 2}.chart-container{width:100%;height:140px;position:relative;background:#070d09;border:1px solid var(--border-color);border-radius:6px;padding:4px}#chartCanvas{width:100%;height:100%;display:block}.receptive-box{display:flex;align-items:center;gap:12px;background:var(--bg-panel);padding:10px;border-radius:6px;border:1px solid var(--border-color)}#receptiveCanvas{width:70px;height:70px;background:#000;border:1px solid var(--border-glow);image-rendering:pixelated;border-radius:4px}.receptive-desc{font-size:.75rem;color:var(--text-muted)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-lime-glow)}.tour-spotlight{position:fixed;border:2px solid var(--accent-lime);border-radius:8px;box-shadow:0 0 0 9999px #070d09bf,0 0 25px var(--accent-lime-glow);pointer-events:none!important;z-index:8000;transition:all .3s cubic-bezier(.25,1,.5,1)}.tour-card{position:fixed;width:400px;max-width:calc(100vw - 40px);background:var(--bg-card);border:2px solid var(--accent-lime);border-radius:12px;padding:18px 20px;box-shadow:0 0 30px var(--accent-lime-glow),0 10px 40px #000000e6;display:flex;flex-direction:column;gap:12px;z-index:10000!important;pointer-events:auto!important;animation:tour-pop .25s cubic-bezier(.175,.885,.32,1.275)}@keyframes tour-pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tour-header{display:flex;justify-content:space-between;align-items:center}.tour-title{font-size:1.05rem;font-weight:700;color:var(--accent-lime)}.tour-close{background:transparent;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:4px}.tour-close:hover{color:#fff;background:#ffffff1a}.tour-body{font-size:.86rem;line-height:1.55;color:var(--text-main)}.tour-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding-top:10px;border-top:1px solid var(--border-color)}.tour-steps-indicator{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.tour-nav-btns{display:flex;gap:8px}.tour-nav-btns button{pointer-events:auto!important;cursor:pointer!important}