:root{--bg-color: #323437;--main-color: #e2b714;--caret-color: #e2b714;--sub-color: #646669;--sub-alt-color: #2c2e31;--text-color: #d1d0c5;--error-color: #ca4754;--error-extra-color: #7e2a33;--ui-font: "Lexend Deca", system-ui, -apple-system, sans-serif;--mono-font: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-size: clamp(1.1rem, 2.1vw, 1.55rem);--line-h: calc(var(--font-size) * 1.55);--radius: 8px;--transition: .125s ease}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg-color);color:var(--sub-color);font-family:var(--ui-font);font-size:15px;-webkit-font-smoothing:antialiased;transition:background var(--transition)}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}kbd{font-family:var(--mono-font);font-size:.78em;background:var(--sub-alt-color);color:var(--text-color);padding:2px 6px;border-radius:4px}code{font-family:var(--mono-font);background:var(--sub-alt-color);padding:1px 5px;border-radius:4px}::selection{background:var(--main-color);color:var(--bg-color)}#root{min-height:100%}.app{min-height:100vh;max-width:1100px;margin:0 auto;padding:1.5rem 2rem 1rem;display:grid;grid-template-rows:auto 1fr auto;gap:1rem}.main{display:flex;flex-direction:column;justify-content:center;gap:1.75rem;min-height:0}.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:opacity var(--transition)}.header.compact{opacity:0;pointer-events:none}.logo{display:flex;align-items:center;gap:.65rem;color:var(--text-color)}.logo:hover{color:var(--main-color)}.logo-text{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1}.logo-accent{color:var(--main-color)}.nav{display:flex;gap:.35rem}.icon-btn{display:grid;place-items:center;padding:.5rem;border-radius:var(--radius);color:var(--sub-color);transition:color var(--transition),background var(--transition)}.icon-btn:hover{color:var(--text-color);background:var(--sub-alt-color)}.icon-btn.big{padding:.75rem 1.25rem}.config-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;align-self:center;background:var(--sub-alt-color);border-radius:var(--radius);padding:.4rem .75rem;transition:opacity var(--transition)}.config-bar.hidden{opacity:0;pointer-events:none}.config-group{display:flex;align-items:center;gap:.15rem}.config-divider{width:1px;height:1.25rem;background:var(--bg-color);margin:0 .5rem;opacity:.6}.config-btn{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:var(--radius);color:var(--sub-color);font-size:.8rem;transition:color var(--transition)}.config-btn:hover{color:var(--text-color)}.config-btn.active{color:var(--main-color)}.config-select{background:transparent;border:none;color:var(--sub-color);font-family:inherit;font-size:.8rem;padding:.3rem .4rem;border-radius:var(--radius);cursor:pointer}.config-select:hover{color:var(--text-color)}.config-select option{background:var(--bg-color);color:var(--text-color)}.typing-wrapper{position:relative}.live-stats{display:flex;align-items:baseline;gap:1rem;height:2.4rem;font-family:var(--mono-font)}.counter{font-size:2rem;color:var(--main-color);opacity:0;transition:opacity var(--transition);line-height:1}.counter.running,.app:not(.typing) .counter{opacity:1}.live-wpm{font-size:1.1rem;color:var(--sub-color)}.typing-area{position:relative;height:calc(var(--line-h) * 3);overflow:hidden;cursor:text;outline:none}.words{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;font-family:var(--mono-font);font-size:var(--font-size);transition:transform .15s ease;-webkit-user-select:none;user-select:none}.word{display:flex;align-items:stretch;height:var(--line-h);margin:0 .45ch}.letter{color:var(--sub-color);line-height:var(--line-h);transition:color .05s linear}.letter.correct{color:var(--text-color)}.letter.incorrect{color:var(--error-color)}.letter.extra{color:var(--error-extra-color)}.word-error{box-shadow:inset 0 -2px 0 -.5px var(--error-color)}.typing-area.blind .letter.correct,.typing-area.blind .letter.incorrect,.typing-area.blind .letter.extra{color:var(--text-color)}.typing-area.blind .word-error{box-shadow:none}.caret{position:absolute;width:3px;border-radius:2px;background:var(--caret-color);transform:scaleY(.78);pointer-events:none}.caret.smooth{transition:left .1s ease,top .15s ease}.caret.blink{animation:blink 1s infinite}@keyframes blink{0%,45%{opacity:1}55%,to{opacity:0}}.typing-area.blurred .words{filter:blur(4px);opacity:.55}.focus-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--text-color);font-size:.95rem}.quote-source{margin-top:1rem;text-align:right;font-size:.85rem;color:var(--sub-color)}.restart-row{display:flex;justify-content:center}.results{display:flex;flex-direction:column;gap:1.5rem;animation:fade-up .25s ease}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}}.results-top{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:1.5rem;align-items:center}.big-stats{display:flex;flex-direction:column;gap:1rem}.big-stat-label{color:var(--sub-color);font-size:1.1rem}.big-stat-value{color:var(--main-color);font-size:3.75rem;font-family:var(--mono-font);line-height:1}.pb-badge{margin-top:.35rem;display:inline-block;background:var(--main-color);color:var(--bg-color);font-size:.7rem;padding:2px 8px;border-radius:999px}.small-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1rem}.small-stat-label{color:var(--sub-color);font-size:.8rem}.small-stat-value{color:var(--main-color);font-family:var(--mono-font);font-size:1.5rem}.small-stat-value .muted{font-size:.85rem;color:var(--sub-color)}.results-actions{display:flex;align-items:center;justify-content:center;gap:1rem}.hint{color:var(--sub-color);font-size:.8rem}.chart{position:relative}.chart svg{width:100%;height:220px;display:block;overflow:visible}.grid{stroke:var(--sub-alt-color);stroke-width:1}.axis-label{fill:var(--sub-color);font-size:11px;font-family:var(--mono-font)}.wpm-line{stroke:var(--main-color);stroke-width:2.5;fill:none;vector-effect:non-scaling-stroke}.wpm-area{fill:var(--main-color);opacity:.08;stroke:none}.raw-line{stroke:var(--sub-color);stroke-width:1.5;fill:none;opacity:.8;vector-effect:non-scaling-stroke}.error-bar{stroke:var(--error-color);stroke-width:3;opacity:.35}.error-cross{stroke:var(--error-color);stroke-width:2}.chart-legend{display:flex;gap:1rem;justify-content:flex-end;font-size:.75rem;color:var(--sub-color)}.legend:before{content:"";display:inline-block;width:10px;height:3px;margin-right:5px;vertical-align:middle;border-radius:2px}.legend.wpm:before{background:var(--main-color)}.legend.raw:before{background:var(--sub-color)}.legend.errors:before{background:var(--error-color)}.chart-empty{color:var(--sub-color);font-size:.85rem;display:grid;place-items:center;height:180px}.footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.75rem;color:var(--sub-color);transition:opacity var(--transition)}.app.typing .footer{opacity:0;pointer-events:none}.footer-keys{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.link-btn{color:var(--sub-color);display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem}.link-btn:hover{color:var(--text-color)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;padding:2rem 1rem;z-index:50;animation:fade .12s ease}@keyframes fade{0%{opacity:0}}.modal{background:var(--bg-color);border-radius:var(--radius);width:min(560px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000059}.modal.wide{width:min(900px,100%)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--sub-alt-color)}.modal-head h2{margin:0;font-size:1rem;font-weight:500;color:var(--text-color)}.modal-body{padding:1.25rem;overflow-y:auto;color:var(--sub-color);line-height:1.6}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}.theme-card{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem .9rem;border-radius:var(--radius);border:2px solid transparent;font-size:.85rem;transition:transform var(--transition)}.theme-card:hover{transform:translateY(-2px)}.theme-card.active{border-color:var(--main-color)}.swatches{display:flex;gap:4px}.swatches i{width:10px;height:10px;border-radius:50%}.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.25rem}.summary-item{background:var(--sub-alt-color);border-radius:var(--radius);padding:.75rem;display:flex;flex-direction:column;gap:.2rem}.summary-label{font-size:.72rem;color:var(--sub-color)}.summary-value{font-family:var(--mono-font);font-size:1.35rem;color:var(--main-color)}.table-scroll{overflow-x:auto}.results-table{width:100%;border-collapse:collapse;font-size:.82rem;font-family:var(--mono-font)}.results-table th{text-align:left;font-weight:400;color:var(--sub-color);padding:.4rem .6rem;border-bottom:1px solid var(--sub-alt-color);white-space:nowrap}.results-table td{padding:.4rem .6rem;color:var(--text-color);white-space:nowrap}.results-table tbody tr:nth-child(odd){background:var(--sub-alt-color)}.results-table .accent{color:var(--main-color)}.muted{color:var(--sub-color)}.danger-btn{margin-top:1.25rem;padding:.5rem .9rem;border-radius:var(--radius);background:var(--sub-alt-color);color:var(--sub-color);font-size:.8rem}.danger-btn:hover{background:var(--error-color);color:var(--bg-color)}.empty{text-align:center;padding:2rem 0}.settings-panel{display:flex;flex-direction:column;gap:.35rem}.setting{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem;border-radius:var(--radius)}.setting:hover{background:var(--sub-alt-color)}.setting-label{color:var(--text-color);font-size:.9rem}.setting-desc{font-size:.78rem;line-height:1.4}.switch{flex:none;width:44px;height:24px;border-radius:999px;background:var(--sub-alt-color);position:relative;transition:background var(--transition)}.switch .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--sub-color);transition:transform var(--transition),background var(--transition)}.switch.on{background:var(--main-color)}.switch.on .knob{background:var(--bg-color);transform:translate(20px)}.about h3{color:var(--text-color);font-size:.95rem;font-weight:500;margin:1.5rem 0 .5rem}.about p{margin:0}.about ul{margin:0;padding-left:1.1rem}.about li{margin-bottom:.35rem}.about strong{color:var(--text-color);font-weight:500}.about .keys{list-style:none;padding:0}.palette{background:var(--bg-color);border-radius:var(--radius);width:min(560px,100%);align-self:start;margin-top:6vh;overflow:hidden;box-shadow:0 20px 60px #0006}.palette-input{width:100%;padding:1rem 1.25rem;background:var(--sub-alt-color);border:none;outline:none;color:var(--text-color);font-family:inherit;font-size:1rem}.palette-input::placeholder{color:var(--sub-color)}.palette-list{max-height:55vh;overflow-y:auto;padding:.5rem}.cmd-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sub-color);padding:.6rem .75rem .3rem}.cmd{display:block;width:100%;text-align:left;padding:.5rem .75rem;border-radius:6px;color:var(--sub-color);font-size:.88rem}.cmd.active{color:var(--main-color)}.cmd.selected{background:var(--sub-alt-color);color:var(--text-color)}.cmd.empty{color:var(--sub-color);cursor:default}@media (max-width: 720px){.app{padding:1rem 1rem .75rem}.results-top{grid-template-columns:1fr}.big-stats{flex-direction:row;gap:2rem}.logo-text{font-size:1.25rem}.config-divider{display:none}.footer{flex-direction:column;align-items:flex-start;gap:.5rem}}.mobile-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;border:none;background:transparent;caret-color:transparent;font-size:16px;pointer-events:none}@media (pointer: coarse){.mobile-input{pointer-events:auto}}