.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; }
  /* A note is still sounding in these columns. The bar runs from the dot of the hit
     to the dot of whatever comes next (or the start of the silence), so its length
     is the length of the note. It is a background so the dot stays on top of it. */
  table.grid { --held: color-mix(in srgb, var(--terra) 45%, transparent); }
  table.grid td.held { background: linear-gradient(var(--held), var(--held)) center / 100% 5px no-repeat; }
  table.grid td.holds { background: linear-gradient(var(--held), var(--held)) right center / calc(50% - 8px) 5px no-repeat; }
  table.grid td.holdend { background: linear-gradient(var(--held), var(--held)) left center / calc(50% - 8px) 5px no-repeat; }
  table.grid td.holds.holdend {
    background: linear-gradient(var(--held), var(--held)) right center / calc(50% - 8px) 5px no-repeat,
                linear-gradient(var(--held), var(--held)) left center / calc(50% - 8px) 5px no-repeat;
  }
  table.grid td.playing.held, table.grid td.playing.holds, table.grid td.playing.holdend {
    background-color: var(--ochre) !important;
    background-image: linear-gradient(var(--held), var(--held)) !important;
  }
  .held-key { font-size: 0.8rem; color: var(--muted); margin: 2px 0 12px; }
  .held-key b { color: #b9a583; }
  .held-key .swatch { display: inline-block; width: 22px; height: 5px; background: color-mix(in srgb, var(--terra) 45%, transparent); vertical-align: middle; margin-right: 4px; }
  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 .where .song-link { font-weight: 700; color: var(--terra); white-space: nowrap; }
.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. A faint line starts each beat when a beat is cut into parts. */
table.grid th.bt, table.grid td.bt { border-left: 1px solid rgba(120, 95, 60, 0.22); }
table.grid th.bar, table.grid td.bar { border-left: 2px solid var(--ink); }
table.grid td.chant { font-size: 0.82rem; font-weight: 500; color: #b9a98c; }
table.grid td.chant.g1 { color: var(--ink); font-weight: 800; }
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; }
.lab .steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.lab .steps .btn2[aria-selected=false] { background: #fff; color: var(--terra); }
.lab .lstep { margin: 12px 0; }
.lab .lstep[hidden] { display: none; }
.meter { height: 12px; width: min(100%, 360px); background: #efe2c8; border-radius: 6px; overflow: hidden; border: 2px solid transparent; }
.meter > i { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.06s linear; }
.meter.heard { border-color: var(--terra); }
.beatlights { display: flex; gap: 6px; margin: 8px 0; min-height: 28px; }
.beatlights i { width: 28px; height: 28px; border-radius: 50%; background: #efe2c8; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.beatlights i.on { background: var(--terra); color: #fff; }
.lab table.ref { border-collapse: collapse; margin: 10px 0; font-size: 0.92rem; }
.lab table.ref th, .lab table.ref td { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line); }
.lab table.ref th { font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* 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); }
.xstep { margin: 24px 0 6px; }
.xstep h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--font-display); font-size: 1.3rem; }
.xstep h4 .no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--terra); color: #fff; font-family: var(--font-sans); font-variant-numeric: lining-nums; font-size: 1rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.xstep > p { margin: 4px 0; }
.xstep .nsketch { color: var(--ink); max-width: 340px; min-height: 60px; margin: 6px 0 0; }
.xstep .nsketch svg { display: block; }
.xstep .ncount { margin: 0 0 6px; font-variant-numeric: tabular-nums; color: var(--muted); }
.xstep .do { margin: 10px 0 0; padding: 8px 12px; background: var(--mist); border-left: 4px solid var(--green); border-radius: 6px; }
details.more { margin: 22px 0; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--leaf); }
.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. */
/* The swing grid is drawn to time: its columns are as wide as the time they last, so a
   dot sits at the left edge of its column, which is the moment it sounds. */
table.grid.swung { table-layout: fixed; }
table.grid.swung th, table.grid.swung td { transition: width .18s ease; }
table.grid.swung thead th:not(.lane):not(.ctrlcol), table.grid.swung td.hit, table.grid.swung td.rest { text-align: left; padding: 6px 0 6px 8px; overflow: hidden; }
.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; }

/* Printable sheet */
.sheet-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 14px; }
.sheet-controls label { font-size: 0.92rem; display: inline-flex; gap: 6px; align-items: center; }
.sheet-controls .btn2 { margin-left: auto; }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sheet-chips button { font: inherit; font-size: 0.82rem; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.sheet-chips button.on { background: var(--terra); border-color: var(--terra); color: #fff; }
.sheet-level h2 { font-size: 1.4rem; margin: 26px 0 0; color: var(--terra); }
.sheet-sub { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 16px; }
.sheet-grid .rcard { margin: 10px 0; box-shadow: none; }
.sheet-grid .rcard.wide { grid-column: 1 / -1; }
.sheet-grid .rcard h3.rname { font-size: 1.25rem; }
.sheet-grid .rcard .say { font-size: 1.15rem; }

@media print {
  @page { margin: 12mm; }
  body.sheet-page { background: #fff; }
  body.sheet-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sheet-page .wrap { display: block; }
  body.sheet-page .wrap > nav,
  body.sheet-page .sy-hub,
  body.sheet-page #controls,
  body.sheet-page #sy-pager,
  body.sheet-page .nav-menu-btn,
  body.sheet-page .nav-menu-backdrop,
  body.sheet-page .from-theory,
  body.sheet-page .sheet-controls,
  body.sheet-page .sheet-chips,
  body.sheet-page .sheet-hide-print,
  body.sheet-page footer { display: none !important; }
  body.sheet-page main { padding: 0; max-width: none; margin: 0; }
  body.sheet-page h1 { font-size: 1.5rem; margin: 0 0 4px; }
  body.sheet-page .lead { font-size: 0.9rem; margin: 0 0 6px; }
  body.sheet-page .sheet-grid { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  body.sheet-page .sheet-first { break-inside: avoid; display: flow-root; }
  body.sheet-page .sheet-level h2 { break-after: avoid; font-size: 1.1rem; margin: 12px 0 0; }
  body.sheet-page .sheet-sub { break-after: avoid; font-size: 0.8rem; margin: 0 0 2px; }
  body.sheet-page .rcard { break-inside: avoid; border: 1px solid #bbb; background: #fff; box-shadow: none; padding: 6px 10px; margin: 5px 0; }
  body.sheet-page .rcard .grid-wrap { margin: 6px 0 2px; overflow: visible; }
  body.sheet-page table.grid { box-shadow: none; }
  body.sheet-page table.grid th,
  body.sheet-page table.grid td { padding: 3px 5px; }
  body.sheet-page table.grid td { height: 26px; }
  body.sheet-page table.grid thead th { font-size: 0.7rem; background: #eee; }
  body.sheet-page table.grid td.hit { font-size: 0.8rem; }
  body.sheet-page .rcard h3.rname { font-size: 1rem; }
  body.sheet-page .rcard .say { font-size: 0.95rem; margin: 2px 0 0; }
  body.sheet-page .rcard .chip { font-size: 0.65rem; padding: 1px 6px; border: 1px solid #ccc; background: #fff; color: #333; }
  body.sheet-page .rcard .chip.lvl { background: #fff; color: #333; }
  body.sheet-page .rcard .rnotation { margin: 4px 0 0; overflow: visible; }
  body.sheet-page .rcard .rnotation svg { max-width: 100%; height: auto; }
  body.sheet-page .rcard > .cap { display: none; }
  body.sheet-page .rcard { background: #fff !important; }
  body.sheet-page .rcard .blurb { font-size: 0.78rem; margin: 4px 0; }
  body.sheet-page .rcard button,
  body.sheet-page .rcard .tap-hint { display: none !important; }
}