@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400..700&family=Geist:wght@400;500;600;700&family=Martian+Mono:wdth,wght@87.5,300..700&family=Bitcount+Single:wght@300..600&display=swap");

/* The Claptoscore look: a pocket instrument.
   The hardware minimalism of today's portable synthesizers, samplers and grooveboxes: a pale moulded body
   with fine seams, identical square key caps with small legends, round encoder caps, an orange signal
   colour, small black displays with white line graphics for the numbers, and a light screen with black
   notes for the notation (notes read best dark on light).
   build.py links this file after each page's own styles, so it overrides them. The last section adds the
   colour coding. */

/* ---------- tokens ---------- */
:root:root:root {
  color-scheme: light;
  --bg: #F2F2EF;            /* the page: paper under the instrument */
  --surface: #E6E6E2;       /* moulded body */
  --surface-2: #D8D8D3;     /* recess */
  --ink: #111214;
  --ink-2: #3A3C40;
  --ink-3: #54575B;
  --line: #B9B9B2;          /* seam */
  --accent: #F24E00;        /* the one signal colour */
  --accent-soft: #FFD6C2;
  --accent-ink: #111214;
  --pulse: #2463EB;         /* three coding dots: blue, green, ochre */
  --good: #17964F;
  --warn: #B07C00;
  --bad: #DC2F2F;
  --display: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lcd: "Bitcount Single", "Martian Mono", ui-monospace, Menlo, monospace;

  /* body and key furniture */
  --edge: #A6A6A0;          /* outline of the body */
  --hi: #FAFAF8;            /* light side of a seam */
  --slab: #BDBDB6;          /* thickness of the body, seen from above */
  --key: #F7F7F4;           /* key cap */
  --key-edge: #9A9A93;      /* gap around a key */
  --key-side: #ABABA4;      /* side of a key */
  --key-dark: #2A2B2E;
  --accent-edge: #B83A00;
  --accent-deep: #A83600;
  /* display */
  --scr: #0B0B0C;
  --scr-ink: #F5F5F1;
  --scr-dim: #A3A39D;
  /* notation screen: light, in the same black bezel */
  --paper: #FCFCF9;
  --paper-ink: #111214;
  --paper-dim: #5E6166;
  --paper-frame: 0 0 0 1px var(--scr), 0 1px 0 1px var(--hi);   /* no inset shadow: these screens pad with a border, so it would draw a box inside */
  /* registration cross */
  --reg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' fill='none' stroke='%2354575B' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- ground and type ---------- */
body { background: var(--bg); color: var(--ink); font-family: var(--body); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
b, strong { font-weight: 600; }

/* ---------- header: wordmark, coding dots, nav keys ---------- */
header h1, .brand { font: 600 30px/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
header h1 span, .brand span { color: var(--accent); }
.brand:hover { color: var(--ink); }
header h1::after, .brand::after {
  content: ""; display: inline-block; width: 27px; height: 7px; margin-left: 11px; vertical-align: 0.42em;
  background:
    radial-gradient(circle at 3.5px 50%, var(--pulse) 0 3px, transparent 3.5px),
    radial-gradient(circle at 13.5px 50%, var(--good) 0 3px, transparent 3.5px),
    radial-gradient(circle at 23.5px 50%, var(--warn) 0 3px, transparent 3.5px);
}
header p { color: var(--ink-2); margin-top: 8px; }
.keys { color: var(--ink-2); font-size: 12.5px; }
kbd {
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); border-bottom-width: 1px; border-radius: 3px;
  padding: 3px 6px; box-shadow: 0 1.5px 0 var(--key-side); display: inline-block; vertical-align: 1px;
}

.sitenav { gap: 6px 5px; margin-top: 14px; font-size: 11px; }
.sitenav a {
  display: inline-flex; align-items: center; height: 32px; padding: 1px 11px 0;
  font: 600 11px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); border-radius: 4px;
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff;
}
.sitenav a:hover { color: var(--ink); border-color: var(--ink); }
.sitenav a[aria-current], .sitenav a[aria-current]:hover {
  color: #fff; border-color: #000; padding-left: 24px;
  background: radial-gradient(circle at 12px 50%, var(--accent) 0 3px, transparent 3.5px) var(--key-dark);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- the body: sections divided by seams ---------- */
.steps {
  gap: 0; background: var(--surface); border: 1px solid var(--edge); border-bottom: 0;
  border-radius: 10px 10px 0 0; overflow: hidden; margin-bottom: -22px; box-shadow: inset 0 1px 0 var(--hi);
}
.panel { background: transparent; border: 0; border-radius: 0; padding: 20px 20px 22px; gap: 16px; box-shadow: none; }
.panel:first-child { position: relative; }
.panel:first-child::after {
  content: ""; position: absolute; right: 20px; bottom: 22px; width: 96px; height: 40px; pointer-events: none;
  background: radial-gradient(circle at 2px 2px, #8C8C86 0 1.2px, transparent 1.7px) 0 0 / 7px 7px;
}
/* the grille needs free room beside the last key; without it, leave it out */
@media (max-width: 960px) { .panel:first-child::after { display: none; } }
.panel + .panel { border-left: 1px solid var(--line); box-shadow: inset 1px 0 0 var(--hi); }
.panel.active { border-color: var(--line); box-shadow: inset 0 3px 0 var(--accent); }
.panel + .panel.active { box-shadow: inset 0 3px 0 var(--accent), inset 1px 0 0 var(--hi); }
@media (max-width: 820px) {
  .panel + .panel { border-left: 0; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi); }
  .panel + .panel.active { box-shadow: inset 0 3px 0 var(--accent); }
}
.result {
  background: var(--surface); border: 1px solid var(--edge); border-top-color: var(--line);
  border-radius: 0 0 10px 10px; padding: 20px; gap: 16px;
  box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--slab);
}
.tool, .settings, .ex-card, .inputbar, .feat, .activate, .toc, .buy {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--slab);
}

.panel-head, .result-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--hi); }
.panel-head h2 { font: 600 18px/1.1 var(--display); letter-spacing: -0.012em; }
.result-head h2 { font: 600 20px/1.1 var(--display); letter-spacing: -0.015em; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: 4px; font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff;
}
.step-no::before { content: "0"; }
.panel.active .step-no {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent-edge);
  box-shadow: 0 2px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4);
}
.panel-head .hint-r {
  font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--scr-ink); background: var(--scr);
  padding: 5px 8px; border-radius: 2px;
}

/* ---------- display: tempo ---------- */
.tempo-row { justify-content: center; gap: 20px; padding-block: 4px; }
.bpm {
  color: var(--scr-ink); border-radius: 5px; padding: 12px 16px 17px;
  font-family: var(--mono); font-weight: 300; letter-spacing: -0.03em;
  background:
    linear-gradient(var(--accent), var(--accent)) 50% calc(100% - 5px) / 1px 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(245,245,241,.4) 0 1px, transparent 1px 6px) 12px calc(100% - 5px) / calc(100% - 23px) 3px no-repeat,
    var(--scr);
  box-shadow: 0 0 0 1px #000, 0 1px 0 1px var(--hi);
}
.tempo-row .bpm { position: relative; flex: 0 1 auto; min-width: 0; justify-content: center; padding: 24px 26px 19px; }
.bpm span, .bpm div, .bpm small { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
.tempo-row .bpm span { position: absolute; top: 10px; left: 12px; font-size: 10px; }
.bpm small { font-size: 13px; }

/* ---------- encoder caps ---------- */
.round {
  position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; color: var(--ink);
  font: 400 19px/1 var(--mono); border: 1px solid var(--key-edge);
  background: radial-gradient(circle, var(--key) 0 55%, #E4E4DF 56% 59%, var(--key) 60%);
  box-shadow: 0 2px 0 var(--key-side), 0 0 0 4px var(--surface-2), 0 2px 0 4px var(--hi);
}
.round::before {
  content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 6px; margin-left: -1px;
  background: var(--ink); border-radius: 1px; transform-origin: 50% 19px;
}
.round.slower::before { transform: rotate(-38deg); }
.round.faster::before { transform: rotate(38deg); }
.round:hover { border-color: var(--ink); }
.round:active { background: radial-gradient(circle, #ECECE8 0 55%, #D9D9D4 56% 59%, #ECECE8 60%); }

/* ---------- tap pads: the big keys ---------- */
.pad {
  color: var(--ink); border: 1px solid var(--key-edge); border-radius: 6px; background-color: var(--key);
  background-image: var(--reg), var(--reg), var(--reg), var(--reg);
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
  box-shadow: 0 3px 0 var(--key-side), inset 0 1px 0 #fff; margin-bottom: 3px;
  transition: transform .05s, box-shadow .05s, background-color .06s;
}
.pad:hover { border-color: var(--ink); }
.pad:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-side), inset 0 1px 0 #fff; }
.pad.hit {
  background: var(--accent); border-color: var(--accent-edge); transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-deep);
}
.pad.hit small, .pad.hit .pad-sub { color: var(--accent-ink); }
.pad.recording { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 3px 0 1px var(--key-side), inset 0 1px 0 #fff; }
.pad.counting { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 3px 0 1px var(--key-side), inset 0 1px 0 #fff; }
.pad-main, .pad b { font: 600 17px/1.2 var(--display); letter-spacing: -0.015em; }
.pad-lg .pad-main, .pad b { font-size: 22px; letter-spacing: -0.02em; }
.pad-big { font: 300 76px/1 var(--mono); letter-spacing: -0.04em; }
.pad small, .pad-sub { font: 400 13px/1.4 var(--mono); color: var(--ink-3); }
.pad-voice { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); top: 12px; }
.pad-voice.l { left: 26px; } .pad-voice.r { right: 26px; }
.pad.split::after { border-left: 1px solid var(--line); top: 0; bottom: 0; }
.pad.split.hit { background: var(--key); }
.pad.split.hit-l { background: linear-gradient(90deg, var(--accent) 50%, var(--key) 50%); }
.pad.split.hit-r { background: linear-gradient(90deg, var(--key) 50%, var(--accent) 50%); }

/* ---------- beat keys ---------- */
.dots { gap: 5px; padding-bottom: 2px; }
.dot, .dot.down {
  width: 22px; height: 22px; margin-top: 0; border-radius: 4px; border: 1px solid var(--key-edge);
  background: radial-gradient(circle at 5px 5px, var(--line) 0 1.3px, transparent 1.8px) var(--key);
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; transition: none;
}
.dot.down {
  border-color: #000; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.16);
  background: radial-gradient(circle at 5px 5px, var(--accent) 0 1.3px, transparent 1.8px) var(--key-dark);
}
.dot.on, .dot.down.on {
  background: var(--accent); border-color: var(--accent-edge); transform: translateY(1px);
  box-shadow: 0 1px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4);
}
.beat {
  width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--key-edge); background: var(--key);
  color: var(--ink); font: 500 12px/1 var(--mono); box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff;
}
.beat.accent { background: var(--key-dark); border-color: #000; color: #fff; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.16); }
.beat.mute { opacity: .45; border-style: dashed; box-shadow: none; }
.beat.on { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-ink); transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-deep); }

/* ---------- keys ---------- */
.btn, .cta, .go {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px;
  padding: 1px 13px 0; font: 600 11.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); border-radius: 4px;
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; transition: transform .04s, box-shadow .04s;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn:active, .cta:active, .go:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-side), inset 0 1px 0 #fff; }
.btn.primary, .btn.on, .cta, .go {
  background: var(--accent); border-color: var(--accent-edge); color: var(--accent-ink);
  box-shadow: 0 2px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:hover, .cta:hover, .go:hover { filter: none; border-color: var(--ink); color: var(--accent-ink); }
.btn.rec, .go.on { background: var(--key-dark); border-color: #000; color: #fff; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.16); }
.btn.rec .ic { color: var(--accent); }
.btn.small, .takes .btn { min-height: 30px; padding-inline: 10px; font-size: 10.5px; }
.btn .ic { font-size: 9px; }
.btn:disabled { opacity: .5; cursor: default; }
.go { min-height: 46px; min-width: 170px; padding-inline: 28px; font-size: 13px; box-shadow: 0 3px 0 var(--accent-deep), inset 0 1px 0 rgba(255,255,255,.4); }
.go.on { box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,.16); }

/* ---------- small controls ---------- */
label { color: var(--ink-2); }
select, input[type="number"], input[type="text"], .take-name, .activate input {
  font-family: var(--mono); font-size: 13px; color: var(--ink); background: #FCFCFA;
  border: 1px solid var(--key-edge); border-radius: 4px; padding: 6px 9px;
}
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 27px; background-color: var(--key);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111214' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff;
}
select:hover { border-color: var(--ink); }
.bpm input {
  width: 2em; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 300 56px/1 var(--mono); letter-spacing: -0.03em; color: var(--scr-ink); caret-color: var(--accent);
  text-align: center;
}
.bpm input:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; flex: none; margin: 0; cursor: pointer;
  background: var(--key); border: 1px solid var(--key-edge); border-radius: 3px;
  box-shadow: 0 1.5px 0 var(--key-side), inset 0 1px 0 #fff; vertical-align: -3px;
}
input[type="checkbox"]:checked {
  border-color: var(--accent-edge); box-shadow: 0 1.5px 0 var(--accent-deep);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.4 6.3l2.5 2.5 4.7-5.4' fill='none' stroke='%23111214' stroke-width='1.8'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--scr); box-shadow: 0 1px 0 var(--hi); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--scr); box-shadow: 0 1px 0 var(--hi); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 22px; margin-top: -10px; border-radius: 3px;
  border: 1px solid #6F6F69; box-shadow: 0 2px 0 var(--key-side);
  background: linear-gradient(var(--accent), var(--accent)) center / 2px 12px no-repeat, var(--key);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 20px; border-radius: 3px; border: 1px solid #6F6F69; box-shadow: 0 2px 0 var(--key-side);
  background: linear-gradient(var(--accent), var(--accent)) center / 2px 12px no-repeat, var(--key);
}
.meter {
  box-sizing: border-box; width: 78px; height: 12px; padding: 3px; border-radius: 2px; box-shadow: 0 1px 0 var(--hi);
  background: repeating-linear-gradient(90deg, #47474A 0 4px, transparent 4px 6px) content-box, var(--scr);
}
.meter i { border-radius: 0; }
.meter.hot i { background: var(--accent); }
.val {
  display: inline-block; min-width: 3ch; text-align: center; font: 500 11.5px/1 var(--mono); letter-spacing: .02em;
  color: var(--scr-ink); background: var(--scr); padding: 5px 7px; border-radius: 2px;
}
.ib-note { font-size: 12.5px; color: var(--ink-2); }
.ib-note.err, .msg.err { color: #B3261E; }
.msg.ok { color: #0E6B36; }
.ib-label, .opt-label, .ctl > span:first-child, .fact span {
  font: 600 10.5px/1.2 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}

/* ---------- disclosure rows ---------- */
.more, .result > .more, details.calib { border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi); padding-top: 13px; }
.more > summary { font-size: 13px; font-weight: 600; color: var(--ink); align-items: center; }
.more > summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  font: 500 12px/1 var(--mono); color: var(--ink); background: var(--key); border: 1px solid var(--key-edge);
  border-radius: 3px; box-shadow: 0 1.5px 0 var(--key-side); transform: none; margin-right: 2px;
}
.more[open] > summary::before { content: "\2212"; transform: none; background: var(--key-dark); border-color: #000; color: #fff; box-shadow: 0 1.5px 0 #000; }
.more-hint { font-size: 12.5px; color: var(--ink-3); }
.more-hint b, details summary b { font: 500 12px var(--mono); color: var(--ink-2); }
details summary { color: var(--ink-2); }
.calib-body { color: var(--ink-2); }
.seg { border: 1px solid var(--key-edge); border-radius: 4px; background: var(--key); box-shadow: 0 2px 0 var(--key-side); }
.seg button { font: 600 10.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); padding: 9px 11px 8px; }
.seg button + button { border-left: 1px solid var(--key-edge); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- displays: notation (a light screen with black notes, framed by the black bezel) ---------- */
.live {
  background: var(--paper); color: var(--paper-ink); border: 0; border-radius: 5px; padding: 10px 12px 6px;
  box-shadow: var(--paper-frame);
}
.live-head { font: 400 12.5px/1.3 var(--mono); color: var(--paper-dim); }
.live-tag { font: 500 10px/1 var(--mono); border-radius: 2px; padding: 4px 6px 3px; background: transparent; border: 1px solid var(--paper-dim); color: var(--paper-ink); }
.live.on .live-tag { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#liveScore { color: var(--paper-ink); }
.tag {
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; padding: 5px 7px 4px; border-radius: 2px;
  background: transparent; border: 1px solid var(--ink-3); color: var(--ink);
}
.tag.user { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-ink); }

@media screen {
  #score {
    box-sizing: content-box; color: var(--paper-ink); border-radius: 5px;
    border: solid transparent; border-width: 22px 8px 16px 18px;
    background:
      repeating-linear-gradient(90deg, rgba(17,18,20,.24) 0 1px, transparent 1px 8px) 18px calc(100% - 6px) / calc(100% - 35px) 4px no-repeat border-box,
      var(--paper) border-box;
    box-shadow: var(--paper-frame);
  }
  #score p { color: var(--paper-ink) !important; margin: 0; font-size: 14px; }
  .ex-notation {
    box-sizing: content-box; min-height: 46px; color: var(--paper-ink); border-radius: 4px;
    border: solid var(--paper); border-width: 15px 10px 13px 14px; background: var(--paper);
    box-shadow: var(--paper-frame);
  }
  .ex-card:not(.wide) .ex-notation { margin-right: -4px; }
  /* abcjs writes the ink colour into fill attributes; keep every notation screen on the same ink */
  #score svg [fill]:not([fill="none"]), #liveScore svg [fill]:not([fill="none"]),
  .ex-notation svg [fill]:not([fill="none"]), .ex .abc svg [fill]:not([fill="none"]) { fill: var(--paper-ink); }
  #score svg [stroke]:not([stroke="none"]), #liveScore svg [stroke]:not([stroke="none"]),
  .ex-notation svg [stroke]:not([stroke="none"]), .ex .abc svg [stroke]:not([stroke="none"]) { stroke: var(--paper-ink); }
  .ex { background: var(--paper); border: 0; border-radius: 5px; box-shadow: var(--paper-frame); }
  .ex .abc { color: var(--paper-ink); }
  .ex figcaption, .ex figcaption a { color: var(--paper-dim); }
}
@media screen and (max-width: 480px) {
  .panel { padding-inline: 14px; }
  .result { padding-inline: 8px; }
  #score { border-width: 16px 2px 14px 4px; }
  .ex-notation { border-width: 13px 4px 11px 6px; }
  .tempo-row { gap: 16px; }
}
@media print {
  .result { background: transparent; box-shadow: none; }
}

.stats { gap: 6px 0; font-size: 13px; color: var(--ink-2); }
.stats > span { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line); }
.stats > span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stats b { font: 500 14px var(--mono); color: var(--ink); }

.cleanup { background: #DEDEDA; border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.cleanup h3 { font: 600 15px var(--display); letter-spacing: -0.01em; }
.cleanup h3 small { font: 400 12.5px var(--body); color: var(--ink-2); }
.ctl .note { font-size: 12.5px; color: var(--ink-2); }
.chart-wrap { border: 1px solid var(--key-edge); border-radius: 4px; background: #FCFCFA; }
.legend { font-size: 12.5px; color: var(--ink-2); }
pre#abcOut { font: 12px/1.55 var(--mono); background: var(--scr); color: var(--scr-ink); border-radius: 4px; padding: 12px 14px; }
.toast { background: var(--ink); color: #fff; border-radius: 3px; font: 500 12px var(--mono); padding: 9px 13px; }

.menu { background: var(--key); border: 1px solid var(--ink); border-radius: 5px; box-shadow: 0 3px 0 rgba(17,18,20,.28); padding: 5px; }
.menu button { border-radius: 3px; font: 600 13px var(--body); }
.menu button:hover, .menu button:focus-visible { background: var(--surface); }
.menu small { font-size: 12.5px; color: var(--ink-3); }
.pro-tag, .badge {
  font: 600 9.5px/1 var(--mono); letter-spacing: .1em; padding: 3px 5px; border-radius: 2px;
  background: var(--ink); color: #fff;
}
.pro-on .pro-tag, .badge { padding-left: 14px; background: radial-gradient(circle at 7px 50%, #35D07F 0 2.5px, transparent 3px) var(--ink); color: #fff; }
.badge { font-size: 11px; padding: 5px 8px 5px 17px; }
.upsell { background: var(--accent-soft); border: 1px solid #E8A583; border-radius: 4px; color: var(--ink); }
.takes li { background: var(--key); border: 1px solid var(--line); border-radius: 4px; }
.takes .t-meta { color: var(--ink-3); }
.takes .empty { color: var(--ink-2); }

/* ---------- prose: the manual ---------- */
.prose h2 { font: 600 23px/1.2 var(--display); letter-spacing: -0.025em; margin: 40px 0 10px; }
.prose h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); vertical-align: 0.12em; }
.prose h3 { font: 600 17px/1.3 var(--display); letter-spacing: -0.015em; margin: 26px 0 6px; }
.prose p, .prose li { color: #222427; line-height: 1.65; }
.prose strong { color: var(--ink); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 20px; }
.prose ul > li::before { content: ""; position: absolute; left: 3px; top: 0.66em; width: 5px; height: 5px; background: var(--ink); }
.prose ol li::marker { font-family: var(--mono); font-size: .88em; color: var(--ink-3); }
.prose table { font-size: 14px; border-top: 1px solid var(--ink); }
.prose th { font: 600 10.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); padding: 9px 10px 8px; border-bottom: 1px solid var(--ink); }
.prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: #222427; }
.prose td:first-child { color: var(--ink); font-weight: 500; }
.lesson-intro td:nth-child(2) { font-family: var(--mono); font-size: 13px; }

/* ---------- lesson and tool pages ---------- */
.wrap h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.wrap > div > h1 { font-size: clamp(32px, 4.4vw, 44px); margin-top: 8px; }
.wrap h1 span { color: var(--accent); }
.lede { color: #222427; }
.crumbs { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--ink); }
.settings { padding: 12px 16px 13px; gap: 10px 20px; }
.settings label { color: var(--ink); }
.settings input[type="range"] { width: 150px; }
.note, .how, .hint, .muted { font-size: 12.5px; color: var(--ink-2); }
.how { line-height: 1.9; }
.ex-card { padding: 13px 14px 15px; gap: 10px; }
.ex-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 var(--hi), 0 4px 0 var(--slab); }
.ex-card.running { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), inset 0 1px 0 var(--hi), 0 4px 0 var(--slab); }
.ex-card.locked { border-style: dashed; box-shadow: none; }
.ex-no { font: 600 10.5px/1 var(--body); letter-spacing: .1em; color: var(--ink); display: inline-flex; align-items: center; }
.ex-no::before { content: ""; width: 7px; height: 7px; margin-right: 8px; background: var(--line); border-radius: 1px; }
.ex-card.sel .ex-no::before { background: var(--accent); }
.ex-card.wide .ex-no { color: #fff; background: var(--key-dark); padding: 5px 7px 5px 6px; border-radius: 2px; }
.ex-card.wide .ex-no::before { background: #77777A; }
.ex-card.wide.sel .ex-no::before { background: var(--accent); }
.stars { color: var(--ink); font-size: 13px; letter-spacing: 3px; }
.ex-status { color: var(--ink-2); }
.ex-status b { font: 600 14px var(--mono); }
.ex-result { background: var(--key); border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }
.ex-result .bad { color: #B3261E; }
.ex-result .warn { color: #7A5600; }
.ex-actions { gap: 6px; }

.pager a, .lesson-list a {
  background: var(--key); border: 1px solid var(--key-edge); border-radius: 5px; color: var(--ink);
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff;
}
.pager a { padding: 11px 14px 10px; font: 600 15px/1.25 var(--display); letter-spacing: -0.01em; }
.pager a small, .lesson-list .num { font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pager a small { margin-bottom: 4px; }
.pager a:hover, .lesson-list a:hover { border-color: var(--ink); color: var(--ink); }
.pager a:active, .lesson-list a:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-side), inset 0 1px 0 #fff; }
.lesson-list .t { font: 600 17px/1.25 var(--display); letter-spacing: -0.015em; }
.lesson-list .p { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }

.fact { background: var(--key); border: 1px solid var(--line); border-radius: 4px; }
.fact span { color: var(--ink-3); }
.fact b { font: 500 16px var(--mono); }
.marking, .trainer { color: var(--ink-2); }
.feat h3 { font: 600 16px/1.3 var(--display); }
.buy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 var(--hi), 0 4px 0 var(--slab); }
.price { font: 300 46px/1 var(--mono); letter-spacing: -0.04em; }
.price small { color: var(--ink-3); letter-spacing: 0; }
.keybox { background: var(--key); border: 1px dashed var(--accent-edge); border-radius: 4px; }
.toc li { color: var(--ink-2); }

/* ---------- footer ---------- */
.sitefoot { border-top: 1px solid var(--ink); padding-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.sitefoot nav { gap: 6px 18px; }
.sitefoot a { font: 600 11px/1.5 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }


/* ---------- colour coding ----------
   Orange stays the signal colour. Three more follow the stages of the tool, the way an instrument codes its
   encoders: orange for the pulse, blue for the rhythm you tap, green for the notation and for play, and
   yellow for Pro. Each appears as a key, an LED or a small square, never as text on the grey body. */
:root:root:root {
  --c-blue: #2463EB; --c-blue-deep: #1746B4; --c-blue-lit: #7CA6FF;
  --c-green: #17964F; --c-green-lit: #3DDC84;
  --c-yellow: #F5B800; --c-yellow-deep: #9C7200;
  --reg-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' fill='none' stroke='%23F24E00' stroke-width='1.2'/%3E%3C/svg%3E");
  --reg-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' fill='none' stroke='%232463EB' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* the wordmark's coding dots, and the same four colours as a short strip on the footer rule */
header h1::after, .brand::after {
  background:
    radial-gradient(circle at 3.5px 50%, var(--c-blue) 0 3px, transparent 3.5px),
    radial-gradient(circle at 13.5px 50%, var(--c-green) 0 3px, transparent 3.5px),
    radial-gradient(circle at 23.5px 50%, var(--c-yellow) 0 3px, transparent 3.5px);
}
.sitefoot {
  background: linear-gradient(90deg, var(--accent) 0 25%, var(--c-blue) 25% 50%, var(--c-green) 50% 75%, var(--c-yellow) 75%) 0 0 / 96px 4px no-repeat;
}

/* step keys: an LED in the stage colour, and the whole key lit while that step is active */
.step-no { background: radial-gradient(circle at 5px 5px, var(--accent) 0 1.5px, transparent 2px) var(--key); }
.panel + .panel .step-no { background: radial-gradient(circle at 5px 5px, var(--c-blue) 0 1.5px, transparent 2px) var(--key); }
.panel.active .step-no { background: var(--accent); }
.panel + .panel.active .step-no {
  background: var(--c-blue); color: #fff; border-color: var(--c-blue-deep);
  box-shadow: 0 2px 0 var(--c-blue-deep), inset 0 1px 0 rgba(255,255,255,.3);
}
.panel + .panel.active { box-shadow: inset 0 3px 0 var(--c-blue), inset 1px 0 0 var(--hi); }
@media (max-width: 820px) { .panel + .panel.active { box-shadow: inset 0 3px 0 var(--c-blue); } }

/* the rhythm panel answers in blue: beat keys, pad hits, registration marks, readout LED */
.panel:first-child .pad { background-image: var(--reg-o), var(--reg-o), var(--reg-o), var(--reg-o); }
.panel + .panel .pad { background-image: var(--reg-b), var(--reg-b), var(--reg-b), var(--reg-b); }
.panel + .panel .dot.down { background: radial-gradient(circle at 5px 5px, var(--c-blue-lit) 0 1.3px, transparent 1.8px) var(--key-dark); }
.panel + .panel .dot.on, .panel + .panel .dot.down.on {
  background: var(--c-blue); border-color: var(--c-blue-deep);
  box-shadow: 0 1px 0 var(--c-blue-deep), inset 0 1px 0 rgba(255,255,255,.3);
}
.panel + .panel .pad.hit { background: var(--c-blue); border-color: var(--c-blue-deep); box-shadow: 0 1px 0 var(--c-blue-deep); }
.panel + .panel .pad.hit, .panel + .panel .pad.hit small, .panel + .panel .pad.hit .pad-sub, .panel + .panel .pad.hit .pad-voice { color: #fff; }
.panel + .panel .pad.split.hit { background: var(--key); }
.panel + .panel .pad.split.hit, .panel + .panel .pad.split.hit small, .panel + .panel .pad.split.hit .pad-sub, .panel + .panel .pad.split.hit .pad-voice { color: var(--ink); }
.panel + .panel .pad.split.hit-l { background: linear-gradient(90deg, var(--c-blue) 50%, var(--key) 50%); }
.panel + .panel .pad.split.hit-r { background: linear-gradient(90deg, var(--key) 50%, var(--accent) 50%); }
.panel-head .hint-r { padding-left: 20px; background: radial-gradient(circle at 10px 50%, var(--c-blue-lit) 0 2.5px, transparent 3px) var(--scr); }

/* encoders: slower is blue, faster is orange */
.round.slower::before { background: var(--c-blue); }
.round.faster::before { background: var(--accent); }

/* notation and play are green; on the display the tempo mark keeps the pulse's orange */
.result-head .step-no { background: radial-gradient(circle at 5px 5px, var(--c-green) 0 1.5px, transparent 2px) var(--key); }
#metroBtn .ic, #playQ .ic, #playR .ic, .ex-actions .btn:not(.primary) .ic, .tool .btn:not(.primary) .ic { color: var(--c-green); }
.tag { padding-left: 19px; background: radial-gradient(circle at 10px 50%, var(--c-green) 0 2.5px, transparent 3px); }
.tag.user { padding-left: 7px; background: var(--accent); }
@media screen {
  #score svg .abcjs-tempo[fill]:not([fill="none"]), #score svg .abcjs-tempo [fill]:not([fill="none"]) { fill: var(--accent); }
}

/* Pro and stars are yellow */
.pro-tag { background: var(--c-yellow); color: var(--ink); }
.pro-on .pro-tag { background: radial-gradient(circle at 7px 50%, var(--c-green-lit) 0 2.5px, transparent 3px) var(--ink); color: #fff; }
.stars { color: var(--c-yellow-deep); }

/* the manual and the lesson cards: small squares that cycle through the four colours */
.prose h2:nth-of-type(4n+2)::before { background: var(--c-blue); }
.prose h2:nth-of-type(4n+3)::before { background: var(--c-green); }
.prose h2:nth-of-type(4n+4)::before { background: var(--c-yellow); }
.ex-card:nth-child(4n+1) .ex-no::before { background: var(--accent); }
.ex-card:nth-child(4n+2) .ex-no::before { background: var(--c-blue); }
.ex-card:nth-child(4n+3) .ex-no::before { background: var(--c-green); }
.ex-card:nth-child(4n+4) .ex-no::before { background: var(--c-yellow); }


/* ---------- the LCD buddy ----------
   A segment-display character, drawn by theme.js. Unlit segments stay faintly visible, as on a real LCD, and
   a state lights them. The states are classes the tools already set: .dot.on / .beat.on (the current beat),
   .hit on a pad or a lesson card (a tap), .counting, .live.on, .running, .tag.user (a finished take) and
   body[data-result] (a lesson attempt). An animation only restarts when its name changes, so each beat
   rule exists four times under different names, chosen so that two beats in a row never share one. */
.buddy-win { box-sizing: border-box; flex: none; pointer-events: none; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 1px 0 1px var(--hi), inset 0 0 14px rgba(0,0,0,.7);
  /* unlit LCD pixels: the same dot matrix as the tempo digits, so the window reads as a screen and not a black sticker */
  background: radial-gradient(circle at 1.5px 1.5px, rgba(245,245,241,.085) 0 .9px, transparent 1.3px) 0 0 / 4px 4px, var(--scr); }
.buddy { display: block; width: 100%; height: auto; overflow: visible; }
.buddy * { fill: none; stroke: var(--scr-ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.buddy .f { fill: var(--scr-ink); stroke: none; }
.buddy .gnd { stroke-width: 1.4; stroke-dasharray: 1.5 3.5; opacity: .5; }
.buddy text { font: 700 8px var(--mono); }
.buddy .z2 { font-size: 10.5px; }
.buddy .qm { font-size: 13px; }
.buddy :is(.note, .star, .zz, .qm, .rec, .sp, .au, .mo, .msad, .lt) { opacity: .1; }
.buddy :is(.ad, .ms, .lg) { opacity: 1; }
.buddy :is(.au, .ad, .sp, .mo, .ms) { transition: opacity 0s .09s; }  /* a clap lingers for a moment */
.buddy .n1 * { stroke: var(--c-blue-lit); }
.buddy .n1 .f { fill: var(--c-blue-lit); stroke: none; }
.buddy .n2 * { stroke: var(--c-yellow); }
.buddy .n2 .f { fill: var(--c-yellow); stroke: none; }
.buddy .sp * { stroke: var(--accent); }
.buddy .star { fill: var(--c-yellow); }
.buddy .rec { fill: #FF3B2F; }
.buddy, .buddy :is(.ey, .hd, .all) { transform-box: fill-box; transform-origin: 50% 50%; }

/* where it lives */
.live:has(.buddy-win) { display: grid; grid-template-columns: minmax(0, 1fr) 132px; column-gap: 12px; }
.live:has(.buddy-win) > :is(.live-head, #liveScore) { grid-column: 1; }
.buddy-win.in-live { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 12px; }  /* its own black window: the notation screen is light */
@media (max-width: 520px) {
  .live:has(.buddy-win) { grid-template-columns: minmax(0, 1fr) 78px; }
  .live:has(.buddy-win) > #liveScore { grid-column: 1 / -1; }
  .buddy-win.in-live { grid-row: 1; padding: 2px 5px; }
}
.buddy-win.in-bar { width: 78px; margin-left: auto; padding: 2px 6px; }
.settings:has(.buddy-win) { gap: 10px 14px; }
.settings:has(.buddy-win) input[type="range"] { width: 118px; }
.buddy-win.in-tool { width: 116px; padding: 6px 10px; }
.buddy-win.lost { width: 132px; padding: 8px 12px; margin-bottom: 6px; }

/* a tap: clap overhead; with two voices, one arm each */
body:has(:is(.pad, .ex-card).hit) .buddy :is(.au, .sp, .mo) { opacity: 1; transition-delay: 0s; }
body:has(:is(.pad, .ex-card).hit) .buddy :is(.ad, .ms) { opacity: .1; transition-delay: 0s; }
body:has(.pad.hit-l) .buddy :is(.aul, .spl) { opacity: 1; transition-delay: 0s; }
body:has(.pad.hit-l) .buddy .adl { opacity: .1; transition-delay: 0s; }
body:has(.pad.hit-r) .buddy :is(.aur, .spr) { opacity: 1; transition-delay: 0s; }
body:has(.pad.hit-r) .buddy .adr { opacity: .1; transition-delay: 0s; }

/* the beat: nod and tap a foot, hop on the downbeat, and the speaker grille thumps with the metronome */
body:has(:is(.dot, .beat):nth-child(odd).on) .buddy .n1 { opacity: 1; }
body:has(:is(.dot, .beat):nth-child(even).on) .buddy .n2 { opacity: 1; }
body:has(:is(.dot, .beat):first-child.on) .buddy .all { animation: bud-hop .24s; }
.panel:first-child::after { transform-origin: 100% 100%; }
body:has(:is(.dot, .beat):first-child.on) .buddy .hd { animation: bud-nod-e .2s; }
body:has(:is(.dot, .beat):first-child.on) .buddy .ll { animation: bud-off-e .2s; }
body:has(:is(.dot, .beat):first-child.on) .buddy .llt { animation: bud-on-e .2s; }
body:has(#dots1 .dot:first-child.on) .panel:first-child::after { animation: bud-thump-e .18s; }
body:has(:is(.dot, .beat):nth-child(3n+2).on) .buddy .hd { animation: bud-nod-a .2s; }
body:has(:is(.dot, .beat):nth-child(3n+2).on) .buddy .lr { animation: bud-off-a .2s; }
body:has(:is(.dot, .beat):nth-child(3n+2).on) .buddy .lrt { animation: bud-on-a .2s; }
body:has(#dots1 .dot:nth-child(3n+2).on) .panel:first-child::after { animation: bud-thump-a .18s; }
body:has(:is(.dot, .beat):nth-child(3n+3).on) .buddy .hd { animation: bud-nod-b .2s; }
body:has(:is(.dot, .beat):nth-child(3n+3).on) .buddy .ll { animation: bud-off-b .2s; }
body:has(:is(.dot, .beat):nth-child(3n+3).on) .buddy .llt { animation: bud-on-b .2s; }
body:has(#dots1 .dot:nth-child(3n+3).on) .panel:first-child::after { animation: bud-thump-b .18s; }
body:has(:is(.dot, .beat):nth-child(3n+4).on) .buddy .hd { animation: bud-nod-c .2s; }
body:has(:is(.dot, .beat):nth-child(3n+4).on) .buddy .lr { animation: bud-off-c .2s; }
body:has(:is(.dot, .beat):nth-child(3n+4).on) .buddy .lrt { animation: bud-on-c .2s; }
body:has(#dots1 .dot:nth-child(3n+4).on) .panel:first-child::after { animation: bud-thump-c .18s; }
@keyframes bud-hop { 0%, 45% { transform: translateY(-2.6px); } 100% { transform: none; } }
@keyframes bud-nod-e { 0%, 55% { transform: translateY(1.6px); } 100% { transform: none; } }
@keyframes bud-on-e { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .1; } }
@keyframes bud-off-e { 0%, 62% { opacity: .1; } 63%, 100% { opacity: 1; } }
@keyframes bud-thump-e { 0%, 40% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes bud-nod-a { 0%, 55% { transform: translateY(1.6px); } 100% { transform: none; } }
@keyframes bud-on-a { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .1; } }
@keyframes bud-off-a { 0%, 62% { opacity: .1; } 63%, 100% { opacity: 1; } }
@keyframes bud-thump-a { 0%, 40% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes bud-nod-b { 0%, 55% { transform: translateY(1.6px); } 100% { transform: none; } }
@keyframes bud-on-b { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .1; } }
@keyframes bud-off-b { 0%, 62% { opacity: .1; } 63%, 100% { opacity: 1; } }
@keyframes bud-thump-b { 0%, 40% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes bud-nod-c { 0%, 55% { transform: translateY(1.6px); } 100% { transform: none; } }
@keyframes bud-on-c { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .1; } }
@keyframes bud-off-c { 0%, 62% { opacity: .1; } 63%, 100% { opacity: 1; } }
@keyframes bud-thump-c { 0%, 40% { transform: scale(1.08); } 100% { transform: none; } }

/* count-in, recording, a running exercise */
body:has(.pad.counting) .buddy .ey { animation: none; transform: scaleY(1.35); }
body:has(.live.on, .ex-card.running) .buddy .rec { opacity: 1; animation: bud-lamp 1s steps(1) infinite; }
@keyframes bud-lamp { 50% { opacity: .1; } }

/* nothing happening: blink, then doze off after a while; any beat or tap wakes it */
.buddy .ey { animation: bud-blink 4.6s infinite; }
body:not(:has(:is(.dot, .beat).on, .live.on, .ex-card.running, .pad.counting, :is(.pad, .ex-card).hit, .pad.hit-l, .pad.hit-r)) .buddy-win:not(.lost) .ey { animation: bud-blink 4.6s 2, bud-shut .4s 9.2s forwards; }
body:not(:has(:is(.dot, .beat).on, .live.on, .ex-card.running, .pad.counting, :is(.pad, .ex-card).hit, .pad.hit-l, .pad.hit-r)) .buddy-win:not(.lost) .z1 { animation: bud-z 3.2s 9.8s infinite; }
body:not(:has(:is(.dot, .beat).on, .live.on, .ex-card.running, .pad.counting, :is(.pad, .ex-card).hit, .pad.hit-l, .pad.hit-r)) .buddy-win:not(.lost) .z2 { animation: bud-z 3.2s 10.6s infinite; }
@keyframes bud-blink { 0%, 93%, 100% { transform: none; } 96% { transform: scaleY(.12); } }
@keyframes bud-shut { to { transform: scaleY(.12); } }
@keyframes bud-z { 0%, 100% { opacity: .1; } 20%, 70% { opacity: 1; } }

/* a finished take or a passed exercise: jump and cheer once */
body[data-result="great"] .buddy, body:has(.tag.user):not(:has(.live.on)) .buddy { animation: bud-cheer 1.3s 1; }
body[data-result="great"] .buddy :is(.au, .star), body:has(.tag.user):not(:has(.live.on)) .buddy :is(.au, .star) { animation: bud-lit 1.3s 1; }
body[data-result="great"] .buddy .ad, body:has(.tag.user):not(:has(.live.on)) .buddy .ad { animation: bud-unlit 1.3s 1; }
@keyframes bud-cheer { 0%, 30%, 60%, 100% { transform: none; } 15%, 45% { transform: translateY(-3px); } }
@keyframes bud-lit { 0%, 90% { opacity: 1; } 100% { opacity: .1; } }
@keyframes bud-unlit { 0%, 90% { opacity: .1; } 100% { opacity: 1; } }

/* a weak attempt, or a page that is not there */
body:is([data-result="low"], [data-result="none"]) .buddy .ms, .buddy-win.lost .ms { opacity: .1; }
body:is([data-result="low"], [data-result="none"]) .buddy .msad, .buddy-win.lost .msad { opacity: 1; }
.buddy-win.lost .qm { opacity: 1; animation: bud-lamp 1.6s steps(1) infinite; }

/* ---------- small motions ---------- */
.round::before { transition: transform .08s; }
.round.slower:active::before { transform: rotate(-78deg); }
.round.faster:active::before { transform: rotate(78deg); }
header h1::after, .brand::after { animation: bud-boot .8s steps(4, jump-none) 1; }   /* the coding dots light up one by one */
@keyframes bud-boot { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .buddy, .buddy *, .panel:first-child::after, header h1::after, .brand::after { animation: none !important; }
}

/* abcjs gives a figure a fixed pixel width; on a phone it scrolls inside its display instead of widening the page */
.ex .abc { max-width: 100%; overflow-x: auto; }

/* ---------- type ----------
   Headings and the wordmark: Familjen Grotesk, a grotesk with ink traps from a Stockholm studio.
   Running text: Geist. Key legends and readouts: Martian Mono at a narrow width, like silk-screened
   lettering. Big numerals on the displays: Bitcount Single, a dot-matrix face. */
.btn, .cta, .go, .sitenav a, .seg button, .sitefoot a, .ib-label, .opt-label, .ctl > span:first-child, .fact span, .prose th, .ex-no {
  font-family: var(--mono); font-weight: 500; letter-spacing: .03em;
}
.bpm, .bpm input, .pad-big { font-family: var(--lcd); font-weight: 400; letter-spacing: 0; }  /* not the price: that stays crisp */
.bpm input { font-size: 64px; }

/* other languages: the language list under the footer links, and faces for Chinese (the Latin faces have no Han
   glyphs, so name the system's CJK faces before the generic fallback; letter-spacing is for Latin legends only) */
.sitefoot .langs { flex-basis: 100%; gap: 4px 16px; }
.sitefoot .langs a { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.sitefoot .langs a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root:lang(zh-Hans) {
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC";
  --display: "Familjen Grotesk", var(--cjk), sans-serif;
  --body: "Geist", var(--cjk), sans-serif;
  --mono: "Martian Mono", var(--cjk), ui-monospace, monospace;
}
:lang(zh-Hans) .btn, :lang(zh-Hans) .sitenav a, :lang(zh-Hans) .seg button, :lang(zh-Hans) .sitefoot a, :lang(zh-Hans) .ib-label,
:lang(zh-Hans) .opt-label, :lang(zh-Hans) .ex-no, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: 0; }
:lang(nl) .ad-slot::before { content: "Advertentie"; }
:lang(es) .ad-slot::before { content: "Publicidad"; }
:lang(fr) .ad-slot::before { content: "Publicité"; }
:lang(pt-BR) .ad-slot::before { content: "Publicidade"; }
:lang(zh-Hans) .ad-slot::before { content: "广告"; }
.lang-offer { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; background: var(--ink); color: var(--bg); font: 500 14px/1.4 var(--body); }
.lang-offer a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lang-offer button { background: none; border: 0; color: inherit; font: 400 20px/1 var(--body); padding: 2px 6px; cursor: pointer; }
.lang-offer { border-radius: 0 0 10px 10px; }

/* the tempo is typed straight into the display: the number sits in a faint box, like an editable parameter on a
   synth screen; the box lights up under the pointer and turns orange while you type */
.bpm input {
  cursor: text; border-radius: 4px; padding: 2px 6px; width: calc(2em + 12px);
  box-shadow: inset 0 0 0 1px rgba(245,245,241,.16); transition: box-shadow .12s;
}
.tempo-row .bpm { cursor: text; }
.tempo-row .bpm:hover input { box-shadow: inset 0 0 0 1px rgba(245,245,241,.42); }
.bpm input:focus, .bpm input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.bpm input::selection { background: var(--accent); color: var(--scr); }

/* ---------- icons: drawn as masks, so they take the text colour and need no translation ----------
   Every icon-only control carries a translated aria-label (and a title for the hover hint). */
.i { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn .i { width: 17px; height: 17px; }
.btn .ic + .i { margin-left: -2px; }
.btn.icon { min-width: 38px; padding-inline: 9px; }
.btn.small .i { width: 15px; height: 15px; }
.btn.small.icon { min-width: 32px; padding-inline: 7px; }
.more > summary .i-sliders { width: 18px; height: 18px; align-self: center; color: var(--ink); }
.more-hint .i { width: 14px; height: 14px; vertical-align: -3px; margin-right: 1px; }
.ic-set { display: inline-flex; gap: 3px; color: var(--ink); }
.ic-set .i { width: 17px; height: 17px; }
/* a lamp key: an icon toggle with a lamp that lights when it is on; the checkbox inside stays for keys and screen readers */
label.tog { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 46px; height: 36px; padding: 0 11px 0 21px; color: var(--ink); cursor: pointer; font-size: 13px;
  background: radial-gradient(circle at 10px 50%, var(--line) 0 2.6px, transparent 3.1px) var(--key);
  border: 1px solid var(--key-edge); border-radius: 4px; box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; }
label.tog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
label.tog:hover { border-color: var(--ink); }
label.tog:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-side), inset 0 1px 0 #fff; }
label.tog:has(input:checked) { color: #fff; border-color: #000;
  background: radial-gradient(circle at 10px 50%, var(--accent) 0 2.6px, transparent 3.1px) var(--key-dark);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.16); }
label.tog:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
label.tog .i { width: 20px; height: 20px; }
.i-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11.5' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M8.5 21h7'/%3E%3C/svg%3E"); }
.i-midi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M10.6 21v-2.2h2.8V21'/%3E%3Ccircle cx='6.6' cy='12.6' r='1.35' fill='%23000' stroke='none'/%3E%3Ccircle cx='8.2' cy='8.4' r='1.35' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='6.6' r='1.35' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.8' cy='8.4' r='1.35' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.4' cy='12.6' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.i-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h8.5M17.5 6H20M4 12h2.5M11.5 12H20M4 18h10.5M19.5 18h.5'/%3E%3Ccircle cx='15' cy='6' r='2.5'/%3E%3Ccircle cx='9' cy='12' r='2.5'/%3E%3Ccircle cx='17' cy='18' r='2.5'/%3E%3C/svg%3E"); }
.i-keyboard { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M6.5 10h0M10 10h0M14 10h0M17.5 10h0M8 14h8'/%3E%3C/svg%3E"); }
.i-pointer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l12.5 7.3-5.6 1.6-2.4 5.6z'/%3E%3Cpath d='M13 12.6l4.4 5.4'/%3E%3C/svg%3E"); }
.i-external { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-8.5 8.5M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M15 9V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h4'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E"); }
.i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4h5v3M6 7l1 13h10l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E"); }
.i-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.i-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.5' cy='5.5' r='2.5'/%3E%3Ccircle cx='6.5' cy='12' r='2.5'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.5'/%3E%3Cpath d='M8.7 10.7l6.6-3.9M8.7 13.3l6.6 3.9'/%3E%3C/svg%3E"); }
.i-metronome { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 3h4.8L19 21H5z'/%3E%3Cpath d='M7 15.5h10M12 15.5l5.5-10'/%3E%3Ccircle cx='15.2' cy='9.7' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.i-notes { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 17V6l11-2.5v11M8.5 9.5l11-2.5'/%3E%3Cellipse cx='6' cy='17' rx='2.6' ry='2.1' fill='%23000' stroke='none'/%3E%3Cellipse cx='17' cy='14.5' rx='2.6' ry='2.1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.i-tap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 13.5V5a1.5 1.5 0 0 1 3 0v6m0-.5a1.5 1.5 0 0 1 3 0V12m0-.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-.8a6 6 0 0 1-5-2.7L4.6 15a1.5 1.5 0 0 1 2.5-1.7l2.4 2.7'/%3E%3C/svg%3E"); }
.i-maximize { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E"); }
.i-minimize { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5'/%3E%3C/svg%3E"); }
.i-reset { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7M4 4v4.5h4.5'/%3E%3C/svg%3E"); }
p .i, li .i { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--ink); }
.btn.icon .ic { font-size: 11px; }
#recBtn .ic { font-size: 17px; line-height: 1; }
.more-hint b .i { margin: 0 3px 0 0; }

.i-sound { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }

/* ---------- note-value keys (site/note-icons.js) ---------- */
.seg.notes { display: inline-flex; }
.seg.notes button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 9px; }
.seg.notes .ng { display: block; }

/* ---------- mode switch: one instrument, two modes (metronome, tap tempo) ---------- */
.modes { display: inline-flex; border: 1px solid var(--key-edge); border-radius: 4px; background: var(--key); box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; overflow: hidden; }
.modes a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px 9px; font: 600 10.5px/1 var(--body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; }
.modes a + a { border-left: 1px solid var(--key-edge); }
.modes a:hover { background: #fff; color: var(--ink); }
.modes a[aria-current], .modes a[aria-current]:hover { background: var(--key-dark); color: #fff; }
.modes .i { width: 16px; height: 16px; }

/* ---------- the ? key and its popup: how to operate a tool, kept out of the way ---------- */
.tool { position: relative; }
.help-key { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
  font: 600 13px/1 var(--mono); color: var(--ink); background: var(--key); border: 1px solid var(--key-edge);
  box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; }
.help-key:hover { border-color: var(--ink); }
.help-key.inline { position: static; width: 22px; height: 22px; font-size: 11px; flex: none; vertical-align: middle; }
dialog.keys-help { border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink);
  padding: 22px 26px 18px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.28); max-width: min(380px, calc(100vw - 32px)); }
dialog.keys-help::backdrop { background: rgba(20,20,22,.38); }
.keys-help table { border-collapse: collapse; font-size: 14px; }
.keys-help td { padding: 6px 0; vertical-align: middle; }
.keys-help td:first-child { text-align: right; padding-right: 16px; white-space: nowrap; }
.keys-help kbd { font-size: 12px; min-width: 26px; text-align: center; padding: 5px 7px; }
.keys-help kbd.space { width: 76px; height: 24px; vertical-align: middle; }
.keys-help p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); max-width: 34ch; }
.keys-help p:last-of-type { margin-bottom: 0; }
.keys-help .close { position: absolute; top: 8px; right: 8px; }
.beat-mini { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; vertical-align: middle;
  font: 500 11px/1 var(--mono); color: #fff; background: var(--key-dark); border: 1px solid #000; }
dialog.keys-help.wide { max-width: min(560px, calc(100vw - 32px)); }
.keys-help td:first-child { font: 600 10.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.keys-help td + td { color: var(--ink-2); }
.more > summary .help-key { align-self: center; margin-left: 2px; }
header .help-key.hdr { width: 30px; height: 30px; font-size: 14px; align-self: flex-start; }
.calib-body .row .help-key { margin-left: -4px; }
#tripLbl .tri-ic, #subLbl .sub-ic { display: inline-flex; }
#tripLbl .tri-ic .ng, #subLbl .sub-ic .ng { display: block; }
.seg.notes { overflow: hidden; padding: 0; }
.seg.notes button { border: 0; border-radius: 0; background: transparent; cursor: pointer; color: var(--ink); box-shadow: none; }
.seg.notes button + button { border-left: 1px solid var(--key-edge); }
.seg.notes button.on { background: var(--accent); color: var(--accent-ink); }
.go#go { font-size: 22px; }
.i-ramp { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h4.5v-4.5H12V11h4.5V6.5H21'/%3E%3Cpath d='M16 3.5l5 3-3.2 4.6'/%3E%3C/svg%3E"); }
/* practice pages: one settings row, the status beside the keys instead of a line of its own */
.settings .spacer { flex: 1; }
.settings:has(.buddy-win) { gap: 10px 12px; }
.ex-actions { align-items: center; flex-wrap: wrap; }
.ex-actions .ex-status { margin-left: auto; min-height: 0; text-align: right; }
header:has(> .help-key.hdr) { position: relative; }
header .help-key.hdr { position: absolute; top: 2px; right: 0; }
.i-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='4'/%3E%3Cpath d='M10 9.2v5.6l4.8-2.8z' fill='%23000'/%3E%3C/svg%3E"); }

/* ---------- More boxes: the essence stays on the page, the depth folds away (still in the page for search) ---------- */
details.more-info { border-block: 1px solid var(--line); }
details.more-info > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 0; }
details.more-info > summary::-webkit-details-marker { display: none; }
details.more-info > summary::before { content: '+'; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; font: 600 14px/1 var(--mono); color: #fff; background: var(--key-dark);
  border: 1px solid #000; box-shadow: 0 2px 0 #000; }
details.more-info[open] > summary::before { content: '−'; }
details.more-info > summary h2, details.more-info > summary > span { margin: 0; font: 600 17px/1.2 var(--display); color: var(--ink); }
details.more-info > summary h2::before { display: none; }
details.more-info > summary:hover h2 { color: var(--accent-deep, var(--accent)); }
details.more-info[open] { padding-bottom: 18px; }
details.more-info .prose { margin-top: 4px; }
details.more-info + details.more-info { border-top: 0; }
.more-stack { display: flex; flex-direction: column; }

/* ---------- rhythm pages: the count in one strip, the lessons to learn first beside it ---------- */
.rhythm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.rhythm-strip .count-strip, .rhythm-strip .learn-first { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: none; border: 0; padding: 0; }
.cnt { font: 500 14px/1.4 var(--mono); color: var(--ink-2); background: var(--scr, #111); color: #F5F5F1; padding: 5px 10px; border-radius: 4px; letter-spacing: .04em; }
.cnt b { color: var(--accent); font-weight: 700; }
.cnt .sil { opacity: .4; }
.lesson-list .cnt.mini { align-self: flex-start; font-size: 12.5px; padding: 4px 8px; margin: 2px 0 1px; line-height: 1.5; }

/* ---------- Hear it: recordings on YouTube, as plain outbound links ---------- */
.hear h2 { margin: 0 0 10px; }
.hear ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.hear a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; padding: 10px 12px; text-decoration: none; color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); border-radius: 4px; box-shadow: 0 2px 0 var(--key-side), inset 0 1px 0 #fff; }
.hear a:hover { border-color: var(--ink); }
.hear .i { grid-row: span 2; width: 22px; height: 22px; color: var(--bad, #d33); margin-top: 1px; }
.hear .t { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hear .s { font: 500 11px/1.4 var(--mono); color: var(--ink-3); margin-top: 3px; }

/* ---------- exercise cards: the instruction behind a ? ---------- */
.ex-head { display: flex; align-items: center; gap: 8px; }
.ex-head .stars { margin-left: auto; }
.ex-q { width: 20px; height: 20px; font-size: 10.5px; }
.ex-text { margin: 0; font-size: 13px; color: var(--ink-2); }

:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3 0 0 0 -.6 3 0 0 0 -.6 3 0 0 0 -.6 0 0 0 0 .06'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* ---------- moulding grain: the body is nearly flat, never perfectly so; keys and screens stay smooth ---------- */
.steps, .result, .tool, .settings, .ex-card, .inputbar, .feat, .activate, .toc, .buy, dialog.keys-help, .metro-train {
  background-image: var(--grain);
}

/* the TAP key answers each tap like a pad */
#tempoTap.hit { background: var(--accent); border-color: var(--accent-edge, var(--accent)); color: var(--accent-ink); }

/* latency: both delays stacked, their inputs aligned; calibrate to the right */
.calib-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.calib-grid > label { grid-column: 1; display: inline-flex; align-items: center; gap: 8px; }
.calib-grid .ic-set { min-width: 56px; display: inline-flex; justify-content: flex-end; gap: 4px; }
.calib-grid .calib-act { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }