:root{--bg: #f6f7f9;--surface: #ffffff;--text: #1a1d24;--text-dim: #6b7280;--accent: #4f6df5;--accent-text: #ffffff;--good: #16a34a;--bad: #dc2626;--gold: #d97706;--bar-track: #e5e7eb;--key-bg: #d3d6da;--key-text: #1a1d24;--radius: 14px;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #10131a;--surface: #1a1f2b;--text: #edf0f5;--text-dim: #8b93a3;--accent: #6d86ff;--good: #4ade80;--bad: #f87171;--gold: #fbbf24;--bar-track: #2a3040;--key-bg: #80848a;--key-text: #ffffff}}:root[data-theme=dark]{color-scheme:dark;--bg: #10131a;--surface: #1a1f2b;--text: #edf0f5;--text-dim: #8b93a3;--accent: #6d86ff;--good: #4ade80;--bad: #f87171;--gold: #fbbf24;--bar-track: #2a3040;--key-bg: #80848a;--key-text: #ffffff}:root[data-theme=light]{color-scheme:light;--bg: #f6f7f9;--surface: #ffffff;--text: #1a1d24;--text-dim: #6b7280;--accent: #4f6df5;--good: #16a34a;--bad: #dc2626;--gold: #d97706;--bar-track: #e5e7eb;--key-bg: #d3d6da;--key-text: #1a1d24}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}html{overflow:hidden}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}#app{max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px}.brand{display:flex;align-items:center;gap:8px}.btn-home{border:none;background:transparent;cursor:pointer;display:block;padding:6px 10px;margin:-6px 0 -6px -10px;border-radius:10px}.logo-header{display:block;height:34px;width:auto}@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .btn-home,:root:not([data-theme=dark]) .howto-welcome .logo-welcome{background:#10141d}}:root[data-theme=light] .btn-home,:root[data-theme=light] .howto-welcome .logo-welcome{background:#10141d}.hud{display:flex;gap:16px}.hud-stat{text-align:right}.hud-stat span{display:block;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}.hud-stat label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.timer-zone{position:relative;margin:0 16px 4px}.timer{position:relative;height:22px;border-radius:11px;background:var(--bar-track);overflow:hidden}.timer-bar{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border-radius:11px;background:var(--good);transform-origin:left center;transition:background-color .25s ease-out}.timer-bar.warn{background:var(--gold)}.timer-bar.danger{background:var(--bad)}.timer-text{position:absolute;top:0;left:50%;translate:-50% 0;height:22px;display:grid;place-items:center;padding:0 6px;width:max-content;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none;transition:color .25s ease-out}.timer-text.danger{color:var(--bad)}.timer-text.pulse{animation:timer-pulse .38s cubic-bezier(.22,1,.36,1)}@keyframes timer-pulse{0%{transform:scale(1)}30%{transform:scale(1.5)}to{transform:scale(1)}}.screen{flex:1;display:flex;flex-direction:column;padding:16px;min-height:0}.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);text-align:center}#screen-start{justify-content:center;gap:18px;text-align:center;overflow-y:auto}.seed-word{font-size:2.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.rules{color:var(--text-dim);line-height:1.5;max-width:34ch;margin:0 auto}.rules strong{color:var(--text)}.theme-line{text-align:center;font-weight:700;color:var(--gold);font-size:.95rem}.theme-hint{text-align:center;font-size:.85rem;color:var(--text-dim);margin-top:-8px}.prompt-theme{text-align:center;font-weight:600;color:var(--gold);font-size:.78rem;margin-top:2px}.btn-primary{margin:0 auto;padding:14px 42px;font-size:1.05rem;font-weight:700;color:var(--accent-text);background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer;transition:opacity .15s}.btn-primary:disabled{opacity:.5;cursor:default}.btn-secondary{margin:0 auto;padding:12px 32px;font-size:.95rem;font-weight:700;color:var(--text);background:var(--surface);border:2px solid var(--bar-track);border-radius:var(--radius);cursor:pointer}.btn-help{width:30px;height:30px;border-radius:50%;border:2px solid var(--bar-track);background:var(--surface);color:var(--text-dim);font-weight:800;font-size:.9rem;cursor:pointer;margin-right:12px;flex-shrink:0;display:grid;place-items:center;padding:0}.btn-theme{margin-left:auto;margin-right:8px;font-size:.85rem}.mode-pill{font-style:normal;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;vertical-align:middle;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 8px}.streak-line{text-align:center;font-weight:600;color:var(--text-dim)}.over-percentile{text-align:center;font-weight:700;color:var(--accent);animation:rise-in .3s cubic-bezier(.22,1,.36,1) backwards}.streak-line strong{color:var(--gold)}.today-summary{display:flex;flex-direction:column;gap:10px;background:var(--surface);border-radius:var(--radius);padding:16px}.today-line{font-weight:700;font-size:1.05rem}.expert-line{color:var(--gold);font-size:.95rem}.over-actions{display:flex;flex-direction:column;gap:10px}.howto-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:12px;background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.howto-card{max-width:430px;max-height:96%;overflow-y:auto;background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px #00000059;animation:rise-in .3s cubic-bezier(.22,1,.36,1) backwards}.howto-card h2{text-align:center;font-size:1.2rem;font-weight:800;letter-spacing:.02em}.howto-welcome{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}.logo-welcome{display:block;height:36px;width:auto;box-sizing:content-box;padding:5px 9px;border-radius:10px}.howto-card .kicker{margin-top:-8px}.howto-chain{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.howto-word{background:var(--bg);border-radius:10px;padding:6px 10px;font-size:.95rem;font-weight:700;letter-spacing:.04em}.howto-word b{color:var(--accent)}.howto-arrow{color:var(--text-dim);font-weight:700}.howto-rules{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.88rem;line-height:1.4;color:var(--text-dim)}.howto-rules li{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline}.rule-icon{text-align:center;font-size:.95rem}.howto-rules b{color:var(--text)}.howto-rules .overlap-accent{color:var(--accent);font-weight:700}.howto-card .btn-primary{padding:11px 36px;font-size:1rem}.share-fallback{margin-top:8px;padding:12px;background:var(--surface);border:1px dashed var(--text-dim);border-radius:10px;font-family:ui-monospace,monospace;font-size:.85rem;line-height:1.5;white-space:pre-wrap;text-align:center;user-select:all;-webkit-user-select:all}.prompt{text-align:center;padding:4px 0 2px}.required-letter{position:relative;font-size:3.2rem;font-weight:800;line-height:1.1;text-transform:uppercase;color:var(--accent)}.required-letter span{display:inline-block;transform-origin:50% 85%}.required-letter .chain-tail{color:var(--accent);display:inline}.required-letter.pop span{animation:letter-squash .42s cubic-bezier(.34,1.56,.64,1)}@keyframes letter-squash{0%{transform:scale(.65,1.25)}40%{transform:scale(1.18,.82)}70%{transform:scale(.94,1.06)}to{transform:scale(1)}}.required-letter:after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:3px solid var(--accent);opacity:0;pointer-events:none}.required-letter.pop:after{animation:ring-ping .5s 80ms cubic-bezier(.22,1,.36,1) both}.required-letter.pop.gold:after{border-color:var(--gold)}@keyframes ring-ping{0%{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.6)}}.feedback{min-height:1.4em;text-align:center;font-size:.9rem;font-weight:600;opacity:0;transition:opacity .25s ease-out}.feedback.good,.feedback.bad,.feedback.gold{opacity:1;transition-duration:.1s}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.feedback.gold{color:var(--gold)}.time-float{position:absolute;right:8px;top:24px;font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--good);pointer-events:none;animation:float-up .7s cubic-bezier(.22,1,.36,1) forwards}.time-float.gold{color:var(--gold)}@keyframes float-up{0%{transform:translateY(4px);opacity:0}25%{opacity:1}to{transform:translateY(-18px);opacity:0}}.chain{list-style:none;overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:6px 2px}.chain li{display:flex;align-items:baseline;justify-content:space-between;background:var(--surface);border-radius:10px;padding:9px 14px;animation:pop-in .18s ease-out}.chain .word{font-weight:700;text-transform:lowercase;letter-spacing:.03em}.chain .word .link-letter{color:var(--accent)}.chain .meta{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--text-dim)}.chain .meta .pts{font-weight:700;color:var(--text)}.chain li.hard-start .word{color:var(--gold)}@keyframes pop-in{0%{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}#screen-over{gap:14px;text-align:center;overflow-y:auto}.final-stats{display:flex;justify-content:center;gap:28px}#over-title{font-size:1.3rem;font-weight:800;letter-spacing:.18em;color:var(--bad)}.over-rank{display:flex;flex-direction:column;gap:2px}.over-rank .rank-name{font-size:1.25rem;font-weight:800;letter-spacing:.03em;color:var(--gold)}.over-rank .rank-next{font-size:.85rem;font-weight:600;color:var(--text-dim)}.today-rank{font-weight:800;font-size:1.05rem;color:var(--gold)}#screen-over:not([hidden]){animation:impact-shake .28s .2s linear}#screen-over:not([hidden]) #over-title{animation:slam-in .32s cubic-bezier(.22,1,.36,1) both}#screen-over:not([hidden]) .over-rank{animation:rise-in .3s .14s cubic-bezier(.22,1,.36,1) backwards}#screen-over:not([hidden]) .final-stat{animation:rise-in .3s cubic-bezier(.22,1,.36,1) backwards}#screen-over:not([hidden]) .final-stat:nth-child(1){animation-delay:.22s}#screen-over:not([hidden]) .final-stat:nth-child(2){animation-delay:.3s}#screen-over:not([hidden]) .final-stat:nth-child(3){animation-delay:.38s}#screen-over:not([hidden]) .streak-line,#screen-over:not([hidden]) .best-word,#screen-over:not([hidden]) .chain-recap,#screen-over:not([hidden]) .over-actions{animation:rise-in .32s .48s cubic-bezier(.22,1,.36,1) backwards}@keyframes slam-in{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.94);opacity:1}to{transform:scale(1)}}@keyframes impact-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}@keyframes rise-in{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.final-stat span{display:block;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}.final-stat label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.best-word{color:var(--text-dim);font-size:.92rem}.best-word strong{color:var(--gold)}.chain-recap{flex:0 1 auto;max-height:38dvh}.entry-area{display:flex;flex-direction:column;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--bar-track)}.word-display{min-height:46px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;letter-spacing:.06em;text-transform:lowercase;background:var(--surface);border:2px solid var(--bar-track);border-radius:12px;cursor:text;transition:border-color .15s ease-out}.word-display.active{border-color:var(--accent)}.word-display.empty .placeholder{color:var(--text-dim);font-size:.95rem;font-weight:500;letter-spacing:normal;margin-left:5px}.word-display.selected .typed{background:var(--accent);color:var(--accent-text);border-radius:3px;padding:0 3px}.word-display.selected .caret{visibility:hidden}.word-display .caret{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.18em;background:var(--accent);animation:caret-blink 1.1s steps(1) infinite}@keyframes caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}.kb{display:flex;flex-direction:column;gap:8px;padding:2px 2px calc(56px + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none}.kb-row{display:flex;gap:7px;justify-content:center}.kb-row:nth-child(2){padding:0 4.5%}.kb-key{flex:1;max-width:46px;height:54px;border:none;border-radius:6px;background:var(--key-bg);color:var(--key-text);font-family:inherit;font-size:1rem;font-weight:800;text-transform:uppercase;cursor:pointer;touch-action:manipulation;display:grid;place-items:center}.kb-key:active{filter:brightness(.75);transform:scale(.94)}.kb-wide{flex:1.7;max-width:80px;font-size:.72rem;letter-spacing:.05em}@media(hover:hover)and (pointer:fine){.kb{display:none}}.entry-area.shake{animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}50%{transform:translate(7px)}75%{transform:translate(-4px)}}[hidden]{display:none!important}@media(max-height:540px){.topbar{padding:6px 16px 4px}.brand{font-size:1rem}.timer{height:18px}.screen{padding:8px 16px}.prompt{padding:0}.prompt .kicker{font-size:.62rem}.required-letter{font-size:2.1rem}.required-letter:after{width:56px;height:56px;margin:-28px 0 0 -28px}.feedback{font-size:.8rem}.chain li{padding:6px 12px}.chain .word{font-size:.9rem}.entry-area{padding:4px 8px calc(4px + env(safe-area-inset-bottom));gap:5px}.word-display{min-height:36px;font-size:1.1rem}.kb{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.kb-key{height:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}