:root{--bg: #323437;--bg-alt: #2c2e31;--text: #d1d0c5;--sub: #646669;--accent: #e2b714;--error: #ca4754;--error-dark: #7e2a33;--font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px}button{font-family:var(--font);background:none;border:none;color:var(--sub);cursor:pointer;font-size:inherit}button:hover{color:var(--text)}button:disabled{cursor:default}.app{max-width:1080px;margin:0 auto;padding:1.5rem 2rem 2rem;min-height:100vh;display:flex;flex-direction:column;gap:1.5rem}.app.has-calendar{width:calc(100% - 240px);margin-right:0;margin-left:max(0px,calc((100vw - 1320px)/2))}.sub{color:var(--sub)}.accent{color:var(--accent)}.header{display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.5rem;color:var(--text);display:flex;align-items:center;gap:.5rem;padding:0}.logo-icon{color:var(--accent);font-size:1.7rem}.nav{display:flex;align-items:center;gap:1.25rem}.nav button.on{color:var(--accent)}.best-wpm{position:relative;display:inline-flex;align-items:center;min-height:30px;margin-left:.15rem;padding:.24rem .55rem .24rem .45rem;border:1px solid rgba(100,102,105,.28);border-radius:999px;color:var(--sub);background:#2c2e31b8;cursor:default}.best-wpm.has-record{border-color:#e2b71442;box-shadow:inset 0 0 14px #e2b71406}.best-wpm-crown{width:19px;height:17px;margin-right:.38rem;color:var(--accent);filter:drop-shadow(0 0 5px rgba(226,183,20,.24))}.best-wpm-score{min-width:1.25ch;color:var(--accent);font-size:.82rem;font-weight:600;line-height:1;text-align:right}.best-wpm-unit{margin-left:.3rem;color:var(--sub);font-size:.56rem;letter-spacing:.06em;line-height:1}.record-celebration{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;background:#1617198c;backdrop-filter:blur(9px) saturate(.72);-webkit-backdrop-filter:blur(9px) saturate(.72);contain:strict;isolation:isolate;will-change:opacity;animation:record-overlay-in .32s ease-out both}.record-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(226,183,20,.12),transparent 35%),radial-gradient(circle at center,transparent 26%,rgba(16,17,18,.72) 100%);animation:record-vignette-in 1s ease-out both}.record-burst{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}.record-rays{position:absolute;left:-270px;top:-270px;width:540px;height:540px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(226,183,20,.09) 0deg 7deg,transparent 7deg 20deg);mask-image:radial-gradient(circle,transparent 0 26%,#000 50%,transparent 72%);-webkit-mask-image:radial-gradient(circle,transparent 0 26%,#000 50%,transparent 72%);will-change:transform,opacity;animation:record-rays-in 1.4s .1s ease-out forwards,record-rays-turn 14s 1.5s linear infinite}.record-ring{position:absolute;border:1px solid rgba(226,183,20,.72);border-radius:50%;opacity:0;transform:translate(-50%,-50%)}.record-ring-one{width:130px;height:130px;animation:record-ring-out 1.25s .18s cubic-bezier(.16,1,.3,1) forwards}.record-ring-two{width:110px;height:110px;animation:record-ring-out 1.4s .36s cubic-bezier(.16,1,.3,1) forwards}.record-particle{--particle-x: 0px;--particle-y: 0px;--particle-rotation: 0deg;--particle-delay: 0ms;--particle-size: 4px;position:absolute;left:calc(var(--particle-size) / -2);top:calc(var(--particle-size) / -2);width:var(--particle-size);height:calc(var(--particle-size) * 2.4);border-radius:1px;background:var(--accent);box-shadow:0 0 8px #e2b71499;opacity:0;will-change:transform,opacity;animation:record-particle-fly 1.5s calc(.18s + var(--particle-delay)) cubic-bezier(.12,.7,.24,1) forwards}.record-particle-1{background:var(--text);box-shadow:none}.record-particle-2{width:3px;height:3px;border-radius:50%}.record-card{position:relative;width:min(420px,calc(100vw - 2rem));padding:3.5rem 2.5rem 2.1rem;overflow:hidden;border:1px solid rgba(226,183,20,.35);border-radius:18px;background:linear-gradient(145deg,#363738f7,#26282afa),var(--bg-alt);box-shadow:0 30px 90px #00000094,0 0 70px #e2b7141a,inset 0 1px #ffffff0a;text-align:center;will-change:transform,opacity;animation:record-card-in .7s cubic-bezier(.16,1,.3,1) both}.record-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 20%,rgba(226,183,20,.08) 48%,transparent 74%);transform:translate(-120%);animation:record-card-shine 1s .62s ease-out forwards;pointer-events:none}.record-crown-wrap{position:relative;display:grid;place-items:center;width:94px;height:78px;margin:-.35rem auto 1.1rem}.record-crown-glow{position:absolute;width:75px;height:75px;border-radius:50%;background:#e2b7143b;filter:blur(22px);animation:record-glow-pulse 1.8s .7s ease-in-out infinite}.record-crown{position:relative;width:76px;height:67px;color:var(--accent);filter:drop-shadow(0 7px 11px rgba(0,0,0,.45)) drop-shadow(0 0 9px rgba(226,183,20,.28));transform-origin:center bottom;animation:record-crown-in .8s .12s cubic-bezier(.2,1.6,.32,1) both}.record-kicker{margin:0 0 .6rem;color:var(--accent);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;animation:record-copy-in .5s .42s ease-out both}.record-card h2{margin:0;color:var(--text);font-size:1.18rem;font-weight:500;letter-spacing:.02em;text-transform:lowercase;animation:record-copy-in .5s .5s ease-out both}.record-score{display:flex;align-items:baseline;justify-content:center;min-height:6rem;margin:.2rem 0 0;color:var(--accent);animation:record-score-in .65s .55s cubic-bezier(.16,1,.3,1) both}.record-score strong{font-size:clamp(4.6rem,13vw,6.4rem);font-weight:500;letter-spacing:-.08em;line-height:1;text-shadow:0 0 28px rgba(226,183,20,.2)}.record-score span{margin-left:.65rem;color:var(--sub);font-size:.8rem;letter-spacing:.08em}.record-improvement{margin:.3rem 0 1.5rem;color:var(--sub);font-size:.74rem;animation:record-copy-in .5s .82s ease-out both}.record-dismiss{position:relative;z-index:1;padding:.45rem 1.2rem;border:1px solid rgba(226,183,20,.32);border-radius:999px;color:var(--text);font-size:.72rem;transition:color .16s,background-color .16s,border-color .16s;animation:record-copy-in .5s .95s ease-out both}.record-dismiss:hover{border-color:var(--accent);color:var(--bg);background:var(--accent)}.record-timer{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform-origin:left center;animation:record-timer 4.2s .4s linear forwards}@keyframes record-overlay-in{0%{opacity:0}}@keyframes record-vignette-in{0%{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes record-card-in{0%{opacity:0;transform:translateY(30px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes record-card-shine{to{transform:translate(120%)}}@keyframes record-crown-in{0%{opacity:0;transform:translateY(-38px) scale(1.35) rotate(-7deg)}62%{opacity:1;transform:translateY(4px) scale(.95) rotate(3deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes record-copy-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes record-score-in{0%{opacity:0;transform:scale(.76);filter:blur(7px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes record-ring-out{0%{opacity:.8;transform:translate(-50%,-50%) scale(.45)}to{opacity:0;transform:translate(-50%,-50%) scale(3.7)}}@keyframes record-particle-fly{0%{opacity:0;transform:translate(0) scale(0) rotate(0)}18%{opacity:1}to{opacity:0;transform:translate(var(--particle-x),var(--particle-y)) scale(.75) rotate(var(--particle-rotation))}}@keyframes record-rays-in{0%{opacity:0;transform:scale(.5) rotate(-16deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes record-rays-turn{to{transform:rotate(360deg)}}@keyframes record-glow-pulse{50%{opacity:.6;transform:scale(1.22)}}@keyframes record-timer{to{transform:scaleX(0)}}@media(max-width:400px){.record-card{padding-right:1.3rem;padding-left:1.3rem}.record-score strong{font-size:3.8rem}.record-score span{margin-left:.35rem}}@media(prefers-reduced-motion:reduce){.record-celebration,.record-vignette,.record-rays,.record-ring,.record-particle,.record-card,.record-card:before,.record-crown,.record-crown-glow,.record-kicker,.record-card h2,.record-score,.record-improvement,.record-dismiss{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}.record-particle,.record-timer{display:none}}.main{flex:1;display:flex;flex-direction:column}.footer{font-size:.75rem;text-align:center}.page{display:flex;flex-direction:column;gap:1.25rem}.test-layout{min-height:560px}.test-page{min-width:0}.calendar-panel{position:fixed;z-index:10;top:0;right:0;bottom:0;width:240px;display:flex;flex-direction:column;background:var(--bg);padding:1.5rem 1rem .9rem;overflow:hidden;contain:layout paint style}.calendar-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;min-height:48px;padding:0 .35rem .8rem}.calendar-heading>div{display:flex;flex-direction:column;gap:.15rem}.calendar-heading strong{color:var(--text);font-size:1rem;font-weight:500}.calendar-kicker{color:var(--accent);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.calendar-today-btn{flex:0 0 auto;color:var(--accent);border:1px solid rgba(226,183,20,.35);border-radius:999px;padding:.25rem .45rem;font-size:.58rem}.calendar-today-btn:hover{color:var(--bg);background:var(--accent)}.calendar-viewport{position:relative;flex:1;min-height:0;overflow:hidden;scroll-behavior:smooth;overscroll-behavior:contain}.calendar-spacer{width:1px;pointer-events:none}.calendar-rail{position:absolute;left:36px;top:0;bottom:0;width:1px;background:#6466694d}.calendar-day{position:relative;display:flex;align-items:center;width:100%;height:56px;padding:0 .35rem;text-align:left;transform-origin:calc(100% - 8px) center}.calendar-dot{z-index:1;width:7px;height:7px;flex:0 0 7px;margin-left:24px;border:2px solid var(--bg-alt);border-radius:50%;background:var(--sub);box-shadow:0 0 0 1px var(--sub)}.calendar-date{display:grid;grid-template-columns:24px 22px 28px;align-items:baseline;margin-left:11px;gap:.2rem;white-space:nowrap}.calendar-weekday,.calendar-month{color:var(--sub);font-size:.68rem;text-transform:lowercase}.calendar-number{color:var(--text);font-size:1rem}.calendar-day-stats{display:flex;flex-direction:column;margin-left:auto;min-width:50px;align-items:flex-end;line-height:1.25;white-space:nowrap}.calendar-day-stats span{color:var(--sub);font-size:.56rem}.calendar-day-stats strong{color:var(--text);font-size:.7rem;font-weight:500}.calendar-day-stats strong.is-strong-day{color:#73c991}.calendar-day.is-selected{z-index:2;transform:scale(1.08);transition:transform .22s cubic-bezier(.22,1,.36,1)}.calendar-day.is-selected .calendar-dot{background:var(--accent);box-shadow:0 0 0 2px #e2b71433,0 0 16px #e2b71440}.calendar-day.is-today .calendar-number,.calendar-day.is-today .calendar-weekday,.calendar-day.is-today .calendar-month{color:var(--accent)}.calendar-day.is-weekend:not(.is-future) .calendar-number,.calendar-day.is-weekend:not(.is-future) .calendar-weekday,.calendar-day.is-weekend:not(.is-future) .calendar-month{color:var(--error)}.calendar-day.is-future{opacity:.3}.calendar-day.is-future.is-selected{opacity:.62}.calendar-hint{color:var(--sub);font-size:.58rem;margin:auto 0 0;padding:.65rem .55rem 0;text-align:center}@media(max-width:820px){.app.has-calendar{width:auto;margin-right:auto;margin-left:auto}.test-layout{padding-right:0}.calendar-panel{position:relative;width:100%;height:430px;order:-1;padding:.9rem .5rem}.calendar-viewport{height:330px}}.page h2{color:var(--text);font-size:1.05rem;margin:0 0 .25rem}section{margin-bottom:.75rem}.config-bar{display:flex;align-items:center;justify-content:center;gap:.75rem;background:var(--bg-alt);border-radius:8px;padding:.4rem 1rem;align-self:center;font-size:.8rem}.config-group{display:flex;gap:.6rem}.config-sep{width:4px;height:4px;border-radius:50%;background:var(--sub);opacity:.5}.cfg{padding:.25rem .2rem;font-size:.8rem}.cfg.on{color:var(--accent)}.fade{transition:opacity .25s}.fade.faded{opacity:0;pointer-events:none}.live-stats{display:flex;gap:1.25rem;font-size:1.25rem;min-height:1.6rem;color:var(--sub)}.word-stream{position:relative;height:7.5rem;overflow:hidden;cursor:default;-webkit-user-select:none;user-select:none}.word-stream-inner{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;transition:transform .15s ease-out}.word{position:relative;margin:0 .55rem 0 0;line-height:2.5rem;font-size:1.5rem;border-bottom:2px solid transparent;height:2.5rem;display:inline-flex}.word-error{border-bottom-color:var(--error)}.char{color:var(--sub)}.char.correct{color:var(--text)}.char.incorrect{color:var(--error)}.char.extra{color:var(--error-dark)}.caret{position:absolute;left:0;top:0;width:2.5px;border-radius:2px;background:var(--accent);transition:transform .09s ease-out;z-index:2}.caret.blink{animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.hint-line{text-align:center;font-size:.75rem;margin:0}.key-cap{background:var(--bg-alt);border-radius:4px;padding:.05rem .4rem;font-size:.7rem;color:var(--text)}.keyboard{margin-top:auto;display:flex;flex-direction:column;gap:.35rem;max-width:760px;width:100%;align-self:center;padding-top:1rem}.kb-row{display:flex;gap:.35rem}.kb-key{border:1px solid var(--sub);border-radius:5px;background:var(--bg-alt);color:var(--text);font-size:.75rem;height:2.2rem;display:flex;align-items:center;justify-content:center;transition:transform .05s,background-color .05s;min-width:0}.kb-key.kb-active{transform:translateY(2px) scale(.98);background:var(--sub);color:var(--bg)}.kb-key.kb-next{color:var(--text);font-weight:700}.kb-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;font-size:.7rem;color:var(--sub);padding-top:.35rem}.kb-legend-item{display:inline-flex;align-items:center;gap:.35rem}.kb-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.results{display:flex;flex-direction:column;gap:1.25rem}.results-main{display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap}.stat-big .stat-value{font-size:3.4rem;line-height:1}.stat-label{color:var(--sub);font-size:.8rem}.stat-row{display:flex;gap:1.75rem;flex-wrap:wrap;font-size:1.1rem}.stat-small .stat-label{font-size:.7rem}.wpm-chart{width:100%;max-width:760px;background:var(--bg-alt);border-radius:8px;padding:.5rem}.chart-grid{stroke:var(--sub);stroke-opacity:.25;stroke-width:1}.chart-tick{fill:var(--sub);font-size:9px;font-family:var(--font)}.chart-wpm{fill:none;stroke:var(--accent);stroke-width:2}.chart-raw{fill:none;stroke:var(--sub);stroke-width:1.5;stroke-opacity:.6}.chart-error line{stroke:var(--error);stroke-width:1.5}.chart-dot{fill:var(--accent)}.hints{display:flex;flex-direction:column;gap:.75rem;max-width:760px}.hints-title{margin:0;color:var(--accent);font-size:.9rem;text-transform:lowercase}.hint{background:var(--bg-alt);border-left:3px solid var(--accent);border-radius:6px;padding:.6rem .9rem}.hint-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}.hint-name{color:var(--text);font-weight:500}.hint-text{color:var(--sub);margin:.35rem 0 0;font-size:.85rem;line-height:1.5}.results-actions{display:flex;flex-wrap:wrap;gap:.75rem}.btn{background:var(--bg-alt);border-radius:6px;padding:.45rem .9rem;color:var(--text)}.btn:hover{background:var(--accent);color:var(--bg)}.btn:disabled,.btn:disabled:hover{background:var(--bg-alt);color:var(--sub)}.btn-quiet{background:transparent;color:var(--sub)}.btn-quiet:hover{background:var(--error);color:var(--text)}.btn-small{font-size:.75rem;padding:.25rem .6rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}.card{background:var(--bg-alt);border-radius:8px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.5rem}.card h3,.lesson h3,.exercise-title{margin:0;font-size:.95rem;color:var(--accent)}.card .btn{align-self:flex-start}.card p,.lesson p{margin:0;font-size:.85rem;line-height:1.5}.lesson-list{display:flex;flex-direction:column;gap:.75rem}.lesson{background:var(--bg-alt);border-radius:8px;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem}.lesson .btn{flex-shrink:0;background:var(--bg)}.lesson .btn:hover{background:var(--accent)}.empty-note{font-style:italic}.todo-list{display:flex;flex-direction:column;gap:.75rem;max-width:820px}.todo-item{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1rem;border-radius:8px;background:var(--bg-alt)}.todo-body{min-width:0}.todo-body h3,.todo-empty h3{margin:.4rem 0 .3rem;color:var(--accent);font-size:.95rem}.todo-body p,.todo-empty p,.todos-page section p{margin:0;font-size:.85rem;line-height:1.5}.todo-meta{display:flex;align-items:center;gap:.6rem;color:var(--sub);font-size:.68rem}.todo-actions{display:flex;gap:.5rem;flex:0 0 auto}.todo-empty{max-width:620px;padding:1rem;border:1px dashed var(--sub);border-radius:8px}@media(max-width:620px){.header,.todo-item{align-items:flex-start;flex-direction:column}.nav{flex-wrap:wrap;gap:.75rem 1rem}.todo-actions{width:100%}}.exercise{display:flex;flex-direction:column;gap:1rem}.exercise-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.exercise-head p{margin:.25rem 0 0;font-size:.85rem}.progress-bar{height:8px;border-radius:4px;background:var(--bg-alt);max-width:760px;margin:.75rem 0;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}.settings-row{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}.setting{display:inline-flex;align-items:center;gap:.5rem;color:var(--sub);font-size:.85rem}.setting input[type=number]{background:var(--bg-alt);border:1px solid var(--sub);border-radius:5px;color:var(--text);font-family:var(--font);padding:.3rem .5rem;width:6.5rem}.setting input[type=checkbox]{accent-color:var(--accent)}.history{width:100%;max-width:760px;border-collapse:collapse;font-size:.85rem}.history th{text-align:left;color:var(--sub);font-weight:400;padding:.35rem .75rem .35rem 0;border-bottom:1px solid var(--bg-alt)}.history td{padding:.4rem .75rem .4rem 0;border-bottom:1px solid var(--bg-alt)}.badge{font-size:.65rem;border-radius:4px;padding:.1rem .35rem;background:var(--bg-alt);color:var(--sub);text-transform:uppercase}.badge-test{color:var(--accent)}.coach-history{display:flex;flex-direction:column;gap:.4rem;max-width:760px}.coach-entry{background:var(--bg-alt);border-radius:6px;padding:.5rem .9rem;font-size:.85rem}.coach-entry summary{cursor:pointer;color:var(--text)}.coach-entry .hint-text{margin-top:.5rem}