:root{--bg: #15161a;--panel: #1d1f25;--ink: #f1f1ee;--muted: #9aa0ab;--line: #2c2f37;--tile: #262931;--pipe-off: #454a55;--accent: #3fd1c7;--accent-dim: #1f4f4c;--shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}:root[data-theme=light]{--bg: #f1f1ee;--panel: #ffffff;--ink: #1b1c20;--muted: #6b7280;--line: #e2e2dc;--tile: #ffffff;--pipe-off: #cfd2cc;--accent: #12857c;--accent-dim: #bfe6e2;--shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px rgba(0, 0, 0, .08);color-scheme:light}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg: #f1f1ee;--panel: #ffffff;--ink: #1b1c20;--muted: #6b7280;--line: #e2e2dc;--tile: #ffffff;--pipe-off: #cfd2cc;--accent: #12857c;--accent-dim: #bfe6e2;--shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px rgba(0, 0, 0, .08);color-scheme:light}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:14px 16px calc(14px + env(safe-area-inset-top));padding-top:max(14px,env(safe-area-inset-top))}header h1{margin:0;text-align:center;font-size:1.1rem;font-weight:650;letter-spacing:.01em}.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}.icon:hover{background:var(--panel)}.icon-spacer{width:40px}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 24px;gap:14px;width:100%}#game{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:460px}.tutorial-intro{margin:0;color:var(--muted);font-size:.95rem}.counter{margin:0;min-height:1.5em;font-size:1.05rem;color:var(--muted);text-align:center}.counter.flash.good{color:var(--accent);font-weight:650}.board{--size: 6;display:grid;grid-template-columns:repeat(var(--size),1fr);gap:4px;width:min(92vw,460px);aspect-ratio:1;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transition:box-shadow .5s ease}.tile{width:100%;height:100%;background:var(--tile);border-radius:8px;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s ease}.tile:active{transform:scale(.94)}.tile.spin{animation:nudge .18s ease}@keyframes nudge{0%{transform:rotate(-12deg)}to{transform:rotate(0)}}.pipe{stroke:var(--pipe-off);stroke-width:12;stroke-linecap:round;transition:stroke .25s ease}.hub{fill:var(--pipe-off);transition:fill .25s ease}.tile.powered .pipe{stroke:var(--accent)}.tile.powered .hub{fill:var(--accent)}.tile.is-end .hub{r:11px}.tile.guide{outline:2px solid var(--accent);outline-offset:2px;animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{outline-color:var(--accent)}50%{outline-color:transparent}}.board.solved{box-shadow:0 0 0 1px var(--accent),0 0 40px -6px var(--accent)}.board.solved .tile{background:color-mix(in srgb,var(--accent) 8%,var(--tile))}.moves{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}#complete{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:20px}.done-label{margin:0;color:var(--muted)}.final-moves{margin:0;font-size:3.4rem;font-weight:700;line-height:1;color:var(--accent)}.done-unit{margin:0 0 6px;color:var(--muted)}.vs{margin:0;color:var(--ink)}.muted{color:var(--muted)}.streak{margin:2px 0 14px;color:var(--muted);min-height:1.4em}.primary,.secondary{border:0;border-radius:12px;padding:12px 22px;font-size:1rem;font-weight:600;cursor:pointer}.primary{background:var(--accent);color:#06201e}.secondary{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.9rem}footer{text-align:center;color:var(--muted);font-size:.8rem;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);padding:20px;width:min(92vw,420px);box-shadow:var(--shadow)}dialog::backdrop{background:#00000080}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}dialog h2{margin:0;font-size:1.2rem}dialog h3{margin:16px 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}dialog ol{margin:0;padding-left:1.2em;color:var(--ink)}dialog ol li{margin:6px 0}dialog .primary{margin-top:16px;width:100%}.segmented{display:flex;gap:6px}.segmented button{flex:1;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:8px;cursor:pointer}.segmented button.active{background:var(--accent);color:#06201e;border-color:var(--accent)}.menu-actions{display:flex;gap:8px;margin-top:18px}.menu-actions .secondary{flex:1}.archive-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:60vh;overflow-y:auto;margin-top:8px}.archive-card{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.archive-card.solved{border-color:var(--accent-dim)}.archive-card.current{outline:2px solid var(--accent)}.archive-n{font-weight:650}.archive-note{font-size:.78rem;color:var(--muted)}