*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#10233d 0,#07111f 35%,#050b14 100%);color:#eef5ff;min-height:100vh}.app-shell{width:min(1160px,100%);margin:0 auto;padding:28px 18px 48px}.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow,.section-kicker{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#7aa7ff}.hero h1{margin:0;font-size:clamp(30px,5vw,48px);line-height:1}.subtitle{margin:10px 0 0;color:#9fb1c7;font-size:15px}.live-badge{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #203652;border-radius:999px;background:#0b1728;color:#9fb1c7;font-size:13px;white-space:nowrap}.live-dot{width:8px;height:8px;border-radius:50%;background:#627084}.live-badge.active{color:#d9fff2;border-color:#235845}.live-badge.active .live-dot{background:#39d98a;box-shadow:0 0 0 5px rgba(57,217,138,.12)}.start-panel,.confidence-panel,.chart-card,.info-card,.metric-card,.tuning-card,.lab-section,.experiment-card{background:linear-gradient(180deg,rgba(16,30,49,.95),rgba(9,19,33,.95));border:1px solid #1d314a;border-radius:20px}.start-panel{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:14px;flex-wrap:wrap}.primary-button,.secondary-button,.vowel-buttons button,.snapshot-buttons button{border:0;border-radius:14px;min-height:46px;padding:0 18px;font-size:15px;font-weight:800;cursor:pointer}.primary-button{background:#4d82ff;color:white;box-shadow:0 8px 24px rgba(77,130,255,.25)}.primary-button.active{background:#d6535f}.secondary-button,.vowel-buttons button,.snapshot-buttons button{background:#13243a;color:#dce9fa;border:1px solid #25405f}.vowel-buttons button.selected{background:#254a7a;border-color:#4d82ff;color:#fff}.button-icon{margin-right:6px}.permission-note{margin:0;color:#8fa3ba;font-size:13px;flex:1;min-width:220px}.meter-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:12px}.metric-card{padding:18px;min-width:0}.metric-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:#8194ab;text-transform:uppercase}.pitch-row{display:flex;align-items:flex-end;gap:16px;margin-top:6px}.note-name{font-size:56px;line-height:.95;letter-spacing:-.06em}.pitch-hz{font-size:18px;font-weight:800}.pitch-cents{margin-top:4px;font-size:12px;color:#7f93aa}.formant-value{display:inline-block;margin-top:8px;font-size:38px;line-height:1;letter-spacing:-.04em}.metric-unit{font-size:13px;color:#7890aa;margin-left:4px}.harmonic-match{margin-top:10px;font-size:12px;color:#90a4bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f1-card{box-shadow:inset 0 3px 0 #ff8a65}.f2-card{box-shadow:inset 0 3px 0 #5bc0eb}.f3-card{box-shadow:inset 0 3px 0 #c78cff}.confidence-panel{margin-top:12px;padding:14px 16px}.confidence-head{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#a8b8ca}.confidence-side{display:flex;gap:9px;align-items:center}.confidence-head strong{color:white}.confidence-label,.quality-pill,.status-pill{font-size:10px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:4px 8px;background:#402b31;color:#ffb8bd;border:1px solid #70404a}.confidence-label.ok,.quality-pill.ok{background:#183a31;color:#b7ffe5;border-color:#2b6150}.confidence-track{height:8px;margin-top:10px;border-radius:999px;background:#15263b;overflow:hidden}.confidence-bar{height:100%;width:0;background:linear-gradient(90deg,#e67e5f,#d8bc4c,#39d98a);transition:width .16s ease}.signal-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:#6f839b;font-size:11px;flex-wrap:wrap}.chart-card{padding:18px;margin-top:14px;min-width:0}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.section-heading.compact{margin-bottom:8px}.section-heading h2,.info-card h2,.lab-toolbar h2,.experiment-card h2,.tuning-card h2{margin:0;font-size:18px}.legend{display:flex;gap:12px;flex-wrap:wrap;color:#91a4ba;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.legend-line{width:18px;height:3px;border-radius:3px;background:#7e91a8}.legend-line.envelope{background:#55d6be}.legend-line.harmonic{height:10px;width:2px;background:#7c6fe7}.canvas-wrap{position:relative;width:100%;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#081321,#07101b);border:1px solid #17293f}.spectrum-wrap{height:320px}.history-wrap,.map-wrap{height:260px}.alignment-history-wrap{height:260px}.cents-history-wrap{height:180px}.canvas-wrap canvas{width:100%;height:100%;display:block}.axis-note{display:flex;justify-content:space-between;margin-top:6px;padding:0 4px;color:#61768f;font-size:10px}.two-column{display:grid;grid-template-columns:1.45fr 1fr;gap:14px}.formant-legend,.history-key{display:flex;gap:14px;margin-top:8px;font-size:11px;font-weight:800;flex-wrap:wrap}.f1-text{color:#ff8a65}.f2-text{color:#5bc0eb}.f3-text{color:#c78cff}.h2-text{color:#f1c75b}.h3-text{color:#75d7b9}.chart-help{margin:8px 0 0;color:#71869e;font-size:11px;line-height:1.5}.info-card{margin-top:14px;padding:18px}.pipeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.pipeline span{padding:8px 10px;border-radius:10px;background:#112238;border:1px solid #233d5b;color:#c8d7e8;font-size:12px;font-weight:700}.pipeline b{color:#4f6d8b}.info-card p{margin:10px 0 0;color:#8398b0;font-size:13px;line-height:1.65}.tuning-card{margin-top:14px;padding:18px}.tuning-heading{align-items:center}.tuning-top-grid{display:grid;grid-template-columns:.75fr 1.2fr 1.35fr;gap:10px}.tuning-block{min-width:0;padding:14px;border-radius:16px;background:#0b1728;border:1px solid #1d324c}.tuning-label{display:block;color:#7189a4;font-size:10px;font-weight:900;letter-spacing:.08em;margin-bottom:8px}.pitch-block strong{display:block;font-size:30px;line-height:1}.pitch-block>span:last-child{display:block;margin-top:6px;color:#90a4bb;font-size:13px}.alignment-value{display:flex;align-items:baseline;gap:5px}.alignment-value strong{font-size:30px;line-height:1}.alignment-value span{font-size:11px;color:#7f93aa}.alignment-meta,.alignment-pair,.ratio-row,.capture-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;color:#9db0c5;font-size:12px;flex-wrap:wrap}.status-pill{padding:3px 7px;background:#263244;border-color:#40526a;color:#c5d0df}.status-pill.very-close{background:#153b32;border-color:#28604e;color:#a9f6da}.status-pill.close{background:#3a3520;border-color:#655b2c;color:#f3df82}.status-pill.separated{background:#2d3040;border-color:#444a61;color:#c6c9d7}.harmonic-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}.harmonic-chip{padding:8px 6px;border:1px solid #1e334e;background:#0b1728;border-radius:11px;text-align:center;min-width:0}.harmonic-chip b{display:block;font-size:10px;color:#8094ad}.harmonic-chip span{display:block;margin-top:3px;font-size:12px;font-weight:800;white-space:nowrap}.tuning-lower-grid{display:grid;grid-template-columns:1.45fr .85fr;gap:10px;margin-top:10px}.tuning-block-head{display:flex;justify-content:space-between;gap:10px}.tuning-block-head strong{display:block;font-size:14px}.tiny-note{color:#6f849d;font-size:10px;line-height:1.4}.harmonic-bars{display:grid;gap:7px;margin-top:12px}.harmonic-bar-row{display:grid;grid-template-columns:30px 1fr 66px;gap:8px;align-items:center;font-size:11px}.harmonic-bar-row b{color:#9fb1c7}.harmonic-track{height:8px;border-radius:999px;background:#15263b;overflow:hidden}.harmonic-fill{height:100%;border-radius:999px;background:#6f87a4;transition:width .12s linear}.harmonic-db{text-align:right;color:#aebdd0;font-variant-numeric:tabular-nums}.singer-scale{display:flex;align-items:center;gap:8px;color:#758aa2;font-size:10px}.singer-scale div{height:5px;flex:1;border-radius:999px;background:linear-gradient(90deg,#536f91,#9b76b7)}.singer-block strong{display:block;font-size:34px;margin:11px 0 3px}.region-harmonics{margin-top:12px;padding:9px 10px;background:#101f33;border-radius:11px;color:#b9c9db;font-size:12px}.interpretation-note{margin:12px 2px 0;color:#6f849b;font-size:11px;line-height:1.55}.lab-section{padding:18px;margin-top:14px}.lab-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center}.compact-button{min-height:38px;padding:0 13px;font-size:12px}.advanced-history{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.nested-card{margin-top:12px}.mini-title{font-size:12px;font-weight:800;color:#a9b9ca;margin-bottom:9px}.experiment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.experiment-card{padding:18px;min-width:0}.vowel-buttons,.snapshot-buttons{display:flex;gap:7px;flex-wrap:wrap}.vowel-buttons button,.snapshot-buttons button{min-height:40px;padding:0 14px;font-size:13px}.snapshot-buttons button{flex:1;min-width:100px}.slim-button{min-height:40px;padding:0 13px;font-size:12px}.table-scroll{overflow-x:auto;margin-top:12px;border:1px solid #1c314a;border-radius:13px}.lab-table{width:100%;border-collapse:collapse;min-width:630px;font-size:11px}.lab-table th,.lab-table td{padding:9px 8px;text-align:right;border-bottom:1px solid #172a41;white-space:nowrap}.lab-table th:first-child,.lab-table td:first-child{text-align:left}.lab-table th{color:#7188a1;background:#0b1728;font-size:10px;letter-spacing:.03em}.lab-table td{color:#c4d2e2;font-variant-numeric:tabular-nums}.lab-table tr:last-child td{border-bottom:0}.empty-cell{text-align:center!important;color:#647a93!important}.comparison-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:#0c192a;border:1px solid #1e334c;color:#8fa4bc;font-size:11px;line-height:1.55}footer{display:flex;justify-content:space-between;gap:12px;padding:20px 4px 0;color:#536980;font-size:11px}@media(max-width:900px){.tuning-top-grid{grid-template-columns:1fr 1fr}.pitch-block{grid-column:1/-1}.tuning-lower-grid,.advanced-history,.experiment-grid{grid-template-columns:1fr}}@media(max-width:820px){.meter-grid{grid-template-columns:repeat(3,1fr)}.pitch-card{grid-column:1/-1}.two-column{grid-template-columns:1fr}.spectrum-wrap{height:280px}.harmonic-strip{grid-template-columns:repeat(4,1fr)}}@media(max-width:560px){.app-shell{padding:20px 12px 36px}.hero{align-items:flex-start}.subtitle{font-size:13px}.live-badge{padding:8px 10px;font-size:11px}.start-panel{padding:12px}.primary-button,.secondary-button{width:100%}.permission-note{min-width:0}.metric-card{padding:14px}.note-name{font-size:48px}.formant-value{font-size:28px}.meter-grid{gap:8px}.harmonic-match{font-size:10px}.spectrum-wrap{height:240px}.history-wrap,.map-wrap,.alignment-history-wrap{height:220px}.cents-history-wrap{height:165px}.legend{display:none}.section-heading h2,.info-card h2,.lab-toolbar h2,.experiment-card h2,.tuning-card h2{font-size:16px}.signal-meta{font-size:10px}.pipeline{gap:5px}.pipeline span{padding:6px 8px;font-size:10px}.tuning-top-grid{grid-template-columns:1fr}.pitch-block{grid-column:auto}.tuning-lower-grid{grid-template-columns:1fr}.harmonic-strip{grid-template-columns:repeat(4,1fr)}.lab-toolbar{align-items:flex-start;flex-direction:column}.lab-toolbar .secondary-button{width:auto}.capture-row{align-items:flex-start;flex-direction:column}.capture-row .primary-button{width:100%}.confidence-head{align-items:flex-start}.confidence-side{flex-direction:column;align-items:flex-end;gap:5px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}