/* The Rhythm guitar reference, to hear (rhythm-guitar.html, and the
   review pages of its alternatives, which are kept outside the site): the
   site's standalone-page look (parts.html, audio-demo.html) — the dark
   panels, the gold accent, Inter — with the tab's own drawing from
   css/tab.css. */
:root{
  color-scheme: dark;
  --bg:#0c0b0a; --panel:#141312; --panel2:#1b1a18; --line:#2a2724; --line2:#3a3631;
  --ink:#ece7dc; --muted:#a49a8a; --muted2:#6f675b; --a:#e0a84a;
  /* the pages set as their books (the owner's design review w2-a, 2026-10-05, "Section headings set as the books
     set them": Accept): the books' serif (js/printouts.js BOOK_SERIF), and the book's own colour, its cover's field,
     on the heavy rule over each section as the book has it (BOOK_COLOR, b6-e) — the rhythm book's blue #224da5
     lifted a step to read on the dark page; css/chord-fill-page.css sets the chord book's terracotta as it is */
  --book:#4470d0;
  --serif:'Source Serif 4',Georgia,serif;
  /* (the small grey words — the labels in capitals, a chart's song, the records after a head, "bpm" — a step lighter
     than --muted2, which stays the strings', the rules' and the dots': at #6f675b they were 3.5:1 on the page and
     3.3:1 on a card, under the 4.5:1 small type wants; this is 5.2:1 and 4.9:1 — the owner's design review w2-l,
     2026-10-05, "Small grey labels readable": Accept) */
  --quiet:#8b8274;
  --e:#5b7fe0;                      /* the jam's blue, for the recording/engine tell on a lit Play */
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-padding-top:var(--bar-h, 64px); }
body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 Inter,system-ui,sans-serif; overflow-x:hidden; }
a{ color:var(--a); }
.top{ display:flex; align-items:baseline; gap:18px; padding:14px 22px; border-bottom:1px solid var(--line); }
.top .site{ font-family:Inter,system-ui,sans-serif; font-weight:600; color:var(--muted); text-decoration:none; }
main{ max-width:1180px; margin:0 auto; padding:22px 22px 80px; min-width:0; }
/* (the title in the books' serif, as their contents and appendix titles are set: w2-a) */
h1{ font:600 2.4rem/1.1 var(--serif); letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance; }
.lede{ max-width:68ch; color:var(--muted); font-size:15px; margin:0 0 14px; }
/* the printout's PDF, at the top (js/printouts.js linkPdfs) */
.pdf-top{ margin:0 0 14px; font-size:15px; font-weight:500; }
/* the title beside the book's front cover, small, the cover a link to the PDF too (the owner's design review w2-d,
   2026-10-05, "The book's cover beside the title": Accept; the PDF's own rendered first sheet, js/play-page.js cover) */
.book-head{ display:flex; align-items:center; gap:20px; margin:0 0 18px; }
.book-head h1{ margin:0 0 8px; }
.book-head .pdf-top{ margin:0; }
.book-cover{ flex:none; display:block; width:84px; border-radius:3px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); transition:transform .15s ease; }
.book-cover img{ display:block; width:100%; height:auto; }
.book-cover:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .book-cover{ transition:none; } }
.pdf-top a{ text-underline-offset:3px; }
/* (beside it, the book's key: a button set as a link — js/play-page.js key, the owner's w1-b) */
.pdf-top .pdf-sep{ color:var(--muted2); margin:0 .5em; }
.pdf-top a[hidden] + .pdf-sep{ display:none; }
.key-link{ font:inherit; color:var(--a); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--a); outline-offset:2px; }

/* the sticky bar: what plays under the guitar, the count-in, the sections */
.rr-bar{ position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:0 -22px 4px; padding:9px 22px;
  background:rgba(12,11,10,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
/* (the bar the window's width, its line meeting the window's edges as the header's does, where it stopped 22 px past
   the page's column and the page scrolled by under its open ends; its controls still on the column: the owner's
   design review w2-i, 2026-10-05, "Backing switch as one control; full-width bar": Accept. Above a phone's width
   and its edges only — how the bar lays its controls out on a phone or a tablet is the phone review's (w3)) */
@media (min-width:641px){ .rr-bar{ margin-left:min(-22px, calc(50% - 50vw)); margin-right:min(-22px, calc(50% - 50vw)); padding-left:max(22px, calc(50vw - 50%)); padding-right:max(22px, calc(50vw - 50%)); } }
.lbl{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.seg{ display:inline-flex; gap:2px; }
.seg button{ font:600 12px Inter,system-ui,sans-serif; padding:6px 10px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; min-height:32px; }
.seg button.active{ color:var(--ink); border-color:var(--line2); background:var(--panel2); }
/* (the three one switch: one track they sit in, the one chosen raised in it, the others lit under the pointer, where
   they read as loose words beside one boxed one — w2-i, above. The buttons' size above a phone's width only, and
   no more specific than .seg button, so a touch screen's 44 px (w3-i, after) still holds; a phone's bar is w3-c's.
   On a tablet held upright the track and its buttons tighter, no wider than the three were, so w3-j's bar keeps
   its picker 180 px on its one line) */
.rr-bar .seg{ padding:3px; border:1px solid var(--line2); border-radius:9px; background:var(--panel); }
@media (min-width:641px){ :where(.rr-bar) .seg button{ min-height:28px; padding:4px 12px; } }
@media (min-width:641px) and (max-width:999px){ .rr-bar .seg{ padding:2px; gap:0; } :where(.rr-bar) .seg button{ padding:4px 8px; } }
@media (hover:hover){ .rr-bar .seg button:not(.active):hover{ color:var(--ink); background:rgba(236,231,220,.05); } }
.rr-bar .seg button.active{ border-color:transparent; background:var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
label.check{ display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:13px; cursor:pointer; }
label.check input{ accent-color:var(--a); }
.jump{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; min-width:0; flex:0 1 auto; }
/* Find (js/play-page.js finder; the owner's w1-a, 2026-10-05, "Find a rhythm, artist or song": Accept): a field
   before the picker, a glass in it, taking the bar's free room up to 270 px; under 1100 px, where the bar has no
   room for it, behind a glass button that opens it on a line of its own at the bar's top */
.find-field{ position:relative; display:inline-flex; align-items:center; margin-left:auto; flex:1 1 120px; max-width:270px; min-width:0; }
.find-field + .find-btn + .jump{ margin-left:0; }
.find-field svg, .find-btn svg{ width:14px; height:14px; fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; pointer-events:none; }
.find-field svg{ position:absolute; left:9px; }
.find-field input{ width:100%; min-width:0; font:500 13px Inter,system-ui,sans-serif; color:var(--ink); background:var(--panel2); border:1px solid var(--line2); border-radius:6px; padding:5px 8px 5px 29px; min-height:32px; }
.find-field input::placeholder{ color:var(--muted2); }
.find-field input:focus{ outline:none; border-color:var(--a); }
.find-field input::-webkit-search-cancel-button{ filter:invert(.7); }
.find-btn{ display:none; place-items:center; flex:none; width:40px; min-height:40px; padding:0; border-radius:6px; border:1px solid var(--line2); background:var(--panel2); cursor:pointer; }
.find-btn[aria-expanded="true"]{ border-color:var(--a); }
.find-btn[aria-expanded="true"] svg{ stroke:var(--a); }
@media (max-width:1099px){
  .find-field{ display:none; }
  .find-btn{ display:inline-grid; order:1; }   /* (after the picker, the key's "?" after it) */
  .key-btn{ order:2; }
  .find-field + .find-btn + .jump{ margin-left:auto; }
  .rr-bar.find-open > .find-field{ display:inline-flex; order:-2; flex:1 1 100%; max-width:none; margin-left:0; }
  .find-field input{ min-height:40px; font-size:16px; }
}
/* (what was found: how many and where, and Show all) */
.find-note{ margin:14px 0 0; color:var(--muted); font-size:14px; }
.find-note span{ color:var(--ink); }
.find-clear{ margin-left:10px; font:600 12.5px Inter,system-ui,sans-serif; color:var(--a); background:none; border:1px solid var(--line2); border-radius:999px; padding:4px 12px; min-height:30px; cursor:pointer; }
.find-clear:hover, .find-clear:focus-visible{ border-color:var(--a); }
/* (while finding: the sections' lines put away, the contents' sections with nothing found greyed) */
.finding .rr-lines{ display:none; }
.finding .rr-sec{ padding-top:22px; }
.toc a.none{ opacity:.4; }
.jump select{ font:500 13px Inter,system-ui,sans-serif; color:var(--ink); background:var(--panel2); border:1px solid var(--line2); border-radius:6px; padding:5px 8px; min-height:32px; max-width:min(320px, 60vw); min-width:0; }
/* (a phone's: what plays under the guitar, opening the switches — below, w3-c) */
.bar-sound{ display:none; }
/* the contents, under the title: every section, the one in view marked */
.toc{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 12px; max-width:100%; font-size:13.5px; }
.toc a{ color:var(--muted); text-decoration:none; white-space:nowrap; }
.toc a:hover, .toc a.on{ color:var(--a); }
.toc a.on .toc-name{ text-decoration:underline; text-underline-offset:3px; }
/* (set as the book's contents page — js/play-page.js contents; the owner's w1-i, 2026-10-05, "Contents set as the
   book's contents": Accept, with w2-e, "Contents numbered in columns, as the book's": Accept — its groups side by
   side, the reference's Basics one column and its Styles three, the chord book's styles three; each line its
   number as the book numbers it, its name, its tempo at the line's end, the lines read down each column) */
.toc.toc-book{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 3fr); gap:6px 32px; margin:2px 0 16px; padding:12px 0 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.toc.toc-book.one{ grid-template-columns:minmax(0, 1fr); }
.toc-group{ min-width:0; }
.toc-label{ margin:0 0 6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); }
.toc-group ol{ list-style:none; margin:0; padding:0; }
.toc-group + .toc-group ol, .toc.one .toc-group ol{ columns:3; column-gap:32px; }
.toc-group li{ break-inside:avoid; }
.toc.toc-book a{ display:flex; align-items:baseline; gap:8px; padding:3px 0; white-space:normal; }
.toc-num{ flex:none; width:1.4em; text-align:right; color:var(--muted2); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.toc-name{ flex:1 1 auto; min-width:0; }
.toc-tempo{ flex:none; color:var(--muted2); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.toc-tempo .beat{ letter-spacing:-.3em; margin-right:.45em; }   /* (the dot close: b1-f, below) */
.toc.toc-book a:hover .toc-num, .toc.toc-book a.on .toc-num{ color:var(--a); }
/* (the contents' fold: a phone's — js/play-page.js `following` — its line hidden wherever the contents show open) */
.toc-fold > summary{ display:none; }

/* a section: its heading, its tone and technique lines, its progressions, its rows */
.rr-sec{ margin:0; padding-top:34px; }
/* (a section opened as its book opens it — w2-a, js/printouts.js secHead: a heavy rule in the book's colour over it,
   its number in grey (the book's: the data's order, which the page's is), its name in the serif, its tempo in the
   serif's italic with old-style figures. The number is the heading's data-num, drawn here, so the heading's words —
   which the mirror test reads — are the printout's) */
.rr-sec > h2{ display:flex; flex-wrap:wrap; align-items:baseline; font:600 1.8rem/1.2 var(--serif); letter-spacing:-.015em; margin:0 0 12px; padding-top:10px; border-top:3px solid var(--book); }
.rr-sec > h2[data-num]::before{ content:attr(data-num); min-width:1.75em; color:var(--muted2); font-weight:500; letter-spacing:0; font-variant-numeric:tabular-nums lining-nums; }
/* (the section's rough tempo, beside its name: a row's own only where it is off it) */
.rr-sec > h2 .rr-sec-tempo{ margin-left:.7em; color:var(--muted); font:italic 400 1.1rem var(--serif); letter-spacing:0; font-variant-numeric:oldstyle-nums; white-space:nowrap; }
/* (a dotted quarter, "♩.", its dot set close against the note, as the books set it — the owner's b1-f, "a tight dotted quarter", on the screen since the owner's st-c, 2026-10-05, "The tab's words set as the books' are": Accept: the note comes from a fallback face an em wide, which left the dot a word-space off — and the gap after it kept) */
.rr-sec-tempo .beat{ letter-spacing:-.3em; margin-right:.45em; }
/* (under them, the other book's style or sections, each a link: the page's own, keyed as the lines are — the
   owner's w1-h, 2026-10-05, "The two books link to each other": Accept) */
/* (a note's cross-reference, made a link: a section of this page, or a chord printout's PDF — the owner's w1-j) */
.rr-info .rr-xref{ color:var(--a); text-decoration:none; }
.rr-info .rr-xref:hover, .rr-info .rr-xref:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.rr-other{ display:grid; grid-template-columns:8.6em minmax(0, 1fr); align-items:baseline; gap:3px 8px; color:var(--muted); font-size:13.5px; }
.rr-lines + .rr-other{ margin-top:-11px; }
.rr-other .rr-label{ color:var(--muted2); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.rr-xbook a{ text-decoration:none; font-weight:500; }
.rr-xbook a:hover, .rr-xbook a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.rr-xsep{ color:var(--muted2); }
.pdf-top .other-book{ color:var(--muted); font-weight:400; }
/* (the tone lines under one label, the technique line under its own, as the printout sets them) */
.rr-lines{ margin:0 0 14px; max-width:100ch; }
.rr-info{ display:grid; grid-template-columns:8.6em minmax(0, 1fr); align-items:baseline; gap:3px 8px; color:var(--muted); font-size:13.5px; }
.rr-info .rr-label{ color:var(--quiet); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
/* (the Chords line: "see" the chord printouts, a strip of the style's grips under it, as the printout draws it) */
.rr-info .rr-see{ display:block; }
.rr-strip{ display:grid; align-items:start; margin-top:4px; }
/* (on the page the strip wraps where the screen is narrower than the sheet's row: its sheet widths, set inline, give way — the merge, 2026-10-04, a phone at 320 px) */
.rr-info .rr-strip{ grid-template-columns:repeat(auto-fill, minmax(0, 62px)) !important; height:auto !important; row-gap:6px; max-width:100%; }
.rr-strip figure{ margin:0; display:flex; flex-direction:column; align-items:center; }
.rr-strip figcaption{ font:600 12px/1.3 Inter,system-ui,sans-serif; color:var(--ink); }
.rr-strip .chord-diagram{ display:block; width:100%; height:auto; }
.rr-strip .chord-diagram .fret-string{ stroke:var(--muted2); stroke-width:1.1; }
/* (the frets as plain to see as the strings: in the panel line's colour they all but vanished, and the grip read as
   loose dots on strings — the owner's design review w2-j, 2026-10-05, "Chord grips a size up, frets visible": Accept) */
.rr-strip .chord-diagram .fret-wire{ stroke:#5a5349; stroke-width:1.1; }
.rr-strip .chord-diagram .fret-nut{ stroke:var(--ink); stroke-width:4; }
.rr-strip .chord-diagram .fret-num{ fill:var(--muted); font:600 10px Inter,system-ui,sans-serif; }
.rr-strip .chord-diagram .diagram-note, .rr-strip .chord-diagram .diagram-open{ fill:var(--panel, #fff); stroke:var(--ink); stroke-width:1.5; }
.rr-strip .chord-diagram .diagram-root, .rr-strip .chord-diagram .diagram-open.diagram-root{ fill:var(--ink); }
.rr-strip .chord-diagram .diagram-barre{ fill:var(--line); }
.rr-strip .chord-diagram .diagram-finger{ fill:var(--ink); font:700 8.5px Inter,system-ui,sans-serif; }
.rr-strip .chord-diagram .diagram-root ~ .diagram-finger{ fill:var(--panel, #fff); }
.rr-strip .chord-diagram .diagram-finger.small{ font-size:7px; }
.rr-strip .chord-diagram .diagram-open-degree{ fill:var(--muted); font:600 8px Inter,system-ui,sans-serif; }
.rr-strip .chord-diagram .diagram-mute{ fill:var(--muted); font:500 11px Inter,system-ui,sans-serif; }
.rr-strip .chord-diagram .diagram-end-finger{ fill:var(--ink); font:600 10.5px Inter,system-ui,sans-serif; }
.rr-strip .chord-diagram .note-ring, .rr-strip .chord-diagram .note-tap{ display:none; }
/* (an intro or an ending: its role named small over its name) */
.rr-head .rr-role{ flex-basis:100%; color:var(--quiet); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
details.rr-lines summary{ cursor:pointer; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.sub{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--quiet); margin:0 0 6px; font-weight:600; }
/* a section's progressions on the printout's grid (the page's script sets the columns, the gap and each chart's column):
   one panel, the charts standing in it as on the sheet, every bar line on the grid's */
.rr-progs{ display:grid; align-items:start; grid-template-columns:minmax(0, 1fr); row-gap:14px; margin:0 0 16px; padding:10px 14px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.rr-progs > .sub{ grid-column:1 / -1; margin:2px 0 -2px; }
.rr-rows{ display:grid; align-items:start; grid-template-columns:repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap:12px; }
/* (the rows dealt to columns, js/rhythm-reference-page.js dealRows — the owner's xc-c, "Variations under their row,
   columns without holes": Accept): each column its blocks one under another, a block a row and its variations
   straight under it, nearer it than the next block is */
/* (a column no narrower than the grid's 520 px: where the page narrows before the columns are dealt again,
   they wrap one under the other rather than squeeze) */
.rr-rows.dealt{ display:flex; flex-wrap:wrap; align-items:flex-start; }
.rr-col{ flex:1 1 min(520px, 100%); min-width:0; display:flex; flex-direction:column; gap:12px; }
.rr-fam{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rr-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px 8px; min-width:0; }
.rr-card.playing{ border-color:var(--a); }
/* (a chart has no panel of its own, so its bar lines stand on the grid's; playing, it is ringed) */
.rr-prog{ min-width:0; border-radius:8px; }
.rr-prog.playing{ outline:1px solid var(--a); outline-offset:5px; }
/* (a chart's drawing reaches past its column by its line numbers' room, --num, as its column starts at its first bar line's numbers; a line wider than a phone's one column scrolls) */
.rr-prog .tab{ margin-right:calc(-1 * var(--num, 0px)); }
.rr-prog .tab svg{ max-width:none; }
.rr-prog .rr-ctl{ column-gap:10px; }
/* (a chart's controls on one line under it — Play, the tempo, Loop — where Loop was left alone on a second line
   under every chart, three charts to a row: the word "Tempo" out of sight, left to the slider's own name — its
   aria-label says it — and the bpm beside it: the owner's design review w2-f, 2026-10-05, "Chart controls on one
   line": Accept. Above a phone's width, where the charts stand side by side; a phone's controls are its own) */
@media (min-width:641px){ .rr-prog .tempo .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
/* (a chart's chord numbers in the bold serif its printout sets them in, js/printouts.js CF_NUMERAL_FACE — the
   owner's xa-a there and xc-e here, 2026-10-04, "Serif numerals on the reference page's charts": Accept — so I, II
   and III never read as bar lines; their colour and size the page's own. Drawn only: a bar's room is counted from
   its letters, so no chart moves) */
.rr-prog .tab-numeral{ font-family:'Source Serif 4','Times New Roman',Times,system-ui,serif; font-weight:600; font-size:14.5px; letter-spacing:.01em; }
/* (the books' serif, b1-a, on the screen since the owner's st-b, 2026-10-05: css/tab.css — and at the books' 14.5 px, as the printout sets these very charts (.rr-tab .tab-numeral, BOOK_NUMERAL_FACE): Source Serif 4's box stands taller than Times' did, and at the tab's 16 px a name's line on a chart, cropped 2 above the tab's top as the printout's is (progressionCharts `top`), reached past its drawing's top edge — "nothing drawn cut off"; the gap after the name is st-a's, as drawn) */
.rr-prog .rr-ctl .tempo input{ width:84px; }

/* a row's head: its name, then the hand, the time and the tempo, as the printout's */
.rr-head{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; }
.rr-head h3{ margin:0; font:600 1.02rem/1.25 Inter,system-ui,sans-serif; }
.rr-prog .rr-head h3{ font-size:.95rem; }
/* (a chart's song after its name, light, as the printout prints it: review RR10) */
.rr-prog .rr-head .rr-song{ color:var(--quiet); font-size:13px; }
.rr-head p{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; color:var(--muted); font-size:13px; }
.rr-head p > span{ display:inline-flex; align-items:center; gap:5px; }
/* (the dot after each line but the last, so a head that wraps ends a line with it, never starts one) */
.rr-head p > span:not(:last-child)::after{ content:"·"; margin:0 7px; color:var(--muted2); }
.rr-head .rr-hand{ color:var(--ink); }
.rr-head .rr-note{ font-style:italic; }
/* a record of the feel, as the printout shows it (js/feel-examples.js): light, after the tempo — in the page's quiet
   grey over the printout's own #777 set on it inline (which this rule, without !important, never reached: 4.1:1 on a
   card; w2-l, above); the printout keeps its grey */
.rr-head .rr-ex{ color:var(--quiet) !important; }
/* a variation under its row (the reduction's slash line or short tab): its label in the note's italic */
.rr-card.rr-var .rr-vlabel{ font-style:italic; color:var(--ink); }
/* (a variation hung under its row: set in from the row's left edge by --hang, a hairline from the row down to each,
   so they read as the row's and not as rows of their own — the owner's design review w2-h, 2026-10-05, "Variations
   hang under their row": Accept, over the owner's xc-c, which put them under their row. On a wider screen: a
   phone's one column has no room to give) */
@media (min-width:641px){
  .rr-fam{ --hang:22px; }
  .rr-fam > .rr-var{ position:relative; margin-left:var(--hang); }
  .rr-fam > .rr-var::before{ content:""; position:absolute; left:-15px; top:-7px; bottom:-7px; border-left:1px solid var(--line2); }
  .rr-fam > .rr-var:last-child::before{ bottom:auto; height:28px; border-bottom:1px solid var(--line2); border-bottom-left-radius:7px; width:11px; }
  .rr-fam > .rr-var:not(:last-child)::after{ content:""; position:absolute; left:-15px; top:21px; width:11px; border-top:1px solid var(--line2); }
  /* (its slider a little shorter, so its controls keep to as many lines as its row's take) */
  .rr-fam > .rr-var .tempo input{ width:118px; }
}
.rr-head .beat{ letter-spacing:-.3em; margin-right:.45em; }   /* (the dot close: b1-f, above) */
.rr-swing{ display:block; flex:none; overflow:visible; }
.rr-swing .tab-stem{ fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round; }
.rr-swing .tab-flag{ fill:var(--muted); stroke:var(--muted); stroke-width:.5; stroke-linejoin:round; }
.rr-swing .tab-beam{ stroke:var(--muted); stroke-width:3.4; }
.rr-swing .tab-head, .rr-swing .tab-dot{ fill:var(--muted); }
.rr-swing .tab-bracket{ fill:none; stroke:var(--muted); stroke-width:1.3; }
.rr-swing .tab-tuplet{ fill:var(--muted); font:italic 700 13px Inter,system-ui,sans-serif; }

/* the drawing (css/tab.css), the playhead and the sounding notes */
.tab{ overflow-x:auto; margin:6px 0 4px; cursor:pointer; }
/* (a card not drawn yet keeps about the room its drawing will take) */
.rr-card:not(.drawn) .tab, .rr-prog:not(.drawn) .tab{ min-height:var(--est, 120px); }
.tab svg{ display:block; height:auto; max-width:100%; }
.tab-note.now text{ fill:var(--a); }
.tab-note.now .tab-xnote{ stroke:var(--a); }   /* (its dead notes' crosses, as its letters: lo-b3-11) */
.tab-note.now.slash path{ fill:var(--a); }
.tab-playhead{ fill:var(--a); opacity:.22; }
/* a bar or half bar left to the player: the printout's grey box, its "fill → A7" (a box drawn with no fill was black on the dark panel) */
.tab-fill rect{ fill:#3a3631; }
.tab-fill text{ fill:#d8d0c2; font:italic 500 17px Inter,system-ui,sans-serif; }   /* (the 500 italic, as css/tab.css and the books: b1-b, st-c) */
.tab-fill .tab-acc{ font-style:normal; }
/* (the count-in's beat: css/tab.css's gold disc with its number in the page's dark — this page had set the number
   gold too, a blank gold dot over the first chord name — a size up, to be read from a music stand, and ringed off
   the drawing: the owner's w3-f, 2026-10-05, "A count-in you can see": Accept) */
.count-in{ width:28px; height:28px; font:700 16px/28px Inter,system-ui,sans-serif; color:#0c0b0a; box-shadow:0 0 0 3px var(--panel); }

/* a card's controls: Play, its tempo, Loop */
/* (stacked over the drawing, 4 px above them: in Safari a press on Roll fills reached the tab's svg instead — the
   tab seeked to a spot and nothing rolled, the owner, 2026-10-06 — so a press on a control is the control's in any
   engine, whatever it counts as the drawing's; under the bar's 5 and the now-playing strip's 6) */
.rr-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; position:relative; z-index:1; }
.play{ font:600 13px Inter,system-ui,sans-serif; padding:6px 16px; border-radius:999px; border:1px solid var(--line2); background:var(--panel2); color:var(--ink); cursor:pointer; min-width:74px; min-height:34px; }
.play:hover{ border-color:var(--a); }
.playing .play{ background:var(--a); color:#0c0b0a; border-color:var(--a); }
/* (Play and Stop each with its sign before the word — the triangle, then the square while it plays — as every
   player's button has, so the state reads at a glance down a column of cards and Play reads as the button, not one
   more pill beside Jam: the owner's design review w2-g, 2026-10-05, "Play and Stop with their signs": Accept. The
   signs drawn in CSS, no wider than the button was — its least width, 74 px, holds them — so no card's controls
   wrap; the word still the player's, js/example-player.js) */
.play{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding-left:12px; padding-right:12px; }
.play::before{ content:""; flex:none; width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.playing .play::before{ width:8px; height:8px; border:0; border-radius:1.5px; background:currentColor; }
/* Whether the guitar you are hearing is its recording or the engine, on the
   button that is already lit (js/example-player.js writes data-sound): the
   site's blue for the recording, the muted grey for the engine. An ear cannot
   always tell them apart — a card whose recording quietly failed to load
   sounded like a card that never had one — so it is said plainly. */
.playing .play[data-sound="rendered"]{ background:var(--e); border-color:var(--e); }
.playing .play[data-sound="engine"]{ background:var(--muted); border-color:var(--muted); }
/* a card's Jam link: the jam tab on this example as its tabbed guitar part (js/jam-links.js) */
.jam-link{ display:inline-flex; align-items:center; font:600 13px Inter,system-ui,sans-serif; padding:6px 14px; min-height:34px; box-sizing:border-box; border-radius:999px; border:1px solid var(--line2); color:var(--ink); text-decoration:none; }
.jam-link:hover, .jam-link:focus-visible{ border-color:var(--a); color:var(--a); }
/* a card's Roll fills (js/play-page.js): the jam's New fills on the page, the same pill as the Jam link */
.roll-fills{ font:600 13px Inter,system-ui,sans-serif; padding:6px 14px; min-height:34px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--ink); cursor:pointer; }
.roll-fills:hover, .roll-fills:focus-visible{ border-color:var(--a); color:var(--a); }
.roll-fills:disabled{ opacity:.5; cursor:default; border-color:var(--line2); color:var(--muted); }
.tempo{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.tempo input{ width:150px; accent-color:var(--a); }
.tempo output{ min-width:2.2em; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.tempo .unit{ color:var(--quiet); }
.tempo .unit .beat{ letter-spacing:-.3em; margin-right:.45em; }   /* (the dot close: b1-f, above) */
/* (the controls quiet, so a page of cards is not a page of gold bars and ticked gold boxes — the owner's design
   review w2-b, 2026-10-05, "Quiet controls; gold only for what plays": Accept: the slider a grey track and a grey
   knob, Loop's box grey, the knob lit under the pointer or the keys; gold kept for what is playing: its card's
   ring, its Stop, its knob and its Loop. The bar's Count-in box, the page's one setting of its kind, keeps its gold) */
.tempo input[type=range]{ -webkit-appearance:none; appearance:none; height:22px; margin:0; background:transparent; cursor:pointer; }
.tempo input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:var(--line2); }
.tempo input[type=range]::-moz-range-track{ height:4px; border-radius:2px; background:var(--line2); }
.tempo input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-6px; border:0; border-radius:50%; background:var(--muted); }
.tempo input[type=range]::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:var(--muted); }
.tempo input[type=range]:hover::-webkit-slider-thumb, .tempo input[type=range]:focus-visible::-webkit-slider-thumb{ background:var(--ink); }
.tempo input[type=range]:hover::-moz-range-thumb, .tempo input[type=range]:focus-visible::-moz-range-thumb{ background:var(--ink); }
.playing .tempo input[type=range]::-webkit-slider-thumb{ background:var(--a); }
.playing .tempo input[type=range]::-moz-range-thumb{ background:var(--a); }
.rr-ctl label.check input{ accent-color:var(--muted); }
.playing .rr-ctl label.check input{ accent-color:var(--a); }

/* the card playing, at the foot of the screen once its own Play is out of view (js/play-page.js nowPlaying): Stop,
   and its name to go back to it — the owner's w3-b, 2026-10-05, "Now-playing strip with Stop, wherever you scroll": Accept */
.np{ position:fixed; left:0; right:0; bottom:0; z-index:6; padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background:rgba(20,19,18,.97); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-top:1px solid var(--a); box-shadow:0 -6px 18px rgba(0,0,0,.45); }
.np-in{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.np-stop{ flex:none; font:600 14px Inter,system-ui,sans-serif; min-height:44px; min-width:72px; padding:6px 16px; border-radius:999px; border:1px solid var(--a); background:var(--a); color:#0c0b0a; cursor:pointer; }
.np-go{ flex:1 1 auto; min-width:0; min-height:44px; display:flex; align-items:center; gap:10px; padding:0 4px; background:none; border:0; color:var(--ink); font:600 14px/1.25 Inter,system-ui,sans-serif; text-align:left; cursor:pointer; }
.np-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-tempo{ flex:none; color:var(--muted); font-weight:500; font-size:13px; font-variant-numeric:tabular-nums; }
.np-tempo .beat{ letter-spacing:-.3em; margin-right:.45em; }   /* (the dot close: b1-f, above) */
.np-dir{ flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--line2); color:var(--a); font-size:15px; }
/* the key, how to read the signs (js/play-page.js key; the owner's w1-b, 2026-10-05, "How to read the signs, on
   the page": Accept): the bar's "?" and a dialog, the book's key laid out for a screen — a group a section, its
   signs in a grid that fills the width, each drawing over its words; the heads' lines beside the chord box; the
   terms in columns. Full screen on a phone. The drawings are the book's, in the page's colours (css/tab.css) */
.key-btn{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font:700 14px Inter,system-ui,sans-serif; cursor:pointer; }
.key-btn:hover, .key-btn:focus-visible{ border-color:var(--a); color:var(--a); }
dialog.key{ width:min(1040px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; color:var(--ink); background:var(--panel); border:1px solid var(--line2); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.6); }
dialog.key::backdrop{ background:rgba(0,0,0,.6); }
.key-top{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--line); }
.key-top h2{ margin:0; font:600 1.25rem/1.2 'Source Serif 4',Georgia,serif; }
.key-close{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font-size:14px; cursor:pointer; }
.key-close:hover, .key-close:focus-visible{ border-color:var(--a); }
.key-body{ padding:6px 20px 22px; }
.key-wait{ color:var(--muted); }
.key-group{ padding:14px 0 6px; border-bottom:1px solid var(--line); }
.key-group:last-child{ border-bottom:0; }
.key-group > h3{ margin:0 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); font-weight:600; }
.key-signs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 18px; align-items:start; }
.key-sign{ margin:0; min-width:0; }
.key-draw{ display:flex; align-items:flex-end; min-height:56px; overflow:hidden; }
.key-draw svg{ display:block; max-width:100%; height:auto; }
.key-sign figcaption{ margin-top:5px; color:var(--muted); font-size:13px; line-height:1.4; }
.key-sign figcaption b{ color:var(--ink); font-weight:600; }
.key-sign .beat{ letter-spacing:-.3em; margin-right:.45em; }   /* (the dot close: b1-f, above) */
.key .ap-count{ fill:var(--muted); font:500 12px Inter,system-ui,sans-serif; }
.key .ap-count.beat{ fill:var(--ink); font-weight:700; }
.key-headbox{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-start; }
.key-heads{ flex:1 1 420px; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:8px 24px; }
.key-heads > div{ display:grid; grid-template-columns:minmax(0, 11em) minmax(0, 1fr); gap:10px; align-items:baseline; }
.key-heads dt{ min-width:0; }
.key-heads dt .rr-head, .key-heads dt .rr-vhead{ display:block; }
.key-heads dd{ margin:0; color:var(--muted); font-size:13px; line-height:1.4; }
.key-heads .ap-tempo{ color:var(--muted); font-size:14px; font-weight:500; }
.key-heads .beat{ letter-spacing:-.3em; margin-right:.45em; }
.key-heads .ap-info{ color:var(--muted2); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.key-heads .ap-sub{ margin:0; font:700 1rem/1.25 Inter,system-ui,sans-serif; display:flex; align-items:center; gap:6px; }
.key-box{ flex:0 1 220px; }
.key-box .rr-strip{ grid-template-columns:repeat(2, 62px) !important; height:auto !important; gap:10px; }
.key-terms{ margin:0; columns:3 220px; column-gap:28px; }
.key-terms > div{ break-inside:avoid; margin:0 0 6px; font-size:13px; line-height:1.4; color:var(--muted); }
.key-terms dt{ display:inline; color:var(--ink); font-weight:600; }
.key-terms dt::after{ content:" "; }
.key-terms dd{ display:inline; margin:0; }

/* a review page (kept outside the site): a banner saying which alternative this is */
.alt-note{ background:#2a2010; border:1px solid var(--a); border-radius:10px; padding:10px 14px; margin:0 0 14px; max-width:90ch; }
.alt-note b{ color:var(--a); }
.alt-note p{ margin:4px 0 0; color:var(--muted); }
.alt-note code{ color:var(--ink); }

/* (above a phone's width the grips a size up — 80 px a grip, from the phone's 62 — so their fingers and degrees
   read: w2-j, above) */
@media (min-width:641px){ .rr-info .rr-strip{ grid-template-columns:repeat(auto-fill, minmax(0, 80px)) !important; column-gap:12px; } }
/* (a tablet held upright, 641 to 999 px: the bar on one line — the switches' label left to a screen reader, as on a
   phone, and the picker taking the room that is left, no narrower than 180 px — where it put the picker alone on a
   second line: the owner's w3-j, 2026-10-05, "Tablet's bar on one line": Accept) */
@media (min-width:641px) and (max-width:999px){
  .rr-bar > .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .jump{ flex:1 1 0; min-width:180px; justify-content:flex-end; }
  .jump select{ flex:0 1 auto; max-width:320px; }
}
@media (max-width:640px){
  main{ padding:14px 16px 60px; }
  .top{ padding:12px 16px; }
  .rr-bar{ margin:0 -16px 4px; padding:6px 16px; gap:4px 12px; }
  /* (the group keeps its label for a screen reader; on a phone the bar is one line of switches and the contents) */
  .rr-bar > .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  h1{ font-size:1.8rem; }
  /* (w2-a on a phone: the tempo under the name, level with it, the number beside both) */
  .rr-sec > h2{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:baseline; font-size:1.45rem; }
  .rr-sec > h2[data-num]::before{ grid-row:span 2; min-width:1.6em; }
  .rr-sec > h2 .rr-sec-tempo{ margin:2px 0 0; font-size:1rem; }
  /* (w2-d on a phone: the cover smaller beside the title) */
  .book-head{ gap:14px; margin-bottom:14px; }
  .book-cover{ width:56px; }
  .rr-card{ padding:10px 10px 8px; }
  .rr-progs{ padding:10px 10px 12px; }
  /* (one line of controls on a phone — Play, the tempo, Loop, Jam — the slider taking what the others leave and
     the word "Tempo" left to a screen reader (the slider's own label says it); a phone too narrow for them all,
     320 px, puts Jam on a second line: the owner's w3-a, 2026-10-05, "One line of card controls on a phone":
     Accept — two lines a card, three at 320, had been a quarter of the page's length) */
  .rr-ctl{ column-gap:8px; row-gap:8px; }
  .tempo{ flex:1 1 0; min-width:auto; gap:6px; }
  .tempo > .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tempo input{ width:44px; flex:1 1 0; min-width:44px; max-width:none; }
  .tempo output{ min-width:1.9em; }
  label.check.loop{ gap:5px; }
  .rr-info, .rr-other{ grid-template-columns:minmax(0, 1fr); gap:1px; }
  .rr-lines + .rr-other{ margin-top:-10px; }
  .rr-other .rr-label{ margin-top:4px; }
  .rr-info .rr-label:empty{ display:none; }
  .rr-info .rr-label{ margin-top:4px; }
  .play{ min-height:44px; min-width:60px; padding:6px 12px; }
  .jam-link{ min-height:44px; padding:6px 12px; }
  /* (Roll fills, where a card has it — an example's card, since origin/main's "add a 'roll fills' button": the
     four above keep their line and it stands on a second, a finger's height like them) */
  .roll-fills{ min-height:44px; padding:6px 12px; }
  .seg button{ min-height:40px; }
  /* (the bar one line on a phone: the picker, Find's glass and the key's "?" (the owner's w1-a and w1-b), then a
     button saying what plays under the guitar, which opens the switches and the count-in on a line under them —
     the owner's w3-c, 2026-10-05, "Phone's sticky bar on one line": Accept; it had been two lines at 390 px and
     three at 320, a fifth of the screen, for settings changed once a session. Find opened stands on a line of its
     own over them, as w1 sets it) */
  .rr-bar{ column-gap:8px; }
  .jump{ order:-1; margin-left:0; flex:1 1 0; }
  .rr-bar > .find-btn{ order:1; }
  .rr-bar > .key-btn{ order:2; }
  .rr-bar > .bar-sound{ order:3; }
  .jump > .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .key-btn{ width:40px; height:40px; }
  /* (the key full screen; the top's links one under the other where they wrap, no dot left at a line's end) */
  dialog.key{ inset:0; margin:0; width:100%; max-width:none; height:100%; max-height:none; border-radius:0; border:0; }
  .key-top{ padding:12px 16px; }
  .key-body{ padding:4px 16px 24px; }
  .key-signs{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px; }
  .pdf-top{ display:flex; flex-wrap:wrap; gap:6px 18px; }
  .pdf-top .pdf-sep{ display:none; }
  .jump select{ flex:1 1 auto; max-width:none; min-height:40px; }
  .bar-sound{ display:inline-flex; align-items:center; gap:7px; flex:none; min-height:40px; padding:6px 10px; border-radius:6px; border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font:600 13px Inter,system-ui,sans-serif; cursor:pointer; }
  .bar-sound::after{ content:""; width:6px; height:6px; margin:-3px 1px 0; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg); }
  .rr-bar.open .bar-sound{ border-color:var(--a); }
  .rr-bar.open .bar-sound::after{ margin-top:3px; transform:rotate(-135deg); }
  .rr-bar:not(.open) > .seg, .rr-bar:not(.open) > label.check{ display:none; }
  .rr-bar.open::before{ content:""; order:4; flex-basis:100%; height:0; }
  .rr-bar > .seg{ order:5; }
  .rr-bar > label.check{ order:6; }
  .toc{ gap:4px 12px; font-size:13px; }
  /* (the contents folded under one line on a phone, a finger's height, the picker in the bar under it: the owner's
     w3-h, 2026-10-05, "Contents folded on a phone": Accept — their 26 links had filled a phone's first screen) */
  .toc-fold{ margin:0 0 10px; }
  .toc-fold > summary{ display:flex; align-items:center; gap:10px; min-height:44px; list-style:none; cursor:pointer; color:var(--ink); font:500 14px Inter,system-ui,sans-serif; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .toc-fold > summary::-webkit-details-marker{ display:none; }
  .toc-fold > summary::after{ content:""; width:7px; height:7px; margin:-4px 2px 0 auto; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg); }
  .toc-fold[open] > summary{ margin-bottom:10px; }
  .toc-fold[open] > summary::after{ margin-top:4px; transform:rotate(-135deg); }
  .toc-fold > .toc.toc-book{ border-top:0; padding-top:0; }   /* (the line over them the fold's own) */
  /* (on a phone the groups kept, one under the other, their names running on as before, each after its number;
     the tempos left to the sections' headings — in columns the contents would be twice as long) */
  .toc.toc-book{ grid-template-columns:minmax(0, 1fr); gap:10px; padding:10px 0 12px; }
  .toc-group ol, .toc-group + .toc-group ol, .toc.one .toc-group ol{ columns:auto; display:flex; flex-wrap:wrap; gap:2px 14px; }
  .toc.toc-book a{ gap:5px; padding:2px 0; }
  .toc-num{ width:auto; }
  .toc-tempo{ display:none; }
}
/* (a touch screen of any width — a phone turned on its side, a tablet — has a finger's controls, 44 px: the rules
   above reach only a screen under 640 px, and a phone held sideways is 844 wide; after them, so a touch phone's
   switches, picker and bar button are 44 too, not their 40. The owner's w3-i, 2026-10-05, "Finger-sized controls
   on every touch screen": Accept; a mouse's sizes are as they were) */
@media (pointer:coarse){
  .play, .jam-link, .roll-fills, .np-stop{ min-height:44px; }
  .seg button, .bar-sound{ min-height:44px; }
  .rr-bar .find-btn, .rr-bar .key-btn{ width:44px; height:44px; min-height:44px; }   /* (w1's glass and "?") */
  .jump select{ min-height:44px; }
  label.check{ min-height:44px; }
  .tempo input[type=range]{ height:32px; }
  .toc.toc-book a{ padding-top:5px; padding-bottom:5px; }
  .rr-card .tab-pane-wrap.has-ctl{ padding-right:38px; }
  .rr-card .tab-pane-ctl button{ width:34px; height:34px; font-size:16px; }
}
/* (w2-b's knob, the page's own, one a finger finds on a touch screen — the native one it replaced was bigger there
   than the desktop's 16 px; the slider's height w3-i's, above) */
@media (pointer:coarse){
  .tempo input[type=range]::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-8px; }
  .tempo input[type=range]::-moz-range-thumb{ width:20px; height:20px; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } }
@media print{ .np{ display:none !important; } }