:root{--bg: #0d1117;--panel: #161d29;--ink: #e9eef7;--muted: #8b98b3;--on: #ffd54a;--on-glow: rgba(255, 213, 74, .45);--off: #232c3d;--hint: #34d399;--accent: #60a5fa}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 700px at 50% -10%,#17233a 0%,var(--bg) 60%);color:var(--ink);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}main{max-width:560px;margin:0 auto;padding:36px 20px 48px;text-align:center}h1{margin:0;font-size:34px;letter-spacing:.5px}h1 span{color:var(--on)}.sub{margin:6px 0 22px;color:var(--muted)}#board{display:grid;gap:8px;margin:0 auto;width:min(86vw,420px);aspect-ratio:1;padding:14px;background:var(--panel);border-radius:16px;border:1px solid rgba(120,140,200,.14);box-shadow:0 20px 60px #00000073}.cell{border:0;border-radius:10px;background:var(--off);cursor:pointer;transition:background .12s ease,box-shadow .12s ease,transform .05s ease}.cell:active{transform:scale(.94)}.cell.on{background:var(--on);box-shadow:0 0 18px var(--on-glow),0 0 4px var(--on-glow)}.cell.hint{outline:3px solid var(--hint);outline-offset:-3px}.hud{display:flex;justify-content:space-between;width:min(86vw,420px);margin:12px auto 4px;color:var(--muted);font-size:13px;min-height:20px}#status.win{color:var(--hint);font-weight:700}.controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px}select,button{font:inherit;border-radius:9px;border:1px solid rgba(120,140,200,.25);background:var(--panel);color:var(--ink);padding:8px 14px;cursor:pointer}button:hover{border-color:var(--accent)}#solve{border-color:var(--hint);color:var(--hint)}label{color:var(--muted);font-size:13px}label select{margin-left:6px}.note{margin:26px auto 0;max-width:460px;color:var(--muted);font-size:13px;text-align:left}.note code{color:var(--ink);background:#788cc824;padding:1px 5px;border-radius:5px}