/* Yalle Media: dark theme in the logo's maroon. Same layout as the Themify site, rebuilt lean. */

/* Type: the device's own UI font (Roboto, San Francisco, Segoe UI). No web font to download, so text shows at once
   and the page is laid out once: this is what keeps mobile PageSpeed at 100. (Plus Jakarta Sans and IBM Plex Mono were
   tried in Oct 2026 and cost chord pages 10-15 points on phones; their files are kept in /assets/fonts/ if ever wanted.) */

:root {
  /* surfaces: near-black with a hint of warmth */
  --bg: #141415;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --surface-3: #2c2b2e;
  --line: #2f2e31;
  --line-strong: #403e42;
  --text: #c9c7cb;
  --muted: #918e95;
  --head: #fff;
  /* the logo's maroon, and the reds built from it (all pass WCAG AA where text sits on them) */
  --brand: #5d1616;
  --accent: #a3242a;        /* fills: buttons, badge, current page — white text 7.4:1 */
  --accent-hover: #bd2d34;
  --link: #ec6b73;          /* text links on the dark background — 5.1:1 */
  --link-hover: #ff9aa0;
  --glow: rgba(163, 36, 42, .35);
  --bar: #0b0b0c;
  --input-bg: #111112;
  --r: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 28px);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; border-style: none; }
a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4, h5, h6 { color: var(--head); font-weight: 750; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1.2rem; line-height: 1.6; }
h6 { font-size: 1rem; }
p { margin: 0 0 1.25em; text-wrap: pretty; }
[hidden] { display: none !important; }   /* "hidden" always wins over a component's own display (the instrument tabs rely on it) */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: 8px; color: #fff; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.eyebrow { margin: 0 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--link); }

/* ---- Buttons & fields ---------------------------------------------------------- */
input[type="search"], input[type="text"], input[type="email"], textarea {
  min-width: 0; width: 100%; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg); color: #fff; font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
input::placeholder, textarea::placeholder { color: #77747b; }
button[type="submit"], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.3;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s, box-shadow .15s;
}
button[type="submit"]:hover, .btn:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 6px 20px -6px var(--glow); }
button[type="submit"]:active, .btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips a, .chip {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-size: .88rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, color .15s, box-shadow .15s;
}
.chips a:hover { background: var(--accent); color: #fff; box-shadow: none; }

/* ---- Header ------------------------------------------------------------------------ */
.hw { position: sticky; top: 0; z-index: 50; background: var(--bar); padding: 14px 0; transition: background-color .25s, padding .25s; }
/* No backdrop-filter here: it would trap the fixed mobile menu inside the header. */
.hw.is-stuck { background: rgba(11, 11, 12, .94); padding: 8px 0; box-shadow: 0 1px 0 var(--line); }
.hd {
  display: flex; align-items: center; gap: 6px;
  min-height: 72px; padding: 0 14px 0 18px;
  background: var(--surface); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: min-height .25s;
}
.is-stuck .hd { min-height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.logo:hover { color: #fff; }
.logo img { width: 48px; height: 48px; }
.logo__name { font-size: 1.05rem; }
.hsearch { position: relative; display: flex; align-items: center; margin-left: 8px; isolation: isolate; }
.hsearch__btn, .mysongs-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: #fff; cursor: pointer; transition: background-color .15s;
}
.hsearch__btn:hover { background: var(--accent); }
.hsearch__btn svg { width: 18px; height: 18px; }
.hsearch__q {
  width: 0; padding: 0; border-width: 0; opacity: 0; pointer-events: none; height: 40px;
  transition: width .25s, opacity .2s, padding .25s, margin .25s;
}
.hsearch.is-open .hsearch__q { width: min(280px, 40vw); padding: 0 14px; opacity: 1; pointer-events: auto; border-width: 1px; margin-left: 8px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: block; padding: 10px 14px; border-radius: var(--r-pill); color: #e9e7ea; font-size: .97rem; font-weight: 600; }
.nav a:hover { background: var(--surface-2); color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: var(--accent); }
.menu-btn, .nav-search { display: none; }
/* dropdown (Chords): opens on hover, keyboard focus, or the arrow button (touch) */
.nav li { position: relative; }
.has-sub { display: flex; align-items: center; }
.nav .has-sub > a { padding-right: 4px; }
.sub-btn {
  display: grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #e9e7ea; cursor: pointer;
}
.sub-btn:hover { background: var(--surface-2); color: #fff; }
.sub-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav ul.sub {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 62; flex-direction: column; gap: 0; min-width: 200px; padding: 8px;
  border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav ul.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav .sub a { padding: 9px 12px; border-radius: var(--r-sm); white-space: nowrap; font-size: .93rem; }
.nav .sub a:hover { background: var(--surface-3); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .sub-btn[aria-expanded="true"] + .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover > .sub-btn svg, .sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- Layout -------------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; }
.layout--full { grid-template-columns: minmax(0, 1fr); }
.content { padding: 48px 0 64px; min-width: 0; }
.sidebar { padding: 48px 0 80px; font-size: .95rem; }
.widget { margin: 0 0 28px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.widget__title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.wsearch__row { display: flex; gap: 8px; }
.wsearch__row button { padding-inline: 16px; }
.wlist { list-style: none; margin: 0; padding: 0; }
.wlist li + li { border-top: 1px solid var(--line); }
.wlist a { display: block; padding: 9px 0; color: var(--text); font-weight: 600; font-size: .93rem; line-height: 1.4; }
.wlist a:hover { color: #fff; }
@media (min-width: 901px) {
  .sidebar__sticky { position: sticky; top: 112px; }
}

/* ---- Home -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; margin-bottom: 40px; padding: clamp(28px, 5vw, 48px);
  border-radius: calc(var(--r) + 6px); background:
    radial-gradient(120% 140% at 100% 0%, rgba(163, 36, 42, .45), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(93, 22, 22, .55), transparent 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hero h1 { max-width: 15ch; margin-bottom: .35em; }
.hero__lead { max-width: 52ch; color: #dedbe0; font-size: 1.08rem; margin-bottom: 22px; }
.hero__search { display: flex; gap: 10px; max-width: 560px; margin-bottom: 18px; }
.hero__search input { height: 52px; padding-inline: 18px; font-size: 1.05rem; border-radius: var(--r-pill); background: rgba(0, 0, 0, .45); }
.hero__search button { height: 52px; padding-inline: 26px; }
.hero .chips a { background: rgba(0, 0, 0, .35); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head a { font-weight: 700; font-size: .92rem; }

/* Post cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card__link {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 12px;
  border-radius: var(--r); background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, box-shadow .15s, transform .15s;
}
.card__link:hover { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), 0 12px 30px -16px var(--glow); transform: translateY(-2px); }
.card__img { flex: none; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); }
.card__img img { display: block; width: 76px; height: 76px; object-fit: cover; }
.card__body { min-width: 0; }
.card time { display: block; margin-bottom: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card__title { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.32; letter-spacing: -.015em; }
.card__link:hover .card__title { color: var(--link-hover); }

/* Pager */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 32px 0 8px; }
.pager__n {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line);
}
.pager__n:hover { background: var(--surface-3); color: #fff; }
.pager__n.is-current { background: var(--accent); box-shadow: none; }
.pager__nav { font-size: 1.25rem; }
/* the home page: three numbers, then a clear way on to every chord */
.pager__more { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-left: 6px; padding: 0 20px; border-radius: var(--r-pill);
  background: rgba(163, 36, 42, .18); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .45); text-decoration: none; }
.pager__more:hover { background: var(--accent); color: #fff; }

/* ---- Single post ------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 22px; font-size: .84rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--text); }
.post__head { text-align: center; }
.post__img { margin: 0 auto; width: 300px; max-width: 100%; }
.post__img img { display: block; width: 300px; height: 120px; border-radius: var(--r); object-fit: cover; box-shadow: var(--shadow); }
.post__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 104px; height: 104px; margin: -70px auto 18px; position: relative;
  border-radius: 50%; background: var(--accent); color: #fff; line-height: 1;
  box-shadow: 0 0 0 6px var(--bg), 0 12px 30px -8px var(--glow);
}
.post__date span { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.post__date b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; margin: 4px 0; }
.post__head:not(:has(.post__img)) .post__date { margin-top: 0; }
.post__title { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem); margin-bottom: .45em; }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; font-size: .9rem; }
.post__meta a { padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 600; }
.post__meta a:hover { color: #fff; background: var(--accent); box-shadow: none; }
.entry { text-align: left; }
.entry a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(236, 107, 115, .45); }
.entry a:not(.btn):hover { text-decoration-color: currentColor; }
.entry h2, .entry h3 { margin-top: 1.6em; }
.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.entry li { margin-bottom: .35em; }
.entry li::marker { color: var(--link); }
.entry img { border-radius: var(--r); }
.entry figure { margin: 0 0 1.4em; }
.entry figcaption { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.entry blockquote { margin: 0 0 1.4em; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: #e1dfe3; }
.entry table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; display: block; overflow-x: auto; }
.entry th, .entry td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.entry th { background: var(--surface-2); color: #fff; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* Chord tools: chords used, text size, auto-scroll. They never touch the sheet's spacing. */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; padding: 14px 16px;
  border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.tools__chords { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 260px; margin: 0; }
.tools__label { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-right: 4px; }
.tools .chip { padding: 3px 10px; font-family: var(--mono); font-size: .86rem; color: #fff; background: rgba(163, 36, 42, .22); box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .35); }
.tools__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tools__ctl button {
  min-width: 38px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--surface-3); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tools__ctl button:hover, .tools__ctl button[aria-pressed="true"] { background: var(--accent); }
.tools__ctl button:disabled { opacity: .4; cursor: default; }

/* Chord sheets. The spacing inside <pre> IS the music: chords sit over exact
   syllables, so it never wraps and never leaves a monospaced font. */
/* text size is set on .entry by the A−/A+ buttons */
.entry { --pre-size: .9rem; }
.entry pre {
  margin: 0 0 1.6em; padding: 18px 20px;
  border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: var(--pre-size); line-height: 1.85;
  color: #e6e4e8; white-space: pre; overflow-x: auto; tab-size: 8;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.entry pre::-webkit-scrollbar { height: 6px; }
.entry pre::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.yt { position: relative; display: block; max-width: 640px; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; margin: 0 0 1.4em; }
.yt img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .85; }
.yt::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 68px; height: 48px; translate: -50% -50%;
  border-radius: 14px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Key takeaways / FAQ blocks used in the Tips articles */
.takeaways { margin: 0 0 1.6em; padding: 18px 20px; border-radius: var(--r); background: linear-gradient(135deg, rgba(163, 36, 42, .16), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.takeaways h2 { margin: 0 0 .5em; font-size: 1.1rem; }
.takeaways ul { margin: 0; }
.faq { margin: 2em 0 1.6em; }
.faq h2 { margin-top: 0; }
.faq details { margin: 0 0 10px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { padding: 14px 18px; color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--link); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq details > div, .faq details > p { padding: 0 18px 14px; }
.faq details > p { margin: 0; }
.faq details > div p:last-child { margin: 0; }

.post-nav { margin: 40px 0; }
.post-nav a {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: #fff; font-weight: 700; line-height: 1.4;
}
.post-nav a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.post-nav small { display: block; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.post-nav__arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.5 6 8.5 12l6 6 1.4-1.4L11.3 12l4.6-4.6z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.related { margin: 8px 0 40px; }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related__item { padding: 16px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.related__cats { margin: 0 0 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.related h3 { font-size: 1rem; line-height: 1.35; margin: 0; }
.related h3 a { color: #fff; }
.related h3 a:hover { color: var(--link-hover); }

/* Comments */
.comments { margin: 40px 0 8px; }
.comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.comment__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.comment__name { color: #fff; font-weight: 700; }
.comment__staff { padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.comment time { color: var(--muted); font-size: .8rem; }
.comment__text p { margin: 0 0 .6em; }
.comment__reply { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.comment .comments__list { margin: 8px 0 0; }
.comment .comment { border-top: 0; padding-bottom: 0; }
.respond { padding: 22px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.respond h3 { margin-bottom: 4px; }
.respond__note { color: var(--muted); font-size: .88rem; }
.respond__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.respond label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 700; color: #e6e4e8; }
.respond__msg { margin: 12px 0 0; font-weight: 600; }
.respond__msg.is-ok { color: #8fd19e; }
.respond__msg.is-err { color: var(--link-hover); }
.respond__replying { display: none; margin-bottom: 10px; font-size: .9rem; }
.respond__replying.is-on { display: block; }
.comments__closed { padding: 16px 18px; border-radius: var(--r); background: var(--surface); color: var(--muted); }

/* Newsletter box */
.nl {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: center;
  margin: 40px 0; padding: clamp(22px, 4vw, 32px); border-radius: calc(var(--r) + 4px);
  background: radial-gradient(120% 160% at 0% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nl__title { font-size: 1.35rem; margin-bottom: .3em; }
.nl__text p { margin: 0; color: #d8d5da; }
.nl__form { display: flex; flex-wrap: wrap; gap: 10px; }
.nl__form input[type="email"] { flex: 1 1 200px; width: auto; height: 48px; border-radius: var(--r-pill); padding-inline: 18px; }
.nl__form button { height: 48px; }
.nl__msg { flex-basis: 100%; margin: 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.nl__msg.is-ok { color: #8fd19e; }
.nl__msg.is-err { color: var(--link-hover); }

/* ---- Archives & search ------------------------------------------------------------- */
.archive__head { margin-bottom: 30px; padding: clamp(20px, 4vw, 32px); border-radius: calc(var(--r) + 4px); background: radial-gradient(120% 160% at 100% 0%, rgba(163, 36, 42, .35), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.archive__title { margin-bottom: .15em; }
.archive__title em { color: var(--link); font-style: normal; }
.archive__count { color: var(--muted); margin: 0; font-weight: 600; }
.archive__desc { margin-top: 10px; max-width: 62ch; color: var(--text); }
.archive__desc p:last-child { margin: 0; }
.archive__search { display: flex; gap: 10px; max-width: 520px; margin-top: 16px; }

/* ---- Pages ------------------------------------------------------------------------- */
.page__title { margin-bottom: .5em; }
.lead { font-size: 1.15rem; color: #e1dfe3; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; margin: 40px 0; }
.split figure { margin: 0; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 40px; }
.features section { padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.features h3 { font-size: 1.05rem; margin-top: 0; }
.features p { margin: 0; font-size: .95rem; }
.cta { padding: 32px; border-radius: calc(var(--r) + 4px); background: radial-gradient(120% 160% at 50% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.cta h2 { margin-top: 0; }
.cta p:last-child { margin: 0; }
.contact { display: grid; grid-template-columns: 160px 1fr; gap: 16px 24px; margin: 32px 0; }
.contact dt { color: #fff; font-weight: 700; }
.contact dd { margin: 0; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: block; padding: 7px 16px; border-radius: var(--r-pill); background: var(--surface-2); color: #fff; text-decoration: none !important; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.social a:hover { background: var(--accent); color: #fff; box-shadow: none; }
/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 48px; align-items: stretch; }
.svc { display: flex; flex-direction: column; padding: 24px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.svc--featured { background: radial-gradient(120% 70% at 50% 0%, rgba(163, 36, 42, .28), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.svc h2 { margin: 0 0 6px; font-size: 1.3rem; }
.svc__tag { align-self: flex-start; margin: 0 0 12px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.svc--featured .svc__tag { background: var(--accent); }
.svc__price { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.svc__price strong { display: block; color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.entry .svc__list { margin: 0 0 16px; padding: 0; list-style: none; }
.entry .svc__list li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: .95rem; }
.svc__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--link); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.svc__note { color: var(--muted); font-size: .88rem; }
.svc__cta { margin: auto 0 0; padding-top: 8px; }
.svc .btn { display: block; text-align: center; }
.svc-admin { margin: 0 0 48px; padding: 28px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.svc-admin h2 { margin-top: 0; }
.svc-admin .svc__cta { margin: 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.plan { padding: 20px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.plan h3 { margin: 0 0 8px; font-size: 1.05rem; }
.plan p:last-child { margin: 0; font-size: .92rem; }
.steps-wrap { margin: 0 0 40px; }
.entry ol.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.entry .steps li { margin: 0; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.steps strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.steps span { font-size: .95rem; }
/* Contact form */
.enq { margin: 8px 0 32px; padding: 26px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 110px; }
.enq h2 { margin-top: 0; }
.enq__note { color: var(--muted); }
.enq__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.enq__field { margin: 0 0 14px; }
.enq label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 700; color: #e6e4e8; }
.enq label span { color: var(--muted); font-weight: 500; }
.enq select, .enq input[type="tel"] {
  width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg); color: #fff; font: inherit; font-size: 1rem;
}
.enq select { appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; }
.enq select:focus, .enq input[type="tel"]:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
.enq textarea { min-height: 0; }
.enq__msg { margin: 12px 0 0; font-weight: 600; }
.enq__msg.is-ok { color: #8fd19e; }
.enq__msg.is-err { color: var(--link-hover); }
.job { padding: 22px; margin: 0 0 18px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.job h2 { margin-top: 0; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.job__meta li { padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface-3); font-size: .85rem; font-weight: 600; }

/* Tips tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); background: var(--surface); color: var(--text); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.tile a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent), 0 14px 30px -16px var(--glow); color: var(--text); }
.tile__img { display: block; aspect-ratio: 5 / 4; background: var(--surface-3); }
.tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tile__img--empty { background: radial-gradient(circle at 30% 30%, rgba(163, 36, 42, .5), transparent 60%), var(--surface-3); }
.tile__title { margin: 0; padding: 14px 16px 18px; color: #fff; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; }
.packs { margin-top: 48px; }
.packs__more { text-align: center; margin-top: 24px; }

/* 404 */
.nf { padding: 44px 28px; border-radius: calc(var(--r) + 4px); background: radial-gradient(100% 140% at 50% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; margin-bottom: 40px; }
.nf__code { margin: 0; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--link); letter-spacing: -.05em; }
.nf__title { font-size: 2.2rem; margin: 8px 0; }
.nf__search { display: flex; gap: 10px; max-width: 460px; margin: 24px auto; }
.nf__links .btn { margin: 4px; }

/* Ads (only when switched on at go-live; space reserved so nothing jumps) */
.ad { margin: 28px 0; min-height: 280px; }
.ad__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px; text-align: center; }

/* ---- Footer ------------------------------------------------------------------------ */
.ft { position: relative; margin-top: 24px; background: var(--bar); color: var(--muted); font-size: .92rem; border-top: 1px solid var(--line); }
.ft a { color: var(--text); }
.ft a:hover { color: #fff; }
.ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 32px; padding: 56px 0 40px; }
.ft__brand p { margin: 14px 0 16px; max-width: 34ch; }
.ft__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.ft__logo img { width: 44px; height: 44px; }
.ft h2 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin: 4px 0 14px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li { margin: 0 0 8px; }
.ft .nl { display: block; margin: 0; padding: 0; background: none; box-shadow: none; }
.ft .nl__title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 10px; }
.ft .nl__text p { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.ft .nl__form input[type="email"], .ft .nl__form button { height: 44px; }
.ft__social { display: flex; gap: 8px; }
.ft__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ft__social a:hover { background: var(--accent); box-shadow: none; }
.ft__social svg { width: 17px; height: 17px; }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: .84rem; }
.ft__bottom p { margin: 0; }
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 7.6 5.6 14 7 15.4l5-5 5 5 1.4-1.4z'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 10px 24px -8px var(--glow);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---- Tablet & phone ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .layout { column-gap: 32px; grid-template-columns: minmax(0, 1fr) 270px; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
}
/* tablets: the full menu still fits beside the logo (without its name) */
@media (max-width: 1000px) {
  .logo__name { display: none; }
  .nav a { padding-inline: 11px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 0 0 48px; }
  .content { padding: 28px 0 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl { grid-template-columns: minmax(0, 1fr); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hw { padding: 10px 0; }
  .hd { min-height: 62px; padding: 0 8px 0 10px; }
  .logo img { width: 44px; height: 44px; }
  .logo__name { display: none; }
  .hsearch { margin-left: auto; }
  .hsearch__btn, .mysongs-btn { width: 46px; height: 46px; }
  .menu-btn {
    position: relative; z-index: 61; display: grid; place-items: center; margin-left: 8px; width: 46px; height: 46px;
    border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; position: relative; transition: transform .25s, background-color .2s;
  }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .menu-btn[aria-expanded="true"] span { background: transparent; }
  .menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(320px, 86vw); margin: 0; padding: 88px 20px 24px;
    background: var(--surface); box-shadow: -20px 0 50px rgba(0, 0, 0, .6);
    transform: translateX(105%); visibility: hidden; transition: transform .3s, visibility .3s; overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav a { padding: 13px 16px; font-size: 1.05rem; border-radius: var(--r-sm); }
  .has-sub { flex-wrap: wrap; }
  .nav .has-sub > a { flex: 1; padding-right: 16px; }
  .sub-btn { display: none; }
  .nav ul.sub {
    position: static; width: 100%; min-width: 0; margin: 0 0 6px 14px; padding: 0 0 0 10px; border-left: 2px solid var(--line-strong);
    border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none;
  }
  .nav ul.sub::before { content: none; }
  .nav .sub a { padding: 9px 14px; font-size: .98rem; color: #cfcdd2; }
  .nav-search { display: flex; gap: 8px; margin-bottom: 18px; }
  .nav-search button { padding-inline: 16px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .hw { z-index: 70; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .65); }

  .hero { margin-bottom: 28px; }
  .hero__search { flex-direction: column; }
  .hero__search button { width: 100%; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card__img, .card__img img { width: 64px; height: 64px; }
  .crumbs span[aria-current], .crumbs__sep:has(+ [aria-current]) { display: none; }
  .post__date { width: 90px; height: 90px; margin-top: -58px; }
  .post__date b { font-size: 1.9rem; }
  .entry { --pre-size: .82rem; }
  .entry pre { padding: 14px; margin-inline: calc(-1 * var(--gut) / 2); }
  .related__grid { grid-template-columns: minmax(0, 1fr); }
  .respond__row { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 10px; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .enq { padding: 20px 16px; margin-inline: calc(-1 * var(--gut) / 2); }
  .enq__row, .plans, .entry ol.steps { grid-template-columns: minmax(0, 1fr); }
  .svc-admin { padding: 20px 16px; }
  .contact dd { margin-bottom: 16px; }
  .ft__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  /* a printed song (or a saved PDF) is the title and the sheet, in the key and view chosen on screen */
  .hw, .sidebar, .ft, .post-nav, .related, .crumbs, .totop, .tools, .comments, .nl, .ad, .consent, .mysongs, .pbar, .cpop,
  .post__img, .post__date, .post__meta, .post__updated, .guide, .yt, .video, .respond, .gen-cta, .sugg { display: none !important; }
  .entry pre .ch, .entry .psheet .ch { color: #000 !important; font-weight: 800; }
  .entry pre .sec, .entry pre .nc { color: #444 !important; }
  .entry pre { font-size: 11pt !important; line-height: 1.6; page-break-inside: auto; }
  .post__title { font-size: 20pt; margin: 0 0 8pt; }
  body { background: #fff; color: #000; }
  .layout { display: block; }
  .post__title, .entry h5 { color: #000; }
  .entry pre { color: #000; background: none; box-shadow: none; overflow: visible; }
}

/* Contents list (from the old [ez-toc] shortcode) */
.toc { margin: 0 0 1.6em; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc summary { padding: 12px 18px; color: #fff; font-weight: 800; cursor: pointer; }
.toc ol { margin: 0; padding: 0 18px 14px 40px; }
.toc li { margin: 4px 0; }
.toc .toc__sub { margin-left: 18px; list-style: circle; }
.toc a { text-decoration: none !important; }

/* ---- Chord guide under each sheet, chord pages, Chord Shape Generator ------------- */
.guide { margin: 36px 0 8px; padding: 24px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.guide h2 { margin-top: 0; font-size: 1.35rem; }
.guide h3 { font-size: 1.05rem; margin: 1.4em 0 .6em; }
.guide .faq { margin: 1.6em 0 0; }
.guide__more, .gen-cta { color: var(--muted); font-size: .95rem; }
.chord-tabs__list, .gen__inst { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chord-tabs__list button, .gen__inst button, .gen__row button {
  padding: 7px 16px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.chord-tabs__list button:hover, .gen__inst button:hover, .gen__row button:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.chord-tabs__list [aria-selected="true"], .gen__inst [aria-pressed="true"], .gen__row [aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.chords-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#cp-piano.chords-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.chord { margin: 0; padding: 10px 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); text-align: center; scroll-margin-top: 110px; }
.entry .chord img, .chord img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0; }
.chord figcaption { margin-top: 4px; font-size: .82rem; color: var(--muted); }
.chord figcaption a, .chord figcaption b { display: block; color: #fff; font-size: .95rem; font-weight: 800; text-decoration: none !important; }
.chord figcaption code { display: block; color: var(--link); font-family: var(--mono); font-size: .85rem; }
.chord:target { box-shadow: inset 0 0 0 2px var(--accent); }
.tools__chords a.chip { text-decoration: none; }
.tools__chords a.chip:hover { background: var(--accent); }
.cb-sec { margin: 0 0 32px; }
.cb-songs { columns: 2 260px; column-gap: 28px; }
.cb-songs li { break-inside: avoid; }
.cb-all details { margin: 0 0 8px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cb-all summary { padding: 12px 16px; color: #fff; font-weight: 700; cursor: pointer; }
.cb-all .chips { padding: 0 16px 14px; }
.entry .chips { padding-left: 0; }
.entry .chips li { margin: 0; }
.entry .chips a { text-decoration: none; }
.gen { margin: 24px 0 36px; padding: 22px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gen__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gen__row button { min-width: 48px; }
.gen__row--ctl { align-items: center; gap: 10px 14px; }
.gen__row--ctl label { color: #fff; font-weight: 700; font-size: .9rem; }
.gen select {
  min-width: 0; flex: 1 1 220px; max-width: 360px; padding: 9px 36px 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  color: #fff; font: inherit; appearance: none; cursor: pointer;
}
.gen__inst { margin: 0; }
.gen__out { padding-top: 12px; border-top: 1px solid var(--line); }
.gen__name { margin: 4px 0; font-size: 1.5rem; }
.gen__name a { color: #fff; }
.gen__notes { color: var(--muted); }
.gen__shapes { min-height: 186px; }
@media (max-width: 760px) {
  .guide, .gen { padding: 18px 14px; margin-inline: calc(-1 * var(--gut) / 2); }
  .chords-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
}
.guide ol, .guide ul { padding-left: 1.4em; margin: 0 0 1.2em; }
.guide li { margin-bottom: .35em; }
.guide li::marker { color: var(--link); }
.guide p a, .guide li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(236, 107, 115, .45); }

/* YouTube video under the chord sheet */
.video { margin: 32px 0 0; }
.video h2 { font-size: 1.15rem; margin: 0 0 12px; }
.video .yt { margin-bottom: 8px; }
.video__by { color: var(--muted); font-size: .88rem; margin: 0; }

/* instrument note on song cards (piano: key · guitar: capo · ukulele: difficulty) */

.post__updated { margin: 6px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.post__meta + .post__updated { margin: -18px 0 26px; }
/* Tablets: there is no room for the search field inside the bar, so it opens as a full-width field just under
   the header instead of pushing the menu off the screen. */
@media (max-width: 1100px) {
  .hd { position: relative; }
  .hsearch { position: static; }
  .hsearch__q, .hsearch.is-open .hsearch__q {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
    width: auto; height: 52px; margin: 0; border-radius: var(--r);
    background: var(--surface-2); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .75);
  }
  .hsearch.is-open .hsearch__q { padding: 0 18px; border-width: 1px; }
}

/* Key control: − [key] + (Reset). Sits in the chord toolbar; on phones it takes its own row. */
.tools__key { display: flex; align-items: center; gap: 6px; }
.tools__key button {
  min-width: 34px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.tools__key button:hover { background: var(--accent); }
.tools__key .tools__reset { font-size: .82rem; font-weight: 700; background: none; color: var(--link); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tools__key select {
  height: 34px; min-width: 112px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); appearance: none; cursor: pointer;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px;
  color: #fff; font: inherit; font-size: .9rem; font-weight: 700;
}
.tools__key select:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
.tools__keynote { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) { .tools__key { flex: 1 1 100%; } }

/* ---- Player (chord posts with the Key control) ---------------------------------------------- */
/* chords stand out from the lyrics so you can read ahead while playing; tap one to see its shape */
.entry pre .ch { color: var(--link); font-weight: 800; cursor: pointer; border-radius: 4px; }
.entry pre .ch:hover, .entry pre .ch:focus-visible { outline: 0; background: rgba(236, 107, 115, .16); color: #fff; }
.entry pre .nc { color: var(--muted); }
.entry pre .sec { color: var(--muted); font-weight: 700; }
.tools .tools__capo { min-width: 104px; }
.btn--small { padding: 6px 14px; font-size: .85rem; vertical-align: middle; }
.guide__capo .btn { margin-left: 4px; }
/* tap-a-chord panel: a sheet at the bottom of the screen, never covering the line being played for long */
.cpop {
  position: fixed; z-index: 80; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); padding: 14px 16px 16px; border-radius: 18px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 60px -12px rgba(0, 0, 0, .8);
}
.has-pbar .cpop { bottom: calc(76px + env(safe-area-inset-bottom)); }
.cpop__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cpop__head b { color: #fff; font-size: 1.4rem; font-weight: 800; }
.cpop__notes { color: var(--muted); font-size: .9rem; flex: 1; }
.cpop__x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cpop__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.cpop__tabs button { padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cpop__tabs [aria-pressed="true"] { background: var(--accent); color: #fff; }
.cpop__shapes { display: flex; justify-content: center; gap: 12px; min-height: 162px; align-items: center; }
.cpop__shapes img { max-width: 100%; height: auto; border-radius: 0; }
.cpop__more { display: block; margin-top: 8px; text-align: center; font-size: .9rem; font-weight: 700; }
/* playing bar: key, scroll and speed while the sheet is on screen */
.pbar {
  position: fixed; z-index: 70; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(520px, calc(100vw - 20px));
  padding: 8px 10px; border-radius: var(--r-pill); background: rgba(28, 28, 30, .96); box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 40px -10px rgba(0, 0, 0, .8);
}
.pbar__grp { display: flex; align-items: center; gap: 4px; }
.pbar button { min-width: 38px; height: 38px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; }
.pbar__name, .pbar__speed { min-width: 44px; text-align: center; color: #fff; font-weight: 800; font-size: .95rem; }
.pbar__capo { color: var(--link); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pbar .pbar__play { padding: 0 16px; background: var(--accent); font-size: .9rem; }
.pbar .pbar__play[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--accent); }
.has-pbar .totop { bottom: 84px; }
@media print { .pbar, .cpop { display: none !important; } .entry pre .ch { color: #000; } }
/* layout fixes: centre the panel and bar with side margins (no transform), wrap the Key row on small screens */
.cpop { left: 12px; right: 12px; transform: none; width: auto; max-width: 440px; margin-inline: auto; }
.pbar { left: 10px; right: 10px; transform: none; width: auto; max-width: 520px; margin-inline: auto; gap: 6px; padding: 7px 8px; }
.pbar button { min-width: 34px; height: 36px; font-size: .95rem; }
.pbar__name, .pbar__speed { min-width: 38px; font-size: .9rem; }
.pbar .pbar__play { padding: 0 12px; white-space: nowrap; font-size: .85rem; }
.tools__key { flex-wrap: wrap; row-gap: 8px; }
.tools[data-key-root] ~ .entry pre:last-of-type { margin-bottom: 84px; }   /* room above the player bar at the end of the sheet */
/* intro lines and labels inside posts (were H5/H6): same look, no longer headings */
.entry .post__lead { color: var(--head); font-size: 1.2rem; font-weight: 750; line-height: 1.6; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: wrap; }   /* one sentence, wrapped naturally (balance broke it early) */
@media print { .entry .post__lead { color: #000; } }
/* the footer's text links are underlined, not told apart by colour alone */
.ft__bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* chords are coloured on every sheet; they are tappable (and look it) only where the player is on */
.entry pre .ch { cursor: default; }
.post--player .entry pre .ch { cursor: pointer; }
.entry pre .ch:hover { background: none; color: var(--link); }
.post--player .entry pre .ch:hover, .post--player .entry pre .ch:focus-visible { background: rgba(236, 107, 115, .16); color: #fff; }

/* older posts: the sheet is in paragraphs (.psheet); chords look and behave as in a <pre> sheet */
.entry .psheet .ch { color: var(--link); font-weight: 800; border-radius: 4px; }
.post--player .entry .psheet .ch { cursor: pointer; }
.post--player .entry .psheet .ch:hover, .post--player .entry .psheet .ch:focus-visible { outline: 0; background: rgba(236, 107, 115, .16); color: #fff; }
.entry .psheet .nc, .entry .psheet .sec { color: var(--muted); }
.entry .psheet .sec { font-weight: 700; }
.tools[data-key-root] ~ .entry .psheet[data-last] { margin-bottom: 84px; }
@media print { .entry .psheet .ch { color: #000; } }

/* Artist showcase at the top of the Chords and instrument pages: round photos and names in a grid that grows with
   the screen (3 across on phones, 4 on tablets, 6 on wide screens); the whole tile is the link */
.artists { margin: 4px 0 36px; }
.artists__title, .list-title { margin: 0 0 16px; font-size: 1.3rem; }
.artists__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 560px) { .artists__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .artists__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.artist { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text); text-align: center; text-decoration: none; border-radius: var(--r-sm); }
.artist img, .artist__initial { width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.artist__initial { display: grid; place-items: center; color: #fff; font-size: 2rem; font-weight: 800; }
.artist__name { color: #fff; font-size: .92rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.artist:hover img, .artist:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--link), 0 12px 26px -12px var(--glow); }
.artist:hover .artist__name { color: var(--link); }
.artist:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .artist img { transition: none; } .artist:hover img { transform: none; } }

/* Search suggestions under any search box: artists first, then songs, then "All results" */
.sugg { position: absolute; z-index: 70; max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; border-radius: var(--r);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -16px rgba(0, 0, 0, .85); text-align: left; }
.sugg a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.sugg a:hover, .sugg a[aria-selected="true"] { background: var(--surface-3); }
.sugg__k { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(163, 36, 42, .3); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sugg a.sugg__all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--link); font-weight: 700; }
.archive__search, .hero__search, .nf__search { position: relative; }

/* My songs: the header button and its panel (recently played, saved) */
.mysongs-btn { flex: none; margin-left: 8px; }
.mysongs-btn:hover, .mysongs-btn[aria-expanded="true"] { background: var(--accent); }
.mysongs { position: fixed; z-index: 80; top: 84px; right: max(16px, calc((100vw - var(--wrap)) / 2)); width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto; padding: 12px; border-radius: var(--r); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -18px rgba(0, 0, 0, .9); }
.mysongs__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mysongs__tabs button { flex: 1; padding: 9px 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.mysongs__tabs [aria-selected="true"] { background: var(--accent); }
.mysongs__list { list-style: none; margin: 0; padding: 0; }
.mysongs__list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--r-sm); color: #fff; font-weight: 600; line-height: 1.35; text-decoration: none; }
.mysongs__list a:hover { background: var(--surface-3); }
.mysongs__k { flex: none; color: var(--link); font-size: .8rem; font-weight: 700; }
.mysongs__empty { margin: 6px 4px 8px; color: var(--muted); }
.mysongs__clear { display: block; margin: 8px auto 2px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) { .mysongs { top: 76px; } }

/* Cookie choices: a small bar at the bottom, shown once */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 44px -14px rgba(0, 0, 0, .9); }
.consent p { margin: 0; font-size: .9rem; line-height: 1.5; }
.consent__btns { display: flex; flex: none; gap: 8px; }
.consent__min { background: var(--surface-3); }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; } .consent__btns > * { flex: 1; } }
.ft__consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* links inside sentences are underlined, not told apart by colour alone */
.consent p a, .archive__desc a, .artists__lead a { text-decoration: underline; text-underline-offset: 3px; }

/* Chord view row (Simplify, Numbers, Left-handed) and the Left-handed switch beside diagrams */
.tools__view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.tools__view button, .lefty-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--surface-3); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tools__view button:hover, .tools__view button[aria-pressed="true"], .lefty-btn:hover, .lefty-btn[aria-pressed="true"] { background: var(--accent); }
.chord-tabs .lefty-btn { margin: 0 0 12px; }
.lefty-row { margin: 0 0 18px; }
.gen__row--ctl .lefty-btn { margin-left: 4px; }

/* ---- Chord toolbar, 2026 pass: three groups (key, view, actions) + "More"; every control a 44px target with a word */
.tools__act, .tools__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.tools__act button, .tools__more .tools__opt, .tools__view button, .tools__more .tools__ctl button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.tools__act button:active, .tools__view button:active, .tools__more .tools__opt:active { transform: scale(.97); }
.tools__act button:hover, .tools__act button[aria-pressed="true"], .tools__act button[aria-expanded="true"],
.tools__more .tools__opt:hover, .tools__more .tools__opt[aria-pressed="true"] { background: var(--accent); color: #fff; }
.tools__act svg { flex: none; }
.tools__more { padding-top: 12px; border-top: 1px solid var(--line); }
.tools__more[hidden] { display: none !important; }
.tools__more .tools__ctl { flex-basis: auto; }
.tools__key button, .tools__key select { min-height: 44px; }
.tools__key button { min-width: 44px; }
@media (max-width: 480px) {
  .tools__act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools__act button { justify-content: center; padding: 0 8px; }
}

/* setlist picker: a sheet at the bottom on phones (thumb reach), a panel by the toolbar on wide screens */
.setpick { top: auto; bottom: 16px; }
.mysongs__title { margin: 4px 6px 10px; color: #fff; font-weight: 800; line-height: 1.35; }
.setpick__item { flex: 1; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: #fff; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.setpick__item:hover, .setpick__item[aria-pressed="true"] { background: var(--surface-3); }
.setpick .mysongs__list li { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.setpick__new { display: flex; gap: 8px; margin: 10px 0 6px; }
.setpick__new input, .setcard__rename { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--input-bg); color: #fff; font: inherit; }
.mysongs__all { display: block; margin: 6px 6px 2px; font-weight: 700; text-decoration: none; }
@media (max-width: 760px) { .setpick { left: 12px; right: 12px; width: auto; bottom: 12px; border-radius: calc(var(--r) + 4px); } }

/* playing from a setlist: where you are, and the next song one tap away */
.setnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -10px 0 22px; padding: 12px 16px; border-radius: var(--r); background: rgba(163, 36, 42, .14); box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .3); }
.setnav__name { color: var(--muted); font-size: .85rem; font-weight: 700; flex-basis: 100%; }
.setnav a { font-weight: 700; text-decoration: none; }
.setnav__next { margin-left: auto; }

/* the Setlists page */
.setpage { margin: 0 0 32px; }
.setcard { margin: 0 0 18px; padding: 18px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.setcard--shared { box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .45); }
.setcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.setcard__name { margin: 0; font-size: 1.2rem; }
.setcard__songs { margin: 0 0 14px; padding-left: 1.4em; }
.setcard__songs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.setcard__songs li::marker { color: var(--muted); }
.setcard__songs a { flex: 1 1 auto; color: #fff; font-weight: 700; text-decoration: none; }
.setcard__ctl { display: inline-flex; gap: 4px; }
.setcard__ctl button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.setcard__ctl button:hover { background: var(--accent); }
.setcard__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.setcard__acts .btn { min-height: 44px; }
.setcard__empty { padding: 18px; border-radius: var(--r); background: var(--surface); color: var(--muted); }
.setpage__new { max-width: 520px; }

/* ---- Metronome */
.met { display: grid; gap: 18px; justify-items: center; margin: 8px 0 34px; padding: clamp(20px, 5vw, 36px); border-radius: calc(var(--r) + 4px);
  background: radial-gradient(120% 140% at 50% 0%, rgba(163, 36, 42, .3), transparent 62%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.met__display { display: grid; justify-items: center; line-height: 1; }
.met__bpm { color: #fff; font-size: clamp(4.2rem, 16vw, 6.4rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.met__unit { margin-top: 4px; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .14em; }
.met__word { margin-top: 8px; color: var(--link); font-weight: 700; }
.met__beats { display: flex; gap: 12px; min-height: 22px; }
.met__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); transition: background-color .05s, box-shadow .05s, transform .05s; }
.met__dot--one { box-shadow: inset 0 0 0 2px var(--link); }
.met__dot.is-on { background: var(--link); transform: scale(1.25); box-shadow: 0 0 18px var(--glow); }
.met__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.met__row--tempo input { order: -1; flex: 1 1 100%; max-width: 460px; accent-color: var(--accent); height: 44px; }   /* slider on its own line, steps under it */
.met__step { min-width: 52px; min-height: 44px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.met__step:hover { background: var(--accent); }
.met select, .tun select { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--input-bg); color: #fff; font: inherit; }
.met__tap { min-height: 44px; }
.met__play, .tun__go { min-height: 56px; width: min(100%, 320px); font-size: 1.1rem; }
.met__play[aria-pressed="true"], .tun__go[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--accent); }

/* ---- Tuner */
.tun { display: grid; gap: 16px; justify-items: center; margin: 8px 0 34px; padding: clamp(20px, 5vw, 36px); border-radius: calc(var(--r) + 4px);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; --tun-ok: #3fd18c; }
.tun__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.tun__dial { position: relative; width: min(100%, 340px); aspect-ratio: 2 / 1.15; overflow: hidden; }
.tun__dial::before { content: ""; position: absolute; left: 6%; right: 6%; top: 12%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--line-strong); border-bottom-color: transparent; border-left-color: var(--line-strong); }
.tun__scale { position: absolute; inset: 2% 4% auto; display: flex; justify-content: space-between; color: var(--muted); font-weight: 800; }
.tun__scale span:nth-child(2) { color: var(--tun-ok); }
.tun__needle { position: absolute; left: calc(50% - 2px); bottom: 34%; width: 4px; height: 52%; border-radius: 4px; background: var(--link);
  transform-origin: 50% 100%; transition: transform .12s ease-out; }
.tun__note { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0; color: #fff; font-size: 3rem; font-weight: 800; line-height: 1; }
.tun__note::after { content: attr(data-octave); font-size: 1rem; color: var(--muted); vertical-align: sub; }
.tun__cents { position: absolute; left: 0; right: 0; bottom: -2px; margin: 0; color: var(--muted); font-size: .85rem; font-weight: 700; }
.tun.is-tuned .tun__needle { background: var(--tun-ok); }
.tun.is-tuned .tun__note { color: var(--tun-ok); }
.tun__status { margin: 0; min-height: 3em; max-width: 34ch; color: var(--text); }
.tun.is-denied .tun__status { color: var(--link); }
.tun__label { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.tun__strings { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tun__str { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.tun__str::after { content: attr(data-octave); font-size: .65rem; color: var(--muted); vertical-align: sub; }
.tun__str:hover { background: var(--accent); }
.tun__str.is-on { box-shadow: 0 0 0 3px var(--link); }
@media (prefers-reduced-motion: reduce) { .tun__needle, .met__dot { transition: none; } }
/* setlist rows: title, key, controls on one line; titles are plain links (the row itself reads as a list) */
.entry .setcard__songs a, .entry .setcard a.btn, .entry .setnav a { text-decoration: none; }
.setcard__songs li { flex-wrap: nowrap; }
.setcard__songs a { min-width: 0; overflow-wrap: anywhere; }
.setcard__songs .mysongs__k { flex: none; }
.setcard__ctl { flex: none; margin-left: auto; }

/* Tools page: one card per tool, the whole card is the link */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 30px; }
.entry a.toolcard { display: grid; gap: 6px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.entry a.toolcard:hover, .entry a.toolcard:focus-visible { box-shadow: inset 0 0 0 1px var(--link), 0 14px 30px -18px var(--glow); transform: translateY(-2px); }
.toolcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(163, 36, 42, .22); color: var(--link); font-size: 1.4rem; }
.toolcard__name { color: #fff; font-size: 1.1rem; font-weight: 800; }
.toolcard__text { font-size: .92rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .entry a.toolcard { transition: none; } .entry a.toolcard:hover { transform: none; } }

/* ---- Song toolbar: summary (key, capo, Controls) + icon actions on the page, every control in a bottom sheet */
.tsum { display: flex; align-items: stretch; gap: 8px; flex-basis: 100%; }
/* Key and Capo: one joined control, each a small label over its value, both centred on the same lines */
.tsum__seg { display: flex; flex: 1 1 auto; max-width: 280px; padding: 4px; border-radius: 16px; background: var(--surface-3); }
.tsum__pill { display: grid; align-content: center; gap: 3px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.tsum__seg .tsum__pill { flex: 1 1 0; min-width: 0; }
.tsum__seg .tsum__pill + .tsum__pill { box-shadow: -4px 0 0 -3px var(--line-strong); }
.tsum__pill small { color: #b0adb4; font-size: .66rem; font-weight: 800; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.tsum__pill b { font-size: 1.02rem; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.tsum__seg .tsum__pill:hover { background: rgba(255, 255, 255, .07); }
/* Controls: sized to its words, a tonal accent rather than a solid red slab */
.tsum__pill--all { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px;
  background: rgba(163, 36, 42, .2); color: #ffd9dc; box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .35); font-weight: 800; }
.tsum__pill--all:hover { background: var(--accent); color: #fff; }
.tsum__badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .72rem; font-style: normal; }
.tools__act--icons { display: flex !important; gap: 8px; }
.tools__act--icons button { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
.tools__act--icons button span:not([aria-hidden]), .tools__act--icons [data-save] { font-size: 0; }
.tools__act--icons [data-save] span[aria-hidden] { font-size: 1.1rem; }
.tools__act--icons button:last-child { width: auto; padding: 0 16px !important; margin-left: auto; }
.tools__act--icons button:last-child span { font-size: .9rem; }
.tsheet__scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .55); }
.tsheet { position: fixed; z-index: 86; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 8px 18px 24px;
  border-radius: 22px 22px 0 0; background: var(--surface-2); box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .8); transform: translateY(100%); transition: transform .22s ease; }
.tsheet.is-open { transform: none; }
.tsheet::before { content: ""; display: block; width: 44px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: var(--line-strong); }
.tsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tsheet__title { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 800; }
.tsheet__sec { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.tsheet__sec .tools__key, .tsheet__sec .tools__view { margin: 0; }
.tsheet__sec .tools__more, .tsheet__sec > .tools__ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.tsheet__sec .tools__opt, .tsheet__sec .tools__ctl button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.tsheet__sec .tools__opt[aria-pressed="true"] { background: var(--accent); }
@media (min-width: 761px) { .tsheet { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: 22px; } }
body.has-sheet { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tsheet { transition: none; } }

.tsheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsheet__row .tools__ctl { flex-basis: 100%; }
.tools__act--icons button:last-child { width: 44px; padding: 0 !important; margin-left: 0; }
.tools__act--icons button:last-child span { font-size: 0; }
.tools__opt > span[aria-hidden] { margin-left: 2px; opacity: .75; }
.pbar .pbar__set { display: grid; place-items: center; padding: 0; }
.pbar .pbar__set:hover { background: var(--accent); }
@media (max-width: 400px) { .pbar__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pbar .pbar__play { padding: 0; min-width: 40px; } }
/* before ym.js moves them into the sheet, the full controls are not shown (the summary stands in for them) */
.tools--a > .tools__key, .tools--a > .tools__keynote, .tools--a > .tools__view, .tools--a > .tools__more, .tools--a [data-more] { display: none !important; }