:root{--paper: #f4ecdc;--ink: #23305a;--ink-soft: #4b5578;--accent: #9e2b25;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}@media(prefers-color-scheme:dark){:root{--paper: #161c35;--ink: #eee5d2;--ink-soft: #b9b3a4;--accent: #d96a5a}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-block-size:100%;background:var(--paper);color:var(--ink)}#app{min-block-size:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding-block:max(1.5rem,env(safe-area-inset-top)) max(1.5rem,env(safe-area-inset-bottom));padding-inline:max(1rem,env(safe-area-inset-left)) max(1rem,env(safe-area-inset-right));text-align:center}.title{margin:0;font-size:clamp(2.25rem,9vw,3.5rem);letter-spacing:.02em;color:var(--accent);overflow-wrap:anywhere}.subtitle{margin:0;font-size:1.125rem;color:var(--ink)}.note{margin:0;max-inline-size:32ch;color:var(--ink-soft)}.link{color:var(--accent);min-block-size:44px;display:inline-flex;align-items:center}:root{--board-empty: #d8cfbb;--board-line: #a99b7e;--focus: #1f6fb2;--sheet: #fbf6ea;--shadow: rgb(35 48 90 / .18)}@media(prefers-color-scheme:dark){:root{--board-empty: #34312c;--board-line: #3a4470;--empty-mark: #8f887a;--focus: #7fb7ec;--sheet: #1d2443;--shadow: rgb(0 0 0 / .45)}}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.screen.play{justify-content:flex-start;gap:.5rem;padding-inline:max(.5rem,env(safe-area-inset-left)) max(.5rem,env(safe-area-inset-right));padding-block:max(.5rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.play-header{inline-size:100%;max-inline-size:64rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.play-title{margin:0;font-size:1.25rem;color:var(--accent)}.play-body{inline-size:100%;max-inline-size:64rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.preview-box{inline-size:100%;block-size:min(26dvh,14rem);display:flex;align-items:center;justify-content:center}.preview{display:block;box-shadow:0 1px 6px var(--shadow)}.board-column{inline-size:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem}.board-area{inline-size:100%;display:flex;justify-content:center}.board-grid{display:grid;grid-template-rows:auto auto;grid-template-areas:"corner cols" "rows board"}.corner{grid-area:corner}.col-clues{grid-area:cols;display:flex;align-items:flex-end}.col-clue{inline-size:var(--cell);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding-block-end:4px}.row-clues{grid-area:rows;display:flex;flex-direction:column}.row-clue{--glyph: min(21px, calc((var(--cell) - 4px) / 2));block-size:var(--cell);display:flex;flex-flow:column wrap;align-content:flex-end;justify-content:center;gap:2px;padding-inline-end:3px}.board{grid-area:board;display:block;touch-action:none;cursor:pointer;border-radius:2px}.board:focus{outline:none}.board:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.screen.play[data-solved=true] .board{cursor:default}.glyph{position:relative;min-inline-size:var(--glyph, 21px);block-size:var(--glyph, 21px);padding:0 3px;border:2px solid var(--ink-soft);border-radius:999px;background:var(--dye);color:var(--dye-ink);font:700 .8125rem/1 system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}.glyph-run{border-radius:3px;min-inline-size:var(--glyph, 21px);box-shadow:inset 0 -3px 0 var(--dye-ink)}.glyph.is-satisfied{opacity:.55;border-style:dotted}.glyph.is-broken{border-color:var(--accent);outline:2px solid var(--accent);text-decoration:line-through}.glyph.is-selected{outline:3px solid var(--focus);outline-offset:1px}.glyph:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.glyph .state-icon{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;inline-size:12px;block-size:12px;border-radius:50%;background:var(--paper);color:var(--ink)}.glyph.is-broken .state-icon{color:var(--accent)}.fill-hint{margin:0;max-inline-size:22rem;padding:.5rem .75rem;border-inline-start:4px solid var(--ink);border-radius:.25rem;background:var(--sheet);color:var(--ink);font-size:.9375rem;line-height:1.3;text-align:start}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.swatch{inline-size:48px;block-size:48px;border-radius:50%;border:2px solid var(--ink-soft);background:var(--dye);color:var(--dye-ink);font:700 .875rem/1 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}.swatch.is-chosen{border:4px solid var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.swatch:focus-visible,.control:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.controls,.confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}.control{min-block-size:44px;min-inline-size:44px;padding-inline:1rem;border:2px solid var(--ink-soft);border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}.control:disabled{opacity:.4;cursor:default}.control.danger{border-color:var(--accent);color:var(--accent)}.solved{padding:.75rem 1rem;border:2px solid var(--accent);border-radius:.5rem;color:var(--accent);font-weight:700}.solved{display:flex;flex-direction:column;align-items:center;gap:.75rem}.solved p{margin:0}.sheet{position:fixed;inset-inline:0;inset-block-end:0;z-index:10;margin-inline:auto;max-inline-size:32rem;padding:1rem 1.25rem max(1rem,env(safe-area-inset-bottom));background:var(--sheet);border-start-start-radius:1rem;border-start-end-radius:1rem;box-shadow:0 -4px 16px var(--shadow);text-align:start;display:flex;flex-direction:column;gap:.5rem}.sheet-title{margin:0;font-size:.875rem;color:var(--ink-soft)}.sheet-text{margin:0;font-size:1.125rem}.sheet-state{margin:0;display:flex;align-items:center;gap:.375rem;color:var(--ink-soft)}.sheet-state .state-icon{inline-size:1rem;block-size:1rem}.sheet-state.is-broken{color:var(--accent)}.sheet .control{align-self:flex-end}@media(min-width:52rem){.play-body{flex-direction:row;align-items:flex-start;justify-content:center;gap:2rem}.preview-box{flex:1 1 0;block-size:min(70dvh,36rem);position:sticky;inset-block-start:1rem}.board-column{flex:1 1 0}}.button{min-block-size:48px;padding-inline:1.5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700}.button.primary,.control.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}.button:focus-visible,.level:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.levels{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-block-start:.5rem}.level{inline-size:48px;block-size:48px;border:2px solid var(--ink-soft);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font-weight:700}.level.is-done{border-color:var(--accent);background:var(--accent);color:var(--paper)}.level.is-locked{opacity:.4;border-style:dashed}.board-column{position:relative}.intro{position:absolute;z-index:5;transform:translateY(calc(-100% - 10px));display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .625rem;border:2px solid var(--ink);border-radius:.5rem;background:var(--sheet);color:var(--ink);box-shadow:0 2px 10px var(--shadow);font:inherit;font-size:.9375rem;line-height:1.3;text-align:start;cursor:pointer;user-select:none;-webkit-user-select:none}.intro:after{content:"";position:absolute;left:calc(var(--arrow) - 7px);bottom:-9px;inline-size:12px;block-size:12px;background:var(--sheet);border-inline-end:2px solid var(--ink);border-block-end:2px solid var(--ink);transform:rotate(45deg)}.intro-text{flex:1}.intro-close{flex:none;inline-size:1rem;block-size:1rem;color:var(--ink-soft)}.intro:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.glyph.is-intro{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.screen.reveal,.screen.end{justify-content:flex-start}.screen.reveal{flex:none;block-size:100dvh;gap:.5rem;padding-block:max(.5rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}.reveal-stage{position:relative;flex:1 1 0;min-block-size:0;inline-size:100%;display:flex;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.reveal-view{position:relative;overflow:hidden;touch-action:none;filter:drop-shadow(0 2px 8px var(--shadow));cursor:zoom-in}.reveal-stage.is-zoomed .reveal-view{cursor:grab}.reveal-view:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.reveal-carpet{position:absolute;inset-block-start:0;inset-inline-start:0;display:block;transform-origin:0 0;-webkit-tap-highlight-color:transparent}.reveal-stage.is-easing .reveal-carpet{transition:transform .2s ease-out}.reveal-carpet.is-fading{animation:carpet-fade .25s ease-out both}@keyframes carpet-fade{0%{opacity:0}}.reveal-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;max-inline-size:none}@media(prefers-reduced-motion:reduce){.reveal-stage.is-easing .reveal-carpet{transition:none}}.reveal-title{margin:0;font-size:1.5rem;color:var(--ink)}.carpet-box{inline-size:100%;display:flex;justify-content:center}.carpet{display:block;max-inline-size:100%;filter:drop-shadow(0 2px 8px var(--shadow));animation:carpet-in .7s ease-out both}@keyframes carpet-in{0%{opacity:0;transform:translateY(8px)}}@media(prefers-reduced-motion:reduce){.carpet{animation:none}}.carpets{list-style:none;margin:0;padding:0;inline-size:100%;max-inline-size:40rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.carpets li{inline-size:min(120px,calc((100% - 1.5rem) / 3))}