@font-face{font-family:Alegreya;src:url(/assets/alegreya-500-DJA1k-1L.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+2010-2027,U+2030-203A,U+20AC,U+2212}@font-face{font-family:Alegreya Sans;src:url(/assets/alegreya-sans-400-D3gE3vsM.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+2010-2027,U+2030-203A,U+20AC,U+2212}@font-face{font-family:Alegreya Sans;src:url(/assets/alegreya-sans-700-Ca__pnET.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+2010-2027,U+2030-203A,U+20AC,U+2212}:root{color-scheme:light;--paper: #f3ebd9;--paper-raised: #fbf7ec;--ruling: rgb(36 48 92 / .055);--ink: #24305c;--ink-soft: #5b6181;--accent: #9a2c26;--on-accent: #fbf7ec;--focus: #24305c;--shadow: rgb(36 48 92 / .16);--board-empty: #fcf9f1;--board-empty-mark: #8c8270;--board-line: #b3a587;--clue-rail: #e9dfc7;--clue-rail-lit: #efcfc3;--card-paper: #f4ecdc;--card-ink: #23305a;--card-accent: #9e2b25;--card-shadow: rgb(35 48 90 / .28);--font-display: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", "Noto Naskh Arabic", Georgia, serif;--font-text: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;--touch: 44px;--radius: 4px;--rule-width: 2px}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper: #131a33;--paper-raised: #1c2445;--ruling: rgb(239 230 209 / .04);--ink: #efe6d1;--ink-soft: #aea795;--accent: #d4705f;--on-accent: #131a33;--focus: #efe6d1;--shadow: rgb(0 0 0 / .45);--board-empty: #4a463f;--board-empty-mark: #d4ccb8;--board-line: #586082;--clue-rail: #1f284b;--clue-rail-lit: #46304a}}*,*:before,*:after{box-sizing:border-box}:root{font-family:var(--font-text);font-size:106.25%;line-height:1.4;-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;min-block-size:100%;background-color:var(--paper);color:var(--ink)}body{background-image:linear-gradient(var(--ruling) 1px,transparent 1px),linear-gradient(90deg,var(--ruling) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}#app{min-block-size:100dvh;display:flex;flex-direction:column}h1,h2{font-family:var(--font-display);font-weight:500;line-height:1.15;overflow-wrap:anywhere}.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,10vw,3.75rem);letter-spacing:.01em;color:var(--accent)}.screen:not(.home) .title{font-size:clamp(1.625rem,6.5vw,2.25rem);max-inline-size:22ch}.subtitle{margin:0;font-family:var(--font-display);font-size:1.25rem;color:var(--ink)}.note{margin:0;max-inline-size:32ch;color:var(--ink-soft)}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.icon{flex:none;inline-size:1.25em;block-size:1.25em}[dir=rtl] .icon.is-directional{transform:scaleX(-1)}.nav-link{min-block-size:var(--touch);display:inline-flex;align-items:center;gap:.375rem;padding-inline:.25rem;color:var(--ink);text-decoration:none;font-weight:700;border-radius:var(--radius)}.nav-link span{text-decoration:underline;text-decoration-color:var(--ink-soft);text-decoration-thickness:1px;text-underline-offset:.2em}.nav-link:hover span{text-decoration-color:var(--accent)}.control,.button{min-block-size:var(--touch);min-inline-size:var(--touch);max-inline-size:100%;padding-block:.375rem;padding-inline:.875rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:var(--rule-width) solid var(--ink-soft);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink);font:inherit;font-weight:700;line-height:1.2;text-decoration:none;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation}.button{min-block-size:48px;padding-inline:1.25rem}.control:hover:not(:disabled),.button:hover{border-color:var(--ink)}.control:disabled{border-style:dashed;background:transparent;color:var(--ink-soft);cursor:default}.control:disabled .icon{opacity:.6}.control.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.control.danger{border-color:var(--accent);color:var(--accent)}.control:focus-visible,.button:focus-visible,.nav-link:focus-visible,.level:focus-visible,.swatch:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.screen.home{gap:1rem}.emblem{inline-size:min(34vw,132px)}.home .subtitle{margin-block-start:-.5rem}.levels{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-block-start:.5rem}.level{inline-size:48px;block-size:48px;border:var(--rule-width) solid var(--ink-soft);border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;background:var(--paper-raised);color:var(--ink);text-decoration:none;font-weight:700;font-variant-numeric:lining-nums tabular-nums}.level.is-done{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.level.is-locked{border-style:dashed;background:transparent;color:var(--ink-soft)}.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(.25rem,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;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .75rem;border-block-end:1px solid var(--board-line)}.play-title{margin:0;font-size:1.375rem;color:var(--accent)}.play-body{inline-size:100%;max-inline-size:64rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.preview-figure{inline-size:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}.preview-box{inline-size:100%;block-size:min(24dvh,13rem);display:flex;align-items:center;justify-content:center}.preview-frame{position:relative;line-height:0}.preview-quarter{position:absolute;top:0;left:0;inline-size:50%;block-size:50%;outline:2px dashed var(--ink);outline-offset:-1px;pointer-events:none}.preview-caption{max-inline-size:26rem;margin:0;color:var(--ink-soft);font-size:.9375rem;line-height:1.3;text-align:center}.preview{display:block;box-shadow:0 1px 6px var(--shadow);-webkit-tap-highlight-color:transparent}.board-column{position:relative;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:stretch}.col-clue{inline-size:var(--cell);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding-block:4px;background:var(--clue-rail);border-inline-end:1px solid var(--board-line)}.col-clue:first-child{border-inline-start:1px solid var(--board-line)}.row-clues{grid-area:rows;display:flex;flex-direction:column}.row-clue{--glyph: min(22px, calc((var(--cell) - 6px) / 2));block-size:var(--cell);display:flex;flex-flow:column wrap;align-content:flex-end;align-items:center;justify-content:center;gap:2px;background:var(--clue-rail);border-block-end:1px solid var(--board-line)}.row-clue:first-child{border-block-start:1px solid var(--board-line)}.col-clue.is-lit,.row-clue.is-lit{background:var(--clue-rail-lit)}.row-clue .glyph{inline-size:calc(var(--clue-col) - 4px);margin-inline:2px}.board{grid-area:board;display:block;touch-action:none;cursor:pointer;outline:1px solid var(--board-line);-webkit-tap-highlight-color:transparent}.board:focus{outline:1px solid var(--board-line)}.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:34px;block-size:var(--glyph, 22px);padding-block:0;padding-inline:4px 5px;border:var(--rule-width) solid var(--ink-soft);border-radius:999px;background:var(--paper-raised);color:var(--ink);font:700 .875rem/1 var(--font-text);font-variant-numeric:lining-nums tabular-nums;display:inline-flex;align-items:center;justify-content:center;gap:3px;cursor:pointer;touch-action:manipulation}.glyph-knot{flex:none;inline-size:15px;block-size:11px;border:1.5px solid var(--ink);border-radius:2px;background:var(--dye)}.glyph-run{border-radius:3px}.glyph-run .glyph-knot{inline-size:17px;block-size:8px;border-radius:0}.board-grid.is-compact .row-clue .glyph{min-inline-size:0;padding-inline:2px 3px;gap:2px}.board-grid.is-compact .row-clue .glyph-knot{inline-size:7px;block-size:11px}.glyph.is-satisfied{border-style:dashed;background:var(--paper);color:var(--ink-soft)}.glyph.is-broken{border-color:var(--accent);outline:var(--rule-width) solid var(--accent);text-decoration:line-through;text-decoration-thickness:2px}.glyph.is-selected{outline:3px solid var(--focus);outline-offset:1px}.glyph:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.glyph.is-intro,.glyph.is-lesson{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.glyph.is-lesson{animation:guide-pulse 1.4s ease-in-out infinite}@keyframes guide-pulse{50%{box-shadow:0 0 0 3px var(--paper),0 0 0 7px var(--ink)}}@media(prefers-reduced-motion:reduce){.glyph.is-lesson,.swatch.is-lesson{animation:none}}.glyph .state-icon{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;inline-size:13px;block-size:13px;padding:1px;border-radius:50%;background:var(--paper);color:var(--ink);stroke-width:3.5}.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:var(--radius);background:var(--paper-raised);color:var(--ink);font-size:1rem;line-height:1.3;text-align:start}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.swatch{position:relative;min-inline-size:64px;min-block-size:64px;padding:5px 6px 4px;border:var(--rule-width) solid var(--ink-soft);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink);font:400 .9375rem/1.1 var(--font-text);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;touch-action:manipulation}.swatch-knot{inline-size:40px;block-size:29px;border:1.5px solid var(--ink);border-radius:3px;background:var(--dye)}.swatch-name{max-inline-size:7rem;overflow-wrap:anywhere}.swatch-key{position:absolute;inset-block-start:2px;inset-inline-end:4px;color:var(--ink-soft);font-size:.75rem;font-weight:700;font-variant-numeric:lining-nums tabular-nums}@media(hover:none)and (pointer:coarse){.swatch-key{display:none}}.swatch.is-chosen{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink);font-weight:700}.swatch.is-lesson{animation:guide-pulse 1.4s ease-in-out infinite}.controls,.confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}.confirm-text{font-weight:700}.solved{inline-size:min(100%,26rem);padding-block:.75rem;border-block:var(--rule-width) solid var(--accent);display:flex;flex-direction:column;align-items:center;gap:.75rem}.solved p{margin:0;font-family:var(--font-display);font-size:1.25rem;color:var(--accent)}.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(--paper-raised);border-block-start:3px double var(--ink);box-shadow:0 -4px 16px var(--shadow);text-align:start;display:flex;flex-direction:column;gap:.5rem}.sheet-title{margin:0;font-family:var(--font-text);font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.sheet-text{margin:0;font-size:1.1875rem}.sheet-knot{display:inline-block;inline-size:.9em;block-size:.9em;margin-inline-end:.4em;vertical-align:-.1em;border:1px solid var(--ink);border-radius:2px;background:var(--dye)}.sheet-state{margin:0;display:flex;align-items:center;gap:.375rem;color:var(--ink-soft)}.sheet-state .state-icon{inline-size:1.125rem;block-size:1.125rem}.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-figure{flex:1 1 0;position:sticky;inset-block-start:1rem}.preview-box{block-size:min(64dvh,34rem)}.board-column{flex:1 1 0}}.howto-open{min-block-size:var(--touch);padding-inline:.625rem}.howto{position:fixed;inset-inline:0;inset-block-end:0;z-index:12;margin-inline:auto;max-inline-size:32rem;padding:1rem 1.25rem max(1rem,env(safe-area-inset-bottom));background:var(--paper-raised);border-block-start:3px double var(--ink);box-shadow:0 -4px 16px var(--shadow);text-align:start;display:flex;flex-direction:column;gap:.625rem}.howto-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 1rem}.howto-progress{color:var(--ink-soft);font-size:.875rem}.howto-text{margin:0;font-size:1.25rem;line-height:1.3}.howto-dots{display:flex;gap:.375rem}.howto-dot{inline-size:8px;block-size:8px;border:var(--rule-width) solid var(--ink-soft);border-radius:50%}.howto-dot.is-current{border-color:var(--ink);background:var(--ink)}.howto-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.screen.play[data-howto=board] .board,.screen.play[data-howto=preview] .preview-frame{outline:3px solid var(--accent);outline-offset:4px}.screen.play[data-howto=clues] .col-clues,.screen.play[data-howto=clues] .row-clues{outline:3px solid var(--accent);outline-offset:2px}.screen.play[data-howto] .play-body{padding-block-end:12rem}.coach{inline-size:min(100%,26rem);margin:0;padding:.625rem .75rem;border:var(--rule-width) solid var(--ink);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink);text-align:start;display:flex;flex-direction:column;gap:.5rem}.coach-text{margin:0;font-size:1.0625rem;line-height:1.3}.coach-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.intro{position:absolute;z-index:5;transform:translateY(calc(-100% - 10px));display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .625rem;border:var(--rule-width) solid var(--ink);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink);box-shadow:0 2px 10px var(--shadow);font:inherit;font-size:1rem;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:-8px;inline-size:12px;block-size:12px;background:var(--paper-raised);border-inline-end:var(--rule-width) solid var(--ink);border-block-end:var(--rule-width) solid var(--ink);transform:rotate(45deg)}.intro-text{flex:1}.intro .intro-close{inline-size:1.125rem;block-size:1.125rem;color:var(--ink-soft)}.intro:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.screen.reveal,.screen.end{justify-content:flex-start}.screen.reveal{flex:none;block-size:100dvh;gap:.5rem;padding-block:max(.25rem,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.625rem;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:1rem}.carpets li{inline-size:min(120px,calc((100% - 2rem) / 3))}.share{display:contents}a.control{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.share-panel{max-block-size:100dvh;overflow-y:auto;align-items:stretch}.share-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.share-image{display:block;align-self:center;max-inline-size:100%;max-block-size:52dvh;inline-size:auto;block-size:auto;border-radius:.25rem;box-shadow:0 1px 6px var(--shadow)}.share-copied{margin:0;min-block-size:1.5em;text-align:center;color:var(--ink-soft)}.share-copied:empty{min-block-size:0}.share-manual{display:flex;flex-direction:column;gap:.25rem}.share-link{font:inherit;padding:.5rem;border:2px solid var(--ink-soft);border-radius:.375rem;background:var(--paper);color:var(--ink);inline-size:100%}
