/* =========================================================================
     Theme tokens. The PAGE CHROME switches light/dark; the SHEET — the stage
     card, the chord tiles, every dialog — keeps its printed-paper palette in
     both themes, so what you see on the sheet is what prints.
     ========================================================================= */
  :root{
    color-scheme:dark;

    /* Warm workshop dark the sheet is lit against. */
    --bg-0:#191009;
    --bg-1:#251610;
    --glow:rgba(224,122,80,.16);
    --backdrop:
      radial-gradient(115% 75% at 50% -8%, var(--glow), transparent 55%),
      radial-gradient(80% 55% at 50% 4%, rgba(180,84,50,.10), transparent 60%),
      linear-gradient(180deg, var(--bg-1), var(--bg-0) 62%);
    --grain-opacity:.05;
    --grain-blend:overlay;

    --page-bg:var(--bg-0);
    --ink:#f4ecdd;
    --ink-soft:#b3a28f;

    /* Signature rust accent, lit for dark ground. */
    --accent:#e0765a;
    --accent-strong:#ef9078;   /* hover: brighter on dark, deeper on paper */
    --accent-soft:rgba(224,118,90,.15);

    --card-bg:rgba(255,255,255,.05);  /* raised fill: inputs, ghost buttons, pills */
    --card-border:rgba(233,209,177,.16);
    --control-border:rgba(233,209,177,.32);
    --btn-bg:#bc4a31;
    --btn-fg:#fff6ec;
    --error:#f89d84;

    --surface:#2d1e15;               /* popover menus and floating panels */
    --shadow-pop:0 18px 44px rgba(0,0,0,.55);
    --scrim:rgba(12,7,4,.62);

    --panel-bg:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16));
    --panel-border:var(--card-border);
    --panel-shadow:0 20px 44px -28px rgba(0,0,0,.7);

    /* Dark stage under the lit paper tiles — the raised panel, not the paper,
       darkens with the chrome. */
    --stage-border:rgba(233,209,177,.13);
    --stage-shadow:0 34px 70px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
    --stage-bg-color:transparent;
    --stage-bg-image:
      radial-gradient(120% 120% at 50% -20%, rgba(224,122,80,.09), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16));

    --heading-font:'Fraunces', Georgia, serif;
    --body-font:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --control-h:48px;
    --builder-control-h:66px;
    --hover-fade:.35s;
  }
  :root[data-theme="light"]{
    color-scheme:light;

    /* Same spotlight, inverted: the lit core is the brightest point, so the
       paper deepens into amber and shades off at the edges for it to read. */
    --bg-0:#e4d3b7;
    --bg-1:#f0e4cf;
    --glow:rgba(255,253,247,1);
    --backdrop:
      radial-gradient(86% 55% at 50% -6%, var(--glow), transparent 66%),
      radial-gradient(122% 82% at 50% -8%, rgba(219,124,78,.4), transparent 66%),
      radial-gradient(140% 110% at 50% 22%, transparent 38%, rgba(118,82,42,.18)),
      linear-gradient(180deg, var(--bg-1), var(--bg-0) 76%);
    --grain-opacity:.035;
    --grain-blend:multiply;

    --page-bg:var(--bg-0);
    --ink:#2d241a;
    --ink-soft:#6f6250;

    --accent:#a44737;
    --accent-strong:#83382a;
    --accent-soft:rgba(164,71,55,.13);

    --card-bg:#fffaf0;
    --card-border:rgba(74,54,26,.16);
    --control-border:rgba(74,54,26,.34);
    --btn-bg:#a44737;
    --btn-fg:#ffffff;
    --error:#9e2a20;

    --surface:#fffaf0;
    --shadow-pop:0 14px 34px -8px rgba(80,60,25,.28), 0 2px 8px rgba(80,60,25,.12);
    --scrim:rgba(64,44,22,.42);

    --panel-bg:linear-gradient(180deg, #fffaf0, #f6ecd9);
    --panel-border:rgba(74,54,26,.14);
    --panel-shadow:0 18px 40px -26px rgba(80,60,25,.35);

    --stage-border:rgba(74,54,26,.16);
    --stage-shadow:0 34px 64px -34px rgba(85,60,25,.55), 0 10px 30px -18px rgba(85,60,25,.35);
    --stage-bg-color:#fffcf7;
    --stage-bg-image:
      radial-gradient(120% 90% at 50% -12%, rgba(164,71,55,.06), transparent 55%),
      linear-gradient(180deg, #fffdf8, #f5ecdd);
  }
  /* The printed artefacts — chord tiles and the dialogs that stage them —
     keep the letterpress paper palette in both themes, so what's on a card is
     what prints. The stage around the cards is themed: it darkens with the
     chrome and lets the paper tiles carry the light. */
  .card, .voicing-modal, .rsearch-modal, .tips-modal, .tip-toast, .card-menu{
    color-scheme:light;   /* light scrollbars and form bits on paper */
    --page-bg:#f6f0e5;
    --ink:#292621;
    --ink-soft:#716a61;
    --accent:#a44737;
    --accent-strong:#783027;
    --accent-soft:#f6e5df;
    --card-bg:#fffcf7;
    --card-border:#ddd3c5;
    --control-border:#b9ac9d;
    --btn-bg:#a44737;
    --btn-fg:#ffffff;
    --error:#9e2a20;
    --surface:#fffcf7;
    --shadow-pop:0 14px 30px -10px rgba(41,38,33,.28), 0 2px 8px rgba(41,38,33,.1);
  }
  /* B&W preview: a flat photocopy — glow, grain and paper warmth all switch off. */
  body.bw-mode,
  body.bw-mode :is(.card, .voicing-modal, .rsearch-modal, .tips-modal, .tip-toast, .card-menu){
    --page-bg:#ffffff;
    --ink:#000000;
    --ink-soft:#333333;
    --accent:#000000;
    --accent-strong:#000000;
    --accent-soft:#f0f0f0;
    --card-bg:#ffffff;
    --card-border:#000000;
    --control-border:#000000;
    --btn-bg:#000000;
    --btn-fg:#ffffff;
    --error:#000000;
    --surface:#ffffff;
    --shadow-pop:0 10px 24px rgba(0,0,0,.18);
    --scrim:rgba(0,0,0,.45);
    /* fonts intentionally unchanged in bw-mode — only colors switch */
  }
  body.bw-mode{
    --glow:transparent;
    --panel-bg:#ffffff;
    --panel-border:#000000;
    --panel-shadow:none;
    --stage-border:transparent;
    --stage-shadow:none;
    --stage-bg-color:#ffffff;
    --stage-bg-image:none;
  }
  * { box-sizing: border-box; }
  body {
    margin:0; background-color:var(--bg-0); color:var(--ink);
    font-family:var(--body-font); font-size:15px; line-height:1.45;
    padding:26px 24px 48px;
    transition:background-color .4s ease, color .4s ease;
  }
  /* Layer 1: warm spotlight over the desk + vignette. */
  body::before{
    content:""; position:fixed; inset:0; z-index:-2;
    background:var(--backdrop);
    transition:background .4s ease;
  }
  /* Layer 2: fine film grain — felt more than seen. */
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  body.bw-mode{ background-color:#fff; }
  body.bw-mode::before, body.bw-mode::after{ display:none; }
  /* UA widgets (scrollbars, native controls) must match the white photocopy
     even while the dark theme is selected underneath */
  :root:has(body.bw-mode){ color-scheme:light; }
  ::selection{ background:var(--accent); color:#fff6ec; }
  .wrap{ max-width:1040px; margin:0 auto; }

  /* --- top-right actions (GitHub link + theme toggle) --- */
  .top-actions{
    position:fixed; top:clamp(12px,2.4vw,20px); right:clamp(12px,2.4vw,20px); z-index:45;
    display:flex; align-items:center; gap:8px;
  }
  .theme-toggle, .icon-link{
    width:44px; height:44px; min-height:0; display:grid; place-items:center; padding:0;
    border-radius:50%; border:1px solid var(--card-border);
    background:var(--card-bg); color:var(--accent); cursor:pointer; overflow:hidden;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  }
  .icon-link{ text-decoration:none; }
  .icon-link svg{ width:20px; height:20px; display:block; }
  .theme-toggle:hover, .icon-link:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
  .theme-toggle:active, .icon-link:active{ transform:scale(.94); }
  .theme-toggle:focus-visible, .icon-link:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
  .theme-toggle .ic{
    grid-area:1 / 1; font-size:1.15rem; line-height:1;
    transition:opacity .28s ease, rotate .4s cubic-bezier(.2,.8,.2,1), scale .3s ease;
  }
  /* Show the icon for the theme you'd switch TO. */
  :root[data-theme="dark"]  .ic-sun { opacity:1; rotate:0deg;   scale:1;  }
  :root[data-theme="dark"]  .ic-moon{ opacity:0; rotate:-90deg; scale:.4; }
  :root[data-theme="light"] .ic-sun { opacity:0; rotate:90deg;  scale:.4; }
  :root[data-theme="light"] .ic-moon{ opacity:1; rotate:0deg;   scale:1;  }

  /* --- centered brand header --- */
  .topbar{ text-align:center; margin:4px 0 24px; }
  h1{ margin:0; }
  .brand-mark{
    display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px;
    color:var(--accent); background:var(--accent-soft);
    border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
    border-radius:15px;
  }
  .brand-mark svg{ width:32px; height:32px; }
  .brand-title{
    font-family:var(--heading-font); font-weight:600;
    font-size:clamp(1.9rem, 4.6vw, 2.65rem); line-height:1.05; letter-spacing:-.015em;
    background:linear-gradient(168deg, var(--ink) 30%, var(--accent) 115%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .brand-tagline{ margin:8px auto 0; max-width:52ch; color:var(--ink-soft); font-size:.95rem; }
  .topbar::after{
    content:""; display:block; width:64px; height:3px; margin:14px auto 0;
    border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
  }
  /* The console: a glass desk-panel above the lit sheet. Narrower than the
     sheet, so the layout funnels the eye toward the stage below. */
  .settings-section{
    /* z-index: the entrance animations make the console and the stage each a
       stacking context, so the console's dropdowns need the console itself
       lifted to reach over the sheet below */
    position:relative; z-index:20;
    max-width:880px; margin:0 auto 20px; padding:18px clamp(14px,2.4vw,22px) 20px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border); border-radius:18px;
    box-shadow:var(--panel-shadow);
    transition:background .4s ease, border-color .4s ease;
  }
  .builder-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; margin:0 0 10px; }
  .builder-title{ margin:0; font-family:var(--heading-font); font-size:21px; font-weight:600; }
  /* the heading labels the field below it; a text cursor would promise an edit
     point the heading itself isn't */
  .builder-title label{ cursor:default; }
  .chord-field{ min-width:0; }
  /* Input + transpose stepper, in both builders. Stretch, so the transpose
     column tracks the field as it grows with the text. Tighter than the grid
     gap on its right: proximity is what says which of the two neighbours it
     belongs to, now that it carries no label. */
  .transpose-row{ position:relative; display:flex; align-items:stretch; gap:6px; }
  .transpose-row .input-clear-wrap{ flex:1 1 auto; min-width:0; }
  /* The stepper spells out nothing, so the explanation rides a popover the page
     draws itself — native title bubbles never appear on touch. Below the
     control, right-aligned, so it never covers the field being described. */
  .transpose-row .transpose-tip{ top:calc(100% + 8px); left:auto; right:0; }
  /* The tip is the stepper's next sibling, so plain combinators reach it — no
     parent selector, and one rule covers keyboard and touch alike. */
  .transpose-row .stepper-vert:hover ~ .transpose-tip{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:.4s; }
  .transpose-row .stepper-vert:focus-within ~ .transpose-tip{ opacity:1; visibility:visible; transform:translateY(0); }
  /* flex-start, never centred: expanding the help grows it downwards, and a
     centred neighbour would be shoved down and back on every toggle */
  .chord-hint-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin:8px 0 0; }
  .chord-hint-row .syntax-help{ flex:1 1 300px; }
  /* It names the chords it would search for, so its width is whatever they run
     to — capped at a third of the row, with the tail ellipsized. */
  .chord-hint-row #reverseSearchBtn{ flex:0 1 auto; min-width:0; max-width:33%; }
  .rsearch-open-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .field-label{ display:block; margin:0 0 6px; color:var(--ink); font-size:12px; font-weight:750; letter-spacing:.04em; }
  .settings-section-title{
    font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.13em;
    color:var(--ink-soft); margin:0 0 8px;
  }
  .controls{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-bottom:10px; }
  /* Label, pills, toggle. flex-start plus a pill-height box on the two outer
     items lines them up with the first row of pills and leaves them there when
     the pills grow downwards. */
  .chord-suggestions{ --pill-h:22px; display:flex; align-items:flex-start; gap:6px; margin:9px 0 0; }
  .chord-suggestions[hidden]{ display:none; }
  .chord-suggestions-label, .chord-suggestions-more{ display:inline-flex; align-items:center; min-height:var(--pill-h); }
  /* takes the row's remaining width in either state, so the toggle past it does
     not shift when the pills fold onto a second line */
  .chord-suggestions-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
  .chord-suggestions.measuring .chord-suggestions-pills{ flex-wrap:wrap; }
  /* never let the pills' appetite for room squeeze the label into wrapping —
     it holds its width and the pills wrap instead (phones override with a
     one-line ellipsis) */
  .chord-suggestions-label{ flex:0 0 auto; white-space:nowrap; margin-right:2px; color:var(--ink-soft); font-size:12.5px; }
  .chord-suggestion{
    min-height:0; padding:3px 9px; border-radius:999px;
    background:var(--card-bg); color:var(--ink); border:1px solid var(--control-border);
    font-size:12px; font-weight:650;
  }
  .chord-suggestion:hover{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
  /* the tail of the pill list is a long band of rarely-used qualities — kept one
     click away instead of spending the width by default */
  .chord-suggestions:not(.show-all) .chord-suggestion.is-extra{ display:none; }
  /* must follow the rule above — same specificity, and fitChordSuggestions needs
     every pill laid out to see where the line breaks */
  .chord-suggestions.measuring .chord-suggestion.is-extra{ display:inline-flex; }
  /* display can't be transitioned, so the revealed pills animate themselves in,
     staggered by their position in the tail */
  .chord-suggestions.show-all .chord-suggestion.is-extra{
    animation:pill-in .26s cubic-bezier(.34,1.4,.64,1) both;
    animation-delay:calc(var(--i, 0) * 22ms);
  }
  @keyframes pill-in{
    from{ opacity:0; transform:translateY(-4px) scale(.9); }
    to{ opacity:1; transform:none; }
  }
  /* Last in the row, past the pills that fill it. The fixed width holds the
     caret still while the wording changes, and keeps the fit measurement from
     being invalidated by its own label. */
  .chord-suggestions-more{
    flex:0 0 auto; gap:3px; justify-content:flex-end; min-width:86px;
    padding:0 4px; border:0; border-radius:6px;
    background:transparent; color:var(--accent); font-size:12.5px; font-weight:650;
  }
  .chord-suggestions-more[hidden]{ display:none; }
  .chord-suggestions-more svg{ width:12px; height:12px; transition:transform .2s ease; }
  .chord-suggestions-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
  @media (prefers-reduced-motion:reduce){
    .chord-suggestions.show-all .chord-suggestion.is-extra{ animation:none; }
    .chord-suggestions-more svg{ transition:none; }
  }
  .chord-suggestions-more:hover{ background:transparent; border-color:transparent; color:var(--accent-strong); text-decoration:underline; }
  .chord-suggestions-more:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  /* Boxed and marked so it reads as help at a glance, rather than as one more
     control in a card that is otherwise all controls. */
  .syntax-help{
    margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; max-width:760px;
    padding:8px 12px; background:var(--page-bg); border-radius:10px;
  }
  .syntax-summary{
    display:flex; align-items:flex-start; gap:9px;
    min-height:0; width:100%; padding:0; border:0; border-radius:4px;
    background:transparent; color:inherit; font:inherit; line-height:inherit; text-align:left; cursor:pointer;
  }
  .syntax-summary:hover{ background:transparent; border-color:transparent; color:inherit; }
  .syntax-summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .syntax-help-mark{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:19px; height:19px; border-radius:50%;
    border:1px solid var(--control-border); background:var(--card-bg); color:var(--ink-soft);
    font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:12px; line-height:1;
    transition:border-color .18s ease, color .18s ease;
  }
  .syntax-summary:hover .syntax-help-mark{ border-color:var(--accent); color:var(--accent); }
  /* the opened list lines up with the summary text, not under the mark */
  .syntax-panel{ padding-left:28px; }
  .syntax-help code{ font-family:inherit; font-size:inherit; font-weight:600; color:var(--ink); }
  .syntax-toggle{ display:inline-flex; align-items:center; gap:3px; color:var(--accent); font-weight:600; white-space:nowrap; }
  .syntax-summary:hover .syntax-toggle{ text-decoration:underline; }
  .syntax-toggle svg{ width:11px; height:11px; transition:transform .2s ease; }
  .syntax-summary[aria-expanded="true"] .syntax-toggle svg{ transform:rotate(180deg); }
  .syntax-panel{
    display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-4px);
    transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,transform .28s cubic-bezier(.4,0,.2,1);
  }
  .syntax-panel.open{ grid-template-rows:1fr; opacity:1; transform:translateY(0); }
  .syntax-panel-inner{ min-height:0; overflow:hidden; }
  .syntax-help p{ margin:7px 0 0; }
  @media (prefers-reduced-motion:reduce){
    .syntax-panel,.syntax-toggle svg{ transition:none; }
  }

  /* --- the stage: the chord sheet, lit and raised off the desk --- */
  .stage{
    position:relative; margin:0 0 22px;
    padding:clamp(14px,2.6vw,26px) clamp(10px,2.4vw,24px) clamp(12px,2vw,20px);
    border-radius:22px;
    background-color:var(--stage-bg-color);
    background-image:var(--stage-bg-image);
    border:1px solid var(--stage-border);
    box-shadow:var(--stage-shadow);
    transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  /* The spotlight halo follows the sheet, not the top of the page. */
  .stage::before{
    content:""; position:absolute; inset:-46px -34px auto; height:240px; z-index:-1;
    background:radial-gradient(58% 100% at 50% 20%, var(--glow), transparent 72%);
    pointer-events:none;
  }
  .stage-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:10px 18px; flex-wrap:wrap;
    padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--card-border);
  }
  .stage-heading{ min-width:0; }
  #pageTitle{ margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .page-title-main{
    font-family:var(--heading-font); font-weight:600;
    font-size:22px; line-height:1.15; color:var(--ink);
  }
  .page-title-sub{
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .stage-meta{ margin:3px 0 0; font-size:12.5px; color:var(--ink-soft); }
  .results-count{ font-weight:650; color:var(--ink); }
  .results-context::before{ content:" · "; }
  .results-actions{
    display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
    margin:0;
  }
  .btn-iconic{ display:inline-flex; align-items:center; gap:7px; }
  .btn-iconic svg{ width:15px; height:15px; flex-shrink:0; }
  .btn-label{ position:relative; display:inline-grid; place-items:center; }
  .btn-label-default{
    grid-area:1 / 1; transition:opacity .16s ease,transform .16s ease;
  }
  .btn-label-flash{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    visibility:hidden; opacity:0; color:var(--ink); transform:translateY(4px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .is-flash .btn-label-default{ opacity:0; transform:translateY(-4px); }
  .is-flash .btn-label-flash{ visibility:visible; opacity:1; transform:translateY(0); }
  #shareBtn .btn-label{ min-width:48px; }
  .share-wrap{ position:relative; }
  .share-menu{
    position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:240px; max-width:300px;
    display:flex; flex-direction:column; gap:2px; padding:6px;
    background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
    box-shadow:var(--shadow-pop);
    transform-origin:top right;
    opacity:0; visibility:hidden; transform:translateY(-6px) scale(.96);
    transition:opacity .16s ease, transform .2s cubic-bezier(.34,1.56,.64,1), visibility .2s;
  }
  .share-wrap.open .share-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .share-menu-item{
    display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    min-height:0; width:100%; padding:7px 10px; border:none; border-radius:8px;
    background:transparent; color:var(--ink); font-size:14px; text-align:left; cursor:pointer;
  }
  .share-menu-item[hidden]{ display:none; }
  .share-menu-heading{
    padding:5px 10px 3px; color:var(--ink-soft);
    font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  }
  /* the image copy is not a link — the rule keeps it from reading as one more of them */
  .share-menu-item-split{ margin-top:5px; padding-top:9px; border-top:1px solid var(--card-border); border-radius:0 0 8px 8px; }
  .share-menu-item:hover{ background:var(--page-bg); border-color:transparent; color:var(--ink); }
  .share-menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  .share-menu-label{ font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .share-menu-sub{ font-size:12px; color:var(--ink-soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .options-toggle .chev, #shareBtn .chev{ width:13px; height:13px; margin-left:-2px; transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .options-toggle[aria-expanded="true"] .chev, #shareBtn[aria-expanded="true"] .chev{ transform:rotate(180deg); }

  /* expands between the sheet head and the charts; the head's divider stays
     above it, visually attached to the Options button */
  .options-panel{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1);
  }
  .options-panel.open{ grid-template-rows:1fr; }
  .options-panel-inner{ min-height:0; overflow:hidden; visibility:hidden; transition:visibility .28s; }
  .options-panel.open .options-panel-inner{ visibility:visible; transition:visibility 0s; }
  .options-panel.settled .options-panel-inner{ overflow:visible; }
  /* a recessed tray on the sheet, so the open options read as a distinct band */
  .options-card{
    display:flex; flex-wrap:wrap; gap:18px 44px;
    background:var(--page-bg); border:1px solid var(--card-border); border-radius:14px;
    padding:15px 18px 17px; margin:2px 0 18px;
  }
  .options-group{ flex:1 1 240px; min-width:0; }
  .options-group .settings-section-title{ margin-bottom:2px; }
  .options-group-desc{ font-size:13.5px; color:var(--ink-soft); margin:0 0 10px; }
  /* one option per line, however wide the group gets */
  .options-group .controls{ flex-direction:column; align-items:flex-start; margin-bottom:0; gap:12px; }
  .input-clear-wrap{ position:relative; }
  #chordInput{
    display:block; width:100%; height:var(--builder-control-h); min-height:var(--builder-control-h); max-height:150px; padding:10px 38px 10px 12px; font-size:15px; line-height:1.45;
    border:1px solid var(--control-border); border-radius:10px; font-family:inherit; resize:none; overflow-y:hidden;
    background:var(--card-bg); color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease;
  }
  #chordInput:focus, #songSearchInput:focus, #scaleInput:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
  .input-clear-btn{
    position:absolute; top:8px; right:7px;
    min-height:28px; width:28px; height:28px; padding:0; border:none; background:transparent; color:var(--ink-soft);
    font-size:17px; line-height:1; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .15s ease, color .15s ease, background-color .15s ease, visibility .15s;
  }
  .input-clear-wrap.has-value .input-clear-btn{ opacity:1; visibility:visible; }
  .input-clear-btn:hover{ color:var(--accent); background:var(--page-bg); }
  .input-clear-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  /* --- alternative ways into the chord field --- */
  .builder-helpers{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:12px 0 0; }
  .builder-helpers-label{ margin-right:1px; color:var(--ink-soft); font-size:12.5px; }
  .label-narrow{ display:none; }

  /* --- song search --- */
  .song-search-field{ margin:11px 0 0; animation:field-reveal .22s ease; }
  .song-search{ position:relative; }
  @keyframes field-reveal{ from{ opacity:0; transform:translateY(-5px); } }
  @media (prefers-reduced-motion:reduce){
    .song-search-field{ animation:none; }
  }
  .song-search-icon{
    position:absolute; top:50%; left:12px; transform:translateY(-50%);
    width:16px; height:16px; color:var(--ink-soft); pointer-events:none;
  }
  /* the scale input and its typeahead share this look — one suggestion-dropdown
     language across both builders */
  #songSearchInput, #scaleInput{
    display:block; width:100%;
    font-size:15px; font-family:inherit;
    border:1px solid var(--control-border); border-radius:10px;
    background:var(--card-bg); color:var(--ink);
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  #songSearchInput{ height:var(--control-h); padding:0 12px 0 38px; }
  #scaleInput{ height:var(--builder-control-h); padding:0 38px 0 12px; }
  .song-search-results, .typeahead-menu{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
    margin:0; padding:6px; list-style:none;
    background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
    box-shadow:var(--shadow-pop);
    max-height:316px; overflow-y:auto;
    animation:card-menu-in .14s ease;
  }
  @media (prefers-reduced-motion:reduce){
    .song-search-results, .typeahead-menu{ animation:none; }
  }
  .song-search-results li, .typeahead-opt{
    display:flex; align-items:baseline; gap:8px;
    padding:8px 10px; border-radius:8px; cursor:pointer;
  }
  .song-search-results li:hover, .song-search-results li.active,
  .typeahead-opt:hover, .typeahead-opt.active{ background:var(--page-bg); }
  .song-result-title{ flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--ink); }
  .song-result-artist{ flex-shrink:4; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
  .song-result-meta{ margin-left:auto; flex-shrink:0; font-size:11.5px; color:var(--ink-soft); }
  .song-search-note, .scale-hint{ margin:7px 0 0; font-size:12.5px; color:var(--ink-soft); }
  .song-search-note:empty{ display:none; }
  .song-search-note a{ color:var(--accent); font-weight:650; text-decoration:none; white-space:nowrap; }
  .song-search-note a:hover{ text-decoration:underline; text-underline-offset:2px; }
  .song-search-note a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

  /* --- scales mode --- */
  /* Segmented switch on the console: the selected mode reads as the raised,
     lit chip; the other stays part of the desk until hovered. */
  .mode-tabs{
    /* a grid, not a flex row: equal 1fr tracks keep both tabs the width of the
       longer label, which is what lets the chip below be pure percentages.
       The three lengths are variables because the switch comes in two sizes. */
    --switch-pad:4px; --switch-gap:4px; --switch-radius:9px;
    position:relative;
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--switch-gap);
    width:max-content; margin:0 0 16px; padding:var(--switch-pad);
    background:var(--page-bg); border:1px solid var(--panel-border); border-radius:13px;
  }
  .mode-tab{
    position:relative;
    min-height:36px; padding:0 20px; border:none; border-radius:var(--switch-radius);
    background:transparent; color:var(--ink-soft);
    font-family:inherit; font-size:14px; font-weight:650;
    cursor:pointer;
    transition:color .18s ease;
  }
  /* the background restates transparent to outrank the generic filled-button
     hover: hovering a tab darkens its label, it doesn't paint over the chip */
  .mode-tab:hover{ background:transparent; color:var(--ink); }
  /* the chip is the thumb below, so a picked tab only takes the accent —
     aria-selected on the tablist, aria-checked on the radiogroup */
  .mode-tab[aria-selected="true"], .mode-tab[aria-checked="true"]{ color:var(--accent); }
  .mode-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  /* The chip itself: half the switch minus the padding on both sides and half
     the gap it slides across (widths resolve against the padding box). */
  .mode-tab-thumb{
    position:absolute; top:var(--switch-pad); bottom:var(--switch-pad); left:var(--switch-pad);
    width:calc(50% - var(--switch-pad) - var(--switch-gap)/2);
    border-radius:var(--switch-radius);
    background:var(--card-bg); box-shadow:0 1px 5px rgba(0,0,0,.16);
    pointer-events:none;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* each thumb is scoped to its own switch, and travels a tab plus the gap */
  body.scales-mode #modeTabs .mode-tab-thumb,
  body.neck-view #scaleViewTabs .mode-tab-thumb{ transform:translateX(calc(100% + var(--switch-gap))); }
  /* The same switch one size down, for the view it picks rather than the mode */
  .mode-tabs.view-tabs{ --switch-pad:3px; --switch-radius:8px; margin:0; border-radius:11px; }
  .view-tabs .mode-tab{ min-height:30px; padding:0 14px; font-size:13px; }
  /* Mode gating: .chords-only marks the chord affordances living outside the
     [hidden] chords panel (options, grid footer, tips) plus the chords half of
     mode-gated copy; .scales-only is the scales half of that copy. Both hides
     are written against the body so they outrank the display a switch or a wrap
     sets for itself — the mode a control belongs to beats the shape it takes. */
  body:not(.scales-mode) .scales-only{ display:none; }
  body.scales-mode .chords-only{ display:none; }
  /* A switch reads as a move sideways: the arriving builder slides in from the
     side its own tab sits on while the panels' shared box eases between the two
     heights, and the sheet below fades back in as its height follows (both eased
     from js/app.js). The view switch borrows the sheet half of that. Class-driven
     rather than :not([hidden]) so it plays on a switch and not on load, and one
     keyframe serves every piece — the direction is a per-element custom property,
     absent (so: a plain fade) on the sheet. */
  .switch-in{ animation:switch-in .3s cubic-bezier(.2,.7,.2,1); }
  #chordsPanel.switch-in{ --switch-from:-14px; }
  #scalesPanel.switch-in{ --switch-from:14px; }
  /* opacity lands well before the slide does: nothing that replaces content
     outright should spend the whole animation being read through */
  @keyframes switch-in{
    from{ opacity:0; transform:translateX(var(--switch-from,0)); }
    55%{ opacity:1; }
  }
  @media (prefers-reduced-motion:reduce){
    .switch-in{ animation:none; }
    .mode-tab-thumb{ transition:none; }
  }
  .scale-field{ min-width:0; }
  /* the input, its focus ring and the dropdown container live with the song
     search — same suggestion-dropdown language, one definition */
  .typeahead-text{ flex-shrink:0; font-weight:700; color:var(--ink); white-space:nowrap; }
  .typeahead-desc{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); font-size:12.5px; }
  .scale-hint code{ font-family:inherit; font-size:inherit; font-weight:600; color:var(--ink); }
  /* example chips join the app's small-button family so they read as clickable */
  .scale-hint-examples{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .scale-example{ min-height:0; height:24px; padding:0 10px; border-radius:7px; font-size:12px; font-weight:650; line-height:1; }
  /* position chooser: wider tiles than chord voicings, no masonry */
  .position-modal .voicing-modal-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .position-caption{ display:block; padding:4px 0 6px; font-size:11.5px; font-weight:600; color:var(--ink-soft); }
  .voicing-choice.selected .position-caption{ color:var(--accent); }

  .site-footer{
    max-width:880px; margin:40px auto 0; padding-top:14px; border-top:1px solid var(--card-border);
    font-size:12px; color:var(--ink-soft);
  }
  .site-footer p{ margin:0; }
  .site-footer p:not([hidden]) + p{ margin-top:6px; }
  .site-footer-free{ font-size:13px; color:var(--ink); }
  .site-footer-free strong{ font-weight:700; color:var(--accent); }
  .site-footer-meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 24px; }
  .site-footer a{ color:var(--accent); text-decoration:none; }
  .site-footer a:hover{ text-decoration:underline; }
  .site-footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

  /* --- cross-promo card for the sibling harmonica app --- */
  .harp-promo{
    display:flex; align-items:center; gap:16px;
    max-width:880px; margin:22px auto 0; padding:16px 18px;
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:16px;
    box-shadow:var(--panel-shadow);
    text-decoration:none; color:inherit;
    transition:border-color var(--hover-fade), background var(--hover-fade);
  }
  .harp-promo:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--card-border)); }
  .harp-promo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .harp-promo-mark{
    display:grid; place-items:center; flex:0 0 auto; width:52px; height:52px;
    color:var(--accent); background:var(--accent-soft);
    border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:13px;
  }
  .harp-promo-mark svg{ width:34px; height:34px; }
  .harp-promo-body{ flex:1 1 auto; min-width:0; }
  .harp-promo-teaser{
    display:block; font-family:var(--heading-font); font-size:18px; font-weight:600;
    line-height:1.15; color:var(--ink);
  }
  .harp-promo-desc{ display:block; margin-top:5px; font-size:13px; color:var(--ink-soft); }
  .harp-promo-desc b{ color:var(--ink); font-weight:600; }
  .harp-promo-go{
    flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
    color:var(--accent); background:var(--accent-soft);
    border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
    transition:background var(--hover-fade), color var(--hover-fade), border-color var(--hover-fade);
  }
  .harp-promo-go svg{ width:17px; height:17px; }
  .harp-promo:hover .harp-promo-go{ background:var(--accent); color:var(--btn-fg); border-color:var(--accent); }

  /* --- custom instrument select --- */
  .tuning-select{ position:relative; font-family:inherit; }
  .tuning-select-trigger{
    display:flex; align-items:center; gap:10px;
    min-width:210px; height:var(--builder-control-h); padding:0 14px 0 10px; font-size:14px; font-family:inherit;
    border:1px solid var(--control-border); border-radius:10px;
    background:var(--card-bg); color:var(--ink);
    cursor:pointer; text-align:left;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .15s ease;
  }
  .tuning-select-trigger:hover{ background:var(--card-bg); color:var(--ink); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 3px 8px rgba(41,38,33,.12); }
  .tuning-select-trigger:active{ transform:translateY(0) scale(.98); }
  .tuning-select-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .tuning-select.open .tuning-select-trigger{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
  .tuning-select-icon{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:26px; height:26px; color:var(--accent);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .tuning-select-icon svg{ width:100%; height:100%; display:block; }
  .tuning-select.open .tuning-select-trigger > .tuning-select-icon{ transform:rotate(-10deg) scale(1.1); }
  .tuning-select-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
  .tuning-select-name{ font-weight:700; }
  .tuning-select-tuning{ font-size:12px; font-weight:500; letter-spacing:.07em; color:var(--ink-soft); }
  .tuning-select-chevron{
    margin-left:auto; color:var(--ink-soft); flex-shrink:0;
    transition:transform .25s cubic-bezier(.4,0,.2,1), color .2s ease;
  }
  .tuning-select.open .tuning-select-chevron{ transform:rotate(180deg); color:var(--accent); }

  .tuning-select-menu{
    position:absolute; top:calc(100% + 8px); left:0; min-width:100%; z-index:20;
    list-style:none; margin:0; padding:6px;
    background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
    box-shadow:var(--shadow-pop);
    transform-origin:top left;
    opacity:0; visibility:hidden; transform:translateY(-6px) scale(.96);
    transition:opacity .16s ease, transform .2s cubic-bezier(.34,1.56,.64,1), visibility .2s;
  }
  .tuning-select.open .tuning-select-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .tuning-select-option{
    --delay:0s;
    display:flex; align-items:center; gap:10px;
    padding:7px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
    opacity:0; transform:translateY(-4px);
    transition:opacity .16s ease var(--delay), transform .16s ease var(--delay), background-color .15s ease;
  }
  .tuning-select.open .tuning-select-option{ opacity:1; transform:translateY(0); }
  .tuning-select-menu .tuning-select-option:nth-child(1){ --delay:.02s; }
  .tuning-select-menu .tuning-select-option:nth-child(2){ --delay:.04s; }
  .tuning-select-menu .tuning-select-option:nth-child(3){ --delay:.06s; }
  .tuning-select-menu .tuning-select-option:nth-child(4){ --delay:.08s; }
  .tuning-select-menu .tuning-select-option:nth-child(5){ --delay:.10s; }
  .tuning-select-menu .tuning-select-option:nth-child(6){ --delay:.12s; }
  .tuning-select-option .tuning-select-icon{ width:22px; height:22px; color:var(--ink-soft); transition:color .15s ease; }
  .tuning-select-option:hover, .tuning-select-option.active{ background:var(--page-bg); }
  .tuning-select-option:hover .tuning-select-icon, .tuning-select-option.active .tuning-select-icon{ color:var(--accent); }
  .tuning-select-option .tuning-select-name{ font-weight:700; font-size:15px; color:var(--ink); }
  .tuning-select-option .tuning-select-tuning{ font-size:12px; color:var(--ink-soft); }
  .tuning-select-option .check{
    margin-left:auto; flex-shrink:0; color:var(--accent);
    opacity:0; transform:scale(.4); transition:opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .tuning-select-option.selected .check{ opacity:1; transform:scale(1); }

  button{
    min-height:40px; padding:9px 15px; font-size:13.5px; font-weight:650; font-family:inherit;
    background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bg); border-radius:9px;
    cursor:pointer;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
    /* rapid taps (voicing arrows) must not trigger double-tap zoom */
    touch-action:manipulation;
  }
  button:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
  button.secondary{ background:var(--card-bg); color:var(--ink); border:1px solid var(--control-border); }
  button.secondary:hover{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
  button:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 26%,transparent); outline-offset:2px; }

  /* --- columns stepper --- */
  .stepper{
    display:inline-flex; align-items:center; height:34px;
    border:1px solid var(--control-border); border-radius:8px;
    background:var(--card-bg); overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .stepper:hover{ border-color:var(--accent); }
  .stepper:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
  .stepper-label{ font-size:15px; color:var(--ink-soft); padding:0 4px 0 12px; white-space:nowrap; }
  .stepper-btn{
    display:flex; align-items:center; justify-content:center;
    min-height:0; width:30px; height:100%; padding:0; border:none; background:transparent; color:var(--ink);
    font-size:16px; font-family:inherit; line-height:1; cursor:pointer;
    transition:background-color .15s ease, color .15s ease, transform .1s ease;
  }
  .stepper-btn:hover:not(:disabled){ background:var(--page-bg); color:var(--accent); }
  .stepper-btn:active:not(:disabled){ transform:scale(.85); }
  .stepper-btn:disabled{ color:var(--card-border); cursor:not-allowed; }
  .stepper-btn:disabled:hover{ background:transparent; border-color:transparent; }
  .stepper-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  .stepper-value{
    min-width:44px; height:100%; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; color:var(--ink);
    border-left:1px solid var(--card-border); border-right:1px solid var(--card-border);
  }
  .stepper-value.bump{ animation:stepper-bump .3s cubic-bezier(.34,1.56,.64,1); }
  @keyframes stepper-bump{
    0%{ transform:scale(1); color:var(--ink); }
    40%{ transform:scale(1.3); color:var(--accent); }
    100%{ transform:scale(1); color:var(--ink); }
  }

  /* --- transpose control (upright stepper against the chord field) --- */
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  /* as wide as one of its buttons is tall, so the three cells read as a stack
     of squares rather than as a second input beside the field */
  .stepper-vert{
    flex-direction:column; flex-shrink:0; align-self:stretch;
    width:28px; height:auto; border-radius:8px;
  }
  .stepper-vert .stepper-btn{ flex:1 1 0; width:100%; height:auto; min-height:0; font-size:15px; }
  .stepper-vert .stepper-value{
    flex:0 0 auto; width:100%; min-width:0; height:auto; padding:3px 0;
    font-size:11px; border-left:none; border-right:none;
    border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
  }
  .stepper-sm{ height:28px; border-radius:7px; }
  .stepper-sm .stepper-label{ font-size:12px; padding-left:10px; }
  .stepper-sm .stepper-btn{ width:27px; font-size:14px; }
  .stepper-sm .stepper-value{ min-width:36px; font-size:12.5px; }
  button.stepper-value{
    min-height:0; padding:0; background:transparent; color:var(--ink);
    border-top:none; border-bottom:none; border-radius:0; cursor:default;
    font-family:inherit; transition:color .15s ease, background-color .15s ease;
  }
  button.stepper-value:hover{ background:transparent; }
  button.stepper-value:disabled{ color:var(--ink); }
  button.stepper-value:not(:disabled){ color:var(--accent); cursor:pointer; }
  button.stepper-value:not(:disabled):hover{ background:var(--page-bg); text-decoration:underline; text-underline-offset:3px; }
  button.stepper-value:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

  .switch{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--ink-soft); cursor:pointer; user-select:none; }
  .switch input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
  .switch-track{
    position:relative; width:38px; height:22px; border-radius:11px; flex-shrink:0;
    background:var(--ink-soft); opacity:.45; transition:background .2s ease, opacity .2s ease;
  }
  .switch-thumb{
    position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s ease;
  }
  .switch input:checked ~ .switch-track{ background:var(--accent); opacity:1; }
  .switch input:checked ~ .switch-track .switch-thumb{ transform:translateX(16px); }
  .switch input:focus-visible ~ .switch-track{ outline:2px solid var(--accent); outline-offset:2px; }
  .switch:hover .switch-track{ opacity:.7; }
  .switch input:checked:hover ~ .switch-track{ opacity:.85; }
  .switch-side-icon{ width:16px; height:16px; flex-shrink:0; opacity:.4; transition:opacity .2s ease; }
  .switch input:not(:checked) ~ .icon-layout-grid,
  .switch input:checked ~ .icon-layout-masonry{ opacity:1; color:var(--accent); }
  /* the worked example a switch carries in its own label — quieter than the
     setting it stands for, and never broken across the arrow */
  .switch-eg{ font-size:.86em; opacity:.8; margin-left:.15em; white-space:nowrap; }
  /* an options row is one line: wrapped, the label loses the column's rhythm and
     the toggle floats against two lines of text it no longer reads as labelling.
     On a narrow phone the longest of them gives way by a size, never a line. */
  .options-group .switch{ white-space:nowrap; }
  @media (max-width:400px){ .options-group .switch{ font-size:14px; } }
  /* compact variant for the slim page-arrangement rows */
  .switch-sm{ font-size:11.5px; gap:6px; }
  .switch-sm .switch-track{ width:28px; height:16px; border-radius:8px; }
  .switch-sm .switch-thumb{ width:12px; height:12px; }
  .switch-sm input:checked ~ .switch-track .switch-thumb{ transform:translateX(12px); }
  .switch-sm .switch-side-icon{ width:13px; height:13px; }
  /* applied by setLabelText() while a label's width animates between texts */
  .label-swap{ overflow:hidden; white-space:nowrap; transition:width .28s cubic-bezier(.4,0,.2,1); }
  @media (prefers-reduced-motion:reduce){ .label-swap{ transition:none; } }

  .switch-wrap{ position:relative; display:inline-flex; align-items:center; gap:6px; }
  /* an option only some charts can answer collapses rather than sits dead */
  .switch-wrap[hidden]{ display:none; }
  .info-btn{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    min-height:24px; width:24px; height:24px; padding:0; border-radius:50%;
    border:1px solid var(--control-border); background:transparent; color:var(--ink-soft);
    font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:11px; line-height:1;
    cursor:pointer; transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  }
  .info-btn:hover, .info-btn:focus-visible, .switch-wrap.open .info-btn{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
  .info-popover{
    position:absolute; top:calc(100% + 8px); left:0; z-index:20; width:240px;
    padding:10px 12px; font-size:14px; line-height:1.5; text-align:left; font-weight:400;
    background:var(--surface); color:var(--ink); border:1px solid var(--card-border); border-radius:10px;
    box-shadow:var(--shadow-pop);
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .switch-wrap.open .info-popover{ opacity:1; visibility:visible; transform:translateY(0); }
  .info-popover p{ margin:0; }
  .info-popover a{ color:var(--accent); font-weight:650; text-decoration:none; }
  .info-popover a:hover{ text-decoration:underline; text-underline-offset:2px; }
  .info-popover a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .threshold-example{ display:flex; align-items:flex-start; gap:10px; margin-top:9px; }
  /* the example diagrams are drawn in printed-paper ink, so they sit on paper
     chips whatever ground the popover has */
  .threshold-example figure{
    margin:0; text-align:center;
    background:#fffcf7; border:1px solid #ddd3c5; border-radius:8px; padding:5px 4px 2px;
  }
  body.bw-mode .threshold-example figure{ background:#fff; border-color:#000; }
  .threshold-example figcaption{ font-size:11px; font-weight:600; color:#292621; margin-bottom:3px; }
  .threshold-example svg{ width:88px; height:auto; display:block; margin:0 auto; }
  /* the tiny example scale would render the 10-unit numbers unreadable */
  .threshold-example .fret-num{ font-size:20px; opacity:.85; transform:translateY(3px); }

  .tip-emoji{ font-size:15px; flex-shrink:0; margin-top:1px; }
  .tip-pointer-text{ display:block; }
  .tip-touch-text{ display:none; }
  @media (hover: none){
    .tip-pointer-text{ display:none; }
    .tip-touch-text{ display:inline; }
  }
  /* solid CTA colours: a translucent fill sinks into the dark backdrop */
  .tip-fab{
    position:fixed; right:20px; bottom:20px; z-index:50;
    min-height:46px; width:46px; height:46px; padding:0; border:none; border-radius:50%;
    background:var(--btn-bg); color:var(--btn-fg);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px -8px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
    cursor:pointer; transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }
  .tip-fab svg{ width:21px; height:21px; }
  .tip-fab:hover{ background:var(--btn-bg); filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.24); }
  .tip-fab:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--accent-soft), 0 10px 24px -8px rgba(0,0,0,.45); }
  .tip-fab[aria-expanded="true"]{ box-shadow:0 0 0 4px var(--accent-soft), 0 10px 24px -8px rgba(0,0,0,.45); }
  .tip-toast{
    position:fixed; right:20px; bottom:78px; z-index:50; width:300px; max-width:calc(100vw - 32px);
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px;
    padding:13px 14px 12px; box-shadow:0 18px 40px -18px rgba(41,38,33,.5), 0 3px 10px rgba(41,38,33,.14);
    transform-origin:bottom right;
    animation:tip-toast-in .22s cubic-bezier(.34,1.56,.64,1);
  }
  .tip-toast[hidden]{ display:none; }
  @keyframes tip-toast-in{ from{ opacity:0; transform:translateY(8px) scale(.94); } }
  .tip-toast-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .tip-toast-kicker{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }
  .tip-toast-close{
    flex-shrink:0; min-height:22px; width:22px; height:22px; padding:0; margin:-2px -2px 0 0; border:none; background:transparent;
    color:var(--ink-soft); font-size:16px; line-height:1; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:color .15s ease, background-color .15s ease;
  }
  .tip-toast-close:hover, .tip-toast-close:focus-visible{ color:var(--accent); background:var(--page-bg); }
  .tip-toast-body{
    display:flex; align-items:flex-start; gap:8px; min-height:36px;
    font-size:13.5px; color:var(--ink); line-height:1.45;
    transition:opacity .16s ease, transform .16s ease;
  }
  .tip-toast-body.tip-anim-out{ opacity:0; transform:translateX(-6px); }
  .tip-toast-body.tip-anim-in-start{ transition:none; opacity:0; transform:translateX(6px); }
  .tip-toast-foot{ display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--card-border); }
  .tip-toast-actions{ display:flex; align-items:center; gap:14px; }
  .tip-toast-next{
    display:inline-flex; align-items:center; gap:5px; min-height:0; padding:2px 0; border:none; background:transparent;
    color:var(--accent-strong); font-size:12.5px; font-weight:700; cursor:pointer; transition:opacity .15s ease;
  }
  .tip-toast-next svg{ width:13px; height:13px; }
  .tip-toast-next:hover{ background:transparent; border-color:transparent; opacity:.72; }
  .tip-toast-next:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .tip-toast-showall{
    min-height:0; padding:2px 0; border:none; background:transparent;
    color:var(--accent-strong); font-size:12.5px; font-weight:700; cursor:pointer; transition:opacity .15s ease;
  }
  .tip-toast-showall:hover{ background:transparent; border-color:transparent; opacity:.72; }
  .tip-toast-showall:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .tip-toast-optout{
    align-self:flex-end;
    min-height:0; padding:2px 0; border:none; background:transparent; color:var(--ink-soft); font-size:11.5px;
    text-decoration:underline; text-underline-offset:2px; cursor:pointer; transition:color .15s ease;
  }
  .tip-toast-optout:hover, .tip-toast-optout:focus-visible{ background:transparent; border-color:transparent; color:var(--accent); }
  .tip-toast-optout:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){
    .tip-toast{ animation:none; }
    .tip-toast-body{ transition:none; }
  }
  .tips-modal-backdrop{
    position:fixed; inset:0; z-index:60; padding:24px;
    display:flex; align-items:center; justify-content:center;
    background:var(--scrim);
    animation:voicing-backdrop-in .15s ease;
  }
  .tips-modal-backdrop[hidden]{ display:none; }
  .tips-modal{
    display:flex; flex-direction:column; width:100%; max-width:440px;
    max-height:min(calc(100vh - 48px), 640px);
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
    box-shadow:0 24px 60px -18px rgba(41,38,33,.5), 0 4px 14px rgba(41,38,33,.18);
    animation:voicing-modal-in .2s cubic-bezier(.34,1.56,.64,1);
  }
  .tips-modal-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 18px 10px;
  }
  .tips-modal-head h2{
    margin:0; font-family:var(--heading-font); font-weight:600; font-size:20px; color:var(--accent);
  }
  .tips-modal-close{
    min-height:28px; width:28px; height:28px; padding:0; border:none; border-radius:50%; flex-shrink:0;
    background:transparent; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s ease, background-color .15s ease;
  }
  .tips-modal-close:hover, .tips-modal-close:focus-visible{ color:var(--accent); background:var(--page-bg); }
  .tips-modal-list{
    margin:0; list-style:none; overflow-y:auto; padding:4px 18px 18px;
  }
  .tips-modal-item{
    display:flex; align-items:flex-start; gap:10px; padding:11px 0;
    font-size:14px; color:var(--ink); line-height:1.45;
    border-top:1px solid var(--page-bg);
  }
  .tips-modal-item:first-child{ border-top:none; }
  .tips-modal-item .tip-emoji{ font-size:16px; }
  @media (prefers-reduced-motion: reduce){
    .tips-modal-backdrop, .tips-modal{ animation:none; }
  }
  /* --- reverse song search (find songs that use the current chords) --- */
  .rsearch-open-btn{
    display:inline-flex; align-items:center; gap:6px;
    min-height:0; height:28px; padding:0 11px; border-radius:7px;
    font-size:12px; font-weight:650; line-height:1;
  }
  .rsearch-open-btn[hidden]{ display:none; }
  /* the chip stays lit while the field it revealed is open, so it reads as the
     field's heading rather than a button that did nothing */
  .rsearch-open-btn[aria-expanded="true"]{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
  .rsearch-open-btn svg{ width:12px; height:12px; flex-shrink:0; }
  .rsearch-backdrop{
    position:fixed; inset:0; z-index:60; padding:24px;
    display:flex; align-items:center; justify-content:center;
    background:var(--scrim);
    animation:voicing-backdrop-in .15s ease;
  }
  .rsearch-backdrop[hidden]{ display:none; }
  .rsearch-modal{
    display:flex; flex-direction:column; width:100%; max-width:520px;
    max-height:min(calc(100vh - 48px), 680px);
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
    box-shadow:0 24px 60px -18px rgba(41,38,33,.5), 0 4px 14px rgba(41,38,33,.18);
    animation:voicing-modal-in .2s cubic-bezier(.34,1.56,.64,1);
  }
  .rsearch-head, .rsearch-field, .rsearch-options, .rsearch-note, .rsearch-footer{ flex-shrink:0; }
  .rsearch-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 18px 8px;
  }
  .rsearch-head h2{
    margin:0; font-family:var(--heading-font); font-weight:600; font-size:20px; color:var(--accent);
  }
  .rsearch-field{ padding:2px 18px 12px; }
  .rsearch-field-row{ display:flex; gap:8px; }
  .rsearch-field-row .custom-chord-notes-input{ flex:1 1 auto; min-width:0; }
  .rsearch-field-row button{ height:var(--control-h); flex-shrink:0; border-radius:10px; }
  .rsearch-chord-extra{ color:var(--accent); font-weight:650; }
  .rsearch-chord-unmapped{ font-style:italic; opacity:.75; }
  .rsearch-options{
    display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 18px 12px;
    padding:10px 12px; background:var(--page-bg); border-radius:10px;
  }
  .rsearch-options .switch{ font-size:13.5px; }
  .rsearch-note{ margin:0 18px 10px; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); }
  .rsearch-note:empty{ display:none; }
  .spinner{
    width:13px; height:13px; flex-shrink:0; border-radius:50%;
    border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);
    border-top-color:var(--accent);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .rsearch-loading{ flex:1 1 auto; min-height:160px; display:flex; align-items:center; justify-content:center; padding:36px 8px; }
  .rsearch-loading .spinner{ width:22px; height:22px; border-width:2.5px; }
  .rsearch-results{
    display:flex; flex-direction:column;
    flex:1 1 auto; min-height:0; overflow-y:auto;
    margin:0; padding:0 12px 12px; list-style:none;
  }
  .rsearch-results li{ border-top:1px solid var(--page-bg); }
  .rsearch-results li:first-child{ border-top:none; }
  .rsearch-result{
    display:flex; flex-direction:column; align-items:stretch; gap:5px; width:100%;
    min-height:0; padding:10px 8px; border:none; border-radius:10px;
    background:transparent; color:var(--ink); font-family:inherit; font-weight:400;
    text-align:left; cursor:pointer; transition:background-color .15s ease;
  }
  .rsearch-result:hover{ background:var(--page-bg); }
  .rsearch-result:focus-visible{ background:var(--page-bg); outline:2px solid var(--accent); outline-offset:-2px; }
  .rsearch-result-top{ display:flex; align-items:baseline; gap:8px; }
  .rsearch-result-heading{
    flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .rsearch-result-title{ font-size:14.5px; font-weight:650; }
  .rsearch-result-artist{ font-size:13px; color:var(--ink-soft); }
  .rsearch-result-badge{
    flex-shrink:0; padding:2px 8px; border-radius:999px;
    background:var(--accent-soft); color:var(--accent-strong);
    font-size:11.5px; font-weight:650; white-space:nowrap;
  }
  .rsearch-result-badge.is-same{ background:var(--card-bg); border:1px solid var(--control-border); }
  .rsearch-result-chords{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px; color:var(--ink-soft); line-height:1.5; overflow-wrap:anywhere;
  }
  .rsearch-footer{
    display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap;
    padding:9px 18px 13px; border-top:1px solid var(--card-border);
    font-size:11.5px; color:var(--ink-soft);
  }
  @media (prefers-reduced-motion: reduce){
    .rsearch-backdrop, .rsearch-modal{ animation:none; }
    .spinner{ animation:none; }
  }
  .error{ font-size:13px; font-weight:600; color:var(--error); margin:9px 0 0; }
  .error:empty{ display:none; }
  .empty-hint{ font-size:14.5px; font-style:italic; color:var(--ink-soft); margin:6px 0; }
  /* slim page-arrangement controls closing the sheet, fenced off the charts */
  .grid-arrange{
    display:flex; justify-content:flex-end; align-items:center; gap:8px 20px; flex-wrap:wrap;
    margin:18px 0 0; padding-top:10px; border-top:1px solid var(--card-border);
  }
  /* The scales half of that row, centred under the sheet's single card: which
     of the two drawings of the scale the chart carries. Both states are spelled
     out here — .grid-arrange's own display would otherwise outrank the
     .scales-only hide and leave the switch standing in chords mode. */
  .grid-arrange.scale-view-row{ display:none; }
  body.scales-mode .grid-arrange.scale-view-row{ display:flex; justify-content:center; gap:6px 10px; }
  .scale-view-label{ font-size:12.5px; font-weight:650; color:var(--ink-soft); }
  /* narrow screens stretch the mode switch to the full width; this one keeps its
     own so the label stays beside it rather than floating above as a heading */
  .scale-view-row .view-tabs{ width:max-content; }
  /* switch and stepper share one flex cell: a collapsed sibling would still
     get the row's gap, leaving a dangling indent in the right-aligned row */
  .columns-ctl{ display:inline-flex; align-items:center; }
  .columns-reveal{ display:grid; grid-template-columns:0fr; transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1); }
  .columns-reveal.open{ grid-template-columns:1fr; }
  .columns-reveal-inner{ min-width:0; overflow:hidden; visibility:hidden; transition:visibility .28s; }
  .columns-reveal.open .columns-reveal-inner{ visibility:visible; transition:visibility 0s; }
  .columns-reveal .stepper{ margin-left:10px; }
  /* The masonry explanation shows on plain hover, like a title tooltip, but
     rendered by the page — native title bubbles never appear on touch or in
     embedded views. Opens up and right-aligned to stay inside the viewport. */
  .grid-arrange .info-popover{ top:auto; bottom:calc(100% + 8px); left:auto; right:0; transform:translateY(4px); pointer-events:none; }
  .grid-arrange .switch-wrap:hover .info-popover{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:.4s; }
  .grid-arrange .switch-wrap:has(input:focus-visible) .info-popover{ opacity:1; visibility:visible; transform:translateY(0); }
  /* touch has neither hover nor focus-visible heuristics — there, a tap that
     lands focus shows the tooltip instead. It lingers until blur, which is
     the native idiom on touch but would annoy with a mouse, hence the split. */
  @media (hover:none){
    .grid-arrange .switch-wrap:focus-within .info-popover{ opacity:1; visibility:visible; transform:translateY(0); }
  }
  .single-chord-tip{ margin:16px 0 0; text-align:center; font-size:13.5px; color:var(--ink-soft); }
  .single-chord-tip a{ color:var(--accent); font-weight:650; text-decoration:none; }
  .single-chord-tip a:hover{ text-decoration:underline; text-underline-offset:2px; }
  .single-chord-tip a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,240px));
    /* align-content:start keeps the rows packed while the mode switch eases the
       grid's height — stretched tracks would drift the cards apart mid-swap */
    justify-content:center; align-content:start; gap:14px; align-items:start;
  }
  .grid .empty-hint{ grid-column:1/-1; }
  .grid.masonry{
    display:flex; align-items:flex-start; justify-content:center; gap:16px;
  }
  .masonry-col{
    display:flex; flex-direction:column; gap:16px; min-width:0; flex:1 1 0;
  }
  .grid.masonry .masonry-col{ max-width:240px; }
  .card {
    position:relative;
    width:100%; max-width:240px; margin:0 auto;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
    padding:14px 10px 13px; text-align:center; overflow:hidden;
    box-shadow:0 2px 2px rgba(41,38,33,.02),0 10px 24px -24px rgba(41,38,33,.7);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  .card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 34%,var(--card-border)); box-shadow:0 12px 28px -22px rgba(41,38,33,.75); }
  .grid.no-border .card,
  .grid.no-border .card:hover{ border-color:transparent; box-shadow:none; }
  /* side padding must clear the corner buttons — it is also the budget fitCardTitles() shrinks long names into */
  .chord-title-row{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; margin-bottom:1px; padding:0 33px; }
  /* the sheet heading's own pairing, card-sized — it clears the corner buttons
     by sitting below the title row, so it may use the card's full width */
  .card-sub{
    margin:0 0 6px; font-size:9.5px; font-weight:700; line-height:1.2;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
    /* shrunk to fit first (see fitCardTitles); the ellipsis is what's left for
       a hand-set column count too narrow for even the smallest size */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* switched off, the line leaves no gap of its own above the diagram */
  .card-sub:empty{ display:none; }
  .card h2 { font-family:var(--heading-font); font-weight:600; font-size:22px; margin:0; color:var(--accent); cursor:pointer; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity var(--hover-fade) ease; }
  .card h2:hover { opacity:.72; }
  /* :not(:focus-visible) keeps the rule inert in browsers without :focus-visible,
     so their keyboard users keep the default ring */
  .card h2:focus:not(:focus-visible) { outline:none; }
  .card h2:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 26%,transparent); outline-offset:2px; border-radius:8px; }
  .play-chord-btn{
    position:absolute; top:9px; left:9px; min-height:32px; flex:0 0 32px; width:32px; height:32px; padding:0; border:none; border-radius:50%; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
    transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease,opacity .18s ease,transform .18s ease;
    cursor:pointer;
  }
  .play-chord-btn:hover{ background:var(--accent); color:#fff; border-color:transparent; }
  .play-icon-bars rect{ transform-origin:center; animation:play-bar-pulse .9s ease-in-out infinite; }
  .play-icon-bars rect:nth-child(1){ animation-delay:0s; }
  .play-icon-bars rect:nth-child(2){ animation-delay:.15s; }
  .play-icon-bars rect:nth-child(3){ animation-delay:.3s; }
  @keyframes play-bar-pulse{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
  @media (prefers-reduced-motion: reduce){ .play-icon-bars rect{ animation:none; } }
  .card svg { display:block; max-width:100%; height:auto; margin:0 auto; }
  /* One scale = one larger sheet tile; the grid narrows to that single track.
     .card.scale-card so the wider cap survives the .card rules above. */
  body.scales-mode .grid{ grid-template-columns:minmax(0,420px); }
  .card.scale-card{ max-width:420px; }
  .scale-card .diagram-slot svg{ width:100%; }
  /* the whole neck is a far wider picture — the single track widens with it */
  body.scales-mode.neck-view .grid{ grid-template-columns:minmax(0,760px); }
  .card.scale-card.neck-card{ max-width:760px; }
  /* Below that width the frets would shrink past reading: keep the neck at a
     legible size and let the card scroll it sideways instead. */
  @media screen and (max-width:700px){
    .neck-card .diagram-slot{ overflow-x:auto; }
    .neck-card .diagram-slot svg{ width:660px; max-width:none; }
  }
  .scale-notes{ font-size:12px; color:var(--ink-soft); margin:6px 0 0; }
  .diagram-slot{ position:relative; }
  .diagram-slot.voicing-anim{ overflow:hidden; }
  .diagram-ghost{ position:absolute; inset:0; pointer-events:none; }
  .omit-note{ font-size:10px; font-style:italic; color:var(--ink-soft); margin:4px 0 0; }
  .note-dot { cursor:pointer; transition:opacity var(--hover-fade) ease; }
  .note-dot:hover { opacity:.72; }
  .note-dot:focus:not(:focus-visible) { outline:none; }
  /* keyboard focus: the ring is the circle's own edge — round, accent-colored */
  .note-dot:focus-visible { outline:none; stroke:var(--accent); stroke-width:3; }
  /* A note lights up while it is sounding: the dot swells into the accent and
     throws a halo, then falls back over the length JS gives it (see audio.js),
     so a scale run reads as one light travelling up the box rather than the
     whole box coming on at once. */
  .note-dot.is-sounding{
    transform-box:fill-box; transform-origin:center;
    animation:note-lit var(--lit-ms,560ms) ease-out both;
  }
  @keyframes note-lit{
    from{ filter:drop-shadow(0 0 0 transparent); }
    /* struck, not faded in — the light has to land with the note */
    14%{
      fill:var(--accent); stroke:var(--accent); transform:scale(1.17);
      filter:drop-shadow(0 0 5px var(--accent));
    }
    to{ filter:drop-shadow(0 0 5px transparent); }
  }
  @media (prefers-reduced-motion:reduce){
    /* the light is information, not decoration: hold it steady instead of
       dropping it */
    .note-dot.is-sounding{
      animation:none; fill:var(--accent); stroke:var(--accent);
    }
  }
  .card-menu-btn{
    position:absolute; top:9px; right:9px; min-height:32px; width:32px; height:32px;
    border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:none; color:var(--accent-strong);
    transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease,opacity .18s ease,transform .18s ease,width .2s ease;
    cursor:pointer; font-size:10px; overflow:hidden;
  }
  .card-menu-btn:hover, .card-menu-btn[aria-expanded="true"]{ background:var(--accent); color:#fff; border-color:transparent; }
  .card-menu-btn.is-flash{ width:64px; }
  .card-menu-btn-icon, .card-menu-btn-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    transition:opacity .15s ease, transform .15s ease;
  }
  .card-menu-btn-icon{ opacity:1; transform:scale(1); }
  .card-menu-btn-label{ opacity:0; transform:scale(.7); font-size:11px; font-weight:600; white-space:nowrap; }
  .card-menu-btn.is-flash .card-menu-btn-icon{ opacity:0; transform:scale(.7); }
  .card-menu-btn.is-flash .card-menu-btn-label{ opacity:1; transform:scale(1); }
  .card-menu-btn svg{ width:16px; height:16px; }
  .card-menu{
    position:fixed; z-index:70; min-width:212px; max-width:calc(100vw - 16px); padding:5px;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px;
    box-shadow:0 18px 40px -18px rgba(41,38,33,.5), 0 3px 10px rgba(41,38,33,.14);
    animation:card-menu-in .14s ease;
  }
  .card-menu[hidden]{ display:none; }
  @keyframes card-menu-in{ from{ opacity:0; transform:translateY(4px) scale(.98); } }
  .card-menu-item{
    display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:7px 10px;
    border:none; border-radius:8px; background:transparent; color:var(--ink);
    font-family:inherit; font-size:13.5px; font-weight:500; text-align:left; text-decoration:none; cursor:pointer;
  }
  .card-menu-item:hover, .card-menu-item:focus-visible{ background:var(--accent-soft); color:var(--accent-strong); outline:none; }
  .card-menu-item svg{ width:15px; height:15px; flex:0 0 15px; stroke:currentColor; fill:none; color:var(--accent-strong); }
  .card-menu-sep{ margin:5px 8px; border:none; border-top:1px solid var(--card-border); }
  .card.has-alt-voicings{ padding-bottom:45px; }
  .voicing-nav{
    position:absolute; left:10px; right:10px; bottom:5px;
    display:flex; align-items:center; justify-content:center; gap:5px; padding-top:5px;
    border-top:1px solid var(--card-border);
    transition:opacity .18s ease;
  }
  .voicing-nav-btn{
    min-height:28px; width:28px; height:28px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease,border-color var(--hover-fade) ease,transform .16s ease;
  }
  .voicing-nav-btn:hover{
    background:color-mix(in srgb,var(--accent) 9%,var(--card-bg));
    color:var(--accent-strong); border-color:transparent; transform:translateY(-1px);
  }
  .voicing-nav-btn:active{ transform:translateY(0) scale(.94); }
  .voicing-nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .voicing-nav-count{ font-size:11.5px; color:var(--ink-soft); min-width:26px; text-align:center; }
  body.card-controls-hidden .play-chord-btn,
  body.card-controls-hidden .card-menu-btn,
  body.card-controls-hidden .voicing-nav{ display:none; }
  body.card-controls-hidden .card.has-alt-voicings{ padding-bottom:13px; }
  body.card-controls-hidden .card:hover{ transform:none; border-color:var(--card-border); box-shadow:0 2px 2px rgba(41,38,33,.02),0 10px 24px -24px rgba(41,38,33,.7); }
  body.card-controls-hidden .grid.no-border .card:hover{ border-color:transparent; box-shadow:none; }
  button.voicing-nav-count{
    min-height:28px; height:28px; padding:0 10px; border:none; border-radius:999px;
    background:var(--accent-soft); color:var(--accent); font-family:inherit; font-weight:600; cursor:pointer;
    transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease,transform .16s ease;
  }
  button.voicing-nav-count:hover{ background:var(--accent); color:#fff; }
  button.voicing-nav-count:active{ transform:scale(.97); }
  button.voicing-nav-count:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  /* expanded cards keep their voicing index visible (and printable) */
  .voicing-nav-static{ opacity:1; }

  .voicing-modal-backdrop{
    position:fixed; inset:0; z-index:60; padding:24px;
    display:flex; align-items:center; justify-content:center;
    background:var(--scrim);
    animation:voicing-backdrop-in .15s ease;
  }
  .voicing-modal-backdrop[hidden]{ display:none; }
  @keyframes voicing-backdrop-in{ from{ opacity:0; } }
  .voicing-modal{
    /* 760px keeps the masonry switch and both steppers on one controls row */
    display:flex; flex-direction:column; width:100%; max-width:760px;
    max-height:min(calc(100vh - 48px), 940px);
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
    box-shadow:0 24px 60px -18px rgba(41,38,33,.5), 0 4px 14px rgba(41,38,33,.18);
    animation:voicing-modal-in .2s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes voicing-modal-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } }
  .voicing-modal-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 18px 10px;
  }
  .voicing-modal-head h2{
    margin:0; font-family:var(--heading-font); font-weight:600; font-size:20px; color:var(--accent);
  }
  .voicing-modal-close{
    min-height:28px; width:28px; height:28px; padding:0; border:none; border-radius:50%; flex-shrink:0;
    background:transparent; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s ease, background-color .15s ease;
  }
  .voicing-modal-close:hover, .voicing-modal-close:focus-visible{ color:var(--accent); background:var(--page-bg); }
  .voicing-modal-controls{
    display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap;
    padding:0 18px 12px; border-bottom:1px solid var(--card-border);
  }
  .voicing-modal-grid{
    overflow-y:auto; padding:12px 18px 14px;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:10px; align-items:start;
  }
  .voicing-modal-grid.masonry{ display:flex; align-items:flex-start; gap:10px; }
  .voicing-modal-grid .masonry-col{ gap:10px; }
  .voicing-modal-grid .empty-hint{ grid-column:1/-1; }
  /* mirrors the page's .grid-arrange: the tile-layout switch sits below the
     chords, above the footer's dividing border */
  .voicing-modal-arrange{ display:flex; justify-content:flex-end; padding:0 18px 10px; }
  .voicing-choice-wrap{ position:relative; }
  .voicing-choice{
    display:block; width:100%;
    position:relative; padding:42px 2px 2px; border:1px solid var(--card-border); border-radius:10px;
    background:var(--card-bg); color:var(--ink); cursor:pointer;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .16s ease;
  }
  .voicing-choice:hover{
    background:color-mix(in srgb,var(--accent) 6%,var(--card-bg));
    color:var(--ink); border-color:color-mix(in srgb,var(--accent) 55%,var(--card-border));
    transform:translateY(-1px); box-shadow:0 6px 18px -14px rgba(41,38,33,.55);
  }
  .voicing-choice:active{ transform:translateY(0) scale(.99); }
  .voicing-choice:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .voicing-choice.selected{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
  .voicing-choice svg{ display:block; width:100%; height:auto; }
  /* play top-left, index top-right — same corner language as the sheet's cards */
  .voicing-choice-index{
    position:absolute; top:6px; right:10px; height:32px; display:inline-flex; align-items:center;
    font-size:10.5px; font-weight:700; color:var(--ink-soft);
  }
  .voicing-choice.selected .voicing-choice-index{ color:var(--accent); }
  .voicing-choice-play{
    position:absolute; top:6px; left:6px; min-height:32px; width:32px; height:32px; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    cursor:pointer; transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease,opacity .18s ease,transform .18s ease;
  }
  .voicing-choice-play:hover{ background:var(--accent); color:#fff; border-color:transparent; }
  .voicing-choice-play:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .voicing-modal-footer{
    display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap;
    padding:10px 18px 14px; border-top:1px solid var(--card-border);
  }
  .voicing-modal-hint{ font-size:12.5px; color:var(--ink-soft); }
  .voicing-modal-open-all{
    display:inline-flex; align-items:center; gap:5px; margin-left:auto;
    font-size:12.5px; font-weight:650; color:var(--accent); text-decoration:none; white-space:nowrap;
  }
  .voicing-modal-open-all[hidden]{ display:none; }
  .voicing-modal-open-all:hover{ text-decoration:underline; text-underline-offset:2px; }
  .voicing-modal-open-all:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .voicing-modal-open-all svg{ width:13px; height:13px; flex-shrink:0; }
  .voicing-modal-open-all code{ font-family:inherit; font-weight:750; }
  /* --- custom chord diagram (search fingerings for typed notes, not a chord name) --- */
  .custom-chord-field{ padding:0 18px; margin:2px 0 8px; }
  .custom-chord-notes-input{
    display:block; width:100%; height:var(--control-h); padding:0 12px;
    font-size:15px; font-family:inherit;
    border:1px solid var(--control-border); border-radius:10px;
    background:var(--card-bg); color:var(--ink);
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .custom-chord-notes-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }

  /* --- name a chord from the fretboard (inverse of the custom-chord search) --- */
  .fb-hint{ margin:0 18px 10px; font-size:13px; color:var(--ink-soft); }
  .fb-hint-o, .fb-hint-x{ font-weight:800; color:var(--accent); }
  /* no top padding so the sticky readout pins flush — board can't bleed above it */
  .fb-body{
    display:flex; gap:20px 26px; flex-wrap:wrap; align-items:flex-start;
    overflow-y:auto; padding:0 18px 4px;
  }
  .fb-board-col{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .fb-board{ width:100%; max-width:230px; }
  .fb-input{ display:block; width:100%; height:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .fb-label{ font-size:13px; font-weight:700; fill:var(--ink); font-family:var(--body-font); }
  .fb-fretnum{ font-size:12px; fill:var(--ink-soft); font-family:var(--body-font); pointer-events:none; }
  .fb-nut{ stroke:var(--ink); stroke-width:3; }
  .fb-line, .fb-string{ stroke:var(--ink); stroke-width:1; opacity:.5; }
  .fb-inlay{ fill:var(--ink); opacity:.28; pointer-events:none; }
  .fb-open{ fill:none; stroke:var(--ink); stroke-width:1.6; }
  .fb-mute{ stroke:var(--ink); stroke-width:1.8; fill:none; stroke-linecap:round; }
  .fb-guide{ fill:var(--ink); opacity:.16; transition:opacity .12s ease,fill .12s ease; }
  .fb-dot{ fill:var(--accent); stroke:var(--accent-strong); stroke-width:1; }
  /* per-position note names (Show note names toggle) */
  .fb-guide-name, .fb-dot-name{
    font-family:var(--body-font); text-anchor:middle; dominant-baseline:central;
    pointer-events:none; transition:fill .12s ease,opacity .12s ease;
  }
  .fb-guide-name{ font-size:10px; font-weight:600; fill:var(--ink-soft); opacity:.7; }
  .fb-dot-name{ font-size:10px; font-weight:700; fill:var(--card-bg); }
  .fb-glow{ pointer-events:none; }
  .fb-glow-a, .fb-glow-b{ stop-color:var(--card-bg); }
  .fb-glow-a{ stop-opacity:1; } .fb-glow-b{ stop-opacity:.9; }
  .fb-glow-c{ stop-color:var(--card-bg); stop-opacity:0; }
  .fb-cell, .fb-top{ cursor:pointer; }
  .fb-hit, .fb-tophit{ fill:transparent; }
  .fb-cell:hover .fb-guide{ opacity:.5; fill:var(--accent); }
  .fb-cell:hover .fb-guide-name{ opacity:1; fill:var(--accent); }
  .fb-names-switch{ font-size:13px; margin-bottom:10px; }
  /* keyboard / screen-reader alternative to the pointer board: off-screen until
     one of its selects is focused, then it reveals as a compact per-string row */
  .fb-strings{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; }
  .fb-strings:focus-within{
    position:static; width:100%; max-width:230px; height:auto; margin:12px 0 0; padding:8px;
    overflow:visible; clip:auto; clip-path:none;
    display:flex; gap:8px; justify-content:center;
    border:1px solid var(--accent); border-radius:10px; background:var(--card-bg);
  }
  .fb-string-pick{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
  .fb-string-name{ font-size:12px; font-weight:750; color:var(--ink-soft); }
  .fb-string-select{
    width:100%; min-width:0; height:34px; padding:0 4px; text-align:center;
    font-size:14px; font-family:inherit; color:var(--ink);
    border:1px solid var(--control-border); border-radius:8px; background:var(--card-bg); cursor:pointer;
  }
  .fb-string-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .fb-top:hover .fb-open, .fb-top:hover .fb-mute{ stroke:var(--accent); }
  /* black & white mode: the selected dot must stay legible without the accent hue */
  body.bw-mode .fb-dot{ fill:var(--ink); stroke:var(--ink); }
  body.bw-mode .fb-cell:hover .fb-guide{ fill:var(--ink); opacity:.5; }
  body.bw-mode .fb-top:hover .fb-open, body.bw-mode .fb-top:hover .fb-mute{ stroke:var(--ink); }

  /* pinned so the verdict stays visible while the tall board scrolls past it */
  .fb-readout{
    flex:1 1 220px; min-width:0; align-self:flex-start;
    position:sticky; top:0; z-index:1; background:var(--card-bg);
  }
  .fb-notes{ margin:0 0 12px; font-size:14px; color:var(--ink-soft); }
  .fb-verdict-line{ margin:0; font-size:16px; line-height:1.35; color:var(--ink); }
  .fb-verdict-lead{ color:var(--ink-soft); }
  .fb-chord-name{ font-family:var(--heading-font); font-weight:650; font-size:30px; color:var(--accent); }
  /* accidental glyphs: smaller and tucked against the note letter, engraving-style.
     Margins are in the .acc's own (small) em, so they need to be sizeable to bite. */
  .acc{ font-size:0.62em; vertical-align:0.09em; margin-left:0.06em; }
  .fb-missing{ font-size:14px; color:var(--ink-soft); }
  .fb-alts{ margin:8px 0 0; font-size:13.5px; color:var(--ink-soft); }
  .fb-alts span{ font-weight:650; color:var(--ink); white-space:nowrap; }
  .fb-none{ margin:0; font-size:15px; color:var(--ink-soft); }
  .fb-card-slot{ margin:14px 0 2px; }
  .fb-card-slot:empty{ display:none; }
  .fb-tuning{ margin:0 0 14px; }
  .fb-tuning .field-label{ margin:0 0 6px; }
  /* notes + verdict grouped into one result panel, play button leading it */
  .fb-result{
    display:flex; align-items:center; gap:14px; padding:13px 15px;
    background:color-mix(in srgb, var(--accent) 5%, var(--card-bg));
    border:1px solid color-mix(in srgb, var(--accent) 20%, var(--card-border));
    border-radius:14px;
  }
  .fb-result-text{ flex:1; min-width:0; }
  .fb-result .fb-notes{ margin:0 0 4px; }
  .fb-play{
    min-height:40px; width:40px; height:40px; padding:0; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    cursor:pointer; transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease;
  }
  .fb-play:hover:not(:disabled){ background:var(--accent); color:#fff; }
  .fb-play:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .fb-play:disabled{ opacity:.45; cursor:default; }
  /* raised white button reads clearly on the tinted result panel */
  .fb-result .fb-play{ background:var(--card-bg); box-shadow:0 1px 3px rgba(41,38,33,.12); }
  .fb-result .fb-play:hover:not(:disabled){ background:var(--accent); color:#fff; }
  /* both footer actions read as text links (the copy one is a button, so it must
     shed the global button chrome — fill, border, min-height — on rest and hover) */
  .fb-footer-copy{
    display:inline-flex; align-items:center; gap:5px; min-height:0; padding:0;
    background:none; border:none; cursor:pointer; font-family:inherit;
    font-size:12.5px; font-weight:650; color:var(--accent); white-space:nowrap;
  }
  .fb-footer-copy svg{ width:13px; height:13px; flex-shrink:0; }
  .fb-footer-copy:hover{ background:none; border-color:transparent; text-decoration:underline; text-underline-offset:2px; }
  .fb-footer-copy:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .fb-footer-copy:disabled{ opacity:.45; cursor:default; text-decoration:none; }
  /* when the two footer actions wrap to two lines, keep them close together */
  #fretboardIdModal .voicing-modal-footer{ row-gap:4px; }
  /* --- entrance: one calm, staggered reveal on first load --- */
  @media (prefers-reduced-motion: no-preference){
    .topbar, .settings-section, .stage, .harp-promo, .site-footer{
      animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
    }
    .settings-section{ animation-delay:.06s; }
    .stage{ animation-delay:.14s; }
    .harp-promo{ animation-delay:.2s; }
    .site-footer{ animation-delay:.26s; }
    @keyframes rise{
      from{ opacity:0; transform:translateY(16px); }
      to{ opacity:1; transform:none; }
    }
  }

  /* On a phone the instrument picker already names the tuning one screen-width
     above the sheet — keep the sheet's title, drop the echoed tuning. Screen
     only: the full heading is what identifies a printed sheet. */
  @media screen and (max-width:600px){
    .page-title-sub{ display:none; }
  }
  @media (max-width:600px){
    /* stack the readout above the board; hide the extra card (the input board is
       right below), and no longer needing to pin the readout, drop the sticky */
    .fb-board-col{ order:1; align-self:stretch; }
    .fb-readout{ order:0; position:static; width:100%; padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--card-border); }
    .fb-card-slot{ display:none; }
    body{ padding:14px 10px 32px; }
    .topbar{ margin:2px 0 18px; }
    /* clear the fixed corner buttons, which the narrow width pulls inwards */
    .topbar .brand-mark{ margin-top:4px; }
    .brand-mark{ width:44px; height:44px; border-radius:13px; }
    .brand-mark svg{ width:27px; height:27px; }
    .brand-tagline{ display:none; }
    .topbar::after{ margin-top:11px; }
    .theme-toggle, .icon-link{ width:40px; height:40px; }
    .page-title-main{ font-size:19px; }
    .stage{ border-radius:18px; }
    .settings-section{ padding:14px 12px; border-radius:16px; }
    .builder-head{ margin-bottom:10px; }
    .builder-title{ font-size:19px; }
    /* the heading takes the line, so the picker takes the next one whole */
    .builder-head .instrument-field{ flex:1 1 100%; }
    /* drops what the width can't carry and the reader can do without: the count
       on the pill toggle, the words beside the printer */
    .btn-text-long{ display:none; }
    /* The three ways in share a row of their own rather than breaking across
       two: the label takes the line above, and the short names fit the thirds. */
    .builder-helpers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
    .builder-helpers-label{ grid-column:1 / -1; margin:0; }
    .builder-helpers .rsearch-open-btn{ width:100%; justify-content:center; padding-inline:6px; }
    /* the row is one column here, so the chord list gets the whole of it */
    .chord-hint-row #reverseSearchBtn{ flex:1 1 100%; max-width:none; }
    .label-wide{ display:none; }
    .label-narrow{ display:inline; }
    .tuning-select-trigger{ width:100%; min-width:0; }
    .tuning-select-menu{ width:100%; }
    /* 16px stops iOS Safari from auto-zooming the page on focus */
    #chordInput{ font-size:16px; }
    #songSearchInput{ font-size:16px; }
    #scaleInput{ font-size:16px; }
    .custom-chord-notes-input{ font-size:16px; }
    /* the two modes split the console's width evenly */
    .mode-tabs{ width:100%; }
    /* a thumb needs a taller target than a pointer does */
    .chord-suggestion{ padding:5px 10px; font-size:12.5px; }
    .chord-suggestions{ --pill-h:27px; }
    /* the label is the one part that may give way if a long root leaves the
       pills nothing to sit in */
    .chord-suggestions-label{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* only "more"/"fewer" here — the count is dropped with .btn-text-long */
    .chord-suggestions-more{ min-width:52px; padding:0 2px; }
    /* keep long titles readable on narrow dropdowns */
    .song-result-meta{ display:none; }
    .stage-head{ align-items:stretch; }
    .stage-heading{ width:100%; }
    /* Options and Share split the row; printing from a phone is rare enough
       that the primary action gets by on its icon alone. */
    .results-actions{ display:flex; width:100%; gap:8px; }
    .results-actions button{ justify-content:center; padding-inline:10px; }
    .results-actions > .options-toggle, .results-actions > .share-wrap{ flex:1 1 0; min-width:0; }
    .share-wrap > #shareBtn{ width:100%; }
    #printBtn{ flex:0 0 auto; width:46px; padding-inline:0; }
    .share-wrap .share-menu{ min-width:0; width:max-content; max-width:min(300px,calc(100vw - 28px)); }
    .tip-fab{ right:14px; bottom:14px; }
    .tip-toast{ right:14px; bottom:70px; width:272px; max-width:calc(100vw - 28px); }
    .options-card{ padding:13px 14px 15px; gap:16px 24px; }
    .stepper{ height:40px; }
    .stepper-btn{ width:38px; }
    /* after the two above, which would otherwise stop it tracking the field */
    .stepper-vert{ height:auto; }
    .stepper-vert .stepper-btn{ width:100%; }
    .stepper-sm{ height:36px; }
    .stepper-sm .stepper-btn{ width:34px; }
    .stepper-sm .stepper-value{ min-width:42px; }
    .rsearch-open-btn{ height:36px; padding:0 13px; font-size:13px; }
    .rsearch-backdrop{ padding:12px; }
    .rsearch-modal{ max-height:calc(100vh - 24px); }
    .rsearch-result-badge{ font-size:10.5px; padding:2px 6px; }
    .info-btn{ min-height:32px; width:32px; height:32px; }
    .grid{ grid-template-columns:repeat(2,minmax(0,240px)); gap:12px; }
    .card{ padding:11px 5px 10px; border-radius:14px; }
    .card.has-alt-voicings{ padding-bottom:44px; }
    .card h2{ font-size:20px; }
    .card-sub{ font-size:9px; letter-spacing:.1em; margin-bottom:5px; }
    .play-chord-btn,.card-menu-btn{ top:7px; width:30px; height:30px; min-height:30px; }
    .play-chord-btn{ left:6px; }
    .card-menu-btn{ right:6px; }
    .omit-note{ font-size:9px; }
    .voicing-nav{ left:6px; right:6px; }
  }
  @media (max-width:340px){ .grid{ grid-template-columns:1fr; } }
  @media print {
    body{ padding:16px; background:#fff !important; }
    body::before, body::after{ display:none; }
    /* the entrance animation must never leave a printed element on its
       invisible first frame */
    *, *::before, *::after{ animation:none !important; transition:none !important; }
    /* one quiet credit line — the sheet title below is what leads the page */
    .topbar{ margin:0 0 10px; }
    .topbar::after{ display:none; }
    .brand-mark, .brand-tagline{ display:none; }
    .brand-title{
      font-size:15px; background:none;
      -webkit-text-fill-color:currentColor; color:#716a61;
    }
    .stage{
      background:none; border:none; box-shadow:none;
      padding:0; border-radius:0; margin:0;
      /* the stage is themed on screen; on paper its text must be ink */
      --ink:#292621; --ink-soft:#716a61; --accent:#a44737;
    }
    .stage::before{ display:none; }
    .stage-head{ border-bottom:none; padding-bottom:0; margin-bottom:10px; }
    .grid{ gap:12px; }
    .grid.masonry{ gap:12px; }
    .masonry-col{ gap:12px; }
    .card{ break-inside:avoid; box-shadow:none; }
    /* the corner buttons are gone in print, so give the title the row
       padding that only exists to clear them */
    .chord-title-row{ padding:0; }
    /* the screen fit shrinks titles via a JS-measured font-size, but print
       reflows the grid to the paper's width on its own schedule, so a size
       picked for the screen's columns can still overflow here — let long
       names wrap onto a second line instead of ellipsizing. */
    .card h2, .card-sub{ white-space:normal; overflow:visible; overflow-wrap:break-word; }
    .no-print{ display:none !important; }
  }