:root{--page: #0a0a0a;--surface: #242424;--text: #fff4e6;--text-secondary: #e8cdbd;--hairline: rgba(255, 214, 186, .16);--accent-yellow: #ffe08a;--accent-orange: #ffa733;--accent-ember: #f0601e;--ground-deep: #4a0c07;--ground-red: #a3230f;--paper: var(--page);--ink: var(--text);--muted: var(--text-secondary);--cell: var(--surface);--line: color-mix(in srgb, var(--text) 50%, transparent);--line-soft: var(--hairline);--entry: var(--text-secondary);--wrong: var(--accent-ember);--wrong-bg: color-mix(in srgb, var(--accent-ember) 18%, var(--surface));--accent: var(--accent-orange);--accent-ink: var(--page);--peer: color-mix(in srgb, var(--text) 7%, var(--surface));--same: color-mix(in srgb, var(--accent-orange) 30%, var(--surface));--pencil: var(--text-secondary);--hint: var(--accent-yellow);--hint-bg: color-mix(in srgb, var(--accent-yellow) 26%, var(--surface));--ghost-bg: color-mix(in srgb, var(--accent-orange) 58%, var(--surface));--elim: color-mix(in srgb, var(--accent-ember) 18%, var(--surface));--place: color-mix(in srgb, var(--accent-yellow) 55%, var(--surface));--link-0: color-mix(in srgb, var(--accent-yellow) 50%, var(--surface));--link-1: color-mix(in srgb, var(--accent-orange) 50%, var(--surface));--link-2: color-mix(in srgb, var(--accent-ember) 50%, var(--surface));--link-3: color-mix(in srgb, var(--accent-yellow) 35%, var(--text-secondary));--link-4: color-mix(in srgb, var(--accent-orange) 40%, var(--text-secondary));--link-5: color-mix(in srgb, var(--accent-ember) 35%, var(--text-secondary));--shadow: 0 18px 40px rgba(0, 0, 0, .4);--corner: 16px;--corner-sm: 12px;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif: Georgia, serif;--pad: 16px;color-scheme:dark;font-family:var(--sans);color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html,body,#root{min-height:100%}html{background:var(--page)}body{margin:0;min-height:100dvh;background:radial-gradient(880px 360px at 100% -12%,color-mix(in srgb,var(--ground-red) 12%,transparent),transparent 62%),var(--page)}button,input{font:inherit;color:inherit}button{border:0;background:transparent;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,.cell:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 70%,transparent);outline-offset:2px}.cell:focus{outline:none}.app{min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px}.top{display:flex;align-items:center;gap:12px}.back{width:42px;height:42px;border-radius:var(--corner-sm);display:grid;place-items:center;flex:none;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}.bulb{display:none;margin-left:auto}.bulb.on{color:var(--accent)}.brand h1{margin:0;font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}.tag,.gesture,.invite,.explain,.nudge,.dialog p{margin:0;color:var(--muted);line-height:1.45}.tag{margin-top:4px;font-size:.92rem}.menu{flex:1;width:min(440px,100%);margin:auto;display:flex;flex-direction:column;justify-content:center;gap:22px}.menu h1{font-size:3.2rem}.menu-block h2{margin:0 0 8px;font-family:var(--serif);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.menu-levels{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu-level,.continue,.how{width:100%;min-height:52px;border-radius:var(--corner);font-size:1.05rem}.continue{font-weight:600}.play{--board: min(100%, 620px);--coord: 18px;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0}.board-column,.dock{width:var(--board)}.board-column{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}.dock{display:grid;grid-template-columns:minmax(0,1fr) 56px;column-gap:8px;row-gap:10px;align-items:stretch;min-height:0}.hint-card{grid-column:1 / -1}.pad{grid-column:1}.tools{grid-column:2}.board-wrap{width:100%;display:flex;flex-direction:column}.coord-cols,.coord-rows{color:var(--muted);font-size:.72rem;font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;pointer-events:none}.coord-cols{display:grid;grid-template-columns:repeat(9,1fr);align-items:end;justify-items:center;box-sizing:border-box;height:var(--coord);margin-left:var(--coord);padding:0 2px 2px;opacity:1;transition:height .26s ease,margin-left .26s ease,padding .26s ease,opacity .18s ease}.coord-body{display:flex;align-items:stretch;width:100%;min-width:0}.coord-rows{display:grid;grid-template-rows:repeat(9,1fr);align-items:center;justify-items:center;flex:none;box-sizing:border-box;width:var(--coord);padding:2px 2px 2px 0;opacity:1;transition:width .26s ease,padding .26s ease,opacity .18s ease}.board-slot{flex:1 1 auto;min-width:0;min-height:0}.board-sizer{box-sizing:content-box;position:relative;width:100%;height:0;padding-bottom:100%}.board{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:var(--cell);border:2px solid var(--line);border-radius:var(--corner);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow)}.board.won{box-shadow:0 0 0 3px var(--place),var(--shadow)}.cell{position:relative;display:grid;place-items:center;background:var(--cell);container-type:size;min-width:0;min-height:0}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.hint-house{background:color-mix(in srgb,var(--hint-bg) 65%,var(--cell))}.cell.hint-pattern{background:var(--hint-bg)}.cell.hint-error{background:var(--wrong-bg)}.cell.hint-elim{background:var(--elim)}.cell.wrong{background:var(--wrong-bg);color:var(--wrong)}.cell.focused{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text) 65%,transparent);z-index:1}.cell.hint-place{box-shadow:inset 0 0 0 2px var(--place)}.ripples{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;overflow:visible}.ripple{position:absolute;width:calc(100% / 9);height:calc(100% / 9);box-sizing:border-box;border-radius:50%;pointer-events:none}.ripple.out{border:2px solid color-mix(in srgb,var(--accent) 55%,var(--surface));animation-name:ripple-out;animation-timing-function:ease-out;animation-fill-mode:forwards}.ripple.in{opacity:0;border:3px solid color-mix(in srgb,var(--accent) 55%,var(--surface));box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent);animation-name:ripple-in;animation-timing-function:ease-in;animation-fill-mode:forwards}@keyframes ripple-out{0%{transform:translate(-50%,-50%) scale(.32);opacity:.9}to{transform:translate(-50%,-50%) scale(1.15);opacity:0}}@keyframes ripple-in{0%{transform:translate(-50%,-50%) scale(3.2);opacity:0}14%{opacity:.8}to{transform:translate(-50%,-50%) scale(1);opacity:.95}}.value{font-family:var(--sans);font-size:62cqi;font-weight:600;line-height:1}.cell.given .value{color:var(--ink)}.cell.entry .value{color:var(--entry);font-weight:560}.cell.wrong .value{color:var(--wrong)}.marks{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:7%;font-family:var(--sans);font-size:24cqi;color:var(--pencil)}.marks span{display:grid;place-items:center;line-height:1}.marks .hot,.marks .ghost,.marks .struck{width:88%;height:88%;justify-self:center;align-self:center;border-radius:4px;font-weight:700}.marks .hot{background:var(--same);color:var(--text)}.marks .ghost{background:var(--ghost-bg);color:var(--text)}.marks .struck{background:var(--wrong-bg);color:var(--wrong);box-shadow:inset 0 0 0 1.5px var(--wrong);text-decoration:line-through;text-decoration-thickness:1.5px}.grid-lines,.hint-links{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.grid-lines{z-index:2}.grid-lines .thin{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}.grid-lines .thick{stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}.hint-links{z-index:3}.hint-links .halo,.hint-links .strong,.hint-links .weak{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.hint-links .halo{stroke:var(--cell);stroke-width:5}.hint-links .strong,.hint-links .weak{stroke-width:2.6}.hint-links .weak{stroke-dasharray:5 4}.hint-links .tone-0 .strong,.hint-links .tone-0 .weak{stroke:var(--link-0)}.hint-links .tone-1 .strong,.hint-links .tone-1 .weak{stroke:var(--link-1)}.hint-links .tone-2 .strong,.hint-links .tone-2 .weak{stroke:var(--link-2)}.hint-links .tone-3 .strong,.hint-links .tone-3 .weak{stroke:var(--link-3)}.hint-links .tone-4 .strong,.hint-links .tone-4 .weak{stroke:var(--link-4)}.hint-links .tone-5 .strong,.hint-links .tone-5 .weak{stroke:var(--link-5)}.mark-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);pointer-events:none}.mark-overlay .overlay-cell{container-type:size;min-width:0;min-height:0}.gesture{max-width:100%;text-align:center;font-size:.85rem;line-height:1.35}.gesture-keys{display:none}.pad{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0}.tools{display:flex;flex-direction:column;gap:8px}.tool{flex:1;min-height:46px;border-radius:var(--corner-sm);display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}.icon{width:22px;height:22px;display:block}.digit{min-height:52px;border-radius:var(--corner-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);font-family:var(--sans);font-weight:600;font-size:1.55rem}.digit.on{background:var(--accent);color:var(--accent-ink);box-shadow:none}.digit.done{opacity:.38}.quiet,.primary{min-height:46px;border-radius:var(--corner-sm);padding:0 12px}.quiet{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--hairline)}.primary{background:var(--surface);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 32%,transparent)}.hint-card{display:flex;flex-direction:column;background:var(--cell);border-radius:var(--corner);padding:12px 14px;box-shadow:inset 0 0 0 1px var(--hairline);min-height:0}.hint-body{overflow:auto;min-height:0}.steps{display:flex;gap:6px;margin:0 0 8px;padding:0;list-style:none;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.steps li{padding:3px 8px;border-radius:var(--corner-sm);background:var(--hairline)}.steps li.on{background:var(--hint-bg);color:var(--text)}.summary{margin:0;font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--text)}.explain,.nudge{margin-top:8px}.nudge{color:var(--text-secondary)}.hint-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}.hint-actions .quiet,.hint-actions .primary{min-height:40px}kbd{font-family:var(--sans);font-size:.78rem;border:1px solid var(--hairline);border-bottom-width:2px;border-radius:var(--corner-sm);padding:1px 6px;background:var(--cell)}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:8}.confetti span{position:absolute;top:-16px;border-radius:3px;animation:confetti-fall ease-in forwards}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0);opacity:1}to{transform:translate3d(var(--drift),108dvh,0) rotate(var(--spin));opacity:0}}.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%);margin:0;max-width:min(440px,calc(100% - 32px));padding:12px 16px;border-radius:var(--corner);background:var(--surface);color:var(--text);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline);z-index:5}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,black 58%,transparent);display:grid;place-items:end center;padding:16px;z-index:6}.dialog{width:min(460px,100%);background:var(--cell);color:var(--ink);border-radius:var(--corner) var(--corner) var(--corner-sm) var(--corner-sm);padding:20px;box-shadow:var(--shadow)}.dialog h2{margin:0 0 8px;font-family:var(--serif);font-weight:600;font-size:1.5rem}.dialog ol{margin:8px 0 12px;padding-left:1.2rem}.dialog li+li{margin-top:4px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.keys{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}.keys li{display:flex;align-items:center;gap:6px}@media(min-width:720px){.scrim{place-items:center}.dialog{border-radius:var(--corner)}}@media(orientation:landscape){.app{gap:8px}.brand h1{font-size:1.6rem}.play{--board: min(100%, 680px);flex-direction:row;justify-content:center;align-items:flex-start;width:100%}.board-column{width:auto;flex:1 1 auto;max-width:680px;min-width:0}.dock{width:auto;flex:1 1 260px;max-width:360px;min-width:0;max-height:none;overflow:visible}.hint-card{max-height:none;min-height:72px}.digit{min-height:44px}}@media(orientation:landscape)and (max-height:560px){.brand h1{font-size:1.35rem}.board-column{flex:0 0 auto;width:auto;max-width:none}.play{--caption: 32px}.board-wrap{width:calc(100dvh - 88px - var(--caption));height:calc(100dvh - 88px - var(--caption));aspect-ratio:auto;flex:none}.coord-body{flex:1 1 auto;min-width:0;min-height:0}.board-slot{height:100%}.board-sizer{height:100%;padding-bottom:0}.dock{flex:1 1 auto;max-width:none;max-height:none}.digit{min-height:36px;font-size:1.2rem}.tool,.quiet,.primary{min-height:36px}}@media(orientation:landscape)and (max-height:520px)and (max-width:980px){.app:has(.play){padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));gap:4px}.app:has(.play) .brand{display:flex;align-items:baseline;gap:8px}.app:has(.play) .brand h1{font-size:1.2rem}.app:has(.play) .tag{margin-top:0}.app:has(.play) .back{width:36px;height:36px}.play{--dock-w: 220px;--fit: min( calc(100dvh - 78px) , calc(100vw - var(--dock-w) - (var(--pad) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px) );align-items:center;gap:8px}.board-column{gap:4px}.board-wrap{width:var(--fit);height:var(--fit)}.dock{flex:0 0 var(--dock-w);width:var(--dock-w);max-width:var(--dock-w);grid-template-columns:minmax(0,1fr) 44px;column-gap:6px;row-gap:6px}.pad,.tools{gap:6px}.digit{min-height:44px;font-size:1.15rem;border-radius:12px}.tool{min-height:44px;border-radius:12px}.hint-card{max-height:var(--fit);overflow:hidden}.hint-body{flex:1 1 auto}}@media(orientation:landscape)and (min-width:701px)and (min-height:521px){.dock{padding-top:var(--coord);grid-template-rows:minmax(0,1fr) auto}.hint-card{grid-row:1;align-self:start;max-height:100%;overflow:hidden}.pad,.tools{grid-row:2}}@media(orientation:landscape)and (min-width:701px)and (min-height:561px){.play{--dock-w: min(360px, calc((100% - 12px) * 360 / 1040));--board-w: min(680px, calc(100% - 12px - var(--dock-w)));display:grid;grid-template-columns:var(--board-w) var(--dock-w);justify-content:center;align-content:start;align-items:start}.board-column,.dock{width:100%;max-width:none}.dock{height:0;min-height:100%}}@media(orientation:landscape)and (min-width:701px)and (min-height:521px)and (max-height:560px){.dock{height:calc(100dvh - 88px - var(--caption, 0px))}}@media(min-width:701px)and (min-height:521px){.gesture-touch{display:none}.gesture-keys{display:inline}}@media(orientation:landscape)and (min-width:701px)and (min-height:521px){.board-column{position:relative}.gesture{position:absolute;left:0;right:0;top:calc(100% + 6px)}}@media(max-width:700px),(max-height:520px){.bulb{display:grid}.board-wrap:not(.coords) .coord-cols{height:0;margin-left:0;padding-bottom:0;opacity:0}.board-wrap:not(.coords) .coord-rows{width:0;padding-right:0;opacity:0}.hint-card,.pad,.tools{grid-row:1}.hint-card,.pad{grid-column:1;min-width:0}.tools{grid-column:2}.dock:not(.show-hints) .hint-card{display:none}.dock.show-hints .pad,.dock.show-hints .tools{display:none}.dock.show-hints{grid-template-columns:minmax(0,1fr)}.dock.show-hints .hint-card{grid-column:1 / -1}}@media(max-width:380px){:root{--pad: 10px}.brand h1{font-size:1.6rem}.tag{display:none}.digit{min-height:46px;font-size:1.35rem}}@media(orientation:portrait)and (max-width:700px){.app:has(.play){padding-left:max(2px,env(safe-area-inset-left));padding-right:max(2px,env(safe-area-inset-right))}.app:has(.play) .top,.app:has(.play) .dock{padding-left:calc(var(--pad) + env(safe-area-inset-left) - max(2px,env(safe-area-inset-left)));padding-right:calc(var(--pad) + env(safe-area-inset-right) - max(2px,env(safe-area-inset-right)))}}@media(prefers-reduced-motion:reduce){.ripple,.confetti{display:none}.coord-cols,.coord-rows{transition:none}}