:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;--bg: #f4f1ea;--surface: #ffffff;--text: #1d2330;--muted: #566074;--border: #d6d0c3;--accent: #1e73be;--accent-text: #ffffff;--legal: #800080;--hint: #00ff00;--hint-text: #0b2a0b;--bad: #c00000;--focus: #ffb300;--radius: 12px;--top-h: 3.25rem;--gap: .75rem}@media(prefers-color-scheme:dark){:root{--bg: #12151c;--surface: #1c212c;--text: #eef1f6;--muted: #a3adc0;--border: #353d4e;--accent: #4a9de0;--accent-text: #08121f;--legal: #d05cd0;--bad: #ff5a5a}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}h1,h2{line-height:1.2}h1{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.5rem;white-space:nowrap}h2{margin:0 0 .5rem;font-size:1.1rem}.logo{width:2.25rem;height:2.25rem}.app{max-width:72rem;margin:0 auto;padding:0 1rem 1rem}.top{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;min-height:var(--top-h);padding:.4rem 0}.signin{min-height:2.25rem}.layout{min-width:0}.play{display:flex;flex-direction:column;gap:var(--gap);min-width:0}.side{display:flex;flex-direction:column;gap:1rem;min-width:0;margin-top:1.25rem}.board-wrap{container-type:inline-size;min-width:0}.console{display:flex;flex-direction:column;gap:var(--gap);min-width:0}.actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.actions .solve,.actions .stop{grid-column:1 / -1}.options{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}.size-pick{display:flex;align-items:center;gap:.4rem;font-weight:600}select,.btn{font:inherit;min-height:2.5rem;padding:.25rem .8rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.btn{cursor:pointer;font-weight:600}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.toggle[aria-pressed=true]{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.btn.ghost{border-style:dashed;color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0}.readout div{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.2rem .3rem;text-align:center;min-width:0}.readout dt{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.stat-grid dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.readout dd{white-space:nowrap}.readout dd,.stat-grid dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}.board{display:grid;width:100%;width:min(100cqw,max(15rem,100svh - 14rem));margin-inline:auto;aspect-ratio:1;container-type:inline-size;border:4px solid #5b3a1e;border-radius:6px;overflow:hidden;touch-action:manipulation}.square{position:relative;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background-size:cover;background-position:center;cursor:default;min-width:0;min-height:0}.square.is-legal{cursor:pointer}.square:before{content:"";position:absolute;inset:0;pointer-events:none}.square.is-current:before{background:var(--accent);opacity:.75}.square.is-legal:before{background:var(--legal);opacity:.38;box-shadow:inset 0 0 0 3px var(--legal)}.square.is-legal:hover:before{opacity:.6}.square.is-hint:before{background:var(--hint);opacity:.8}.square.is-orphan:before{background:var(--bad);opacity:.85;box-shadow:inset 0 0 0 3px #fff}.square.is-orphan{animation:pulse 1s ease-in-out 3}@keyframes pulse{50%{filter:brightness(1.4)}}@media(prefers-reduced-motion:reduce){.square.is-orphan{animation:none}}.piece{position:relative;width:82%;height:82%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.piece-prev{opacity:.6}.board[data-art=new] .piece{display:block;filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000)}.board[data-art=new] .piece-prev{opacity:.8;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}.piece-shape{display:block;width:100%;height:100%;background:#fff;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}.piece-prev .piece-shape{background:#2a1608}.board[data-art=new] .square{background-size:220%}.board[data-art=new] .square.is-legal:before{opacity:.5}.board[data-art=new] .square.is-legal:hover:before{opacity:.72}.board[data-art=new] .num{text-shadow:0 0 2px #000,0 0 2px #000,0 0 4px #000}.logo-new{filter:none}@media(prefers-color-scheme:dark){.logo-new{filter:invert(1)}}.num{position:absolute;top:2%;left:6%;font-size:.75rem;font-weight:800;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;font-variant-numeric:tabular-nums;pointer-events:none}.dot{position:absolute;width:22%;height:22%;border-radius:50%;background:#fff;border:3px solid var(--legal);pointer-events:none}.hint{position:absolute;inset:auto;display:grid;place-items:center;min-width:42%;height:42%;border-radius:999px;background:var(--hint);color:var(--hint-text);border:2px solid #0b2a0b;font-weight:800;font-size:1rem;pointer-events:none}@supports (width: 1cqw){.num{font-size:clamp(.625rem,100cqw / var(--n, 8) * .24,1.1rem)}.hint{font-size:clamp(.75rem,100cqw / var(--n, 8) * .32,1.6rem)}}.btn.solve{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.btn.stop{background:var(--bad);color:#fff;border-color:var(--bad)}.check{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem}.check input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}.solver-status{min-height:1.5rem}.solver-status:empty{min-height:0;margin-top:calc(-1 * var(--gap))}.solver-status p{margin:0 0 .35rem}.solver-status progress{display:block;width:100%;height:.6rem;accent-color:var(--accent)}.bad-text{color:var(--bad);font-weight:600}@media(prefers-color-scheme:dark){.btn.stop{color:#1a0000}}.message{min-height:4.25rem;border-radius:var(--radius);padding:.4rem .75rem;text-align:center;font-weight:600}.message p{margin:.1rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.message:empty{display:none}.message.win{background:var(--accent);color:var(--accent-text)}.message.lose{background:var(--bad);color:#fff}@media(prefers-color-scheme:dark){.message.lose{color:#1a0000}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;container-type:inline-size}.panel p{margin:0 0 .6rem}.key{list-style:none;padding:0;margin:0;display:grid;gap:.35rem .75rem}@container (min-width: 18rem){.key{grid-template-columns:1fr 1fr}}.swatch{display:inline-block;width:1.1rem;height:1.1rem;border-radius:4px;vertical-align:-.2rem;margin-right:.4rem;border:1px solid var(--border)}.s-current{background:var(--accent)}.s-legal{background:var(--legal)}.s-hint{background:var(--hint)}.s-bad{background:var(--bad)}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0 0 .75rem;text-align:center}.stat-grid dd{font-size:1.3rem}@container (min-width: 20rem){.stat-grid{grid-template-columns:repeat(4,1fr)}}.best{width:100%;border-collapse:collapse}.best caption{text-align:left;font-weight:600;padding-bottom:.25rem}.best th,.best td{text-align:center;padding:.2rem .25rem;border-top:1px solid var(--border);font-weight:500;white-space:nowrap}.best th[scope=row]{text-align:left;padding-left:0}.best td{font-variant-numeric:tabular-nums;font-weight:700}.muted{color:var(--muted)}.small{font-size:.85rem}.foot{text-align:center;color:var(--muted);font-size:.85rem;padding-top:1.5rem}@media(max-width:30rem){.app{padding:0 .5rem .75rem}:root{--top-h: 3rem}h1{font-size:1.3rem}.logo{width:1.9rem;height:1.9rem}.signin{font-size:.85rem;min-height:2rem;padding:.2rem .6rem}.soon{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.readout dd{font-size:.95rem}}@media(orientation:landscape)and (min-width:33rem){:root{--fit-h: calc(100vh - var(--top-h) - .75rem);--fit-h: calc(100svh - var(--top-h) - .75rem);--console-w: 28rem}.app{max-width:calc(var(--fit-h) + var(--console-w) + 3rem)}.top{height:var(--top-h);min-height:0;flex-wrap:nowrap;padding:0}.play{display:grid;grid-template-columns:minmax(0,var(--fit-h)) minmax(15rem,1fr);justify-content:center;align-items:start;gap:1rem}.board-wrap{container-type:size;height:var(--fit-h)}.board{width:min(100cqw,100cqh);margin-inline:0}.side{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));align-items:start}}@media(orientation:landscape)and (max-height:32rem){:root{--top-h: 2.75rem;--gap: .5rem}h1{font-size:1.25rem}.logo{width:1.75rem;height:1.75rem}.signin{min-height:2rem;padding:.15rem .6rem;font-size:.85rem}select,.btn{min-height:2.25rem;padding:.2rem .6rem}.actions{grid-template-columns:auto auto 1fr}.actions .btn{white-space:nowrap;padding-inline:.5rem;font-size:.9375rem}.actions .solve,.actions .stop{grid-column:auto}.message{min-height:3.75rem;padding:.25rem .5rem}.message p{margin:0}}@media(orientation:landscape)and (min-width:75rem)and (min-height:40rem){:root{--console-w: 18rem;--side-w: 21rem}.app{display:grid;grid-template-columns:minmax(0,1fr) var(--side-w);grid-template-rows:var(--top-h) minmax(var(--fit-h),auto) auto;grid-template-areas:"top side" "main side" "foot foot";column-gap:1rem;max-width:calc(var(--fit-h) + var(--console-w) + var(--side-w) + 4rem)}.top{grid-area:top}.layout{grid-area:main}.foot{grid-area:foot}.play{grid-template-columns:minmax(0,1fr) var(--console-w)}.side{grid-area:side;align-self:start;margin-top:0;padding-top:.5rem;display:flex;flex-direction:column;align-items:stretch;gap:var(--gap);font-size:.9375rem}.side .panel{padding:.65rem .9rem}.side h2{margin-bottom:.35rem;font-size:1rem}.side .panel p{margin-bottom:.45rem;line-height:1.4}.side .panel p:last-child{margin-bottom:0}.side .stat-grid{margin-bottom:.5rem}.side .small{font-size:.8rem}.options{display:grid;grid-template-columns:auto 1fr;gap:.5rem}.options .art-pick,.options .check{grid-column:1 / -1}.solver-status,.message{font-size:.9375rem}}@media(orientation:landscape)and (min-width:75rem)and (min-height:40rem)and (max-height:56.24rem){:root{--side-w: 23rem}}@media(orientation:landscape)and (min-width:75rem)and (min-height:40rem)and (max-height:44.99rem){:root{--side-w: 25rem}.side{font-size:.875rem}}@supports (width: round(down,10px,1px)){.board{width:calc(round(down,min(100cqw,max(15rem,100svh - 14rem)) - 8px,var(--n, 8) * 1px) + 8px)}@media(orientation:landscape)and (min-width:33rem){.board{width:calc(round(down,min(100cqw,100cqh) - 8px,var(--n, 8) * 1px) + 8px)}}}