:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0d1b2a; color: #e7edf3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(680px, 100%); }
.eyebrow, .label { color: #8fc5d2; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 8px; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: -.04em; margin: 0; }
.lead { color: #b9c6d2; line-height: 1.65; margin: 16px 0 28px; }
.panel { background: #14263a; border: 1px solid #27435f; border-radius: 20px; padding: 24px; margin-top: 16px; }
.subtle { color: #c0ceda; line-height: 1.7; }
.status-row { display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.status { font-size: 1.2rem; font-weight: 700; margin: 0; }.status[data-state="running"] { color: #7ee0ad; }.status[data-state="error"] { color: #ff9a9a; }
button { background: #8fc5d2; border: 0; border-radius: 999px; color: #09202a; cursor: pointer; font: inherit; font-weight: 800; padding: 12px 18px; } button:disabled { opacity: .55; }
.meter { background: #07131f; border-radius: 999px; height: 12px; margin: 28px 0 18px; overflow: hidden; }.meter div { background: linear-gradient(90deg, #55c7d8, #7ee0ad); height: 100%; transition: width .08s linear; width: 0; }
.metrics { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 0; }.metrics div { border-left: 2px solid #315a77; padding-left: 10px; }.metrics dt { color: #9fb1c2; font-size: .78rem; }.metrics dd { font-weight: 700; margin: 4px 0 0; } @media (max-width: 540px) { .metrics { grid-template-columns: 1fr; } .status-row { align-items: flex-start; flex-direction: column; } }
.shift-note { color: #b9c6d2; font-size: .9rem; line-height: 1.5; margin: 0 0 16px; }.panel label { display: grid; gap: 8px; font-weight: 700; margin-top: 16px; }.panel output { color: #8fc5d2; font-variant-numeric: tabular-nums; }.panel input { accent-color: #7ee0ad; width: 100%; }
.coaching-tip { background: #10283a; border-left: 3px solid #7ee0ad; color: #e7edf3; font-size: .92rem; line-height: 1.55; margin: 0 0 16px; padding: 12px; }
.word-card { align-items: baseline; background: #091827; border: 1px solid #315a77; border-radius: 14px; display: flex; gap: 12px; justify-content: space-between; margin: 12px 0 18px; padding: 20px; }.word-card strong { font-size: clamp(2rem, 10vw, 3.5rem); letter-spacing: -.04em; }.word-card span { color: #8fc5d2; font-weight: 700; }
.secondary-action { background: #315a77; margin: -6px 0 12px; }
#formant-chart, #r-l-chart { background: #091827; border: 1px solid #315a77; border-radius: 12px; display: block; height: auto; margin: 14px 0; max-width: 100%; width: 100%; }.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; }.dashboard-actions button + button { background: #d2b98f; }