:root{--teal:#1a9384;--amber:#d9a21b;--slate:#5d6b7a;--bg:#fff;--text:#16202b;--muted:#6b7785;--border:#dde2e8;--border-filled:#9aa5b1;--active:#7fb8ff;--key-bg:#e3e8ee;--key-text:#16202b;--overlay:#fff9;--modal-bg:#fff;--toast-bg:#16202b;--toast-text:#fff;--gap:6px;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:Nunito,system-ui,sans-serif;font-weight:600}@media (prefers-color-scheme:dark){:root{--bg:#11161c;--text:#eef2f6;--muted:#94a0ad;--border:#2c353f;--border-filled:#56626f;--key-bg:#818c99;--key-text:#fff;--overlay:#0000008c;--modal-bg:#1a2129;--toast-bg:#eef2f6;--toast-text:#11161c;--slate:#363f4a}}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:560px;height:100dvh;padding:0 8px env(safe-area-inset-bottom);flex-direction:column;margin:0 auto;display:flex;overflow-x:hidden}.topbar{border-bottom:1px solid var(--border);flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;height:64px;display:grid}.topbar-side{flex-shrink:0;align-items:center;gap:2px;display:flex}.topbar-side.right{justify-content:flex-end}.topbar-side.right .mode-chip{margin-right:4px}.icon-button{color:var(--muted);background:0 0;border:0;border-radius:10px;place-items:center;padding:8px;display:grid}.icon-button:hover{color:var(--text);background:var(--key-bg)}.mode-chip{border:2px solid var(--border);height:36px;color:var(--muted);background:0 0;border-radius:999px;align-items:center;gap:6px;padding:0 12px 0 9px;font-size:16px;font-weight:900;display:flex}.mode-chip svg{width:20px;height:20px}.mode-chip span{color:var(--text)}.mode-chip:hover{border-color:var(--border-filled)}.wordmark{perspective:400px;background:0 0;border:0;gap:3px;padding:0;display:flex}.wordmark-tile{--size:clamp(26px, 7.5vw, 32px);width:var(--size);height:var(--size);font-weight:900;font-size:calc(var(--size) * .62);color:#fff;background:var(--teal);border-radius:5px;place-items:center;animation:.9s ease-in-out backwards logo-flip;display:grid}.wordmark-tile.infinity svg{stroke-width:2.6px;width:82%;height:82%}@keyframes logo-flip{0%{color:var(--text);box-shadow:inset 0 0 0 2px var(--border-filled);background:0 0;transform:rotateX(0)}20%{color:var(--text);box-shadow:inset 0 0 0 2px var(--border-filled);background:0 0;transform:rotateX(90deg)}21%{background:var(--slate);color:#fff;box-shadow:none}40%{background:var(--slate);transform:rotateX(0)}55%{background:var(--amber);transform:rotateX(90deg)}70%{background:var(--amber);transform:rotateX(0)}85%{background:var(--teal);transform:rotateX(90deg)}to{background:var(--teal);transform:rotateX(0)}}.play{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;min-height:0;padding:12px 0;display:flex;position:relative}.status{color:var(--muted);font-weight:600}.board{--tile:min(62px, calc((100vw - 48px - (var(--len) - 1) * var(--gap)) / var(--len)), calc((100dvh - 64px - 200px - 56px - (var(--rows) - 1) * var(--gap)) / var(--rows)));gap:var(--gap);display:grid}.row{gap:var(--gap);display:flex}.tile{width:var(--tile);height:var(--tile);border:2px solid var(--border);font-weight:900;font-size:calc(var(--tile) * .56);text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:8px;place-items:center;display:grid}.tile.small{--tile:40px}.tile.filled{border-color:var(--border-filled);animation:.1s ease-out pop}.tile.active{border-color:var(--active);box-shadow:0 0 0 1px var(--active)}.tile.selectable{cursor:pointer}.tile.correct,.tile.present,.tile.absent{color:#fff;border-color:#0000;animation:none}.tile.correct{background:var(--teal)}.tile.present{background:var(--amber)}.tile.absent{background:var(--slate)}.tile.correct.reveal,.tile.present.reveal,.tile.absent.reveal{animation:.5s ease-in-out backwards flip}.tile.bounce{animation:.9s backwards bounce}@keyframes pop{50%{transform:scale(1.1)}}@keyframes flip{0%{color:var(--text);border-color:var(--border-filled);background:0 0;transform:rotateX(0)}49.9%{color:var(--text);border-color:var(--border-filled);background:0 0}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-30%)}50%{transform:translateY(5%)}60%{transform:translateY(-15%)}80%{transform:translateY(2%)}to{transform:translateY(0)}}.row.shake{animation:.5s shake}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.loading{--tile:min(42px, calc((100vw - 48px - 7 * var(--gap)) / 8));flex-direction:column;align-items:center;gap:12px;display:flex}.loading-grid{gap:var(--gap);display:flex}.loading-inf{background:var(--teal);border-color:var(--teal);color:#fff;animation:1.6s ease-in-out infinite loading-pulse;display:none}.loading-inf svg{stroke-width:2.6px;width:70%;height:70%}@media (width<=520px){.loading{--tile:min(64px, 19vw)}.loading-grid{grid-template-columns:repeat(3, var(--tile));display:grid}.loading-inf{display:grid}}@keyframes loading-pulse{50%{transform:scale(.92)}}.loading-tile{border-color:var(--border-filled);animation:1.6s ease-in-out infinite backwards loading-wave}@keyframes loading-wave{0%,60%,to{color:var(--text);background:0 0;transform:rotateX(0)}15%{transform:rotateX(90deg)}30%,45%{background:var(--teal);border-color:var(--teal);color:#fff;transform:rotateX(0)}}.toasts{z-index:5;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}.toast{background:var(--toast-bg);color:var(--toast-text);white-space:nowrap;border-radius:8px;padding:10px 16px;font-weight:900;animation:.15s ease-out fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(-4px)}}.keyboard{-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;gap:7px;padding-bottom:10px;display:flex}.keyboard-row{gap:5px;display:flex}.key{background:var(--key-bg);min-width:0;height:56px;color:var(--key-text);touch-action:manipulation;border:0;border-radius:8px;flex:1;place-items:center;padding:0;font-size:18px;font-weight:900;transition:background-color .15s,transform 60ms;display:grid}.key:active{transform:scale(.95)}.key.wide{flex:1.15}.key.correct,.key.present,.key.absent{color:#fff}.key.correct{background:var(--teal)}.key.present{background:var(--amber)}.key.absent{background:var(--slate)}.button{white-space:nowrap;border:0;border-radius:999px;padding:12px 22px;font-size:16px;font-weight:900}.button.primary{background:var(--teal);color:#fff}.button.secondary{background:var(--key-bg)}.button.next{animation:.2s ease-out fade-in}.overlay{background:var(--overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;place-items:center;padding:16px;animation:.15s ease-out fade-in;display:grid;position:fixed;inset:0}.modal{background:var(--modal-bg);border-radius:16px;width:min(440px,100%);max-height:calc(100dvh - 32px);padding:20px 22px 24px;overflow:auto;box-shadow:0 10px 40px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.modal h2{margin:0;font-size:22px;font-weight:900}.modal h3{margin:20px 0 8px;font-size:15px;font-weight:900}.modal p{margin:10px 0;line-height:1.45}.muted{color:var(--muted);font-size:14px}.center{text-align:center;display:block}.link{color:var(--teal);margin:4px 0 0;font-size:14px;font-weight:900}.example{gap:4px;margin-top:14px;display:flex}.solution{text-align:center;letter-spacing:.08em;color:var(--teal);font-size:36px;font-weight:900;margin:0!important}.actions{justify-content:center;gap:10px;margin-top:20px;display:flex}.stats{text-align:center;grid-template-columns:repeat(4,1fr);margin-top:8px;display:grid}.stats strong{font-size:32px;font-weight:900;display:block}.stats span{color:var(--muted);font-size:12px}.distribution{gap:4px;display:grid}.bar-row{align-items:center;gap:8px;font-size:14px;font-weight:900;display:flex}.bar-row>span{width:14px}.bar{background:var(--slate);color:#fff;text-align:right;border-radius:4px;padding:2px 8px}.setting{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:14px 0;display:flex}.setting>div:first-child{flex-direction:column;display:flex}.segmented,.stepper{background:var(--key-bg);border-radius:10px;align-items:center;padding:3px;display:flex}.segmented button,.stepper button{background:0 0;border:0;border-radius:8px;width:40px;height:36px;font-size:18px;font-weight:900}.segmented button.selected{background:var(--teal);color:#fff}.stepper span{text-align:center;min-width:28px;font-size:18px;font-weight:900}.stepper button:disabled{opacity:.35;cursor:default}@media (width<=380px){.key{height:52px;font-size:16px}.icon-button{padding:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:1ms!important;animation-delay:0s!important}}