:root{--bg:#0d1117;--panel-bg:#111827;--panel-border:#1f2937;--text:#e2e8f0;--text-muted:#64748b;--text-dim:#374151;--accent:#e76f51;--accent-2:#90e0ef;--green:#52b788;--red:#e63946;--gold:#f4a261;--blue:#264653;--wall:#1a1a2e;--panel-w:280px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Manrope,system-ui,sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}#app{width:100vw;height:100dvh;display:flex;overflow:hidden}#panel{width:var(--panel-w);min-width:var(--panel-w);background:var(--panel-bg);border-right:1px solid var(--panel-border);scrollbar-width:thin;scrollbar-color:#1f2937 transparent;flex-direction:column;gap:0;height:100dvh;display:flex;overflow:hidden auto}#panel::-webkit-scrollbar{width:4px}#panel::-webkit-scrollbar-track{background:0 0}#panel::-webkit-scrollbar-thumb{background:#1f2937;border-radius:4px}.panel-header{border-bottom:1px solid var(--panel-border);background:linear-gradient(180deg, #0d1117 0%, var(--panel-bg) 100%);flex-direction:column;gap:2px;padding:18px 16px 14px;display:flex}.panel-title{letter-spacing:.18em;color:var(--accent);font-size:13px;font-weight:800}.panel-sub{letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:500}.section{border-bottom:1px solid var(--panel-border);flex-direction:column;gap:7px;padding:12px 14px;display:flex}.section-label{letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin-bottom:2px;font-size:9px;font-weight:700}.select{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;appearance:none;background:#0d1117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center no-repeat;border-radius:6px;width:100%;padding:6px 26px 6px 10px;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;transition:border-color .15s}.select:hover{border-color:var(--accent)}.select:focus{border-color:var(--accent);outline:none}.algo-meta{flex-wrap:wrap;gap:4px;display:flex}.badge{letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:2px 7px;font-size:9px;font-weight:700}.badge-green{color:var(--green);background:#52b78826;border:1px solid #52b7884d}.badge-red{color:var(--red);background:#e6394626;border:1px solid #e639464d}.badge-blue{color:var(--accent-2);background:#90e0ef1a;border:1px solid #90e0ef40}.badge-yellow{color:var(--gold);background:#f4a26126;border:1px solid #f4a2614d}.badge-purple{color:#a78bfa;background:#a78bfa26;border:1px solid #a78bfa4d}.algo-desc{color:var(--text-muted);font-size:11px;line-height:1.5}.complexity-row{color:var(--text-muted);gap:10px;font-size:10px;display:flex}.complexity-row code{color:var(--accent-2);background:#90e0ef14;border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:10px}.radio-group{flex-wrap:wrap;gap:8px;display:flex}.radio-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:5px;font-size:11px;font-weight:500;transition:color .15s;display:flex}.radio-label:hover{color:var(--text)}.radio-label input[type=radio]{accent-color:var(--accent);width:13px;height:13px}.speed-row{align-items:center;gap:8px;display:flex}.speed-val{color:var(--accent);text-align:right;min-width:42px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600}.slider{appearance:none;background:var(--panel-border);cursor:pointer;border-radius:4px;outline:none;flex:1;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:box-shadow .15s;box-shadow:0 0 8px #e76f5180}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 14px #e76f51b3}.slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.draw-btns{flex-wrap:wrap;gap:4px;display:flex}.draw-btn{letter-spacing:.03em;border:1px solid var(--panel-border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:5px;padding:4px 8px;font-family:Manrope,sans-serif;font-size:10px;font-weight:600;transition:all .15s}.draw-btn:hover{border-color:var(--accent);color:var(--text)}.draw-btn.active{color:var(--accent);background:#e76f5126;border-color:#e76f5180}.weight-row{align-items:center;gap:8px;padding-top:4px;display:flex}.maze-btns{gap:6px;display:flex}.size-btns{gap:4px;display:flex}.btn-size{flex:1;padding:5px 4px;font-size:10px;font-weight:600}.btn-size.active{color:var(--accent);background:#e76f5126;border-color:#e76f5180}.section-actions{gap:8px}.toggle-row{flex-wrap:wrap;gap:12px;display:flex}.toggle-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:6px;font-size:11px;font-weight:500;transition:color .15s;display:flex}.toggle-label:hover{color:var(--text)}.toggle-label input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px}.action-btns{gap:6px;display:flex}.btn-action{letter-spacing:.04em;cursor:pointer;border:1px solid #0000;border-radius:6px;flex:1;padding:7px 12px;font-family:Manrope,sans-serif;font-size:11px;font-weight:700;transition:all .15s}.btn-action:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:#d4614a;box-shadow:0 0 16px #e76f5166}.btn-secondary{color:var(--accent-2);background:#90e0ef14;border-color:#90e0ef33}.btn-secondary:hover:not(:disabled){background:#90e0ef26;border-color:#90e0ef66}.btn-ghost{color:var(--text-muted);border-color:var(--panel-border);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:#374151}.stats-section{border-bottom:1px solid var(--panel-border);flex-direction:column;gap:6px;padding:12px 14px;display:flex}.stats-label{letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;font-size:9px;font-weight:700}.stats-block{gap:6px;display:flex}.stat{border:1px solid var(--panel-border);background:#0d1117;border-radius:6px;flex-direction:column;flex:1;gap:2px;padding:6px 8px;display:flex}.stat-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:8px;font-weight:700}.stat-val{color:var(--gold);font-family:JetBrains Mono,monospace;font-size:14px;font-weight:500}.kbd-hints{color:var(--text-muted);flex-wrap:wrap;gap:6px;padding:10px 14px 14px;font-size:10px;display:flex}kbd{border:1px solid var(--panel-border);color:var(--accent-2);background:#0d1117;border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:9px}#main-area{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}#canvas-labels{border-bottom:1px solid var(--panel-border);background:var(--panel-bg);flex-shrink:0;gap:12px;padding:8px 12px 6px;display:flex}.canvas-label{color:var(--text-muted);letter-spacing:.04em;align-items:center;gap:7px;font-size:11px;font-weight:600;display:flex}.label-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.label-dot-1{background:var(--accent);box-shadow:0 0 8px #e76f51b3}.label-dot-2{background:var(--accent-2);box-shadow:0 0 8px #90e0efb3}#canvases{flex:1;gap:12px;padding:8px;display:flex;overflow:hidden}#canvas1,#canvas2{cursor:crosshair;border-radius:6px;flex:1;display:block}.legend{border-bottom:1px solid var(--panel-border);flex-wrap:wrap;gap:10px;padding:8px 14px;display:flex}.legend-item{color:var(--text-muted);align-items:center;gap:5px;font-size:9px;display:flex}.legend-dot{border-radius:2px;flex-shrink:0;width:10px;height:10px}#panel{scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.7}}