:root{--bg: #f4f1ea;--surface: #fffdf8;--fg: #1f2933;--muted: #6b7280;--line: #d8d2c4;--key: #e3ded2;--tile-empty: #fffdf8;--correct: #1f8a4c;--present: #c98600;--absent: #4b5563;--accent: #1f2933;color-scheme:light}:root[data-theme=dark]{--bg: #15191e;--surface: #1d232a;--fg: #eceae4;--muted: #9aa3ad;--line: #343c46;--key: #38414b;--tile-empty: #1d232a;--accent: #eceae4;--correct: #2fa365;--present: #d99a10;--absent: #6b7685;color-scheme:dark}:root[data-contrast=high]{--correct: #d9480f;--present: #1c7ed6}:root[data-theme=dark][data-contrast=high]{--correct: #f76707;--present: #4dabf7}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}.app{max-width:500px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 12px env(safe-area-inset-bottom)}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.header-right{display:flex;justify-content:flex-end;gap:2px}.title{text-align:center}h1{margin:0;font-size:1.35rem;letter-spacing:.02em;font-weight:800;line-height:1.1}h1 span{color:var(--correct)}.sub{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}.icon-btn{width:40px;height:40px;border:0;background:none;border-radius:8px;font-size:1.15rem;font-weight:700}.icon-btn:hover{background:var(--key)}.main{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px;min-height:0}.toast-slot{height:22px;display:flex;align-items:center}.toast{background:var(--fg);color:var(--bg);padding:5px 14px;border-radius:6px;font-size:.85rem;font-weight:600}.remaining{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.cross{display:flex;flex-direction:column;align-items:center;gap:6px}.cross-labels{display:flex;gap:8px}.tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}.tag--done{background:var(--correct);border-color:var(--correct);color:#fff}.grid{display:grid;gap:3px}.grid-row{display:grid;grid-template-columns:repeat(5,var(--cell));gap:3px}.grid{--cell: clamp(30px, min(11vw, 4.6vh), 48px)}.cell{width:var(--cell);height:var(--cell);display:grid;place-items:center;font-weight:800;font-size:calc(var(--cell) * .5);border-radius:4px;background:var(--tile-empty);border:2px solid var(--line)}.cell--empty{background:transparent;border-color:transparent}.cell--locked{background:var(--correct);border-color:var(--correct);color:#fff;animation:pop .25s ease}.cell--revealed{color:var(--muted)}.cell--center{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--bg)}.cell--center.cell--locked{border-color:var(--accent)}.cross-note{display:none;margin:0;font-size:.72rem;color:var(--muted);gap:6px;align-items:center}.center-swatch{width:12px;height:12px;border:2px solid var(--accent);border-radius:2px;display:inline-block}.history{display:grid;gap:4px}.footer{padding:10px 0 12px}.kbd{display:grid;gap:6px}.kbd-row{display:flex;justify-content:center;gap:5px}.key{flex:1 1 0;max-width:44px;height:52px;border:0;border-radius:6px;font-weight:700;font-size:1rem;background:var(--key);color:var(--fg);padding:0;touch-action:manipulation}.key--wide{flex:1.6 1 0;max-width:66px;font-size:.78rem}.key:active{filter:brightness(.9)}.result{text-align:center;padding:4px 0}.result h2{margin:0;font-size:1.3rem}.result-sub{margin:2px 0 10px;color:var(--muted)}.answers{display:flex;justify-content:center;gap:28px;margin:0 0 12px}.answers dt{font-size:.72rem;color:var(--muted);font-weight:700}.answers dd{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:.12em}.result-actions{display:flex;gap:8px;justify-content:center}.btn{border:1px solid var(--line);background:var(--surface);padding:10px 18px;border-radius:8px;font-weight:700;min-height:44px}.btn--primary{background:var(--correct);color:#fff;border-color:var(--correct);min-width:150px}.note{min-height:1.2em;margin:6px 0 0;font-size:.8rem;color:var(--muted)}.next{margin:2px 0 0;font-size:.85rem;color:var(--muted)}.countdown{font-variant-numeric:tabular-nums;font-weight:800;color:var(--fg)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:grid;place-items:center;padding:16px;z-index:10}.modal{background:var(--surface);width:min(440px,100%);max-height:90vh;overflow:auto;border-radius:12px;padding:14px 18px 18px;box-shadow:0 10px 40px #0000004d}.modal:focus{outline:none}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal h2{margin:0;font-size:1.15rem}.modal h3{margin:16px 0 6px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.prose ul{padding-left:18px}.prose li{margin:6px 0}.legend{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:center;font-size:.9rem}.fine{font-size:.8rem;color:var(--muted)}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;margin-top:8px}.stat-n{font-size:1.8rem;font-weight:800}.stat-l{font-size:.72rem;color:var(--muted)}.dist-row{display:grid;grid-template-columns:14px 1fr;gap:6px;align-items:center;margin:4px 0;font-size:.85rem}.bar{background:var(--correct);color:#fff;padding:2px 8px;border-radius:3px;text-align:right;font-weight:700}.setting{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.setting small{display:block;color:var(--muted)}.setting input{width:22px;height:22px;accent-color:var(--correct)}@keyframes pop{50%{transform:scale(1.08)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes shake{20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.shake-host[data-shake]{animation:shake .35s ease}:root[data-motion=off] *,:root[data-motion=off] *:before{animation:none!important;transition:none!important}@media (prefers-reduced-motion: reduce){*,*:before{animation:none!important;transition:none!important}}@media (min-height: 760px){.cross-note{display:flex}}@media (max-height: 700px){.key{height:44px}.footer{padding:6px 0 8px}.kbd{gap:5px}}.modes{display:flex;justify-content:center;gap:4px;padding:6px 0 0}.mode{border:0;background:none;padding:4px 14px;border-radius:99px;font-size:.8rem;font-weight:700;color:var(--muted)}.mode--on{background:var(--fg);color:var(--bg)}.hrow{display:grid;grid-template-columns:repeat(5,var(--htile));gap:4px;--htile: clamp(26px, min(9vw, 3.8vh), 42px)}.tile{width:var(--htile);height:var(--htile);display:grid;place-items:center;font-weight:800;font-size:calc(var(--htile) * .5);background:var(--tile-empty);border:2px solid var(--line);border-radius:4px}.tile--filled{border-color:var(--muted);animation:pop .12s ease}.split{--a: var(--key);--d: var(--key);background:linear-gradient(180deg,var(--a) 0 50%,var(--d) 50% 100%) border-box}.st-correct-a{--a: var(--correct)}.st-present-a{--a: var(--present)}.st-absent-a{--a: var(--absent)}.st-correct-d{--d: var(--correct)}.st-present-d{--d: var(--present)}.st-absent-d{--d: var(--absent)}.tile.split{border-color:transparent;color:#fff;text-shadow:0 0 3px rgb(0 0 0 / .7),0 1px 1px rgb(0 0 0 / .6)}.tile.flip{animation:flip .5s ease both}.split-key{margin:0 0 2px;font-size:.7rem;color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center}.mini-tile{width:12px;height:12px;border-radius:2px;background:linear-gradient(180deg,var(--correct) 0 50%,var(--absent) 50% 100%);display:inline-block}.history{display:grid;gap:4px;justify-items:center}.history>.hrow{justify-self:center}.key.split{background:linear-gradient(180deg,var(--a) 0 50%,var(--d) 50% 100%) border-box}.key.st-correct-a,.key.st-present-a,.key.st-absent-a,.key.st-correct-d,.key.st-present-d,.key.st-absent-d{color:#fff;text-shadow:0 0 3px rgb(0 0 0 / .7)}.legend .swatch{width:22px;height:22px;border-radius:4px}.swatch.st-correct{background:var(--correct)}.swatch.st-present{background:var(--present)}.swatch.st-absent{background:var(--absent)}:root[data-holiday=halloween]{--bg: #170d20;--surface: #241532;--fg: #f7ecdc;--muted: #b9a5cc;--line: #47305e;--key: #3b2553;--tile-empty: #2e1b41;--accent: #ff7a1a;--correct: #3fa34d;--present: #ff7a1a;--absent: #5a4670;color-scheme:dark}:root[data-holiday=halloween][data-contrast=high]{--correct: #2f9e44;--present: #4dabf7}:root[data-holiday=halloween] body{background-image:radial-gradient(ellipse at 50% -20%,#3a1d55 0%,transparent 60%);background-attachment:fixed}:root[data-holiday=halloween] h1{font-family:Creepster,Chiller,fantasy;font-weight:400;font-size:1.8rem;letter-spacing:.08em;color:#ff7a1a;text-shadow:0 2px 0 #3b0d0d}:root[data-holiday=halloween] h1 span{color:#b47cff}:root[data-holiday=halloween] .result h2{font-family:Creepster,fantasy;font-weight:400;font-size:1.7rem;letter-spacing:.05em;color:#ffb067}:root[data-holiday=halloween] .mode--on{background:#ff7a1a;color:#1a0f24}:root[data-holiday=halloween] .cell--center{border-color:#ff7a1a;box-shadow:0 0 10px #ff7a1a88}:root[data-holiday=halloween] .cell--locked{box-shadow:0 0 10px #3fa34d88}:root[data-holiday=halloween] .tag--done{color:#fff}:root[data-holiday=thanksgiving]{--bg: #fbf3e4;--surface: #fffaf0;--fg: #3d2614;--muted: #8a6a4c;--line: #e3cfae;--key: #efdcbc;--tile-empty: #fffaf0;--accent: #c2531b;--correct: #5f8a2e;--present: #d99a1e;--absent: #9c8670;color-scheme:light}:root[data-holiday=thanksgiving][data-theme=dark]{--bg: #24170e;--surface: #321f13;--fg: #f6e7cf;--muted: #c4a582;--line: #553821;--key: #4a2f1c;--tile-empty: #321f13;--absent: #5e4836;color-scheme:dark}:root[data-holiday=thanksgiving][data-contrast=high]{--correct: #f76707;--present: #4dabf7}:root[data-holiday=thanksgiving] body{background-image:radial-gradient(ellipse at 50% -20%,#f2b46a55 0%,transparent 60%);background-attachment:fixed}:root[data-holiday=thanksgiving] h1{font-family:Yeseva One,Georgia,serif;font-weight:400;font-size:1.8rem;letter-spacing:.03em;color:#c2531b}:root[data-holiday=thanksgiving] h1 span{color:#8a4a12}:root[data-holiday=thanksgiving][data-theme=dark] h1 span{color:#e8a33c}:root[data-holiday=thanksgiving] .result h2{font-family:Yeseva One,Georgia,serif;font-weight:400;font-size:1.5rem;color:#c2531b}:root[data-holiday=thanksgiving] .mode--on{background:#c2531b;color:#fff8ec}:root[data-holiday=thanksgiving] .cell--center{border-color:#d99a1e;box-shadow:0 0 10px #d99a1e88}:root[data-holiday=thanksgiving] .tag--done{color:#fff}.app{position:relative}.header,.modes,.main,.footer{position:relative;z-index:1}.deco{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.moon{position:absolute;top:64px;right:4vw;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7d6,#f5d77a 60%,#c9a43c);box-shadow:0 0 60px #f5d77a66;opacity:.55}.bat{position:absolute;left:-60px;color:#0b0610;opacity:.7;animation:fly linear infinite}:root[data-holiday=halloween] .bat{color:#08040c}@keyframes fly{0%{transform:translate(0)}25%{transform:translate(30vw,-20px)}50%{transform:translate(60vw,15px)}75%{transform:translate(90vw,-10px)}to{transform:translate(115vw)}}.leaf{position:absolute;top:-40px;opacity:.55;animation:drift linear infinite}@keyframes drift{0%{transform:translate(0) rotate(0)}50%{transform:translate(6vw,55vh) rotate(180deg)}to{transform:translate(-3vw,115vh) rotate(360deg)}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:20}.confetti span{position:absolute;top:-40px;animation:fall linear both}@keyframes fall{to{transform:translateY(110vh) rotate(260deg);opacity:.2}}:root[data-motion=off] .confetti,:root[data-motion=off] .bat,:root[data-motion=off] .leaf{display:none}@media (prefers-reduced-motion: reduce){.confetti,.bat,.leaf{display:none}}.setting select{font:inherit;font-weight:600;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}.history--long .hrow{--htile: clamp(21px, min(9vw, 3.1vh), 42px)}@media (max-height: 760px){.history--long .split-key{display:none}}.history--long{gap:3px}
