.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; }

  .b-kick  { background: #6b6152; }
  .b-snare { background: var(--terra); }
  .b-hat   { background: #8a5a2b; }
  .b-ride  { background: var(--green); }
  .b-crash { background: var(--ochre); color:#3d2b1f; }
  .b-tom   { background: #9a6b3f; }
  

  /* 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 marked by the bar under it — the same thing the pencil mark means
     on paper — so the mark itself only needs to be bolder, not bigger. Growing it
     would change the row height and stop the grids matching each other. */
  table.grid td.hit.accent { font-weight: 800; }
  /* 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; }
  /* A lab grid is the same notation, and each mark is a switch. */
  .groove[data-lab] table.grid td.hit,
  .groove[data-lab] table.grid td.rest { cursor: pointer; }
  .groove[data-lab] table.grid td.hit:hover,
  .groove[data-lab] table.grid td.rest:hover { background: #fbf1da; }
  .lab-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
  .lab-presets .btn { font-size: .85rem; padding: 7px 12px; }

  /* Rhythm grid */
  .grid-wrap { overflow-x: auto; margin: 14px 0 6px; }
  /* overflow:hidden on table makes it the sticky box, so the names would
     scroll away with the notes instead of sticking to this scroller. */
  .grid-wrap > table.grid { overflow: visible; }
  /* A grid wider than the page scrolls under the play head. The button and the
     instrument names stay, or the second bar hides the way to stop it. */
  .grid-wrap .ctrlcol {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--panel) !important;
  }
  .grid-wrap thead .ctrlcol { background: #efe0c6 !important; }
  .grid-wrap th.lane {
    position: sticky;
    z-index: 3;
  }
  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; }
  /* The count is dark on the beat and pale between, and a faint line starts each
     beat when a beat is cut into parts — the same line the Rhythm room draws.
     A second bar of four gets a heavier line. */
  table.grid thead th.onbeat { color: var(--ink); font-weight: 800; }
  table.grid th.bt, table.grid td.bt { border-left: 1px solid rgba(120, 95, 60, 0.45); }
  table.grid th.bar, table.grid td.bar { border-left: 2px solid var(--ink); }
  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; }

/* Named pieces on the kit page. The picture stays modest; the words sit on it. */
.kit-fig { max-width: 440px; margin: 8px 0 22px; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; align-items: start; margin: 8px 0 8px; }
.ways h4 { margin-top: 0; }
.ways table { width: 100%; }
.ways .note { margin-top: 0; }
@media (max-width: 820px) {
  .ways { grid-template-columns: 1fr; }
}
.drum-staff { display: block; position: relative; margin: 2px 0 8px; }
.drum-staff svg { display: block; max-width: none; overflow: visible; }
.staff-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--terra); opacity: .85; pointer-events: none;
}
.staff-key { max-width: 100%; overflow-x: auto; margin: 8px 0 18px; }
.sit-fig { max-width: 480px; margin: 8px 0 22px; }
.sit-fig img { max-width: 100%; height: auto; display: block; }
.kit-stage { position: relative; container-type: inline-size; }
.kit-tag {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: clamp(0.68rem, 3.1cqi, 0.82rem);
  line-height: 1.25;
  padding: 1px 7px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(40, 24, 8, 0.28);
  pointer-events: none;
}
button.kit-tag {
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  color: #fff;
}
button.kit-tag.b-crash { color: #3d2b1f; }
.limb-row { display: grid; gap: 14px; margin: 8px 0 22px; }
.limb-row.feet { grid-template-columns: 1fr 1fr; }
.limb-row.hands { grid-template-columns: 1fr 1fr 1fr; }
.limb-bucket {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.limb-bucket h4 { margin: 0 0 8px; }
.limb-bucket p:last-child { margin-bottom: 0; }
.limb-bucket .hear { margin: 0 6px 6px 0; }
button.hear {
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
button.hear:hover { filter: brightness(1.08); }
@media (max-width: 820px) {
  .limb-row.feet, .limb-row.hands { grid-template-columns: 1fr; }
}