:root{--bg: #0e1017;--panel: #141824;--ink: #f2f0e9;--muted: #9aa0b2;--board-edge: rgba(120, 140, 200, .14);--grid: rgba(150, 165, 210, .14);--dot: #6b7391;--loop: #38bdf8;--loop-glow: rgba(56, 189, 248, .55);--pearl-stroke: #0e1017;--white-pearl: #f2f0e9;--black-pearl: #11141d;--accent: #93c5fd;--sel: #38bdf8;--good: #4ade80;--bad: #f87171;--hintc: #fbbf24}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1100px 640px at 50% -8%,#1b2030 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:680px;margin:0 auto;padding:32px 20px 48px;text-align:center}h1{margin:0;font-size:34px;letter-spacing:.5px}h1 span{color:var(--loop);text-shadow:0 0 18px var(--loop-glow)}.sub{margin:6px auto 20px;max-width:540px;color:var(--muted)}#wrap{display:flex;justify-content:center}#board{background:var(--panel);border-radius:14px;border:1px solid var(--board-edge);box-shadow:0 20px 60px #00000080;padding:8px;transition:filter .35s ease;touch-action:manipulation}#board.won{filter:drop-shadow(0 0 12px rgba(74,222,128,.45))}.grid-line{stroke:var(--grid);stroke-width:1;pointer-events:none}.edge-hit{stroke:transparent;stroke-width:16;cursor:pointer;stroke-linecap:round}.edge-hit:hover{stroke:#38bdf824}.seg{stroke:var(--loop);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 0 5px var(--loop-glow))}.seg.bad{stroke:var(--bad);filter:drop-shadow(0 0 5px rgba(248,113,113,.6))}.xmark{stroke:var(--dot);stroke-width:2.4;stroke-linecap:round;pointer-events:none}.pearl{stroke-width:2.4;pointer-events:none}.pearl.white{fill:var(--white-pearl);stroke:var(--pearl-stroke)}.pearl.black{fill:var(--black-pearl);stroke:var(--white-pearl)}.pearl.bad{stroke:var(--bad)}.pearl.hinted{stroke:var(--hintc);filter:drop-shadow(0 0 6px rgba(251,191,36,.6))}.hud{margin:18px auto 4px;color:var(--muted);font-size:13px;min-height:20px}#status.win{color:var(--good);font-weight:700;text-shadow:0 0 14px rgba(74,222,128,.5)}#status.bad{color:var(--bad)}.controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}select,.controls button{font:inherit;border-radius:9px;border:1px solid rgba(120,140,200,.25);background:var(--panel);color:var(--ink);padding:7px 13px;cursor:pointer}.controls button:hover{border-color:var(--accent)}#solve{border-color:var(--sel);color:var(--sel)}label{color:var(--muted);font-size:13px}label select{margin-left:6px}.note{margin:26px auto 0;max-width:600px;color:var(--muted);font-size:13px;text-align:left}.note strong,.note em{color:var(--ink)}