:root{--bg:#07070c;--bg-2:#0c0c15;--text:#eef0f8;--muted:#888da3;--panel:#ffffff0b;--panel-solid:#11121b;--panel-border:#ffffff17;--input-bg:#ffffff0a;--grad:linear-gradient(115deg, #6fc4dd 0%, #7e8cf0 55%, #a08be0 100%);--accent:#818cf8;--accent-2:#6fc4dd;--accent-text:#07070c;--glow:#818cf866;--glow-2:#6fc4dd4d;--aurora-opacity:.4;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f4f3fb;--bg-2:#eae8f6;--text:#15121f;--muted:#6b6680;--panel:#ffffff9e;--panel-solid:#fff;--panel-border:#1c143c1a;--input-bg:#ffffffb3;--grad:linear-gradient(115deg, #4596b0 0%, #6366f1 55%, #8b6fd6 100%);--accent:#6366f1;--accent-2:#4596b0;--accent-text:#fff;--glow:#6366f14d;--glow-2:#4596b03d;--aurora-opacity:.32;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(140% 120% at 50% 0%, var(--bg-2), var(--bg) 70%);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Poppins,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.aurora{z-index:-1;opacity:var(--aurora-opacity);pointer-events:none;position:fixed;inset:0;overflow:hidden}.aurora-blob{filter:blur(90px);will-change:transform;border-radius:50%;width:60vw;height:60vw;position:absolute}.aurora-blob.a1{background:radial-gradient(circle,#6fc4dd66,#0000 65%);animation:26s ease-in-out infinite drift1;top:-20vw;left:-10vw}.aurora-blob.a2{background:radial-gradient(circle,#a08be061,#0000 65%);animation:32s ease-in-out infinite drift2;top:-10vw;right:-15vw}.aurora-blob.a3{background:radial-gradient(circle,#7e8cf066,#0000 65%);animation:38s ease-in-out infinite drift3;bottom:-25vw;left:30vw}@keyframes drift1{0%,to{transform:translate(0)scale(1)}50%{transform:translate(8vw,6vw)scale(1.15)}}@keyframes drift2{0%,to{transform:translate(0)scale(1.05)}50%{transform:translate(-6vw,8vw)scale(.95)}}@keyframes drift3{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-7vw,-5vw)scale(1.12)}}.app{max-width:1100px;margin:0 auto;padding:34px 22px 72px}.app-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.brand{letter-spacing:-.03em;background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.1rem;font-weight:800}.tagline{color:var(--text);letter-spacing:-.01em;margin:7px 0 0;font-size:1.18rem;font-weight:700}.tagline em{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal}.header-actions{align-items:center;gap:10px;display:flex}.theme-toggle{background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);border:1px solid var(--panel-border);font:inherit;cursor:pointer;border-radius:999px;flex-shrink:0;padding:9px 16px;font-size:.85rem;transition:border-color .2s,transform .15s}.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}.tabs{background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:999px;gap:6px;width:fit-content;margin:30px auto 22px;padding:6px;display:flex;box-shadow:0 8px 30px #0000002e}.tab{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:11px 28px;font-size:1.02rem;font-weight:600;transition:color .2s,transform .15s}.tab:hover{color:var(--text)}.tab.is-on{color:var(--accent-text);background:var(--grad);box-shadow:0 6px 20px var(--glow)}.warning{color:#f3d9a6;background:#f59e0b1f;border:1px solid #f59e0b66;border-radius:10px;margin-top:16px;padding:10px 14px}.app-main,.tt,.panel{animation:.35s cubic-bezier(.2,.7,.2,1) both rise}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.app-main{flex-wrap:wrap;align-items:flex-start;gap:28px;margin-top:24px;display:flex}.kb-case{background:linear-gradient(180deg, var(--case-top), var(--case-bottom));border:1px solid var(--case-edge);box-shadow:0 30px 60px #0000008c, inset 0 2px 0 #ffffff38, inset 0 -4px 0 var(--case-edge);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:18px;padding:18px;display:inline-block}.kb-plate{background:var(--plate);border-radius:10px;padding:14px 13px;box-shadow:inset 0 3px 12px #00000080}.kb-row{gap:7px;margin-bottom:11px;display:flex}.kb-row:last-child{margin-bottom:2px}.kb-key{background:var(--cap-skirt);cursor:pointer;height:54px;font:inherit;box-shadow:0 1px 0 var(--cap-bottom), 0 5px 0 var(--cap-skirt), 0 6px 5px #00000059;border:none;border-radius:8px 8px 9px 9px;padding:0;transition:transform 40ms,box-shadow 60ms;position:relative}.kb-key.is-active{box-shadow:0 1px 0 var(--cap-bottom), 0 1px 0 var(--cap-skirt), 0 0 0 1.5px var(--accent-2), 0 0 22px var(--glow), 0 2px 6px #0006;transform:translateY(4px)}.kb-cap{width:100%;height:100%;color:var(--cap-text);background:radial-gradient(125% 85% at 50% 6%, #ffffff47, transparent 62%), linear-gradient(180deg, var(--cap-top), var(--cap-mid) 60%, var(--cap-bottom));border-radius:6px 6px 5px 5px;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:5px 7px;display:flex;box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -5px 7px #00000024}.kb-key-shift{opacity:.7;margin-bottom:2px;font-size:.58rem;font-weight:600;line-height:1}.kb-key-label{font-size:.8rem;font-weight:600;line-height:1}.panel{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:16px}.sim{flex-direction:column;align-items:center;gap:22px;margin-top:28px;display:flex}.sim-kb{width:100%}.sim-hint{color:var(--muted);text-align:center;max-width:460px;font-size:.9rem}.sim-hint strong{color:var(--text)}.drawer-backdrop{opacity:0;visibility:hidden;z-index:40;background:#00000073;transition:opacity .25s,visibility .25s;position:fixed;inset:0}.drawer-backdrop.open{opacity:1;visibility:visible}.drawer{z-index:50;background:var(--panel-solid);border-left:1px solid var(--panel-border);flex-direction:column;gap:18px;width:340px;max-width:88vw;height:100%;padding:22px;transition:transform .28s cubic-bezier(.2,.7,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-20px 0 60px #0006}.drawer.open{transform:translate(0)}.drawer-head{justify-content:space-between;align-items:center;display:flex}.drawer-head h2{margin:0;font-size:1.3rem;font-weight:700}.drawer-field{flex-direction:column;gap:6px;display:flex}.drawer-field label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.72rem}.drawer-field select{background:var(--input-bg);color:var(--text);border:1px solid var(--panel-border);font:inherit;border-radius:9px;padding:9px 11px}.drawer-hint{color:var(--muted);margin:2px 0 0;font-size:.8rem}.drawer-vol{align-items:center;gap:10px;display:flex}.drawer-vol input[type=range]{accent-color:var(--accent);flex:1}.drawer-footer{border-top:1px solid var(--panel-border);margin-top:auto;padding-top:12px}.drawer-footer .btn{text-align:center;justify-content:center;width:100%}.drawer-status{color:var(--accent-2);text-align:center;margin:10px 0 0;font-size:.82rem}.tt-switch-badge{color:var(--muted);align-self:center;font-size:.85rem}.kbd-chip{border:1px solid var(--panel-border);background:var(--input-bg);opacity:.85;border-radius:6px;margin-left:6px;padding:1px 6px;font-size:.7rem}.drawer-shortcut{color:var(--muted);margin:-6px 0 0;font-size:.78rem}.drawer-shortcut kbd{font-size:.7rem}.control-bar-wrap{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.control-bar{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding:12px 18px;display:flex}.cb-field{flex-direction:column;gap:4px;display:flex}.cb-field span{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.66rem}.cb-field select{background:var(--input-bg);color:var(--text);border:1px solid var(--panel-border);font:inherit;border-radius:9px;padding:7px 10px;font-size:.85rem}.cb-divider{background:var(--panel-border);align-self:stretch;width:1px;margin:4px 2px}.cb-status{color:var(--accent-2);margin:0;font-size:.8rem}.btn{background:var(--input-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);border:1px solid var(--panel-border);cursor:pointer;font:inherit;border-radius:10px;align-self:flex-start;padding:9px 16px;transition:border-color .2s,transform .15s}.btn:hover{border-color:var(--accent);transform:translateY(-1px)}.btn:active,.theme-toggle:active,.chip:active,.icon-btn:active,.tab:active{transform:translateY(1px)scale(.98)}.btn-primary{background:var(--grad);color:var(--accent-text);box-shadow:0 6px 22px var(--glow);border-color:#0000;font-weight:700}.btn-primary:hover{filter:brightness(1.06);border-color:#0000}.tt{flex-direction:column;gap:26px;max-width:900px;margin:8px auto 0;display:flex}.tt-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.tt-durations{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.chip{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--panel-border);color:var(--muted);font:inherit;cursor:pointer;border-radius:999px;padding:7px 15px;font-size:.85rem;transition:color .2s,border-color .2s}.chip:hover{color:var(--text)}.chip.is-on{color:var(--accent-text);background:var(--grad);box-shadow:0 4px 16px var(--glow);border-color:#0000;font-weight:600}.tt-custom{background:var(--input-bg);width:84px;color:var(--text);border:1px solid var(--panel-border);font:inherit;border-radius:9px;padding:7px 9px}.tt-metrics{align-items:center;gap:20px;display:flex}.metric{flex-direction:column;align-items:flex-start;line-height:1.1;display:flex}.metric-value{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.metric-value.accent{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}.metric-label{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:.7rem}.metric-big .metric-value{font-size:3rem}.tt-prompt-wrap{width:100%;position:relative}.shake-wrap{width:100%}.tt-prompt{letter-spacing:.02em;width:100%;color:color-mix(in srgb, var(--muted) 70%, transparent);height:10.2rem;font-family:inherit;font-size:1.7rem;line-height:2;transition:opacity .3s,filter .3s;position:relative;overflow:hidden}.tt-words{transition:transform .18s cubic-bezier(.2,.7,.2,1);position:absolute;top:0;left:0;right:0}.tt-word{white-space:nowrap;display:inline-block}.tt-prompt .ch{transition:color .1s,text-shadow .1s}.tt-prompt .ch.ok{color:var(--text);text-shadow:0 0 10px var(--glow-2)}.tt-prompt .ch.bad{color:#ff7a90;background:#ff7a9024;border-radius:3px}.tt-caret{background:var(--text);border-radius:3px;width:2.5px;transition:transform 90ms cubic-bezier(.2,.7,.2,1);animation:1.1s step-end infinite caretBlink;position:absolute;top:0;left:0}@keyframes caretBlink{0%,to{opacity:1}50%{opacity:.25}}.shake-wrap.shake{animation:.16s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.tt-sep{background:var(--panel-border);width:1px;height:22px;margin:0 4px}.tt-bar-right{align-items:center;gap:10px;display:flex}.wpm-graph{max-width:600px;margin:8px auto 22px}.wpm-graph-title{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;margin:0 0 6px;font-size:.78rem}.tt-results{margin:36px 0 8px;animation:.4s cubic-bezier(.2,.7,.2,1) both rise}.tt-result-grid{flex-wrap:wrap;justify-content:center;gap:42px;margin-bottom:24px;display:flex}.tt-result-actions{justify-content:center;gap:10px;display:flex}.tt-hint{color:var(--muted);align-items:center;gap:14px;font-size:.85rem;display:flex}.kbd-hint{align-items:center;gap:6px;display:inline-flex}kbd{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--text);border-radius:6px;padding:2px 7px;font-family:ui-monospace,monospace;font-size:.72rem}.tt-keyboard{opacity:.92;width:100%;margin-top:26px}.scale-fit{width:100%;position:relative}.scale-fit-inner{transform-origin:top;width:max-content;position:absolute;top:0;left:50%}.tt-sound{align-items:center;gap:10px;display:flex}.tt-switch{background:var(--input-bg);color:var(--text);border:1px solid var(--panel-border);font:inherit;border-radius:9px;max-width:180px;padding:7px 10px;font-size:.85rem}.icon-btn{background:var(--panel);border:1px solid var(--panel-border);cursor:pointer;color:var(--text);border-radius:9px;padding:6px 9px;font-size:.95rem;line-height:1;transition:border-color .18s,transform .12s}.icon-btn:hover{border-color:var(--accent)}.tt-vol{width:90px;accent-color:var(--accent)}.tt-status{justify-content:center;gap:28px;margin:0;display:flex}.tt-status .metric{align-items:center}.tt-prompt-wrap{position:relative}.tt-prompt.is-dim{opacity:.18;filter:blur(5px);-webkit-user-select:none;user-select:none}.tt-startcue{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.tt-startcue-inner{background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:18px;flex-direction:column;align-items:center;gap:8px;padding:22px 34px;display:flex;box-shadow:0 12px 40px #0000004d}.tt-startcue-main{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.55rem;font-weight:800}.tt-startcue-sub{color:var(--muted);font-size:.9rem}.tt-share-msg{color:var(--accent-2);text-align:center;margin-top:12px;font-size:.85rem}.shared-banner{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:16px 20px;display:flex}.shared-banner-main{flex-direction:column;gap:3px;display:flex}.shared-banner-label{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);font-size:.7rem;font-weight:600}.shared-banner-stats strong{font-size:1.05rem}.shared-banner-setup{color:var(--muted);font-size:.82rem}.shared-banner-actions{gap:8px;display:flex}@media (width<=720px){.app{padding:22px 14px 56px}.brand{font-size:1.7rem}.tt-bar{gap:12px}.tt-prompt{min-height:120px;font-size:1.25rem;line-height:2}.tt-result-grid{gap:24px}.metric-big .metric-value{font-size:2.2rem}.mobile-note{display:block}}.mobile-note{background:var(--panel);border:1px solid var(--panel-border);color:var(--muted);text-align:center;border-radius:10px;margin-top:14px;padding:10px 14px;font-size:.82rem;display:none}.panel{margin-top:24px;padding:24px}.panel h2{margin:0 0 18px;font-weight:700}.panel-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.panel-head h2{margin:0}.muted{color:var(--muted)}.summary{flex-wrap:wrap;gap:34px;margin-bottom:20px;display:flex}.stat{flex-direction:column;display:flex}.stat-value{font-variant-numeric:tabular-nums;background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.72rem}.charts{margin:8px 0 24px}.chart-insight{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:12px;margin:0 0 16px;padding:12px 16px;font-size:.95rem}.chart-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;display:grid}.chart-card{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:14px;padding:16px}.chart-head h3{margin:0;font-size:1rem;font-weight:700}.chart-head p{color:var(--muted);margin:2px 0 12px;font-size:.78rem}.chart-svg{width:100%;height:auto;display:block}.chart-axis{fill:var(--muted);font-size:11px}.chart-empty{color:var(--muted);font-size:.85rem}.table-title{margin:24px 0 10px;font-size:1rem;font-weight:700}.table{border-collapse:collapse;width:100%;font-size:.9rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--panel-border);padding:10px}.table th{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.7rem;font-weight:600}.app-footer{color:var(--muted);margin-top:42px;font-size:.78rem}@media (prefers-reduced-motion:reduce){.aurora-blob,.tt-prompt .ch.caret:before,.app-main,.tt,.panel,.tt-results{animation:none!important}}