:root{--bg:#0b1220;--panel:#131c2e;--fg:#e8eef9;--muted:#a3b0c8;--line:#2a3752;--accent:#22d3ee;--accent-fg:#06222a;--board:#0e1626;--cell:#16213a;--wall:#3a465f;--c1:#ff5d6c;--c2:#3ddc84;--c3:#ffe14d;--c4:#5aa0ff;--c5:#e45cff;--c6:#4de8ff;--c7:#fff}:root[data-theme=light]{--bg:#f6f3ec;--panel:#fff;--fg:#1b2333;--muted:#4b5568;--line:#c9c4b6;--accent:#0e7490;--accent-fg:#fff;--board:#e9e5da;--cell:#f9f7f1;--wall:#8d95a6;--c1:#d1243a;--c2:#13873f;--c3:#a07400;--c4:#1d5fd1;--c5:#a31fc4;--c6:#0b7f9a;--c7:#5b6372}@media (prefers-color-scheme:light){:root:not([data-theme]){--bg:#f6f3ec;--panel:#fff;--fg:#1b2333;--muted:#4b5568;--line:#c9c4b6;--accent:#0e7490;--accent-fg:#fff;--board:#e9e5da;--cell:#f9f7f1;--wall:#8d95a6;--c1:#d1243a;--c2:#13873f;--c3:#a07400;--c4:#1d5fd1;--c5:#a31fc4;--c6:#0b7f9a;--c7:#5b6372}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);margin:0;font:16px/1.45 system-ui,sans-serif}body{flex-direction:column;min-height:100vh;display:flex}header{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.6rem 1rem;display:flex}h1{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:1.3rem}h2{margin:0 0 .25rem;font-size:1.15rem}h3{margin:1rem 0 .4rem;font-size:1rem}nav{flex-wrap:wrap;gap:.4rem;display:flex}main{outline:none;flex:1;width:100%;max-width:640px;margin:0 auto;padding:1rem}button{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:8px;min-height:44px;padding:.5rem .8rem}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}button:disabled{opacity:.55;cursor:not-allowed}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.muted{color:var(--muted);margin:0 0 .5rem}.sr,.skip:not(:focus){clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip:focus{z-index:9;position:fixed;top:.5rem;left:.5rem}[hidden]{display:none!important}.hud{justify-content:space-between;align-items:flex-start;gap:1rem;min-height:4.2rem;display:flex}.score{white-space:nowrap;margin:0;font-weight:600}.stage{aspect-ratio:1;background:var(--board);border:1px solid var(--line);border-radius:12px;width:100%;max-width:480px;margin:.5rem auto;padding:6px;position:relative}.board{z-index:1;touch-action:manipulation;gap:2px;width:100%;height:100%;display:grid;position:relative}.row{display:contents}.cell{background:var(--cell);border:1px solid #0000;border-radius:6px;place-items:center;min-height:0;padding:0;display:grid;position:relative}.cell.wall{background:var(--wall);cursor:default}.cell.cursor{border-color:var(--accent)}.beams{z-index:2;pointer-events:none;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;inset:6px}.beams path{fill:none;stroke-linecap:round}.beams .glow{stroke-width:.3px;opacity:.22}.beams .core{stroke-width:.09px}.c1{stroke:var(--c1)}.c2{stroke:var(--c2)}.c3{stroke:var(--c3)}.c4{stroke:var(--c4)}.c5{stroke:var(--c5)}.c6{stroke:var(--c6)}.c7{stroke:var(--c7)}.glyph{z-index:3;width:70%;height:70%;position:relative}.glyph line{stroke:var(--fg);stroke-width:1.4px;stroke-linecap:round}.glyph circle{fill:var(--fg)}.lock{color:var(--muted);z-index:3;font-size:.7rem;position:absolute;bottom:1px;right:3px}.pips{z-index:3;gap:4px;display:flex;position:relative}.pip{border:2px solid var(--line);background:0 0;border-radius:50%;width:14px;height:14px}.pip.want.r{background:var(--c1)}.pip.want.g{background:var(--c2)}.pip.want.b{background:var(--c4)}.pip.got{border-color:var(--fg)}.pip.r.got{border-color:var(--c1)}.pip.g.got{border-color:var(--c2)}.pip.b.got{border-color:var(--c4)}.cell.recv{border:2px solid var(--line)}.cell.recv.ok{border-color:var(--accent)}.cell.recv.excess{border-style:dashed;border-color:#e5484d}.emit{z-index:3;font-size:1.6rem;font-weight:700;line-height:1;position:relative}.emit.e1{color:var(--c1)}.emit.e2{color:var(--c2)}.emit.e3{color:var(--c3)}.emit.e4{color:var(--c4)}.emit.e5{color:var(--c5)}.emit.e6{color:var(--c6)}.emit.e7{color:var(--c7)}.tray{flex-wrap:wrap;justify-content:center;gap:.5rem;min-height:52px;display:flex}.tray button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.btns{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.5rem 0;display:flex}.status{text-align:center;min-height:1.4em;margin:.25rem 0}.keys{text-align:center;font-size:.85rem}.chapter ul{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.chapter li button{text-align:left;width:100%;display:grid}dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;max-width:min(92vw,460px)}dialog::backdrop{background:#0000008c}footer{text-align:center;color:var(--muted);padding:.8rem 1rem;font-size:.9rem}footer a,dialog a{color:var(--accent)}@media (prefers-reduced-motion:no-preference){.beams path{transition:opacity .12s}}@media (width<=420px){header{padding:.4rem .6rem}main{padding:.6rem}}.tray button{touch-action:none;-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:no-preference){.beams .core{transition:stroke-width .25s}.beams .glow{transition:opacity .25s}}.beams.solved .glow{opacity:.5}.beams.solved .core{stroke-width:.13px}