*{box-sizing:border-box}html{min-width:320px;min-height:100%;margin:0}body{min-width:320px;min-height:100vh;margin:0}#root{width:100%;min-height:100vh}button,select,textarea{font:inherit}.keyboard{--bg:#0b0d14;--panel:#121624;--panel-2:#191f30;--key:#252e42;--key-hover:#374766;--text:#edf1ff;--muted:#8e9ab5;--border:#a0aed224;--accent:#8b8bff;--accent-2:#b49aff;box-sizing:border-box;background:radial-gradient(ellipse at 10% 0%, #5e5ce624, transparent 36%), radial-gradient(ellipse at 95% 48%, #894bd417, transparent 35%), var(--bg);width:100%;min-height:100vh;color:var(--text);flex-direction:column;align-items:center;gap:30px;padding:32px clamp(14px,4vw,60px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;display:flex;overflow-x:hidden}.keyboard *{box-sizing:border-box}.keyboard button,.keyboard select,.keyboard textarea{font:inherit}.keyboard button{color:inherit}.app-header,.workspace,.stats-grid,.keyboard-section,.typing-test-card,.app-footer{width:100%;max-width:1120px}.app-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px;display:flex}.brand{align-items:center;gap:13px;display:flex}.brand-icon{color:#fff;background:linear-gradient(135deg,#5c5ce8,#8e58d7);border:1px solid #9e8fff59;border-radius:14px;place-items:center;width:47px;height:47px;font-size:25px;display:grid;box-shadow:0 8px 28px #6d54e740}.brand h1{letter-spacing:-.8px;margin:0;font-size:23px}.brand p{color:var(--muted);margin:4px 0 0;font-size:12px}.header-controls{flex-wrap:wrap;align-items:end;gap:10px;display:flex}.select-control{color:var(--muted);letter-spacing:.8px;text-transform:uppercase;flex-direction:column;gap:5px;font-size:10px;font-weight:700;display:flex}.select-control select,.tool-button,.small-button{border:1px solid var(--border);background:var(--panel);min-height:37px;color:var(--text);border-radius:9px;padding:0 12px;font-size:12px}.select-control select{cursor:pointer;max-width:130px}.select-control option{background:var(--panel);color:var(--text)}.tool-button,.small-button{cursor:pointer;transition:background .2s,border-color .2s}.tool-button:hover,.small-button:hover{border-color:var(--accent);background:var(--key-hover)}.tool-button.selected{border-color:var(--accent);color:var(--accent)}.workspace{flex-direction:column;gap:17px;display:flex}.section-heading,.keyboard-section-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:var(--accent);letter-spacing:1.8px;margin-bottom:8px;font-size:10px;font-weight:800;display:block}.section-heading h2,.keyboard-section-heading h2,.typing-test-card h2{letter-spacing:-.8px;margin:0;font-size:clamp(20px,3vw,27px);font-weight:650}.accent-dot{color:var(--accent)}.section-heading p,.typing-test-card p{color:var(--muted);margin:8px 0 0;font-size:13px;line-height:1.7}.live-status{border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:11px;display:inline-flex}.live-status>span{background:#58d6a1;border-radius:50%;width:7px;height:7px;box-shadow:0 0 10px #58d6a180}.editor-card{border:1px solid var(--border);background:var(--panel);border-radius:16px;overflow:hidden;box-shadow:0 18px 45px #00000029}.editor-topbar{border-bottom:1px solid var(--border);min-height:49px;color:var(--muted);align-items:center;gap:13px;padding:0 15px;font-size:11px;display:flex}.window-dots{gap:5px;display:flex}.window-dots i{background:#f07178;border-radius:50%;width:8px;height:8px}.window-dots i:nth-child(2){background:#e9bd62}.window-dots i:nth-child(3){background:#62c993}.editor-actions{gap:7px;margin-left:auto;display:flex}.small-button{min-height:29px;padding:0 10px;font-size:11px}.danger-button:hover{color:#ff9daa;border-color:#e8798a}.keyboard-textarea{resize:vertical;width:100%;min-height:155px;color:var(--text);caret-color:var(--accent);background:0 0;border:0;outline:none;padding:20px;font-family:SFMono-Regular,Consolas,monospace;font-size:15px;line-height:1.8;display:block}.keyboard-textarea::placeholder{color:var(--muted);opacity:.7}.editor-footer{border-top:1px solid var(--border);min-height:38px;color:var(--muted);flex-wrap:wrap;align-items:center;gap:18px;padding:8px 16px;font-size:10px;display:flex}.editor-footer span:last-child{margin-left:auto}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.stat-card{border:1px solid var(--border);background:linear-gradient(135deg, var(--panel), transparent);border-radius:14px;align-items:center;gap:14px;min-width:0;padding:19px;display:flex}.stat-icon{width:42px;height:42px;color:var(--accent);background:#8b8bff1f;border-radius:12px;flex-shrink:0;place-items:center;font-size:25px;display:grid}.stat-card>div{flex-direction:column;gap:6px;min-width:0;display:flex}.stat-label{color:var(--muted);letter-spacing:1.3px;font-size:9px;font-weight:800}.stat-card strong{letter-spacing:-.5px;font-size:clamp(19px,3vw,25px);font-weight:650}.stat-card strong small{color:var(--muted);margin-left:4px;font-size:11px;font-weight:500}.keyboard-section{flex-direction:column;gap:17px;display:flex}.keyboard-badges{flex-wrap:wrap;gap:7px;display:flex}.keyboard-badges span{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:7px;padding:7px 9px;font-size:9px;font-weight:700}.keyboardcontainer{justify-content:center;width:100%;display:flex}.container{border:1px solid var(--border);background:linear-gradient(145deg, var(--panel-2), var(--panel));border-radius:18px;flex-direction:column;gap:9px;width:100%;padding:clamp(10px,2vw,23px);display:flex;box-shadow:0 24px 55px #0003}.row{align-items:stretch;gap:clamp(3px,.7vw,8px);width:100%;display:flex}.key{border:1px solid var(--border);background:linear-gradient(180deg, var(--key), var(--panel));min-width:0;min-height:clamp(42px,5vw,62px);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:9px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:3px;padding:4px 2px;font-size:clamp(9px,1.2vw,14px);font-weight:500;transition:background .12s,border-color .12s,transform .12s;display:flex;overflow:hidden;box-shadow:0 3px #00000038}.key:hover{border-color:var(--accent);background:var(--key-hover)}.key:active{box-shadow:none;transform:translateY(2px)}.key.active,.key.physical-pressed{border-color:var(--accent);color:#fff;background:linear-gradient(135deg,#5d5fe5,#8457cb);box-shadow:0 0 16px #8b8bff3d}.key:focus-visible,.keyboard button:focus-visible,.keyboard select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shift-symbol{color:var(--accent-2);font-size:10px}.key-backspace,.key-tab{flex-grow:1.5}.key-caps,.key-enter{flex-grow:2}.key-shift{flex-grow:2.2}.key-space{color:var(--muted);letter-spacing:2px;flex-grow:6;font-size:10px}.key-modifier{flex-grow:1.15}.key-arrow{flex-grow:.85}.typing-test-card{border:1px solid var(--border);background:radial-gradient(ellipse at right, #6f5be121, transparent 55%), var(--panel);border-radius:16px;justify-content:space-between;align-items:center;gap:22px;padding:clamp(18px,3vw,27px);display:flex}.typing-test-card p{max-width:690px}.primary-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6868ef,#8959d7);border:1px solid #0000;border-radius:10px;flex-shrink:0;min-height:42px;padding:0 17px;font-size:12px;font-weight:700;transition:transform .15s,filter .15s;box-shadow:0 6px 20px #6868ef2e}.primary-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.app-footer{border-top:1px solid var(--border);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:18px;font-size:10px;display:flex}.footer-separator{color:var(--accent);padding:0 5px}.theme-light{--bg:#f2f4fb;--panel:#fff;--panel-2:#e9edf7;--key:#e0e6f3;--key-hover:#cbd5ed;--text:#20283b;--muted:#68738c;--border:#39466a29;--accent:#5557d9;--accent-2:#5557d9;background:radial-gradient(ellipse at 10% 0%, #e1e2ff, transparent 40%), var(--bg)}.theme-light .editor-card,.theme-light .container{box-shadow:0 15px 45px #2f3b5e14}.theme-light .key{background:linear-gradient(#fff,#e3e8f3);box-shadow:0 3px #c5ccdc}.theme-light .key:hover{background:#d7def7}.theme-light .key.active,.theme-light .key.physical-pressed{color:#fff;background:linear-gradient(135deg,#6265e9,#8861d6)}.theme-light .key-space{color:#68738c}.theme-light .select-control select,.theme-light .tool-button,.theme-light .small-button{background:#fff}.theme-neon{--bg:#080b10;--panel:#0c121b;--panel-2:#101a26;--key:#102632;--key-hover:#174453;--text:#dcfff7;--muted:#83a9ad;--border:#37dec433;--accent:#35e4c1;--accent-2:#83fff0;background:radial-gradient(ellipse at 15% 5%, #00e5c81f, transparent 35%), radial-gradient(ellipse at 90% 90%, #2682ff1a, transparent 40%), var(--bg)}.theme-neon .brand-icon{background:linear-gradient(135deg,#0faeae,#315de0);box-shadow:0 0 28px #35e4c138}.theme-neon .key.active,.theme-neon .key.physical-pressed{border-color:var(--accent);background:#087f76;box-shadow:0 0 15px #35e4c14d}.theme-neon .key:hover{border-color:var(--accent)}@media (width<=700px){.keyboard{gap:23px;padding:22px 12px}.app-header{align-items:flex-start}.header-controls{width:100%}.stats-grid{gap:8px}.stat-card{gap:8px;padding:12px 9px}.stat-icon{width:31px;height:31px;font-size:19px}.container{border-radius:12px;gap:7px;padding:9px 6px}.row{gap:3px}.key{border-radius:6px}.typing-test-card{flex-direction:column;align-items:flex-start}}@media (width<=420px){.keyboard{padding-left:5px;padding-right:5px}.brand h1{font-size:20px}.header-controls{gap:7px}.select-control select{max-width:112px}.editor-topbar{gap:8px;padding:0 9px}.editor-actions{gap:4px}.small-button{padding:0 7px;font-size:10px}.stats-grid{grid-template-columns:1fr}.stat-card{padding:13px}.keyboard-badges{gap:4px}.keyboard-badges span{padding:6px;font-size:8px}}@media (prefers-reduced-motion:reduce){.keyboard *,.keyboard :before,.keyboard :after{transition:none!important;animation:none!important}}.duration-picker{flex-wrap:wrap;align-items:center;gap:7px;margin-top:17px;display:flex}.duration-picker>span{color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-right:4px;font-size:10px;font-weight:700}.duration-button{border:1px solid var(--border);min-width:48px;min-height:31px;color:var(--muted);background:var(--panel-2);cursor:pointer;border-radius:8px;padding:0 11px;font-size:11px;font-weight:700;transition:background .15s,border-color .15s,color .15s}.duration-button:hover:not(:disabled){border-color:var(--accent);color:var(--text)}.duration-button.selected{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 13%, var(--panel))}.duration-button:disabled{opacity:.5;cursor:not-allowed}.test-actions{flex-shrink:0;align-items:center;gap:15px;display:flex}.test-countdown{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:17px;font-weight:750}.test-countdown small{color:var(--muted);text-align:center;margin-top:3px;font-size:9px;font-weight:500;display:block}.results-panel,.leaderboard-panel{border:1px solid var(--border);background:radial-gradient(ellipse at right top, #6f5be11c, transparent 52%), var(--panel);border-radius:16px;width:100%;max-width:1120px;padding:clamp(18px,3vw,27px)}.results-heading,.leaderboard-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.results-heading h2,.leaderboard-heading h2{letter-spacing:-.6px;margin:0;font-size:clamp(20px,3vw,25px)}.results-heading p,.leaderboard-heading p{color:var(--muted);margin:7px 0 0;font-size:12px;line-height:1.6}.results-trophy,.leaderboard-trophy{width:48px;height:48px;color:var(--accent);background:color-mix(in srgb, var(--accent) 13%, transparent);border-radius:14px;flex-shrink:0;place-items:center;font-size:24px;display:grid}.results-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;display:grid}.result-stat{border:1px solid var(--border);background:color-mix(in srgb, var(--panel-2) 72%, transparent);border-radius:12px;flex-direction:column;gap:8px;padding:16px;display:flex}.result-stat span{color:var(--muted);font-size:10px}.result-stat strong{color:var(--text);letter-spacing:-.5px;font-size:clamp(19px,3vw,26px)}.result-stat strong small{color:var(--muted);font-size:10px;font-weight:500}.leaderboard-panel{flex-direction:column;gap:14px;display:flex}.leaderboard-heading{margin-bottom:0}.leaderboard-table-wrap{width:100%;overflow-x:auto}.leaderboard-table{border-collapse:collapse;text-align:left;width:100%;min-width:480px}.leaderboard-table th{color:var(--muted);border-bottom:1px solid var(--border);letter-spacing:1px;text-transform:uppercase;padding:12px 10px;font-size:9px;font-weight:800}.leaderboard-table td{color:var(--muted);border-bottom:1px solid var(--border);padding:13px 10px;font-size:11px}.leaderboard-table tbody tr:last-child td{border-bottom:0}.leaderboard-table td strong{color:var(--text);font-weight:750}.rank-badge{width:25px;height:25px;color:var(--muted);background:var(--panel-2);border-radius:8px;place-items:center;font-size:10px;font-weight:800;display:inline-grid}.rank-1{color:#e9b94f;background:#e9b94f21}.rank-2{color:#a9b5cc;background:#a9b5cc21}.rank-3{color:#d99066;background:#d9906621}.leaderboard-empty{border:1px dashed var(--border);color:var(--muted);text-align:center;border-radius:12px;padding:25px 16px;font-size:12px;line-height:1.7}.clear-leaderboard{align-self:flex-end}@media (width<=700px){.test-actions{justify-content:space-between;width:100%}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=420px){.results-grid{gap:8px}.result-stat{padding:12px}.duration-picker{gap:5px}}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}