: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;
}
/* When Roughness legend is open, drop sticky so the (now tall) panel scrolls normally
with the page — otherwise it stays glued to the viewport top and blocks the f₀ slider below. */
.visualizer-panel:has(#roughness-toggle.roughness-active) {
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;
}
/* ============================================================
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;
}
.vstat-verdict .vstat-val {
font-size: 0.8rem;
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;
}
/* 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;
}
/* 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;
align-items: center;
gap: 8px;
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);
}
.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); }
/* 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) */
.playback-controls {
margin-top: 6px;
padding: 4px 8px;
border: 1px solid rgba(79, 150, 80, 0.35);
border-radius: var(--radius-xs);
background: rgba(79, 150, 80, 0.05);
display: flex;
align-items: center;
gap: 8px;
}
.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: 18px;
}
.pb-seek {
width: 100%;
height: 3px;
cursor: pointer;
position: relative;
z-index: 1;
}
/* 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 */
.pb-handle {
position: absolute;
top: 50%;
width: 10px;
height: 16px;
margin-left: -5px; /* 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: block; }
.pb-handle::after {
content: '';
position: absolute;
left: 50%;
top: 3px;
bottom: 3px;
width: 1px;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.7);
}
.pb-handle.pb-handle-a { left: 0%; }
.pb-handle.pb-handle-b { left: 100%; }
.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;
}
.pb-loop-btn.is-active {
color: #4f9650;
border-color: rgba(79, 150, 80, 0.6);
background: rgba(79, 150, 80, 0.1);
}
/* Import button in recordings head — sits right-aligned, before the ▾ */
.rec-import-btn {
margin-left: auto;
font-size: 0.72rem;
padding: 2px 8px;
}
/* Inline editable label */
.rec-label-input {
flex: 1 1 auto;
min-width: 0;
background: transparent;
color: var(--text-primary);
border: 1px solid transparent;
border-radius: var(--radius-xs);
padding: 2px 5px;
font-size: 0.78rem;
font-family: inherit;
}
.rec-label-input::placeholder { color: var(--text-secondary); opacity: 0.4; font-style: italic; }
.rec-label-input:hover { border-color: var(--glass-border); }
.rec-label-input:focus { outline: none; border-color: rgba(79, 150, 80, 0.6); background: rgba(255, 255, 255, 0.04); }
/* Tighten row to fit new column */
.recordings-item { gap: 6px; }
.rec-time { flex: 0 0 auto; min-width: 110px; font-size: 0.74rem; }
/* ============================================================
Learn drawer — Series section + iframe view
============================================================ */
.learn-drawer-back {
background: transparent;
border: 1px solid var(--glass-border);
color: var(--text-primary);
border-radius: var(--radius-xs);
padding: 4px 10px 4px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.82rem;
margin-right: 12px;
}
.learn-drawer-back:hover { background: rgba(127, 127, 127, 0.12); }
.learn-iframe-view {
flex: 1 1 auto;
min-height: 0;
display: flex;
background: #fff;
}
.learn-iframe {
flex: 1 1 auto;
width: 100%;
height: 100%;
border: none;
background: #fff;
}
.learn-series-section {
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 16px;
background: rgba(0, 164, 175, 0.04);
}
.learn-series-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.learn-series-kicker {
font-size: 0.82rem;
font-weight: 700;
color: #00A4AF;
letter-spacing: 0.04em;
}
.learn-series-hint {
font-size: 0.7rem;
color: var(--text-secondary);
opacity: 0.7;
}
.learn-series-list { display: flex; flex-direction: column; gap: 6px; }
.learn-series-loading, .learn-series-error, .learn-lesson-loading, .learn-lesson-error {
font-size: 0.78rem;
color: var(--text-secondary);
padding: 4px 0;
}
.learn-series-error, .learn-lesson-error { color: #c0524d; }
.learn-series-item {
border: 1px solid rgba(0, 164, 175, 0.25);
border-radius: var(--radius-sm);
padding: 6px 10px;
background: rgba(255, 255, 255, 0.6);
}
.learn-series-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
padding: 2px 0;
}
.learn-series-summary::-webkit-details-marker { display: none; }
.learn-series-chevron {
display: inline-block;
transition: transform 0.15s ease;
color: #00A4AF;
font-size: 0.8rem;
}
.learn-series-item[open] .learn-series-chevron { transform: rotate(90deg); }
.learn-series-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.learn-series-desc {
font-size: 0.78rem;
color: var(--text-secondary);
margin: 6px 0 8px 18px;
line-height: 1.5;
}
.learn-lessons-list {
list-style: none;
margin: 4px 0 4px 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.learn-lessons-list li { margin: 0; padding: 0; }
.learn-lesson-link {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-xs);
padding: 5px 8px;
text-align: left;
cursor: pointer;
font-family: inherit;
color: var(--text-primary);
transition: background 0.1s, border-color 0.1s;
}
.learn-lesson-link:hover {
background: rgba(0, 164, 175, 0.08);
border-color: rgba(0, 164, 175, 0.4);
}
.learn-lesson-level {
flex: 0 0 auto;
font-size: 0.66rem;
font-weight: 700;
color: #00A4AF;
border: 1px solid rgba(0, 164, 175, 0.5);
border-radius: var(--radius-md);
padding: 1px 7px;
white-space: nowrap;
min-width: 38px;
text-align: center;
}
.learn-lesson-title { flex: 1 1 auto; font-size: 0.82rem; }
/* ===== Harmonic EQ (per-harmonic graphic equalizer) ===== */
.he-summary-badge {
margin-left: auto;
}
.he-presets {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.he-preset-btn {
flex: 1 1 auto;
padding: 5px 8px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.12s ease;
}
.he-preset-btn:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
.he-preset-btn:active {
transform: translateY(1px);
}
.he-faders {
display: flex;
justify-content: space-between;
gap: 4px;
padding: 6px 2px 2px;
overflow-x: auto;
}
.he-fader {
flex: 1 1 0;
min-width: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.he-val {
font-size: 0.62rem;
font-family: ui-monospace, monospace;
color: var(--text-muted);
min-height: 0.8em;
line-height: 1;
}
.he-fader .he-slider {
/* Vertical orientation: modern (writing-mode) + WebKit fallback */
-webkit-appearance: slider-vertical;
writing-mode: vertical-lr;
direction: rtl;
width: 8px;
height: 96px;
margin: 0;
padding: 0;
background: transparent;
touch-action: none; /* iOS: prevent scroll-hijack during drag */
cursor: ns-resize;
}
/* Vertical track (overrides the global horizontal range track) */
.he-fader .he-slider::-webkit-slider-runnable-track {
width: 6px;
height: 100%;
background: linear-gradient(to top,
rgba(59, 130, 246, 0.25) 0%,
var(--bg-soft) 50%,
rgba(210, 69, 69, 0.22) 100%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
}
.he-fader .he-slider::-moz-range-track {
width: 6px;
height: 100%;
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
}
.he-fader .he-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 12px;
border-radius: var(--radius-xs);
background: var(--accent-color);
border: 1px solid var(--accent-hover);
cursor: ns-resize;
}
.he-fader .he-slider::-moz-range-thumb {
width: 18px;
height: 12px;
border-radius: var(--radius-xs);
background: var(--accent-color);
border: 1px solid var(--accent-hover);
cursor: ns-resize;
}
.he-label {
font-size: 0.66rem;
font-weight: 600;
color: var(--text-secondary);
line-height: 1;
}
/* ===== Playback EQ (recording-playback graphic equalizer, desktop only) ===== */
.playback-eq {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--glass-border);
}
.pb-eq-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.pb-eq-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-primary);
}
.pb-eq-toggle,
.pb-eq-reset {
padding: 3px 12px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.12s ease;
}
.pb-eq-toggle { margin-left: auto; }
.pb-eq-toggle:hover,
.pb-eq-reset:hover {
color: var(--accent-color);
border-color: var(--accent-color);
background: var(--accent-soft);
}
.pb-eq-toggle.active {
color: #fff;
background: var(--accent-color);
border-color: var(--accent-hover);
}
.pb-eq-toggle:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pb-eq-note {
margin-top: 6px;
}