*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:background-color .24s,color .24s}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}textarea{font:inherit;color:inherit}:root,:root[data-theme=light]{--bg:#fafaf7;--bg-elev:#fff;--fg:#1c1c1c;--muted:#7a7a75;--untyped:#c9c9c2;--correct:#2f7a3a;--correct-bg:#d8eedd;--corrected:#8a6300;--corrected-bg:#f6e6b8;--wrong:#c0392b;--wrong-bg:#f4cfcb;--wrong-strong:#c0392b;--wrong-typed:#fff;--caret:#1c1c1c;--accent:#1c1c1c;--gauge-track:#e6e6df;--border:#00000014;--shadow:0 1px 2px #0000000a, 0 8px 24px #0000000f;--shadow-strong:0 2px 6px #00000014, 0 18px 48px #0000001f;--swell-color:#ffdc8c66}:root[data-theme=dark]{--bg:#0e0f10;--bg-elev:#16181a;--fg:#ececec;--muted:#8a8a87;--untyped:#3f3f3f;--correct:#aedfb4;--correct-bg:#7ec98a2e;--corrected:#f0d27a;--corrected-bg:#e6c45a38;--wrong:#f4a89e;--wrong-bg:#e5736442;--wrong-strong:#e57364f2;--wrong-typed:#fff;--caret:#ececec;--accent:#ececec;--gauge-track:#2a2c2f;--border:#ffffff14;--shadow:0 1px 2px #0006, 0 8px 24px #00000080;--shadow-strong:0 2px 6px #00000080, 0 18px 48px #0009;--swell-color:#ffdc8c29}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.paste-screen{flex:1;justify-content:center;align-items:center;padding:48px 24px;animation:.22s both fade-in;display:flex}.paste-inner{width:100%;max-width:640px}.title{letter-spacing:-.01em;margin:0 0 4px;font-size:28px;font-weight:500}.tagline{color:var(--muted);margin:0 0 32px;font-size:15px}.paste-textarea-wrap{position:relative}.paste-textarea{background:var(--bg-elev);border:1px solid var(--border);resize:vertical;border-radius:14px;outline:none;width:100%;min-height:220px;padding:20px 56px 20px 20px;font-size:15.5px;line-height:1.55;transition:box-shadow .22s,border-color .22s;box-shadow:0 0 #0000}.paste-textarea:focus-visible{border-color:var(--border);box-shadow:0 0 0 4px var(--gauge-track)}.reroll-btn{width:32px;height:32px;color:var(--muted);border-radius:8px;justify-content:center;align-items:center;font-size:18px;transition:background .16s,color .16s,transform .16s;display:inline-flex;position:absolute;top:14px;right:14px}.reroll-btn:hover{background:var(--gauge-track);color:var(--fg)}.reroll-btn:active{transform:scale(.94)}.paste-top{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.paste-top .title,.paste-top .tagline{margin-bottom:0}.paste-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.save-form{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:10px;margin-top:20px;padding:18px;display:flex}.save-input{background:var(--bg);width:100%;color:var(--fg);border:1px solid var(--border);border-radius:10px;outline:none;padding:10px 14px;font-size:15px;transition:box-shadow .2s}.save-input:focus-visible{box-shadow:0 0 0 3px var(--gauge-track)}.save-form-actions{justify-content:flex-end;gap:12px;margin-top:4px;display:flex}.library-screen{flex:1;min-height:0;padding:48px 24px 80px;animation:.22s both fade-in;overflow-y:auto}.library-header{justify-content:space-between;align-items:flex-start;gap:16px;max-width:920px;margin:0 auto 28px;display:flex}.library-header .title{margin-bottom:4px}.library-header .tagline{margin:0}.library-empty{justify-content:center;max-width:920px;margin:0 auto;padding:32px 0;display:flex}.library-topics{flex-direction:column;gap:28px;max-width:920px;margin:0 auto;display:flex}.library-topic-title{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:12px;font-weight:500}.library-items{flex-direction:column;gap:10px;display:flex}.library-item{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;transition:border-color .16s;overflow:hidden}.library-item:hover{border-color:color-mix(in srgb, var(--fg) 18%, var(--border))}.library-item-row{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:14px 18px;display:grid}.library-item-main{text-align:left;color:inherit;cursor:pointer;background:0 0;border:0;min-width:0;padding:4px 0}.library-item-title{margin-bottom:4px;font-size:16px;font-weight:500}.library-item-preview{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.library-item-stats{gap:18px;display:flex}.library-item-stats .stat{flex-direction:column;align-items:flex-end;min-width:56px;display:flex}.library-item-stats .stat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:10px}.library-item-stats .stat-value{font-feature-settings:"tnum" 1;font-size:16px;font-weight:500}.library-item-actions{align-items:center;gap:12px;display:flex}.btn-text{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 6px;font-size:13px;transition:color .14s,background .14s}.btn-text:hover{color:var(--fg);background:var(--gauge-track)}.btn-text.btn-danger:hover{color:var(--wrong)}.library-history{border-top:1px solid var(--border);padding:0 18px 16px}.library-history table{border-collapse:collapse;font-feature-settings:"tnum" 1;width:100%;margin-top:10px;font-size:13px}.library-history th{text-align:left;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 8px 4px 0;font-size:10px;font-weight:500}.library-history td{border-top:1px solid var(--border);color:var(--fg);padding:6px 8px 6px 0}.btn{letter-spacing:.01em;-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;padding:10px 20px;font-size:14.5px;font-weight:500;transition:transform .14s,box-shadow .14s,background .14s,color .14s,opacity .14s;display:inline-flex}.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--shadow)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-strong);transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:var(--shadow);transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{color:var(--muted)}.btn-ghost:hover{color:var(--fg);background:var(--gauge-track)}.btn-small{border-radius:10px;padding:6px 10px;font-size:14px}.practice-screen{flex-direction:column;flex:1;min-height:0;animation:.22s both practice-in;display:flex}.practice-header{align-items:center;gap:28px;padding:22px 28px 0;display:flex}.metric{flex-direction:column;gap:2px;display:flex}.metric-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:11px}.metric-value{font-feature-settings:"tnum" 1;font-size:18px;font-weight:500}.practice-header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.practice-progress{background:0 0;flex:none;height:2px;overflow:hidden}.practice-progress-fill{background:var(--muted);opacity:.55;will-change:width;width:0%;height:100%;transition:width .14s cubic-bezier(.2,.7,.2,1)}.practice-stage{flex:1;justify-content:center;align-items:flex-start;min-height:0;padding:14vh 24px 30vh;display:flex;position:relative;overflow-y:auto}.practice-text{letter-spacing:.06em;outline:none;width:100%;max-width:min(74vw,820px);font-family:JetBrains Mono,Fira Code,SF Mono,Menlo,ui-monospace,monospace;font-size:30px;line-height:1.7;transition:opacity .26s;position:relative}.word{white-space:nowrap;display:inline-block}.practice-screen.finished .practice-text{opacity:.3}.practice-screen.paused .practice-text{opacity:.25;transition:opacity .22s}.practice-screen.paused .caret{display:none}.practice-paused{pointer-events:none;text-align:center;z-index:8;flex-direction:column;justify-content:center;align-items:center;animation:.2s both fade-in;display:flex;position:fixed;inset:0}.practice-paused-label{letter-spacing:.04em;color:var(--fg);font-size:36px;font-weight:500}.practice-paused-hint{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:10px;font-size:13px}.ch{display:inline;position:relative}.ch-target{white-space:pre;background-color:#0000;border-radius:4px;padding:2px 0;display:inline-block;position:relative}.ch-untyped{color:var(--untyped)}.ch-correct .ch-target{background-color:var(--correct-bg);color:var(--correct)}.ch-corrected .ch-target{background-color:var(--corrected-bg);color:var(--corrected)}.ch-space.ch-correct{background-color:var(--correct-bg);color:var(--correct);border-radius:4px;padding:10px 0}.ch-space.ch-corrected{background-color:var(--corrected-bg);color:var(--corrected);border-radius:4px;padding:10px 0}.ch-wrong .ch-target{color:var(--wrong);transition:none;animation:.28s forwards wrong-settle}@keyframes wrong-settle{0%{background-color:var(--wrong-strong);color:var(--wrong-typed)}to{background-color:var(--wrong-bg);color:var(--wrong)}}.ch-wrong-typed{color:var(--wrong-typed);pointer-events:none;justify-content:center;align-items:center;animation:.28s forwards wrong-typed-fade;display:flex;position:absolute;inset:0}@keyframes wrong-typed-fade{0%{opacity:1}50%{opacity:1}to{opacity:0}}.ch-newline .ch-target{opacity:.65;margin-right:4px}.ch-newline.ch-correct .ch-target,.ch-newline.ch-corrected .ch-target,.ch-newline.ch-wrong .ch-target{opacity:.95}.caret{background:var(--caret);pointer-events:none;will-change:transform;border-radius:1px;width:2px;transition:transform 80ms cubic-bezier(.2,.7,.2,1);animation:1.1s ease-in-out infinite caret-breathe;position:absolute;top:0;left:0}@keyframes caret-breathe{0%,to{opacity:1}50%{opacity:.45}}.complete-swell{pointer-events:none;background:radial-gradient(circle at center, var(--swell-color), transparent 60%);opacity:0;animation:.6s both swell;position:absolute;inset:0}@keyframes swell{0%{opacity:0;transform:scale(.95)}40%{opacity:1}to{opacity:0;transform:scale(1.05)}}.results-overlay{background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:blur(6px);z-index:10;justify-content:center;align-items:center;padding:24px;animation:.22s both results-fade-in;display:flex;position:fixed;inset:0}.results{background:var(--bg-elev);border:1px solid var(--border);width:100%;max-width:680px;box-shadow:var(--shadow-strong);border-radius:22px;padding:36px 32px 28px;animation:.32s cubic-bezier(.2,.7,.2,1) both results-scale-in}.stars{justify-content:center;gap:8px;margin-bottom:28px;display:flex}.star{font-size:30px;line-height:1;animation:.32s cubic-bezier(.2,.7,.2,1) forwards star-pop;display:inline-block;transform:scale(0)}.star-filled{color:var(--corrected)}.star-empty{color:var(--gauge-track)}@keyframes star-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.results-row{grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px;display:grid}.results-cell{opacity:0;flex-direction:column;align-items:center;gap:10px;animation:.38s forwards cell-in;display:flex;transform:translateY(6px)}@keyframes cell-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.results-label{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:11px}.results-sub{color:var(--muted);font-feature-settings:"tnum" 1;font-size:13px}.gauge{width:140px;height:140px;position:relative}.gauge-center{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gauge-value{font-feature-settings:"tnum" 1;letter-spacing:-.01em;font-size:28px;font-weight:500}.gauge-sub{color:var(--muted);letter-spacing:.04em;margin-top:2px;font-size:12px}.duration-big{font-feature-settings:"tnum" 1;letter-spacing:-.01em;font-size:34px;font-weight:500}.results-actions{opacity:0;justify-content:center;gap:12px;margin-top:32px;animation:.32s forwards cell-in;display:flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes practice-in{0%{opacity:0}to{opacity:1}}@keyframes results-fade-in{0%{opacity:0}to{opacity:1}}@keyframes results-scale-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-delay:0s!important}.caret{animation:none!important}}