/* Keyko. A deliberately small interface with a very tactile centerpiece. */
:root {
  color-scheme:light; --page:#f6f5f3; --ink:#292a28; --muted:#7e7d78; --subtle:#a3a29e;
  --untyped:#cccdca; --correct:#373a36; --error:#ca675d; --accent:#e77e54; --caret:#f3bd99;
  --pill:#eae9e5; --pill-hover:#e2e1dc; --panel:#fcfbf9; --line:#e6e4df;
  --case:#484947; --case-edge:#232421; --case-inset:#32332f;
  --key-face:#f0f0ee; --key-side:#c5c6c2; --key-edge:#888a85; --key-text:#4b4c48;
  --mod-face:#747570; --mod-side:#585954; --mod-edge:#41433e; --mod-text:#dadbd5;
  --esc-face:#ee8153; --esc-side:#c95d33; --esc-edge:#a94f2e; --esc-text:#693519;
  --cap-radius:8px; --case-radius:21px; --key-depth:11px; --cap-font:Arial, Helvetica, sans-serif;
  --panel-shadow:0 14px 50px #2627201a,0 2px 8px #26272008;
  --key-unit:1;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;scroll-behavior:smooth}body{background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .35s,color .3s}button,input,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{cursor:default;opacity:.5}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button,a{touch-action:manipulation}button{user-select:none}a{color:inherit;text-decoration:none}p,h1,h2{margin:0}::selection{background:var(--caret);color:var(--ink)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:-80px;background:var(--ink);color:var(--page);padding:12px 20px;border-radius:8px;z-index:100}.skip-link:focus{top:16px}
.app-shell{max-width:1144px;margin:0 auto;padding:0 32px;min-height:100svh;display:flex;flex-direction:column}.site-header{display:flex;align-items:center;justify-content:space-between;padding-top:40px}.brand{display:inline-flex;align-items:center;gap:11px;outline-offset:7px!important}.brand-logo{display:block;width:35px;height:38px;flex-shrink:0}.wordmark{font-size:29px;font-weight:650;letter-spacing:-1.65px;line-height:1}.wordmark-dot{color:var(--accent)}.header-right{display:flex;align-items:center;gap:17px}.header-tagline{font-size:12px;color:var(--muted);margin-right:9px;letter-spacing:.15px}.icon-button{width:33px;height:33px;display:grid;place-items:center;background:transparent;color:var(--muted);border-radius:50%;transition:background .2s,color .2s}.icon-button:hover{background:var(--pill);color:var(--ink)}.icon-button svg{width:18px;height:18px}.help-button span{width:17px;height:17px;display:grid;place-items:center;border:1.4px solid currentColor;border-radius:50%;font-size:11px;font-weight:500}.sound-toggle[aria-pressed=true]{color:var(--subtle)}
.workspace{margin-top:70px}.test-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 4px}.test-prompt{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px;transition:color .2s}.status-dot{height:5px;width:5px;border-radius:100%;background:var(--accent);opacity:.75}.is-running .status-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}.stats{display:flex;align-items:center;gap:36px}.stat{display:flex;align-items:baseline;gap:7px;white-space:nowrap;background:none;padding:5px 0;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}.stat strong{font-weight:550;font-size:22px;letter-spacing:-.4px}.stat>span{color:var(--muted);font-size:12px}.time-stat{align-items:center;gap:6px}.time-stat .mini-chevron{width:13px;height:13px;color:var(--subtle);margin-left:-3px}.time-stat:hover{color:var(--accent)}.is-running .time-stat .mini-chevron{opacity:.25}.stat.time-running-low strong{color:var(--accent)}
.typing-stage{position:relative;margin-top:36px;min-height:180px;height:180px}.words-viewport{overflow:hidden;height:100%;position:relative;cursor:text;padding:0 4px}.words{font-family:Arial,Helvetica,sans-serif;font-size:38px;font-weight:400;letter-spacing:-.75px;line-height:60px;color:var(--untyped);will-change:transform;transition:transform .14s ease-out;user-select:none;position:relative}.word{display:inline-flex;white-space:nowrap;position:relative;align-items:center;margin-right:20px;line-height:60px;height:60px;vertical-align:top;border-radius:4px}.letter{position:relative;white-space:pre}.letter.correct{color:var(--correct)}.letter.incorrect{color:var(--error);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}.letter.extra{color:var(--error);opacity:.75}.word.incorrect-word .letter.missed{text-decoration:underline;text-decoration-color:var(--error);text-decoration-thickness:1.5px;text-underline-offset:7px}.word.incorrect-word::after{content:"";height:1.5px;background:var(--error);opacity:.45;position:absolute;bottom:9px;left:0;right:0}.word.is-keyko{margin-right:19px}.word .word-mascot{width:29px;height:31px;display:inline-block;margin-left:10px;top:1px;transform:rotate(12deg);transition:filter .3s;flex-shrink:0;vertical-align:middle}.word.celebrated .word-mascot{filter:sepia(.3)}.caret{position:absolute;left:0;top:0;width:3px;height:42px;border-radius:3px;background:var(--caret);pointer-events:none;transition:transform .06s linear;animation:blink 1.1s steps(1) infinite;z-index:2}.is-running .caret{animation:none}.typing-input{position:absolute;left:4px;top:0;width:1px;height:1px;opacity:0;padding:0;border:0;resize:none;font-size:16px;z-index:-1}.focus-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;background:color-mix(in srgb,var(--page) 77%,transparent);backdrop-filter:blur(3px);font-size:14px;color:var(--muted);cursor:text;z-index:3;border-radius:10px}.focus-prompt-icon{width:14px;height:18px;border:1.5px solid var(--muted);border-radius:7px;position:relative}.focus-prompt-icon:after{content:"";width:1.5px;height:4px;position:absolute;left:5px;top:3px;background:var(--muted);border-radius:2px}@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}}
.keyboard-section{position:relative;margin-top:49px;isolation:isolate}.keyboard{position:relative;padding:13px 14px 15px;background:var(--case);border:2px solid var(--case-edge);border-radius:var(--case-radius);box-shadow:inset 0 1px 1px #ffffff14,0 2px 0 #00000006;user-select:none;transition:background .3s,border-color .3s,border-radius .3s;z-index:1;touch-action:manipulation}.keyboard:before{content:"";position:absolute;inset:12px 13px 14px;background:var(--case-inset);border:1px solid var(--case-edge);border-radius:8px;z-index:-1}.key-row{display:flex;gap:1.5px;position:relative}.key{--face:var(--key-face);--side:var(--key-side);--edge:var(--key-edge);--legend:var(--key-text);position:relative;flex:var(--u) 1 0;min-width:0;height:55px;margin:0;display:block;padding:0;border:1px solid var(--edge);border-radius:10px 10px 5px 5px;background:var(--side);color:var(--legend);font-family:var(--cap-font);outline:none;box-shadow:0 1.5px 1px #00000075;overflow:hidden;transition:filter .12s,background .25s,border-color .25s}.key.is-mod{--face:var(--mod-face);--side:var(--mod-side);--edge:var(--mod-edge);--legend:var(--mod-text)}.key.is-accent{--face:var(--esc-face);--side:var(--esc-side);--edge:var(--esc-edge);--legend:var(--esc-text)}.key-sides{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--edge);stroke-width:1;stroke-linecap:round;pointer-events:none;opacity:.83}.key:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 2px 0 2px #ffffff29,inset -2px 0 2px #00000019;pointer-events:none}.key-top{position:absolute;left:6px;right:6px;top:0;bottom:var(--key-depth);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:7px;gap:6px;border:1px solid var(--edge);border-radius:var(--cap-radius);background:var(--face);box-shadow:inset 0 1px 1px #ffffff38,0 1px 1px #00000017;transition:transform .075s ease,box-shadow .075s,background .25s,border-radius .25s;pointer-events:none}.key-label{font-size:10px;font-weight:400;line-height:1.1;letter-spacing:-.1px}.key-sub{font-size:10px;line-height:1.15}.key .key-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.key.is-function .key-top{padding-top:5px;gap:6px}.key.is-function .key-label{font-size:10px}.key.is-mod .key-label{font-size:10px}.key.is-arrow .key-top{padding-top:9px}.key.is-arrow .key-icon{width:13px;height:13px}.key.is-wide .key-top{left:7px;right:7px}.key.is-space .key-top{left:7px;right:7px}.key.home-key .key-top:after{content:"";position:absolute;bottom:5px;width:9px;height:1.5px;border-radius:2px;background:currentColor;opacity:.16}.key:hover{filter:brightness(1.055)}.key.is-pressed .key-top,.key:active .key-top{transform:translateY(calc(var(--key-depth) - 3px));box-shadow:inset 0 1px 2px #00000020;filter:brightness(.96)}.key.is-pressed,.key:active{box-shadow:0 1px 0 #00000035}.key.is-pressed .key-label{color:var(--accent)}.key.is-accent.is-pressed .key-label{color:var(--esc-text)}.keyboard-halo{position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:calc(var(--case-radius) + 5px);opacity:0;pointer-events:none;z-index:0}.keyboard-section.celebrating .keyboard-halo{animation:keyboard-hello .65s ease-out}.keyko-toast{position:absolute;bottom:28px;left:50%;transform:translate(-50%,12px);background:var(--panel);box-shadow:0 4px 20px #00000013;padding:8px 14px;border-radius:30px;font-size:14px;font-weight:600;color:var(--accent);pointer-events:none;opacity:0;z-index:3;letter-spacing:-.25px}.keyboard-section.celebrating .keyko-toast{animation:hello-toast .95s ease-out}.tiny-keyko{display:inline-block;margin-right:3px}@keyframes keyboard-hello{0%{opacity:.7;transform:scale(.997)}100%{opacity:0;transform:scale(1.024)}}@keyframes hello-toast{0%{opacity:0;transform:translate(-50%,12px)}20%,70%{opacity:1;transform:translate(-50%,-5px)}100%{opacity:0;transform:translate(-50%,-16px)}}
.control-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:27px}.control-group{display:flex;align-items:center;gap:29px}.picker{position:relative}.style-picker,.switch-picker{display:flex;align-items:center;gap:12px}.control-label{font-size:13px;color:var(--muted)}.selector-button{height:44px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:30px;background:var(--pill);font-size:13px;transition:background .2s;white-space:nowrap}.selector-button:hover,.selector-button[aria-expanded=true]{background:var(--pill-hover)}.selector-button .chevron{width:14px;height:14px;margin-left:6px;color:var(--muted)}.style-swatch{display:flex;align-items:center;gap:2px;transform:rotate(-4deg);height:20px}.style-swatch i{height:15px;width:9px;border-radius:2px;background:var(--key-face);border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-side)}.style-swatch i:first-child{background:var(--mod-face);border-color:var(--mod-edge);box-shadow:0 2px 0 var(--mod-side)}.style-swatch i:last-child{background:var(--esc-face);border-color:var(--esc-edge);box-shadow:0 2px 0 var(--esc-side)}.switch-symbol{width:17px;height:17px;display:grid;place-items:center;font-size:15px;line-height:1;font-weight:500;border-radius:3px;background:#dc927f;color:#954f3e;box-shadow:inset 0 -2px 0 #0000000e}.right-controls{display:flex;align-items:center;gap:38px}.volume-control{display:flex;align-items:center;gap:7px}.volume-control .icon-button{height:28px;width:28px}.volume-control input{width:63px;height:3px;margin:0;appearance:none;-webkit-appearance:none;border-radius:5px;background:var(--line);cursor:pointer;--fill:65%;background:linear-gradient(to right,var(--subtle) var(--fill),var(--line) var(--fill))}.volume-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:9px;width:9px;background:var(--muted);border-radius:50%;border:0}.volume-control input::-moz-range-thumb{height:9px;width:9px;background:var(--muted);border-radius:50%;border:0}.restart-button{display:flex;align-items:center;gap:8px;background:none;font-size:13px;padding:10px 2px;color:var(--muted)}.restart-button:hover{color:var(--ink)}.restart-button svg{width:16px;height:16px;transition:transform .3s}.restart-button:hover svg{transform:rotate(-35deg)}.under-keyboard{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--subtle);font-size:11px}.keyko-hint{display:flex;align-items:center;gap:4px}.hint-star{font-size:15px;margin-right:4px;color:var(--accent);opacity:.75}.keyko-hint button{padding:0 0 1px;background:none;color:var(--muted);font-size:11px;position:relative}.hint-underline{position:absolute;left:0;right:0;bottom:0;border-bottom:1px dotted var(--subtle)}.keyko-hint button:hover{color:var(--accent)}.shortcut-hint{display:flex;align-items:center;gap:5px}kbd{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;min-width:24px;height:20px;padding:0 5px;font-family:inherit;font-size:10px;color:var(--muted);line-height:1;background:color-mix(in srgb,var(--pill) 45%,transparent)}.shortcut-hint>span:last-child{margin-left:3px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding:35px 3px 29px;font-size:10px;letter-spacing:.15px;color:var(--subtle)}
.popover{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--panel-shadow);z-index:20;padding:16px;bottom:calc(100% + 13px);left:0;animation:pop-in .15s ease-out;max-height:80dvh;overflow-y:auto}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 14px}.popover-heading{font-size:13px;font-weight:600;letter-spacing:-.1px}.popover-header p{font-size:11px;color:var(--muted);margin-top:4px}.popover-count{height:26px;min-width:26px;border-radius:50%;background:var(--pill);font-size:11px;color:var(--muted);display:grid;place-items:center}.style-menu{width:373px}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.style-option{padding:10px;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;border-radius:9px;background:var(--pill);transition:border .2s,background .2s}.style-option:hover{background:var(--pill-hover)}.style-option[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}.style-mini{width:47px;min-width:47px;height:28px;display:flex;gap:2px;padding:3px;background:var(--mini-case);border-radius:5px;transform:rotate(-4deg);box-shadow:0 1px 1px #00000015}.style-mini i{height:19px;flex:1;border-radius:3px;background:var(--mini-key);box-shadow:inset 0 1px 0 #ffffff50,0 3px 0 color-mix(in srgb,var(--mini-key) 70%,#000)}.style-mini i:first-child{background:var(--mini-mod);box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 color-mix(in srgb,var(--mini-mod) 70%,#000)}.style-mini i:last-child{background:var(--mini-accent);box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 color-mix(in srgb,var(--mini-accent) 70%,#000)}.style-option-name{font-size:12px;font-weight:500;display:block}.style-option-detail{font-size:9px;color:var(--muted);display:block;margin-top:3px}.sound-menu{width:295px}.sound-menu .popover-header{padding-bottom:10px}.sound-row{display:flex;align-items:center;border-radius:7px;gap:4px;padding:0 5px 0 0}.sound-row:hover{background:var(--pill)}.sound-row:has([aria-checked=true]){background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.sound-option{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 8px;flex:1;min-width:0;background:none;border-radius:7px}.sound-dot{height:7px;width:7px;border-radius:50%;background:var(--sound-color);opacity:.9;flex-shrink:0}.sound-name{font-size:12px;flex:1}.sound-category{font-size:9px;color:var(--muted)}.sound-option[aria-checked=true] .sound-name{font-weight:650}.preview-sound{width:27px;height:27px;display:grid;place-items:center;background:transparent;color:var(--muted);border-radius:50%}.preview-sound:hover,.preview-sound.previewing{background:var(--pill-hover);color:var(--accent)}.preview-sound svg{width:13px;height:13px}.duration-menu{top:calc(100% + 10px);bottom:auto;left:auto;right:0;width:193px;padding:15px}.duration-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.duration-option{padding:9px 6px;border:1px solid transparent;background:var(--pill);border-radius:6px;font-size:12px}.duration-option[aria-checked=true]{border-color:var(--accent);color:var(--accent)}.duration-option:hover{background:var(--pill-hover)}@keyframes pop-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.results{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 35px 0 5px;gap:35px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.5px;color:var(--accent)}.result-intro h1{font-size:28px;font-weight:500;letter-spacing:-1.1px;margin-top:9px}.result-intro p{font-size:12px;color:var(--muted);margin-top:11px}.again-button{background:none;border-bottom:1px solid var(--line);padding:0 0 5px;color:var(--ink);font-size:12px;margin-top:20px}.again-button span{margin-left:9px;color:var(--accent)}.result-numbers{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;position:relative;min-width:250px}.result-primary,.result-secondary{display:flex;flex-direction:column;gap:4px}.result-primary strong{font-size:60px;line-height:1;letter-spacing:-3px;font-weight:450}.result-secondary strong{font-size:36px;font-weight:400;line-height:1;padding-top:16px;letter-spacing:-1px}.result-secondary strong span{font-size:18px;color:var(--muted);margin-left:2px}.result-primary>span,.result-secondary>span{font-size:11px;color:var(--muted)}#result-chart{grid-column:1/-1;margin-top:12px;width:100%;height:32px;overflow:visible}#result-chart path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#result-chart .chart-baseline{stroke:var(--line);stroke-width:1}
.help-dialog{width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:26px 29px 25px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:var(--panel-shadow);overflow:auto}.help-dialog::backdrop{background:#161b1535;backdrop-filter:blur(6px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top .icon-button{margin:-10px -10px -2px 0}.help-dialog h2{font-size:30px;font-weight:500;letter-spacing:-1px;margin-top:16px}.dialog-description{font-size:13px;line-height:1.7;color:var(--muted);margin-top:10px;max-width:330px}.help-steps{margin:24px 0}.help-steps p{display:flex;align-items:baseline;gap:12px;font-size:12px;line-height:1.7;margin:12px 0}.help-steps p>span{font-size:10px;color:var(--subtle)}.help-steps p>b{font-weight:600;margin:0 -8px}.voice-setting{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:19px;border-top:1px solid var(--line)}.voice-setting strong{font-size:12px;font-weight:550}.voice-setting p{font-size:11px;color:var(--muted);margin-top:5px}.toggle{position:relative;width:34px;height:20px;border-radius:20px;background:var(--line);padding:3px}.toggle span{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000010;transition:transform .2s}.toggle[aria-checked=true]{background:var(--accent)}.toggle[aria-checked=true] span{transform:translateX(14px)}.custom-voice-row{display:flex;align-items:center;gap:14px;margin-top:15px;flex-wrap:wrap}.text-button{background:none;padding:0;font-size:11px;border-bottom:1px solid var(--line);padding-bottom:3px;color:var(--muted);cursor:pointer}.text-button:hover{color:var(--accent)}.text-button span{margin-left:3px}.upload-help{font-size:10px;color:var(--subtle);line-height:1.6;margin-top:8px}.help-shortcuts{display:grid;gap:12px;margin:22px 0;padding-top:19px;border-top:1px solid var(--line)}.help-shortcuts>div{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.help-shortcuts .or{font-size:10px;color:var(--subtle);margin:0 4px}.privacy-note{font-size:10px;line-height:1.65;color:var(--subtle);border-top:1px solid var(--line);padding-top:17px}.notification{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--page);padding:12px 19px;max-width:calc(100vw - 32px);width:max-content;font-size:12px;text-align:center;border-radius:30px;box-shadow:0 4px 20px #00000015}.noscript{position:fixed;left:0;right:0;bottom:0;padding:20px;background:var(--ink);color:var(--page);text-align:center}
/* Styles change the case, keycaps, profile and the surrounding atmosphere. */
html[data-theme=matcha]{--page:#f4f4ed;--ink:#374338;--muted:#7b8476;--subtle:#a4aa9b;--untyped:#c7cdc0;--correct:#40513d;--accent:#6c8661;--caret:#a8bc87;--pill:#e7eadd;--pill-hover:#dde3cf;--panel:#fafbf5;--line:#dde3d4;--case:#79876a;--case-edge:#4b5945;--case-inset:#58634d;--key-face:#eeefdc;--key-side:#c4c9af;--key-edge:#9ca289;--key-text:#555b46;--mod-face:#a5b48f;--mod-side:#7b8c68;--mod-edge:#667554;--mod-text:#3e5134;--esc-face:#566f42;--esc-side:#3c512c;--esc-edge:#324526;--esc-text:#e9eddb;--cap-radius:11px;--case-radius:24px}
html[data-theme=midnight]{color-scheme:dark;--page:#191d22;--ink:#e0e6e9;--muted:#8b99a6;--subtle:#5d6c7a;--untyped:#4b5865;--correct:#d6e2e8;--accent:#87c9d9;--caret:#91d8e8;--pill:#262e37;--pill-hover:#303a45;--panel:#222a33;--line:#35404c;--case:#303b48;--case-edge:#111820;--case-inset:#161f2a;--key-face:#404e61;--key-side:#2d3746;--key-edge:#1e2a38;--key-text:#b6c9db;--mod-face:#253242;--mod-side:#172433;--mod-edge:#101d2b;--mod-text:#819ab3;--esc-face:#a1d5dc;--esc-side:#6a9da8;--esc-edge:#4d818d;--esc-text:#254851;--cap-radius:6px;--case-radius:17px}
html[data-theme=sakura]{--page:#faf4f4;--ink:#694b54;--muted:#a1858d;--subtle:#c1a9af;--untyped:#dccbd0;--correct:#785560;--accent:#cc8197;--caret:#e5a5b8;--pill:#f1e7e9;--pill-hover:#eadde2;--panel:#fffafb;--line:#eddfe3;--case:#d8adb9;--case-edge:#a87a89;--case-inset:#ad8892;--key-face:#fff4f1;--key-side:#ead4d7;--key-edge:#c9aaaf;--key-text:#966471;--mod-face:#e8b6c4;--mod-side:#ca92a3;--mod-edge:#b77e8f;--mod-text:#875567;--esc-face:#be6d87;--esc-side:#9f4f69;--esc-edge:#8a405a;--esc-text:#ffe8ef;--cap-radius:13px;--case-radius:25px;--key-depth:10px}
html[data-theme=retro]{--page:#f5f1e8;--ink:#564b3b;--muted:#958873;--subtle:#b7aa95;--untyped:#cfc6b4;--correct:#665741;--accent:#b47546;--caret:#cdad75;--pill:#eae3d5;--pill-hover:#e1d7c4;--panel:#fcf8ef;--line:#e2d8c6;--case:#c1b59b;--case-edge:#897c64;--case-inset:#8f856f;--key-face:#eee5ce;--key-side:#c9bda0;--key-edge:#a89b7c;--key-text:#695740;--mod-face:#b7ab8c;--mod-side:#938666;--mod-edge:#7e7257;--mod-text:#534a36;--esc-face:#b77547;--esc-side:#92572d;--esc-edge:#7d4924;--esc-text:#fff1d4;--cap-radius:4px;--case-radius:10px;--key-depth:13px;--cap-font:"Courier New",monospace}
html[data-theme=ocean]{--page:#edf4f4;--ink:#315759;--muted:#7e9a9c;--subtle:#a0b9b9;--untyped:#bed1d1;--correct:#386569;--accent:#339b9c;--caret:#7ac4bd;--pill:#deecec;--pill-hover:#d2e4e4;--panel:#f6fbfb;--line:#d5e5e5;--case:#2c6972;--case-edge:#18454f;--case-inset:#184852;--key-face:#d8eced;--key-side:#a3c6ca;--key-edge:#7ca4ab;--key-text:#38676e;--mod-face:#4e939d;--mod-side:#32717c;--mod-edge:#235963;--mod-text:#dcf2f3;--esc-face:#e2b966;--esc-side:#b48c42;--esc-edge:#9b7633;--esc-text:#654b1d;--cap-radius:9px;--case-radius:19px}
html[data-theme=lavender]{--page:#f5f2f9;--ink:#584d6e;--muted:#9589a6;--subtle:#b5abc4;--untyped:#cfc7dc;--correct:#675879;--accent:#9f85be;--caret:#b49ad5;--pill:#eae4f1;--pill-hover:#e0d7eb;--panel:#fcf9ff;--line:#e4dced;--case:#a899b8;--case-edge:#7d6e8f;--case-inset:#827591;--key-face:#f1eaf9;--key-side:#d5c7e5;--key-edge:#b4a1ca;--key-text:#827098;--mod-face:#c4afd9;--mod-side:#a28bb9;--mod-edge:#8d75a5;--mod-text:#67517e;--esc-face:#9180af;--esc-side:#71608f;--esc-edge:#625081;--esc-text:#f4ebff;--cap-radius:12px;--case-radius:25px;--key-depth:9px}
html[data-theme=milkshake]{--page:#f8f7f2;--ink:#59584f;--muted:#929187;--subtle:#b4b3a9;--untyped:#d1d0c7;--correct:#605f55;--accent:#bc946b;--caret:#dec7a4;--pill:#eeede6;--pill-hover:#e5e4d9;--panel:#fffef9;--line:#e8e6dc;--case:#e3e1d7;--case-edge:#afaea3;--case-inset:#b6b6aa;--key-face:#fffdf4;--key-side:#e3dfd0;--key-edge:#c1beaf;--key-text:#827d6c;--mod-face:#c4d8e0;--mod-side:#9db6c0;--mod-edge:#84a2ad;--mod-text:#557482;--esc-face:#edb7ab;--esc-side:#cc9588;--esc-edge:#b67e70;--esc-text:#985e50;--cap-radius:12px;--case-radius:26px;--key-depth:9px}
html[data-theme=milkshake] .key[data-code=Enter],html[data-theme=milkshake] .key[data-code=ShiftRight],html[data-theme=milkshake] .key[data-code=Backspace]{--face:#e9d6a5;--side:#c7b47e;--edge:#b0a06b;--legend:#887446}html[data-theme=milkshake] .key[data-code=ShiftLeft],html[data-theme=milkshake] .key[data-code=CapsLock],html[data-theme=milkshake] .key[data-code=Tab]{--face:#bfcfb5;--side:#99ad8b;--edge:#879b79;--legend:#657859}html[data-theme=milkshake] .key.is-arrow{--face:#d8c5e0;--side:#b5a0be;--edge:#a08ca9;--legend:#82638e}
html[data-theme=terminal]{color-scheme:dark;--page:#131b16;--ink:#bcddad;--muted:#7b9673;--subtle:#486247;--untyped:#3b553d;--correct:#b4dba5;--accent:#a4d979;--caret:#bcf190;--pill:#1c2b20;--pill-hover:#25382a;--panel:#1a271e;--line:#2d4231;--case:#26392b;--case-edge:#09150d;--case-inset:#0c1b11;--key-face:#294333;--key-side:#1b2e22;--key-edge:#112519;--key-text:#a6d993;--mod-face:#1b3022;--mod-side:#112318;--mod-edge:#0a1a10;--mod-text:#75996d;--esc-face:#b1d77f;--esc-side:#88ad57;--esc-edge:#6e9341;--esc-text:#26461e;--cap-radius:3px;--case-radius:9px;--key-depth:7px;--cap-font:"Courier New",monospace}
html[data-theme=terminal] .key-top{box-shadow:inset 0 1px 1px #c9ffbb17}.key[data-code=Space]{flex-grow:6.25}
html[data-theme=walnut]{--page:#f5f1ed;--ink:#5a463b;--muted:#998477;--subtle:#baa89c;--untyped:#d2c6bd;--correct:#6c5140;--accent:#ae7a54;--caret:#d4ad86;--pill:#eae1d9;--pill-hover:#e3d7cc;--panel:#fdf8f3;--line:#e4d8cd;--case:#755039;--case-edge:#3e281b;--case-inset:#3d2b20;--key-face:#f0e4cc;--key-side:#cbbb9d;--key-edge:#a89575;--key-text:#755e42;--mod-face:#9b8062;--mod-side:#786045;--mod-edge:#614b34;--mod-text:#f0dfc3;--esc-face:#c0955e;--esc-side:#9b733f;--esc-edge:#826031;--esc-text:#4b3419;--cap-radius:5px;--case-radius:13px;--key-depth:8px}
html[data-theme=walnut] .keyboard{background:repeating-linear-gradient(3deg,#68452e33 0px,#885c3a55 2px,#72492f22 4px,#5e3c2933 5px),linear-gradient(90deg,#735038,#946d4b 35%,#73513a 70%,#876144)}
@media(min-width:1500px){.app-shell{max-width:1210px;padding:0 42px}.workspace{margin-top:105px}.key{height:62px}.keyboard-section{margin-top:68px}.words{font-size:40px}.typing-stage{margin-top:49px}}
@media(max-height:850px) and (min-width:901px){.site-header{padding-top:28px}.workspace{margin-top:55px}.typing-stage{margin-top:28px;height:165px;min-height:165px}.words,.word{line-height:55px}.word{height:55px}.words{font-size:36px}.keyboard-section{margin-top:42px}.key{height:55px}.control-bar{margin-top:24px}.under-keyboard{margin-top:17px}.site-footer{padding-top:32px;padding-bottom:22px}}
@media(max-width:1050px){.app-shell{padding:0 28px}.workspace{margin-top:73px}.key{height:54px}.key-top{left:4px;right:4px}.key.is-wide .key-top,.key.is-space .key-top{left:5px;right:5px}.keyboard{padding:11px 11px 13px}.keyboard:before{inset:10px 10px 12px}.key-label,.key-sub,.key.is-mod .key-label,.key.is-function .key-label{font-size:9px}.key-top{gap:5px}.control-group{gap:22px}.right-controls{gap:22px}.words{font-size:35px;letter-spacing:-.7px}.word{margin-right:18px}.selector-button{padding:0 12px}.control-bar{gap:10px}.style-picker,.switch-picker{gap:8px}.control-label{font-size:12px}}
@media(max-width:800px){.header-tagline{display:none}.site-header{padding-top:30px}.workspace{margin-top:65px}.stats{gap:24px}.typing-stage{margin-top:35px}.words{font-size:30px;line-height:52px}.word{height:52px;line-height:52px;margin-right:17px}.typing-stage{height:156px;min-height:156px}.caret{height:36px}.keyboard-section{margin-top:47px}.key{height:45px;border-radius:7px 7px 3px 3px}.key-top{left:3px;right:3px;padding-top:5px;border-radius:min(var(--cap-radius),6px);bottom:8px;gap:4px}.key.is-wide .key-top,.key.is-space .key-top{left:4px;right:4px}.key.is-function .key-top{padding-top:4px;gap:4px}.key-label,.key-sub,.key.is-mod .key-label,.key.is-function .key-label{font-size:8px}.key .key-icon{width:10px;height:10px}.key-row{gap:1px}.keyboard{padding:9px 9px 11px;border-radius:15px}.keyboard:before{inset:8px 8px 10px}.key.is-pressed .key-top,.key:active .key-top{transform:translateY(5px)}.control-label{display:none}.control-group{gap:12px}.right-controls{gap:16px}.control-bar{margin-top:24px}.volume-control input{width:45px}.shortcut-hint{font-size:10px}.site-footer{padding-top:55px}.popover{max-height:70dvh}.result-intro h1{font-size:24px}.result-numbers{min-width:200px;gap:0 25px}.result-primary strong{font-size:50px}.result-secondary strong{font-size:30px;padding-top:12px}}
@media(max-width:600px){.app-shell{padding:0 20px}.site-header{padding-top:26px}.wordmark{font-size:27px}.brand-logo{width:30px;height:33px}.header-right{gap:10px}.workspace{margin-top:55px}.test-toolbar{padding:0 1px;gap:12px}.test-prompt{font-size:12px;gap:6px}.stats{gap:17px}.stat{gap:4px}.stat strong{font-size:19px}.stat>span{font-size:10px}.time-stat{gap:3px}.time-stat .mini-chevron{width:10px}.typing-stage{margin-top:29px;height:138px;min-height:138px}.words{font-size:27px;line-height:46px;letter-spacing:-.55px}.word{line-height:46px;height:46px;margin-right:15px}.word .word-mascot{width:23px;height:25px;margin-left:7px}.caret{width:2px;height:33px}.keyboard-section{margin-top:37px;margin-left:-5px;margin-right:-5px}.keyboard{padding:6px 5px 8px;border-width:1.5px;border-radius:11px}.keyboard:before{inset:5px 4px 7px;border-radius:5px}.key{height:30px;border-radius:4px 4px 2px 2px;border-width:.65px}.key-top{left:1.5px;right:1.5px;border-radius:3px;bottom:5px;border-width:.6px;padding-top:3px;gap:2px}.key.is-function .key-top{padding-top:3px;gap:2px}.key.is-wide .key-top,.key.is-space .key-top{left:2px;right:2px}.key-label,.key-sub,.key.is-mod .key-label,.key.is-function .key-label{font-size:5.5px;letter-spacing:-.2px}.key .key-icon{width:7px;height:7px;stroke-width:1.5px}.key.is-arrow .key-top{padding-top:5px}.key.is-arrow .key-icon{width:8px;height:8px}.key.home-key .key-top:after{width:5px;bottom:3px;height:1px}.key-row{gap:.6px}.key.is-pressed .key-top,.key:active .key-top{transform:translateY(3px)}.control-bar{flex-wrap:wrap;margin-top:22px;row-gap:12px}.control-group{gap:8px;flex:1}.selector-button{height:39px;padding:0 10px;font-size:11px;gap:6px}.selector-button .chevron{width:11px;margin-left:1px}.style-swatch{gap:1px}.style-swatch i{width:7px;height:12px}.switch-symbol{width:14px;height:14px;font-size:12px}.right-controls{gap:3px}.volume-control{display:none}.restart-button{font-size:0;gap:0;padding:10px 3px;width:29px;justify-content:center}.restart-button svg{width:17px;height:17px}.under-keyboard{margin-top:20px;align-items:start}.keyko-hint{font-size:10px;gap:3px}.keyko-hint button{font-size:10px}.shortcut-hint{display:none}.site-footer{padding-top:42px;font-size:9px;line-height:1.6}.style-menu{width:min(350px,calc(100vw - 36px));left:-1px;padding:12px}.style-grid{gap:6px}.style-option{padding:9px 7px;gap:7px}.style-mini{width:42px;min-width:42px}.sound-menu{width:277px;left:auto;right:-45px;padding:13px}.popover{position:fixed;left:18px;right:auto;bottom:85px;max-height:calc(100dvh - 130px)}.sound-menu{width:calc(100vw - 36px);max-width:340px;left:18px;right:auto}.duration-menu{position:absolute;top:100%;right:-20px;left:auto;bottom:auto;width:180px}.style-menu{width:calc(100vw - 36px);max-width:350px}.results{gap:14px;padding:0}.result-intro{max-width:58%}.result-intro .eyebrow{font-size:8px;letter-spacing:.9px}.result-intro h1{font-size:21px;letter-spacing:-.7px}.result-intro p{font-size:10px;line-height:1.7;margin-top:7px}.again-button{font-size:10px;margin-top:11px}.result-numbers{min-width:115px;gap:0 12px}.result-primary strong{font-size:39px;letter-spacing:-2px}.result-secondary strong{font-size:23px;padding-top:8px}.result-secondary strong span{font-size:12px}.result-primary>span,.result-secondary>span{font-size:8px}#result-chart{height:24px;margin-top:8px}.result-numbers{flex:1}.help-dialog{padding:23px}.help-steps p{font-size:11px}.keyko-toast{font-size:12px;bottom:17px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}.caret{animation:none!important}}