:root {
  --bg: #0d1117;
  --panel: #161b22;
  --ink: #e6edf3;
  --dim: #8b949e;
  --line: #30363d;
  --good: #3fb950;
  --ok: #d29922;
  --off: #f85149;
  --steel1: #b9c2cc;
  --steel2: #6e7681;
  --accent: #58a6ff;
  --brand: #f7768e;
  --note: #bb9af7;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2430, var(--bg));
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }

header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
header h1 {
  margin: 0; font-size: 30px; letter-spacing: .5px; font-weight: 700;
}
header h1 .sub { font-weight: 400; color: var(--dim); font-size: 18px; }
#lang { padding: 6px 8px; font-size: 13px; min-width: auto; }
.head-right { display: flex; align-items: center; gap: 10px; }
/* do-re-mi (solfège) assist toggle — sits beside the note name in the readout */
.solf-toggle { flex: none; align-self: center; margin-left: 4px; padding: 5px 9px; font-size: 12px; font-weight: 600; line-height: 1;
  border: 1px solid var(--line); border-radius: 999px; background: #21262d; color: var(--dim);
  cursor: pointer; letter-spacing: .02em; }
.solf-toggle:hover { border-color: var(--accent); color: var(--ink); }
.solf-toggle[aria-pressed="true"] { background: rgba(88,166,255,.14); border-color: var(--accent); color: var(--accent); }
.tune-start { display: block; width: fit-content; margin: 4px auto 12px; }
/* RTL (Arabic): keep the diagrams/meter LTR so note positions don't mirror */
[dir="rtl"] .pan, [dir="rtl"] .kbd, [dir="rtl"] .fret, [dir="rtl"] .meter-track { direction: ltr; }
.tagline { margin: 4px 0 0; color: var(--dim); }

.controls {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  margin: 22px 0; padding: 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
}
.ctrl { display: flex; flex-direction: column; gap: 6px; }
.ctrl label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.ref-row { display: flex; align-items: center; gap: 6px; }
input[type=number] {
  width: 78px; background: #0d1117; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 15px;
}
.unit { color: var(--dim); }
input[type=range] { width: 160px; accent-color: var(--accent); }

button {
  cursor: pointer; border: 1px solid var(--line); border-radius: 8px;
  background: #21262d; color: var(--ink); padding: 8px 12px; font-size: 14px;
}
button:hover { border-color: var(--accent); }
.primary {
  background: var(--accent); color: #04121f; border-color: var(--accent);
  font-weight: 600; padding: 12px 18px; font-size: 15px;
}
.primary.live { background: var(--good); border-color: var(--good); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .72; } }
.chip { padding: 6px 9px; font-size: 12px; }

select {
  background: #0d1117; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 15px; min-width: 170px;
}
select:hover { border-color: var(--accent); }

/* --- identify panel --- */
.identify {
  margin: 0 0 22px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
}
.id-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#idToggle.live { background: var(--good); border-color: var(--good); color: #04121f; font-weight: 600; animation: pulse 1.4s infinite; }
.id-notes { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.guesses { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.guess {
  flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #0d1117;
}
.guess.lead { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,.3); }
.g-rank { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.guess.lead .g-rank { color: var(--accent); }
.g-name { font-size: 18px; font-weight: 700; margin: 2px 0; }
.g-meta { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
.g-use { width: 100%; font-size: 13px; }
.guess.lead .g-use { background: var(--accent); color: #04121f; border-color: var(--accent); font-weight: 600; }

/* --- stage: pan diagram + readout --- */
.stage { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; margin-top: 16px; }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; } }

.pan {
  position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #dfe6ec 0%, var(--steel1) 24%, var(--steel2) 62%, #3a4048 100%);
  box-shadow: inset 0 6px 24px rgba(255,255,255,.25), inset 0 -14px 40px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.5);
}
.field {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 40px; padding: 6px 8px; text-align: center;
  background: rgba(13,17,23,.72); color: var(--ink);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  font-size: 13px; font-weight: 600; backdrop-filter: blur(2px);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.field.ding {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #2b3138, #0d1117);
  border-color: rgba(210,153,34,.5);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.7);
}
.field.active {
  background: var(--accent); color: #04121f; border-color: #fff;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 0 3px rgba(88,166,255,.35);
}
/* root note (ding + its octaves) gets the same amber cue as the piano/guitar reference */
.field.root::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid rgba(210,153,34,.55); pointer-events: none;
}
.field.ding.root::before { inset: -4px; border-width: 2px; }

/* consistent note-letter/octave split, used wherever noteBoth() renders a label */
.note-pc { color: var(--note); }
.note-oct { color: var(--dim); font-weight: 400; }
/* ...except the off-tune warning chip, whose own red/pink signal must stay as-is */
.chip-note .note-pc, .chip-note .note-oct { color: inherit; }
/* piano keys sit on light pastel fills — violet/dim washes out, keep it plain black */
.wlbl .note-pc, .wlbl .note-oct { color: inherit; }

.readout { min-width: 0; }
.note-line { display: flex; align-items: baseline; gap: 6px; }
.note-name { font-size: 64px; font-weight: 800; line-height: 1; color: var(--note); }
.note-name.good { color: var(--good); }
.note-name.ok { color: var(--ok); }
.note-name.off { color: var(--off); }
.octave { font-size: 24px; color: var(--dim); }
.note-solf:not(:empty) { margin-left: 10px; font-size: 22px; font-weight: 600; color: var(--dim);
  font-variant-numeric: tabular-nums; }

.meter { margin: 14px 0 10px; }
.meter-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.meter-scale .zero { color: var(--ink); }
.meter-track {
  position: relative; height: 26px; margin-top: 4px;
  background: #0d1117; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.meter-zone { position: absolute; top: 0; bottom: 0; background: rgba(63,185,80,.18); }
.meter-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--dim); }
.meter-needle {
  position: absolute; left: 50%; top: -3px; bottom: -3px; width: 3px;
  background: var(--accent); transform: translateX(-50%);
  transition: left .08s linear; box-shadow: 0 0 8px var(--accent);
}

.verdict { font-size: 18px; font-weight: 600; min-height: 26px; }
.verdict.good { color: var(--good); }
.verdict.ok { color: var(--ok); }
.verdict.off { color: var(--off); }
.detail { color: var(--dim); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* --- two-pane layout: left = confirm/pan/readout/notes, right = melody/reference --- */
.tune-grid { display: block; }
/* flex+gap (not each child's own margin) so spacing only appears BETWEEN
   panels that are actually visible — melody box is display:none until 2+
   notes are measured, and a plain margin-top would still leave a gap above
   "Read your pan" when it's the only visible thing in this pane */
.tune-right { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
#pianoHint { margin: 0; }

/* --- table --- */
.list { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
tr.good td { background: rgba(63,185,80,.07); }
tr.ok td { background: rgba(210,153,34,.07); }
tr.off td { background: rgba(248,81,73,.09); }
tr.good .status { color: var(--good); }
tr.ok .status { color: var(--ok); }
tr.off .status { color: var(--off); }
.tag { font-size: 10px; color: var(--ok); border: 1px solid rgba(210,153,34,.5); border-radius: 4px; padding: 1px 4px; }
.th-cell, .ds-cell { white-space: nowrap; }
.th-sep { color: var(--dim); margin: 0 4px; }
.hint { color: var(--dim); font-size: 13px; }
.hint-flag { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; font-weight: 600; }

footer { margin-top: 34px; color: var(--dim); font-size: 12px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.foot-right { display: flex; gap: 10px; align-items: center; }
.mark { letter-spacing: 2px; opacity: .5; }
.mark .accent { color: var(--brand); }
/* footer wordmark doubles as a "go home / start over" link */
.home-link { text-decoration: none; color: inherit; transition: opacity .12s; }
.home-link:hover .mark { opacity: 1; }
.home-hint { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.home-hint::before { content: "⌂ "; }
.home-link:hover .home-hint { border-color: var(--accent); color: var(--accent); }

/* clipboard-fallback confirmation for the share buttons */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: #21262d; color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- guided flow ---------------- */
.hidden { display: none !important; }
.step { margin: 24px 0; }

#stepStart { text-align: center; padding: 30px 0; }
.big { font-size: 19px; padding: 18px 26px; }
.tagline { margin: 14px 0 0; color: var(--dim); }
.linkbtn { background: none; border: none; color: var(--accent); margin-top: 16px; font-size: 14px; padding: 8px; }
.linkbtn:hover { text-decoration: underline; }

#stepIdentify h2 { font-size: 20px; margin: 0 0 12px; }
#stepIdentify .sublink { display: block; margin: 0 0 14px; }

/* guess cards are now buttons */
.guesses { display: flex; gap: 14px; flex-wrap: wrap; }
.guess {
  flex: 1 1 240px; text-align: left; padding: 16px; border: 1px solid var(--line);
  border-radius: 12px; background: #0d1117; color: var(--ink); cursor: pointer;
}
.guess:hover { border-color: var(--accent); }
.guess.lead { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,.3); background: rgba(88,166,255,.06); }
.g-rank { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.guess.lead .g-rank { color: var(--accent); }
.g-name { font-size: 20px; font-weight: 700; margin: 3px 0; }
.g-meta { font-size: 12px; color: var(--dim); }

/* subtle blue-ish text links — how-to page + re-identify, same voice */
.panel-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 10px; }
.sublink { background: none; border: none; padding: 0; margin: 0;
  color: var(--accent); font-size: 13px; text-decoration: none; cursor: pointer; font: inherit; font-weight: 600; }
.sublink:hover { text-decoration: underline; }

/* confirm bar (basic inputs, prefilled + overridable) */
.confirm { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
/* adjustment summary */
.summary { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); font-size: 15px; }
.summary.good { border-color: var(--good); color: var(--good); }
.summary.off { border-color: var(--off); }
.summary strong { display: inline-block; margin-right: 8px; }
.chip-note { display: inline-block; margin: 3px 6px 3px 0; padding: 3px 9px; font-size: 13px;
  border-radius: 999px; background: rgba(248,81,73,.14); color: #ffb3ae; font-variant-numeric: tabular-nums; }
.untested { margin-top: 8px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.share-result { display: block; margin: 10px 0 0; background: rgba(88,166,255,.10);
  border: 1px solid var(--accent); color: var(--accent); }
.share-result:hover { background: var(--accent); color: #04121f; }

/* pro panel */
.pro { margin: 16px 0; padding: 14px 16px; background: var(--panel);
  border: 1px dashed var(--accent); border-radius: 12px; }
.pro-note { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
kbd { font: inherit; font-size: 11px; background: #21262d; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }

/* tap-to-learn note explainer */
.chip-note { cursor: pointer; }
.chip-note:hover, .chip-note:focus { text-decoration: underline; outline: none; filter: brightness(1.15); }
.ex-hint { margin-top: 8px; font-size: 12px; color: var(--dim); }
.field { cursor: pointer; }
.ex-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ex-overlay.hidden { display: none; }
.ex-modal { position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ex-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.ex-close:hover { color: var(--ink); }
.ex-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
.ex-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ex-note { font-size: 34px; font-weight: 800; }
.ex-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ex-badge.good { background: rgba(63,185,80,.16); color: #7ee787; }
.ex-badge.ok { background: rgba(210,153,34,.18); color: #e3b341; }
.ex-badge.off { background: rgba(248,81,73,.16); color: #ff9b95; }
.ex-meaning { font-size: 15px; margin: 0 0 14px; line-height: 1.5; }
.ex-sec { margin: 12px 0; }
.ex-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 0 0 4px; }
.ex-sec p { margin: 0; font-size: 14px; line-height: 1.55; }
.ex-caution { margin: 14px 0 4px; font-size: 12.5px; color: var(--dim); border-left: 2px solid var(--off); padding-left: 10px; }
.ex-clear { margin-top: 12px; background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.ex-clear:hover { border-color: var(--off); color: var(--off); }

/* device tip on the start screen */
.device-tip { margin: 18px auto 0; max-width: 44ch; font-size: 12px; color: var(--dim); line-height: 1.5; }

/* audible pitch playback */
.ex-play { display: flex; gap: 8px; margin: 8px 0 12px; }
.ex-playbtn { background: none; border: 1px solid var(--line); color: var(--accent); border-radius: 8px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; }
.ex-playbtn:hover { border-color: var(--accent); background: rgba(88,166,255,.10); }
td.hear { text-align: center; }
.row-play { background: rgba(88,166,255,.14); border: 1px solid var(--accent); border-radius: 8px;
  color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 9px; }
.row-play:hover { background: var(--accent); }
.row-play + .row-play { margin-left: 6px; }

/* keep wide table from breaking mobile layout */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.field { -webkit-backdrop-filter: blur(2px); }

@media (max-width: 640px) {
  main { padding: 20px 14px 48px; }
  .confirm { gap: 12px; }
  .note-name { font-size: 52px; }
  .stage { gap: 14px; margin-top: 10px; }
  .ref-panel { margin: 10px 0; padding: 10px 12px; }
  .summary { margin: 10px 0; }
  .tune-right { margin-top: 16px; }
}

/* wide screens: split into two panes — tuning/notes on the left, melody/reference
   on the right; the right pane gets a bit more room for the guitar/sheet diagrams */
@media (min-width: 900px) {
  main { max-width: 1180px; }
  .tune-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(420px, 1.15fr);
    gap: 32px; align-items: start; }
  .tune-right { margin-top: 0; }
}

/* ---------------- identify: live input cue ---------------- */
.listening { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 16px; }
.mic-dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--line); transition: background .12s, box-shadow .12s; }
.mic-dot.on { background: var(--good); box-shadow: 0 0 0 4px rgba(63,185,80,.18); animation: micpulse 1s infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 7px rgba(63,185,80,.05); } }
.level { flex: 1; height: 10px; background: #0d1117; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; }
.level-fill { height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--good), var(--accent));
  border-radius: 999px; transition: width .06s linear; }
.level-label { font-size: 12px; color: var(--dim); flex: 1 0 100%; margin-top: 2px; }

/* last-heard note badge, pulses on each new detection */
.last-note { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; min-height: 46px; }
.ln-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ln-note { font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.last-note.flash .ln-note { animation: noteflash .45s ease-out; }
@keyframes noteflash {
  0% { transform: scale(1.45); color: #fff; text-shadow: 0 0 18px var(--accent); }
  100% { transform: scale(1); }
}

/* heard-note chips */
.id-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; }
.id-notes .dim { color: var(--dim); font-size: 14px; }
.hchip { padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(88,166,255,.14); color: #a9d0ff; font-variant-numeric: tabular-nums; }
.hcount { margin-left: 4px; font-size: 12px; color: var(--dim); }

/* confident top guess reads as a call-to-action */
.guess.confident { animation: guesspop .5s ease-out; box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(88,166,255,.25); }
.guess .g-meta b { color: var(--accent); }
@keyframes guesspop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .mic-dot.on, .last-note.flash .ln-note, .guess.confident { animation: none; }
  .toast { transition: opacity .01s linear; transform: translate(-50%, 0); }
}

/* ---------------- pan/instrument reference (merged into the stage panel) ---------------- */
.ref-panel { margin: 16px 0; padding: 4px 16px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; }
/* collapsed: match top/bottom padding around the summary row (expanded keeps the roomier bottom for content) */
.ref-panel:not([open]) { padding-bottom: 4px; }
.ref-head { padding: 12px 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.ref-head::marker { color: var(--dim); }

/* notes summary: a quiet color-coded dot per note, visible only while collapsed.
   Plain inline flow (like the "Read your pan" summary) so the marker, the
   "Notes" label and the dots all stay on one line — anything block/flex
   here would force a line break right after the marker. */
.notes-legend { display: none; gap: 4px; margin-left: 8px; vertical-align: middle; }
#notesPanel:not([open]) .notes-legend { display: inline-flex; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex: none; }
.legend-dot.good { background: var(--good); }
.legend-dot.ok { background: var(--ok); }
.legend-dot.off { background: var(--off); }
.ph-sub { color: var(--dim); font-weight: 400; font-size: 13px; }
#pianoHint[open] .ph-sub { display: none; }          /* drop the subtitle once expanded — wraps badly on mobile */
.ph-line { margin: 2px 0 12px; color: var(--ink); font-size: 14px; }
.ph-line b { color: var(--accent); }
.instr-toggle { display: flex; gap: 8px; margin: 0 0 14px; }
.instr-chip[aria-pressed="true"] { background: rgba(88,166,255,.14); border-color: var(--accent); color: var(--accent); }

/* keyboard */
.kbd { position: relative; height: 108px; margin: 4px 0 14px; user-select: none; }
.kbd .whites { display: flex; height: 100%; }
.wkey { flex: 1; position: relative; background: #e8edf3; border: 1px solid #0d1117;
  border-radius: 0 0 4px 4px; display: flex; align-items: flex-end; justify-content: center; }
.bkey { position: absolute; top: 0; height: 63%; background: #1c2230; border: 1px solid #0d1117;
  border-radius: 0 0 4px 4px; z-index: 2; }
.wkey.in-scale { background: linear-gradient(#bcd6ff, #8fbcff); }
.bkey.in-scale { background: linear-gradient(#3f6bb0, #2b4d86); }
.wkey.root { background: linear-gradient(#ffd9a0, var(--ok)); box-shadow: inset 0 0 0 2px var(--ok); }
.bkey.root { background: linear-gradient(#b9791f, #8a5a12); box-shadow: 0 0 0 2px var(--ok); }
.wkey.lit, .bkey.lit { background: var(--accent) !important; box-shadow: 0 0 12px var(--accent); }
.wlbl { font-size: 11px; font-weight: 700; color: #0d1117; padding-bottom: 4px; }
.mclbl { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 9px; color: var(--dim); }
.wkey.mc { border-bottom: 3px solid var(--dim); }

/* melody suggestions: "ideal pitch" patterns are always available (built from
   the full theoretical scale); "your actual tuning" only once 2+ notes are
   measured — margin lives on .tune-right's flex gap, see layout section */
.melody-box { margin: 0; padding-top: 16px; }
.melody-group { margin-top: 14px; }
.melody-group:first-of-type { margin-top: 10px; }
.melody-group-label { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.melody-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mel-chip-play { margin-right: 4px; font-size: 9px; color: var(--dim); }
.melody-chip:hover .mel-chip-play { color: var(--accent); }

/* melody detail: tempo + exact note sequence + rough hand tags, filled in
   on demand when a pattern chip is clicked (see showMelodyDetail() in app.js) */
.melody-detail { margin-top: 14px; padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; }
.melody-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.melody-detail-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.melody-detail-name { font-weight: 600; font-size: 13px; }
.melody-detail-tempo { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.melody-clear-btn { font-size: 11px; padding: 3px 9px; color: var(--dim); }
.melody-clear-btn:hover { border-color: var(--off); color: var(--off); }
.melody-detail-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin-top: 8px; font-size: 13px; }
.mel-note { display: inline-flex; align-items: baseline; gap: 3px; }
/* ding/root of the melody gets the same amber cue as elsewhere in the app */
.mel-note-root .note-pc, .mel-note-root .note-oct { color: var(--ok); }
.mel-arrow { color: var(--dim); margin: 0 4px; }
.mel-hand { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  color: var(--dim); border: 1px solid var(--line); }
.mel-hand-l { color: var(--accent); border-color: var(--accent); }
.mel-hand-r { color: var(--note); border-color: var(--note); }

.tempo-chip[aria-pressed="true"] { background: rgba(88,166,255,.14); border-color: var(--accent); color: var(--accent); }

/* one instrument reference at a time (piano OR guitar, toggled) */
.ref-grid { margin-bottom: 14px; }
.ref-label { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.ref-label .dim { opacity: .85; }

/* fretboard */
.fret { background: linear-gradient(#3a2c1e, #2a2016); border: 1px solid #0d1117;
  border-radius: 6px; padding: 6px 6px 2px; display: flex; gap: 6px; }
.fret-grid { flex: 1; min-width: 0; }
/* open-string names, one per row, so the top/bottom string is obvious without prior guitar knowledge */
.fnames { flex: 0 0 auto; display: flex; flex-direction: column; }
.fname { height: 20px; display: flex; align-items: center; justify-content: flex-end;
  font-size: 10px; color: var(--dim); white-space: nowrap; }
.fstring { position: relative; display: flex; height: 20px; }
.fstring::before { content: ""; position: absolute; left: 20px; right: 0; top: 50%;
  height: 1px; background: #b6a07f; }
.fcell { flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #6b563f; }
.fcell.open { flex: 0 0 20px; border-right: 3px solid #d8c9b0; }   /* the nut */
.fdot { width: 13px; height: 13px; border-radius: 50%; z-index: 2;
  background: #8fbcff; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.fdot.root { background: var(--ok); box-shadow: 0 0 0 2px rgba(210,153,34,.4); }
.fdot.lit { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent); }
.fnums { display: flex; margin-top: 2px; }
.fnum { flex: 1; text-align: center; font-size: 10px; color: var(--dim); }
.fnum.open { flex: 0 0 20px; }

/* sheet music: treble-clef staff, same root/lit color language as piano/guitar */
.staff-wrap { background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 6px; }
.staff { width: 100%; height: auto; display: block; }
.staff-line, .ledger-line { stroke: var(--dim); stroke-width: 1; }
.clef { font-size: 26px; fill: var(--ink); }
.note-head { fill: #8fbcff; }
.note-head.root { fill: var(--ok); filter: drop-shadow(0 0 2px rgba(210,153,34,.6)); }
.note-head.lit { fill: var(--accent) !important; filter: drop-shadow(0 0 4px var(--accent)); }
.note-label { font-size: 9px; fill: var(--note); text-anchor: middle; }
.accidental { font-size: 11px; fill: var(--ink); text-anchor: middle; }

/* degree chips + legend swatches */
.ph-degrees { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 10px; border-radius: 8px; background: #0d1117; border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
.dchip b { font-size: 14px; }
.dchip .dname { font-size: 11px; color: var(--accent); }
.ph-foot { margin: 12px 0 0; font-size: 12px; color: var(--dim); }
.k-root { color: var(--ok); } .k-mc { color: var(--ink); border-bottom: 2px solid var(--dim); }