:root{color-scheme:dark;--bg:#080d1a;--panel:#111a2d;--panel2:#0d1527;--line:#24324d;--text:#eaf1ff;--muted:#91a2bf;--cyan:#4de1ed;--purple:#a78bfa;--green:#4ade80;--yellow:#fbbf24;--red:#fb7185}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% -10%,#1b2850 0,transparent 42%),var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,select,input{font:inherit}button,select{border:1px solid var(--line);background:#17223a;color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer}button:hover{border-color:#5d78a8;background:#1c2b48}button:disabled{opacity:.42;cursor:not-allowed}.primary{background:linear-gradient(120deg,#0f9fae,#6356d9);border:0;font-weight:700}.primary:hover{filter:brightness(1.12)}.app{max-width:1500px;margin:auto;padding:22px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.brand{display:flex;gap:12px;align-items:center}.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#34d7e4,#7c65ee);display:grid;place-items:center;color:#07101d;font-size:24px;font-weight:900;box-shadow:0 8px 28px #35d8e433}.brand h1{font-size:21px;letter-spacing:-.6px;margin:0}.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.topright{display:flex;align-items:center;gap:10px}.pill{border:1px solid #28535c;background:#102a36;color:#80f2e8;border-radius:99px;padding:7px 10px;font-size:12px}.layout{display:grid;grid-template-columns:270px minmax(360px,1fr) 290px;gap:16px;align-items:start}.panel{background:linear-gradient(180deg,#121c30f5,#0e1729f5);border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:0 16px 40px #0002}.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:#b4c5e3;margin:0 0 14px}.section{margin-bottom:20px}.section:last-child{margin-bottom:0}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.field label,.label{color:var(--muted);font-size:12px}.field select{width:100%}.buttonrow{display:flex;gap:8px;flex-wrap:wrap}.buttonrow>*{flex:1}.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toolgrid button.active{border-color:var(--cyan);color:var(--cyan);background:#10303b}.hint{font-size:11px;color:var(--muted);margin-top:9px}.center{min-width:0}.boardhead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}.boardhead h2{font-size:17px;margin:0}.boardhead p{color:var(--muted);font-size:12px;margin:3px 0 0}.legend{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.swatch{width:9px;height:9px;border-radius:3px;display:inline-block}.gridwrap{padding:10px;background:#091020;border:1px solid #253450;border-radius:13px;overflow:auto}.grid{display:grid;gap:2px;touch-action:pan-x pan-y;user-select:none;min-width:460px}.cell{aspect-ratio:1;border-radius:3px;background:#1a2941;border:1px solid #263652;min-width:0;min-height:0;cursor:crosshair;transition:background .08s}.cell.wall{background:#52617b;border-color:#657795;box-shadow:inset 0 0 0 1px #a8b8d41a}.cell.visited{background:#15596d;border-color:#1d7e92;animation:pop .14s ease-out}.cell.path{background:#f8c957;border-color:#ffe18b;box-shadow:0 0 10px #f8c95755}.cell.start{background:#48e5a1;border-color:#8af5c4;position:relative}.cell.end{background:#f46e9a;border-color:#ffabc2;position:relative}.cell.start:after{content:'S';color:#062117}.cell.end:after{content:'E';color:#300b19}.cell.start:after,.cell.end:after{font-size:clamp(8px,1vw,12px);font-weight:900;display:grid;place-items:center;height:100%}.cell.current{outline:2px solid white;outline-offset:-2px}.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.controls button{min-width:72px}.controls .primary{flex:1}.status{margin-top:12px;padding:11px 12px;border-radius:10px;background:#0b1425;border:1px solid #24334d;color:#a8bddc;font-size:12px;display:flex;justify-content:space-between;gap:10px}.status strong{color:var(--cyan)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{background:#0b1425;border:1px solid #24334d;border-radius:12px;padding:12px}.metric .num{font-size:24px;font-weight:750;letter-spacing:-.8px}.metric .caption{font-size:11px;color:var(--muted);margin-top:3px}.mini-title{font-size:12px;color:#c5d3eb;font-weight:700;margin-bottom:9px}.explain{font-size:12px;color:var(--muted);line-height:1.65}.explain strong{color:#e7f0ff}.queue{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.queue span{background:#1b2942;border:1px solid #2a3b5c;padding:4px 7px;border-radius:6px;font-size:10px;color:#bcd0ef}.range{width:100%;accent-color:var(--cyan)}.footer{display:flex;justify-content:space-between;gap:10px;color:#6f819f;font-size:11px;margin:17px 3px}.kbd{font-family:ui-monospace,monospace;border:1px solid #3a4964;border-radius:4px;padding:1px 4px;color:#c8d8f2}@keyframes pop{from{transform:scale(.78);opacity:.65}to{transform:scale(1);opacity:1}}@media(max-width:1100px){.layout{grid-template-columns:240px minmax(0,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}.right .panel{height:100%}}@media(max-width:720px){.app{padding:12px}.top{align-items:flex-start}.topright .pill{display:none}.brand h1{font-size:18px}.layout{grid-template-columns:1fr}.right{grid-column:auto;display:grid;grid-template-columns:1fr}.panel{padding:14px}.grid{min-width:440px}.boardhead{align-items:flex-start;flex-direction:column}.footer{flex-direction:column}}