@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-gradient-start: #e8ecf1;--bg-gradient-end: #dce1e8;--text-primary: #1a1a1a;--text-secondary: #6b7280;--frame-bg: #2a2a2e;--frame-border: #3a3a40;--key-alpha-bg: #f0f0f2;--key-alpha-text: #2a2a2e;--key-alpha-front: #d4d4d8;--key-alpha-hover: #f8f8fa;--key-mod-bg: #4a4a52;--key-mod-text: #c8c8d0;--key-mod-front: #35353b;--key-mod-hover: #56565e;--key-fn-bg: #e0e0e4;--key-fn-text: #3a3a42;--key-fn-front: #c8c8cc;--key-fn-hover: #eaeaee;--key-accent-bg: #ff7832;--key-accent-text: #fff;--key-accent-front: #d9621e;--key-accent-hover: #ff8f52;--key-space-bg: #e8e8ec;--key-space-front: #ccccd0;--key-space-hover: #f2f2f6;--controls-bg: rgba(255, 255, 255, .65);--controls-border: rgba(0, 0, 0, .1);--switch-btn-bg: rgba(0, 0, 0, .04);--switch-btn-hover: rgba(0, 0, 0, .08);--slider-track: rgba(0, 0, 0, .12);--glow-rgb: 255, 120, 50}[data-theme=dark]{--bg-gradient-start: #0f0f13;--bg-gradient-end: #1a1a22;--text-primary: #e8e8ec;--text-secondary: #8888a0;--frame-bg: #18181c;--frame-border: #2a2a32;--key-alpha-bg: #3a3a42;--key-alpha-text: #e8e8f0;--key-alpha-front: #28282e;--key-alpha-hover: #44444c;--key-mod-bg: #252528;--key-mod-text: #a0a0b0;--key-mod-front: #1a1a1e;--key-mod-hover: #30303a;--key-fn-bg: #32323a;--key-fn-text: #c0c0d0;--key-fn-front: #24242a;--key-fn-hover: #3c3c44;--key-accent-bg: #ff6b20;--key-accent-text: #fff;--key-accent-front: #cc5010;--key-accent-hover: #ff8548;--key-space-bg: #32323a;--key-space-front: #24242a;--key-space-hover: #3c3c44;--controls-bg: rgba(30, 30, 40, .75);--controls-border: rgba(255, 255, 255, .08);--switch-btn-bg: rgba(255, 255, 255, .06);--switch-btn-hover: rgba(255, 255, 255, .12);--slider-track: rgba(255, 255, 255, .15);--glow-rgb: 255, 107, 32}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(160deg,var(--bg-gradient-start),var(--bg-gradient-end));color:var(--text-primary);min-height:100vh;overflow:hidden;transition:background .5s ease}#root{min-height:100vh;display:flex;flex-direction:column}.key{--unit: 3.2rem;--key-gap: 3px;--front-height: 5px;--press-depth: 3px;position:relative;width:calc(var(--key-width) * var(--unit) + (var(--key-width) - 1) * var(--key-gap));height:var(--unit);border:none;outline:none;cursor:pointer;background:transparent;padding:0;font-family:Inter,-apple-system,sans-serif;transition:transform .06s ease-out;transform:translateY(0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.key:active,.key--pressed{transform:translateY(var(--press-depth))}.key__top{position:absolute;left:0;right:0;top:0;bottom:var(--front-height);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:3px 5px;box-sizing:border-box;transition:background .15s,box-shadow .06s;z-index:2}.key__front{position:absolute;left:0;right:0;bottom:0;height:var(--front-height);border-radius:0 0 6px 6px;z-index:1;transition:background .15s}.key--pressed .key__front,.key:active .key__front{height:calc(var(--front-height) - var(--press-depth))}.key__label{font-size:.72rem;font-weight:500;letter-spacing:.02em;text-transform:lowercase;line-height:1}.key__label-main{font-size:.65rem;font-weight:400;line-height:1;opacity:.85}.key__label-sub{font-size:.78rem;font-weight:600;line-height:1.1}.key--alpha .key__top{background:var(--key-alpha-bg);color:var(--key-alpha-text);box-shadow:0 1px 2px #00000026,inset 0 1px #ffffff80}.key--alpha .key__front{background:var(--key-alpha-front)}.key--alpha:hover .key__top{background:var(--key-alpha-hover);box-shadow:0 1px 4px #0003,inset 0 1px #ffffff80}.key--modifier .key__top{background:var(--key-mod-bg);color:var(--key-mod-text);box-shadow:0 1px 2px #00000040,inset 0 1px #ffffff14}.key--modifier .key__front{background:var(--key-mod-front)}.key--modifier:hover .key__top{background:var(--key-mod-hover)}.key--function .key__top{background:var(--key-fn-bg);color:var(--key-fn-text);box-shadow:0 1px 2px #00000026,inset 0 1px #ffffff4d}.key--function .key__front{background:var(--key-fn-front)}.key--function:hover .key__top{background:var(--key-fn-hover)}.key--accent .key__top{background:var(--key-accent-bg);color:var(--key-accent-text);box-shadow:0 1px 3px #ff783259,inset 0 1px #ffffff40}.key--accent .key__front{background:var(--key-accent-front)}.key--accent:hover .key__top{background:var(--key-accent-hover);box-shadow:0 2px 8px #ff783280,inset 0 1px #ffffff40}.key--space .key__top{background:var(--key-space-bg);color:var(--key-alpha-text);box-shadow:0 1px 3px #00000026,inset 0 1px #fff6}.key--space .key__front{background:var(--key-space-front)}.key--space:hover .key__top{background:var(--key-space-hover)}.key--pressed .key__top,.key:active .key__top{box-shadow:0 0 8px rgba(var(--glow-rgb),.5),inset 0 1px #ffffff1a!important}.keyboard{display:flex;justify-content:center;align-items:center;perspective:800px}.keyboard__frame{background:var(--frame-bg);border:2px solid var(--frame-border);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:3px;box-shadow:0 20px 60px #00000059,0 4px 15px #0003,inset 0 1px #ffffff0f;position:relative;transition:background .4s,border-color .4s}.keyboard__frame:before{content:"";position:absolute;inset:2px;border-radius:14px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 30%);z-index:0}.keyboard__row{display:flex;gap:3px;position:relative;z-index:1}.controls{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;padding:16px 28px;border-radius:16px;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--controls-border);box-shadow:0 4px 20px #0000001a;max-width:600px;margin:0 auto;transition:background .4s,border-color .4s}.controls__group{display:flex;flex-direction:column;gap:8px;align-items:center}.controls__label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);transition:color .4s}.controls__switches{display:flex;gap:6px}.controls__switch-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid var(--controls-border);background:var(--switch-btn-bg);color:var(--text-primary);font-size:.72rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;transition:all .2s}.controls__switch-btn:hover{background:var(--switch-btn-hover);border-color:var(--key-accent-bg)}.controls__switch-btn--active{background:var(--key-accent-bg);color:#fff;border-color:var(--key-accent-bg);box-shadow:0 2px 8px #ff783266}.controls__switch-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}.controls__switch-btn--active .controls__switch-dot{opacity:1;box-shadow:0 0 4px currentColor}.controls__slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--slider-track);outline:none;transition:background .3s}.controls__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--key-accent-bg);cursor:pointer;box-shadow:0 1px 4px #0000004d;transition:transform .15s}.controls__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.controls__theme-toggle{display:flex;gap:4px;background:var(--switch-btn-bg);border-radius:8px;padding:2px}.controls__theme-btn{padding:5px 10px;border:none;border-radius:6px;background:transparent;font-size:1rem;cursor:pointer;transition:all .2s}.controls__theme-btn--active{box-shadow:0 1px 4px #00000026}.controls__voice-btn{background:var(--switch-btn-bg);border:1px solid var(--controls-border);padding:6px 14px;border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s;font-size:.72rem;font-weight:500;font-family:Inter,sans-serif;min-width:80px}.controls__voice-btn--active{background:var(--key-accent-bg);color:#fff;border-color:var(--key-accent-bg);box-shadow:0 2px 8px #ff783266}.typing-test{width:100%;max-width:900px;margin:0 auto 2rem;padding:2rem;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:1.5rem;border:1px solid var(--controls-border);box-shadow:0 8px 32px #0000001a;position:relative;overflow:hidden}.typing-test__pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:30;display:flex;justify-content:center;align-items:center;cursor:pointer;animation:fadeIn .2s ease-out}.typing-test__pause-content{text-align:center;color:#fff}.typing-test__pause-content h2{font-size:3rem;font-weight:800;letter-spacing:.2em;margin-bottom:.5rem;text-shadow:0 0 20px rgba(0,0,0,.5)}.typing-test__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;gap:1.5rem}.typing-test__options{display:flex;gap:2rem}.typing-test__group{display:flex;flex-direction:column;gap:.5rem}.typing-test__group-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5;font-weight:600}.typing-test__levels,.typing-test__timers{display:flex;gap:.4rem}.typing-test__opt-btn{background:rgba(var(--text-rgb),.05);border:1px solid var(--controls-border);padding:.4rem .9rem;border-radius:.6rem;color:var(--text-primary);cursor:pointer;font-size:.72rem;font-weight:600;transition:all .2s}.typing-test__opt-btn:hover{background:rgba(var(--text-rgb),.1)}.typing-test__opt-btn--active{background:var(--key-accent-bg);color:#fff;border-color:var(--key-accent-bg);box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)}.typing-test__best{font-size:.8rem;font-weight:600;opacity:.8}.typing-test__best span{color:var(--key-accent-bg)}.typing-test__stats{display:flex;gap:2.5rem;margin-bottom:2.5rem;align-items:center}.typing-test__stat{display:flex;flex-direction:column}.typing-test__stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-bottom:.25rem}.typing-test__stat-value{font-size:1.5rem;font-weight:700;color:var(--key-accent-bg)}.typing-test__restart{margin-left:auto;background:rgba(var(--text-rgb),.05);border:none;padding:.6rem 1.2rem;border-radius:.6rem;color:var(--text-primary);cursor:pointer;transition:all .2s;font-size:.85rem;font-weight:600}.typing-test__display-container{height:128px;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,black 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 70%,transparent 100%)}.typing-test__display{font-size:1.5rem;line-height:1.6;font-family:JetBrains Mono,Fira Code,monospace;color:var(--text-secondary);cursor:text;text-align:left;white-space:pre-wrap;word-break:break-all;transition:transform .3s cubic-bezier(.1,0,.2,1);transform-origin:top;position:relative}.typing-test__word{padding:0 1px;border-radius:4px;display:inline-block}.typing-test__word--current{font-weight:800;color:var(--text-primary)}.typing-test__char{opacity:.6;transition:color .1s,opacity .1s}.typing-test__char--correct{color:var(--text-primary);opacity:1}.typing-test__char--incorrect{color:#f55;background:#ff555526;border-radius:2px;opacity:1}.typing-test__char--active{border-bottom:2px solid var(--key-accent-bg)}.typing-test__input{position:absolute;opacity:0;pointer-events:none}.typing-test__celebration{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;justify-content:center;align-items:center;z-index:40;border-radius:1.5rem;animation:fadeIn .4s ease-out}.typing-test__results-card{background:rgba(var(--text-rgb),.05);padding:3rem;border-radius:2rem;width:600px;border:1px solid var(--controls-border);text-align:center}.typing-test__results-card h2{font-size:2.2rem;font-weight:800;margin-bottom:2rem;opacity:.8}.typing-test__results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:2.5rem}.typing-test__result-item{display:flex;flex-direction:column;align-items:center}.typing-test__result-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;opacity:.5;font-weight:600;margin-bottom:.5rem}.typing-test__result-value{font-size:2.5rem;font-weight:800}.typing-test__rank{margin-bottom:3rem;padding:1.5rem;background:rgba(var(--text-rgb),.03);border-radius:1rem}.typing-test__rank-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;opacity:.4;margin-bottom:.4rem}.typing-test__rank-value{font-size:2rem;font-weight:900;text-transform:uppercase}.typing-test__try-again{background:var(--key-accent-bg);color:#fff;border:none;padding:1rem 3.5rem;border-radius:1rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px rgba(var(--accent-rgb),.3)}.typing-test__try-again:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 25px rgba(var(--accent-rgb),.5)}@keyframes fadeIn{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;background:var(--bg);color:var(--text-primary);transition:background .4s,color .4s;overflow:hidden}.app__sidebar{background:var(--controls-bg);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-right:1px solid var(--controls-border);display:flex;flex-direction:column;padding:2rem 1.5rem;z-index:10;transition:background .4s,border-color .4s}.app__logo{margin-bottom:3rem}.app__logo h1{font-size:1.8rem;font-weight:800;letter-spacing:-.04em}.app__logo h1 span{color:var(--key-accent-bg)}.app__logo p{font-size:.75rem;opacity:.6;margin-top:.25rem;font-weight:500}.app__sidebar .controls{flex:1;background:transparent;border:none;box-shadow:none;padding:0;flex-direction:column;align-items:flex-start;gap:2rem;width:100%}.app__sidebar .controls__group{align-items:flex-start;width:100%}.app__sidebar .controls__switches{flex-direction:column;width:100%}.app__sidebar .controls__switch-btn{width:100%;justify-content:flex-start}.app__sidebar .controls__slider{width:100%}.app__sidebar-footer{margin-top:auto;padding-top:2rem;font-size:.7rem;opacity:.5;text-align:center}.app__main{position:relative;overflow-y:auto;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center}.app__content{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:2rem}.app__keyboard-container{display:flex;justify-content:center;perspective:1000px}.app__bg-glow{position:fixed;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(var(--glow-rgb),.1) 0%,transparent 70%);pointer-events:none;z-index:0;top:30%;left:60%;transform:translate(-50%,-50%);transition:background .5s}@media(max-width:1200px){.app__keyboard-container{transform:scale(.9)}}@media(max-width:1000px){.app{grid-template-columns:1fr}.app__sidebar{border-right:none;border-bottom:1px solid var(--controls-border);padding:1.5rem}.app__sidebar .controls{flex-direction:row;flex-wrap:wrap}.app__sidebar .controls__group{width:auto}}@media(max-width:800px){.app__keyboard-container{transform:scale(.7)}}@media(max-width:600px){.app__keyboard-container{transform:scale(.5)}}