/* ==========================================================================
   Guitar Buddy — materialen van het instrument onder een laag glas.
   Ebbenhout en rozenhout voor de hals, messing en nikkel voor de accenten,
   en daarboven matte glaspanelen met een lichtrand.
   Accentkleuren zijn data: messing = grondtoon, verdigris = terts,
   staalblauw = kwint, pruim = septiem, koper = blue note.
   ========================================================================== */

:root {
  --ebony:      #13100c;
  --ebony-2:    #1b1711;
  --panel:      #221d16;
  --panel-2:    #2b241b;
  --line:       #39301f;
  --line-soft:  #2a2318;

  --bone:       #ede3d1;
  --bone-2:     #bdb09a;
  --bone-3:     #8b8070;

  /* --brass is de grondtoon op de hals en blijft in elk thema gelijk.
     --accent is de kleur van de interface en verschilt per thema. */
  --brass:      #e0a132;
  --accent:     #e0a132;
  --accent-hi:  #f0bb55;
  --accent-dim: #8d6520;
  --accent-ink: #241703;
  --accent-rgb: 224, 161, 50;
  --verdigris:  #45b39a;
  --steel:      #7ea3dd;
  --plum:       #bd8cd6;
  --copper:     #e0775a;
  --nickel:     #9aa0a6;

  --wood-hi:    #5d3a27;
  --wood:       #42281a;
  --wood-lo:    #2d1b11;

  /* glas */
  --glass-1:    rgba(255, 246, 228, .045);
  --glass-2:    rgba(255, 246, 228, .085);
  --glass-edge: rgba(255, 240, 214, .13);
  --glass-top:  rgba(255, 247, 226, .22);
  --glass-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8);
  --glass-blur: blur(16px) saturate(140%);
  --veil:       rgba(19, 16, 12, .62);

  /* gekleurd licht achter het glas */
  --ambient:
    radial-gradient(58% 42% at 10% -4%, rgba(224, 161, 50, .15), transparent 62%),
    radial-gradient(48% 38% at 92% 6%, rgba(69, 179, 154, .11), transparent 64%),
    radial-gradient(70% 46% at 48% 104%, rgba(126, 163, 221, .09), transparent 66%);

  --radius:   12px;
  --radius-s: 8px;

  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  --measure: 66ch;
  --t: 160ms cubic-bezier(.2,.65,.3,1);
  --t-slow: 320ms cubic-bezier(.2,.7,.25,1);
}

/* Werkplaats donker, ook als losse voorbeeldkleur in de instellingen */
[data-theme="workshop"] {
  --ebony: #13100c; --ebony-2: #1b1711; --panel: #221d16; --panel-2: #2b241b;
  --bone: #ede3d1; --bone-2: #bdb09a; --bone-3: #8b8070;
  --glass-1: rgba(255, 246, 228, .045); --glass-2: rgba(255, 246, 228, .085); --glass-edge: rgba(255, 240, 214, .13);
  --accent: #e0a132; --accent-hi: #f0bb55; --accent-dim: #8d6520; --accent-ink: #241703; --accent-rgb: 224, 161, 50;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]), [data-theme="workshop"] {
    --ebony:     #f1e9dc;
    --ebony-2:   #e9e0ce;
    --panel:     #fffaf1;
    --panel-2:   #f6eedf;
    --line:      #d8cbb3;
    --line-soft: #e4d9c4;

    --bone:      #2a2118;
    --bone-2:    #5c5042;
    --bone-3:    #857868;

    --brass:     #9a6b10;
    --brass-dim: #c9a15c;
    --verdigris: #11786a;
    --steel:     #2f5e9e;
    --plum:      #7a4b96;
    --copper:    #b2492c;
    --nickel:    #6d7378;

    --glass-1:    rgba(255, 255, 255, .50);
    --glass-2:    rgba(255, 255, 255, .80);
    --glass-edge: rgba(102, 78, 42, .16);
    --glass-top:  rgba(255, 255, 255, .92);
    --glass-shadow: 0 14px 30px -20px rgba(86, 62, 28, .45);
    --veil:       rgba(248, 243, 233, .66);

    --brass:      #9a6b10;
    --accent:     #9a6b10;
    --accent-hi:  #c08d1e;
    --accent-dim: #c9a15c;
    --accent-ink: #fffaf1;
    --accent-rgb: 154, 107, 16;

    --ambient:
      radial-gradient(58% 42% at 10% -4%, rgba(224, 161, 50, .22), transparent 62%),
      radial-gradient(48% 38% at 92% 6%, rgba(69, 179, 154, .14), transparent 64%),
      radial-gradient(70% 46% at 48% 104%, rgba(126, 163, 221, .13), transparent 66%);
  }
}

/* ==========================================================================
   Thema's. Elk thema zet alleen de omgeving: achtergrond, glas, tekst en
   accent. De hals en de kleuren van de laddertonen blijven overal gelijk.
   ========================================================================== */

/* Studio — koel indigo met ijsblauw */
[data-theme="studio"] {
  color-scheme: dark;
  --ebony: #0a0e18; --ebony-2: #0e1322; --panel: #151b2b; --panel-2: #1b2234;
  --line: #232c42; --line-soft: #1a2133;
  --bone: #e7ecf8; --bone-2: #a4afc8; --bone-3: #6d7992;
  --accent: #5bb8f0; --accent-hi: #93d6ff; --accent-dim: #2f6a8f;
  --accent-ink: #05121d; --accent-rgb: 91, 184, 240;
  --glass-1: rgba(190, 215, 255, .05); --glass-2: rgba(190, 215, 255, .095);
  --glass-edge: rgba(170, 202, 255, .15); --glass-top: rgba(205, 228, 255, .22);
  --glass-shadow: 0 14px 34px -18px rgba(0, 4, 16, .85);
  --veil: rgba(10, 14, 24, .62);
  --ambient:
    radial-gradient(58% 42% at 8% -4%, rgba(91, 184, 240, .16), transparent 62%),
    radial-gradient(46% 38% at 94% 4%, rgba(139, 140, 249, .14), transparent 64%),
    radial-gradient(70% 46% at 50% 104%, rgba(74, 222, 155, .07), transparent 66%);
}

/* Grafiet — neutraal grijs met koraal */
[data-theme="graphite"] {
  color-scheme: dark;
  --ebony: #111113; --ebony-2: #171719; --panel: #1d1d20; --panel-2: #242428;
  --line: #2d2d32; --line-soft: #212125;
  --bone: #f0f0f2; --bone-2: #aeaeb4; --bone-3: #76767e;
  --accent: #ff7a59; --accent-hi: #ffa585; --accent-dim: #9e4630;
  --accent-ink: #1c0902; --accent-rgb: 255, 122, 89;
  --glass-1: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .085);
  --glass-edge: rgba(255, 255, 255, .13); --glass-top: rgba(255, 255, 255, .2);
  --glass-shadow: 0 14px 34px -18px rgba(0, 0, 0, .85);
  --veil: rgba(17, 17, 19, .64);
  --ambient:
    radial-gradient(56% 40% at 10% -4%, rgba(255, 122, 89, .13), transparent 62%),
    radial-gradient(46% 38% at 92% 6%, rgba(122, 162, 247, .10), transparent 64%),
    radial-gradient(70% 46% at 50% 104%, rgba(79, 209, 197, .07), transparent 66%);
}

/* Botanisch — diep groen met goud */
[data-theme="botanical"] {
  color-scheme: dark;
  --ebony: #06140f; --ebony-2: #0a1d16; --panel: #11291f; --panel-2: #163327;
  --line: #1f4234; --line-soft: #143024;
  --bone: #e7f3ea; --bone-2: #9fbfab; --bone-3: #678b76;
  --accent: #e3b64c; --accent-hi: #f7d684; --accent-dim: #8a6b1f;
  --accent-ink: #11200f; --accent-rgb: 227, 182, 76;
  --glass-1: rgba(178, 255, 208, .05); --glass-2: rgba(178, 255, 208, .095);
  --glass-edge: rgba(160, 235, 188, .15); --glass-top: rgba(196, 250, 214, .22);
  --glass-shadow: 0 14px 34px -18px rgba(0, 12, 7, .88);
  --veil: rgba(6, 20, 15, .64);
  --ambient:
    radial-gradient(60% 44% at 8% -4%, rgba(52, 190, 130, .20), transparent 64%),
    radial-gradient(48% 38% at 94% 4%, rgba(227, 182, 76, .13), transparent 64%),
    radial-gradient(70% 46% at 50% 104%, rgba(30, 150, 120, .12), transparent 66%);
}

/* Perkament — licht, inkt en indigo; voor daglicht op de muziekstandaard */
[data-theme="paper"] {
  color-scheme: light;
  --ebony: #f4f1e8; --ebony-2: #ece8dc; --panel: #fffdf8; --panel-2: #f8f5ec;
  --line: #d9d3c3; --line-soft: #e6e1d4;
  --bone: #1e1c17; --bone-2: #54504a; --bone-3: #817c71;
  --brass: #a06a0c;
  --accent: #3b4cc0; --accent-hi: #5f70dd; --accent-dim: #97a0e2;
  --accent-ink: #ffffff; --accent-rgb: 59, 76, 192;
  --verdigris: #0f766e; --steel: #1d4ed8; --plum: #7e22ce; --copper: #b4442a;
  --glass-1: rgba(255, 255, 255, .5); --glass-2: rgba(255, 255, 255, .82);
  --glass-edge: rgba(80, 70, 45, .16); --glass-top: rgba(255, 255, 255, .95);
  --glass-shadow: 0 14px 30px -20px rgba(70, 60, 30, .4);
  --veil: rgba(250, 247, 239, .68);
  --ambient:
    radial-gradient(58% 42% at 8% -4%, rgba(59, 76, 192, .14), transparent 62%),
    radial-gradient(46% 38% at 94% 4%, rgba(190, 120, 90, .13), transparent 64%),
    radial-gradient(70% 46% at 50% 104%, rgba(214, 180, 70, .14), transparent 66%);
}

/* Werkplaats volgt het systeem: donker ebbenhout of licht papier. */
[data-theme="paper"] .note .dot-label { fill: #fffaf1; }
[data-theme="paper"] .deg-other .dot { fill: #8a7d68; }

* { box-sizing: border-box; }

/* display: grid/flex op een element wint het van het hidden-attribuut */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ebony);
  color: var(--bone);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
}

/* Gekleurd licht achter het glas; zonder iets om te breken is blur leeg. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ambient);
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.wrap {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 28px);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- glas ---------- */

.glass {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
}

.veiled {
  background: linear-gradient(180deg, var(--veil), color-mix(in srgb, var(--veil) 86%, transparent));
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .veiled { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}

/* ---------- topbalk ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
}

.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 58px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
}
.brand-mark {
  display: flex;
  filter: drop-shadow(0 2px 7px rgba(224, 161, 50, .32));
}


.icon-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  color: var(--bone-2);
  padding: 8px 13px;
  border-radius: 999px;
  font-size: .875rem;
  transition: color var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.icon-btn:hover {
  color: var(--bone);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .10);
}
.icon-btn[aria-pressed="false"] { color: var(--bone-3); }
.icon-btn[aria-pressed="false"] #soundIcon { text-decoration: line-through; }
.install-btn { border-color: var(--accent-dim); color: var(--accent); }

@media (max-width: 620px) {
  .icon-btn-text { display: none; }
  .icon-btn { padding: 9px 12px; }
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.field { display: grid; gap: 6px; font-size: .8125rem; color: var(--bone-3); }
.field.inline { display: block; }
.field select {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  color: var(--bone);
  border-radius: var(--radius-s);
  padding: 10px 11px;
  font-size: .9375rem;
  transition: border-color var(--t);
}
.field select:hover { border-color: color-mix(in srgb, var(--accent) 44%, transparent); }
.field.checkbox { display: flex; align-items: center; gap: 9px; align-self: end; padding-bottom: 10px; }
.field.checkbox input { width: 17px; height: 17px; accent-color: var(--accent); }
.field.checkbox span { font-size: .9375rem; color: var(--bone); }

/* Noot boven, intervalgraad eronder: anders leest "C ♭3" als C-mol. */
.scale-strip {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: start;
  font-size: 1rem; color: var(--bone-2); margin: 0;
}
.scale-strip .sn {
  display: inline-grid; justify-items: center; gap: 0;
  color: var(--bone); line-height: 1.15;
}
.scale-strip .sn-root { color: var(--brass); font-weight: 600; }
.scale-strip .sd { font-size: .6875rem; color: var(--bone-3); font-weight: 400; }
.scale-strip.lg { gap: 18px; font-size: 1.25rem; }

/* ---------- views ---------- */

main { padding-block: 26px 48px; }
.view { display: grid; gap: 30px; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.view.is-entering { animation: viewIn 300ms cubic-bezier(.2,.7,.25,1) both; }
.view.is-entering .stagger > * {
  animation: riseIn 340ms cubic-bezier(.2,.7,.25,1) both;
  animation-delay: calc(var(--i, 0) * 32ms + 40ms);
}

.block { display: grid; gap: 14px; }
.block > h2 {
  font-size: 1.0625rem;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.block > h2 .hint { font-size: .8125rem; color: var(--bone-3); font-weight: 400; }
.lede { color: var(--bone-2); max-width: var(--measure); }

/* kop van de toonsoort */
.keyhead { display: grid; gap: 6px; }
.keyhead h1, .keyhead h2 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 600;
}
.keyhead .facts { color: var(--bone-2); font-size: .9375rem; }
.keyhead .facts b { color: var(--bone); font-weight: 500; }

/* ---------- akkoordkaarten ---------- */

.chordgrid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.chordcard {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  display: grid; gap: 7px;
  text-align: left;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
@supports (backdrop-filter: blur(4px)) {
  .chordcard { backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); }
}
.chordcard:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .10);
}
.chordcard:active { transform: scale(.985); }

.chordcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }

.chordname {
  font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline;
}
.chordname .sfx { font-size: .6875em; margin-left: 1px; }

.numeral {
  font-size: .8125rem; color: var(--bone-3);
  border: 1px solid var(--glass-edge); border-radius: 5px;
  padding: 1px 6px; line-height: 1.35;
  background: var(--glass-1);
}
.numeral.is-tonic { color: var(--accent); border-color: var(--accent-dim); }

.chordcard .shape-label { font-size: .75rem; color: var(--bone-3); }
.chordcard .role { font-size: .8125rem; color: var(--bone-2); }

.chordgrid { width: 100%; height: auto; display: block; }
.cg-string, .cg-fret { stroke: var(--bone-3); stroke-width: .9; opacity: .68; }
.cg-nut { fill: var(--bone-2); }
.cg-dot { fill: var(--accent); }
.cg-barre { fill: var(--accent); opacity: .92; }
.cg-open { fill: none; stroke: var(--bone-2); stroke-width: 1.4; }
.cg-mark { fill: var(--bone-3); font-size: 11px; }
.cg-pos { fill: var(--bone-2); font-size: 11px; font-weight: 600; }

/* voicing-rij in de akkoordenweergave */
.voicings { display: flex; gap: 10px; flex-wrap: wrap; }
.voicing {
  width: 120px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius); padding: 9px 7px 7px; display: grid; gap: 3px;
  transition: border-color var(--t);
}
.voicing:hover { border-color: color-mix(in srgb, var(--accent) 44%, transparent); }
.voicing figcaption { font-size: .6875rem; color: var(--bone-3); text-align: center; }
.voicing .play {
  justify-self: center; background: none; border: 0; color: var(--bone-3);
  font-size: .75rem; padding: 4px 9px; border-radius: 999px;
  transition: color var(--t), background var(--t);
}
.voicing .play:hover { color: var(--accent); background: var(--glass-2); }

/* ---------- hals ---------- */

.neck-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--ebony) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--ebony) 30%, transparent) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.neck { display: block; }
.fretwire { stroke: var(--fret, var(--nickel)); stroke-width: 2.4; opacity: .85; }
.nut { fill: var(--nut-c, #e9ddc4); }
.inlay { fill: var(--inlay-c, #d9cdb4); opacity: var(--inlay-op, .18); }
.gstring { stroke: var(--string-c, #cfc3ab); opacity: var(--string-op, .55); }
.string-label { fill: var(--bone-3); font-size: 12px; font-weight: 500; }
.fret-number { fill: var(--bone-3); font-size: 11px; }
.fret-number.strong { fill: var(--bone-2); font-weight: 600; }

.note .dot { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.note .dot-label { font-size: 11px; font-weight: 600; fill: #17120b; }
.note.is-root .dot-label { font-size: 11.5px; }
.note { cursor: pointer; }
.note:hover .dot { stroke: var(--bone); stroke-width: 1.6; }

.deg-root    .dot { fill: var(--brass); }
.deg-third   .dot { fill: var(--verdigris); }
.deg-fifth   .dot { fill: var(--steel); }
.deg-seventh .dot { fill: var(--plum); }
.deg-blue    .dot { fill: var(--copper); }
.deg-other   .dot { fill: #cdc1aa; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8125rem; color: var(--bone-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- chips ---------- */

.chip {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  color: var(--bone-2); border-radius: 999px;
  padding: 8px 14px; font-size: .875rem;
  transition: color var(--t), border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
}
.chip:hover { color: var(--bone); border-color: color-mix(in srgb, var(--accent) 44%, transparent); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip.is-on {
  color: var(--accent-ink);
  background: linear-gradient(152deg, var(--accent-hi), var(--accent));
  border-color: transparent;
  box-shadow: 0 4px 12px -7px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .32);
  font-weight: 600;
}

.chip.sub { padding: 7px 12px; font-size: .8125rem; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .note .dot-label,
  [data-theme="workshop"] .note .dot-label { fill: #fffaf1; }
  :root:not([data-theme]) .deg-other .dot,
  [data-theme="workshop"] .deg-other .dot { fill: #8a7d68; }
}

/* ---------- progressies ---------- */

.prog { border-top: 1px solid var(--glass-edge); padding: 20px 0; display: grid; gap: 12px; }
.prog:first-of-type { border-top: 0; padding-top: 2px; }
.prog-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prog-head h3 { font-size: 1.0625rem; }
.prog-note { color: var(--bone-2); font-size: .9375rem; max-width: var(--measure); }
.prog-chords { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }

.prog-step {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius); padding: 10px 12px 9px;
  display: grid; gap: 2px; min-width: 94px; text-align: left;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.prog-step:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.prog-step:active { transform: scale(.98); }
.prog-step .step-no { font-size: .6875rem; color: var(--bone-3); }
.prog-step .chordname { font-size: 1.1875rem; }
.prog-step .numeral { border: 0; padding: 0; font-size: .75rem; background: none; }

/* het akkoord dat nu klinkt */
.prog-step.is-playing {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .18), 0 8px 22px -12px rgba(var(--accent-rgb), .8);
  transform: translateY(-2px);
}

.play-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(152deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  border: 0; border-radius: 999px; padding: 9px 17px;
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 5px 16px -9px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .36);
  transition: filter var(--t), transform var(--t), box-shadow var(--t);
}
.play-btn:hover { filter: brightness(1.07); box-shadow: 0 7px 20px -9px rgba(var(--accent-rgb), .72), inset 0 1px 0 rgba(255,255,255,.4); }
.play-btn:active { transform: scale(.97); }

/* ---------- tabellen ---------- */

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--glass-edge); }
.table th { color: var(--bone-3); font-weight: 500; font-size: .8125rem; }
.table td b { font-weight: 600; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--glass-1); }

.capo-list { display: grid; gap: 10px; }
.capo-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius); padding: 13px 15px; text-align: left; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.capo-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.capo-item:active { transform: scale(.995); }
.capo-item[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.capo-fret {
  font-size: 1.5rem; font-weight: 600; color: var(--accent);
  letter-spacing: -0.03em; line-height: 1;
}
.capo-fret small { display: block; font-size: .625rem; color: var(--bone-3); font-weight: 400; letter-spacing: 0; }
.capo-item .grip { font-size: .9375rem; }
.capo-item .detail { font-size: .8125rem; color: var(--bone-2); }

/* ---------- metronoom ---------- */

.metro { display: grid; gap: 18px; justify-items: start; }
.metro-bpm {
  font-size: clamp(3rem, 14vw, 5rem); font-weight: 600;
  letter-spacing: -0.045em; line-height: .9; color: var(--bone);
}
.metro-bpm small { font-size: .9rem; font-weight: 400; color: var(--bone-3); letter-spacing: 0; margin-left: 8px; }
.metro input[type="range"] { width: min(420px, 100%); accent-color: var(--accent); }
.beats { display: flex; gap: 9px; }
.beat {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--glass-edge); background: var(--glass-1);
  transition: background 90ms linear, border-color 90ms linear, transform 90ms ease, box-shadow 90ms linear;
}
.beat.is-on {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.22);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
}
.beat.is-accent.is-on {
  background: var(--bone); border-color: var(--bone);
  box-shadow: 0 0 14px rgba(237, 227, 209, .5);
}

/* ---------- oefentips ---------- */

.tips { display: grid; gap: 11px; max-width: var(--measure); }
.tip { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--bone-2); font-size: .9375rem; }
.tip .n { color: var(--accent); font-weight: 600; font-size: .875rem; padding-top: 1px; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 14px) scale(.96);
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  color: var(--bone);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  border-radius: 999px;
  padding: 10px 18px; font-size: .875rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  z-index: 60;
}
@supports (backdrop-filter: blur(4px)) {
  .toast { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- footer ---------- */

.footer { padding-block: 24px 36px; border-top: 1px solid var(--glass-edge); }
.footer p { color: var(--bone-3); font-size: .8125rem; max-width: var(--measure); }

/* korte overvloeiing bij het wisselen van thema */
html.theming, html.theming * {
  transition: background-color 280ms ease, background-image 280ms ease,
              color 280ms ease, border-color 280ms ease, fill 280ms ease,
              box-shadow 280ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- versieknop en changelog ---------- */

.version-btn {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 2px 0;
  font-size: .75rem; color: var(--bone-3);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--glass-edge);
  transition: color var(--t), text-decoration-color var(--t);
}
.version-btn:hover { color: var(--bone-2); text-decoration-color: var(--accent); }

.version-new {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 1px 7px 2px;
  font-size: .625rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
}

.release {
  border-top: 1px solid var(--glass-edge);
  padding: 20px 0;
  display: grid; gap: 10px;
  max-width: var(--measure);
}
.release:first-of-type { border-top: 0; padding-top: 4px; }

.release-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.release-head h3 { font-size: 1.0625rem; }
.release-date { font-size: .8125rem; color: var(--bone-3); margin-left: auto; }

.release-group { display: grid; gap: 4px; }
.release-kind { font-size: .8125rem; color: var(--accent); font-weight: 600; }
.release-items { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.release-items li { color: var(--bone-2); font-size: .9375rem; }
.release-items li::marker { color: var(--bone-3); }

/* ---------- theorie ---------- */

.topic {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  box-shadow: inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--t);
}
.topic:hover { border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
.topic[open] { border-color: color-mix(in srgb, var(--accent) 46%, transparent); }

.topic summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 42px;
}
.topic summary::-webkit-details-marker { display: none; }
.topic summary::after {
  content: '';
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--bone-3);
  border-bottom: 1.6px solid var(--bone-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t), border-color var(--t);
}
.topic[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
  border-color: var(--accent);
}
.topic summary:hover::after { border-color: var(--bone-2); }

.topic-title { font-size: 1rem; font-weight: 600; }
.topic-lead { font-size: .875rem; color: var(--bone-3); }

.topic-body {
  padding: 0 16px 16px;
  display: grid; gap: 10px;
  max-width: var(--measure);
  animation: topicIn 220ms cubic-bezier(.2,.7,.25,1) both;
}
@keyframes topicIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.topic-body p { color: var(--bone-2); font-size: .9375rem; }
.topic-body b { color: var(--bone); font-weight: 600; }

.topic-key {
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 13px;
  margin-top: 2px;
  color: var(--bone) !important;
}

/* ---------- CAGED ---------- */

.caged-note {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 16px;
}
.caged-note p {
  color: var(--bone-2); font-size: .9375rem;
  flex: 1 1 280px; max-width: var(--measure);
}
.caged-card { flex: 0 0 auto; }

/* ---------- begeleiding ---------- */

.loop-tempo { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--bone-3); }
.loop-tempo input[type="range"] { width: min(200px, 40vw); accent-color: var(--accent); }
.loop-bpm { color: var(--bone); font-variant-numeric: tabular-nums; min-width: 62px; }

.prog.is-looping { position: relative; }
.prog.is-looping::before {
  content: '';
  position: absolute; left: -14px; top: 18px; bottom: 14px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  opacity: .7;
}

/* ---------- transponeren ---------- */

.sheet-controls {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end;
}
.sheet-from { display: flex; gap: 8px; }
.sheet-controls .field > span { font-size: .8125rem; color: var(--bone-3); }
.sheet-controls select {
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  color: var(--bone); border-radius: var(--radius-s);
  padding: 9px 10px; font-size: .9375rem;
}

.sheet-meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  font-size: .875rem;
}
.sheet-detected { color: var(--bone-2); }
.sheet-shift { color: var(--accent); font-weight: 600; }

.sheet-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.sheet-pane { display: grid; gap: 10px; align-content: start; }
.sheet-pane-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sheet-pane-head h3 { font-size: 1rem; margin-right: auto; }

.sheet-input, .sheet-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem; line-height: 1.6;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius);
  color: var(--bone);
  padding: 14px 16px;
  margin: 0;
  min-height: 300px;
  tab-size: 4;
}
.sheet-input { width: 100%; resize: vertical; }
.sheet-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sheet-output { white-space: pre-wrap; overflow-x: auto; }
.sheet-capo { font-size: .8125rem; color: var(--bone-2); }

.borrowed-why {
  color: var(--bone-2); font-size: .9375rem;
  max-width: var(--measure); margin-top: 10px;
}

.game-score { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.game-score p { font-size: .875rem; color: var(--bone-3); }
.game-score b { font-size: 1.5rem; color: var(--bone); font-weight: 600; letter-spacing: -.02em; }
.game-best b { font-size: 1rem; color: var(--accent); }

.game-feedback { font-size: 1rem; color: var(--bone-2); min-height: 1.5em; }
.game-feedback.is-good { color: var(--verdigris); }
.game-feedback.is-bad { color: var(--copper); }

.quiz-dot .dot { fill: var(--ring-fill, rgba(0,0,0,.22)); stroke: var(--ring, #cfc3ab); stroke-width: 1.4; opacity: .5; }
.quiz-dot:hover .dot { opacity: 1; fill: rgba(var(--accent-rgb), .35); stroke: var(--accent); }
.quiz-dot[class*="mark-"] .dot { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.quiz-dot.mark-correct .dot { fill: var(--verdigris); opacity: 1; }
.quiz-dot.mark-wrong .dot { fill: var(--copper); opacity: 1; }
.quiz-dot.mark-target .dot { fill: var(--verdigris); opacity: .9; }
.quiz-dot .dot-label { fill: #17120b; }

/* ==========================================================================
   Eén bovenbalk: logo, onderdelen, toonsoort, geluid en instellingen
   ========================================================================== */

.topbar-inner { gap: 18px; justify-content: flex-start; }
.brand { flex: 0 0 auto; color: var(--bone); text-decoration: none; }
.topbar-right { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.sections { position: relative; display: flex; gap: 2px; align-self: stretch; }
.section {
  background: none; border: 0; color: var(--bone-3);
  padding: 0 13px; font-size: .9375rem; white-space: nowrap;
  transition: color var(--t);
}
.section:hover { color: var(--bone-2); }
.section[aria-current="page"] { color: var(--bone); font-weight: 500; }
.section-ink {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .42);
  transition: transform var(--t-slow), width var(--t-slow), opacity var(--t);
  pointer-events: none;
}
.section-ink.no-anim { transition: none; }

.keybtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-top);
  color: var(--bone-2); border-radius: 999px;
  padding: 7px 12px 7px 15px; font-size: .9375rem; white-space: nowrap;
  transition: border-color var(--t), box-shadow var(--t);
}
.keybtn b { color: var(--accent); font-weight: 650; font-size: 1.0625rem; }
.keybtn:hover, .keybtn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .10);
}
.keybtn .caret { width: 12px; height: 12px; transition: transform var(--t); }
.keybtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.icon-btn { padding: 8px 11px; }

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 8px; }
  .brand-name { display: none; }
  .sections { order: 3; width: 100%; height: 42px; justify-content: space-between; }
  .section { flex: 1; padding: 0 6px; }
}

/* ---------- zwevende panelen ---------- */

.pop-anchor { position: relative; height: 0; }
.popover {
  position: absolute; right: 0; top: 8px; z-index: 50;
  width: min(440px, calc(100vw - 24px));
  display: grid; gap: 12px; padding: 16px;
  background: linear-gradient(152deg, var(--ebony-2), var(--ebony));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.75), inset 0 1px 0 var(--glass-top);
  animation: panelIn var(--t-slow) both;
}
@supports (backdrop-filter: blur(4px)) {
  .popover { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.setup-pop { grid-template-columns: 1fr 1fr; width: min(460px, calc(100vw - 24px)); }
.setup-pop .pop-title { grid-column: 1 / -1; }
.pop-title { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-3); }
.pop-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.key-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.key-root, .key-mode {
  background: var(--glass-1); border: 1px solid var(--glass-edge);
  color: var(--bone-2); border-radius: var(--radius-s);
  padding: 9px 4px; font-size: 1rem; font-weight: 500;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.key-mode { font-size: .8125rem; padding: 8px 6px; font-weight: 400; }
.key-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.key-root:hover, .key-mode:hover { color: var(--bone); border-color: color-mix(in srgb, var(--accent) 44%, transparent); }
.key-root.is-on, .key-mode.is-on {
  color: var(--accent-ink); border-color: transparent; font-weight: 600;
  background: linear-gradient(152deg, var(--accent-hi), var(--accent));
}
@media (max-width: 420px) { .key-modes { grid-template-columns: 1fr 1fr; } .setup-pop { grid-template-columns: 1fr; } }

/* ---------- schakelaars ---------- */

.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--glass-1); border: 1px solid var(--glass-edge);
  border-radius: 10px; width: fit-content; max-width: 100%;
}
.seg {
  background: none; border: 0; color: var(--bone-3);
  padding: 7px 12px; border-radius: 7px; font-size: .875rem; white-space: nowrap;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.seg:hover { color: var(--bone); }
.seg.is-on {
  color: var(--bone); font-weight: 500;
  background: linear-gradient(152deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .14));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}
.seg-sub { color: var(--bone-3); font-size: .75em; font-weight: 400; margin-left: 2px; }
.segmented.small .seg { padding: 5px 10px; font-size: .8125rem; }
.segmented.subnav { margin-bottom: -8px; }
.segmented.subnav .seg { padding: 8px 18px; font-size: .9375rem; }

.toolbar { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.toolbar-label { font-size: .8125rem; color: var(--bone-3); }

.sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec-head h2 { font-size: 1.125rem; }
.sec-head .hint { font-size: .8125rem; color: var(--bone-3); }

/* ---------- spelen ---------- */

.keyhead { gap: 10px; }
.keyhead .facts { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; }
.linkish {
  background: none; border: 0; padding: 0; color: var(--bone-3); font-size: .9375rem;
  border-bottom: 1px dashed transparent; transition: color var(--t), border-color var(--t);
}
.linkish b { color: var(--bone-2); font-weight: 500; }
.linkish:hover { color: var(--bone-2); border-bottom-color: var(--bone-3); }
.linkish:hover b { color: var(--accent); }

.showing {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: .9375rem; color: var(--bone-2);
}
.showing .chordname { font-size: 1.0625rem; color: var(--bone); }
.neck-foot { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; align-items: center; }

.dim-note .dot { fill: var(--ring-fill, rgba(0,0,0,.25)); stroke: var(--ring, #cfc3ab); stroke-width: 1.4; opacity: .55; }
.dim-note:hover .dot { opacity: 1; }
.chip .chordname, .showing .chordname, .linkish .chordname { font-size: 1em; }
.shade { fill: rgba(var(--accent-rgb), .10); stroke: rgba(var(--accent-rgb), .45); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }

.chordcard { cursor: pointer; }
.chordcard.is-selected {
  border-color: var(--accent);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .2);
  background: linear-gradient(152deg, rgba(var(--accent-rgb), .14), var(--glass-1));
}

.chord-detail {
  display: grid; gap: 12px; padding: 16px 18px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius);
  animation: panelIn var(--t-slow) both;
}
.chord-detail-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chord-detail-name .chordname { font-size: 1.75rem; }
.chord-detail-head .notes { color: var(--bone-2); letter-spacing: .04em; }
.chord-detail-head .close { margin-left: auto; }
.chord-detail-text { color: var(--bone-2); font-size: .9375rem; max-width: var(--measure); }

.prog-list { display: grid; }
.prog { grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 12px 20px; padding: 14px 0; }
.prog-name { font-weight: 600; }
.prog-note { font-size: .8125rem; color: var(--bone-3); }
.prog-step { min-width: 64px; padding: 7px 10px 6px; }
.prog-step .chordname { font-size: 1.0625rem; }
.prog-actions { display: flex; gap: 6px; }

.capo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.capo-cell {
  display: grid; gap: 2px; padding: 10px 12px;
  background: var(--glass-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-s);
}
.capo-cell .numeral { justify-self: start; }
.capo-grip .chordname { font-size: 1.25rem; }
.capo-sound { font-size: .75rem; color: var(--bone-3); }

/* ---------- halstrainer ---------- */

.trainer {
  padding: 18px 20px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  border-radius: var(--radius);
}
.tr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tr-prompt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tr-prompt b { font-size: clamp(2rem, 6vw, 3rem); font-weight: 650; letter-spacing: -.03em; color: var(--accent); line-height: 1; }
.tr-prompt b .chordname { font-size: 1em; }
.tr-small { color: var(--bone-2); font-size: 1rem; }
.tr-meta { display: flex; gap: 16px; align-items: baseline; font-variant-numeric: tabular-nums; }
.tr-progress { font-size: 1.125rem; color: var(--bone); font-weight: 600; }
.tr-clock { color: var(--bone-3); min-width: 60px; text-align: right; }
.tr-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.tr-answer {
  background: var(--glass-1); border: 1px solid var(--glass-edge); color: var(--bone);
  border-radius: var(--radius-s); padding: 11px 4px; font-size: 1rem; font-weight: 500;
  transition: border-color var(--t), background var(--t);
}
.tr-answer:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tr-answer.is-right { background: color-mix(in srgb, var(--verdigris) 30%, transparent); border-color: var(--verdigris); }
.tr-answer.is-wrong { background: color-mix(in srgb, var(--copper) 26%, transparent); border-color: var(--copper); }
.tr-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.quiz-dot.mark-target .dot { fill: var(--accent); opacity: 1; }
.quiz-dot.mark-target:not(.mark-correct) .dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.view-inner { display: grid; gap: 30px; }

/* grid-kinderen mogen smaller worden dan hun inhoud; de hals scrolt dan zelf */
.view > *, .block > *, .view-inner > *, .trainer > * { min-width: 0; }
@media (max-width: 760px) {
  .prog { grid-template-columns: 1fr auto; }
  .prog-main { grid-column: 1 / -1; }
  .prog-step { min-width: 52px; }
}

/* ---------- staande hals ---------- */

.neck.vertical { margin-inline: auto; }
.neck-scroll:has(.neck.vertical) { overflow-x: hidden; background: none; }

/* ---------- de meeloper ---------- */

.neck-dock {
  position: fixed; left: 50%; bottom: 12px; z-index: 35;
  width: min(1180px, calc(100vw - 20px));
  transform: translate(-50%, 16px); opacity: 0;
  display: grid; gap: 6px; padding: 10px 14px 8px;
  background: linear-gradient(152deg, var(--ebony-2), var(--ebony));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-edge));
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.8), inset 0 1px 0 var(--glass-top);
  transition: transform var(--t-slow), opacity var(--t-slow);
}
.neck-dock.is-up { transform: translate(-50%, 0); opacity: 1; }
@supports (backdrop-filter: blur(4px)) {
  .neck-dock { background: color-mix(in srgb, var(--ebony) 88%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.dock-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dock-now { font-size: .9375rem; color: var(--bone-2); margin-right: auto; }
.dock-now .chordname { font-size: 1.25rem; color: var(--bone); }
.dock-head .numeral { order: -1; }
.dock-neck { display: flex; justify-content: center; overflow: hidden; }
.dock-row { display: flex; gap: 16px; align-items: center; }
.dock-grip { width: 92px; flex: 0 0 auto; }
.dock-tones { display: flex; gap: 14px; flex-wrap: wrap; font-size: 1.125rem; font-weight: 600; }
.dock-tones span { display: inline-flex; align-items: center; gap: 6px; }
.dock-tones i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #cdc1aa; }
.dock-tones .deg-root i { background: var(--brass); }
.dock-tones .deg-third i { background: var(--verdigris); }
.dock-tones .deg-fifth i { background: var(--steel); }
.dock-tones .deg-seventh i { background: var(--plum); }
.dock-tones .deg-blue i { background: var(--copper); }
body.dock-open main { padding-bottom: 34vh; }

/* hals met de greep van de positie ernaast */
.neck-slot { display: grid; gap: 14px; }
.neck-slot.with-side { display: flex; flex-direction: row; align-items: center; gap: 28px; }
.with-side > .neck-scroll { flex: 0 1 auto; min-width: 0; }
.caged-note.side { flex: 0 1 300px; flex-direction: column; align-items: flex-start; }
.caged-note.side p { flex: 0 1 auto; font-size: .875rem; }
@media (max-width: 900px) {
  .neck-slot.with-side { flex-direction: column; align-items: stretch; }
  .caged-note.side { flex: 0 0 auto; flex-direction: row; align-items: center; }
}

/* halstrainer op de telefoon: de opdracht blijft in beeld tijdens het tikken */
@media (max-width: 640px) {
  .trainer .tr-top {
    position: sticky; top: var(--topbar-h, 92px); z-index: 5;
    margin: -18px -14px 0; padding: 12px 14px 10px;
    background: var(--ebony-2);
    border-bottom: 1px solid var(--glass-edge);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .trainer .game-feedback {
    position: sticky; top: calc(var(--topbar-h, 92px) + 64px); z-index: 5;
    margin: 0 -14px; padding: 2px 14px 8px;
    background: var(--ebony-2);
  }
  .tr-prompt b { font-size: 2.2rem; }
  .trainer { padding: 18px 14px; }
}

/* iPhone als app op het beginscherm: niet onder de statusbalk, de inkeping
   of de thuisbalk tekenen */
.topbar { padding-top: env(safe-area-inset-top); }
.wrap {
  padding-left: max(clamp(14px, 3vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(14px, 3vw, 28px), env(safe-area-inset-right));
}
.neck-dock { bottom: calc(12px + env(safe-area-inset-bottom)); }

/* losse snaren liggen naast de toets, op de achtergrond van de app: hun
   lege ring volgt de tekstkleur van de app, niet de kleur van de hals */
.open.dim-note .dot,
.open.quiz-dot:not([class*="mark-"]) .dot { stroke: var(--bone-3); fill: transparent; opacity: .8; }

/* ==========================================================================
   Spelen: hals links, paneel rechts
   ========================================================================== */

.keyhead.compact, .view > .keyhead { gap: 6px 22px; }
@media (min-width: 1080px) {
  .view > .keyhead { display: flex; flex-wrap: wrap; align-items: baseline; }
  .view > .keyhead h1 { font-size: 2rem; }
  .view > .keyhead .facts { flex-basis: 100%; }
}

.play-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1080px) {
  .play-grid { grid-template-columns: minmax(0, 1fr) clamp(330px, 28vw, 410px); }
  .play-main.can-stick { position: sticky; top: calc(var(--topbar-h, 58px) + 12px); }
  .play-panel {
    position: sticky; top: calc(var(--topbar-h, 58px) + 12px);
    /* vaste hoogte: dan verandert de pagina niet van lengte als de inhoud wisselt */
    height: calc(100vh - var(--topbar-h, 58px) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
.play-main { gap: 12px; }

/* de akkoordrij onder de hals */
.chord-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.chord-chip {
  display: grid; justify-items: start; gap: 0; padding: 7px 10px 6px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge); border-radius: var(--radius-s);
  box-shadow: inset 0 1px 0 var(--glass-top);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.chord-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.chord-chip:active { transform: scale(.97); }
.chord-chip .chordname { font-size: 1.125rem; }
.chip-numeral { font-size: .6875rem; color: var(--bone-3); }
.chord-chip.is-tonic .chip-numeral { color: var(--accent); }
.chord-chip.is-selected {
  border-color: var(--accent);
  background: linear-gradient(152deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .12));
  box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 3px rgba(var(--accent-rgb), .16);
}

/* het paneel */
.play-panel {
  display: grid; gap: 12px; align-content: start;
  padding: 12px 14px 16px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
}
.segmented.panel-tabs { width: 100%; display: grid; grid-template-columns: auto auto auto auto; }
.segmented.panel-tabs .seg { padding: 8px 6px; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-chord { font-weight: 650; color: var(--accent); }
.panel-body { display: grid; gap: 14px; min-width: 0; }
.panel-body > * { min-width: 0; }
.panel-body .sec-head h2 { display: none; }
.panel-hint { font-size: .875rem; color: var(--bone-3); }
.chordgrid-list.compact { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.chordgrid-list.compact .chordcard { padding: 9px 9px 7px; gap: 4px; }
.chordgrid-list.compact .chordname { font-size: 1.125rem; }
.play-panel .chord-detail { padding: 0; border: 0; background: none; animation: none; }
.play-panel .voicings { gap: 8px; }
.play-panel .voicing { width: 104px; }
.play-panel .prog { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 0; align-items: start; }
.play-panel .prog-main { grid-column: 1; grid-row: 1; }
.play-panel .prog-actions { grid-column: 2; grid-row: 1; }
.play-panel .prog-chords { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; gap: 5px; }
.play-panel .prog-step { min-width: 0; flex: 1 1 0; padding: 6px 7px 5px; }
.play-panel .prog-step .chordname { font-size: 1rem; }
.play-panel .prog.is-looping::before { left: -8px; }
.voicing { margin: 0; }
.play-panel .loop-tempo input[type="range"] { width: 120px; }

/* smal: soort en akkoordrij boven de hals; op de telefoon plakt de rij */
@media (max-width: 1079px) {
  .play-main > .toolbar:first-child { order: -3; }
  .play-main > .chord-types { order: -2; }
  .play-main > .chord-row { order: -1; }
}
@media (max-width: 640px) {
  .play-main > .chord-row {
    position: sticky; top: var(--topbar-h, 92px); z-index: 6;
    margin-inline: -14px; padding: 8px 14px;
    background: var(--ebony);
    border-bottom: 1px solid var(--glass-edge);
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  }
  .chord-chip { padding: 6px 4px 5px; justify-items: center; overflow: hidden; }
  .chord-chip .chordname { font-size: .9375rem; white-space: nowrap; }
  .chord-chip .chordname .sfx { font-size: .62em; }
}

/* ---------- schermvullend ---------- */

.focus-btn { margin-left: auto; }
.focus-btn .fx { font-style: normal; margin-right: 4px; }
.focus-key { font-weight: 650; font-size: 1.0625rem; margin-right: 6px; }
body.neck-focus .topbar,
body.neck-focus footer,
body.neck-focus .view > .keyhead,
body.neck-focus .play-panel,
body.neck-focus .neck-dock { display: none !important; }
body.neck-focus main { padding-block: 14px; max-width: none; }
body.neck-focus .play-grid { grid-template-columns: minmax(0, 1fr); }
body.neck-focus .play-main { position: static; }
body.neck-focus .neck-scroll { display: flex; justify-content: center; }
body.neck-focus .with-side > .neck-scroll { justify-content: flex-end; }
body.neck-focus .chord-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
body.neck-focus .chord-chip .chordname { font-size: 1.375rem; }
@media (max-width: 640px) {
  body.neck-focus .play-main > .chord-row { top: 0; }
}

/* ==========================================================================
   0.14 — bediening, rust en snelheid
   ========================================================================== */

/* keuzes voor de hals: op de telefoon achter één knop */
.opts-summary { display: none; }
.view-opts { display: grid; gap: 10px; }
@media (max-width: 640px) {
  .opts-summary { display: flex; gap: 8px; align-items: center; order: -4; }
  .opts-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; }
  .opts-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .opts-label { color: var(--bone); font-weight: 600; margin-right: 2px; }
  .opts-caret { color: var(--bone-3); }
  .opts-toggle.is-on {
    color: var(--bone-2); font-weight: 400; background: var(--glass-2);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: none;
  }
  .view-opts { order: -3; }
  .view-opts:not(.is-open) { display: none; }
  .view-opts:not(.is-open) ~ .chord-types { display: none; }
  .view-opts .focus-btn { display: none; }
  body.neck-focus .opts-summary .focus-btn { display: inline-flex; }
}

/* rustiger: bijzaken zonder eigen kader, hoofdzaken (hals, akkoordrij) springen eruit */
.view-opts .segmented, .chord-types .segmented { background: none; border-color: transparent; padding: 0; gap: 2px; }
.view-opts .seg, .chord-types .seg { padding: 5px 10px; }
.view-opts .seg.is-on, .chord-types .seg.is-on {
  background: rgba(var(--accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35);
}
.view > .keyhead .facts { font-size: .875rem; }
.view > .keyhead .facts > span { color: var(--bone-3); }
.play-panel { border-color: color-mix(in srgb, var(--glass-edge) 70%, transparent); box-shadow: inset 0 1px 0 var(--glass-top); }
.neck-foot .chip { padding: 7px 12px; font-size: .8125rem; }

/* grepen: het hele kaartje speelt */
.voicing .play { display: none; }
.voicing.playable { position: relative; cursor: pointer; user-select: none; }
.voicing.playable::after {
  content: '\25B6'; position: absolute; bottom: 6px; right: 8px;
  font-size: 10px; color: var(--bone-3); transition: color var(--t);
}
.voicing.playable:hover::after, .voicing.playable:focus-visible::after { color: var(--accent); }
.voicing.playable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voicing.is-ringing { animation: ring 520ms cubic-bezier(.2,.7,.25,1); }
@keyframes ring {
  0% { border-color: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  100% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}

/* recente toonsoorten */
.key-recent { display: flex; gap: 6px; flex-wrap: wrap; }

/* sneltoetsen */
.kbd-hint {
  background: none; border: 0; color: var(--bone-3); font-size: .75rem; padding: 2px 0;
  margin-left: auto; border-bottom: 1px dashed transparent;
}
.kbd-hint:hover { color: var(--bone-2); border-bottom-color: var(--bone-3); }
@media (hover: none), (max-width: 760px) { .kbd-hint { display: none; } }
.key-help {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); animation: panelIn var(--t-slow) both;
}
.key-help-card {
  width: min(420px, calc(100vw - 24px)); display: grid; gap: 12px; padding: 18px 20px;
  background: var(--ebony-2); border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.75);
}
.key-help-card .chip { justify-self: end; }
.key-help dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; align-items: center; }
.key-help dd { margin: 0; color: var(--bone-2); font-size: .9375rem; }
kbd {
  display: inline-block; min-width: 26px; text-align: center;
  padding: 2px 7px; border-radius: 5px; font: 600 .8125rem var(--ff);
  color: var(--bone); background: var(--glass-2);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 -1px 0 var(--glass-edge);
}

/* telefoon en tablet: geen wazig glas, dat kost veel rekenkracht bij scrollen */
@media (max-width: 760px), (hover: none) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .veiled { background: var(--ebony); }
  .neck-dock { background: var(--ebony-2); }
  .chordcard, .chord-chip, .prog-step, .chip, .segmented, .play-panel, .trainer, .topic {
    background: var(--glass-1);
  }
}

/* ==========================================================================
   Theorie: leerroutes
   ========================================================================== */

.eyebrow { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.linkish.back { justify-self: start; font-size: .875rem; }

.learn-progress { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; font-size: .875rem; color: var(--bone-2); }
.learn-progress .bar { flex: 0 1 220px; }
.learn-done { color: var(--verdigris); font-weight: 600; }
.bar { display: block; height: 6px; border-radius: 6px; background: var(--glass-2); overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width var(--t-slow); }

.route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.route-card {
  display: grid; gap: 8px; text-align: left; padding: 16px 18px 14px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  transition: border-color var(--t), transform var(--t);
}
.route-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-1px); }
.route-top { display: flex; justify-content: space-between; align-items: center; }
.route-no {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--accent-rgb), .16); color: var(--accent); font-weight: 650; font-size: .875rem;
}
.route-card.is-done .route-no { background: color-mix(in srgb, var(--verdigris) 26%, transparent); color: var(--verdigris); }
.route-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--bone); }
.route-blurb { font-size: .875rem; color: var(--bone-3); line-height: 1.45; }
.route-foot { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--bone-3); margin-top: 4px; }
.route-foot .bar { flex: 1; }

.level { font-size: .6875rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-edge); color: var(--bone-2); white-space: nowrap; }
.level.lv-1 { color: var(--verdigris); border-color: color-mix(in srgb, var(--verdigris) 45%, transparent); }
.level.lv-2 { color: var(--steel); border-color: color-mix(in srgb, var(--steel) 45%, transparent); }
.level.lv-3 { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.level.lv-4 { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 45%, transparent); }
.level.lv-5 { color: var(--plum); border-color: color-mix(in srgb, var(--plum) 45%, transparent); }

.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 780px; }
.lesson-row {
  width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 12px 14px; background: var(--glass-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-s);
  transition: border-color var(--t), background var(--t);
}
.lesson-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--glass-2); }
.lesson-no {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--glass-edge); color: var(--bone-2); font-size: .8125rem; font-weight: 600;
}
.lesson-row.is-read .lesson-no { background: color-mix(in srgb, var(--verdigris) 24%, transparent); border-color: transparent; color: var(--verdigris); }
.lesson-text { display: grid; gap: 2px; }
.lesson-title { font-weight: 600; color: var(--bone); }
.lesson-lead { font-size: .875rem; color: var(--bone-3); }

.lesson-crumbs { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .875rem; color: var(--bone-3); }
.crumb-count { margin-left: auto; }
.lesson { display: grid; gap: 16px; max-width: 820px; }
.lesson .lede { font-size: 1.0625rem; color: var(--bone-2); }
.lesson-p { color: var(--bone-2); font-size: 1rem; line-height: 1.65; max-width: var(--measure); }
.lesson-p b { color: var(--bone); font-weight: 600; }
.lb { margin: 4px 0; display: grid; gap: 8px; min-width: 0; }
.lb > figcaption { font-size: .8125rem; color: var(--bone-3); max-width: var(--measure); }
.lb-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lb-neckbox { display: grid; gap: 8px; justify-items: start; min-width: 0; width: 100%; }
.lb-neckbox .neck-scroll { max-width: 100%; }
.lb-key {
  border-left: 2px solid var(--accent); padding: 6px 0 6px 13px;
  color: var(--bone); font-size: .9375rem; border-radius: 0;
}
.lb-table-wrap { overflow-x: auto; max-width: 100%; }
.lb-table { font-size: .875rem; width: auto; min-width: 60%; }
.lb-table th { color: var(--bone-3); font-weight: 500; font-size: .8125rem; }
.lb-table td, .lb-table th { padding: 7px 14px 7px 0; white-space: nowrap; }
.lb-table tr.hl td { color: var(--accent); font-weight: 600; }
.lb .voicings { gap: 10px; }

.remember {
  margin-top: 6px; padding: 14px 18px; display: grid; gap: 8px; max-width: var(--measure);
  background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: var(--radius);
}
.remember ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--bone); font-size: .9375rem; }

.lesson-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; max-width: 820px; padding-top: 8px; border-top: 1px solid var(--glass-edge); }
.lesson-nav .play-btn { max-width: 100%; white-space: normal; text-align: left; }

.circle5-wrap { width: min(340px, 100%); }
.circle5 { width: 100%; height: auto; display: block; overflow: visible; }
.c5-ring { fill: none; stroke: var(--glass-edge); stroke-width: 1; }
.c5-dot { fill: var(--glass-1); stroke: var(--glass-edge); }
.c5-dot.is-key { fill: var(--accent); stroke: none; }
.c5-dot.is-near { fill: rgba(var(--accent-rgb), .2); stroke: rgba(var(--accent-rgb), .5); }
.c5-maj { fill: var(--bone); font-size: 15px; font-weight: 600; }
.c5-maj.is-key { fill: var(--accent-ink); }
.c5-min { fill: var(--bone-3); font-size: 11.5px; }
.c5-min.is-key, .c5-min.is-near { fill: var(--bone-2); }
.c5-sig { fill: var(--bone-3); font-size: 9.5px; }
.c5-center { fill: var(--bone-3); font-size: 11px; }

.lb-neckbox .neck-scroll { width: 100%; }
@media (max-width: 640px) {
  .lesson-nav .play-btn { width: 100%; }
  .crumb-count { margin-left: 0; width: 100%; }
}
.lb-link, .lb-sounds { justify-items: start; }

/* kwintencirkel als bediening */
.c5-panel { display: grid; gap: 10px; justify-items: center; }
.c5-panel > .segmented { justify-self: start; }
.c5-panel .panel-hint { justify-self: stretch; }
.c5-play { max-width: 340px; }
.c5-chord { cursor: pointer; }
.c5-chord .c5-dot { transition: fill var(--t), stroke var(--t); }
.c5-chord:hover .c5-dot, .c5-chord:focus-visible .c5-dot { stroke: var(--accent); stroke-width: 1.5; }
.c5-chord:focus { outline: none; }
.c5-chord.inner .c5-dot { fill: transparent; stroke: var(--glass-edge); }
.c5-chord.is-in .c5-dot { fill: rgba(var(--accent-rgb), .2); stroke: rgba(var(--accent-rgb), .55); }
.c5-chord.is-key .c5-dot { fill: var(--accent); stroke: none; }
.c5-chord.is-key text { fill: var(--accent-ink); }
.c5-chord.is-color .c5-dot { stroke: var(--bone-3); stroke-dasharray: 3 3; }
.c5-chord.is-sel .c5-dot { stroke: var(--bone); stroke-width: 2.4; stroke-dasharray: none; }
.c5-chord.inner .c5-min { fill: var(--bone-2); font-size: 11.5px; }
.c5-chord.inner.is-in .c5-min { fill: var(--bone); font-weight: 600; }
.c5-tag { font-size: 9.5px; fill: var(--bone-3); }
.c5-tag.is-in { fill: var(--accent); font-weight: 600; font-size: 10.5px; }
.c5-center.key { fill: var(--bone); font-size: 13px; font-weight: 600; }
.c5-off { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-self: start; }
.c5-off .muted { color: var(--bone-3); font-size: .75em; }

/* ==========================================================================
   Halsthema's — de kleur van de toets, los van de kleuren van de app
   ========================================================================== */

[data-neck="rosewood"] {
  --wood-hi: #5d3a27; --wood: #42281a; --wood-lo: #2d1b11;
  --fret: #a3a9ae; --nut-c: #e9ddc4; --inlay-c: #d9cdb4; --inlay-op: .18;
  --string-c: #cfc3ab; --string-op: .55; --ring: #cfc3ab; --ring-fill: rgba(0,0,0,.25);
}
[data-neck="maple"] {
  --wood-hi: #efd8ab; --wood: #e2c38d; --wood-lo: #d2ad72;
  --fret: #7d8186; --nut-c: #2f2822; --inlay-c: #2a1f16; --inlay-op: .62;
  --string-c: #5e513f; --string-op: .8; --ring: #4f412e; --ring-fill: rgba(255,250,235,.45);
}
[data-neck="ebony"] {
  --wood-hi: #36312e; --wood: #24201e; --wood-lo: #171413;
  --fret: #b9bec3; --nut-c: #f1e9d6; --inlay-c: #ebe6dc; --inlay-op: .24;
  --string-c: #ddd6c9; --string-op: .62; --ring: #d9d2c4; --ring-fill: rgba(0,0,0,.3);
}
[data-neck="slate"] {
  --wood-hi: #444a53; --wood: #3a3f47; --wood-lo: #30343b;
  --fret: #9aa3b0; --nut-c: #dfe3e8; --inlay-c: #ffffff; --inlay-op: .13;
  --string-c: #cdd2da; --string-op: .55; --ring: #cdd2da; --ring-fill: rgba(0,0,0,.2);
}
[data-neck="maple"] .quiz-dot .dot, [data-neck="maple"] .dim-note .dot { opacity: .7; }

/* ==========================================================================
   0.17 — instellingen als scherm, rustiger bediening, telefoonfixes
   ========================================================================== */

/* tandwiel: aan als je in de instellingen bent */
.icon-btn.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.set-head { display: grid; gap: 6px; }
.set-group {
  display: grid; gap: 0; max-width: 860px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  padding: 6px 18px;
}
.set-group > h2 { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--bone-3); font-weight: 600; padding: 12px 0 4px; }
.set-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--glass-edge);
}
.set-group > h2 + .set-row { border-top: 0; }
.set-row.wide { grid-template-columns: minmax(0, 1fr); }
.set-title { font-weight: 600; color: var(--bone); }
.set-hint { font-size: .8125rem; color: var(--bone-3); margin-top: 2px; max-width: 60ch; }
.set-control { min-width: 0; }
.set-row:not(.wide) .set-control { justify-self: end; }
@media (max-width: 560px) {
  .set-row:not(.inline) { grid-template-columns: minmax(0, 1fr); }
  .set-row.inline .set-control { justify-self: end; }
  .tuning-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-row:not(.wide) .set-control { justify-self: start; }
  .set-group { padding: 4px 14px; }
}

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch {
  display: grid; gap: 3px; text-align: left; padding: 8px 8px 10px;
  background: var(--glass-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-s);
  transition: border-color var(--t), box-shadow var(--t);
}
.swatch:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.swatch.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.swatch-label { font-weight: 600; color: var(--bone); font-size: .9375rem; margin-top: 4px; }
.swatch-sub { font-size: .75rem; color: var(--bone-3); line-height: 1.35; }
.swatch-preview {
  position: relative; display: block; height: 54px; border-radius: 6px; overflow: hidden;
  background: var(--ebony); border: 1px solid rgba(128,128,128,.25);
}
.swatch-preview .sp-card { position: absolute; left: 10px; top: 10px; right: 34px; bottom: 10px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--glass-edge); }
.swatch-preview .sp-card::after { content: ''; position: absolute; left: 8px; right: 24px; top: 9px; height: 5px; border-radius: 3px; background: var(--bone-3); opacity: .7; }
.swatch-preview .sp-accent { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--accent); }
.neck-preview {
  position: relative; display: block; height: 54px; border-radius: 6px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, var(--fret) 30px 32px),
    repeating-linear-gradient(180deg, transparent 0 8px, color-mix(in srgb, var(--string-c) 70%, transparent) 8px 9px),
    linear-gradient(180deg, var(--wood-hi), var(--wood), var(--wood-lo));
}
.neck-preview .np-nut { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--nut-c); }
.neck-preview .np-dot { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--inlay-c); opacity: var(--inlay-op); }
.neck-preview .d1 { left: 79px; } .neck-preview .d2 { left: 111px; }
.neck-preview .np-note { position: absolute; left: 44px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }

.tuning-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.tuning {
  display: grid; gap: 1px; text-align: left; padding: 9px 12px;
  background: var(--glass-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-s);
  transition: border-color var(--t), background var(--t);
}
.tuning:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tuning.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.tuning-name { font-weight: 600; color: var(--bone); font-size: .9375rem; }
.tuning-notes { font-size: .75rem; color: var(--bone-3); letter-spacing: .04em; }

.switch {
  position: relative; width: 46px; height: 26px; border-radius: 999px; padding: 0;
  background: var(--glass-2); border: 1px solid var(--glass-edge);
  transition: background var(--t), border-color var(--t);
}
.switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bone-2); transition: transform var(--t), background var(--t); }
.switch.is-on { background: var(--accent); border-color: transparent; }
.switch.is-on .switch-knob { transform: translateX(20px); background: var(--accent-ink); }

.vol { display: flex; gap: 12px; align-items: center; }
.vol input[type="range"] { width: min(240px, 56vw); accent-color: var(--accent); }
.vol-out { min-width: 42px; font-variant-numeric: tabular-nums; color: var(--bone-2); }

.chip.danger { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 40%, transparent); }
.chip.danger.is-armed { background: var(--copper); color: #1b0f0a; border-color: transparent; font-weight: 600; }

/* rijen keuzeknoppen (transponeren, metronoom) zien eruit als de andere schakelaars */
.chip-row {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; width: fit-content; max-width: 100%;
  background: var(--glass-1); border: 1px solid var(--glass-edge); border-radius: 10px;
}
.chip-row .chip { background: none; border: 0; box-shadow: none; color: var(--bone-3); padding: 6px 12px; border-radius: 7px; font-weight: 400; }
.chip-row .chip:hover { color: var(--bone); }
.chip-row .chip.is-on, .chip-row .chip[aria-pressed="true"] {
  color: var(--bone); font-weight: 500;
  background: linear-gradient(152deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .14));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}
.sheet-shift { font-size: .8125rem; font-weight: 500; color: var(--accent); background: rgba(var(--accent-rgb), .12); padding: 2px 8px; border-radius: 999px; }

/* lessen op een smal scherm */
.lb .voicings { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-width: 640px; }
.lb .voicing { width: auto; }
@media (max-width: 640px) {
  .lb-table { font-size: .8125rem; min-width: 0; width: 100%; }
  .lb-table td, .lb-table th { white-space: normal; padding: 7px 10px 7px 0; vertical-align: top; }
  .lesson { gap: 14px; }
  .lesson-p { font-size: .9688rem; }
  .lb .voicings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-neck="maple"] .deg-other .dot { fill: #fffaf0; stroke: rgba(70, 48, 24, .55); }

/* halstrainer: opties op de telefoon ingeklapt */
.tr-opts-toggle { display: none; }
@media (max-width: 640px) {
  .tr-opts-toggle { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; }
  .tr-opts:not(.is-open) { display: none; }
  .segmented.tr-modes { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segmented.tr-modes .seg { white-space: normal; padding: 7px 4px; line-height: 1.2; }
}

/* metronoom als kaart, met stapjes van één slag */
.block.metro {
  max-width: 560px; padding: 20px 22px;
  background: linear-gradient(152deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
}
.metro-top { display: flex; align-items: center; gap: 14px; }
.metro-step {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--glass-1); border: 1px solid var(--glass-edge); color: var(--bone); font-size: 1.25rem; line-height: 1;
}
.metro-step:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.block.metro input[type="range"] { width: 100%; }

/* ---------- koffieknop (Buy Me a Coffee) in de bovenbalk ---------- */
/* Het script van Buy Me a Coffee tekent een grote knop; hier past hij in de balk. */
.bmc-slot { display: inline-flex; align-items: center; min-width: 0; }
.bmc-slot .bmc-btn-container { display: inline-flex !important; }
.bmc-slot .bmc-btn {
  height: 36px !important; min-width: 0 !important; padding: 0 14px 0 10px !important;
  border-radius: 999px !important; font-size: 15px !important; line-height: 36px !important;
  box-shadow: none !important; gap: 6px; white-space: nowrap;
}
.bmc-slot .bmc-btn svg { height: 20px !important; width: auto !important; margin: 0 !important; }
.bmc-slot .bmc-btn-text { font-size: 15px !important; margin-left: 4px !important; }
@media (max-width: 720px) {
  /* op de telefoon alleen het kopje */
  .bmc-slot .bmc-btn { width: 36px !important; padding: 0 !important; justify-content: center; }
  .bmc-slot .bmc-btn-text { display: none !important; }
}
body.neck-focus .bmc-slot { display: none; }

.footer-free { color: var(--bone-2); max-width: 70ch; }
.footer-free b { color: var(--bone); }