:root{--bg: #0b1020;--bg-gradient-1: #1e293b;--bg-gradient-2: #0ea5e9;--card: #121936;--card-border: rgba(91, 110, 168, .4);--acc: #6ee7ff;--acc2: #a78bfa;--good: #22c55e;--warn: #f59e0b;--bad: #ef4444;--text: #e5e7eb;--text-muted: #94a3b8;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15);--shadow-glow: 0 0 20px rgba(110, 231, 255, .3);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}body.light-mode{--bg: #f5f8fc;--bg-gradient-1: #dbeafe;--bg-gradient-2: #bfdbfe;--card: #ffffff;--card-border: rgba(15, 23, 42, .12);--acc: #0ea5e9;--acc2: #2563eb;--text: #0f172a;--text-muted: #475569;--good: #16a34a;--warn: #d97706;--bad: #dc2626;--shadow-glow: 0 10px 30px rgba(37, 99, 235, .2)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);color:var(--text);background:radial-gradient(1200px 800px at 70% -10%,var(--bg-gradient-1) 0%,transparent 60%),radial-gradient(1000px 600px at -10% 20%,var(--bg-gradient-2) 0%,transparent 50%),var(--bg);min-height:100vh;overflow-x:hidden;line-height:1.5}button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus{outline:none}button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.back-btn:focus-visible,.settings-btn:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px #6ee7ff38}@media(pointer:coarse){button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.back-btn:focus-visible,.settings-btn:focus-visible{box-shadow:none}}.app-header{position:sticky;top:0;z-index:999;background:#0a0f23d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--card-border)}.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-md)}.app-title{font-size:18px;font-weight:700;color:var(--text);flex:1;text-align:center}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.back-btn,.settings-btn{display:flex;align-items:center;gap:var(--spacing-xs);background:#0b122bcc;border:1px solid var(--card-border);color:var(--text);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:14px;font-weight:600;transition:all var(--transition-fast)}.back-btn:hover,.settings-btn:hover{background:#0b122b;border-color:var(--acc);transform:translateY(-1px)}.back-btn svg,.settings-btn svg{width:18px;height:18px}.session-header-indicator{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:9px 11px;border-radius:var(--radius-md);border:1px solid rgba(110,231,255,.22);background:#0b122bb8;color:var(--text);transition:all var(--transition-fast)}.session-header-indicator:hover{background:#0b122bf5;border-color:var(--acc);transform:translateY(-1px)}.session-header-indicator[hidden]{display:none!important}.session-header-count{font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc)}.wrap{max-width:1400px;margin:0 auto;padding:var(--spacing-xl)}.app-site-footer{max-width:1400px;margin:0 auto 18px;padding:0 var(--spacing-xl);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--text-muted);font-size:12px;letter-spacing:.2px;opacity:.9}.footer-brand{color:var(--text);font-weight:600}.footer-sep{opacity:.55}.footer-version{font-variant-numeric:tabular-nums}.footer-note{flex:0 0 100%;text-align:center;font-size:11px;opacity:.88}.control-bar{display:flex;gap:var(--spacing-md);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--spacing-xl);background:#12193699;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:var(--spacing-lg)}.controls{display:flex;gap:var(--spacing-md);align-items:center;flex-wrap:wrap;flex:1}.action-buttons{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap}.pill{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);background:#0b122bcc;border:1px solid var(--card-border);font-size:13px;white-space:nowrap;transition:all var(--transition-fast)}.pill:hover{border-color:var(--acc)}.pill-label{font-weight:600;color:var(--text-muted)}.pill-value{font-weight:700;color:var(--acc);min-width:45px;text-align:right}.range{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:4px;border-radius:var(--radius-sm);width:80px;cursor:pointer;outline:none}.range::-webkit-slider-track{background:#2b386b99;height:4px;border-radius:var(--radius-sm)}.range::-moz-range-track{background:#2b386b99;height:4px;border-radius:var(--radius-sm)}.range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:16px;width:16px;background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:50%;cursor:pointer;border:2px solid var(--bg);box-shadow:0 2px 4px #0003;-webkit-transition:transform var(--transition-fast);transition:transform var(--transition-fast)}.range::-moz-range-thumb{height:16px;width:16px;background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:50%;cursor:pointer;border:2px solid var(--bg);box-shadow:0 2px 4px #0003}.range::-webkit-slider-thumb:hover{transform:scale(1.2)}select{background:#2b386b99;color:var(--text);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:4px 8px;cursor:pointer;font-size:13px;outline:none;transition:all var(--transition-fast)}select:hover,select:focus{border-color:var(--acc);background:#2b386bcc}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);font-weight:700;font-size:14px;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--spacing-sm);white-space:nowrap;outline:none}.btn-primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#07101b;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#2b386bcc;color:var(--text);border:1px solid var(--card-border)}.btn-secondary:hover{background:#2b386b;border-color:var(--acc)}.btn-stop{background:linear-gradient(135deg,#fda4af,#fb7185);color:#7f1d1d}.btn-stop:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fb718566}.btn-sm{padding:6px 12px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.icon-btn{background:transparent;border:1px solid var(--card-border);color:var(--text);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:12px;transition:all var(--transition-fast);min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:var(--acc2);color:#07101b;border-color:var(--acc2)}.recording-indicator{display:none;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,var(--bad),#dc2626);border-radius:var(--radius-full);font-weight:700;font-size:13px;animation:pulse 2s infinite;margin-bottom:var(--spacing-lg);width:-moz-fit-content;width:fit-content}.recording-indicator.active{display:flex}.recording-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.card{background:#12193699;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);position:relative;overflow:hidden;margin-bottom:var(--spacing-lg)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.card-title{font-size:16px;font-weight:700;color:var(--acc);margin:0}.card-controls{display:flex;align-items:center;gap:var(--spacing-sm);font-size:14px;font-weight:600}canvas{width:100%;display:block;border-radius:var(--radius-md);background:#070b1a}#pitch{height:min(42vh,360px)}#spectrum,#harmonics{height:200px}#waveform{height:150px}#intonationHeatmap{height:220px}.main-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.card-pitch{grid-column:1}.card-readout{grid-column:2;display:flex;flex-direction:column}.readout-main{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.freq-display{text-align:left}.note-display{text-align:right}.big{font-size:clamp(34px,6vw,68px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.hz{font-size:14px;color:var(--text-muted);font-weight:400}.hz-decimal{font-size:.52em;font-weight:500;opacity:.75}.note{font-size:clamp(26px,6vw,50px);font-weight:800;line-height:1}.sargam,.quality-indicator{font-size:13px;color:var(--text-muted);margin-top:var(--spacing-xs)}.mic-power-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:var(--spacing-md)}.mic-metric{background:#0b122bbf;border:1px solid rgba(110,231,255,.2);border-radius:10px;padding:8px 10px;min-height:58px;display:flex;flex-direction:column;justify-content:center}.mic-metric-wide{border-color:#a78bfa3d}.metric-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.metric-value{font-size:17px;line-height:1.05;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}.metric-bias{font-size:11px;line-height:1.2;color:#9be4ff;font-weight:700}.metric-hint{font-size:9px;color:var(--text-muted);opacity:.9;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mic-power-strip.is-idle .metric-value{color:#8aa0be}.meter-container{margin-bottom:var(--spacing-lg)}.meter-wrap{background:#0b122bcc;border:1px solid var(--card-border);border-radius:var(--radius-md);height:24px;position:relative;overflow:hidden}.meter-center{position:absolute;inset:0 auto 0 50%;width:2px;background:var(--acc);z-index:2;box-shadow:0 0 8px #6ee7ff80}.meter-pointer{position:absolute;top:0;bottom:0;width:3px;background:var(--good);box-shadow:0 0 12px #22c55eb3;transition:left var(--transition-fast);left:50%}.meter-labels{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);font-size:11px;color:var(--text-muted)}.kbd{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-bottom:var(--spacing-sm)}.key{padding:var(--spacing-sm) 4px;text-align:center;border-radius:var(--radius-md);background:#0b122bcc;border:1px solid var(--card-border);font-weight:700;font-size:12px;transition:all var(--transition-fast)}.key.active{outline:2px solid var(--acc);background:linear-gradient(135deg,#101a3f,#1a2548);transform:scale(1.05);box-shadow:0 0 16px #6ee7ff66}.key small{display:block;font-size:10px;color:var(--text-muted);margin-top:2px;font-weight:400}.footer-badges{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;margin-top:auto}.badge{padding:4px var(--spacing-md);border-radius:var(--radius-full);background:#0b122bcc;border:1px solid var(--card-border);font-size:11px;font-variant-numeric:tabular-nums}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat-card{background:#0b122bcc;border:1px solid var(--card-border);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;text-align:center;transition:all var(--transition-fast)}.stat-card:hover{border-color:var(--acc);transform:translateY(-2px)}.stat-icon{font-size:24px;margin-bottom:var(--spacing-sm)}.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.stat-value{font-size:24px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.advanced-analysis-card{overflow:hidden}.card-subtitle{margin:-4px 0 var(--spacing-md);font-size:12px;line-height:1.35;color:var(--text-muted)}.heatmap-legend-inline{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap}.legend-chip{font-size:11px;padding:4px 8px;border-radius:var(--radius-full);border:1px solid var(--card-border);background:#0b122ba6;color:var(--text)}.legend-chip.legend-flat{border-color:#60a5fa8c;color:#93c5fd}.legend-chip.legend-center{border-color:#4ade8080;color:#86efac}.legend-chip.legend-sharp{border-color:#fb923c8c;color:#fdba74}.tabs{display:flex;gap:4px;margin-bottom:var(--spacing-md);border-bottom:1px solid var(--card-border);overflow-x:auto;-webkit-overflow-scrolling:touch}.tab{position:relative;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;border-radius:var(--radius-md) var(--radius-md) 0 0;font-size:13px;font-weight:600;transition:all var(--transition-fast);background:transparent;border:none;color:var(--text);white-space:nowrap}.tab-with-badge{padding-right:calc(var(--spacing-lg) + 18px)}.tab-count-badge{position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:10px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 6px 14px #dc26263d}.tab-count-badge[hidden]{display:none!important}.tab:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,var(--acc),var(--acc2));opacity:0;transform:scaleX(.6);transition:opacity var(--transition-fast),transform var(--transition-fast)}.tab:hover{background:#0b122b99}.tab.active,.tab[aria-selected=true]{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#07101b}.tab.active:after,.tab[aria-selected=true]:after{opacity:1;transform:scaleX(1)}.tab-content{display:none}.tab-content.active{display:block}.tab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.tab-header h3{margin:0;font-size:16px}.exercise-difficulty-picker{min-width:190px;justify-content:space-between}.exercise-difficulty-picker select{min-width:110px}#exercisesTab .tab-header{flex-wrap:wrap;gap:var(--spacing-sm)}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(0);background:#1a2548f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);padding:6px 10px;border-radius:var(--radius-sm);font-size:11px;white-space:nowrap;z-index:1000;pointer-events:none;opacity:0;transition:all var(--transition-fast);border:1px solid var(--card-border)}.tooltip:before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%) scale(0);border:4px solid transparent;border-top-color:#1a2548f2;opacity:0;transition:all var(--transition-fast)}.tooltip:hover:after,.tooltip:hover:before{transform:translate(-50%) scale(1);opacity:1}.loading-indicator{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b1020e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:var(--spacing-lg)}.spinner{width:48px;height:48px;border:4px solid rgba(110,231,255,.2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media(max-width:980px){.main-grid{grid-template-columns:1fr!important}.card-pitch{height:55vh}}@media(max-width:768px){.desktop-controls{display:none!important}.mobile-controls-toggle{display:flex;align-items:center;justify-content:center}.main-grid{grid-template-columns:1fr!important;gap:var(--spacing-md)}.card-pitch{grid-column:1;height:50vh}.card-readout{grid-column:1}.action-buttons{width:100%;display:flex;overflow-x:auto;overflow-y:hidden;gap:var(--spacing-sm);padding:0 var(--spacing-xs) var(--spacing-xs);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(110,231,255,.3) transparent}.action-buttons::-webkit-scrollbar{height:4px}.action-buttons::-webkit-scrollbar-track{background:transparent}.action-buttons::-webkit-scrollbar-thumb{background:#6ee7ff4d;border-radius:2px}.action-buttons .btn{flex:0 0 auto;min-width:70px;padding:12px 16px;scroll-snap-align:start;white-space:nowrap}.btn-text{display:none}.btn-icon{margin-right:0}.stats-scroll{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;overflow-x:visible;padding-bottom:0}.stat-card{min-width:0;padding:10px 6px;flex:none}.stat-icon{font-size:20px;margin-bottom:4px}.stat-label{font-size:9px;line-height:1.2}.stat-value{font-size:14px;font-weight:700}.freq-note-row{display:flex;gap:var(--spacing-md);align-items:flex-start;justify-content:space-between}.freq-display{flex:1;min-width:0}.freq-display .big{font-size:28px;line-height:1.2}.note-display{flex:0 0 auto;text-align:right}.note-display .note{font-size:28px;line-height:1.2}.note-display .sargam{font-size:14px;margin-top:2px}.quality-indicator{font-size:12px;margin-top:var(--spacing-xs)}.mic-power-strip{gap:6px;margin-bottom:10px}.mic-metric{padding:6px 8px;min-height:50px;border-radius:9px}.metric-label{font-size:9px;letter-spacing:.2px}.metric-value{font-size:14px}.metric-bias{font-size:10px}.metric-hint{font-size:8px}.app-logo{height:28px}.header-actions{gap:6px}.session-header-indicator{padding:8px 9px;gap:5px}.session-header-indicator svg{width:16px;height:16px}.session-header-count{font-size:12px}.control-bar{flex-direction:column;gap:var(--spacing-sm)}.app-site-footer{margin-bottom:12px;padding:0 var(--spacing-md);font-size:11px;gap:6px}.footer-note{font-size:10px}.card-pitch canvas{height:100%}#intonationHeatmap{height:180px}.advanced-empty-state{min-height:122px;padding:12px 10px}.advanced-empty-state h4{font-size:14px}.advanced-empty-state p{font-size:11px}.onboarding-tip{width:min(200px,calc(100vw - 16px));padding:9px 9px 8px}.onboarding-close{top:auto;bottom:12px}.card-subtitle{font-size:11px;margin-bottom:8px}.heatmap-legend-inline{justify-content:flex-start;gap:6px}.legend-chip{font-size:10px;padding:3px 7px}#showMoreBtn{width:100%;touch-action:manipulation}.tabs{display:flex;gap:var(--spacing-xs);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:1 1 auto;min-width:0;padding:10px 8px;font-size:13px;white-space:nowrap}.tab-with-badge{padding-right:24px}.tab-count-badge{top:4px;right:5px;min-width:16px;height:16px;font-size:9px;padding:0 4px}#exercisesTab .tab-header{align-items:flex-start;flex-direction:column;gap:var(--spacing-sm)}.exercise-difficulty-picker{width:100%;min-width:0}.exercise-difficulty-picker select{flex:1;min-width:0}}@media(max-width:480px){.app-logo{height:24px}.session-header-indicator{padding:8px}.session-header-count{font-size:11px}.action-buttons .btn{min-width:60px;padding:10px 12px}.stat-card{padding:8px 4px}.stat-icon{font-size:18px}.stat-label{font-size:8px}.stat-value{font-size:13px}.freq-display .big,.note-display .note{font-size:24px}.note-display .sargam{font-size:12px}.mic-power-strip{grid-template-columns:1fr 1fr}.mic-metric-wide{grid-column:1 / -1}.app-site-footer{font-size:10px}}@media(max-width:768px)and (orientation:landscape){.card-pitch{height:70vh}.practice-view{padding:var(--spacing-sm)}}.permission-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b1020f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--spacing-xl)}.permission-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:var(--spacing-2xl);max-width:400px;text-align:center}.permission-icon{font-size:64px;margin-bottom:var(--spacing-lg)}.permission-card h2{margin-bottom:var(--spacing-md);font-size:24px}.permission-card p{color:var(--text-muted);margin-bottom:var(--spacing-xl);line-height:1.6}.permission-card .btn{width:100%;margin-bottom:var(--spacing-sm)}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b1020f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--spacing-xl);overflow-y:auto}.help-content{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:var(--spacing-2xl);max-width:600px;max-height:90vh;overflow-y:auto;position:relative}.help-close{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background:#2b386b99;border:none;color:var(--text);width:32px;height:32px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;transition:all var(--transition-fast)}.help-close:hover{background:var(--bad);transform:rotate(90deg)}.help-content h2{margin-bottom:var(--spacing-xl);font-size:28px}.help-sections{margin-bottom:var(--spacing-xl)}.help-section{margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:#0b122b66;border-radius:var(--radius-md);border-left:3px solid var(--acc)}.help-section h3{margin-bottom:var(--spacing-sm);font-size:18px;color:var(--acc)}.help-section p{color:var(--text-muted);line-height:1.6;margin:0}.help-section ul{margin:0;padding-left:18px;color:var(--text-muted);line-height:1.6}.help-section li+li{margin-top:4px}.help-section strong{color:var(--text);font-weight:700}.help-kbd{display:inline-block;margin-right:10px;margin-left:2px;padding:2px 7px;border-radius:var(--radius-sm);border:1px solid var(--card-border);background:#0b122b99;color:var(--text);font-size:12px;font-weight:700}.sessions-list{max-height:400px;overflow-y:auto;padding-right:var(--spacing-sm)}.session-playback-status{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:linear-gradient(135deg,#0b122be0,#142c5bd1);border:1px solid rgba(110,231,255,.25);border-radius:var(--radius-md);box-shadow:0 12px 28px #050a1833}.session-playback-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d1d9e6d1}.session-playback-pitch{margin-top:6px;font-size:20px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}.session-playback-meta{margin-top:4px;font-size:12px;color:var(--text-muted)}.session-playback-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.session-playback-btn,.session-speed-btn{border:1px solid rgba(110,231,255,.22);background:#080e1f99;color:var(--text);border-radius:999px;min-height:36px;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.01em;transition:all var(--transition-fast)}.session-playback-btn:hover,.session-speed-btn:hover{border-color:#6ee7ff73;background:#121e3fd1}.session-playback-btn.is-active,.session-speed-btn.is-active{background:linear-gradient(135deg,#0ea5e9eb,#2563ebeb);border-color:#93c5fd73;color:#f8fbff;box-shadow:0 8px 18px #0ea5e938}.session-speed-group{display:inline-flex;flex-wrap:wrap;gap:8px}.session-playback-note{margin-top:10px;font-size:11px;color:#d1d9e6a8}.sessions-list::-webkit-scrollbar{width:6px}.sessions-list::-webkit-scrollbar-track{background:#0b122b66;border-radius:var(--radius-sm)}.sessions-list::-webkit-scrollbar-thumb{background:var(--acc2);border-radius:var(--radius-sm)}.session-item{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md);background:#0b122b99;border:1px solid var(--card-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);cursor:default;transition:all var(--transition-fast)}.session-item.is-playing{border-color:#6ee7ff8c;box-shadow:0 0 0 1px #6ee7ff2e,0 18px 34px #060c1c3d}.session-item:hover{background:#101a3fcc;border-color:var(--acc);transform:translate(4px)}.session-info{flex:1}.session-name{font-weight:600;font-size:14px;margin-bottom:var(--spacing-xs)}.session-meta{font-size:11px;color:var(--text-muted);margin-bottom:var(--spacing-sm)}.session-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.session-metric{background:#0b122bcc;border:1px solid rgba(31,43,90,.6);border-radius:var(--radius-sm);padding:6px 8px;text-align:center}.session-metric .label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:2px}.session-metric .value{font-size:13px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}.session-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.session-timeline-mini{display:block;width:100%;height:76px;margin-top:var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid rgba(91,110,168,.35);background:#070b1a66}.exercises-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.exercise-card{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);background:#0b122b99;border:1px solid var(--card-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.exercise-card:hover{background:#101a3fcc;border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.exercise-icon{font-size:32px;flex-shrink:0}.exercise-info h4{margin-bottom:var(--spacing-xs);font-size:16px}.exercise-info p{font-size:13px;color:var(--text-muted);margin:0}.exercise-best{margin-top:8px;font-size:11px;color:var(--acc);opacity:.95;font-variant-numeric:tabular-nums}.exercise-progress{padding:var(--spacing-lg);background:#0b122bcc;border-radius:var(--radius-md);border:1px solid var(--card-border)}.exercise-header{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);font-weight:600}.exercise-bar-container{background:#070b1acc;height:8px;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-sm);position:relative}.exercise-bar{width:0%;height:100%;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .22s cubic-bezier(.22,.61,.36,1);border-radius:var(--radius-full);box-shadow:0 0 12px #6ee7ff73;animation:exercise-bar-glow 2.4s ease-in-out infinite}.exercise-bar:before{content:"";position:absolute;top:-10px;right:-25%;bottom:-10px;left:-25%;background-image:repeating-linear-gradient(112deg,#ffffff3d 0,#ffffff3d 8px,#fff0 8px,#fff0 18px),repeating-linear-gradient(96deg,#6ee7ff47 0,#6ee7ff47 6px,#6ee7ff00 6px,#6ee7ff00 14px),repeating-linear-gradient(128deg,#bae6fd3d 0,#bae6fd3d 7px,#bae6fd00 7px,#bae6fd00 16px),repeating-linear-gradient(102deg,#ffffff2e 0,#ffffff2e 5px,#fff0 5px,#fff0 12px);background-size:120px 100%,92px 100%,140px 100%,76px 100%;background-position:0 0,20px 0,40px 0,60px 0;mix-blend-mode:screen;opacity:.42;animation:exercise-bar-waves 2.1s linear infinite}.exercise-bar:after{content:"";position:absolute;top:0;bottom:0;left:-35%;width:35%;background:linear-gradient(90deg,#fff0,#ffffff73,#fff0);animation:exercise-bar-shimmer 1.5s ease-in-out infinite}@keyframes exercise-bar-waves{0%{background-position:0 0,20px 0,40px 0,60px 0}to{background-position:120px 0,-72px 0,180px 0,-96px 0}}@keyframes exercise-bar-shimmer{0%{transform:translate(0);opacity:.15}55%{opacity:.5}to{transform:translate(320%);opacity:.12}}@keyframes exercise-bar-glow{0%,to{box-shadow:0 0 8px #6ee7ff59}50%{box-shadow:0 0 14px #6ee7ffa6}}.exercise-instruction{font-size:13px;color:var(--text-muted)}.exercise-meta{margin-top:var(--spacing-sm);font-size:12px;color:var(--text-muted)}.exercise-report{margin-top:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--card-border);background:#070b1aa6}.exercise-report-title{font-size:13px;font-weight:700;margin-bottom:var(--spacing-sm);color:var(--acc)}.exercise-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-sm)}.exercise-report-item{padding:var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid rgba(31,43,90,.7);background:#0b122bb3}.exercise-report-item .label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.exercise-report-item .value{display:block;margin-top:2px;font-size:14px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}.exercise-report-actions{margin-top:var(--spacing-sm);display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.exercise-report-actions .btn{flex:1;min-width:110px}.metronome-controls{display:flex;gap:var(--spacing-md);align-items:center;flex-wrap:wrap;margin-bottom:var(--spacing-lg)}.metronome-controls .icon-btn{width:30px;height:30px;min-width:30px;padding:0;font-size:16px;line-height:1}.metronome-visual{height:120px;background:#070b1acc;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;border:2px solid var(--card-border);transition:all var(--transition-fast)}.metronome-visual.beat{background:#6ee7ff1a;border-color:var(--acc);transform:scale(1.05)}.settings-grid{display:grid;gap:var(--spacing-xl)}.setting-group{padding:var(--spacing-lg);background:#0b122b66;border-radius:var(--radius-md);border:1px solid var(--card-border)}.setting-group h4{margin-bottom:var(--spacing-md);font-size:16px;color:var(--acc)}.setting-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast)}.setting-item:hover{background:#0b122b99}.setting-item input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--acc)}.setting-item span{flex:1;font-size:14px}.setting-group .btn{width:100%;margin-bottom:var(--spacing-sm)}.setting-group .settings-action-btn{position:relative;justify-content:flex-start;padding-left:42px;border:1px solid rgba(148,163,184,.35);background:linear-gradient(135deg,#0f172a8c,#1e293b7a);transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.setting-group .settings-action-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px #0f172a4d}.setting-group .settings-action-btn:before{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;line-height:1}.setting-group .settings-action-btn.action-reset{border-color:#fb71858c;background:linear-gradient(135deg,#7f1d1d8c,#9f123959)}.setting-group .settings-action-btn.action-reset:before{content:"↺"}.setting-group .settings-action-btn.action-export{border-color:#67e8f98c;background:linear-gradient(135deg,#082f4994,#0891b252)}.setting-group .settings-action-btn.action-export:before{content:"⇩"}.setting-group .settings-action-btn.action-help{border-color:#c4b5fd94;background:linear-gradient(135deg,#312e818f,#6d28d94d)}.setting-group .settings-action-btn.action-help:before{content:"?"}.setting-group .settings-action-btn.action-contact{border-color:#6ee7b799;background:linear-gradient(135deg,#064e3b8f,#0596694d)}.setting-group .settings-action-btn.action-contact:before{content:"@"}.setting-group .pill{width:100%;justify-content:space-between;margin-bottom:var(--spacing-sm)}.practice-view{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:1001;display:flex;flex-direction:column;padding:var(--spacing-lg)}.practice-header{padding:var(--spacing-lg) 0}.practice-header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--spacing-md)}.exercise-session-title{font-weight:700;font-size:16px;color:var(--acc);text-align:center;justify-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.practice-exit-btn,.practice-settings-btn{white-space:nowrap}.practice-exit-btn .btn-icon{margin-right:6px;font-size:15px;font-weight:700}.practice-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-lg);overflow:auto}.practice-graphs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);min-height:min(58vh,560px)}.practice-graphs-grid .practice-pitch{grid-column:1;grid-row:1}.practice-graphs-grid .practice-readout-card{grid-column:2;grid-row:1}.practice-graphs-grid .exercise-progress-focused{grid-column:1 / -1;grid-row:2}.practice-pitch{min-height:0;display:flex;flex-direction:column}.practice-pitch .card-header.compact{margin-bottom:var(--spacing-sm)}.practice-pitch canvas{width:100%;height:100%;min-height:220px;border-radius:var(--radius-xl)}.exercise-progress-focused{margin-top:0;background:linear-gradient(145deg,#101a3fcc,#0a122ce6);border:1px solid rgba(110,231,255,.35);box-shadow:0 14px 34px #07101b52}.exercise-progress-hint{margin-top:var(--spacing-md);font-size:13px;color:var(--text-muted)}.exercise-guidance{margin-top:var(--spacing-sm);display:grid;gap:2px;color:var(--text-muted);font-size:12px}.exercise-guidance strong{color:var(--acc);font-size:16px;letter-spacing:.4px}#exerciseTimeline{min-height:240px}.practice-readout-card .readout-main{margin-bottom:var(--spacing-md)}.practice-readout-card .mic-power-strip{margin-bottom:10px}.practice-readout-card .footer-badges{margin-top:var(--spacing-sm)}.exercise-note-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:8px;padding:6px 8px;border-radius:10px;border:1px solid rgba(110,231,255,.25);background:#0f172a59}.practice-readout-header{align-items:center;justify-content:space-between;gap:8px}.practice-readout-header .card-title{margin:0}.practice-readout-header .exercise-note-actions{margin-bottom:0;padding:0;border:none;background:transparent}#playTargetedNoteBtn{white-space:nowrap}.practice-readout-card .key.target-key{border-color:#fbbf24bf;box-shadow:0 0 0 1px #fbbf2466 inset}.practice-readout-card .key.target-key.active{border-color:#34d399d9;box-shadow:0 0 0 1px #34d3998c inset,0 0 16px #34d39947}@media(max-width:768px){.practice-view{padding:var(--spacing-md)}.practice-content{gap:var(--spacing-md)}.practice-graphs-grid{grid-template-columns:1fr;min-height:auto}.practice-graphs-grid .practice-pitch,.practice-graphs-grid .practice-readout-card,.practice-graphs-grid .exercise-progress-focused{grid-column:auto;grid-row:auto}.practice-header-row{grid-template-columns:auto 1fr auto;gap:8px}.practice-header-row .btn{white-space:nowrap;padding:8px 10px;font-size:12px}.exercise-session-title{text-align:center;font-size:13px}.practice-settings-btn{min-width:40px;padding:8px}.practice-header-row .practice-settings-btn{font-size:0;line-height:1}.practice-settings-btn:before{content:"⚙️";font-size:16px}.practice-settings-label{display:none}.practice-exit-btn{min-width:40px;padding:8px}.practice-exit-btn .btn-icon{margin-right:0}.practice-exit-label{display:none}.practice-pitch canvas{min-height:150px}#exerciseTimeline{min-height:150px}.practice-readout-card{padding:10px}.practice-readout-card .readout-main,.practice-readout-card .mic-power-strip{margin-bottom:8px}.exercise-note-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}.practice-readout-header .exercise-note-actions .btn{width:auto;min-width:0;padding:6px 8px;font-size:11px}#playTargetedNoteBtn{width:auto}.practice-readout-card .freq-display .big,.practice-readout-card .note-display .note{font-size:24px}.practice-readout-card .note-display .sargam,.practice-readout-card .quality-indicator{font-size:12px}.practice-readout-card .meter-wrap{height:20px}.practice-readout-card .meter-labels span{font-size:11px}.practice-readout-card .kbd{gap:4px;margin-top:6px}.practice-readout-card .key{padding:4px 2px;min-width:0}.practice-readout-card .key>div{font-size:10px}.practice-readout-card .footer-badges{gap:4px;margin-top:6px}.practice-readout-card .badge{font-size:10px;padding:4px 6px}.session-grid{grid-template-columns:repeat(2,1fr)}.session-playback-pitch{font-size:17px}.session-playback-meta{font-size:11px}.session-playback-controls{flex-direction:column;align-items:stretch}.session-playback-btn,.session-speed-btn{min-height:38px;width:100%}.session-speed-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.sessions-list{max-height:340px;padding-right:2px}.session-item{flex-direction:column;gap:8px;padding:10px}.session-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-meta{font-size:10px;margin-bottom:6px}.session-grid{gap:6px;margin-top:6px}.session-metric{padding:5px 6px}.session-metric .label{font-size:8px}.session-metric .value{font-size:11px}.session-timeline-mini{height:64px;margin-top:6px}.session-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;justify-content:stretch}.session-actions .icon-btn{width:100%;min-width:0;height:32px;padding:4px 6px;font-size:10px;line-height:1.1}.exercise-header{flex-direction:column;align-items:flex-start;gap:4px}.exercise-header #exerciseScore{font-size:12px}.exercise-report-grid{grid-template-columns:1fr}.exercise-report-actions .btn{min-width:0}}@media(max-width:480px){.practice-settings-btn,.practice-exit-btn{min-width:34px;padding:7px}.session-item{padding:9px}.session-grid{grid-template-columns:1fr;gap:5px}.session-actions .icon-btn{height:30px;font-size:9px;padding:4px}}.exercise-complete-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#07101bb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px}.exercise-complete-card{width:min(96vw,480px);background:linear-gradient(145deg,#0f172af5,#1e40afeb);border:1px solid rgba(110,231,255,.4);border-radius:18px;box-shadow:0 24px 60px #00000073;padding:18px 16px;text-align:center}.exercise-complete-title{margin:0 0 8px;font-size:24px;font-weight:800;color:#e0f2fe}.exercise-complete-subtitle{margin:0 0 14px;color:#bfdbfe;font-size:14px}.exercise-complete-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.exercise-complete-item{border:1px solid rgba(191,219,254,.35);background:#0f172a73;border-radius:12px;padding:8px}.exercise-complete-item .label{display:block;font-size:11px;color:#bfdbfe;margin-bottom:2px}.exercise-complete-item .value{font-size:18px;font-weight:800;color:#e0f2fe}.exercise-complete-actions{display:flex;justify-content:center;gap:8px}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--text-muted)}.empty-state-icon{font-size:64px;margin-bottom:var(--spacing-lg);opacity:.5}.empty-state h3{margin-bottom:var(--spacing-sm);font-size:18px;color:var(--text)}.empty-state p{font-size:14px;line-height:1.6;max-width:400px;margin:0 auto}.logo-container{display:flex;align-items:center;text-decoration:none;transition:opacity var(--transition-base)}.logo-container:hover{opacity:.8}.app-logo{height:32px;width:auto;-o-object-fit:contain;object-fit:contain;display:block}.desktop-controls{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.mobile-controls-toggle{display:none;align-items:center;justify-content:center;gap:var(--spacing-sm);background:var(--card);border:1px solid rgba(110,231,255,.2);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--text);font-weight:700;white-space:nowrap;cursor:pointer;transition:all var(--transition-base)}.mobile-controls-toggle:hover{background:#6ee7ff1a;border-color:#6ee7ff66}.mobile-controls-toggle .icon-close,.mobile-controls-toggle.active .icon-open{display:none}.mobile-controls-toggle.active .icon-close{display:block}.mobile-controls-panel{display:none;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--card);border-radius:var(--radius-md);border:1px solid rgba(110,231,255,.2);margin-top:var(--spacing-md)}.mobile-controls-panel.active{display:flex}.mobile-controls-panel .pill{width:100%;justify-content:space-between}.mobile-controls-panel .range{flex:1;min-width:90px}@media(max-width:768px){.desktop-controls{display:none!important}.mobile-controls-toggle{display:inline-flex;width:100%}.mobile-controls-panel{width:100%}}.stats-scroll{display:grid!important;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md)}.btn-icon{margin-right:6px;flex-shrink:0}.btn-text{display:inline}.show-more-container{margin:var(--spacing-xl) 0}.btn-block{width:100%;justify-content:center;display:flex;align-items:center}.advanced-graphs{animation:fadeIn .3s ease-in}.advanced-empty-state{margin-bottom:var(--spacing-lg);min-height:140px;border:1px dashed rgba(110,231,255,.35);border-radius:14px;background:linear-gradient(140deg,#080d1eb3,#121c3c94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px 12px}.advanced-empty-state h4{margin:0;color:var(--acc);font-size:16px}.advanced-empty-state p{margin:0;color:var(--text-muted);font-size:12px;max-width:480px}.advanced-empty-illustration{display:flex;gap:6px;align-items:flex-end;height:28px}.advanced-empty-illustration span{display:block;width:6px;border-radius:999px;background:linear-gradient(180deg,var(--acc),var(--acc2));animation:advanced-bars 1.5s ease-in-out infinite}.advanced-empty-illustration span:nth-child(1){height:8px;animation-delay:0s}.advanced-empty-illustration span:nth-child(2){height:16px;animation-delay:.12s}.advanced-empty-illustration span:nth-child(3){height:22px;animation-delay:.24s}.advanced-empty-illustration span:nth-child(4){height:14px;animation-delay:.36s}.advanced-empty-illustration span:nth-child(5){height:10px;animation-delay:.48s}@keyframes advanced-bars{0%,to{opacity:.45;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1.08)}}.onboarding-tips{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;pointer-events:none}.onboarding-tip{position:fixed;width:min(220px,calc(100vw - 16px));background:#080d1ef0;border:1px solid rgba(110,231,255,.4);border-radius:12px;box-shadow:0 12px 28px #02081773;padding:10px 10px 9px}.onboarding-tip h4{margin:0 0 4px;font-size:13px;color:var(--acc)}.onboarding-tip p{margin:0;font-size:11px;line-height:1.35;color:var(--text-muted)}.onboarding-tip:before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;transform:translate(-50%) rotate(45deg);background:#080d1ef0;border-left:1px solid rgba(110,231,255,.4);border-top:1px solid rgba(110,231,255,.4)}.onboarding-close{position:fixed;right:14px;top:14px;pointer-events:auto;box-shadow:0 8px 20px #2563eb4d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.action-buttons{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.action-buttons .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center}.btn svg{flex-shrink:0}.readout-main{grid-template-columns:1fr}.readout-top{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.freq-note-row{display:flex;gap:var(--spacing-lg);align-items:flex-start;justify-content:space-between;width:100%}.freq-display{flex:1;min-width:0}.note-display{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;margin-left:auto;text-align:right}.quality-indicator{text-align:center;font-size:14px;opacity:.7;transition:color var(--transition-fast),opacity var(--transition-fast)}.quality-indicator.status-idle{color:var(--text-muted);opacity:.9}.quality-indicator.status-silent{color:var(--warn);opacity:.95}.quality-indicator.status-unclear{color:var(--bad);opacity:.95}.quality-indicator.status-active{color:var(--good);opacity:1}.logo-container{text-decoration:none;color:inherit}.settings-sidebar{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:none;pointer-events:none}.settings-sidebar.active{display:block;pointer-events:auto}.sidebar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .25s ease-out}.sidebar-content{position:absolute;top:0;right:0;bottom:0;width:90%;max-width:400px;background:var(--card);border-left:1px solid rgba(110,231,255,.2);box-shadow:-4px 0 20px #0000004d;display:flex;flex-direction:column;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid rgba(110,231,255,.2)}.sidebar-header h3{margin:0;font-size:20px;color:var(--text)}.sidebar-close{background:none;border:none;color:var(--text);font-size:32px;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--transition-base)}.sidebar-close:hover{background:#6ee7ff1a;transform:rotate(90deg)}.sidebar-body{flex:1;overflow-y:auto;padding:var(--spacing-lg)}.freq-display .big{white-space:nowrap}.freq-value{display:inline-flex;align-items:baseline;gap:0}.freq-int{font-weight:800}.hz{white-space:nowrap;display:inline-block}body.light-mode{color-scheme:light}body.light-mode .app-header{background:#ffffffe0;border-bottom-color:#0f172a1a;box-shadow:0 10px 28px #0f172a14}body.light-mode .app-title{color:#0f172a}body.light-mode .back-btn,body.light-mode .settings-btn,body.light-mode .session-header-indicator,body.light-mode .mobile-controls-toggle,body.light-mode .icon-btn{background:#fff;border-color:#0f172a24;color:#0f172a}body.light-mode .back-btn:hover,body.light-mode .settings-btn:hover,body.light-mode .session-header-indicator:hover,body.light-mode .mobile-controls-toggle:hover,body.light-mode .icon-btn:hover{background:#eff6ff;border-color:#2563eb66;color:#0f172a}body.light-mode .session-header-count{color:#0f66c3}body.light-mode .control-bar,body.light-mode .card,body.light-mode .practice-readout,body.light-mode .practice-exercise-info,body.light-mode .mobile-controls-panel,body.light-mode .setting-group,body.light-mode .permission-card,body.light-mode .help-content,body.light-mode .exercise-progress,body.light-mode .sidebar-content{background:#ffffffe6;border-color:#0f172a1f;box-shadow:0 12px 32px #0f172a14}body.light-mode .pill,body.light-mode .session-item,body.light-mode .exercise-card,body.light-mode .stat-card,body.light-mode .key,body.light-mode .badge,body.light-mode .session-metric,body.light-mode .help-section,body.light-mode .meter-wrap,body.light-mode .metronome-visual{background:#f8fbff;border-color:#0f172a1f;color:#0f172a}body.light-mode .session-playback-status{background:linear-gradient(135deg,#fffffff2,#ecf6ffe6);border-color:#0ea5e933;box-shadow:0 14px 30px #94a3b82e}body.light-mode .session-playback-label{color:#1e293bb3}body.light-mode .session-playback-meta{color:#475569}body.light-mode .session-playback-btn,body.light-mode .session-speed-btn{background:#ffffffdb;color:#0f172a;border-color:#2563eb26}body.light-mode .session-playback-btn:hover,body.light-mode .session-speed-btn:hover{background:#eff6fffa;border-color:#2563eb47}body.light-mode .session-playback-note{color:#64748b}body.light-mode .session-timeline-mini{border-color:#0f172a1f;background:#f8fbffe6}body.light-mode .mic-metric{background:#f8fbff;border-color:#0f172a29}body.light-mode .mic-metric-wide{background:#f3f7ff;border-color:#2563eb38}body.light-mode .metric-label{color:#64748b}body.light-mode .metric-value{color:#0ea5e9}body.light-mode .metric-bias{color:#1d4ed8}body.light-mode .metric-hint{color:#475569}body.light-mode .mic-power-strip.is-idle .metric-value{color:#64748b}body.light-mode .card-subtitle{color:#475569}body.light-mode .legend-chip{background:#f8fbff;border-color:#0f172a2e;color:#0f172a}body.light-mode .legend-chip.legend-flat{color:#1d4ed8;border-color:#3b82f666}body.light-mode .legend-chip.legend-center{color:#166534;border-color:#22c55e59}body.light-mode .legend-chip.legend-sharp{color:#9a3412;border-color:#f9731666}body.light-mode .advanced-empty-state{background:linear-gradient(140deg,#eff6fff2,#e0f2fee6);border-color:#2563eb42}body.light-mode .advanced-empty-state h4{color:#0f4c81}body.light-mode .advanced-empty-state p{color:#475569}body.light-mode .onboarding-tip{background:#fffffffa;border-color:#2563eb4d;box-shadow:0 10px 24px #0f172a26}body.light-mode .onboarding-tip:before{background:#fffffffa;border-left-color:#2563eb4d;border-top-color:#2563eb4d}body.light-mode .onboarding-tip h4{color:#0f4c81}body.light-mode .onboarding-tip p{color:#475569}body.light-mode .exercise-card:hover,body.light-mode .session-item:hover,body.light-mode .stat-card:hover{background:#eef4ff;border-color:#2563eb73;box-shadow:0 8px 20px #2563eb24}body.light-mode .btn-primary{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;box-shadow:0 8px 18px #2563eb47}body.light-mode .btn-primary:hover{box-shadow:0 10px 26px #2563eb52}body.light-mode .btn-secondary{background:#fff;color:#0f172a;border:1px solid rgba(15,23,42,.16)}body.light-mode .btn-secondary:hover{background:#eff6ff;border-color:#2563eb73}body.light-mode .setting-group .settings-action-btn{box-shadow:0 3px 10px #0f172a12}body.light-mode .setting-group .settings-action-btn.action-reset{border-color:#e11d4857;background:linear-gradient(135deg,#fff1f2fa,#ffe4e6f2);color:#9f1239}body.light-mode .setting-group .settings-action-btn.action-export{border-color:#0ea5e959;background:linear-gradient(135deg,#eff6fffa,#e0f2fef0);color:#0c4a6e}body.light-mode .setting-group .settings-action-btn.action-help{border-color:#7c3aed52;background:linear-gradient(135deg,#f5f3fffa,#ede9fef0);color:#5b21b6}body.light-mode .setting-group .settings-action-btn.action-contact{border-color:#05966957;background:linear-gradient(135deg,#f0fdfafa,#d1fae5f0);color:#065f46}body.light-mode .btn-stop{background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff}body.light-mode select{background:#fff;color:#0f172a;border-color:#0f172a29}body.light-mode select:hover,body.light-mode select:focus{border-color:#2563eb73;background:#f8fbff}body.light-mode .range::-webkit-slider-track{background:#dbe4f2}body.light-mode .range::-moz-range-track{background:#dbe4f2}body.light-mode .meter-center{background:#0ea5e9;box-shadow:0 0 10px #0ea5e966}body.light-mode .meter-pointer{background:#16a34a;box-shadow:0 0 12px #16a34a59}body.light-mode .meter-labels,body.light-mode .hz,body.light-mode .sargam,body.light-mode .session-meta,body.light-mode .stat-label,body.light-mode .exercise-instruction,body.light-mode .exercise-meta,body.light-mode .help-section p,body.light-mode .empty-state,body.light-mode .empty-state p{color:#475569;opacity:1}body.light-mode .exercise-report{background:#f8fbff;border-color:#0f172a1f}body.light-mode .exercise-report-item{background:#fff;border-color:#0f172a1f}body.light-mode .quality-indicator.status-idle{color:#475569}body.light-mode .quality-indicator.status-silent{color:#b45309}body.light-mode .quality-indicator.status-unclear{color:#dc2626}body.light-mode .quality-indicator.status-active{color:#0f766e}body.light-mode .tab{color:#334155}body.light-mode .tab:hover{background:#eef4ff}body.light-mode .tab.active,body.light-mode .tab[aria-selected=true]{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff}body.light-mode .tab-count-badge{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 6px 14px #dc262633}.session-header-indicator.is-receiving,.tab-count-badge.is-receiving{animation:session-save-receive .72s cubic-bezier(.22,1,.36,1)}.session-save-flight{position:fixed;left:0;top:0;transform:translate(-50%,-50%) scale(.92);display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(110,231,255,.28);background:linear-gradient(135deg,#0ea5e9f2,#3b82f6eb);color:#eff6ff;font-size:12px;font-weight:800;box-shadow:0 16px 34px #0ea5e93d;pointer-events:none;z-index:3000;opacity:0;transition:transform .76s cubic-bezier(.2,.9,.24,1),opacity .76s cubic-bezier(.2,.9,.24,1),box-shadow .76s ease}.session-save-flight.is-flying{opacity:.16;transform:translate(calc(-50% + var(--flight-x, 0px)),calc(-50% + var(--flight-y, 0px))) scale(.42);box-shadow:0 8px 18px #0ea5e914}.session-save-flight-icon{font-size:14px;line-height:1}.session-save-flight-text{white-space:nowrap;line-height:1}@keyframes session-save-receive{0%{transform:scale(1);box-shadow:0 0 #0ea5e900}28%{transform:scale(1.14);box-shadow:0 0 0 8px #0ea5e933}62%{transform:scale(.96);box-shadow:0 0 0 12px #0ea5e914}to{transform:scale(1);box-shadow:0 0 #0ea5e900}}body.light-mode .session-save-flight{border-color:#2563eb33;background:linear-gradient(135deg,#0ea5e9fa,#2563ebf0);color:#fff;box-shadow:0 16px 34px #2563eb2e}@media(max-width:640px){.session-save-flight{gap:6px;padding:8px 12px;font-size:11px}.session-save-flight-icon{font-size:13px}}body.light-mode .tabs{border-bottom-color:#0f172a1f}body.light-mode .key.active{outline-color:#0ea5e9;background:linear-gradient(135deg,#e0f2fe,#dbeafe);color:#0f172a;box-shadow:0 0 0 1px #0ea5e940 inset,0 8px 18px #2563eb24}body.light-mode .stat-value,body.light-mode .card-title,body.light-mode .exercise-info h4,body.light-mode .session-metric .value,body.light-mode .help-section h3,body.light-mode .practice-sargam,body.light-mode .metronome-visual{color:#0f66c3}body.light-mode .metronome-visual.beat{background:#dff2ff;border-color:#0ea5e980}body.light-mode .permission-overlay,body.light-mode .help-overlay,body.light-mode .loading-indicator{background:#f1f5f9e0}body.light-mode .sidebar-overlay{background:#0f172a47}body.light-mode .sidebar-header{border-bottom-color:#0f172a1f}body.light-mode .sidebar-close:hover{background:#2563eb1f}body.light-mode .spinner{border-color:#0ea5e933;border-top-color:#2563eb}body.light-mode canvas{background:#f8fbff;border:1px solid rgba(15,23,42,.1)}body.light-mode #pitch,body.light-mode #pitchPractice{border-color:#0ea5e940}body.light-mode #pitch{background:#f8fbff;border-color:#0f172a24}body.light-mode .tooltip:after{background:#fffffffa;color:#0f172a;border-color:#0f172a2e;box-shadow:0 8px 18px #0f172a1f}body.light-mode .tooltip:before{border-top-color:#fffffffa}body.light-mode .action-buttons::-webkit-scrollbar-thumb{background:#2563eb47}body.light-mode .action-buttons{scrollbar-color:rgba(37,99,235,.28) transparent}