:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--max-width:1200px;--header-height:80px;--font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--bg-primary:#0f0f0f;--bg-card:#1a1a1a;--bg-hover:#242424;--bg-elevated:#2a2a2a;--surface-0:#0f0f0f;--surface-1:#1a1a1a;--surface-2:#242424;--surface-3:#2e2e2e;--surface-4:#383838;--glass-border:#ffffff14;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--shadow-subtle:0 2px 8px #0000004d, 0 1px 2px #0003;--shadow-elevated:0 8px 32px #0006, 0 2px 8px #0000004d;--text-primary:#e8e8e8;--text-secondary:#b8b8b8;--text-tertiary:#9a9a9a;--accent-green:#10b981;--accent-orange:#f59e0b;--accent-blue:#3b82f6;--accent-red:#ef4444;--accent-green-rgb:16, 185, 129;--accent-orange-rgb:245, 158, 11;--accent-blue-rgb:59, 130, 246;--accent-red-rgb:239, 68, 68;--primary-color:var(--accent-orange);--success-color:var(--accent-green);--danger-color:var(--accent-red);--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--text-xs:clamp(.75rem, 1.5vw, .875rem);--text-sm:clamp(.875rem, 2vw, 1rem);--text-base:clamp(1rem, 2.5vw, 1.125rem);--text-lg:clamp(1.125rem, 3vw, 1.25rem);--text-xl:clamp(1.25rem, 3.5vw, 1.5rem);--text-2xl:clamp(1.5rem, 4vw, 1.75rem);--text-3xl:clamp(1.75rem, 5vw, 2rem);--text-4xl:clamp(2rem, 6vw, 2.5rem);--text-5xl:clamp(2.5rem, 8vw, 3.5rem);--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--border-color:var(--border-default);--success:var(--accent-green);--error:var(--accent-red);--warning:#ff9800}*{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html{width:100%;overflow-x:hidden}.container,.main-content,.performance-section,.practice-card{max-width:100%}body{font-family:var(--font-mono);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.02em;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background-image:radial-gradient(circle at 20% 50%, rgba(var(--accent-blue-rgb), .03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--accent-orange-rgb), .03) 0%, transparent 50%);min-height:100dvh;margin:0;line-height:1.6;overflow-x:hidden}.container{max-width:var(--max-width);width:100%;padding:0;padding-top:calc(var(--header-height) + 152px + env(safe-area-inset-top));background:0 0;margin:0 auto}h1,h2,h3{font-weight:600}.fixed-top-section{top:calc(var(--header-height) + env(safe-area-inset-top));z-index:90;background:0 0;position:fixed;left:0;right:0}.fixed-top-section-inner{max-width:var(--max-width);width:100%;margin:0 auto;padding:0}.app-header{-webkit-backdrop-filter:blur(20px)saturate(180%);border-bottom:1px solid var(--border-subtle);z-index:100;will-change:transform;background:#0f0f0ff2;width:100%;transition:all .3s;position:fixed;top:0;left:0;right:0;transform:translateZ(0);box-shadow:0 2px 16px #0003}.header-content{padding:1rem 1.5rem;padding-top:calc(1rem + env(safe-area-inset-top));padding-left:calc(1.5rem + env(safe-area-inset-left));padding-right:calc(1.5rem + env(safe-area-inset-right));max-width:var(--max-width);justify-content:space-between;align-items:center;min-height:48px;margin:0 auto;display:flex}.timer-info{align-items:baseline;gap:.5rem;display:flex}.timer-label{color:var(--text-tertiary);font-size:.875rem}.timer-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.125rem;font-weight:600}.settings-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);-webkit-tap-highlight-color:transparent;background:0 0;border:none;align-items:center;gap:.5rem;min-height:48px;margin:-.75rem -1rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.settings-btn:hover{background:#ffffff0d}.settings-btn:active{background:#ffffff14;transform:scale(.98)}.settings-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.settings-recognition,.settings-speed{color:var(--text-secondary)}.chip-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}@media (max-width:640px){.chip-label{display:none}}.settings-separator{color:var(--text-tertiary)}.settings-icon{color:var(--text-secondary);width:20px;height:20px;transition:color .15s}.settings-btn:hover .settings-icon{color:var(--text-primary)}h2{margin-bottom:1rem;font-size:1.25rem}h3{margin-bottom:.5rem;font-size:1rem}.main-content{flex-direction:column;gap:0;max-width:100%;padding:0;display:flex;position:relative}.performance-section{max-width:100%;padding:0 1.5rem calc(1.5rem + env(safe-area-inset-bottom) + 40px) 1.5rem;flex-direction:column;gap:1.5rem;display:flex}body.is-playing .main-content{position:relative}.practice-card{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);text-align:center;border:1px solid var(--glass-border);-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-elevated), 0 8px 16px -4px #0000004d, 0 12px 24px -8px #0003;z-index:10;background:#ffffff08;flex-shrink:0;min-height:120px;margin:1rem 1.5rem;padding:0;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.practice-card.result-correct{border-color:var(--accent-green);box-shadow:0 0 0 1px var(--accent-green), 0 0 16px rgba(var(--accent-green-rgb), .25)}.practice-card.result-incorrect{border-color:var(--accent-red);box-shadow:0 0 0 1px var(--accent-red), 0 0 16px rgba(var(--accent-red-rgb), .25)}.practice-card.waiting-start{border:2px solid var(--primary-color);cursor:pointer;box-shadow:0 0 20px rgba(var(--accent-orange-rgb), .2), var(--shadow-elevated);background:rgba(var(--accent-orange-rgb), .05)}.practice-card.waiting-start:hover{background:rgba(var(--accent-orange-rgb), .1);box-shadow:0 0 30px rgba(var(--accent-orange-rgb), .3), var(--shadow-elevated);transform:translateY(-1px)}.practice-card:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff0d 0%,#0000 100%);position:absolute;top:0;bottom:0;left:0;right:0}.practice-content{flex-direction:row;align-items:stretch;gap:0;min-height:120px;display:flex;position:relative}.practice-display-zone *{transition:opacity .3s,visibility .3s}.practice-display-zone{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex;position:relative}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:flex}.settings-group{flex-direction:column;gap:2rem;display:flex}.slider{background:var(--border-default);-webkit-appearance:none;border-radius:3px;width:100%;height:6px;margin:1rem 0}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary-color);cursor:pointer;border-radius:50%;width:24px;height:24px;transition:all .2s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px rgba(var(--accent-blue-rgb), .1);transform:scale(1.2)}.slider::-moz-range-thumb{background:var(--primary-color);cursor:pointer;border:none;border-radius:50%;width:24px;height:24px;transition:all .2s}.slider::-moz-range-thumb:hover{box-shadow:0 0 0 8px rgba(var(--accent-blue-rgb), .1);transform:scale(1.2)}.slider-labels{color:var(--text-tertiary);letter-spacing:.02em;justify-content:space-between;margin-top:.25rem;font-size:.75rem;display:flex}.label-value{color:var(--primary-color);letter-spacing:.02em;white-space:nowrap;font-weight:700}.slider:disabled{opacity:.5;cursor:not-allowed}.voice-selector{background:var(--surface-2);border:1px solid var(--border-color);width:100%;color:var(--text-primary);cursor:pointer;border-radius:4px;padding:.5rem;font-size:1rem;transition:all .2s}.voice-selector:hover{background:var(--surface-2);border-color:var(--border-default)}.voice-selector:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--accent-blue-rgb), .1)}.voice-selector:disabled{opacity:.4;cursor:not-allowed;background:#ffffff0d}.voice-helper-text{color:var(--text-tertiary);opacity:0;margin-top:.375rem;font-size:.8125rem;line-height:1.2;transition:opacity .2s ease-in-out}.voice-helper-text.show{opacity:1}.voice-helper-text:before{content:"ⓘ ";opacity:.7}.ripple-container{pointer-events:none;border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.ripple{background:#ffffff80;border-radius:50%;animation:.6s ease-out ripple-animation;position:absolute;transform:scale(0)}@keyframes ripple-animation{to{opacity:0;transform:scale(4)}}.btn-start{color:var(--primary-color);cursor:pointer;letter-spacing:.1em;text-transform:uppercase;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;font-size:1.25rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;bottom:0;left:0}.button-text{z-index:1;position:relative}@keyframes gentlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.practice-card.waiting-start{animation:3s ease-in-out infinite gentlePulse}@media (prefers-reduced-motion:reduce){.practice-card.waiting-start{animation:none}}.practice-card.waiting-start:hover{animation:none}.side-button{cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent;border:none;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-width:80px;min-height:120px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.stop-btn{background:var(--surface-1);color:var(--text-secondary);border-radius:var(--radius-xl) 0 0 var(--radius-xl);box-shadow:inset 0 2px 4px #0000004d,inset 0 1px #ffffff0d}.side-button .button-text{flex-direction:column;justify-content:center;align-items:center;display:flex}.side-button svg{width:24px;height:24px;display:block}.stop-btn:hover{background:var(--surface-2);color:var(--text-primary);box-shadow:inset 0 2px 4px #0003,inset 0 1px #ffffff14}.stop-btn:active{background:var(--surface-0);transform:scale(.98);box-shadow:inset 0 3px 6px #0006}.oops-btn{background:var(--accent-red);color:#fff;border-radius:0 var(--radius-xl) var(--radius-xl) 0;font-weight:700}.oops-btn:active{transform:scale(.98)}.oops-btn:disabled{background:var(--surface-2);color:var(--text-tertiary);cursor:not-allowed}.oops-btn.oops-marked{background:var(--surface-3);color:var(--text-tertiary);cursor:not-allowed;border-color:#0000;box-shadow:inset 0 2px 4px #0000004d,inset 0 1px #ffffff0d}.oops-btn .ripple{pointer-events:none;background:#fff9;border-radius:50%;animation:.6s ease-out ripple-effect;position:absolute;transform:scale(0)}@keyframes ripple-effect{to{opacity:0;transform:scale(4)}}.oops-btn.pressed{animation:.2s ease-out subtle-press}@keyframes subtle-press{0%{transform:scale(1)}50%{transform:scale(.98)}to{transform:scale(1)}}.listening-state{opacity:0;visibility:hidden;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.listening-state.visible{opacity:1;visibility:visible}.morse-waveform{justify-content:center;align-items:center;gap:4px;height:60px;padding:0 10px;display:flex}.waveform-bar{background:var(--primary-color);transform-origin:50%;opacity:.3;width:4px;height:24px;box-shadow:0 0 10px rgba(var(--accent-orange-rgb), .3);will-change:transform, opacity;border-radius:2px;transition:all .1s cubic-bezier(.4,0,.2,1);transform:translateZ(0)}.listening-state.visible .waveform-bar{opacity:.5;animation:2s ease-in-out infinite idleWave}.listening-state.visible .waveform-bar:first-child{animation-delay:0s}.listening-state.visible .waveform-bar:nth-child(2){animation-delay:.1s}.listening-state.visible .waveform-bar:nth-child(3){animation-delay:.2s}.listening-state.visible .waveform-bar:nth-child(4){animation-delay:.3s}.listening-state.visible .waveform-bar:nth-child(5){animation-delay:.4s}.listening-state.visible .waveform-bar:nth-child(6){animation-delay:.5s}.listening-state.visible .waveform-bar:nth-child(7){animation-delay:.6s}.waveform-bar.active{opacity:1!important;animation:.8s ease-in-out infinite activeWave!important}@keyframes idleWave{0%,to{opacity:.5;transform:scaleY(1)}50%{opacity:.7;transform:scaleY(1.3)}}@keyframes activeWave{0%,to{opacity:.85;box-shadow:0 0 12px rgba(var(--accent-orange-rgb), .4);transform:scaleY(2)}50%{opacity:1;filter:brightness(1.2);box-shadow:0 0 20px rgba(var(--accent-orange-rgb), .7);transform:scaleY(2.6)}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.waveform-bar{transition:none;animation:none!important}.waveform-bar.active{opacity:1;transform:scaleY(2)}}.char-display{color:var(--text-primary);letter-spacing:.1em;opacity:0;visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;will-change:opacity, transform;text-shadow:0 0 20px #ffffff1a,0 0 40px #ffffff0d;font-size:clamp(4rem,15vw,6rem);font-weight:700;line-height:1;transition:all .4s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8)}.char-display.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%)scale(1)}.performance-dashboard{gap:1.5rem;display:none}.is-playing .performance-dashboard,.has-practiced .performance-dashboard{display:grid}.session-summary{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);-webkit-backdrop-filter:blur(10px);margin-bottom:var(--space-md);background:#ffffff05}.session-summary[hidden]{display:none}.session-summary-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.session-summary-title{font-size:var(--text-base);color:var(--text-primary);font-weight:600}.session-summary-dismiss{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;transition:color .2s;display:flex}.session-summary-dismiss:hover{color:var(--text-secondary)}.session-summary-stats{gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(100px,1fr));display:grid}.summary-stat{text-align:center}.summary-stat-value{font-size:var(--text-xl);color:var(--text-primary);font-weight:700;display:block}.summary-stat-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem;display:block}.session-summary-toughest{margin-top:var(--space-sm);text-align:center;font-size:var(--text-sm);color:var(--text-secondary)}.welcome-box{text-align:center;padding:1.5rem}.welcome-box h1{color:var(--text-primary);text-align:center;letter-spacing:.02em;margin-bottom:.25rem;font-size:1.5rem;font-weight:700}.welcome-box .tagline{color:var(--text-secondary);text-align:center;margin-bottom:2rem;font-size:.875rem}.how-it-works{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.step-card{text-align:center;border-radius:var(--radius-md);background:var(--surface-1);border:1px solid var(--border-subtle);flex:1;max-width:140px;padding:1rem .5rem;transition:all .2s}.step-card:hover{background:var(--surface-2);border-color:var(--border-default);transform:translateY(-2px)}.step-icon{color:var(--text-secondary);margin-bottom:.5rem;display:block}.step-content h4{color:var(--text-primary);margin-bottom:.25rem;font-size:.875rem;font-weight:600}.step-content p{color:var(--text-secondary);margin:0;font-size:.75rem;line-height:1.3}.key-features{flex-direction:column;gap:.75rem;max-width:400px;margin-bottom:1.5rem;margin-left:auto;margin-right:auto;display:flex}.feature{background:var(--surface-1);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-secondary);text-align:left;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.813rem;display:flex}.feature-icon{color:var(--text-secondary);flex-shrink:0}.quick-tips{text-align:center;border-top:1px solid var(--border-subtle);margin-top:.5rem;padding-top:1rem}.quick-tips .tip{color:var(--text-tertiary);margin:0;font-size:.75rem}kbd{min-width:2rem;font-size:.75rem;font-family:var(--font-mono);text-align:center;color:var(--text-primary);background-color:var(--surface-2);border:1px solid var(--border-default);box-shadow:inset 0 -1px 0 var(--border-subtle), 0 1px 2px #0003;white-space:nowrap;border-radius:4px;padding:.25rem .5rem;font-weight:600;line-height:1.2;display:inline-block}@media (max-width:640px){.welcome-box{padding:1rem}.welcome-box h1{font-size:1.25rem}.how-it-works{gap:.5rem}.step-card{padding:.75rem .25rem}.step-content h4{font-size:.813rem}.feature{padding:.625rem .75rem;font-size:.75rem}}.overlay{-webkit-backdrop-filter:blur(4px);z-index:999;opacity:0;background:#0009;width:100%;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.overlay.show{opacity:1;display:block}.settings-panel{-webkit-backdrop-filter:blur(24px)saturate(180%);z-index:2000;border-left:1px solid var(--glass-border);-webkit-overflow-scrolling:touch;background:#0f0f0ff2;width:400px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-8px 0 32px #0006,-2px 0 8px #0003}.settings-panel.show{transform:translate(0)}.settings-panel-inner{padding:1.5rem;padding-top:calc(1.5rem + env(safe-area-inset-top));padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));flex-direction:column;min-height:100%;display:flex}.panel-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.panel-body{flex:1}.panel-footer{border-top:1px solid var(--border-subtle);margin-top:2rem;padding-top:1.5rem}.reset-progress-btn{width:100%;color:var(--text-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;background:#ffffff08;margin-bottom:.75rem;padding:.75rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:block}.reset-progress-btn:hover{color:var(--accent-red);border-color:var(--accent-red);background:rgba(var(--accent-red-rgb), .08)}.contact-link{color:var(--text-secondary);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);background:#ffffff08;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.contact-link:hover{color:var(--text-primary);border-color:var(--border-default);background:#ffffff0d;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.contact-link svg{width:20px;height:20px}.keyboard-shortcuts{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#ffffff08;margin-bottom:1.5rem;padding:1rem}.shortcuts-title{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.75rem;font-weight:600}.shortcut-list{flex-direction:column;gap:.5rem;display:flex}.shortcut-item{align-items:center;gap:.75rem;font-size:.8125rem;display:flex}.shortcut-desc{color:var(--text-secondary)}@media (max-width:768px){.settings-panel{border-left:none;border-top:1px solid var(--glass-border);width:100%;transform:translateY(100%)}.settings-panel.show{transform:translateY(0)}.voice-selector{min-height:44px;font-size:1rem}.voice-helper-text{font-size:.875rem}}.close-btn{cursor:pointer;color:var(--text-tertiary);background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:1.5rem;line-height:1;transition:color .2s;display:flex}.close-btn:hover{color:var(--text-secondary)}@media (max-width:768px){:root{--header-height:72px;--space-xs:.375rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem}.welcome-box h1{font-size:var(--text-xl)}.btn-start{font-size:var(--text-lg);padding:2.5rem 2rem}.header-content{padding:.75rem 1rem;padding-top:calc(.75rem + env(safe-area-inset-top))}}@media (max-width:480px){.side-button{min-width:60px}.practice-card{border-radius:var(--radius-lg)}}.loading-overlay{width:100vw;height:100vh;background:var(--bg-primary);z-index:10000;height:-webkit-fill-available;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);justify-content:center;align-items:center;display:none;position:fixed;top:0;left:0}.loading-overlay.show{display:flex}.loading-content{text-align:center;max-width:400px;padding:var(--space-lg);margin:auto;position:relative}.loading-title{font-size:var(--text-4xl);color:var(--text-primary);margin-bottom:var(--space-xs);letter-spacing:-.02em;font-weight:700}.loading-subtitle{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-xl)}.progress-container{width:100%}.progress-bar{background:var(--bg-elevated);width:100%;height:6px;margin-bottom:var(--space-md);border-radius:3px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-blue), var(--accent-green));border-radius:3px;width:0%;height:100%;transition:width .3s}.loading-text{font-size:var(--text-sm);color:var(--text-secondary)}.gauge-container{border:1.5px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,#ffffff0d 0%,#ffffff05 100%);position:relative;box-shadow:0 4px 20px #0000001a,inset 0 0 0 1px #ffffff0d}.gauge-container:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff08 0%,#0000 70%);width:200%;height:200%;animation:8s ease-in-out infinite gauge-shimmer;position:absolute;top:-50%;left:-50%}@keyframes gauge-shimmer{0%,to{opacity:.5;transform:translate(0)scale(1)}50%{opacity:.8;transform:translate(-10%,-10%)scale(1.1)}}.gauge-wrapper{flex-direction:column;gap:0;display:flex}.gauge-section{justify-content:center;align-items:center;margin-bottom:0;transition:box-shadow .5s ease-out;display:flex;position:relative}.gauge-zone-arc{filter:brightness(.8)saturate(.7);transform-origin:50%;transition:all .5s ease-out}.gauge-zone-arc.too-easy-arc{opacity:.45}.gauge-zone-arc.learning-arc{opacity:.5}.gauge-zone-arc.too-hard-arc{opacity:.45}.gauge-wrapper.zone-learning .gauge-zone-arc.learning-arc,.gauge-wrapper.zone-too-easy .gauge-zone-arc.too-easy-arc,.gauge-wrapper.zone-too-hard .gauge-zone-arc.too-hard-arc{opacity:1;-webkit-filter:brightness(1.3)saturate(1.1)}.gauge-label{fill:#fffffff2;letter-spacing:.06em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 3px #00000080,0 0 10px #0000004d;paint-order:stroke fill;stroke:#0006;stroke-width:.7px;font-size:13px;font-weight:600;transition:opacity .5s ease-out,fill .5s ease-out}.gauge-label.training-zone{fill:#fff;stroke-width:.7px;font-size:13px;font-weight:700}.gauge-wrapper.zone-learning .gauge-label:nth-of-type(2),.gauge-wrapper.zone-too-hard .gauge-label:first-of-type,.gauge-wrapper.zone-too-easy .gauge-label:nth-of-type(3){opacity:1;fill:#fff}.gauge-needle-line{stroke:var(--text-primary);stroke-width:4px;filter:drop-shadow(0 2px 4px #0000004d)drop-shadow(0 0 8px #fff3)}.gauge-needle-triangle{filter:drop-shadow(0 2px 6px #0006)drop-shadow(0 0 10px #ffffff26)}.gauge-needle circle{filter:drop-shadow(0 2px 4px #0000004d)}.gauge-wrapper.zone-learning .gauge-needle-line{filter:drop-shadow(0 2px 4px #0000004d) drop-shadow(0 0 12px rgba(var(--accent-green-rgb), .4))}.gauge-wrapper.zone-too-easy .gauge-needle-line{filter:drop-shadow(0 2px 4px #0000004d) drop-shadow(0 0 12px rgba(var(--accent-blue-rgb), .4))}.gauge-wrapper.zone-too-hard .gauge-needle-line{filter:drop-shadow(0 2px 4px #0000004d) drop-shadow(0 0 12px rgba(var(--accent-red-rgb), .4))}.gauge-needle-animated{transition:transform .8s cubic-bezier(.4,0,.2,1)}@media (max-width:640px){.gauge-svg{width:100%;height:auto}.gauge-container{padding:var(--space-md)}.gauge-section{overflow:hidden}.recognition-recommendation-btn{min-width:120px;padding:var(--space-sm) var(--space-md);font-size:.875rem}.zone-status-text{font-size:.8125rem}}@media (prefers-reduced-motion:reduce){.gauge-needle-line{animation:none!important}.gauge-needle-animated{transition:none}.gauge-container:before{animation:none}}.zone-status-message{text-align:center;min-height:1.25rem;margin-top:0}.zone-status-text{letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);font-size:.875rem;font-weight:500;line-height:1.25rem;transition:all .4s cubic-bezier(.4,0,.2,1)}.zone-status-text.optimal{color:var(--accent-green);text-shadow:0 0 10px rgba(var(--accent-green-rgb), .3);font-weight:600}.zone-status-text.too-easy{color:var(--accent-blue);text-shadow:0 0 10px rgba(var(--accent-blue-rgb), .3)}.zone-status-text.too-hard{color:var(--accent-red);text-shadow:0 0 10px rgba(var(--accent-red-rgb), .3)}.recognition-controls{justify-content:center;align-items:center;min-height:44px;margin-top:16px;display:flex}.recognition-recommendation-btn{min-width:140px;min-height:44px;padding:var(--space-sm) var(--space-lg);font-size:var(--text-base);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff14 0%,#ffffff0a 100%);border:1.5px solid #ffffff1f;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);animation:2s ease-in-out infinite pulse-glow;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000026,0 0 20px #ffffff1a,inset 0 0 0 1px #ffffff1a}.recognition-recommendation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #00000040,0 0 30px #ffffff26,inset 0 0 0 1px #ffffff26}.recognition-recommendation-btn:active:not(:disabled){transition-duration:.1s;transform:translateY(0)}.recognition-recommendation-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.recognition-recommendation-btn:disabled,.recognition-recommendation-btn.training-well{cursor:default;color:var(--text-secondary);background:linear-gradient(135deg,#ffffff0a 0%,#ffffff05 100%);border-color:#ffffff14;font-weight:500;animation:none;box-shadow:0 1px 4px #00000014,inset 0 0 0 1px #ffffff0d}.recognition-recommendation-btn.increase{border-color:rgba(var(--accent-red-rgb), .5);background:linear-gradient(135deg, rgba(var(--accent-red-rgb), .15) 0%, rgba(var(--accent-red-rgb), .08) 100%)}.recognition-recommendation-btn.increase:hover:not(:disabled){border-color:rgba(var(--accent-red-rgb), .7);background:linear-gradient(135deg, rgba(var(--accent-red-rgb), .25) 0%, rgba(var(--accent-red-rgb), .15) 100%);box-shadow:0 6px 24px rgba(var(--accent-red-rgb), .3), 0 0 30px rgba(var(--accent-red-rgb), .2), 0 0 0 1px rgba(var(--accent-red-rgb), .3) inset}.recognition-recommendation-btn.decrease{border-color:rgba(var(--accent-blue-rgb), .5);background:linear-gradient(135deg, rgba(var(--accent-blue-rgb), .15) 0%, rgba(var(--accent-blue-rgb), .08) 100%)}.recognition-recommendation-btn.decrease:hover:not(:disabled){border-color:rgba(var(--accent-blue-rgb), .7);background:linear-gradient(135deg, rgba(var(--accent-blue-rgb), .25) 0%, rgba(var(--accent-blue-rgb), .15) 100%);box-shadow:0 6px 24px rgba(var(--accent-blue-rgb), .3), 0 0 30px rgba(var(--accent-blue-rgb), .2), 0 0 0 1px rgba(var(--accent-blue-rgb), .3) inset}.recommendation-content{font-feature-settings:"tnum";letter-spacing:.025em;display:inline-block}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1);box-shadow:0 4px 16px #00000026,0 0 20px #ffffff1a,inset 0 0 0 1px #ffffff1a}50%{opacity:.95;transform:scale(1.03);box-shadow:0 6px 24px #0003,0 0 30px #ffffff26,inset 0 0 0 2px #ffffff26}}.focus-queue{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff05}.focus-queue-title,.practice-stream-title{font-size:var(--text-base);color:var(--text-primary);margin-bottom:var(--space-md);font-weight:600}.focus-queue-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));display:grid}.focus-char{border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-md);text-align:center;background:#ffffff08;transition:all .2s}.focus-char:hover{border-color:var(--border-default);box-shadow:var(--shadow-subtle);background:#ffffff0d;transform:translateY(-2px)}.focus-char-letter{font-size:var(--text-2xl);color:var(--text-primary);margin-bottom:var(--space-sm);font-weight:700}.focus-char-stats{font-size:var(--text-xs)}.focus-accuracy{height:8px;margin-bottom:var(--space-xs);background:#ffffff1a;border-radius:4px;position:relative;overflow:hidden}.focus-accuracy-bar{background:var(--accent-blue);border-radius:2px;height:100%;transition:width .3s;position:absolute;top:0;left:0}.focus-accuracy-text{color:var(--text-secondary);margin-top:var(--space-xs);font-weight:500;font-size:var(--text-sm)}.focus-confusion{color:var(--text-secondary);margin-top:var(--space-xs);font-size:var(--text-sm)}.focus-confusion strong{color:var(--text-secondary)}.practice-stream{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;background:#ffffff05;max-width:100%;overflow:hidden}.practice-stream-scroll{overflow:hidden}.practice-stream-items{gap:var(--space-sm);flex-wrap:wrap;max-width:100%;padding-top:2px;display:flex}.stream-char{border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-sm);text-align:center;background:#ffffff08;flex-direction:column;justify-content:space-between;align-items:center;gap:4px;min-width:70px;min-height:80px;transition:all .2s;display:flex}.stream-char:hover{background:#ffffff0d;transform:translateY(-1px)}.stream-char.good{border-color:rgba(var(--accent-green-rgb), .5);background:rgba(var(--accent-green-rgb), .08)}.stream-char.struggling{border-color:rgba(var(--accent-red-rgb), .5);background:rgba(var(--accent-red-rgb), .08)}.stream-char-letter{font-size:var(--text-lg);color:var(--text-primary);font-weight:600}.stream-char-accuracy{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;flex-shrink:0;font-weight:500}.stream-placeholder{text-align:center;color:var(--text-secondary);font-size:var(--text-sm);padding:var(--space-sm)}.loading-dots{opacity:.5;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.8}}.focus-success{text-align:center;padding:var(--space-lg)}.success-icon{color:var(--accent-green);margin-bottom:var(--space-sm)}.success-message{color:var(--text-secondary);font-size:var(--text-sm);margin:0}@media (max-width:768px){.gauge-container{padding:var(--space-md)}.gauge-svg{max-width:300px}.zone-status-text{font-size:.8125rem}.focus-queue{padding:var(--space-md)}.focus-queue-grid{gap:var(--space-sm);grid-template-columns:1fr}.focus-char{align-items:center;gap:var(--space-md);padding:var(--space-sm);display:flex}.focus-char-letter{font-size:var(--text-xl);justify-content:center;align-items:center;min-width:3rem;margin-bottom:0;display:flex}.focus-char-stats{text-align:left;flex:1}.practice-stream{padding:var(--space-md)}.stream-char{min-width:56px;min-height:70px;padding:var(--space-xs)}.stream-char-letter{font-size:var(--text-base)}.stream-char-accuracy{font-size:var(--text-xs)}}@media (max-width:480px){.gauge-container,.focus-queue,.practice-stream{padding:var(--space-sm)}.gauge-svg{width:100%;max-width:100%}.gauge-label{letter-spacing:.04em;font-size:11px}.gauge-label.training-zone{font-size:11px}.focus-queue-title,.practice-stream-title{font-size:var(--text-sm)}}@media (max-width:768px) and (hover:none){.gauge-container,.focus-queue,.practice-stream{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}@media (orientation:landscape) and (max-height:500px){.practice-card{min-height:90px;margin:.5rem 1rem}.container{padding-top:calc(var(--header-height) + 110px + env(safe-area-inset-top))}.how-it-works,.key-features{display:none}}
/*$vite$:1*/