:root{--bg:#f1ece2;--fg:#312b24;--muted:#6f6557;--accent:#4a6a9e;--win:#6f8f70;--bad:#b5675f;--border:#d8cebd;--frame:#d6cbb8;--floor:#e8dfcf;--seam:#0000000b;--grout:#0000001a;--block:#bcae98;--texture:.22;--path:#b98068;--path-trim:#a26b55;--sheen:#ffffff2e;--loop:#9a84a6;--loop-trim:#846e91;--won:#85a086;--won-trim:#718c72;--tile-loop:#82699624;--tile-full:#00000006;--sprites:saturate(.3);--slab:#e6ddcc;--slab-hi:#efe8da;--slab-edge:#c4b69e;--slab-light:#ffffffa6;--slab-shade:#3c2d1e2e;--slab-sub:#665c4c;--ribbon:#8a4c47;--ribbon-fg:#f7ede6;--current:#93604b;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--pad-x:max(12px, env(safe-area-inset-left), env(safe-area-inset-right));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#201d1a;--fg:#e0d9ce;--muted:#918778;--accent:#7f9acb;--win:#8fae90;--bad:#c98179;--border:#3e3831;--frame:#2e2a25;--floor:#35302a;--seam:#0000001f;--grout:#00000047;--block:#24211d;--texture:.14;--path:#b08068;--path-trim:#976b56;--sheen:#ffffff1f;--loop:#8f7a98;--loop-trim:#7a6683;--won:#7f9a80;--won-trim:#6c876d;--tile-loop:#82699624;--tile-full:#ffffff05;--sprites:saturate(.3) brightness(.7);--slab:#2d2924;--slab-hi:#34302a;--slab-edge:#4a4239;--slab-light:#ffffff12;--slab-shade:#00000073;--slab-sub:#a59b8b;--ribbon:#7a4440;--ribbon-fg:#f1e3dc;--current:#93604b}}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%}body{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;margin:0;font:16px/1.5 system-ui,-apple-system,sans-serif}#root{height:100%}select,button{font:inherit;font-family:var(--serif);color:var(--fg);background:linear-gradient(var(--slab-hi), var(--slab));border:1px solid var(--slab-edge);box-shadow:inset 0 1px 0 var(--slab-light), 0 1px 0 var(--slab-shade);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:4px;min-height:44px;padding:6px 14px}button{cursor:pointer}button:active:not(:disabled){box-shadow:inset 0 2px 3px var(--slab-shade);transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button.primary,.toast{--notch:12px;background:var(--ribbon);color:var(--ribbon-fg);box-shadow:none;clip-path:polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);border:none;border-radius:0}button.icon{width:44px;height:44px;box-shadow:none;background:0 0;border-color:#0000;place-items:center;padding:0;font-size:1.25rem;font-weight:600;display:grid}.glyph{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:22px;height:22px}button.icon .glyph{width:24px;height:24px}.icon-spacer{width:44px}.app{max-width:640px;height:100dvh;padding:env(safe-area-inset-top) var(--pad-x) env(safe-area-inset-bottom);grid-template-rows:auto auto minmax(0,1fr) auto;margin:0 auto;display:grid;overflow:hidden}.topbar{align-items:center;gap:8px;height:52px;display:flex}.app>.topbar{border-bottom:1px solid var(--border)}.title{flex-direction:column;flex:1;align-items:center;min-width:0;line-height:1.2;display:flex}.title .name{font-family:var(--serif);letter-spacing:.03em;font-size:1.15rem;font-weight:400}.title .sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.85rem;overflow:hidden}.status{font-family:var(--serif);text-align:center;white-space:nowrap;text-overflow:ellipsis;height:32px;margin:0;font-weight:600;line-height:32px;overflow:hidden}.status.win{color:var(--win)}.status .bad{color:var(--bad)}.board-area{justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.toast{width:max-content;max-width:92%;padding:8px calc(var(--notch) + 12px);font-family:var(--serif);text-align:center;pointer-events:none;font-size:.95rem;animation:.15s ease-out fade-in;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.actions{grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0 12px;display:grid}.actions button{font-variant:small-caps;letter-spacing:.02em;justify-content:center;align-items:center;gap:6px;min-height:52px;font-size:1.1rem;display:flex}.actions button .glyph{opacity:.75}.board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;width:100%;height:100%;display:block}.board .sprite{image-rendering:pixelated}.board .frame{fill:var(--frame)}.board .floor{fill:var(--floor)}.board .seams{fill:none;stroke:var(--seam);stroke-width:.025px}.board .grout{fill:none;stroke:var(--grout);stroke-width:.04px}.board .block{fill:var(--block)}.board .masonry{opacity:var(--texture);filter:var(--sprites)}.board .gate{filter:var(--sprites);opacity:.8}.board .tile{fill:#0000;transition:fill .12s}.board .tile.full{fill:var(--tile-full)}.board .tile.wall{fill:none}.board .tile.loop{fill:var(--tile-loop)}.board .tile.hint{fill:var(--accent);fill-opacity:.35;animation:.9s ease-in-out infinite alternate pulse}.board .trim{fill:var(--path-trim);stroke:var(--path-trim);stroke-width:.05px}.board .cloth{fill:var(--path)}.board .cursed .trim{fill:var(--loop-trim);stroke:var(--loop-trim)}.board .cursed .cloth{fill:var(--loop)}.board.solved .trim{fill:var(--won-trim);stroke:var(--won-trim);transition:fill .4s,stroke .4s}.board.solved .cloth{fill:var(--won);transition:fill .4s}.board .link{stroke:var(--sheen);stroke-width:.03px}.board .end{fill:var(--path-trim)}.board .banner{animation:.4s ease-out both unfurl}.board .active{fill:none;stroke:var(--accent);stroke-width:.07px;animation:.12s ease-out grow}.board .refused{fill:var(--bad);stroke:var(--bad);stroke-width:.06px;animation:.45s ease-out forwards flash}.board .hint-link{stroke:var(--accent);stroke-width:.1px;stroke-dasharray:.1 .1;stroke-linecap:round}.board .cursor{fill:none;stroke:var(--accent);stroke-width:.06px}dialog.menu{width:100%;max-width:640px;max-height:88dvh;color:var(--fg);background:0 0;border:none;margin:auto auto 0;padding:0}dialog.menu::backdrop{background:#00000059}.sheet{background:var(--bg);padding:8px var(--pad-x) calc(16px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;max-height:88dvh;animation:.18s ease-out slide-up;overflow-y:auto}.sheet-head{justify-content:space-between;align-items:center;display:flex}.sheet h2{font-family:var(--serif);margin:0;font-size:1.2rem;font-weight:400}.sheet h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 0 8px;font-size:.85rem}.levels{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.levels button{min-height:64px;box-shadow:none;background:var(--slab);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);border:none;border-radius:0;flex-direction:column;align-items:center;padding:8px 4px 16px;line-height:1.2;display:flex;position:relative}.levels button span{color:var(--slab-sub);font-size:.8rem}.levels button.current{background:var(--current);color:#fff}.levels button.current span{color:inherit}.levels button:focus-visible,button.primary:focus-visible{box-shadow:inset 0 0 0 3px var(--accent);outline:none}.levels button[data-solved]:after{content:"✓";color:var(--won-trim);font-size:.75rem;position:absolute;top:3px;right:8px}.row{justify-content:space-between;align-items:center;min-height:52px;display:flex}.stepper{align-items:center;gap:8px;display:flex}.stepper button{width:44px;padding:0;font-size:1.3rem}.stepper output{text-align:center;min-width:2.5em;font-weight:600}button.wide{width:100%;margin-top:10px;display:block}button.link{box-shadow:none;color:var(--accent);background:0 0;border-color:#0000}.howto{max-width:640px;padding:env(safe-area-inset-top) var(--pad-x) calc(24px + env(safe-area-inset-bottom));margin:0 auto}.howto .topbar{background:var(--bg);position:sticky;top:0}.howto article h2{font-family:var(--serif);margin:1.4em 0 .3em;font-size:1.1rem;font-weight:400}.howto article ul{padding-left:1.2em}.howto article li{margin:.3em 0}.howto .wide{margin-top:24px}@keyframes pulse{0%{opacity:1}to{opacity:.45}}@keyframes grow{0%{stroke-width:.2px;opacity:.4}}@keyframes flash{0%{opacity:.55}to{opacity:0}}@keyframes unfurl{0%{opacity:0;transform:translateY(-.15px)}}@keyframes fade-in{0%{opacity:0}}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}}