:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f4f6f8;--fg:#191c20;--muted:#5b6570;--cell-bg:#fff;--cell-line:#d5dae1;--cell-lit:#e3edfd;--trail:#3b82f6;--wall:#191c20;--checkpoint-bg:#191c20;--checkpoint-fg:#fff;--button-bg:#fff;--solved:#12894b}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#14171a;--fg:#e8ebee;--muted:#99a3ad;--cell-bg:#1d2126;--cell-line:#2f353c;--cell-lit:#1e3555;--trail:#5b9bf8;--wall:#e8ebee;--checkpoint-bg:#e8ebee;--checkpoint-fg:#14171a;--button-bg:#1d2126;--solved:#35c47c}}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;color:var(--fg);overscroll-behavior:none;-webkit-text-size-adjust:100%;place-items:center;margin:0;padding:1.25rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:grid}.shell{flex-direction:column;align-items:center;gap:.85rem;display:flex}h1{letter-spacing:.02em;margin:0;font-size:1.35rem}.status{min-height:1.4em;color:var(--muted);text-align:center;margin:0;font-size:.95rem}.shell.solved .status{color:var(--solved);font-weight:600}.board{width:min(92vw,62vh,540px);aspect-ratio:var(--cols) / var(--rows);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative}.cells{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);border:2px solid var(--cell-line);background:var(--cell-bg);border-radius:10px;display:grid;position:absolute;inset:0;overflow:hidden}.cell{background:0 0;transition:background-color 90ms ease-out}.cell.on-trail{background:var(--cell-lit)}.overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.gridline{stroke:var(--cell-line);stroke-width:.015px}.trail{fill:none;stroke:var(--trail);stroke-width:.3px;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.shell.solved .trail{stroke:var(--solved)}.wall{stroke:var(--wall);stroke-width:.11px;stroke-linecap:round}.checkpoint{fill:var(--checkpoint-bg)}.checkpoint-label{fill:var(--checkpoint-fg);font-family:system-ui,sans-serif;font-size:.4px;font-weight:600}.controls{gap:.6rem;display:flex}button{font:inherit;color:inherit;border:1px solid var(--cell-line);background:var(--button-bg);cursor:pointer;border-radius:8px;padding:.5rem 1.1rem}button:active{transform:translateY(1px)}
