/* Dialtone / Pulse — blue signal, red energy. Loaded after component styles. */
:root {
  --accent:#6d9dff;
  --signal-red:#ff5268;
  --mint:#58c5ff;
  --soft-blue:#13305a;
  --surface-soft:#101c31;
  --surface-raised:#14223a;
  --key-fill:#223655;
  --focus-ring:#6d9dff38;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#080f1c;
  --panel:#0e182a;
  --line:#24334e;
  --text:#edf3ff;
  --muted:#9aaecb;
  --accent:#78a7ff;
  --signal-red:#ff6278;
  --mint:#66caff;
  --soft-blue:#172d50;
  --surface-soft:#101d32;
  --surface-raised:#182945;
  --key-fill:#2a4062;
  --focus-ring:#78a7ff38;
  --ambient-blue:#3579ff0d;
  --ambient-red:#f4556c08;
  --panel-shadow:0 20px 70px #0005,0 1px 0 #ffffff04 inset;
}
:root[data-theme] body {
  background-color:var(--bg);
  background-image:radial-gradient(ellipse at 5% 15%,var(--ambient-blue),transparent 40%),radial-gradient(ellipse at 100% 40%,var(--ambient-red),transparent 45%);
  background-attachment:fixed;
}
:root[data-theme] main { max-width:1020px; }
:root[data-theme] .header { border-color:var(--line); }
:root[data-theme] .brand svg { color:var(--accent); }
:root[data-theme] .brand>span { color:var(--signal-red); }
:root[data-theme] .edition,:root[data-theme] .text-button { color:var(--muted); }
:root[data-theme] .question-mark { border-color:var(--muted); }
:root[data-theme] .intro { padding-top:42px; padding-bottom:29px; }
:root[data-theme] h1 { font-weight:600; letter-spacing:-2.7px; }
:root[data-theme] .eyebrow { font-size:10px; color:var(--accent); }
:root[data-theme] .eyebrow>span { background:var(--signal-red); box-shadow:0 0 0 4px #ed486414; }
:root[data-theme] .intro>p { line-height:1.6; }
:root[data-theme] .game {
  position:relative;
  border-color:var(--line);
  border-radius:19px;
  box-shadow:var(--panel-shadow);
}
:root[data-theme] .game:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,#2e6cf5 0%,#76b4ff 49%,#f34e68 100%);
  pointer-events:none;
  z-index:2;
}
:root[data-theme] .toolbar { height:73px; }
:root[data-theme] .mode-tabs { padding:4px; gap:4px; border-color:var(--line); border-radius:30px; background:var(--surface-soft); }
:root[data-theme] .mode-tabs button { border-radius:23px; color:var(--muted); font-weight:600; padding:9px 21px; }
:root[data-theme] .mode-tabs button:hover { background:var(--soft-blue); color:var(--accent); }
:root[data-theme] .mode-tabs button.active { background:#245de6; color:#fff; box-shadow:0 3px 9px #245de633; }
:root[data-theme] .difficulty-group label { color:var(--muted); }
:root[data-theme] .difficulty-group select { color:var(--text); background:var(--surface-soft); border-color:var(--line); border-radius:9px; }
:root[data-theme] .game-meta { color:var(--muted); font-size:10px; }
:root[data-theme] .round-dots span { background:var(--line); border-radius:10px; height:5px; }
:root[data-theme] .round-dots .current { background:var(--signal-red); box-shadow:0 0 0 3px #ed486412; }
:root[data-theme] .round-dots .done { background:var(--accent); }
:root[data-theme] .graph-toolbar>span { font-size:9px; }
:root[data-theme] .graph-options { border-radius:9px; background:var(--surface-soft); }
:root[data-theme] .graph-options button { border-radius:6px; font-weight:500; padding:7px 12px; }
:root[data-theme] .graph-options button.active { color:var(--accent); background:var(--soft-blue); }
:root[data-theme] .instrument { border-color:var(--line); border-radius:13px; }
:root[data-theme] .sound-field { background:radial-gradient(ellipse at 35% 42%,#142b4e 0%,#0b1628 75%); }
:root[data-theme] .sound-field:before { display:none; }
:root[data-theme] .field-top,:root[data-theme] .field-bottom { color:#b6c7e3; }
:root[data-theme] .field-top i { background:#ff637c; }
:root[data-theme] .field-tag { color:#96accf; }
:root[data-theme] .scope-led { background:#6bc6ff; box-shadow:0 0 8px #6bc6ff55; }
:root[data-theme] .field-copy h2 { color:#f2f6ff; font-size:23px; letter-spacing:-.7px; }
:root[data-theme] .field-copy p { color:#aabedc; font-size:12px; }
:root[data-theme] .field-bottom { font-size:8px; letter-spacing:.9px; }
:root[data-theme] .instrument[data-graph="ribbons"] .sound-field { background:#030915; }
:root[data-theme] .instrument[data-graph="ribbons"] .field-copy { background:linear-gradient(90deg,transparent,#030915b3,transparent); }
:root[data-theme] .instrument[data-graph="ribbons"] .field-top,:root[data-theme] .instrument[data-graph="ribbons"] .field-bottom,:root[data-theme] .instrument[data-graph="ribbons"] .field-copy p { color:#b6c7e3; }
:root[data-theme] .instrument[data-graph="ribbons"] .field-tag { color:#96accf; }
:root[data-theme] .instrument[data-graph="ribbons"] .field-copy h2 { color:#f2f6ff; }
:root[data-theme] .readout { border-color:var(--line); background:linear-gradient(155deg,var(--panel),var(--surface-soft)); }
:root[data-theme] .small-label,:root[data-theme] .snap-label { color:var(--muted); }
:root[data-theme] .small-label { font-size:10px; font-weight:500; letter-spacing:1.2px; }
:root[data-theme] .live-dot { background:var(--signal-red); }
:root[data-theme] .note-name { color:var(--accent); font-weight:600; }
:root[data-theme] .note-name span { color:var(--signal-red); }
:root[data-theme] .frequency-number { color:var(--muted); }
:root[data-theme] .frequency-number input { color:var(--text); font-weight:500; }
:root[data-theme] .cents-gauge { color:var(--muted); }
:root[data-theme] .gauge { background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 9px); }
:root[data-theme] .gauge b { background:var(--muted); }
:root[data-theme] .gauge i { background:var(--signal-red); }
:root[data-theme] .cents-text,:root[data-theme] .tuning-standard { color:var(--muted); }
:root[data-theme] .tuning-standard { font-size:8px; }
:root[data-theme] .mini-keys i { border-color:var(--line); background:var(--panel); }
:root[data-theme] .mini-keys i.black { background:var(--key-fill); }
:root[data-theme] .mini-keys i.selected { border-color:var(--accent); background:var(--accent); box-shadow:0 2px 7px var(--focus-ring); }
:root[data-theme] .slider-heading { font-size:12px; font-weight:500; }
:root[data-theme] .frequency-slider { height:6px; background:linear-gradient(to right,var(--accent) 0 var(--position),var(--line) var(--position) 100%); }
:root[data-theme] .frequency-slider::-webkit-slider-thumb { width:20px; height:20px; background:#fff; border:5px solid var(--accent); box-shadow:0 0 0 5px var(--focus-ring); }
:root[data-theme] .frequency-slider::-moz-range-thumb { width:10px; height:10px; background:#fff; border:5px solid var(--accent); box-shadow:0 0 0 5px var(--focus-ring); }
:root[data-theme] .range-labels,:root[data-theme] .fine-tune,:root[data-theme] .keyboard-hint { color:var(--muted); }
:root[data-theme] .fine-tune button { border-color:var(--line); background:var(--surface-soft); color:var(--accent); border-radius:6px; }
:root[data-theme] kbd { border-color:var(--line); background:var(--surface-soft); }
:root[data-theme] .primary,:root[data-theme] .preview-button { border-radius:10px; min-height:48px; font-size:13px; }
:root[data-theme] .primary { background:#da2d49; border-color:#da2d49; color:#fff; box-shadow:0 4px 0 #a9243b,0 6px 14px #e3375220; }
:root[data-theme] .primary:hover:not(:disabled) { background:#cc2440; border-color:#cc2440; transform:translateY(-1px); box-shadow:0 5px 0 #a9243b,0 8px 20px #e337522b; }
:root[data-theme] .primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #a9243b,0 3px 8px #e3375215; }
:root[data-theme] .preview-button { background:var(--soft-blue); border-color:var(--line); color:var(--accent); }
:root[data-theme] .preview-button:hover:not(:disabled) { background:var(--surface-raised); border-color:var(--accent); }
:root[data-theme] #preview-icon { color:var(--accent); }
:root[data-theme] .game-footer { background:var(--surface-soft); border-color:var(--line); }
:root[data-theme] .volume,:root[data-theme] #game-note,:root[data-theme] .below-game { color:var(--muted); }
:root[data-theme] .volume input { accent-color:var(--accent); }
:root[data-theme] .separator { color:var(--line); }
:root[data-theme] #best-label b { color:var(--accent); font-weight:600; }
:root[data-theme] .steps,:root[data-theme] .page-footer { border-color:var(--line); }
:root[data-theme] .step-number { color:var(--accent); background:var(--soft-blue); border:1px solid var(--line); border-radius:9px; display:inline-grid; place-items:center; width:29px; height:29px; font-weight:600; }
:root[data-theme] .steps>div:nth-child(2) .step-number { color:var(--signal-red); background:#ed48640d; }
:root[data-theme] .steps h3 { color:var(--text); font-weight:600; }
:root[data-theme] .steps p,:root[data-theme] .page-footer { color:var(--muted); }
:root[data-theme] .countdown { background:#29466d; }
:root[data-theme] .countdown div { background:#ff627b; }
:root[data-theme] .fine-tune button:hover,:root[data-theme] .compare-play:hover { border-color:var(--accent); background:var(--soft-blue); }
:root[data-theme] .result-header p,:root[data-theme] .score-display small { color:var(--muted); }
:root[data-theme] .score-display { color:var(--accent); font-weight:600; }
:root[data-theme] .comparison>div { border-color:var(--line); background:var(--surface-soft); border-radius:13px; }
:root[data-theme] .comparison>div:first-child .compare-note { color:var(--accent); }
:root[data-theme] .comparison>div:last-child .compare-note { color:var(--signal-red); }
:root[data-theme] .compare-hz,:root[data-theme] .result-error { color:var(--muted); }
:root[data-theme] .compare-play { color:var(--accent); border-color:var(--line); background:var(--panel); border-radius:7px; }
:root[data-theme] .score-table th,:root[data-theme] .score-table small,:root[data-theme] .summary-note { color:var(--muted); border-color:var(--line); }
:root[data-theme] .score-table td { color:var(--text); border-color:var(--line); }
:root[data-theme] .score-table td:last-child { color:var(--accent); font-weight:600; }
:root[data-theme] .celebration-badge { color:var(--accent); border-color:var(--line); background:linear-gradient(110deg,var(--soft-blue),#ed48640c); font-weight:600; box-shadow:0 3px 12px #245de60b; }
:root[data-theme] dialog { background:var(--panel); color:var(--text); border-color:var(--line); box-shadow:var(--panel-shadow); }
:root[data-theme] dialog::backdrop { background:#08152b99; }
:root[data-theme] .dialog-heading button,:root[data-theme] dialog p,:root[data-theme] dialog li { color:var(--muted); }
:root[data-theme] dialog strong { color:var(--text); }
:root[data-theme] .help-callout { background:var(--soft-blue); border-left:3px solid var(--accent); }
:root[data-theme] #toast { background:var(--panel); color:var(--text); border-color:var(--accent); box-shadow:var(--panel-shadow); }

/* Live analyser: clear pitch in blue, percussive energy in red. */
:root[data-theme] .mic-emblem { background:var(--soft-blue); border-color:var(--line); color:var(--accent); box-shadow:0 3px 10px #245de60b; }
:root[data-theme] .mic-intro h2 { font-weight:600; }
:root[data-theme] .mic-intro p { font-size:12px; }
:root[data-theme] .mic-dashboard { border-radius:13px; border-color:var(--line); }
:root[data-theme] .mic-pitch-card { background:linear-gradient(155deg,var(--panel),var(--surface-soft)); }
:root[data-theme] .mic-note { color:var(--accent); font-weight:600; }
:root[data-theme] .mic-note small { color:var(--signal-red); opacity:1; }
:root[data-theme] .mic-card-label { font-size:9px; }
:root[data-theme] .mic-status-dot { background:var(--muted); }
:root[data-theme] .mic-running .mic-status-dot { background:var(--signal-red); box-shadow:0 0 0 4px #ed486415; }
:root[data-theme] .mic-running .mic-status>i { background:var(--signal-red); }
:root[data-theme] .mic-tuning-track { background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 5%); }
:root[data-theme] .mic-tuning-centre { background:var(--soft-blue); border-color:var(--focus-ring); }
:root[data-theme] .mic-tuning-track>i { background:var(--signal-red); }
:root[data-theme] .mic-in-tune .mic-tuning-track>i { background:var(--accent); }
:root[data-theme] .mic-in-tune .mic-cents { color:var(--accent); }
:root[data-theme] .mic-tuning-legend,:root[data-theme] .mic-tuning-ticks { font-size:8px; }
:root[data-theme] .mic-standard { font-size:9px; }
:root[data-theme] .mic-local-badge { color:var(--accent); border-color:var(--line); background:var(--soft-blue); font-size:7px; padding:5px 8px; }
:root[data-theme] .mic-level-track { height:5px; }
:root[data-theme] .mic-level-track i { background:linear-gradient(90deg,#2d72f1 0%,#64aaff 65%,#ff586d 100%); }
:root[data-theme] .mic-family h3 { color:var(--text); font-size:23px; font-weight:600; letter-spacing:-.65px; }
:root[data-theme] .mic-family p { font-size:11px; }
:root[data-theme] .mic-estimate { background:var(--surface-soft); font-size:9px; padding:4px 7px; border-radius:6px; }
:root[data-theme] .mic-input-heading { font-size:10px; }
:root[data-theme] .mic-error { background:#ed48640c; border-color:#ed48644d; }
:root[data-theme] .mic-privacy,:root[data-theme] .mic-limit { font-size:10px; }
:root[data-theme] button,:root[data-theme] select { transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease; }
:root[data-theme] button:focus-visible,:root[data-theme] a:focus-visible,:root[data-theme] select:focus-visible,:root[data-theme] input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 6px var(--focus-ring); }
:root[data-theme] .mode-tabs button:active,:root[data-theme] .graph-options button:active,:root[data-theme] .preview-button:active,:root[data-theme] .fine-tune button:active { transform:translateY(1px); }

@media(max-width:650px) {
  :root[data-theme] .intro { padding-top:31px; padding-bottom:25px; }
  :root[data-theme] h1 { font-size:35px; letter-spacing:-1.8px; }
  :root[data-theme] .intro>p { font-size:12px; }
  :root[data-theme] .toolbar { height:67px; }
  :root[data-theme] .mode-tabs { gap:1px; }
  :root[data-theme] .mode-tabs button { padding:8px 10px; font-size:11px; }
  :root[data-theme] .game-meta { font-size:8px; }
  :root[data-theme] .graph-toolbar>span { font-size:8px; }
  :root[data-theme] .graph-options button { font-size:9px; padding:7px 9px; }
  :root[data-theme] .small-label { font-size:8px; }
  :root[data-theme] .tuning-standard { font-size:6.5px; }
  :root[data-theme] .field-copy h2 { font-size:21px; }
  :root[data-theme] .field-copy p { font-size:11px; }
  :root[data-theme] .field-bottom { font-size:6px; }
  :root[data-theme] .primary,:root[data-theme] .preview-button { font-size:12px; }
  :root[data-theme] .mic-intro p { font-size:11px; }
  :root[data-theme] .mic-family h3 { font-size:22px; }
  :root[data-theme] .mic-privacy,:root[data-theme] .mic-limit { font-size:9px; }
}
@media(max-width:380px) {
  :root[data-theme] .mode-tabs button { padding:8px 8px; }
  :root[data-theme] .difficulty-group select { padding-right:12px; }
}
@media(prefers-reduced-motion:reduce) {
  :root[data-theme] button,:root[data-theme] select { transition:none; }
  :root[data-theme] .primary:hover:not(:disabled),:root[data-theme] .primary:active:not(:disabled),:root[data-theme] .mode-tabs button:active,:root[data-theme] .graph-options button:active,:root[data-theme] .preview-button:active,:root[data-theme] .fine-tune button:active { transform:none; }
}