:root{--bg: #0a0b14;--surface: #14162a;--text: #f2f3fb;--muted: #8a8da8;--accent: #7c8cff;--correct: #3ddc84;--incorrect: #ff5c72;--reveal: #ffcf5c;--key-gap: 6px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}.app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}.pick-screen{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.pick-screen h1{margin:0;font-size:2.25rem}.pick-screen__tagline{margin:0;color:var(--muted)}.field-label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;text-align:left}.layout-picker{width:100%}.layout-picker select{width:100%;padding:12px 14px;font-size:1rem;border-radius:10px;border:1px solid #2a2d4a;background:var(--surface);color:var(--text)}.mode-picker{width:100%}.mode-picker__options{display:flex;gap:8px}.pill{flex:1;padding:12px 8px;min-height:44px;border-radius:10px;border:1px solid #2a2d4a;background:var(--surface);color:var(--text);font-size:.95rem;touch-action:manipulation}.pill--selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,var(--surface))}.primary-button,.secondary-button{width:100%;padding:14px;min-height:44px;border-radius:10px;border:none;font-size:1.05rem;font-weight:600;touch-action:manipulation}.primary-button{background:var(--accent);color:#0a0b14}.secondary-button{background:var(--surface);color:var(--text);border:1px solid #2a2d4a}.text-button{background:none;border:none;color:var(--muted);font-size:.85rem;padding:8px;min-height:44px;touch-action:manipulation;text-decoration:underline}.quiz-screen{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px}.section-progress{width:100%;max-width:320px;display:flex;flex-direction:column;gap:6px}.section-progress__row{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-progress__label{color:var(--muted);font-size:.85rem;font-weight:600}.map-button{padding:6px 12px;min-height:36px;border-radius:8px;border:1px solid #2a2d4a;background:var(--surface);color:var(--accent);font-size:.8rem;touch-action:manipulation}.streak-bar{position:relative;height:20px;border-radius:10px;background:var(--surface);overflow:hidden}.streak-bar__fill{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .2s ease}.streak-bar__count{position:relative;z-index:1;display:block;text-align:center;font-size:.7rem;line-height:20px;color:var(--text);mix-blend-mode:difference}.section-progress__toast{margin:0;text-align:center;color:var(--correct);font-size:.85rem;font-weight:600}.target-banner{display:flex;flex-direction:column;align-items:center;gap:4px}.target-banner__progress{color:var(--muted);font-size:.85rem}.target-banner__target{font-size:4rem;font-weight:700;color:var(--accent);line-height:1}.target-banner__hint{color:var(--muted);font-size:.85rem}.keyboard-grid{position:relative;margin:0 auto}.key{position:absolute;border-radius:8px;border:1px solid #2a2d4a;background:var(--surface);color:var(--text);font-size:1rem;font-weight:600;touch-action:manipulation;transition:background-color .12s ease}.key:active{filter:brightness(1.15)}.key--correct{background:var(--correct);color:#0a0b14;animation:key-pulse .35s ease}.key--incorrect{background:var(--incorrect);color:#0a0b14;animation:key-shake .35s ease}.key--reveal{background:var(--reveal);color:#0a0b14}.key--locked{opacity:.35}@keyframes key-pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes key-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (prefers-reduced-motion: reduce){.key--correct,.key--incorrect{animation:none;transition:background-color .12s ease}}.map-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0b14e6;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.map-overlay__panel{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;border-radius:16px;background:var(--bg);border:1px solid #2a2d4a}.map-overlay__panel h2{margin:0;color:var(--accent)}.finish-button{padding:10px 20px;min-height:44px;border-radius:10px;border:1px solid #2a2d4a;background:transparent;color:var(--muted);touch-action:manipulation}.stats-screen{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.stats-screen h1{margin:0}.stats-screen__layout{margin:0;color:var(--accent);font-weight:600}.stats-screen__section-progress{margin:0;color:var(--muted);font-size:.85rem}.stats-screen__summary{display:flex;gap:16px;width:100%}.stat-card{flex:1;padding:16px;border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:4px}.stat-card__value{font-size:1.75rem;font-weight:700}.stat-card__label{color:var(--muted);font-size:.8rem}.hardest-keys{width:100%;text-align:left}.hardest-keys h2{font-size:1rem;color:var(--muted);margin-bottom:8px}.hardest-keys ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.hardest-keys li{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;background:var(--surface)}.hardest-keys__letter{font-weight:700;font-size:1.1rem}.hardest-keys__accuracy{color:var(--muted);font-size:.9rem}.hardest-keys__empty{color:var(--muted)}.stats-screen__actions{width:100%;display:flex;flex-direction:column;gap:10px}