:root,body.theme-espresso{--bg:#1b1410;--bg-2:#241b15;--surface:#2c221b;--card:#2c221b;--surfaceHover:#382b22;--card-hi:#382b22;--border:rgba(255,255,255,.07);--hairline:rgba(255,255,255,.07);--borderActive:#FF7043;--accent:#FF7043;--accentGlow:rgba(255,112,67,.3);--accentLight:#FF8A65;--amber:#FF7043;--amber-2:#FF8A65;--amber-glow:rgba(255,112,67,.3);--text:#f4e8dd;--cream:#f4e8dd;--textDim:#c9b8a7;--cream-dim:#c9b8a7;--textMuted:#8a7a6b;--cream-mute:#8a7a6b;--correct:#81C784;--correctGlow:rgba(129,199,132,.25);--moss:#81C784;--wrong:#E57373;--wrongGlow:rgba(229,115,115,.25);--cherry:#E57373;--gold:#E8B84A;--auto:#FF7043;--autoGlow:rgba(255,112,67,.22);--voice:#FF7043;--voiceGlow:rgba(255,112,67,.3);--ai:#c9b8a7;--aiGlow:rgba(201,184,167,.14);--shadow-deep:0 8px 24px rgba(0,0,0,.35) }*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);font-family:Roboto Flex,Roboto,Helvetica Neue,Arial,sans-serif;min-height:100vh;min-height:100dvh;overflow-x:hidden}button{font-family:inherit;border:none;background:none;cursor:pointer;color:var(--text);-webkit-user-select:none;user-select:none}.serif{font-family:Roboto Flex,Roboto,sans-serif;font-weight:500;letter-spacing:-.01em}.mono,.label{font-family:Roboto Mono,ui-monospace,monospace;letter-spacing:.03em}.msym{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}.msym.filled{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}.amber-disc{background:var(--amber);color:#1a0e05;box-shadow:0 12px 24px var(--amber-glow)}.screen{display:none;flex-direction:column;min-height:100vh;min-height:100dvh;padding:16px;max-width:480px;margin:0 auto}.screen.active{display:flex}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.header-back{color:var(--textDim);font-family:Roboto Mono,monospace;font-size:12px;padding:10px 4px;letter-spacing:.1em;text-transform:lowercase}.header-title{font-family:Roboto Flex,Roboto,sans-serif;font-size:15px;font-weight:600;color:var(--accentLight);letter-spacing:-.01em}.section-label{font-family:Roboto Mono,ui-monospace,monospace;font-size:10px;color:var(--textMuted);text-transform:uppercase;letter-spacing:.22em;margin-bottom:10px;padding-left:4px;font-weight:500}.center-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:12px 0}.direction-label{font-size:10px;color:var(--textMuted);text-transform:uppercase;letter-spacing:2px;text-align:center}.hint-text{font-size:10px;color:var(--textMuted);text-align:center}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}@keyframes pulse-amber{0%,to{box-shadow:0 0 0 0 var(--amber-glow),0 12px 24px var(--amber-glow)}50%{box-shadow:0 0 0 18px transparent,0 16px 32px var(--amber-glow)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes voicePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.pulse-amber{animation:pulse-amber 1.6s ease-in-out infinite}.diff-row{display:flex;gap:6px;margin-bottom:14px}.diff-btn{flex:1;padding:10px;border-radius:14px;font-family:Roboto Mono,monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--hairline);background:var(--card);color:var(--textDim);transition:all .15s}.diff-btn.active{background:var(--accent);border-color:var(--accent);color:#1a0e05}.content-row{display:flex;gap:6px;margin-bottom:12px}.content-btn{flex:1;padding:10px;border-radius:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--border);color:var(--textDim);transition:all .2s}.content-btn.active{background:#00cec921;border-color:var(--auto);color:var(--auto)}.speed-row{display:flex;gap:6px;margin-bottom:12px;align-items:center}.speed-label{font-size:10px;color:var(--textMuted);min-width:54px}.speed-btn{flex:1;padding:8px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border);color:var(--textDim);transition:all .2s}.speed-btn.active{border-color:var(--auto);background:#00cec914;color:var(--auto)}.card{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:18px 22px;margin-bottom:10px;display:flex;align-items:center;gap:16px;text-align:left;transition:transform .12s ease,box-shadow .12s ease,background .15s;box-shadow:var(--shadow-deep);min-height:80px}.card:active{transform:scale(.98);border-color:var(--borderActive);box-shadow:0 0 20px var(--accentGlow),var(--shadow-deep);background:var(--surfaceHover)}.card-icon{width:52px;height:52px;border-radius:16px;background:var(--card-hi);display:grid;place-items:center;flex-shrink:0;color:var(--accent);font-size:28px}.card-icon .msym{font-size:30px;color:var(--accent)}.card-label{font-family:Roboto Flex,Roboto,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text)}.card-desc{font-size:12px;color:var(--textDim);margin-top:4px;line-height:1.4}.stats-bar{display:flex;justify-content:space-between;background:var(--card);border-radius:18px;padding:12px 16px;margin-bottom:12px;border:1px solid var(--hairline);box-shadow:var(--shadow-deep)}.stat-val{font-size:17px;font-weight:800;text-align:center}.stat-label{font-size:8px;color:var(--textMuted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;text-align:center}.play-btn{width:180px;height:180px;border-radius:50%;background:var(--amber);color:#1a0e05;border:none;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease;margin:0 auto;box-shadow:0 12px 28px var(--amber-glow)}.play-btn .msym{font-size:80px;font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 48}.play-btn:active{transform:scale(.97)}.play-btn.playing{animation:pulse-amber 1.4s ease-in-out infinite}.play-btn-big{width:200px;height:200px}.play-btn-big .msym{font-size:88px}.play-btn-big.running{background:var(--auto);color:#1a0e05;box-shadow:0 12px 28px var(--autoGlow)}.play-btn-big.running.playing{animation:pulse-amber 1.4s ease-in-out infinite}.options-grid{display:grid;gap:7px;margin-bottom:12px}.opt-btn{padding:14px 6px;border-radius:16px;border:1px solid var(--hairline);background:var(--card);font-size:12px;font-weight:500;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:58px}.opt-btn:active{border-color:var(--borderActive);background:var(--surfaceHover);transform:scale(.97)}.opt-btn .abbr{font-size:15px}.opt-btn .name{font-size:9px;color:var(--textMuted);font-weight:400}.opt-btn.correct{background:var(--correctGlow);border-color:var(--correct);color:var(--correct)}.opt-btn.wrong{background:var(--wrongGlow);border-color:var(--wrong);color:var(--wrong)}.next-btn{width:100%;padding:16px;border-radius:16px;background:var(--accent);color:#1a0e05;font-family:Roboto Flex,Roboto,sans-serif;font-size:15px;font-weight:600;letter-spacing:.02em;margin-bottom:8px;box-shadow:0 8px 20px var(--accentGlow);transition:transform .12s ease}.next-btn:active{transform:scale(.98)}.feedback{padding:10px 18px;border-radius:10px;text-align:center;margin-top:8px}.feedback.ok{background:var(--correctGlow);border:1px solid var(--correct)}.feedback.ko{background:var(--wrongGlow);border:1px solid var(--wrong)}.feedback-text{font-size:15px;font-weight:700}.feedback-detail{font-size:11px;color:var(--textDim);margin-top:3px}.ai-insight{margin-top:10px;padding:12px 14px;border-radius:10px;background:var(--aiGlow);border:1px solid var(--ai);font-size:12px;line-height:1.6;color:var(--text);text-align:left}.ai-insight .ai-label{font-size:9px;color:var(--ai);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;font-weight:700}.ai-insight .ai-loading{color:var(--textDim);font-style:italic}.sonic-compare{margin-top:8px;display:flex;gap:8px;justify-content:center}.sonic-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--border);font-size:11px;font-weight:600;background:var(--surface);transition:all .2s}.sonic-btn:active{border-color:var(--accent);background:var(--surfaceHover)}.mic-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--hairline);background:var(--card);color:var(--textDim);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.mic-btn .msym{font-size:26px}.mic-btn.on{background:var(--voiceGlow);border-color:var(--voice);color:var(--voice);box-shadow:0 0 16px var(--voiceGlow)}.voice-badge{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px 14px;transition:all .3s}.voice-badge.listening{border-color:var(--voice);box-shadow:0 0 16px var(--voiceGlow)}.voice-dot{width:10px;height:10px;border-radius:50%;background:var(--voice)}.voice-dot.listening{animation:voicePulse 1.5s ease-in-out infinite}.voice-text{font-size:10px;color:var(--textDim);letter-spacing:1px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.advance-row{display:flex;align-items:center;justify-content:space-between;background:var(--voiceGlow);border:1px solid var(--hairline);border-radius:14px;padding:10px 14px;margin-bottom:12px}.toggle-sw{width:44px;height:24px;border-radius:12px;border:none;position:relative;transition:all .2s;cursor:pointer}.toggle-sw.on{background:var(--voice)}.toggle-sw.off{background:var(--border)}.toggle-kn{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:all .2s}.toggle-sw.on .toggle-kn{left:23px}.toggle-sw.off .toggle-kn{left:3px}.history-panel{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:12px;margin-bottom:12px;max-height:140px;overflow-y:auto}.history-row{display:flex;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid var(--border)}.history-row:last-child{border-bottom:none}.pause-row{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:12px 16px;margin-bottom:16px}.pause-btn{border:1px solid var(--border);border-radius:6px;padding:4px 12px;font-size:18px;color:var(--text)}.pause-val{font-size:18px;font-weight:700;color:var(--auto);min-width:30px;text-align:center}.theme-swatch{display:flex;gap:10px;flex-wrap:wrap}.theme-swatch button{width:44px;height:44px;border-radius:14px;border:2px solid var(--hairline);cursor:pointer;padding:0;transition:transform .12s ease,border-color .15s}.theme-swatch button:active{transform:scale(.95)}.theme-swatch button.active{border-color:var(--text);box-shadow:0 0 0 3px var(--accentGlow)}.scale-chip{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--hairline);background:var(--card);color:var(--textDim);transition:all .15s;-webkit-user-select:none;user-select:none}.scale-chip.selected{background:var(--accentGlow);border-color:var(--accent);color:var(--accent)}.debug-log{position:fixed;bottom:0;left:0;right:0;max-height:120px;overflow-y:auto;background:#000000e6;color:#0f0;font-size:10px;padding:6px 10px;z-index:200;display:none;font-family:monospace;line-height:1.5}.debug-toggle{position:fixed;bottom:4px;right:4px;z-index:201;font-size:9px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:3px 8px;color:var(--textMuted)}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:40px 24px}.welcome-circle{width:160px;height:160px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1a0e05;transition:transform .15s ease}.welcome-circle:active{transform:scale(.96)}.welcome-circle .msym{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 48}.welcome-circle.active{animation:pulse-amber 1.5s ease-in-out infinite}.beta-banner{display:inline-flex;align-items:center;gap:8px;background:var(--accentGlow);border:1px solid var(--accent);border-radius:999px;padding:6px 14px;font-family:Roboto Mono,monospace;font-size:11px;letter-spacing:.12em;color:var(--accentLight)}.beta-banner .beta-tag{background:var(--accent);color:#1a0e05;border-radius:999px;padding:2px 10px;font-size:10px;font-weight:800;letter-spacing:.18em}.external-links{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px;margin-top:12px}.link-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid var(--hairline);background:var(--card);color:var(--text);font-size:13px;font-weight:500;text-decoration:none;transition:transform .12s ease,border-color .15s,background .15s;box-shadow:var(--shadow-deep)}.link-btn:active{transform:scale(.98);border-color:var(--borderActive);background:var(--surfaceHover)}.link-btn .msym{font-size:20px;color:var(--accent);flex-shrink:0}.link-btn .link-label{flex:1;text-align:left}.link-btn .link-arrow{font-size:16px;color:var(--textMuted)}.home-title{font-family:Roboto Flex,Roboto,sans-serif;font-size:38px;font-weight:600;letter-spacing:-.02em;color:var(--text)}.home-title .accent{color:var(--accent);font-style:normal}.home-sub{color:var(--textDim);font-family:Roboto Mono,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px}.auto-card{background:var(--card);border:1px solid var(--hairline)}.auto-card .card-icon .msym{color:var(--auto)}.auto-card:active{border-color:var(--auto);box-shadow:0 0 20px var(--autoGlow),var(--shadow-deep)}.auto-name{font-size:20px;font-weight:800;color:var(--auto);min-height:28px;text-align:center}.auto-status{font-size:11px;color:var(--textDim);text-align:center;margin-top:4px}.ref-card{background:var(--card);border:1px solid var(--hairline);border-radius:18px;padding:16px;margin-bottom:8px;box-shadow:var(--shadow-deep)}.ref-name{font-size:14px;font-weight:700}.ref-desc{font-size:10px;color:var(--textDim);margin:6px 0;line-height:1.5}.ref-listen{border:1px solid;border-radius:8px;padding:6px 14px;font-size:13px;background:transparent}.ref-degrees{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.ref-deg{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600}.int-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}.int-btn{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:12px 10px;display:flex;align-items:center;gap:8px;text-align:left;transition:all .2s}.int-btn:active{border-color:var(--borderActive)}.int-abbr{font-size:14px;font-weight:800;color:var(--accent);min-width:28px}.int-name{font-size:10px;color:var(--textDim)}.st-tab-row{display:flex;gap:6px;margin-bottom:12px}.st-tab-btn{flex:1;padding:10px;border-radius:14px;font-family:Roboto Mono,monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--hairline);background:var(--card);color:var(--textDim);transition:all .2s}.st-tab-btn.active{background:var(--accent);border-color:var(--accent);color:#1a0e05}.st-item{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:12px 14px;margin-bottom:6px}.st-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.st-item-abbr{font-size:14px;font-weight:800;color:var(--accent);min-width:34px;flex-shrink:0}.st-item-name{font-size:12px;color:var(--text);flex:1}.st-item-score{font-size:12px;font-weight:700;flex-shrink:0}.st-bar-bg{height:5px;background:var(--border);border-radius:3px;overflow:hidden}.st-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}.st-chart{display:flex;align-items:flex-end;gap:3px;height:70px;padding-bottom:18px;position:relative}.st-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.st-chart-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%}.st-chart-bar{width:100%;border-radius:2px 2px 0 0;min-height:0;transition:height .3s ease}.st-chart-label{font-size:8px;color:var(--textMuted);text-align:center;margin-top:3px;line-height:1}