.sy-hub {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--terra);
    text-decoration: none;
    margin: 0 0 12px;
  }
  .sy-hub:hover { color: var(--terra-soft); }

  

  /* Headings */
  h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 10px; }
  section > h2 {
    font-size: 1.7rem; margin: 56px 0 14px; padding-bottom: 8px;
    border-bottom: 3px solid var(--ochre); display: inline-block;
  }
  h3 { font-size: 1.2rem; margin: 30px 0 8px; color: var(--terra); }
  h4 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--terra-soft); }
  p { margin: 0 0 14px; }
  .lead { font-size: 1.12rem; color: #4a3728; }

  
  
  

  /* Cards & callouts */
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
    margin: 18px 0;
  }
  .note {
    border-left: 5px solid var(--ochre); background: #fbf1da;
    padding: 12px 18px; border-radius: 8px; margin: 18px 0; color: #5a4a34;
  }
  .tip { border-left-color: var(--green); background: #eef3e7; }

  /* Tables */
  table { border-collapse: collapse; width: max-content; max-width: 100%; margin: 16px 0; font-size: 0.96rem; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { background: #f3e6cf; font-weight: 700; }
  tr:last-child td { border-bottom: none; }

  

  /* Drum grid marks. A column is one moment; a row is one piece of the kit, in
     score order, cymbals at the top down to the kick. The mark is the notation a
     drummer would write by hand: × on a cymbal, ● on a drum, ○ for an open hat. */
  table.grid td.hit { font-size: 1rem; line-height: 1; color: var(--terra); }
  /* An accent is written as it is on a score: a > above the note. The dot stays the
     same size, so a loud and a soft hit differ by the sign and nothing else. The
     percussion layer's underline for accents is switched off here for that reason. */
  table.grid td { position: relative; }
  table.grid td.accent { box-shadow: none; }
  table.grid td.hit.accent::before {
    content: ">"; position: absolute; left: 50%; top: 3px; transform: translateX(-50%);
    font: 800 1.2rem/1 system-ui, sans-serif; color: var(--ink);
  }
  table.grid td { height: 46px; vertical-align: middle; }
  /* A ghost has to be obviously softer than a hit and still obviously not a rest,
     which is why it keeps the terra family and only loses weight. Pale grey read
     as an empty column. */
  table.grid td.hit.ghost { color: #d98b6a; }
  table.grid td.rest { color: #ddcdb0; }
  table.grid th.lane {
    text-align: right; white-space: nowrap; font-weight: 700;
    background: #f3e6cf; font-size: 0.82rem; padding-right: 12px;
  }
  .grid-legend { font-size: 0.88rem; color: var(--muted); margin: 6px 0 16px; }
  .grid-legend b { color: var(--ink); font-weight: 700; }
  .groove > .groove-title { font-weight: 700; margin: 0 0 6px; }

  /* Rhythm grid */
  .grid-wrap { overflow-x: auto; margin: 14px 0 6px; }
  table.grid { width: auto; min-width: max-content; max-width: 100%; text-align: center; }
  table.grid th, table.grid td { text-align: center; white-space: nowrap; padding: 8px 10px; }
  table.grid thead th { background: #efe0c6; color: var(--muted); font-weight: 600; font-size: .82rem; }
  table.grid .sam { box-shadow: inset 0 3px 0 var(--terra); }
  .hands { font-size:.9rem; color: var(--muted); margin: 2px 0 14px; }
  
  
  

  /* Checklist */
  ul.check { list-style: none; padding-left: 0; }
  ul.check li { padding: 6px 0 6px 30px; position: relative; }
  ul.check li::before { content: "☐"; position: absolute; left: 4px; color: var(--terra); font-size: 1.1rem; }

  /* Level badges */
  .badge { display:inline-block; background: var(--terra); color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius: 20px; letter-spacing:.04em; vertical-align: middle; margin-left: 8px; }

  code { background: #f3e6cf; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
  

  
  
  
  
  
  /* Audio player */
.playbtn { background: var(--terra); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:.75rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .playbtn:hover { background: var(--terra-soft); }
  .playbtn.playing { background: var(--green); }
  
  

  @media (max-width: 820px) {
    
    h1 { font-size: 1.8rem; }
    }

.btn.nav { background: var(--terra); color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }


/* Rhythm cards. A card is one catalogue pattern: grid, gaps, circle. */
.rcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 18px 0; }
.rcard h3.rname { font-family: var(--font-display); font-size: 1.6rem; margin: 0; line-height: 1.1; color: var(--ink); }
.rcard .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.rcard .chip { font-size: 0.74rem; background: #f3e6cf; border-radius: 99px; padding: 2px 9px; color: #5a4630; }
.rcard .chip.lvl { background: var(--terra); color: #fff; }
.rcard .chip.warn { background: #fff3d6; border: 1px solid var(--ochre); }
.rcard .blurb { margin: 10px 0 4px; }
.rcard .say { font-variant-numeric: lining-nums; margin: 8px 0 0; font-size: 1.5rem; font-family: var(--font-display); font-style: italic; color: var(--leaf); }
.rcard .say b { color: var(--terra); font-style: normal; font-size: 1.6em; font-weight: 800; }
.rcard .views { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.rcard .gapwrap { flex: 1 1 280px; min-width: 0; }
.gapbar { display: flex; gap: 3px; height: 36px; }
.gapbar div { background: #e9c98a; color: #3d2b1f; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.9rem; min-width: 0; overflow: hidden; }
.rcard .cap { font-size: 0.76rem; color: var(--muted); margin: 4px 0 0; }
.rcard .circlewrap { flex: 0 1 auto; max-width: 100%; }
.rcard .wheel-svg { width: min(100%, 230px); }
svg.circle { width: 170px; height: 170px; display: block; }
.rcard .where h4 { margin: 14px 0 4px; font-size: 0.95rem; color: var(--terra-soft); }
.rcard .where ul { margin: 0 0 4px 18px; padding: 0; }
.rcard .apply { display: flex; gap: 8px 14px; flex-wrap: wrap; margin: 0; }
.rcard .apply a { font-weight: 700; color: var(--terra); }

/* Grid: the count along the top is bold on a beat (or the 1 that starts a group) and
   faint between; there are no lines between columns. */
table.grid thead th { color: #b9a98c; font-weight: 500; }
table.grid thead th.onbeat, table.grid thead th.grp { color: var(--ink); font-weight: 800; }
.rcard > .cap { margin: 0 0 8px; }
table.grid td.hit.comp { color: var(--green); }
table.grid th small.vib { display: block; font-size: 0.68rem; color: var(--terra); font-weight: 800; }

/* Path cards on the landing page and the lesson list. */
.path { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 22px; }
.path a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.path a:hover { border-color: var(--terra); }
.path a b { display: block; color: var(--terra); }
.path a span { font-size: 0.86rem; color: var(--muted); }

/* Catalogue */
.cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .cat { grid-template-columns: 1fr; } }
.cat-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 6px; max-height: 80vh; overflow: auto; }
.cat-list h4 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 10px 10px 4px; }
.cat-list button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 4px 10px; border-radius: 6px; color: var(--ink); font-size: 0.9rem; }
.cat-list button:hover { background: #f6ead2; }
.cat-list button.on { background: var(--terra); color: #fff; }
.cat-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.cat-filter button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 12px; font: inherit; cursor: pointer; }
.cat-filter button.on { background: var(--leaf); color: #fff; border-color: var(--leaf); }

/* Labs */
.lab { margin: 18px 0 28px; }
.lab .controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.lab select, .lab input[type=range] { font: inherit; accent-color: var(--terra); }
.btn2 { background: var(--panel); border: 1.5px solid var(--terra); color: var(--terra); border-radius: 10px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.btn2:hover { background: #fbe9dd; }
.btn2.primary { background: var(--terra); color: #fff; }
.tappad { width: 100%; max-width: 360px; height: 84px; border-radius: 14px; border: 2px dashed var(--terra); background: #fff; font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--terra); cursor: pointer; }
.tappad:active, .tappad.hit { background: var(--terra); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stat b { display: block; font-size: 1.35rem; font-family: var(--font-display); }
.stat span { font-size: 0.76rem; color: var(--muted); }
.dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dots i { width: 22px; height: 22px; border-radius: 50%; background: #efe2c8; display: inline-block; }
.dots i.ok { background: var(--green); }
.dots i.mid { background: #d9a441; }
.dots i.off { background: var(--terra); }
.quiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.quiz button { padding: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.quiz button.good { background: var(--mist); border-color: var(--green); }
.quiz button.bad { background: #f6dccf; border-color: var(--terra); }
.euc { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.1em; font-size: 1.05rem; }

/* Notation under the grid: one-line staves drawn by rhythm-notation.js. */
.rnotation { margin: 10px 0 2px; color: var(--ink); overflow-x: auto; }
.rnotation svg { display: block; }
.rnotation .vf-stavenote.playing, .rnotation .vf-stavenote.playing * { fill: var(--terra) !important; stroke: var(--terra) !important; }

/* Note-value chart on the front page: each row is a staff drawn from a few steps. */
.ntable .nrow { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 9rem; gap: 12px; align-items: center; padding: 2px 0; border-top: 1px solid var(--line); }
.ntable .nrow:first-child { border-top: 0; }
.ntable .nhead { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.ntable .nname { display: flex; flex-direction: column; line-height: 1.25; }
.ntable .nname span { font-size: 0.82rem; color: var(--muted); }
.ntable .nsketch { color: var(--ink); max-width: 340px; min-height: 60px; }
.ntable .nsketch svg { display: block; }
.ntable .ncount { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 640px) {
  .ntable .nrow { grid-template-columns: minmax(0, 1fr) 7rem; }
  .ntable .nrow .nsketch { grid-column: 1 / -1; grid-row: 2; }
  .ntable .nhead span:nth-child(2) { display: none; }
}

/* Play it on: one instrument pick per page, what each row becomes under it. */
.inst-strip { margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.inst-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inst-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.inst-btn { font: inherit; font-size: 0.85rem; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 99px; padding: 3px 11px; cursor: pointer; }
.inst-btn:hover { background: #f6ead2; }
.inst-btn[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; }
.inst-say ul { margin: 8px 0 2px; padding-left: 18px; font-size: 0.92rem; }
.inst-say li { margin: 2px 0; }
.inst-say .cap { margin: 4px 0 0; }

/* Swing ratio lab: one beat split long-short in proportion to the slider. */
.swing-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.swing-presets .btn2 { padding: 5px 12px; font-size: 0.9rem; }
.swing-beat { position: relative; display: flex; gap: 3px; height: 40px; max-width: 520px; }
.swing-beat div { background: #e9c98a; color: #3d2b1f; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 6px; min-width: 0; flex: 0 0 auto; transition: flex-basis 0.08s linear; }
.swing-beat .short { background: #f3deb4; flex: 1 1 0; }
.swing-beat i.half { position: absolute; left: 50%; top: -5px; bottom: -5px; border-left: 2px dashed var(--terra); pointer-events: none; }

/* Lesson furniture */
.chain { counter-reset: step; list-style: none; padding: 0; margin: 14px 0; }
.chain li { counter-increment: step; position: relative; padding: 6px 0 6px 38px; }
.chain li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--terra); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.from-theory { font-size: 0.9rem; color: var(--muted); margin: 0 0 14px; }
.from-theory a { color: var(--terra); font-weight: 700; }

/* Where we are: every lesson says what it teaches, why it comes now, and what it needs. */
.lesson-map { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--terra); border-radius: var(--radius); padding: 14px 18px; margin: 16px 0 22px; }
.lesson-map .steps { display: flex; gap: 4px; margin: 0 0 10px; }
.lesson-map .steps a { flex: 1 1 0; height: 8px; border-radius: 4px; background: #e3d3b4; }
.lesson-map .steps a.done { background: var(--leaf); }
.lesson-map .steps a.here { background: var(--terra); }
.lesson-map .where-now { font-weight: 800; margin: 0 0 8px; }
.lesson-map dl { margin: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: 6px 12px; }
.lesson-map dt { font-weight: 700; color: var(--terra); }
.lesson-map dd { margin: 0; }
.lesson-map .goal { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }

/* The ladder on the home page: each step with what it teaches and why it is here. */
ol.ladder { list-style: none; padding: 0; margin: 14px 0 22px; counter-reset: rung; }
ol.ladder li { counter-increment: rung; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px 12px 62px; margin: 0 0 10px; }
ol.ladder li::before { content: counter(rung); position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--terra); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
ol.ladder li > a { font-weight: 800; font-size: 1.1rem; color: var(--terra); text-decoration: none; }
ol.ladder li > a:hover { text-decoration: underline; }
ol.ladder .row2 { margin: 4px 0 0; font-size: 0.93rem; }
ol.ladder .row2 b { color: var(--leaf); }

/* How to read a grid. */
.read-grid ul { margin: 8px 0 12px 20px; padding: 0; }
.read-grid li { margin: 6px 0; }
.read-grid li.s { list-style: none; margin-left: -1.2em; }
.read-grid .sym { display: inline-block; min-width: 1.6em; text-align: center; font-weight: 800; color: var(--terra); }

/* Instrument box at the foot of a lesson, and the instrument-by-instrument page. */
.apply-box .apply-list { margin: 8px 0 8px 18px; padding: 0; }
.apply-box .apply-list li { margin: 6px 0; }
.apply-box .apply-list a { font-weight: 700; color: var(--terra); }
.apply-box .cap { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
table.apply-table { width: 100%; max-width: 100%; font-size: 0.95rem; }
table.apply-table th, table.apply-table td { vertical-align: top; padding: 8px 10px; }
table.apply-table td a { font-weight: 700; color: var(--terra); }
table.apply-table td:first-child { white-space: nowrap; }
@media (max-width: 700px) { table.apply-table td:first-child { white-space: normal; } }
section > p.cap { font-size: 0.85rem; color: var(--muted); margin: -6px 0 18px; }