:root {
/* Warm cream paper palette + teal-green accent */
--bg-color: #F7F4EB;
--bg-elev: #FCFAF3;
--bg-soft: #EDE9DD;
--text-primary: #2C2C2C;
--text-secondary: #6B6B6B;
--text-muted: #736D63; /* WCAG AA: 4.67:1 on cream bg (was #9A9690 ≈ 2.7:1, AA fail) */
--accent-color: #2EA39B;
--accent-hover: #258A82;
--accent-soft: rgba(46, 163, 155, 0.1);
--glass-bg: #FCFAF3;
--glass-border: #E0DCD0;
--glass-border-strong: #C8C3B4;
--warn-color: #E68B30;
--success-color: #2EA39B;
--vivid-purple: #8B5CF6;
--vivid-orange: #E68B30;
--vivid-green: #2EA39B;
--vivid-blue: #3B82F6;
--vivid-red: #D24545;
--canvas-bg: #FFFEF9;
--canvas-grid: rgba(0, 0, 0, 0.06);
--canvas-text: #2C2C2C;
--canvas-text-muted: #6B6B6B;
/* Typography scale — collapses scattered 0.68–0.95rem sizes into a fixed ramp */
--fs-h1: 1.25rem; /* page title */
--fs-h2: 0.95rem; /* panel headings */
--fs-h3: 0.85rem; /* subsection / tracker titles, body */
--fs-label: 0.8rem; /* control labels */
--fs-mono: 0.75rem; /* numeric values */
--fs-hint: 0.72rem; /* helper / hint text */
/* Radius scale — collapses scattered 2–10px into a fixed ramp */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-pill: 999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 24px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
.app-container {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 20px;
}
header {
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px 12px;
margin-bottom: 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--glass-border);
position: relative;
}
.bmc-link {
position: absolute;
top: 0;
right: 0;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.75rem;
padding: 4px 10px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
transition: all 0.15s;
background: var(--bg-elev);
}
.bmc-link:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
header h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
letter-spacing: -0.01em;
}
header p {
color: var(--text-muted);
font-size: 0.8rem;
margin: 0;
font-weight: 400;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 24px;
grid-template-areas:
"visualizer visualizer"
"source filter";
align-items: start;
}
.glass {
background: var(--bg-elev);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 20px;
}
.panel h2 {
font-size: 0.95rem;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
color: var(--text-primary);
font-weight: 700;
letter-spacing: 0;
}
.source-panel {
grid-area: source;
background: #FCF6EC; /* warm tint — Source = 声帯/音源 */
border-top: 3px solid var(--vivid-orange);
}
.filter-panel {
grid-area: filter;
background: #EFF6F4; /* cool tint — Filter = 声道/共鳴 */
border-top: 3px solid var(--accent-color);
}
/* Collapsible Source / Filter panels (whole-panel fold, centered heading) */
.collapsible-panel > .panel-summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.collapsible-panel > .panel-summary::-webkit-details-marker { display: none; }
.collapsible-panel > .panel-summary::marker { content: ''; }
.collapsible-panel > .panel-summary h2 {
margin: 0;
padding: 0;
border: none;
text-align: center;
}
.panel-disclosure {
display: none; /* title-only centered heading (open/close via summary click) */
}
.collapsible-panel[open] > .panel-summary .panel-disclosure {
transform: rotate(90deg);
}
.collapsible-panel[open] > .panel-summary {
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--glass-border);
}
.visualizer-panel {
grid-area: visualizer;
position: sticky;
top: 12px;
z-index: 5;
padding: 16px 20px;
}
/* Drop sticky whenever the panel grows tall — otherwise it stays glued to the viewport
top and buries the Source/Filter controls below, making them hard to scroll to and see.
Triggers: Roughness legend open, or the Recordings / Mic Analysis panels expanded. */
.visualizer-panel:not(.is-fullscreen):has(#roughness-toggle.roughness-active),
.visualizer-panel:not(.is-fullscreen):has(#recordings-panel[open]),
.visualizer-panel:not(.is-fullscreen):has(#mic-analysis-group[open]) {
position: relative;
top: auto;
}
/* Controls */
.control-group,
.formant-control {
margin-bottom: 24px;
}
.control-group label:first-child,
.label-row label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 0.95rem;
}
span[id$="-val"] {
color: var(--text-primary);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
font-weight: 600;
}
.control-group > label:first-child span[id$="-val"] {
float: right;
}
/* Pitch header: label on left, Voice Type compact toggle + range hint on right */
.pitch-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.pitch-header .label-main {
flex: 1;
min-width: 0;
margin-bottom: 0;
display: block;
font-weight: 600;
font-size: 0.95rem;
}
.pitch-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.pitch-meta .range-hint {
font-size: var(--fs-hint);
color: var(--text-muted);
font-weight: 500;
line-height: 1;
}
/* Compact 2-segment toggle (Treble / Non-Treble) */
.voice-type-compact {
display: inline-flex;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 2px;
gap: 0;
}
.voice-type-compact input[type="radio"] {
display: none;
}
.voice-type-compact label {
padding: 3px 10px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-xs);
transition: background 0.15s, color 0.15s;
margin: 0;
line-height: 1.3;
white-space: nowrap;
}
.voice-type-compact input[type="radio"]:checked + label {
background: var(--bg-elev);
color: var(--accent-color);
box-shadow: 0 1px 2px rgba(28, 24, 16, 0.08);
}
/* Custom Range Sliders */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: transparent;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: var(--glass-border);
border-radius: var(--radius-pill);
border: none;
}
input[type=range]::-moz-range-track {
height: 4px;
background: var(--glass-border);
border-radius: var(--radius-pill);
border: none;
}
.canvas-container {
width: 100%;
height: 250px;
background: var(--canvas-bg);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
border: 1px solid var(--glass-border);
}
#spectrum-canvas {
width: 100%;
height: 100%;
cursor: crosshair;
}
#spectrum-canvas.grabbing {
cursor: grabbing;
}
#spectrogram-canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background: #0a0a14;
}
#waveform-canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* receives wheel events for time-axis zoom */
background: #FFFEF9;
}
/* Waveform view: time-zoom controls (bottom-left, only in waveform mode) */
.wave-zoom {
position: absolute;
bottom: 22px;
left: 8px;
display: flex;
align-items: center;
gap: 2px;
z-index: 3;
}
.wave-zoom button {
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-secondary);
width: 26px;
height: 22px;
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.85rem;
font-family: inherit;
font-weight: 600;
line-height: 1;
}
.wave-zoom button:hover {
color: var(--text-primary);
border-color: var(--accent-color);
}
.wave-zoom-label {
min-width: 48px;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
/* ============================================================
Unified segmented control (pill tabs)
Used across: Spectrum/Spectrogram (view-tabs), Vibrato Basic/Advanced
(vib-mode-tabs), Vowel Space lang/mode tabs (vs-lang-tabs, vs-mode-tabs).
============================================================ */
.view-tabs,
.vib-mode-tabs,
.vs-lang-tabs {
display: inline-flex;
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
padding: 2px;
gap: 2px;
}
.view-tab,
.vib-mode-tab,
.vs-lang-tab {
appearance: none;
background: transparent;
border: none;
padding: 3px 11px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-secondary, #666);
cursor: pointer;
border-radius: var(--radius-pill);
line-height: 1.2;
text-transform: uppercase;
transition: background 0.12s, color 0.12s;
}
.view-tab:hover,
.vib-mode-tab:hover,
.vs-lang-tab:hover {
background: rgba(33, 150, 243, 0.08);
color: var(--text-primary, #222);
}
.view-tab.is-active,
.vib-mode-tab.is-active,
.vs-lang-tab.is-active {
background: var(--accent-color, #2196F3);
color: #fff;
}
/* Spectrum view-tabs live in the canvas header bar (above the canvas frame),
pushed to the right edge so it doesn't crowd the Volume/Slope/Roughness
controls and doesn't overlap the Roughness band labels inside the canvas. */
.canvas-header-bottom .view-tabs {
margin-left: auto;
align-self: center;
background: rgba(0, 0, 0, 0.04);
}
/* Vibrato analysis panel */
/* Match Recordings panel visuals for visual consistency */
/* Mic Analysis: outer wrapper around Vibrato / Vowel Space / Recordings */
.mic-analysis-group {
margin-top: 12px;
padding: 6px 12px 4px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
.mic-analysis-summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 4px 0 6px;
}
.mic-analysis-summary::-webkit-details-marker { display: none; }
.mic-analysis-summary::marker { content: ''; }
.mic-analysis-disclosure {
display: none; /* title-only centered heading (open/close via summary click) */
}
.mic-analysis-group[open] > .mic-analysis-summary .mic-analysis-disclosure {
transform: rotate(90deg);
}
.mic-analysis-title {
font-size: var(--fs-h2); /* match The Voice Source / The Filter h2 (0.95rem) */
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0;
text-transform: none;
}
.mic-analysis-body {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 2px;
}
/* Tighten inner panel spacing inside the wrapper */
.mic-analysis-body > .vib-analysis-panel,
.mic-analysis-body > .recordings-panel {
margin-top: 0;
}
/* Mic Analysis sub-panels — matched to .collapsible (Phonation) form:
bg-soft card, title left + ▾ at right, hover accent border. */
.vib-analysis-panel {
margin-top: 8px;
padding: 0;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
transition: border-color 0.15s;
}
.vib-analysis-panel:hover { border-color: var(--accent-color); }
.vib-analysis-summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-sm);
}
.vib-analysis-summary::-webkit-details-marker { display: none; }
.vib-analysis-summary::marker { content: ''; }
.vib-analysis-summary::after {
content: "▾";
color: var(--accent-color);
font-size: 0.9rem;
font-weight: 700;
transition: transform 0.2s ease;
flex: 0 0 auto;
margin-left: auto;
line-height: 1;
}
.vib-analysis-panel[open] > .vib-analysis-summary::after {
transform: rotate(180deg);
}
.vib-analysis-panel[open] > .vib-analysis-summary {
border-bottom: 1px solid var(--glass-border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.vib-analysis-disclosure { display: none; }
.vib-analysis-title {
font-size: var(--fs-h3);
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0;
text-transform: none;
flex: 0 0 auto;
}
.vib-analysis-summary-hint {
font-size: var(--fs-hint);
color: var(--text-secondary);
opacity: 0.7;
font-weight: 400;
}
.vib-analysis-panel[open] > .vib-analysis-summary .vib-analysis-summary-hint {
display: none;
}
.vib-analysis-body {
padding: 12px 14px;
}
.vib-analysis-controls {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.vib-section {
margin-bottom: 10px;
}
.vib-section-head {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
/* Decorative emoji icon disabled — keeps tonality more professional */
.vib-section-icon {
display: none;
}
.vib-section-title {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary, #777);
}
.vib-section-meta {
margin-left: auto;
font-size: 0.7rem;
color: var(--text-secondary, #999);
font-variant-numeric: tabular-nums;
}
/* Basic / Advanced visibility */
.vib-analysis-body.is-basic .vib-advanced-only {
display: none !important;
}
.vib-wave-val {
font-size: 13px;
text-transform: capitalize;
min-width: 48px;
}
/* Compact vstat labels (tooltip [?] is inline) */
.vstat-label .tooltip {
font-size: 9px;
margin-left: 2px;
}
/* ============================================================
Vowel Space panel — inherits unified tab/stat styles
============================================================ */
.vs-readout-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.vs-calibrate-btn {
appearance: none;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
padding: 3px 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-primary, #333);
cursor: pointer;
line-height: 1.2;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vs-calibrate-btn:hover {
background: rgba(33, 150, 243, 0.08);
border-color: var(--accent-color, #2196F3);
}
.vs-calibrate-btn.is-active {
background: #e53935;
color: #fff;
border-color: #c62828;
}
.vs-canvas-wrap {
width: 100%;
height: 320px;
background: #fdfcf6;
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
#vowel-space-canvas {
width: 100%;
height: 100%;
display: block;
}
.vib-analysis-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.vib-analysis-stats {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
}
.vib-analysis-toggles {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
margin-left: 4px;
}
.vib-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #555);
cursor: pointer;
user-select: none;
transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}
.vib-toggle input[type="checkbox"] {
display: none;
}
.vib-toggle:has(input:not(:checked)) {
opacity: 0.45;
}
.vib-toggle:hover {
background: rgba(33, 150, 243, 0.08);
}
.vib-toggle-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: var(--radius-xs);
}
.vib-swatch-f0 {
background: #ef6c00;
}
.vib-swatch-cents {
background: #1e88e5;
}
.vib-toggle-label {
line-height: 1;
}
.vstat {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.vstat-label {
font-size: 0.65rem;
font-weight: 600;
color: var(--text-secondary, #777);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vstat-val {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #1a1a1a);
min-width: 24px;
text-align: right;
font-feature-settings: "tnum" 1;
}
.vstat-unit {
font-size: 0.65rem;
color: var(--text-secondary, #999);
margin-left: -2px;
}
/* Primary live metrics (CPP, H1*–H2*, vibrato rate…) — sized to stay legible
from singing distance (arm's length or more), not just desk-reading distance. */
.vstat-primary .vstat-val {
font-size: 1.35rem;
}
.vstat-verdict .vstat-val {
font-size: 0.95rem;
padding: 2px 8px;
background: rgba(33, 150, 243, 0.12);
color: var(--accent-color, #2196F3);
border-radius: var(--radius-xs);
min-width: 48px;
}
.vstat-verdict.is-good .vstat-val {
background: rgba(76, 175, 80, 0.18);
color: #2e7d32;
}
.vstat-verdict.is-warn .vstat-val {
background: rgba(255, 152, 0, 0.18);
color: #ef6c00;
}
/* Measured glottal source (IAIF) block in the Glottal Waveform panel */
.glottal-measured {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15));
}
.glottal-measured-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
font-size: 0.78rem;
color: var(--text-secondary, #9aa0a6);
}
/* Voice Quality (CPP / H1–H2) phonation-tendency chip colors */
.vstat-val.vq-flow { background: rgba(76, 175, 80, 0.18); color: #2e7d32; }
.vstat-val.vq-pressed { background: rgba(255, 152, 0, 0.18); color: #ef6c00; }
.vstat-val.vq-breathy { background: rgba(33, 150, 243, 0.14); color: #1976d2; }
/* Low-confidence: neutralise the verdict chip and dim primary numbers
so a shaky estimate never reads as an assertion. */
.vib-analysis-body.is-lowconf .vstat-verdict .vstat-val {
background: rgba(0, 0, 0, 0.06);
color: var(--text-secondary, #999);
}
.vib-analysis-body.is-lowconf .vstat-primary .vstat-val {
color: var(--text-secondary, #bbb);
}
/* Signal-quality meter — at-a-glance confidence, visible in Basic mode too. */
.vib-quality {
margin-top: 9px;
width: 100%;
}
.vib-quality-row {
display: flex;
align-items: center;
gap: 8px;
}
.vib-quality-tag {
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary, #999);
min-width: 46px;
}
.vib-quality-track {
flex: 1;
height: 5px;
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.vib-quality-fill {
height: 100%;
width: 0%;
border-radius: var(--radius-pill);
background: #4caf50;
transition: width 0.2s ease, background-color 0.2s ease;
}
/* Loudness ceiling meter — over-singing / pressed-loud guard */
.loud-meter {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.loud-track {
position: relative;
flex: 1;
height: 14px;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.loud-fill {
height: 100%;
width: 0%;
border-radius: var(--radius-md);
background: #43a047;
transition: width 0.08s linear, background-color 0.12s ease;
}
.loud-marker {
position: absolute;
top: 0;
bottom: 0;
left: 70%;
width: 3px;
margin-left: -1.5px;
background: #d32f2f;
z-index: 2;
pointer-events: none;
}
.loud-val {
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-secondary, #777);
min-width: 48px;
text-align: right;
}
.loud-ceiling-row {
display: flex;
align-items: center;
gap: 8px;
}
.loud-ceiling-row label {
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary, #999);
min-width: 46px;
}
.loud-ceiling-row input[type="range"] {
flex: 1;
}
.loud-ceiling-val {
font-size: 0.7rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-secondary, #777);
min-width: 48px;
text-align: right;
}
.loud-hint {
margin: 8px 0 0;
font-size: 0.66rem;
line-height: 1.5;
color: var(--text-secondary, #999);
}
.vib-analysis-canvas-wrap {
width: 100%;
height: 110px;
background: #fdfcf6;
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
#vibrato-canvas {
width: 100%;
height: 100%;
display: block;
}
.pitch-track-canvas-wrap {
width: 100%;
height: 300px;
min-height: 150px;
background: #fdfcf6;
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
overflow: hidden;
resize: vertical;
}
#pitch-track-canvas {
width: 100%;
height: 100%;
display: block;
}
.pitch-track-hint {
margin: 6px 2px 0;
font-size: 11px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.45);
}
.pitch-track-controls {
display: flex;
align-items: center;
gap: 12px;
margin: 0 2px 6px;
}
.pitch-follow-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary, rgba(0, 0, 0, 0.6));
cursor: pointer;
user-select: none;
}
.pitch-follow-toggle input {
cursor: pointer;
margin: 0;
}
.pitch-dot-size {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}
.pitch-dot-size .pitch-dot-mark { color: #d24545; font-size: 11px; }
.pitch-dot-size input[type="range"] {
width: 90px;
margin: 0;
cursor: pointer;
}
.pitch-dot-size-val {
min-width: 26px;
font-variant-numeric: tabular-nums;
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
border: 2px solid var(--bg-elev);
transition: transform 0.1s;
}
input[type=range]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--accent-color);
border: 2px solid var(--bg-elev);
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
/* Formant control rows */
.formant-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.formant-label {
font-weight: 700;
font-size: 0.9rem;
color: var(--text-primary);
flex-shrink: 0;
}
.formant-val {
background: var(--bg-soft);
border-radius: var(--radius-sm);
padding: 2px 8px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.8rem;
color: var(--text-primary);
font-weight: 600;
flex: 0 0 auto;
}
.formant-val > span[id$="-val"] {
color: var(--text-primary);
}
.formant-row .toggle-btn {
margin-left: auto;
}
.q-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 6px;
font-size: 0.78rem;
color: var(--text-muted);
}
.q-hint {
flex-basis: 100%;
font-size: 0.68rem;
color: var(--text-muted);
line-height: 1.3;
margin-left: 22px;
}
.q-label {
font-weight: 600;
color: var(--text-secondary);
min-width: 14px;
}
.q-val {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 600;
color: var(--text-secondary);
min-width: 32px;
text-align: right;
font-size: 0.78rem;
}
.q-row input[type=range] {
flex: 1;
margin: 0;
}
.q-row input[type=range]::-webkit-slider-thumb {
height: 12px;
width: 12px;
margin-top: -4px;
background: var(--text-muted);
border: 2px solid var(--bg-elev);
}
.q-row input[type=range]::-moz-range-thumb {
height: 12px;
width: 12px;
background: var(--text-muted);
border: 2px solid var(--bg-elev);
}
/* Toggle Switch (Radio Buttons) */
.toggle-switch {
display: flex;
background: var(--bg-soft);
border-radius: var(--radius-pill);
overflow: hidden;
border: 1px solid var(--glass-border);
padding: 2px;
gap: 2px;
}
.toggle-switch input[type="radio"] {
display: none;
}
.toggle-switch label {
flex: 1;
text-align: center;
padding: 6px 12px;
cursor: pointer;
transition: all 0.15s;
font-size: 0.85rem;
margin: 0 !important;
border-radius: var(--radius-pill);
color: var(--text-secondary);
}
.toggle-switch input[type="radio"]:checked+label {
background: var(--text-primary);
color: #fff;
font-weight: 600;
}
.hint {
font-size: var(--fs-hint);
color: var(--text-muted);
margin-top: 4px;
line-height: 1.3;
}
.notes-display {
text-align: right;
font-size: 0.85rem;
color: var(--text-secondary);
}
/* Aerodynamic Status Panel */
.status-panel {
margin-top: 16px;
padding: 12px 14px;
background: var(--bg-soft);
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
}
/* Subsection grouping (e.g. Phonation = P + R + Status) — wraps content in a grey box */
.subsection {
margin-top: 20px;
padding: 14px;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
}
.subsection-title {
font-size: var(--fs-hint);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 12px;
padding: 0;
border: none;
}
.subsection > .control-group {
margin-bottom: 16px;
}
.subsection > .control-group:last-of-type {
margin-bottom: 0;
}
/* status-panel inside a subsection: drop its own box, use a top divider instead */
.subsection > .status-panel {
margin-top: 14px;
padding: 12px 0 0;
background: transparent;
border: none;
border-top: 1px solid var(--glass-border);
border-radius: 0;
}
/* Phonation collapsible — mirror Vibrato panel pattern */
.phonation-subsection {
margin-top: 20px;
}
.phonation-subsection .collapsible-body > .control-group {
margin-bottom: 16px;
}
.phonation-subsection .collapsible-body > .control-group:last-of-type {
margin-bottom: 12px;
}
.phonation-subsection .collapsible-body > .status-panel {
margin: 12px 0 0;
padding: 12px 0 0;
background: transparent;
border: none;
border-top: 1px solid var(--glass-border);
border-radius: 0;
}
.phonation-summary-badge {
margin-left: auto;
}
.status-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 0.95rem;
}
.status-row:last-child {
margin-bottom: 0;
}
.status-row .mono {
font-family: monospace;
color: var(--text-primary);
font-size: 1.1em;
}
.status-badge {
padding: 3px 10px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0;
background: var(--bg-soft);
color: var(--text-secondary);
border: 1px solid var(--glass-border);
}
.status-badge.flow {
background: var(--accent-soft);
color: var(--accent-hover);
border-color: rgba(46, 163, 155, 0.3);
}
.status-badge.pressed {
background: rgba(210, 69, 69, 0.08);
color: #B83838;
border-color: rgba(210, 69, 69, 0.3);
}
.status-badge.breathy {
background: rgba(59, 130, 246, 0.08);
color: #2563EB;
border-color: rgba(59, 130, 246, 0.3);
}
.status-badge.yell {
background: rgba(230, 139, 48, 0.1);
color: #B86F2A;
border-color: rgba(230, 139, 48, 0.3);
}
.status-badge.whoop {
background: rgba(139, 92, 246, 0.08);
color: #6D28D9;
border-color: rgba(139, 92, 246, 0.3);
}
.status-badge.neutral {
background: var(--bg-soft);
color: var(--text-secondary);
border-color: var(--glass-border);
}
.status-badge.open {
background: var(--accent-soft);
color: var(--accent-hover);
border-color: rgba(46, 163, 155, 0.3);
}
.status-badge.close {
background: rgba(139, 92, 246, 0.08);
color: #6D28D9;
border-color: rgba(139, 92, 246, 0.3);
}
.tooltip {
position: relative;
display: inline-block;
margin-left: 4px;
font-size: 0.7rem;
color: var(--text-muted);
cursor: help;
background: transparent;
border-radius: 50%;
width: 14px;
height: 14px;
line-height: 13px;
text-align: center;
border: 1px solid var(--glass-border);
vertical-align: middle;
}
.tooltip:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
/* Custom Instant Tooltip */
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 280px;
background: #2C2C2C;
color: #FFFFFF;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 0.8rem;
line-height: 1.5;
text-align: left;
white-space: pre-wrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 1000;
}
.tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #2C2C2C transparent transparent transparent;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 1000;
}
.tooltip:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-2px);
}
.tooltip:hover::before {
opacity: 1;
}
/* Header tooltips sit near the top of the viewport (spectrum canvas-header
strategy strip + Harmonic EQ overlay), so the default upward bubble gets
clipped off the top edge. Flip these to drop downward instead. */
.strategy-strip .tooltip::after,
.harmonic-eq-panel .tooltip::after {
bottom: auto;
top: 150%;
}
.strategy-strip .tooltip:hover::after,
.harmonic-eq-panel .tooltip:hover::after {
transform: translateX(-50%) translateY(2px);
}
.strategy-strip .tooltip::before,
.harmonic-eq-panel .tooltip::before {
bottom: auto;
top: 100%;
border-color: transparent transparent #2C2C2C transparent;
}
/* Harmonic EQ lives at the spectrum's top-right corner, so a centered bubble
would overflow the right edge — anchor it to the icon's right instead. */
.harmonic-eq-panel .tooltip::after {
left: auto;
right: 0;
transform: none;
}
.harmonic-eq-panel .tooltip:hover::after {
transform: translateY(2px);
}
/* Acoustic Strategy Tracker */
.acoustic-tracker {
margin-top: 15px;
padding: 15px;
border-radius: var(--radius-md);
position: relative;
}
.tracker-title {
font-size: 0.85rem;
color: var(--text-primary);
margin-bottom: 0;
text-transform: none;
letter-spacing: 0;
border-bottom: none;
padding-bottom: 0;
font-weight: 700;
}
/* Glottal Waveform */
.glottal-canvas-container {
width: 100%;
height: 120px;
background: var(--canvas-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
overflow: hidden;
margin-bottom: 4px;
}
.glottal-canvas-deriv-container {
height: 100px;
margin-bottom: 8px;
}
.glottal-canvas-container canvas {
width: 100%;
height: 100%;
display: block;
}
.glottal-legend {
display: flex;
justify-content: center;
gap: 16px;
font-size: 0.75rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-xs);
font-weight: 600;
letter-spacing: 0.3px;
}
.open-legend {
color: #4A8A4A;
background: rgba(111, 174, 111, 0.12);
border: 1px solid rgba(111, 174, 111, 0.4);
}
.return-legend {
color: #C44545;
background: rgba(229, 91, 91, 0.12);
border: 1px solid rgba(229, 91, 91, 0.4);
}
.closed-legend {
color: var(--accent-hover);
background: rgba(33, 150, 243, 0.12);
border: 1px solid rgba(33, 150, 243, 0.4);
}
/* Guide Toggle Button — matches [?] tooltip style */
.guide-toggle {
display: inline-block;
margin-left: 2px;
font-size: 0.75rem;
color: var(--text-secondary);
cursor: pointer;
background: none;
border-radius: var(--radius-xs);
padding: 0;
border: none;
vertical-align: middle;
transition: color 0.2s;
}
.guide-toggle:hover {
color: var(--text-primary);
}
.guide-toggle.active {
color: var(--accent-color);
}
/* Guide Panel */
.lf-guide-panel {
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 14px;
margin-bottom: 10px;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.guide-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
margin-bottom: 12px;
}
.guide-table th {
text-align: left;
padding: 6px 8px;
color: var(--text-secondary);
border-bottom: 1px solid var(--glass-border);
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.guide-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--glass-border);
color: var(--text-primary);
vertical-align: top;
line-height: 1.5;
}
.guide-table td:first-child {
color: var(--text-primary);
font-weight: 600;
white-space: nowrap;
}
.guide-table td small {
color: var(--text-muted);
font-size: 0.65rem;
}
.guide-subtitle {
font-size: 0.75rem;
color: var(--text-secondary);
margin-bottom: 8px;
font-weight: 600;
}
.rd-scale {
display: flex;
gap: 3px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.rd-level {
flex: 1;
padding: 6px 4px;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.rd-level small {
font-weight: 400;
font-size: 0.6rem;
opacity: 0.75;
}
.rd-level.pressed-strong {
background: rgba(229, 91, 91, 0.18);
border: 1px solid rgba(229, 91, 91, 0.45);
}
.rd-level.pressed-mild {
background: rgba(240, 165, 85, 0.18);
border: 1px solid rgba(240, 165, 85, 0.4);
}
.rd-level.modal {
background: rgba(111, 174, 111, 0.2);
border: 1px solid rgba(111, 174, 111, 0.5);
}
.rd-level.breathy-mild {
background: rgba(33, 150, 243, 0.15);
border: 1px solid rgba(33, 150, 243, 0.4);
}
.rd-level.breathy-strong {
background: rgba(184, 85, 240, 0.15);
border: 1px solid rgba(184, 85, 240, 0.4);
}
.ref-tooltip {
font-size: 0.7rem;
color: var(--text-muted);
cursor: help;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
padding: 2px 10px;
white-space: nowrap;
}
.ref-tooltip:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
.ref-tooltip::after {
max-width: 460px;
left: auto;
right: 0;
transform: none;
white-space: pre-line;
}
.ref-tooltip:hover::after {
transform: translateY(-2px);
}
.glottal-params {
display: flex;
justify-content: space-around;
font-size: 0.8rem;
color: var(--text-secondary);
}
.glottal-params .mono {
color: var(--accent-hover);
font-family: monospace;
font-size: 0.85rem;
}
.event-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 1px;
opacity: 0;
pointer-events: none;
}
.event-flash.flash-anim {
animation: flashOut 1.5s ease-out forwards;
}
.event-flash.hidden {
display: none;
}
@keyframes flashOut {
0% {
opacity: 1;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1);
display: none;
}
}
/* Buttons */
.btn {
padding: 7px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--glass-border);
background: var(--bg-elev);
color: var(--text-primary);
font-family: inherit;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1.4;
}
.btn:hover {
border-color: var(--accent-color);
color: var(--accent-color);
background: var(--accent-soft);
}
.btn.primary {
background-color: var(--accent-color);
color: #fff;
border-color: var(--accent-color);
font-size: 0.9rem;
font-weight: 700;
padding: 8px 20px;
}
.btn.primary:hover {
background-color: var(--accent-hover);
border-color: var(--accent-hover);
color: #fff;
}
.btn.primary.playing {
background-color: var(--vivid-orange);
border-color: var(--vivid-orange);
color: #fff;
}
.btn.primary.playing:hover {
background-color: #C97520;
border-color: #C97520;
color: #fff;
}
.btn.mic-active {
background-color: var(--vivid-red);
color: #fff;
border-color: var(--vivid-red);
}
/* Mic toggle (PC) — pill with icon + text, matches Learn / Play family */
.btn-mic-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1;
font-weight: 600;
}
.btn-mic-icon svg {
flex-shrink: 0;
opacity: 0.9;
}
.btn-mic-icon:focus {
outline: none;
}
.btn-mic-icon:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 1px;
}
.btn.mic-active:hover {
background-color: #B83838;
border-color: #B83838;
color: #fff;
}
@keyframes pulseMic {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.btn.mic-paused {
background-color: var(--vivid-red);
color: #fff;
border-color: var(--vivid-red);
opacity: 0.7;
}
.vowel-presets,
.preset-group {
display: flex;
flex-wrap: wrap;
/* Added to handle 5 vowels + 2 timbres gracefully */
gap: 10px;
align-items: center;
margin-top: 20px;
font-size: 0.9rem;
}
.preset-btn {
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-primary);
padding: 5px 12px;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.15s;
}
.preset-btn:hover {
border-color: var(--accent-color);
color: var(--accent-color);
background: var(--accent-soft);
}
/* Canvas Header — 2-row compact layout */
.canvas-header {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.canvas-header-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
min-width: 0;
}
.canvas-header-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.canvas-header h2 {
margin-bottom: 0;
border: none;
white-space: nowrap;
font-size: 0.95rem;
cursor: help;
color: var(--text-primary);
font-weight: 700;
padding-bottom: 0;
}
.canvas-title-block {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
min-width: 0;
}
.canvas-primary-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.btn.btn-icon {
padding: 6px 10px !important;
font-size: 1rem !important;
line-height: 1;
}
.control-divider {
width: 1px;
align-self: stretch;
background: var(--glass-border);
margin: 0 4px;
}
/* Mic-controls: hidden when mic is OFF */
.mic-controls {
display: none;
align-items: center;
gap: 8px;
}
/* mic-toggle is now in canvas-primary-actions (sibling of mic-controls' grandparent),
so query at the canvas-header level which is the common ancestor */
.canvas-header:has(#mic-toggle.mic-active) .mic-controls {
display: inline-flex;
}
.strategy-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-size: 0.85rem;
}
.strategy-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
white-space: nowrap;
}
.strategy-item .strategy-label {
color: var(--text-muted);
font-weight: 500;
font-size: 0.8rem;
}
.strategy-strip .status-badge {
font-size: 0.9rem;
padding: 6px 14px;
font-weight: 700;
border-radius: var(--radius-sm);
min-width: 80px;
text-align: center;
display: inline-block;
line-height: 1.3;
}
.strategy-strip .toggle-checkbox {
cursor: pointer;
user-select: none;
}
.strategy-strip .label-text {
font-size: 0.8rem;
color: var(--text-secondary);
}
.canvas-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.canvas-control-group {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
}
.canvas-control-group label {
font-size: 0.8rem;
color: var(--text-secondary);
white-space: nowrap;
margin: 0;
font-weight: 500;
}
.canvas-control-group input[type="range"] {
width: 80px;
margin: 0;
height: 4px;
}
.control-val {
font-size: 0.75rem;
color: var(--text-primary);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
background: transparent;
padding: 0;
border-radius: var(--radius-xs);
min-width: 36px;
text-align: right;
white-space: nowrap;
font-weight: 600;
}
.canvas-control-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.btn-sm {
padding: 6px 12px !important;
font-size: 0.8rem !important;
border-radius: var(--radius-sm) !important;
}
.btn.slope-line-active,
.inline-toggle-btn.slope-line-active,
.btn.log-active,
.axis-scale-btn.log-active,
.inline-toggle-btn.roughness-active {
background-color: var(--accent-color);
color: #fff;
border-color: var(--accent-color);
}
/* Roughness educational legend below spectrum */
.roughness-legend {
margin-top: 12px;
padding: 12px 14px;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
font-size: 0.78rem;
color: var(--text-primary);
}
.rl-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--glass-border);
}
.rl-header-label {
font-size: 0.78rem;
color: var(--text-secondary);
}
.rl-f0 {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 700;
font-size: 0.92rem;
color: var(--accent-color);
}
.rl-erb-block {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.75rem;
color: var(--text-primary);
background: rgba(33, 150, 243, 0.08);
border: 1px solid rgba(33, 150, 243, 0.25);
padding: 3px 8px;
border-radius: var(--radius-sm);
line-height: 1.4;
}
.rl-erb-block .rl-erb-key {
color: var(--text-secondary);
margin-right: 4px;
}
.rl-erb-block .rl-erb-val {
font-weight: 700;
}
.rl-erb-block .rl-erb-sep {
color: var(--text-secondary);
margin: 0 8px;
opacity: 0.5;
}
.rl-pitch-mirror {
flex: 0 0 180px;
height: 4px;
margin: 0 0 0 14px; /* nudged right */
}
.rl-line-break {
flex-basis: 100%;
height: 0;
}
.rl-term {
font-size: 0.72rem;
line-height: 1.4;
padding: 3px 8px;
border-radius: var(--radius-sm);
color: var(--text-primary);
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--glass-border);
}
.rl-term strong {
font-weight: 700;
}
.rl-term-roughness strong { color: #d97d1f; }
.rl-term-resolution strong { color: #2e9c64; }
.rl-header-hint {
font-size: 0.7rem;
color: var(--text-secondary);
margin-left: auto;
white-space: nowrap;
}
.rl-zones {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.rl-zone {
padding: 8px 10px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.5);
border-left: 3px solid transparent;
line-height: 1.45;
}
.rl-zone-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.rl-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.rl-name {
font-weight: 700;
font-size: 0.82rem;
}
.rl-cond {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.7rem;
color: var(--text-secondary);
background: rgba(0,0,0,0.04);
padding: 3px 6px;
border-radius: var(--radius-xs);
margin-bottom: 4px;
line-height: 1.4;
}
.rl-range {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 4px;
}
.rl-desc {
font-size: 0.74rem;
color: var(--text-secondary);
}
.rl-empty-note {
margin-top: 6px;
padding: 6px 8px;
background: rgba(217, 125, 31, 0.08);
border: 1px dashed rgba(217, 125, 31, 0.4);
border-radius: var(--radius-sm);
font-size: 0.7rem;
color: #8b5a1f;
line-height: 1.5;
}
.rl-pure { border-left-color: rgba(33, 150, 243, 0.95); }
.rl-pure .rl-dot, .rl-pure .rl-name { color: #2196f3; }
.rl-pure .rl-dot { background: #2196f3; }
.rl-rough-res { border-left-color: rgba(217, 125, 31, 0.95); }
.rl-rough-res .rl-dot, .rl-rough-res .rl-name { color: #d97d1f; }
.rl-rough-res .rl-dot { background: #d97d1f; }
.rl-rough-unr { border-left-color: rgba(210, 69, 69, 0.95); }
.rl-rough-unr .rl-dot, .rl-rough-unr .rl-name { color: #d24545; }
.rl-rough-unr .rl-dot { background: #d24545; }
.rl-ceiling { border-left-color: rgba(120, 120, 120, 0.95); }
.rl-ceiling .rl-dot, .rl-ceiling .rl-name { color: #888; }
.rl-ceiling .rl-dot { background: #888; }
.rl-interval-table {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--glass-border);
}
.rl-interval-title {
font-size: 0.74rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}
.rl-interval-grid {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 4px;
}
.rl-cell {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 2px;
background: rgba(0,0,0,0.03);
border-radius: var(--radius-xs);
font-size: 0.68rem;
line-height: 1.3;
}
.rl-cell-edge {
background: rgba(217, 125, 31, 0.12);
border: 1px solid rgba(217, 125, 31, 0.35);
}
.rl-cell-h {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--text-secondary);
font-size: 0.62rem;
}
.rl-cell-c {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 700;
color: var(--text-primary);
font-size: 0.78rem;
}
.rl-cell-n {
font-size: 0.62rem;
color: var(--text-secondary);
}
@media (max-width: 900px) {
.rl-interval-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* "詳細解説" collapsible */
.rl-deep {
margin-top: 12px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.rl-deep-summary {
list-style: none;
cursor: pointer;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.03);
font-size: 0.78rem;
font-weight: 700;
color: var(--text-primary);
user-select: none;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.15s;
}
.rl-deep-summary::-webkit-details-marker { display: none; }
.rl-deep-summary::before {
content: "▸";
font-size: 0.7rem;
color: var(--text-secondary);
transition: transform 0.2s;
display: inline-block;
}
.rl-deep[open] > .rl-deep-summary::before { transform: rotate(90deg); }
.rl-deep-summary:hover { background: rgba(0, 0, 0, 0.05); }
.rl-deep-body {
padding: 10px 14px 12px;
background: rgba(255, 255, 255, 0.4);
border-top: 1px solid var(--glass-border);
}
.rl-deep-section + .rl-deep-section {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--glass-border);
}
.rl-deep-h {
margin: 0 0 6px 0;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-primary);
}
.rl-deep-list {
margin: 0 0 6px 0;
padding-left: 18px;
font-size: 0.74rem;
color: var(--text-primary);
line-height: 1.55;
}
.rl-deep-list li { margin-bottom: 4px; }
.rl-deep-list li:last-child { margin-bottom: 0; }
.rl-deep-p {
margin: 0 0 5px 0;
font-size: 0.74rem;
color: var(--text-primary);
line-height: 1.55;
}
.rl-deep-p:last-child { margin-bottom: 0; }
.rl-deep-meta {
color: var(--text-secondary);
font-size: 0.7rem;
}
.rl-deep-body code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
background: rgba(0, 0, 0, 0.05);
padding: 1px 6px;
border-radius: var(--radius-xs);
font-size: 0.78rem;
}
@media (max-width: 900px) {
.rl-zones { grid-template-columns: repeat(2, 1fr); }
}
/* Slope: small inner pill inside its canvas-control-group */
#slope-line-toggle {
padding: 4px 14px;
font-size: 0.78rem;
line-height: 1.4;
min-width: 60px;
text-align: center;
}
/* Rough: standalone pill sized to match Volume/Slope group outer height */
#roughness-toggle {
padding: 8px 22px;
font-size: 0.78rem;
line-height: 1.4;
min-width: 76px;
text-align: center;
}
/* Rough wrapper: drop the outer pill so the button itself is the single visible layer */
.canvas-control-group:has(#roughness-toggle) {
background: transparent;
border-color: transparent;
padding: 0;
}
/* Inline toggle inside canvas-control-group */
.inline-toggle-btn {
background: transparent;
border: 1px solid var(--glass-border);
color: var(--text-secondary);
padding: 2px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.72rem;
font-family: inherit;
font-weight: 600;
transition: all 0.15s;
margin-left: 4px;
}
.inline-toggle-btn:hover {
border-color: var(--accent-color);
color: var(--accent-color);
background: var(--accent-soft);
}
/* Log toggle floating on canvas, near X-axis */
.axis-scale-btn {
position: absolute;
bottom: 22px;
right: 8px;
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-secondary);
padding: 2px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.7rem;
font-family: inherit;
font-weight: 600;
line-height: 1.4;
transition: all 0.15s;
z-index: 2;
}
.axis-scale-btn:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
/* Fullscreen mode for Power Spectrum panel */
.visualizer-panel.is-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
border-radius: 0;
display: flex;
flex-direction: column;
background: var(--bg-color);
padding: 16px 24px;
overflow: hidden;
}
.visualizer-panel.is-fullscreen .canvas-container {
flex: 1;
height: auto;
}
.visualizer-panel.is-fullscreen #spectrum-fullscreen-btn {
background-color: var(--accent-color);
color: #fff;
border-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}
.canvas-container {
position: relative;
width: 100%;
height: 300px;
background: var(--canvas-bg);
border-radius: var(--radius-md);
border: 1px solid var(--glass-border);
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
.axis-labels {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
pointer-events: none;
}
.axis-labels span {
font-size: 0.75rem;
color: var(--canvas-text-muted);
font-family: monospace;
}
/* Collapsible (details/summary) — outer box matches .status-panel */
.collapsible {
margin-top: 12px;
padding: 0;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
transition: border-color 0.15s;
}
.collapsible:hover {
border-color: var(--accent-color);
}
.collapsible > .collapsible-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-sm);
user-select: none;
}
.collapsible > .collapsible-summary::-webkit-details-marker {
display: none;
}
.collapsible > .collapsible-summary::after {
content: "▾";
color: var(--accent-color);
font-size: 0.9rem;
font-weight: 700;
transition: transform 0.2s ease;
display: inline-block;
flex: 0 0 auto;
line-height: 1;
}
.collapsible[open] > .collapsible-summary::after {
transform: rotate(180deg);
}
.collapsible[open] > .collapsible-summary {
border-bottom: 1px solid var(--glass-border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.collapsible > .collapsible-summary .tracker-title {
margin: 0;
flex: 1;
min-width: 0;
}
.collapsible-body {
padding: 12px 14px;
}
/* Vibrato panel */
.vibrato-panel {
margin-top: 12px;
}
.vibrato-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.vibrato-row {
display: grid;
grid-template-columns: 110px 1fr 70px;
grid-template-rows: auto auto;
align-items: center;
column-gap: 10px;
row-gap: 2px;
font-size: 0.82rem;
}
.vibrato-hint {
grid-column: 1 / -1;
font-size: var(--fs-hint);
color: var(--text-muted);
line-height: 1.3;
margin-left: 2px;
margin-bottom: 4px;
display: block;
}
.vibrato-row label {
color: var(--text-secondary);
font-weight: 500;
}
.vibrato-row input[type=range] {
margin: 0;
}
.vibrato-val {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.78rem;
color: var(--text-primary);
text-align: right;
font-weight: 600;
}
.vibrato-wave-select {
grid-column: 2 / span 2;
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-primary);
padding: 4px 28px 4px 12px;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 0.8rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* Vibrato ON/OFF pill in summary */
.vibrato-enable-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.vibrato-enable-toggle input[type="checkbox"] {
display: none;
}
.vibrato-enable-pill {
display: inline-block;
padding: 3px 12px;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
transition: all 0.15s;
letter-spacing: 0.3px;
}
.vibrato-enable-toggle.on .vibrato-enable-pill,
.vibrato-enable-toggle:has(input:checked) .vibrato-enable-pill {
background: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
}
/* Filter formant 2-col grid */
.formant-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 14px;
row-gap: 12px;
}
.formant-grid .formant-control {
margin-bottom: 0;
padding: 12px 14px;
background: var(--bg-elev);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--glass-border);
border-radius: var(--radius-sm);
}
/* Per-formant left border color */
.formant-grid > .formant-control:nth-of-type(1) { border-left-color: var(--vivid-red); }
.formant-grid > .formant-control:nth-of-type(2) { border-left-color: var(--vivid-blue); }
.formant-grid > .formant-control:nth-of-type(3) { border-left-color: var(--vivid-purple); }
.formant-grid > .formant-control:nth-of-type(4) { border-left-color: var(--vivid-orange); }
.formant-grid > .formant-control:nth-of-type(5) { border-left-color: var(--vivid-green); }
/* Mobile-mirroring clean look: hide verbose hints inside formant cards */
.formant-grid .formant-control .hint,
.formant-grid .formant-control .q-hint {
display: none;
}
/* Tighten slider + Q-row spacing inside formant cards */
.formant-grid .formant-control input[type="range"] {
margin: 6px 0 0;
}
.formant-grid .formant-control .q-row {
margin-top: 6px;
}
/* Formant header (label + ON/OFF toggle) */
.formant-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.toggle-btn {
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-muted);
font-family: inherit;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.15s;
letter-spacing: 0;
}
.toggle-btn:hover {
border-color: var(--text-secondary);
color: var(--text-primary);
}
.toggle-btn.active {
background: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
}
/* Voice type select */
.voice-type-select {
background: var(--bg-elev);
border: 1px solid var(--glass-border);
color: var(--text-primary);
padding: 4px 28px 4px 12px;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 0.8rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.panel-header-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 14px;
}
.panel-header-row label {
font-size: 0.85rem;
color: var(--text-secondary);
}
/* Toggle-checkbox (Auto-Routing legacy + similar) */
.toggle-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--text-secondary);
}
.toggle-checkbox input[type="checkbox"] {
cursor: pointer;
accent-color: var(--accent-color);
}
/* Responsive */
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-areas:
"visualizer"
"source"
"filter";
}
.canvas-header-top,
.canvas-header-bottom {
flex-direction: column;
align-items: stretch;
}
.canvas-primary-actions {
justify-content: flex-end;
}
.canvas-control-group input[type="range"] {
width: 60px;
}
.control-divider {
display: none;
}
header h1 {
font-size: 1.4rem;
}
.visualizer-panel {
position: static;
}
.formant-grid {
grid-template-columns: 1fr;
}
}
/* Book Reference Footer */
.book-ref {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 6px 20px;
font-size: 0.7rem;
color: var(--text-muted);
background: var(--bg-elev);
border-top: 1px solid var(--glass-border);
z-index: 10;
}
.book-ref a {
color: var(--text-secondary);
text-decoration: underline;
text-decoration-color: var(--glass-border-strong);
transition: color 0.2s;
}
.book-ref a:hover {
color: var(--text-primary);
}
/* Mic Formant Method Select (Inconspicuous) */
.mic-method-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 10px;
padding: 0 4px;
margin-left: -4px;
cursor: pointer;
outline: none;
}
.mic-method-select option {
background: #fff;
color: var(--text-primary);
}
/* Mic device picker — full label is shown in the dropdown menu; keep the */
/* selected display narrow so the header bar stays on one line */
.mic-device-select {
max-width: 90px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* =================================================================
Learn Drawer (PC) — right-side slide-in lesson panel
Coexists with the existing inline #roughness-legend (brief ref)
================================================================= */
/* Learn button — pill matching Mic / Play family */
.btn-learn {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.btn-learn svg {
flex-shrink: 0;
opacity: 0.9;
}
/* Canvas primary actions — unify Learn / Mic / Play to the same
pill geometry, like .preset-btn / status YELL family. */
.canvas-primary-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.canvas-primary-actions .btn {
height: 32px;
padding: 0 14px;
border-radius: var(--radius-pill);
font-size: 0.85rem;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.canvas-primary-actions .btn.primary {
padding: 0 18px;
font-weight: 700;
font-size: 0.85rem;
}
.learn-backdrop {
position: fixed;
inset: 0;
background: rgba(28, 24, 16, 0.32);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 800;
}
.learn-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.learn-drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 48vw;
min-width: 480px;
max-width: 720px;
background: var(--bg-elev, #FCFAF3);
border-left: 1px solid var(--glass-border);
box-shadow: -12px 0 36px rgba(28, 24, 16, 0.18);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
z-index: 900;
display: flex;
flex-direction: column;
overflow: hidden;
}
.learn-drawer.open { transform: translateX(0); }
.learn-drawer-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--glass-border);
background: var(--bg-color);
}
.learn-drawer-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
}
.learn-drawer-close {
background: transparent;
border: 1px solid var(--glass-border);
color: var(--text-secondary);
border-radius: var(--radius-md);
padding: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.learn-drawer-close:hover {
background: var(--accent-soft);
color: var(--accent-color);
border-color: var(--accent-color);
}
.learn-drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px 22px 32px;
-webkit-overflow-scrolling: touch;
}
/* Lesson accordion */
.lesson {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
margin-bottom: 14px;
overflow: hidden;
}
.lesson-summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
user-select: none;
}
.lesson-summary::-webkit-details-marker { display: none; }
.lesson-chapter {
flex-shrink: 0;
font-size: 0.74rem;
font-weight: 700;
padding: 3px 10px;
background: var(--accent-soft);
color: var(--accent-color);
border-radius: var(--radius-pill);
letter-spacing: 0.04em;
}
.lesson-title {
flex: 1;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.lesson-chevron {
color: var(--text-muted);
font-size: 1.1rem;
transition: transform 0.18s;
}
.lesson[open] .lesson-chevron { transform: rotate(180deg); }
.lesson-body {
padding: 4px 18px 20px;
border-top: 1px solid var(--glass-border);
}
/* Story sections */
.story-sec {
padding: 14px 0 4px;
border-top: 1px dashed var(--glass-border);
}
.story-sec:first-child { padding-top: 8px; border-top: none; }
.sec-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 9px;
background: rgba(0, 0, 0, 0.06);
color: var(--text-secondary);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.sec-tag.tag-rough { background: rgba(217, 125, 31, 0.15); color: #b35e0f; }
.sec-tag.tag-res { background: rgba(46, 156, 100, 0.15); color: #1f7549; }
.sec-tag.tag-interact { background: rgba(46, 163, 155, 0.15); color: #1d7972; }
.sec-title {
margin: 4px 0 8px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.45;
}
.sec-body {
margin: 0 0 10px;
font-size: 0.92rem;
line-height: 1.75;
color: var(--text-primary);
}
.sec-body strong { font-weight: 700; }
/* Inline tag chips */
.tag {
display: inline-block;
padding: 1px 7px;
border-radius: var(--radius-xs);
font-size: 0.8rem;
font-weight: 600;
}
.tag-rough { background: rgba(217, 125, 31, 0.15); color: #b35e0f; }
.tag-res { background: rgba(46, 156, 100, 0.15); color: #1f7549; }
/* Callouts */
.sec-callout {
margin: 10px 0;
padding: 10px 14px;
background: var(--accent-soft);
border-left: 3px solid var(--accent-color);
border-radius: var(--radius-sm);
font-size: 0.88rem;
line-height: 1.65;
color: var(--text-primary);
}
.callout-label {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
padding: 1px 7px;
margin-right: 6px;
background: var(--accent-color);
color: #fff;
border-radius: var(--radius-xs);
}
.sec-callout-warn { background: rgba(217, 125, 31, 0.1); border-left-color: #d97d1f; }
.sec-callout-warn .callout-label { background: #d97d1f; }
.sec-callout-key { background: rgba(46, 163, 155, 0.12); }
/* Formula box */
.formula-box {
margin: 8px 0 10px;
padding: 10px 14px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
text-align: center;
}
.formula-label {
display: block;
font-size: 0.74rem;
color: var(--text-secondary);
margin-bottom: 4px;
}
.formula-box code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.98rem;
font-weight: 600;
color: var(--text-primary);
}
.formula-condition { background: rgba(217, 125, 31, 0.08); border-color: rgba(217, 125, 31, 0.3); }
/* Lists */
.bullet, .ordered { margin: 6px 0 12px; padding-left: 24px; }
.bullet li, .ordered li { margin-bottom: 6px; font-size: 0.9rem; line-height: 1.7; color: var(--text-primary); }
/* SVG figures */
.viz-figure {
margin: 12px 0;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
}
.viz-svg { width: 100%; height: auto; display: block; }
.viz-figure figcaption {
margin-top: 6px;
font-size: 0.78rem;
line-height: 1.55;
color: var(--text-secondary);
text-align: center;
}
/* Interval grid */
.interval-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin: 10px 0;
}
.ig-cell {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px;
background: rgba(0, 0, 0, 0.04);
border-radius: var(--radius-sm);
font-size: 0.76rem;
line-height: 1.35;
}
.ig-h { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; color: var(--text-primary); }
.ig-c { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text-secondary); margin-top: 2px; }
.ig-n { color: var(--text-muted); font-size: 0.68rem; margin-top: 2px; }
.ig-edge { background: rgba(217, 125, 31, 0.15); border: 1px solid rgba(217, 125, 31, 0.35); }
/* Compare table (full lesson version) */
.lesson-body .compare-table {
width: 100%;
margin: 8px 0 10px;
border-collapse: separate;
border-spacing: 0;
font-size: 0.86rem;
}
.lesson-body .compare-table th, .lesson-body .compare-table td {
padding: 8px 10px;
text-align: left;
vertical-align: top;
background: var(--bg-soft, rgba(0,0,0,0.02));
border-bottom: 1px solid var(--glass-border);
}
.lesson-body .compare-table thead th { background: var(--bg-elev); font-weight: 700; }
.lesson-body .compare-table .th-rough { color: #b35e0f; background: rgba(217, 125, 31, 0.1); }
.lesson-body .compare-table .th-res { color: #1f7549; background: rgba(46, 156, 100, 0.1); }
.lesson-body .compare-table .cmp-row-label { font-weight: 700; color: var(--text-secondary); font-size: 0.8rem; width: 22%; }
/* Pitch mirror row (Lesson 1 §7) */
.story-sec-interact {
background: rgba(46, 163, 155, 0.04);
border-radius: var(--radius-md);
padding: 14px 14px 8px;
border-top: none;
}
.story-sec-interact + .story-sec { border-top: 1px dashed var(--glass-border); }
.learn-sync-note { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
.learn-pitch-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.learn-pitch-val {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.learn-pitch-note { font-size: 0.82rem; color: var(--text-secondary); }
.learn-pitch-mirror { width: 100%; display: block; margin: 4px 0 6px; }
.status-hint { font-size: 0.8rem; color: var(--text-secondary); margin: 4px 0 12px; line-height: 1.5; }
/* Harmonic map (vertical list with ) bracket between rows) */
.hm-title { margin: 12px 0 4px; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.hm-sublegend { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 8px; }
.hm-sublegend strong { color: var(--text-primary); font-weight: 600; }
.harmonic-map { display: flex; flex-direction: column; margin-bottom: 8px; }
.hm-row {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
column-gap: 14px;
padding: 9px 14px;
border-radius: var(--radius-sm);
color: #fff;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.hm-row .hm-n { font-size: 1rem; font-weight: 700; }
.hm-row .hm-hz { font-size: 0.88rem; opacity: 0.95; }
.hm-row .hm-zone {
font-size: 0.74rem;
background: rgba(0, 0, 0, 0.22);
padding: 2px 8px;
border-radius: var(--radius-xs);
font-weight: 700;
}
.hm-pure { background: #2196f3; }
.hm-rough-res { background: #d97d1f; }
.hm-rough-unr { background: #d24545; }
.hm-ceiling { background: #888; }
.hm-interval {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 0 16px 0 14px;
height: 30px;
margin: 1px 0;
}
.hm-bracket {
display: inline-block;
width: 9px;
height: 26px;
border: 1.5px solid var(--text-muted);
border-left: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
flex-shrink: 0;
}
.hm-cent {
font-size: 0.84rem;
font-weight: 700;
color: var(--text-primary);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.hm-degree {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-soft, rgba(0,0,0,0.04));
padding: 2px 8px;
border-radius: var(--radius-xs);
border: 1px solid var(--glass-border);
}
.hm-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 12px; }
.hm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hm-swatch { width: 11px; height: 11px; border-radius: var(--radius-xs); display: inline-block; }
.hm-swatch.hm-pure { background: #2196f3; }
.hm-swatch.hm-rough-res { background: #d97d1f; }
.hm-swatch.hm-rough-unr { background: #d24545; }
.hm-swatch.hm-ceiling { background: #888; }
/* Empty-note for rough-res when not applicable */
.learn-empty-note {
margin-top: 8px;
padding: 8px 10px;
background: rgba(217, 125, 31, 0.1);
border: 1px dashed rgba(217, 125, 31, 0.4);
border-radius: var(--radius-sm);
font-size: 0.78rem;
color: #8b5a1f;
line-height: 1.55;
}
/* Rd gradient bar */
.rd-gradient-bar {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin: 10px 0;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--glass-border);
}
.rdg-segment {
padding: 10px 4px;
text-align: center;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
color: #fff;
}
.rdg-segment span { display: block; font-size: 0.68rem; font-weight: 500; margin-top: 2px; opacity: 0.95; }
.rdg-pressed { background: #b71c1c; }
.rdg-pressed-mild { background: #d24545; }
.rdg-modal { background: #2EA39B; }
.rdg-breathy-mild { background: #d97d1f; }
.rdg-breathy { background: #b35e0f; }
/* Story-sec summary card */
.story-sec-summary {
background: rgba(0, 0, 0, 0.03);
border-radius: var(--radius-md);
padding: 14px;
margin: 14px 0 8px;
border-top: none;
}
.story-sec-summary + .story-sec, .story-sec-summary + .references { border-top: none; }
/* References */
.references {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed var(--glass-border);
}
.references-summary {
cursor: pointer;
font-size: 0.84rem;
font-weight: 600;
color: var(--text-secondary);
padding: 6px 0;
user-select: none;
list-style: none;
}
.references-summary::-webkit-details-marker { display: none; }
.references-summary::before { content: "▸ "; }
.references[open] .references-summary::before { content: "▾ "; }
.ref-list { margin: 6px 0 4px; padding-left: 20px; }
.ref-list li { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
/* When drawer is open: prevent body scroll behind */
body.learn-drawer-open { overflow: hidden; }
/* ============================================================
Recordings panel — local-only voice recordings (IndexedDB)
============================================================ */
.recordings-panel {
margin-top: 8px;
padding: 0 14px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
background: var(--bg-elev); /* keep the lighter/white card per preference */
transition: border-color 0.15s;
}
.recordings-panel:hover { border-color: var(--accent-color); }
.recordings-panel[open] { padding-bottom: 10px; }
.recordings-head {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
list-style: none;
user-select: none;
padding: 10px 0;
}
.recordings-head::-webkit-details-marker { display: none; }
.recordings-head::after {
content: "▾";
color: var(--accent-color);
font-size: 0.9rem;
font-weight: 700;
transition: transform 0.2s ease;
flex: 0 0 auto;
line-height: 1;
}
.recordings-panel[open] > .recordings-head::after { transform: rotate(180deg); }
.recordings-panel[open] > .recordings-head {
border-bottom: 1px solid var(--glass-border);
}
.recordings-disclosure { display: none; }
.recordings-title {
font-size: var(--fs-h3);
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0;
text-transform: none;
}
.recordings-meta {
font-size: var(--fs-hint);
color: var(--text-secondary);
opacity: 0.7;
}
.recordings-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 220px;
overflow-y: auto;
}
.recordings-list:empty + .recordings-empty {
display: block;
}
.recordings-empty {
display: none;
font-size: 0.78rem;
color: var(--text-secondary);
opacity: 0.7;
padding: 8px 4px;
text-align: center;
}
.recordings-item {
display: flex;
flex-direction: column; /* single meta row per clip; transport is a fixed bar above the list */
align-items: stretch;
gap: 6px;
padding: 6px 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 0.8rem;
}
.recordings-item:last-child { border-bottom: none; }
.recordings-item.is-playing {
background: rgba(79, 150, 80, 0.12);
border-radius: var(--radius-xs);
padding: 8px 8px;
border: 1px solid rgba(79, 150, 80, 0.25);
border-bottom: 1px solid rgba(79, 150, 80, 0.25);
}
/* Just-saved/imported clip: brief green flash so the record→listen loop is visible */
.recordings-item.is-new {
animation: rec-new-flash 1.8s ease-out;
border-radius: var(--radius-xs);
}
@keyframes rec-new-flash {
0% { background: rgba(79, 150, 80, 0.45); }
100% { background: transparent; }
}
/* Row 1: the clip's meta + actions */
.rec-row {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.rec-time {
flex: 1 1 auto;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.rec-dur {
flex: 0 0 auto;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
opacity: 0.7;
min-width: 42px;
text-align: right;
}
.app-version {
position: fixed;
right: 8px;
bottom: 6px;
font-size: 0.62rem;
color: var(--text-secondary);
opacity: 0.4;
font-variant-numeric: tabular-nums;
pointer-events: none;
z-index: 50;
user-select: none;
}
.rec-btn {
flex: 0 0 auto;
background: transparent;
border: 1px solid var(--glass-border);
color: var(--text-secondary);
border-radius: var(--radius-xs);
padding: 3px 8px;
font-size: 0.74rem;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.rec-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.rec-btn.danger:hover { background: rgba(220, 60, 60, 0.18); color: #ff7676; border-color: rgba(220, 60, 60, 0.4); }
/* Primary play/pause toggle — single-glyph circular button (no width jump) */
.rec-play-btn {
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
line-height: 1;
border-radius: 50%;
border: 1px solid rgba(79, 150, 80, 0.5);
color: #4f9650;
background: rgba(79, 150, 80, 0.08);
}
.rec-play-btn:hover { background: rgba(79, 150, 80, 0.18); color: var(--text-primary); }
.rec-play-btn.is-playing {
background: #4f9650;
color: #fff;
border-color: #4f9650;
}
/* Record button (Rec) — red dot accent when recording */
#mic-record.is-recording {
color: #ff5252;
border-color: rgba(255, 82, 82, 0.5);
animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
#mic-record-timer {
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
/* Playback controls (compact one-row: time | seek | time | speed) */
/* Fixed transport bar above the recordings list (not moved into each item). */
.playback-controls {
margin: 4px 0 8px;
padding: 6px 9px;
border: 1px solid rgba(79, 150, 80, 0.4);
border-radius: var(--radius-sm);
background: rgba(79, 150, 80, 0.08);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
}
.pb-now {
display: flex;
align-items: center;
gap: 7px;
flex: 0 1 auto;
min-width: 0;
}
.pb-playpause {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: var(--accent-color, #2196F3);
color: #fff;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.pb-playpause:hover { filter: brightness(1.08); }
.pb-now-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.pb-scrub {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 240px;
min-width: 180px;
}
.pb-tools {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.pb-key-cap {
font-size: 0.68rem;
color: var(--text-secondary);
letter-spacing: 0.04em;
}
.pb-time {
font-size: 0.7rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: center;
}
.pb-seek-wrap {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
height: 22px;
}
.pb-seek {
width: 100%;
height: 22px;
cursor: pointer;
position: relative;
z-index: 1;
-webkit-appearance: none;
appearance: none;
background: transparent;
margin: 0;
}
/* Thicker, grabbable track + visible thumb (default range is a 3px hairline) */
.pb-seek::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.16);
}
.pb-seek::-moz-range-track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.16);
}
.pb-seek::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-top: -4px;
border-radius: 50%;
background: #4f9650;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.pb-seek::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #4f9650;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
/* DAW-style waveform behind the seek slider (canvas injected by main.js once
the recording is decoded). The wrap grows and the slider track goes
transparent so the envelope itself becomes the scrub surface. */
.pb-wave {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
border-radius: var(--radius-xs);
background: rgba(10, 14, 12, 0.55);
}
.pb-seek-wrap.has-wave { height: 44px; }
.pb-seek-wrap.has-wave .pb-seek::-webkit-slider-runnable-track { background: transparent; }
.pb-seek-wrap.has-wave .pb-seek::-moz-range-track { background: transparent; }
/* Over the waveform, a full-height solid tint would bury the envelope — use a
faint fill with hard A/B edge lines instead (Logic-style cycle range). */
.pb-seek-wrap.has-wave .pb-region {
height: 100%;
background: rgba(79, 150, 80, 0.14);
border-left: 2px solid #5fd463;
border-right: 2px solid #5fd463;
box-sizing: border-box;
border-radius: 0;
}
/* A–B loop region highlight overlaid on the seek track */
.pb-region {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 6px;
background: rgba(79, 150, 80, 0.28);
border-radius: var(--radius-xs);
pointer-events: none;
z-index: 0;
left: 0;
width: 100%;
display: none; /* shown only while section loop is active */
}
.playback-controls.is-loop .pb-region { display: block; }
/* Draggable A / B handles — labelled, larger hit target */
.pb-handle {
position: absolute;
top: 50%;
width: 16px;
height: 20px;
margin-left: -8px; /* center on its position */
transform: translateY(-50%);
background: #4f9650;
border: 1px solid #fff;
border-radius: var(--radius-xs);
cursor: ew-resize;
z-index: 2;
touch-action: none; /* iOS: prevent scroll-hijack during drag */
display: none; /* shown only while section loop is active */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.playback-controls.is-loop .pb-handle { display: flex; align-items: center; justify-content: center; }
.pb-handle::after {
font-size: 0.6rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.pb-handle.pb-handle-a { left: 0%; }
.pb-handle.pb-handle-b { left: 100%; }
.pb-handle.pb-handle-a::after { content: 'A'; }
.pb-handle.pb-handle-b::after { content: 'B'; }
.pb-rate-select {
flex: 0 0 auto;
background: transparent;
color: var(--text-primary);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
padding: 1px 4px;
font-size: 0.72rem;
cursor: pointer;
}
/* Export menu — positioned via JS (position: fixed) to escape overflow */
.rec-export-menu {
position: fixed;
background: var(--bg-panel, #2b2f36);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
padding: 4px;
z-index: 1000;
display: none;
min-width: 80px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.rec-export-menu.is-open { display: block; }
.rec-export-menu button {
display: block;
width: 100%;
background: transparent;
border: none;
color: var(--text-primary);
text-align: left;
padding: 5px 10px;
font-size: 0.76rem;
cursor: pointer;
border-radius: var(--radius-xs);
font-family: inherit;
}
.rec-export-menu button:hover { background: rgba(127, 127, 127, 0.18); }
.rec-export-menu button:disabled { opacity: 0.4; cursor: wait; }
.pb-loop-btn {
flex: 0 0 auto;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
padding: 1px 6px;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
/* Icon-only transport button (e.g. section-repeat) — center the glyph */
.pb-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
width: 28px;
height: 26px;
}
.pb-icon-btn svg { display: block; }
/* Key shift dropdown: match the rate