/* site.css: the Library's styles, from the approved Library design (Pages/build-library-design.js). */
:root{color-scheme:dark;--bg:#0D1014;--panel:#151A20;--raised:#1C232B;--line:#29323C;--line-2:#3A4552;--ink:#EEF2F6;--ink-2:#ADB8C4;--ink-3:#8A96A3;--accent:#F2745B;--accent-ink:#1A0B07;--accent-soft:rgba(242,116,91,.15);--warn:#F5C451;
  --grid:#CDD5DE;--grid-soft:#4A5562;--ring:rgba(255,255,255,.34);--shadow:rgba(0,0,0,.45);--f-ui:'Barlow','Noto Music','Helvetica Neue',sans-serif;--f-display:'Barlow Condensed','Noto Music','Arial Narrow',sans-serif;--f-m:'IBM Plex Mono',ui-monospace,monospace}
/* the light look (main.js theme, kept as 'theme'): the same tokens with other values, so every part follows */
:root[data-theme="light"]{color-scheme:light;--bg:#F6F7F9;--panel:#FFFFFF;--raised:#EDF0F3;--line:#DCE1E7;--line-2:#C2CAD3;--ink:#15181C;--ink-2:#47505A;--ink-3:#69737F;--accent:#D24E2D;--accent-ink:#FFFFFF;--accent-soft:rgba(210,78,45,.12);--warn:#8F6400;
  --grid:#1F242A;--grid-soft:#A9B1BB;--ring:rgba(0,0,0,.22);--shadow:rgba(0,0,0,.14)}
:root[data-theme="light"] .dg .wk{fill:#fff;stroke:#8a949f}:root[data-theme="light"] .dg .barre{opacity:.26}
.theme-btn{flex:none}.theme-btn .sun,:root[data-theme="light"] .theme-btn .moon{display:none}:root[data-theme="light"] .theme-btn .sun{display:inline}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--ink-3)}.small{font-size:13px}.grow{flex:1 1 auto}
.lab{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- the picture card ---------- */
.pc{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 10px 10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:background .15s,border-color .15s,box-shadow .15s}
.pc:hover,.pc.is-hover{border-color:var(--line-2)}   /* the card keeps its colour on rollover; only the border lifts a little */
.pc.is-hover{box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pc.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px rgba(242,116,91,.14)}
.pc.is-focus{outline:2px solid var(--accent);outline-offset:3px}
.pc:has(.pc-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.pc.is-selected:has(.pc-link:focus-visible){outline:none}   /* a picked card already has its orange border: no second ring */
.pc-h{display:flex;flex-direction:column;gap:2px}
.pc-chord{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--accent);line-height:1.1}
.pc-hr{display:flex;align-items:flex-start;gap:6px}
.pc-t{margin:0;flex:1 1 auto;min-width:0;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.1;text-wrap:balance}
.pc-link{color:var(--ink);text-decoration:none}.pc-link::after{content:'';position:absolute;inset:0;border-radius:14px}
.pc-link:focus-visible{outline:none}
.pc-badges{display:flex;gap:4px;flex:none;padding-top:2px}
.badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:1px solid;border-radius:4px;padding:1px 5px;line-height:1.4}
.badge.famous{color:var(--accent);border-color:rgba(242,116,91,.6)}.badge.hard{color:var(--warn);border-color:rgba(245,196,81,.55)}.badge.thumb{color:var(--ink-2);border-color:var(--line-2)}
.pc-sub{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.35;display:flex;align-items:center;gap:6px}
.pc-dg{position:relative;display:flex;justify-content:center;padding:2px 0}
.pc-dg .lab-i,.fa-dg .lab-i{display:none}.dots-i .lab-i{display:block!important}.dots-i .lab-f{display:none}
.pc-act{position:relative;z-index:1;display:flex;gap:6px;margin-top:auto;align-items:center}
.pb{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-weight:600;font-size:14px}
.pb:hover,.is-hover .pb.play{background:var(--raised)}
.pb.play[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pb.add[aria-pressed="true"]{border-color:#6CC592;color:#6CC592}
/* ---------- the Library page ---------- */
.site{display:flex;flex-direction:column}
.site-h{display:flex;align-items:center;gap:28px;height:64px;padding:0 40px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--f-display);font-weight:700;font-size:23px;color:var(--ink);text-decoration:none}
.site-h nav{display:flex;gap:24px}.site-h nav a{display:inline-flex;align-items:center;min-height:62px;font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent}
.site-h nav a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.quiet{color:var(--ink-2);text-decoration:none;font-weight:600}.quiet:hover{color:var(--ink)}
.btn-o,.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:21px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-weight:600;text-decoration:none}
.btn-p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lib{display:flex;flex-direction:column;gap:18px;padding:22px 40px 56px}
.toolbar{display:flex;align-items:center;gap:14px}
.search{flex:1 1 auto;display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 16px;background:var(--panel);border:1.5px solid var(--line-2);border-radius:14px;color:var(--ink-3)}
.search:focus-within{border-color:var(--accent)}.search input{flex:1;min-width:0;height:100%;border:none;outline:none;background:none;font-size:18px;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;color:var(--ink-3);border-radius:10px}
.tbtn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--panel);font-size:14.5px;color:var(--ink-2);white-space:nowrap}.tbtn b{color:var(--ink);font-weight:600}
.tbtn .sep{width:1px;height:20px;background:var(--line-2)}
.tctl{display:flex;flex-direction:column;gap:4px}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--panel);border:1px solid var(--line-2)}
.seg button{min-height:36px;padding:0 13px;border:none;border-radius:9px;background:none;color:var(--ink-2);font-weight:600;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.cstrip{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:28px;align-items:center;padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.cs-name h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:54px;line-height:.95}.cs-name p{margin:4px 0 0;color:var(--ink-2)}
.cs-mid{display:flex;flex-direction:column;gap:6px}.degs{display:flex;gap:6px}
.deg{display:inline-flex;align-items:baseline;gap:5px;padding:4px 11px;border-radius:14px;font-family:var(--f-display);font-weight:600;font-size:17px}.deg i{font-style:normal;font-weight:500;opacity:.85}
.cs-play{display:flex;flex-direction:column;gap:8px}
.cs-rel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;justify-self:end}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:16px;text-decoration:none}
.chip:hover{border-color:var(--ink-3)}.chip.fam{color:var(--accent);border-color:rgba(242,116,91,.5)}
.filters .chip,.fg .chip{font-family:var(--f-ui);font-size:14px;min-height:34px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lib-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;align-items:start}
.filters{display:flex;flex-direction:column;gap:18px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;position:sticky;top:12px}
.f-h{display:flex;align-items:baseline;justify-content:space-between}.f-h h2{margin:0;font-family:var(--f-display);font-size:22px}
.fg{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}.fg legend{padding:0;margin-bottom:6px}
.sel{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-weight:500;text-align:left}
.rad{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px;border-radius:8px;font-size:14.5px}.rad:has(input:checked){background:var(--raised)}.rad .muted{margin-left:auto;font-size:13.5px}
.rad input,.chk input{accent-color:var(--accent);margin:0}.chk{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);min-height:32px}
.results{display:flex;flex-direction:column;gap:14px;min-width:0}
.r-h{display:flex;align-items:baseline;gap:12px}.r-h h2{margin:0;font-family:var(--f-display);font-size:28px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.r-more{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:8px}
.site-f{display:flex;align-items:center;gap:22px;padding:26px 40px;border-top:1px solid var(--line);background:var(--panel);font-size:14px}.site-f .logo{font-size:19px}
@media (prefers-reduced-motion:reduce){.pc{transition:none}}
/* ---------- the full art card ---------- */
.fa{position:relative;display:flex;flex-direction:column;gap:18px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.fa.narrow{padding:16px;gap:16px}
.fa-h{position:relative;display:flex;align-items:flex-start;gap:16px}
.fa-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.fa-t h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.05;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fa.narrow .fa-t h3{font-size:26px}.fa .pc-sub{font-size:14px}
.fa-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn-p.sm,.btn-o.sm{min-height:38px;padding:0 13px;font-size:14px}
.btn-o.pb.add[aria-pressed="true"]{border-color:#6CC592;color:#6CC592}
.fa-nav{display:flex;gap:6px}.ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink)}
.fa-body{display:grid;grid-template-columns:auto 190px minmax(0,1fr);gap:28px;align-items:start}
.fa-dg{position:relative;display:flex;justify-content:center}
.fa-blk{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.fa-blk h4{margin:0}.fa-bh{display:flex;align-items:center;gap:8px}.fa-bh .amk.inline{position:static}
.fa-act{position:relative}
.fa-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.fa-info .fa-blk:nth-child(3){grid-column:1 / -1}
.fa-clock{align-items:center}
.wis{display:flex;flex-wrap:wrap;gap:6px}
.wi{display:inline-flex;align-items:baseline;gap:4px;padding:3px 10px;border-radius:13px;border:1.5px solid transparent;font-family:var(--f-display);font-weight:600;font-size:16px}
.wi i{font-style:normal;font-weight:500;opacity:.85}.wi em{font-style:normal;font-family:var(--f-ui);font-size:12px;font-weight:600;opacity:.85;margin-left:2px}
.wi.out{border-style:dashed;color:var(--ink-2)}
.fa-facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:14px}.fa-facts dt{color:var(--ink-3)}.fa-facts dd{margin:0}
.fa-none{margin:0;font-size:14px;color:var(--ink-3)}
.fa-neckwrap{position:relative}.fa-neck{border-top:1px solid var(--line);padding-top:16px}
.fa.wide .fa-neck .fa-neckwrap{margin:0 auto;width:100%}   /* the neck fills the card, so its notes are easy to read */
.fa-check{position:relative;margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3)}.fa-check svg{color:var(--warn)}
.fa-fam{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:rgba(242,116,91,.08);border:1px solid rgba(242,116,91,.3)}
.fa-fam-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.fa-fam-h b{font-family:var(--f-display);font-size:21px}.fa-fam p{margin:0;font-size:14.5px;color:var(--ink-2)}
.fa-tip{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--raised)}.fa-tip p{margin:0;font-size:14.5px}
.fa-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:start}.fa-col{display:flex;flex-direction:column;gap:14px}
.fa .amk.inline{position:absolute;left:-30px;top:0}.fa-dg .amk.m-dg{left:0;top:0}
.fulls{display:flex;flex-direction:column;gap:16px}
.fulls .fa-info{grid-template-columns:minmax(0,1fr)}.fulls .fa-body{grid-template-columns:auto 180px minmax(0,1fr)}
.lib-open{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:14px 24px;align-items:start}.lib-open>.r-h{grid-column:1/-1}   /* the heading spans every column, so the cards and the panel start on one line */
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel{position:sticky;top:12px}
/* ---------- the Library before searching ---------- */
.home{gap:26px}
.home-h{display:flex;flex-direction:column;gap:6px}.home-h h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:48px;line-height:1}.home-h p{margin:0;font-size:17px;color:var(--ink-2)}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-12px}
.try-c{display:inline-flex;align-items:baseline;gap:7px;min-height:36px;padding:0 13px;border-radius:18px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.try-c b{font-family:var(--f-display);font-weight:600;font-size:17px}.try-c span{font-size:13px;color:var(--ink-3)}.try-c:hover{border-color:var(--ink-3)}
.hs{display:flex;flex-direction:column;gap:14px}
.hs-h{display:flex;align-items:baseline;gap:14px}.hs-h button.quiet{background:none;border:none;padding:0;min-height:32px}.hs-h h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:30px}.hs-h p{margin:0}
.rvs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.rv{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 6px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.rv:hover{border-color:var(--line-2);background:#1A2028}.rv-t{display:flex;flex-direction:column;gap:1px;min-width:0}.rv-t b{font-family:var(--f-display);font-size:22px;line-height:1.05}
.cards.c8{grid-template-columns:repeat(8,minmax(0,1fr))}
.pc.compact{padding:10px 8px 8px}.pc.compact .pc-t{font-size:24px}.pc.compact .pc-sub{font-size:12px}
.pc.compact .dg .ft.note{font-size:17px}.pc.compact .pb{font-size:13px;min-height:34px;gap:4px}
.key{display:flex;flex-wrap:wrap;gap:10px 28px;padding:12px 16px;border-radius:12px;border:1px dashed var(--line-2);font-size:14px;color:var(--ink-2)}
.key-i{display:inline-flex;align-items:center;gap:8px}
.ctable{display:flex;flex-direction:column;gap:0;padding:6px 18px 10px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.rootpick{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.rootpick button{min-width:52px;min-height:44px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:20px}
.rootpick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ct-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.ct-row:last-child{border-bottom:none}
.ct-fam{display:flex;flex-direction:column;gap:2px;padding-top:6px}.ct-fam b{font-family:var(--f-display);font-size:21px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct{display:flex;flex-direction:column;gap:2px;min-width:118px;padding:7px 11px 8px;border-radius:12px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.ct:hover{border-color:var(--ink-3);background:var(--raised)}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.ct-top b{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.1}
.ct-name{font-size:12.5px;color:var(--ink-3);max-width:150px}
.fms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fm{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.fm:hover{border-color:var(--line-2);background:#1A2028}.fm-t{display:flex;flex-direction:column;gap:2px;min-width:0}.fm-t b{font-family:var(--f-display);font-size:21px;line-height:1.1}
.fm-tech{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--accent);margin-top:4px}.panel .fa{box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:var(--line-2)}
.pc .dg .ft{font-size:13px}.pc .dg .ft.note{font-size:13.5px}.pc .dg .cap{font-size:10.5px}
.dg{display:block;flex:none;overflow:visible}
.dg text{font-family:'Barlow', 'Helvetica Neue', sans-serif}
.dg .fret{stroke:var(--grid);stroke-width:1;opacity:.42}
.dg .nut{fill:var(--grid)}
.dg .str{stroke:var(--grid)}
.dg .str.off{stroke:var(--grid-soft);stroke-dasharray:3 4}
.dg .pos{font-size:13px;font-weight:600;fill:var(--ink-2)}
.dg .barre{fill:#8994A1;opacity:.34}
.dg .x{stroke:var(--ink-3);stroke-width:1.8;fill:none;stroke-linecap:round}
.dg .dl{font-family:'Barlow Condensed', 'Arial Narrow', sans-serif;font-weight:600}
.dg .cap{font-size:8px;fill:var(--ink-3);letter-spacing:.04em}
.dg .ft{font-size:11px;fill:var(--ink-2)}
.dg .ft.note{font-weight:600;fill:var(--ink)}
.dg .inlay{fill:var(--line-2)}
.dg .mini{fill:none;stroke:var(--grid-soft);stroke-width:1}
.dg .minifret{stroke:var(--grid-soft);stroke-width:.6}
.dg .mininut{stroke:var(--grid);stroke-width:2.4}
.dg .minidot{fill:var(--grid-soft)}
.dg .win{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.dg .minilab{font-size:9.5px;fill:var(--ink-2)}
.dg .wk{fill:#DDE3E9;stroke:#56616D;stroke-width:.6}
.dg .bk{fill:#0D1014}
.dg .keylab{font-size:8px;fill:var(--ink-3)}
.dg .dial{fill:none;stroke:var(--line-2);stroke-width:1.2}
.dg .tick{fill:var(--grid-soft)}
.dg .cl{font-size:10px;fill:var(--ink-3)}
.dg .cl.on{fill:var(--ink);font-weight:600}
.dg .poly{fill:rgba(255,255,255,.07);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.dg .polyl{stroke:var(--ink);stroke-width:1.4}
.strip{display:block;width:100%;height:auto}
.strip .stripnone{fill:var(--line)}
.strip .stripbase{stroke:var(--line-2)}
.strip text{font-family:'Barlow', 'Helvetica Neue', sans-serif}
.stripnum{font-size:10px;fill:var(--ink-3)}

/* ---------- site-only parts: not in the design pages ---------- */
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
main.lib{flex:1 0 auto;max-width:1360px;width:100%;margin:0 auto;outline:none}
.site-h,.site-f{max-width:none}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.nav-soon{display:inline-flex;align-items:center;gap:8px;min-height:62px;font-weight:600;color:var(--ink-3)}
.soon{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;color:var(--ink-2)}
.search{position:relative}
.sugs{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:420px;overflow:auto}
.sugs .sug-g{padding:8px 10px 4px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sugs [role=option]{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;color:var(--ink)}
.sugs [role=option] b{font-family:var(--f-display);font-weight:600;font-size:18px}.sugs [role=option] span{font-size:13.5px;color:var(--ink-3)}
.sugs [role=option]:hover,.sugs [aria-selected=true]{background:var(--raised)}
.tune-wrap{position:relative}
.tmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:460px;max-height:78vh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.tm-h{display:flex;align-items:center;justify-content:space-between}.tm-h h2{margin:0;font-family:var(--f-display);font-size:26px}
.tm-list{display:flex;flex-direction:column;gap:10px}.tm-list section{display:flex;flex-direction:column;gap:2px}.tm-list h3{margin:0 0 2px}
.tm-row{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:9px;border:1px solid transparent;background:none;color:var(--ink);text-align:left}
.tm-row span:first-child{flex:1;font-weight:600}.tm-row .muted{letter-spacing:.08em;font-size:13px}.tm-row:hover{background:var(--raised)}
.tm-row[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.tm-row svg{color:var(--accent)}
.tm-q{position:relative;display:flex;align-items:center}.tm-q svg{position:absolute;left:11px;width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.tm-q input{width:100%;height:40px;padding:0 12px 0 36px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font-size:15px}.tm-q input:focus{outline:none;border-color:var(--accent)}.tm-q input::placeholder{color:var(--ink-3)}
.tm-none{margin:0}.tm-row[hidden],.tm-list section[hidden]{display:none}.tm-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tm-custom,.tm-capo{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}.tm-custom h3,.tm-capo h3{margin:0}.tm-capo p{margin:0}
/* your own tuning: one row a string, as the player sees them */
.tm-custom p{margin:0}
.ts{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:12px;background:var(--bg)}
.ts-row{display:grid;grid-template-columns:22px minmax(60px,1fr) 32px 46px 32px 64px;align-items:center;gap:8px;min-height:36px}
.ts-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);font-family:var(--f-m);font-size:12px;color:var(--ink-2)}
.ts-line{position:relative;display:flex;align-items:center;height:30px}.ts-line i{display:block;flex:1;border-radius:3px;background:linear-gradient(#DCE3EA,#8A96A3)}
.ts-line small{position:absolute;left:0;bottom:-3px;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.ts-row .ib.xs{width:32px;height:32px;border-radius:8px}.ts-row .ib:disabled{opacity:.35}
.ts-note{text-align:center;font-family:var(--f-display);font-size:20px;font-weight:600}.ts-note sub{font-size:11px;font-weight:500;color:var(--ink-3);vertical-align:baseline;margin-left:1px}
.ts-d{font-size:12px;color:var(--ink-3)}.ts-d.on{color:var(--accent)}
.ts-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ts-notes{flex:1;min-width:0;font-size:13.5px}.ts-notes b{letter-spacing:.08em}
.ts-sum .linkbtn:disabled{opacity:.4;cursor:default}.ts-sum .btn-p:disabled{opacity:.45;cursor:default}
.tm-capo .seg button{padding:0 10px}
.fam-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 18px;border-radius:16px;background:rgba(242,116,91,.08);border:1px solid rgba(242,116,91,.3)}
.fam-banner b{font-family:var(--f-display);font-size:24px}.fam-banner p{margin:0;flex-basis:100%;color:var(--ink-2)}
.note-line{margin:0;font-size:16px;color:var(--ink-2)}.note-line b{color:var(--ink)}
.none{display:flex;flex-direction:column;gap:12px;padding:24px 0}.none h1{margin:0;font-family:var(--f-display);font-size:40px}.none p{margin:0;color:var(--ink-2);max-width:62ch}
.wayhint{display:flex;align-items:center;gap:16px;padding:14px 18px;margin:0 0 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel)}.wayhint p{margin:0;flex:1;max-width:80ch}.wayhint .btn-o{flex:none}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;border:1px dashed var(--line-2);border-radius:16px}.empty p{margin:0}
.linkbtn{border:none;background:none;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.pc-link-plain{color:inherit;text-decoration:none}.pc-link-plain:hover{text-decoration:underline}
select.sel{appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ADB8C4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:32px;font:inherit;color:var(--ink);cursor:pointer}
.cards{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}.cards.c4{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.lib-open.with-filters{grid-template-columns:230px minmax(0,1fr) 430px}
.strip{cursor:crosshair;touch-action:none}
.strip .stripsel{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw;overflow-wrap:anywhere}
.noscript{padding:24px 40px}
body.dots-i .lab-i{display:block!important}body.dots-i .lab-f{display:none!important}
.fa-dg .lab-i{display:none}
@media (max-width:1100px){.lib-body{grid-template-columns:minmax(0,1fr)}.filters{position:static}.lib-open,.lib-open.with-filters{grid-template-columns:minmax(0,1fr)}.panel{position:static}
  .cstrip{grid-template-columns:minmax(0,1fr)}.cs-rel{justify-self:start}.fa-body{grid-template-columns:minmax(0,1fr)}.fa-info{grid-template-columns:minmax(0,1fr)}.rvs,.fms{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.cards.c8{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media (max-width:760px){.lib,.site-h,.site-f{padding-inline:16px}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}.tmenu{position:fixed;left:8px;right:8px;width:auto;top:70px}.ct-row{grid-template-columns:minmax(0,1fr)}.home-h h1{font-size:36px}}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
button.quiet{background:none;border:none;padding:0;min-height:32px;cursor:pointer;font:inherit;font-weight:600}

/* ---------- the two views: Browse and Search ---------- */
.lib-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.vtabs{display:inline-flex;padding:3px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);align-self:center}
.vtabs a{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:11px;color:var(--ink-2);font-family:var(--f-display);font-weight:700;font-size:20px;text-decoration:none}
.vtabs a[aria-selected=true]{background:var(--ink);color:var(--bg)}.vtabs a:hover:not([aria-selected=true]){color:var(--ink)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--ink)}.crumbs [aria-current]{color:var(--ink)}
.home-h p a{font-weight:600}
.sview{display:flex;flex-direction:column;gap:14px}
.shead{display:flex;flex-direction:column;gap:8px}
.sbox{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:58px;padding:7px 14px;background:var(--panel);border:1.5px solid var(--line-2);border-radius:16px}
.sbox:focus-within{border-color:var(--accent)}.sbox-ic{display:inline-flex;color:var(--ink-3)}
.sbox input{flex:1 1 220px;min-width:160px;height:40px;border:none;outline:none;background:none;font-size:18px;color:var(--ink)}.sbox input::placeholder{color:var(--ink-3)}
.schip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:16px;border:1px solid;background:transparent;font-weight:600;font-size:14px;cursor:pointer}
.schip svg{width:13px;height:13px}
.k-family{color:#8FB8FF;border-color:rgba(143,184,255,.5)}.k-root{color:#F2745B;border-color:rgba(242,116,91,.5)}.k-group{color:#E7B85B;border-color:rgba(231,184,91,.5)}.k-notes{color:#7FD1B9;border-color:rgba(127,209,185,.5)}
.sbox .sugs{top:calc(100% + 6px)}
.sugs [role=option] span{margin-left:auto}
.scontrols{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scount{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}.scount small{font-size:13px;color:var(--ink-3)}
.facets{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center}
.fpills{display:flex;flex-wrap:wrap;gap:6px}
.fpill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 5px 0 11px;border-radius:16px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-size:14px;font-weight:500}
/* the count: its own small dark badge in a quieter colour, so it never runs into the name */
.fpill span{min-width:22px;padding:2px 6px;border-radius:10px;background:var(--line);color:var(--ink-3);font-size:11.5px;font-weight:600;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums}
.fpill:hover{border-color:var(--ink-3)}.fpill:hover span{color:var(--ink-2)}
.fpill.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}.fpill.on span{background:#D5DCE3;color:#3A4552}
.sbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}#sv-below{grid-column:1/-1}#sv-below:empty,#sv-panel:empty{display:none}
/* with a result picked: the same columns as the cards, the panel standing in the last two. Cards fill the rows beside it, and the
   whole width again below it (main.js flowResults moves them into sv-below). The panel's box reaches down to the last row beside it. */
.sbody.with-panel{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sbody.with-panel>#sv-results{grid-column:1/-3}
.sbody.with-panel>#sv-panel{grid-column:-3/-1;align-self:stretch;display:flex;flex-direction:column}.sbody.with-panel.measure>#sv-panel{align-self:start}
.sbody.with-panel .spanel{position:static;flex:1 1 auto;display:flex;flex-direction:column}.sbody.with-panel .spanel>.fa{flex:1 1 auto}
#sv-below>.rgroup:first-child:not(.cont){margin-top:10px}
.sres{display:flex;flex-direction:column;gap:22px;min-width:0}
.rgroup{display:flex;flex-direction:column;gap:10px}
.rg-h{margin:0;display:flex;align-items:baseline;gap:10px;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rg-h span{font-family:var(--f-m);letter-spacing:0}.rg-h em{min-width:0;overflow:hidden;text-overflow:ellipsis;font-style:normal;text-transform:none;letter-spacing:0;color:var(--accent)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rc{position:relative;display:flex;flex-direction:column;gap:5px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.rc:hover{border-color:var(--line-2)}.rc.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px rgba(242,116,91,.14)}
.rc-kind{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rc-kind.k-famous{color:var(--accent)}.rc-kind.k-shape{color:#7FD1B9}
.rc-t{margin:0;font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.1}
.rc-link{all:unset;cursor:pointer;color:var(--ink)}.rc-link::after{content:'';position:absolute;inset:0;border-radius:14px}.rc-link:focus-visible{outline:none}
.rc:has(.rc-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.rc-sub{margin:0;font-size:13px;color:var(--ink-2)}
.rc-dg{min-height:118px;display:flex;justify-content:center}.rc-dg .lab-i{display:none}
.rc-degs{display:flex;flex-wrap:wrap;gap:4px}.rdeg{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:1px 6px;border-radius:10px;font-family:var(--f-display);font-weight:600;font-size:14px}
.rc-tags{margin:0;font-size:12px;color:var(--ink-3)}
.rlist{width:100%;border-collapse:collapse}.rlist td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
.rlist tr.is-selected td{background:rgba(242,116,91,.08)}.rlist tr:hover td{background:var(--raised)}
.rc-link-plain{all:unset;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink)}.rc-link-plain:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the panel's top line matches a results heading (.rg-h: 20px tall, then the group's 10px gap), so the panel lines up with the first result */
.spanel .sp-top{display:flex;align-items:center;gap:10px;height:20px;margin-bottom:10px;white-space:nowrap}
.spanel .sp-top b{font-family:var(--f-display);font-size:18px;line-height:20px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.spanel .sp-all{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none}.spanel .sp-all:hover{text-decoration:underline}.spanel .sp-all svg{width:15px;height:15px}
.sp-noshape{position:relative}.sp-noshape .sp-close{position:absolute;top:12px;right:12px}
@media (max-width:1100px){.sbody.with-panel{grid-template-columns:minmax(0,1fr)}.sbody.with-panel>#sv-results,.sbody.with-panel>#sv-panel{grid-column:auto}.frow{grid-template-columns:minmax(0,1fr)}}
.rc-noshape{margin:auto 0;font-size:13px;color:var(--ink-3);text-align:center;max-width:16ch}
.spanel .fa p{margin:0;color:var(--ink-2);font-size:14.5px}
button.pc-link{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.pc-kick{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pc-kick.k-famous{color:var(--accent)}.pc-kick.k-shape{color:#7FD1B9}
/* a named shape moved off its shape: the way back, where the label was */
.pc-back{display:inline-flex;align-items:center;gap:3px;justify-self:start;align-self:start;padding:0;border:none;background:none;color:var(--accent);cursor:pointer;text-align:left;position:relative;z-index:1}.pc-back svg{width:12px;height:12px}.pc-back:hover{text-decoration:underline}
.pc.no-shape{gap:8px}
.pc-none{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:0 18px;border:1px dashed var(--line-2);border-radius:12px;box-sizing:border-box}
.pc-none .rc-degs{justify-content:center}.pc-none .rc-noshape{margin:0;max-width:24ch;text-align:center;line-height:1.45}
.pc.no-shape .pc-act{visibility:hidden}   /* keeps the card the same height as one with its buttons */
/* search results: the larger picture, as on the full art card */
.cards.rcards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pc.rich{padding:14px 12px 12px;gap:8px}.pc.rich .pc-t{font-size:24px}.pc.rich .pc-sub{font-size:13.5px;min-height:2.7em;align-items:flex-start}
/* cards in a row share one header height (grid subgrid), so every chord picture starts on the same line and nothing is cut off */
.cards.rcards>.pc.rich,.cards.rcards>.pc.no-shape{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start}
.cards.rcards>.pc.rich>.pc-h{align-self:start}
.pc.rich .dg .ft{font-size:12px}.pc.rich .dg .ft.note{font-size:12.5px}.pc.rich .dg .cap{font-size:9px}.pc.rich .dg .minilab{font-size:10px}
.pc.rich .pc-dg{padding:4px 0}
/* the draggable neck strip on every card */
.dgwrap{position:relative;display:inline-block;line-height:0}
.stripdrag{position:absolute;z-index:2;border-radius:6px;cursor:grab;touch-action:none;outline:none}
.stripdrag:hover,.stripdrag:focus-visible{background:rgba(242,116,91,.08)}   /* a faint tint only: no line around the strip */
.stripdrag.dragging{cursor:grabbing;background:rgba(242,116,91,.12)}

/* notes you can click to hear, on the strings and on the piano */
.pc .dg .nt[data-m],.fa .dg .nt[data-m],.pc .dg .kn,.fa .dg .kn{cursor:pointer;transform-box:fill-box;transform-origin:center}
.pc .dg .nt[data-m]:hover,.fa .dg .nt[data-m]:hover,.pc .dg .kn:hover,.fa .dg .kn:hover{filter:brightness(1.3)}
.dg .kn:hover .khit{fill:rgba(242,116,91,.22)}
/* a whole card or list row picks its result */
.cards .pc,.rlist tbody tr{cursor:pointer}
/* the Dots switch on the results row, and the arrow-key hint */
.dotsctl{display:flex;align-items:center;gap:8px}.dotsctl .lab{margin:0}
.khint{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);white-space:nowrap}
.khint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 3px;border:1px solid var(--line-2);border-radius:4px;font:inherit;font-size:11px;color:var(--ink-2);background:var(--bg)}
.rg-h .khint{margin-left:auto}.rg-h span.khint{font-family:var(--f-ui)}

/* card buttons: Strum, Arpeggio and a small Add */
.pc-act .pb{flex:1 1 auto;padding:0 8px;gap:5px}.pc-act .pb.sq{flex:0 0 38px;padding:0}
.pb.arp[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* card pictures fill the card's width (the neck strip and notes are placed in proportion, so they follow) */
.pc.rich .pc-dg .dgwrap{display:block;width:100%}.pc.rich .pc-dg svg.dg{display:block;width:100%;height:auto}

/* the Strings button and its menu */
.str-wrap,.voice-wrap{position:relative}.strbtn.tbtn{height:40px;border-radius:10px;padding:0 12px;font-size:14px;gap:6px;white-space:nowrap}.strmenu .chip{font-family:var(--f-ui);font-size:13.5px;min-height:32px}.strbtn.on{border-color:var(--accent)}.strbtn.on b{color:var(--accent)}
.strmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:340px;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.strmenu p{margin:0}.strs{display:flex;gap:4px}
.sbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-radius:9px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink)}
.sbtn b{font-family:var(--f-display);font-size:18px;font-weight:600;line-height:1}.sbtn small{font-size:10px;color:var(--ink-3);font-family:var(--f-m)}
.sbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.sbtn[aria-pressed="true"] small{color:inherit;opacity:.8}
.strpre{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.strpre .lab{width:100%;margin:0}
.strpre .chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.strpre .chip{gap:.35em}                      /* a set's name and its numbers: a flex item drops the space typed between them */
.strmenu .str-all{align-self:flex-start}.strmenu .str-all[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:transparent}

/* with strings picked, the others fade on the pictures */
.strs-on .dg .str.off{opacity:.28}.strs-on .dg path.x{opacity:.35}
/* the tuning tag, when not in standard tuning */
.badge.tuning{color:#7FC7D9;border-color:rgba(127,199,217,.45);text-transform:none;letter-spacing:.02em}
.r-h{flex-wrap:wrap;row-gap:10px}

/* inversion buttons under a picture: which chord note is lowest */
.pc.rich .pc-dg{flex-direction:column;align-items:stretch;gap:8px}
.fa-dg{flex-direction:column;align-items:center;gap:10px}.fa .pc-inv{width:100%;max-width:320px}
.pc-inv{display:flex;gap:4px}
.pc-inv .inv{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0 3px;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:600;line-height:1.15}
.pc-inv .inv small{font-size:11px;font-weight:500;color:var(--ink-3)}
.pc-inv .inv:hover{background:var(--raised);color:var(--ink)}
.pc-inv .inv[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}.pc-inv .inv[aria-pressed="true"] small{color:var(--accent)}
.pc-inv .inv.lock{background:var(--accent);color:var(--accent-ink)}.pc-inv .inv.lock small{color:inherit;opacity:.8}
.pc-inv.fixed{justify-content:center;align-items:center;min-height:36px;font-size:12px;color:var(--ink-3)}

/* each string's open note, above the diagram */
.dg .sname{font-family:var(--f-ui);font-size:11px;font-weight:600;fill:#8A96A3}

/* placeholders while shapes are worked out (seven and eight strings, other tunings) */
.pc.pending .pc-none{border-style:dashed}.pc.pending .rc-noshape{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.rv-wait{display:block;width:62px;height:70px;border-radius:8px;background:var(--raised)}.fm-wait{display:block;width:100px;height:130px;border-radius:10px;background:var(--raised)}
@media (prefers-reduced-motion:reduce){.pc.pending .rc-noshape{animation:none}}

/* the instrument rows at the top of the tuning menu */
.tm-inst{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tm-ik{display:flex;align-items:center;gap:10px}.tm-ik .lab{width:52px;margin:0}.tm-ik .seg button{min-width:36px;padding:0 10px}

/* a short string (the banjo's fifth): dotted where it has not started, with a peg where it does */
.dg .str.short{stroke:#8A96A3;opacity:.55}.dg .peg{fill:#CDD5DE}
.tm-ik .seg button{white-space:nowrap}

/* while the rest of a chord's shapes are being worked out (seven and eight strings) */
.working{animation:pulse 1.4s ease-in-out infinite}.f-wait{margin:0}
.filters.is-waiting fieldset,.filters.is-waiting .chk{opacity:.55}
@media (prefers-reduced-motion:reduce){.working{animation:none}}

/* saved tunings: the list at the top of the menu, and the save box under your own tuning */
.tm-mine{display:flex;align-items:center;gap:4px}.tm-mine .tm-row{flex:1;min-width:0}.tm-mine .tm-x{flex:0 0 32px;width:32px;height:32px;border-radius:8px;color:var(--ink-3)}.tm-mine .tm-x:hover{color:var(--ink)}
.tm-mine .tm-x[hidden]{display:none}
.tm-ask{gap:8px;border-color:var(--line-2);background:var(--bg)}.tm-ask span:first-child{flex:1}
.ts-save{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px dashed var(--line)}.ts-save .lab{margin:0}.ts-save p{margin:0}
.ts-savein{display:flex;gap:8px}.ts-savein input{flex:1;min-width:0;height:36px;padding:0 10px;border:1.5px solid var(--line-2);border-radius:9px;background:var(--bg);color:var(--ink);font-size:14.5px}
.ts-savein input:focus{outline:none;border-color:var(--accent)}.ts-savein input::placeholder{color:var(--ink-3)}

/* tuning pages */
.tn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px}
.tn-row{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"name notes go" "diff diff go";align-items:center;gap:2px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none}
.tn-row:hover{border-color:var(--line-2)}.tn-row b{grid-area:name;font-family:var(--f-display);font-size:19px;font-weight:600}
.tn-row .tn-notes{grid-area:notes;font-family:var(--f-m);font-size:13px;letter-spacing:.08em;color:var(--ink-2)}.tn-row .small{grid-area:diff}.tn-row svg{grid-area:go;color:var(--ink-3)}
.tn-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:32px;align-items:start;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.tn-name h1{margin:2px 0 6px;font-family:var(--f-display);font-size:56px;line-height:1}.tn-name .lab{margin:0}.tn-name p{margin:0 0 10px;color:var(--ink-2)}
.tn-big{font-family:var(--f-m);font-size:22px;letter-spacing:.14em;color:var(--ink)!important}
.tn-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.tn-act a{text-decoration:none}
.tn-strings{display:flex;flex-direction:column;gap:8px}.tn-strings p{margin:0}
.ts-row.ro{grid-template-columns:22px minmax(60px,1fr) 46px 64px}
.site-h nav a[data-href]{text-decoration:none}
@media (max-width:900px){.tn-head{grid-template-columns:minmax(0,1fr)}.tn-list{grid-template-columns:minmax(0,1fr)}}
/* ---------- the email sign-up and the gear links (spots.js). Both are switched off; these styles wait for them ---------- */
.spot-tag{display:inline-block;margin-left:12px;padding:3px 9px;border-radius:10px;border:1px dashed var(--warn);color:var(--warn);font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.spot-bar{display:flex;align-items:center;gap:16px;padding:10px 40px;background:rgba(245,196,81,.1);border-top:1px dashed var(--warn);color:var(--ink-2);font-size:13.5px}.spot-bar button{background:none;border:none;padding:0;min-height:32px;color:var(--ink)}
.spot-mail{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;row-gap:6px;align-items:center;padding:28px 40px;border-top:1px solid var(--line);background:var(--panel)}
.spot-mail h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.1}.spot-mail p{margin:4px 0 0;color:var(--ink-2);max-width:62ch}
.spot-mail.done{display:block}.spot-mail.done p{margin:0;color:var(--ink);font-weight:600}
.sm-form{display:flex;align-items:center;gap:10px}
.sm-form input[type="email"]{width:300px;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--bg);color:var(--ink);font-size:16px}.sm-form input[type="email"]::placeholder{color:var(--ink-3)}
.sm-form input[type="email"]:focus{outline:none;border-color:var(--accent)}
.sm-form .btn-p{min-height:46px;border-radius:12px}.sm-form .btn-p:disabled{opacity:.6}.sm-form .quiet{background:none;border:none;padding:0 6px;min-height:46px;font-size:14px}
.sm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sm-msg{grid-column:1/-1;justify-self:end;min-height:0;margin:0!important;font-size:14px}.sm-msg:empty{display:none}.sm-msg.bad{color:var(--warn)}
.gear-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gear{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none}.gear:hover{border-color:var(--line-2)}
.gear b{font-family:var(--f-display);font-weight:600;font-size:21px;line-height:1.1}.gear span{color:var(--ink-2);font-size:14.5px}
.gear .gear-at{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:8px;color:var(--accent);font-weight:600;font-size:14px}
@media (max-width:900px){.spot-mail{grid-template-columns:minmax(0,1fr)}.sm-form{flex-wrap:wrap}.sm-form input[type="email"]{flex:1 1 220px;width:auto}.sm-msg{justify-self:start}.gear-list{grid-template-columns:minmax(0,1fr)}.spot-mail,.spot-bar{padding-inline:16px}}
/* ---------- pages of words (privacy) ---------- */
.prose{max-width:72ch;display:flex;flex-direction:column;gap:14px;padding-bottom:40px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.prose h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:48px;line-height:1;color:var(--ink)}
.prose h2{margin:22px 0 0;font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.1;color:var(--ink)}
.prose p,.prose ul{margin:0}.prose ul{padding-left:22px;display:flex;flex-direction:column;gap:8px}.prose b{color:var(--ink);font-weight:600}
.prose .lead{font-size:19px;color:var(--ink)}.prose .muted{font-size:14px;margin-top:-6px}
.prose .draft{padding:12px 16px;border-radius:12px;border:1px dashed var(--warn);background:rgba(245,196,81,.08);color:var(--ink);font-size:15px}
.prose .gap{color:var(--warn);font-weight:600}
.site-f a.quiet{min-height:32px;display:inline-flex;align-items:center}
/* a modal chord's mode, beside its name */
.mode-tag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:9px;border:1px solid rgba(242,116,91,.45);color:var(--accent);font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
/* the Voicing menu: every shape, or triads voiced one way */
.vmenu{width:460px;gap:6px}.vmenu .lab{margin:8px 2px 0}.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.vopt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink);text-align:left}
.vopt b{font-weight:600;font-size:14.5px}.vopt span{font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.vopt:hover{border-color:var(--ink-3)}.vopt[aria-pressed="true"]{border-color:var(--accent)}.vopt[aria-pressed="true"] b{color:var(--accent)}
.vmenu p{margin:4px 2px 0}

/* ---------- the bar of search tools, above the search box: Play it on, and Show ---------- */
.sgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scontrols .lab{margin:0}
.sbar .tune-wrap .tbtn{height:40px;border-radius:10px;padding:0 12px;font-size:14px}
.sline{margin-top:4px}
.sbar .dotsctl .lab{display:none}          /* under Show, the dots switch reads Fingers or Intervals without its own label */
.at-left .strmenu,.at-left .tmenu{left:0;right:auto}
/* ---------- the progression builder (builder.js), from the round 1 design (Pages/build-builder-design.js) ---------- */
.toast a{color:#9E2F16;text-decoration:underline;text-underline-offset:2px}
.pbw{display:flex;flex-direction:column;gap:16px;padding:22px 40px 56px}
.pb-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pb-tt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 320px}.pb-tt p{margin:0}
.pb-name{width:100%;max-width:640px;margin:0 0 0 -8px;padding:2px 8px;border:1px solid transparent;border-radius:10px;background:none;font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1.05;color:var(--ink)}
.pb-name::placeholder{color:var(--ink-3)}.pb-name:hover{border-color:var(--line)}.pb-name:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.pb-title .btn-o{min-height:40px;padding:0 14px}.pb-title .btn-o:disabled,.btransport button:disabled{opacity:.4;cursor:default}
.btransport{padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;align-items:flex-end;row-gap:12px}
.btransport .sgroup{align-items:flex-end}.btransport .sgroup>.lab{align-self:center}
.play-big{min-height:48px;padding:0 22px;font-size:16px}.play-big[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tgl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-weight:600}
.tgl[aria-pressed="true"]{color:var(--ink);border-color:var(--ink-3);background:var(--raised)}
.stepper{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 5px;border-radius:10px;border:1px solid var(--line-2)}.stepper b{min-width:3ch;text-align:center;font-size:17px;font-variant-numeric:tabular-nums}
.ib.xs{width:30px;height:30px;border-radius:8px}.ib:disabled{opacity:.35;cursor:default}
.bkey{display:flex;gap:6px}.bkey .seg button{min-height:32px}
.counter{align-self:center;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}.counter b{color:var(--accent)}
.pb-work{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.pb-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.tl{display:flex;flex-direction:column;gap:4px}
.tl-bars{position:relative;height:14px}.tl-bars span{position:absolute;top:0;font-size:11px;color:var(--ink-3);transform:translateX(4px);font-variant-numeric:tabular-nums}
.tl-row{position:relative;display:flex;height:40px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.tl-seg{display:flex;align-items:center;gap:6px;min-width:0;padding:0 8px;border-right:1px solid var(--line);background:var(--panel);overflow:hidden;white-space:nowrap}
.tl-seg:last-of-type{border-right:none}.tl-seg b{font-family:var(--f-display);font-size:16px}.tl-num{font-family:var(--f-display);font-size:13px;color:var(--ink-3)}
.tl-seg.picked{background:var(--raised)}.tl-seg.on{background:rgba(242,116,91,.18)}.tl-seg.on b{color:var(--accent)}
.tl-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 8px var(--accent);will-change:left}      /* moved every frame, from the audio clock */
.blane{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:12px}
.bslot{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.bslot.is-sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.bslot.is-playing{border-color:var(--accent);background:#221A18;box-shadow:0 0 0 1px var(--accent),0 0 24px rgba(242,116,91,.25)}
.bslot.half::before{content:'';position:absolute;left:14px;right:14px;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px)}
.bslot.none{justify-content:flex-start;border-style:dashed}
.bs-top{display:flex;align-items:center;gap:4px}.bs-bar{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bs-len{min-height:30px;padding:0 24px 0 8px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ADB8C4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;appearance:none;color:var(--ink);font:inherit;font-size:13px;font-weight:600}
.bs-mw{position:relative}.bs-mw>.ib{border-color:transparent}.bs-mw>.ib[aria-expanded="true"],.bs-mw>.ib:hover{border-color:var(--line-2)}
.bs-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;min-width:190px;padding:6px;background:var(--raised);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.bs-menu button,.bs-menu a{display:flex;align-items:center;min-height:36px;padding:0 10px;border:none;border-radius:8px;background:none;color:var(--ink);font-weight:500;font-size:14px;text-align:left;text-decoration:none}
.bs-menu button:hover:not(:disabled),.bs-menu a:hover{background:var(--line)}.bs-menu button:disabled{color:var(--ink-3);cursor:default}.bs-menu .danger{color:var(--accent)}
.bs-name{display:flex;align-items:baseline;gap:8px;min-width:0}.bs-name .num{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--ink-3);white-space:nowrap}
.bs-nm{min-width:0;padding:0;border:none;background:none;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1;color:var(--ink);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-nm:hover{color:var(--accent)}.bslot.none .bs-name b{font-family:var(--f-display);font-size:24px}
.now{display:none;margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 6px}.bslot.is-playing .now{display:inline}
.bs-sub{margin:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-dg{display:flex;justify-content:center;padding:2px 0;border:1px solid transparent;border-radius:10px;background:none;color:inherit}.bs-dg:hover{border-color:var(--line-2);background:var(--bg)}
.bs-dg .lab-i{display:none}.bs-dg .mini,.bs-dg .minifret,.bs-dg .minidot,.bs-dg .win{cursor:ew-resize}.bs-dg .nt{transform-box:fill-box;transform-origin:center}      /* a note flashes where it is */
.bs-foot{display:flex;align-items:center;gap:4px}.bs-count{flex:1;text-align:center;font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ib.lock[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.badd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:220px;border:1px dashed var(--line-2);border-radius:14px;background:transparent;color:var(--ink-2)}
.badd b{font-family:var(--f-display);font-size:20px;color:var(--ink)}.badd:hover{border-color:var(--ink-3)}.badd.on{border-color:var(--accent);color:var(--accent)}.badd.on b{color:var(--accent)}
.pb-card{display:flex;flex-direction:column;gap:12px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.pb-card h2,.mv summary h2{margin:0;font-family:var(--f-display);font-size:22px}
.pb-card-h{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}.pb-card-h>div{flex:1 1 300px}.pb-card-h p{margin:4px 0 0;font-size:14px;max-width:60ch}
.win-lab{align-self:center;font-size:14px;color:var(--ink-2);white-space:nowrap}.win-lab b{color:var(--accent)}
.pb-card-h .btn-o[aria-pressed="true"]{background:var(--raised);border-color:var(--ink-3)}
.pb-win{overflow-x:auto}
.wstrip{display:block;width:100%;min-width:520px;height:auto;cursor:crosshair;touch-action:none;user-select:none}.wstrip text{font-family:var(--f-ui)}
.wstrip .wfret{stroke:var(--line-2);stroke-width:1}.wstrip .wnut{stroke:var(--grid);stroke-width:3}.wstrip .winlay{fill:var(--line-2)}
.wstrip .wsel{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}.wstrip .wlab{font-family:var(--f-display);font-size:13px;font-weight:600;fill:var(--accent)}.wstrip .wopen{fill:none;stroke:var(--ink-2);stroke-width:1.4}
.mv summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px}.mv summary::-webkit-details-marker{display:none}.mv summary span{font-size:14px}
.mv summary h2::after{content:' ▾';color:var(--ink-3);font-size:16px}.mv[open] summary h2::after{content:' ▴'}
.mv-map{overflow-x:auto;padding-bottom:4px}.mv-heads{display:flex;width:max-content}.mv-heads>span{display:flex;align-items:baseline;justify-content:center;gap:5px;width:132px;flex:none}
.mv-heads b{font-family:var(--f-display);font-size:18px}.mv-heads .num{font-family:var(--f-display);font-size:13px;color:var(--ink-3)}
.map{display:block}.map text{font-family:var(--f-ui)}.map .oct{stroke:var(--line);stroke-dasharray:2 4}.map .octl{font-size:9px;fill:var(--ink-3)}
.map .held{stroke:var(--ink-2);stroke-width:3;stroke-linecap:round}.map .move{stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}.map .stepbg{fill:var(--bg);stroke:var(--accent);stroke-width:1}.map .step{font-size:10.5px;font-weight:600;fill:var(--accent)}
.map .pill{font-size:11px}
.bpanel{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 24px);overflow:auto;padding:16px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.bpanel.quiet{box-shadow:none;border-color:var(--line)}.bpanel>p{margin:0}
.bp-h{display:flex;align-items:flex-start;gap:8px}.bp-h h2{margin:2px 0 0;font-family:var(--f-display);font-size:28px;line-height:1}.bpanel.quiet .bp-h h2{font-size:22px}
.bp-tabs{display:flex}.bp-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}.bp-tabs button[aria-pressed="true"] .muted{color:#56606B}
.sw-grp{display:flex;flex-direction:column;gap:8px}.sw-grp h3{margin:0}.sw-gh{display:flex;align-items:center;gap:8px;justify-content:space-between}.sw-gh .seg button{min-height:30px;padding:0 10px;font-size:13px}
.sw-list{display:flex;flex-direction:column;gap:6px}
.bsub{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink);text-align:left}
.bsub:hover{border-color:var(--ink-3);background:var(--raised)}.bsub svg{flex:none}
.bsub-t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.bsub-t b{font-family:var(--f-display);font-size:20px;line-height:1.05}.bsub-t .num{font-family:var(--f-display);font-size:14px;color:var(--ink-3)}
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bshape{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink)}
.bshape:hover{border-color:var(--ink-3);background:var(--raised)}.bshape.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.bsh-t{min-height:16px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.bshape.cur .bsh-t{color:var(--accent)}
.bshape code{font-family:var(--f-m);font-size:12px;color:var(--ink-2)}
.bsearch{min-height:48px;padding:4px 12px}.bsearch input{height:36px;font-size:16px;min-width:0}
.kcs{display:flex;flex-wrap:wrap;gap:6px}
.kc{display:inline-flex;align-items:baseline;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink)}.kc:hover{border-color:var(--ink-3);background:var(--raised)}
.kc b{font-family:var(--f-display);font-size:18px}.kc .num{font-family:var(--f-display);font-size:13px;color:var(--ink-3)}.kc[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.kc[aria-pressed="true"] .num{color:#56606B}
.bsaved{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.bsaved li{display:flex;align-items:center;gap:6px}
.bsaved a{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);color:var(--ink);text-decoration:none}.bsaved a:hover{border-color:var(--ink-3);background:var(--raised)}
.bsaved a b{font-weight:600}.bsaved a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-grid{display:flex;flex-direction:column;gap:14px}.new-grid .pb-card p{margin:0}
.nk{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:10px}.nk h2{margin-right:4px}.nk p{flex-basis:100%}
.new-grid .kcs .kc{min-width:48px;justify-content:center}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tpl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);text-align:left}
.tpl:hover{border-color:var(--ink-3)}.tpl-n{font-family:var(--f-display);font-size:22px;line-height:1.1}.tpl-c{font-family:var(--f-display);font-size:16px;color:var(--ink-2);word-spacing:6px}
.pbw .blane .badd:only-child{max-width:220px}
.dots-i .bs-dg .lab-i{display:block}.dots-i .bs-dg .lab-f{display:none}
@media (max-width:1100px){.pb-work{grid-template-columns:minmax(0,1fr)}.bpanel{position:static;max-height:none}}
@media (max-width:760px){.pbw{padding-inline:16px}.pb-name{font-size:32px}}
.bs-count{font-weight:600}.bs-foot .ib:disabled{opacity:.3}
/* the pattern picker */
.pat-wrap{position:relative}
.patbtn{min-width:230px;max-width:300px;gap:8px;justify-content:flex-start}.patbtn b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.patbtn .pb-g,.patbtn .pb-m{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}.patbtn svg{flex:none;color:var(--ink-3)}
.patmenu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;display:flex;flex-direction:column;gap:8px;width:min(480px,calc(100vw - 32px));max-height:min(540px,64vh);padding:10px;background:var(--raised);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.pm-search{min-height:46px;padding:3px 12px}.pm-search input{height:36px;font-size:16px;min-width:0}
.pm-list{overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.pm-g{display:flex;flex-direction:column;gap:4px}.pm-g>.lab{margin:4px 6px 0;color:var(--accent)}
.pm-g h4{margin:8px 6px 2px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pm-row{display:flex;align-items:flex-start;gap:6px;border-radius:12px}.pm-row:hover,.pm-row:focus-within{background:var(--line)}.pm-row.cur{background:var(--accent-soft)}
.pm-pick{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:none;border-radius:12px;background:none;color:var(--ink);text-align:left}
.pm-pick:focus-visible{outline-offset:-2px}
.pm-t{display:flex;align-items:baseline;gap:8px}.pm-t b{font-weight:600;font-size:15px}.pm-row.cur .pm-t b{color:var(--accent)}
.pm-meter{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pm-not{font-family:var(--f-m);font-size:12.5px;color:var(--ink-2);white-space:pre;overflow:hidden;text-overflow:ellipsis}
.pm-about{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.pm-hear{margin-top:8px;margin-right:6px;flex:none;border-color:var(--line-2)}.pm-hear:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pm-foot{margin:0 6px}.pm-none{margin:10px}
/* ---------- the PDF builder (sheet.js), design round 2 (Pages/build-sheet-design.mjs, 1 October 2026): the finder beside the sheet, dark
   pages with the Library's cards, a picked card's tools on the page, a bar of layout above the pages with a drawer of more ---------- */
.bd{display:flex;flex-direction:column;gap:12px;padding:14px 40px 56px}
.bd-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bd-tt{min-width:0;flex:0 1 auto}.bd-tt p{margin:2px 0 0}
.bd-tt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.bd-tune{display:flex;align-items:center;gap:10px;margin-top:-4px}.bd-tune .tune-wrap{min-width:0}.bd-top .btn-o,.bd-top .btn-p{min-height:38px;padding:0 13px}.bd-top a.btn-o{text-decoration:none}.bd-top a.btn-o.off{opacity:.4;pointer-events:none}.bd-tune .lab{white-space:nowrap}.bd-name{margin:0;max-width:28vw;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bd-name.ph{color:var(--ink-3)}.bd-tt p{margin:0;font-size:14px}
/* the pages are the main space: on the left, as big as the room allows; the Add to the page panel is a column on the right. The builder
   runs edge to edge (the Library's 1360 px cap is for its cards), the panel grows with the screen, and a page may show up to 120 % */
main.lib:has(#sheet){max-width:none}
.bd-work{display:grid;grid-template-columns:minmax(0,1fr) clamp(460px,32vw,660px);gap:22px;align-items:start}.bd-work.wide{grid-template-columns:minmax(0,1fr)}
/* the finder: the Library's search, its chips and its cards, in a column that stays on the screen while the pages scroll */
.bd-find{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;max-height:calc(100vh - 24px);overflow:hidden;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.bd-find-h{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}.bd-find-h>.bd-lbl{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 100%}
.bd-tabs{flex:1 1 auto}.bd-tabs button{min-height:34px;padding:0 11px;font-size:13.5px}.bd-hide{flex:none;min-height:34px;padding:0 10px 0 12px;gap:4px;font-size:13.5px}
.bd-find-b{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0;overflow:auto;overflow-x:hidden;margin:0 -16px -16px;padding:2px 16px 16px}.bd-find-b>p{margin:0}
.bd-find-b>.bd-box{position:sticky;top:0;z-index:6}
.bd-box{min-height:52px;background:var(--bg)}.bd-box input{font-size:17px}
.bd-facets .facets{padding:8px 12px;gap:6px;background:var(--bg)}.bd-facets .frow{grid-template-columns:70px minmax(0,1fr)}
.bd-results.cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.bd-results .pc{padding:12px 10px 10px;cursor:pointer}
.bd-results .pc:hover{border-color:var(--line-2);box-shadow:0 8px 22px rgba(0,0,0,.35)}.bd-results .pc.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px rgba(242,116,91,.14)}.bd-results .pc.dragging{opacity:.5}
.bd-results .pc.rich .pc-t{font-size:21px}.bd-tip{margin:0}.bd-why{margin:0}.bd-why b{color:var(--ink-2)}
.bd-results .pc-act{flex-wrap:wrap}.bd-results .pb.play,.bd-results .pb.arp{flex:1 1 40%}
.pb.add.big{flex:1 1 100%;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pb.add.big:hover{background:var(--accent);filter:brightness(1.08)}
.pb.add.big.on{background:transparent;border-color:#6CC592;color:#6CC592}.pb-again{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--ink-3);text-decoration:underline}
.bd-starts{display:flex;flex-direction:column;gap:8px}.bd-start-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bd-start{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg);color:var(--ink);text-align:left;cursor:pointer}.bd-start:hover{border-color:var(--accent)}
.bd-start b{font-family:var(--f-display);font-size:19px;line-height:1.1}.bd-start span{font-size:12.5px;color:var(--ink-3);line-height:1.3}
.bd-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bd-extras .bd-start b{display:flex;align-items:center;gap:8px;font-size:18px}
.bd-sets{display:flex;flex-direction:column;gap:4px}.bd-sets-h{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding-bottom:4px;border-bottom:1px solid var(--line)}.bd-sets-h:first-child{margin-top:0}
.bd-setsave{display:flex;align-items:center;gap:8px;padding:2px 0 6px}.bd-setbox{min-height:44px;margin-bottom:4px}.bd-setbox input{font-size:15px;height:32px}
.bd-srow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:2px 8px;border-radius:10px;border:1px solid transparent}.bd-srow:hover{background:var(--raised)}.bd-srow.open{border-color:var(--line-2);background:var(--bg)}
.bd-srow-h{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 0;border:none;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.bd-srow-h svg{flex:none;width:14px;height:14px;color:var(--ink-3);transition:transform .15s}.bd-srow.open .bd-srow-h svg{transform:rotate(180deg)}
.bd-srow-h b{flex:none;font-family:var(--f-display);font-size:18px;line-height:1.1;white-space:nowrap}.bd-srow-h span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bd-srow .btn-o.sm{white-space:nowrap}
.bd-srow-b{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:2px 0 8px 22px}.bd-set-wrap{display:flex;flex-wrap:wrap;gap:2px 4px}.bd-srow-b .sh-row.small{gap:14px}
.bd-mine{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.bd-set{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.bd-set.mine{border-color:var(--line-2)}
.bd-set-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bd-set-h>div:first-child{display:flex;flex-direction:column;gap:1px;flex:1 1 200px;min-width:0}.bd-set-h b{font-family:var(--f-display);font-size:20px;line-height:1.1}
.bd-set-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.bd-set-ctl .seg button{min-height:30px;padding:0 9px;font-size:13px}.bd-set-ctl .sel{min-height:34px;padding:0 10px}.bd-set-ctl select.sel{padding:0 30px 0 10px;min-width:72px}.bd-set-ctl .sh-in{width:70px;flex:none;height:34px}
.bd-setname{flex:1 1 160px;max-width:260px}
.bd-set-row{display:flex;gap:2px;overflow-x:auto;padding-bottom:2px}.bd-set-c{display:flex;flex-direction:column;align-items:center;flex:none}.bd-set-c i{font-style:normal;font-family:var(--f-display);font-size:14px;color:var(--ink-2)}
.bd-ta{font-size:13px}.bd-parsed{display:flex;flex-direction:column;gap:6px}.bd-parsed p{margin:0}.bd-parsed .kc{min-height:32px;padding:0 10px;border-radius:9px}
.bd-draw{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.bd-draw .sh-draw{flex:1 1 auto}.bd-draw-side{flex:none;width:236px;display:flex;flex-direction:column;gap:6px}.bd-draw-side .pc{cursor:default}
.bd-open{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;border:1px solid var(--line-2);border-right:none;border-radius:16px 0 0 16px;background:var(--panel);color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.4);cursor:pointer}
.bd-open b{font-family:var(--f-display);font-size:18px;writing-mode:vertical-rl;transform:rotate(180deg)}
/* the sheet's bar and drawer */
.bd-sheet{display:flex;flex-direction:column;gap:12px;min-width:0}
.bd-lay{position:sticky;top:8px;z-index:30;display:flex;align-items:flex-end;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* the three panels: page setup, instrument, quiz */
.bd-lay-g{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap}
/* several picked things act together from the bar; the marquee is the rectangle dragged over a page */
.bd-multi{display:flex;align-items:center;gap:2px;min-height:36px;padding:0 4px 0 10px;border-radius:10px;background:var(--accent-soft);border:1px solid rgba(242,116,91,.45)}.bd-multi b{margin-right:6px;font-family:var(--f-display);font-size:16px;white-space:nowrap}
.bd-multi button{display:inline-flex;align-items:center;gap:3px;min-height:30px;padding:0 8px;border:none;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}.bd-multi button:hover{background:rgba(128,128,128,.2)}.bd-multi .danger{color:var(--accent)}.bd-multi svg{width:14px;height:14px}
.bd-marquee{position:fixed;z-index:50;border:1px solid var(--accent);background:rgba(242,116,91,.12);pointer-events:none;border-radius:2px}
.bd-pages .sp{user-select:none}.bd-pages .sp [data-sedit]{user-select:text}.bd-pan{position:relative}.bd-pan-btn{min-width:130px}.bd-kind-btn{min-width:150px}
.bd-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:380px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);text-align:left}.bd-pop.wide{width:560px}
.bd-pop-r{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;width:100%}.bd-pop .lab{margin:0}.bd-pop p{margin:0}.bd-pop .lab:not(:first-child){margin-top:6px}
.bd-pop .seg{flex-wrap:wrap}.bd-pop .seg button{min-height:30px;padding:0 10px;font-size:13px;white-space:nowrap}.bd-pop select.sel{max-width:100%}.bd-pop .tune-wrap{max-width:100%}
.bd-ctl{display:flex;flex-direction:column;gap:4px}.bd-ctl>span:first-child{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bd-ctl .sel{min-height:36px;padding:0 10px;font-size:14px}.bd-ctl .seg button{min-height:30px;padding:0 10px;font-size:13px}.bd-ctl .stepper{min-height:36px}
.bd-drawer{display:flex;flex-direction:column;gap:14px;padding:16px 18px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px}
.bd-drow{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}.bd-drow select.sel{max-width:260px}.bd-drow .tune-wrap{max-width:100%}.bd-drow .seg button{min-height:30px;padding:0 10px;font-size:13px;white-space:nowrap}.bd-drow .lab{margin:0}
.bd-dcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;padding-top:12px;border-top:1px solid var(--line)}
.bd-dcol{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}.bd-dcol .seg{flex-wrap:wrap}.bd-dcol .seg button{min-height:30px;padding:0 10px;font-size:13px;white-space:nowrap}
.bd-dcol .sh-blocks{display:grid;grid-template-columns:repeat(2,max-content);gap:6px}.bd-dcol .sh-blocks .btn-o{white-space:nowrap;justify-content:flex-start}.bd-dcol p{margin:0}.bd-dcol .lab:not(:first-child){margin-top:6px}
.bd-dcol select.sel{max-width:100%}.bd-dcol .tune-wrap{max-width:100%}
.bd-pages{display:flex;flex-direction:column;align-items:center;gap:24px;min-width:0}.bd-pages.dropping .sp{outline:2px dashed var(--accent);outline-offset:-2px}
.bd-pill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-size:13.5px;white-space:nowrap}
/* the Cards menu: each kind drawn small, as it would be on the page */
.bd-kinds{position:relative}
.bd-kmenu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:420px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bd-kind{display:flex;align-items:center;gap:14px;padding:8px;border:1px solid transparent;border-radius:10px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.bd-kind:hover{background:var(--raised)}.bd-kind.cur{border-color:var(--accent)}
.bd-kpic{position:relative;flex:none;overflow:hidden;border-radius:6px;background:var(--bg);border:1px solid var(--line)}.bd-kpic .sp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--k));transform-origin:50% 50%;pointer-events:none}.bd-kpic .sr{display:flex}
.bd-ktext{display:flex;flex-direction:column;gap:2px;min-width:0}.bd-ktext b{font-family:var(--f-display);font-size:18px;line-height:1.1}.bd-ktext span{font-size:12.5px;color:var(--ink-3);line-height:1.3}
.sh-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sh-row .seg button{min-height:32px;padding:0 11px;font-size:13.5px}
.sh-in{height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;min-width:0;flex:1 1 120px}.sh-in:focus{outline:none;border-color:var(--accent)}
.shk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);cursor:pointer}.shk input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.sh-blocks{display:flex;flex-wrap:wrap;gap:6px}.sh-blocks .btn-o{min-height:34px;padding:0 11px;font-size:13.5px;border-radius:10px}
.sh-ta{width:100%;min-height:84px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;font-family:var(--f-m);font-size:13px;line-height:1.4;resize:vertical}.sh-ta:focus{outline:none;border-color:var(--accent)}
.sh-num{flex:0 0 64px;width:64px}
.sh-draw{display:flex;gap:14px;align-items:flex-start}.sh-draw svg{flex:none;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.sh-draw .dfret{stroke:var(--line-2);stroke-width:1}.sh-draw .dnut{stroke:var(--grid);stroke-width:4}.sh-draw .dstr{stroke:var(--ink-3);stroke-width:1.2}
.sh-draw .dhit{fill:transparent;cursor:pointer}.sh-draw .dhit:hover{fill:var(--accent-soft)}
.sh-draw .dd{fill:var(--accent);pointer-events:none}.sh-draw .do{fill:none;stroke:var(--ink-2);stroke-width:1.8;pointer-events:none}.sh-draw .dx{fill:var(--ink-3);font-size:15px;pointer-events:none}.sh-draw .dpos{fill:var(--ink-2);font-size:11px;font-weight:600}
.sh-dside{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.sh-dname{margin:0;display:flex;flex-direction:column;gap:2px;min-height:44px}.sh-dname b{font-family:var(--f-display);font-size:26px;line-height:1}
.bd .btn-o:disabled,.bd .btn-p:disabled{opacity:.4;cursor:default}.btn-o.danger{color:var(--accent)}
/* a page that is coming */
.soon-page{max-width:680px;margin:0 auto;padding:80px 40px 100px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.soon-page h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:46px;line-height:1.05}.soon-page p{margin:0;color:var(--ink-2);font-size:17px;max-width:58ch}
.soon-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:1180px){.bd-work{grid-template-columns:minmax(0,1fr) 380px}}
@media (max-width:900px){.bd-work{grid-template-columns:minmax(0,1fr)}.bd-find{position:static;max-height:none}}
@media (max-width:760px){.bd{padding-inline:16px}.bd-results.cards{grid-template-columns:minmax(0,1fr)}.bd-start-row{grid-template-columns:minmax(0,1fr)}}
/* ---------- the pages: real paper in millimetres, shrunk to fit the screen, printed at full size. Dark, like the site, with their own
   tokens so the site's light look leaves them alone; .sp.light is the look that saves ink ---------- */
.sp-frame{position:relative;width:100%;overflow:hidden;border-radius:2px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.sp{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--s,.8));font-family:var(--f-ui);line-height:1.3;
  --bg:#0D1014;--panel:#151A20;--raised:#1C232B;--line:#29323C;--line-2:#3A4552;--ink:#EEF2F6;--ink-2:#ADB8C4;--ink-3:#8A96A3;--grid:#CDD5DE;--grid-soft:#4A5562;--ring:rgba(255,255,255,.34);--accent:#F2745B;--accent-soft:rgba(242,116,91,.15);--warn:#F5C451;
  --rule:#3A4552;--ph:#5b6570;--wk:#DDE3E9;--wk-l:#56616D;--bk:#0D1014;
  background:var(--bg);color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sp.light{--bg:#fff;--panel:#fff;--raised:#f2f4f6;--line:#dde1e6;--line-2:#c4cbd3;--ink:#15181c;--ink-2:#48505a;--ink-3:#6b7480;--grid:#1f242a;--grid-soft:#a9b1bb;--ring:rgba(0,0,0,.22);--accent:#D24E2D;--accent-soft:rgba(210,78,45,.13);--warn:#9a6d00;
  --rule:#b8bfc7;--ph:#b1b8c1;--wk:#fff;--wk-l:#8a949f;--bk:#15181c}
.sp .dg .wk{fill:var(--wk);stroke:var(--wk-l)}.sp .dg .bk{fill:var(--bk)}.sp.light .dg .barre{opacity:.28}
.sp.bw .dg,.sp.bw .slg-g svg{filter:grayscale(1) contrast(1.05)}
.sp-body{position:absolute;display:flex;flex-direction:column}
.sp-head{position:relative;flex:none;margin-bottom:4mm}
.sp-head h1{margin:0;height:11mm;font-family:var(--f-display);font-weight:700;font-size:8.6mm;line-height:11mm;white-space:nowrap;overflow:hidden;color:var(--ink)}
.sp-head p{margin:0;height:6mm;font-size:3.9mm;line-height:6mm;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.sp-names{height:9mm;display:flex;gap:10mm;align-items:flex-end;font-size:3.3mm;color:var(--ink-2)}.sp-names span{flex:2;border-bottom:.3mm solid var(--rule);padding-bottom:1mm}.sp-names span:last-child{flex:1}
.sp-ver{position:absolute;right:0;top:2mm;padding:.6mm 2.4mm;border:.3mm solid var(--ink);border-radius:1.2mm;font-size:3.2mm;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.sp-head.with-qr .sp-ver{right:23mm}
.sp [data-sedit]{cursor:text}.sp [data-sedit]:empty::before{content:attr(data-ph);color:var(--ph)}.sp [data-sedit]:focus{outline:.4mm dashed var(--accent);outline-offset:.8mm}
.sr{display:flex;flex:none}
/* the compact card (and the answer page's) */
.sc{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;border:.25mm solid var(--line);border-radius:2mm;background:var(--panel);overflow:hidden;cursor:grab}
.sc-n{display:block;flex:none;width:100%;font-family:var(--f-display);font-weight:700;color:var(--ink);text-decoration:none;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-s{display:block;flex:none;width:100%;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.sc-d{flex:none;display:flex;justify-content:center;margin-top:1mm}.sc-d svg{width:100%;height:100%}
.sc-c{display:block;flex:none;width:100%;height:4.2mm;font-size:2.9mm;line-height:4.2mm;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-blank{display:block;flex:none;width:62%;align-self:flex-start;border-bottom:.3mm solid var(--rule)}
.sc.fl{border:.3mm dashed var(--line-2);border-radius:0;justify-content:center}.sc.fl .fl-n{text-align:center;margin-top:2mm}.sc.fl .sc-blank{align-self:center}
.sc.none{justify-content:center;font-size:3mm;color:var(--ink-3);text-align:center}
.sc.sl{flex-direction:row;align-items:stretch;gap:5mm;width:100%}
.sl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.6mm;padding-top:1mm}
.sl-h{display:flex;align-items:baseline;gap:3mm}.sl-h .sc-n{width:auto;font-size:6.4mm}.sl-h .sc-s{width:auto;font-size:3.4mm}.sl-h .sc-blank{width:40mm;height:7mm}
.sl-f{margin:0;display:flex;flex-wrap:wrap;gap:1mm 5mm;font-size:3.3mm;color:var(--ink-2)}.sl-f b{font-weight:600;color:var(--ink);margin-right:1mm}
.sl-c{margin:0;font-size:3.3mm;color:var(--ink)}
.sl-lines{margin-top:auto;display:flex;gap:7mm;font-size:3.2mm;color:var(--ink-2);padding-bottom:1mm}
.sl-box::before{content:'';display:inline-block;width:3.4mm;height:3.4mm;border:.3mm solid var(--ink-3);border-radius:.6mm;margin-right:1.6mm;vertical-align:-.7mm}
.sc-num{position:absolute;top:.8mm;right:1.4mm;z-index:1;min-width:4.6mm;height:4.6mm;padding:0 1mm;border-radius:2.3mm;background:var(--ink);color:var(--bg);font-size:2.9mm;font-weight:700;line-height:4.6mm;text-align:center}
.sc.sl .sc-num{right:auto;left:.8mm}
.sc-snd{margin-left:1.6mm;font-family:var(--f-ui);font-weight:500;font-size:.4em;color:var(--ink-3);white-space:nowrap}
.sc-pair{flex:none;display:flex;gap:2mm;align-items:flex-start}.sc-pair>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.sc-inst{display:block;height:3.4mm;font-size:2.4mm;line-height:3.4mm;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;max-width:100%}
.sc-no{margin:0;align-self:center;font-size:2.6mm;color:var(--ink-3)}
/* the Library's card on paper: the site's card, with the head 15 mm tall and the picture as wide as the card, and nothing to press */
.sc.lib{padding:3mm;align-items:stretch}.sc.lib .pc{display:flex;flex-direction:column;gap:1.5mm;width:100%;height:100%;padding:0;border:none;border-radius:0;background:none;box-shadow:none;transition:none}
.sc.lib .pc-h{height:15mm;gap:.6mm;overflow:hidden}.sc.lib .pc-t{font-size:7.6mm;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:unset}.sc.lib .pc-link::after{content:none}
.sc.lib .pc-sub{font-size:3.2mm;line-height:1.3;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sc.lib .pc-dg{padding:0;display:block;width:100%}.sp .pc-dg .lab-f,.sp .pc-dg .lab-i,.sp .pc-dg .lab-n{display:block!important}     /* the page shows what the sheet says, not what the site's Dots switch says */.sc.lib .pc-dg .dgwrap{display:block;width:100%}.sc.lib .pc-dg svg.dg{display:block;width:100%;height:auto}
.sc.lib .sc-pair{width:100%;gap:2mm}.sc.lib .sc-pair>div{flex:1 1 0}.sc.lib .sc-pair .pc-dg{width:100%}
.sc.lib .sc-nopic svg{width:100%;height:auto}
.sc.lib .sc-c{margin:0;height:5mm;line-height:5mm;font-size:3.1mm}
.sc.lib .dgwrap.lefty svg.dg{transform:scaleX(-1)}.sc.lib .dgwrap.lefty svg.dg text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
.sc.lib .dg .ft{font-size:11px}.sc.lib .dg .ft.note{font-size:12px}
/* blocks */
.sb{position:relative;flex:none}
.sh h2{margin:0;height:10mm;font-family:var(--f-display);font-weight:700;font-size:6mm;line-height:10mm;color:var(--ink);border-bottom:.3mm solid var(--line-2);white-space:nowrap;overflow:hidden}
.st p{margin:0;font-size:3.7mm;line-height:5.2mm;white-space:pre-wrap;color:var(--ink)}
.sn{display:flex;flex-direction:column}.sn>span:not(.sc-tools){flex:none;height:8mm;border-bottom:.25mm solid var(--rule)}
.sst,.scl,.sbx,.stb,.slg{overflow:hidden;cursor:grab}
.sst-h,.scl-h,.slg-h{display:flex;align-items:baseline;gap:3mm;height:6mm;font-size:3.1mm;color:var(--ink-3)}.sst-h b,.scl-h b,.slg-h b{font-family:var(--f-display);font-size:4.4mm;color:var(--ink)}
.sst-t{width:100%;height:14mm;border-collapse:collapse;table-layout:fixed}
.sst-t td{position:relative;border:.25mm solid var(--line-2);border-left-style:dotted;text-align:center;vertical-align:bottom;padding:0 0 1mm}.sst-t td.bt{border-left:.5mm solid var(--ink)}.sst-t td:last-child{border-right:.5mm solid var(--ink)}
.sst-t i{position:absolute;top:.6mm;left:0;right:0;font-style:normal;font-size:2.6mm;color:var(--ink-3)}.sst-t td.bt i{font-weight:700;color:var(--ink)}
.sst-t b{font-size:6.4mm;line-height:1;font-weight:600;color:var(--ink)}.sst-t .lt b{font-size:4.6mm;color:var(--ink-2)}.sst-t .ch b{font-size:4.6mm}.sst-t .mu b{color:var(--ink-2)}.sst-t .fg b{font-family:var(--f-m);font-size:3.6mm}
.scl-h{height:9mm;align-items:center}.scl-h span{line-height:1.25}
.scl-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:3.3mm}.scl-t th,.scl-t td{height:6.6mm;border:.25mm solid var(--line-2);padding:0 1.6mm;text-align:left}
.scl-t th{font-weight:600;background:var(--raised);font-size:2.9mm}.scl-t th i{font-style:normal;font-weight:400;color:var(--ink-3)}.scl-t th:first-child,.scl-t td:first-child{width:30%;font-weight:600}
.sbx-g{display:grid;gap:4mm}.sbx-c{display:flex;flex-direction:column;align-items:center;gap:1mm}.sbx-c .sc-blank{height:6mm;width:70%;align-self:center}.sbx-c .sc-d{width:100%;margin:0}
.sp .sc-d.blank .str,.sbx .str{opacity:.7}
.stb-s{position:relative}.stb-s i{position:absolute;left:0;right:0;height:0;border-top:.25mm solid var(--ink-3)}.stb-s::before,.stb-s::after{content:'';position:absolute;top:0;bottom:0;border-left:.4mm solid var(--ink)}.stb-s::after{right:0}
.stb-t{position:absolute;left:1.6mm;top:50%;transform:translateY(-50%);font-family:var(--f-display);font-weight:700;line-height:1.05;color:var(--ink-2);z-index:1;background:var(--bg);padding:0 .6mm}
.slg-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8mm}.slg-g>div{display:flex;align-items:center;gap:2.4mm;height:7mm;font-size:3mm;line-height:1.2;color:var(--ink-2)}.slg-g svg{flex:none;width:5.4mm;height:5.4mm}
.sp-foot{position:absolute;display:flex;justify-content:space-between;gap:4mm;font-size:2.7mm;line-height:3.4mm;color:var(--ink-3);border-top:.2mm solid var(--line);padding-top:1.2mm}.sp-foot a{color:inherit;text-decoration:none}
.sp-empty{margin-top:8mm;min-height:80mm;display:flex;flex-direction:column;gap:2mm;align-items:center;justify-content:center;text-align:center;border:.4mm dashed var(--line-2);border-radius:4mm;color:var(--ink-3);font-size:3.6mm}.sp-empty b{font-family:var(--f-display);font-size:6mm;color:var(--ink-2)}
.sp.anskey .sp-head h1{font-size:6.4mm}.sp.anskey .sc-n{text-align:center}
/* making it (the screen only): the picked thing, its tools above it, drag marks */
.sp .picked{outline:.55mm solid var(--accent);outline-offset:.5mm;z-index:3}.sp .sc.picked,.sp .sb.picked{overflow:visible}
.sc-tools{position:absolute;top:1mm;right:1mm;display:none;gap:.8mm;z-index:2}.sp [data-i]:hover>.sc-tools{display:flex}.sp .picked>.sc-tools{display:none}
.sc-tools button{width:6.2mm;height:6.2mm;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:1.3mm;background:var(--ink);color:var(--bg);cursor:pointer}.sc-tools svg{width:3.8mm;height:3.8mm}
.sc.drop-before{box-shadow:-1.4mm 0 0 var(--accent)}.sc.drop-after{box-shadow:1.4mm 0 0 var(--accent)}.sb.drop-before,.sc.sl.drop-before{box-shadow:0 -1.2mm 0 var(--accent)}.sb.drop-after,.sc.sl.drop-after{box-shadow:0 1.2mm 0 var(--accent)}
.sp .dragging{opacity:.35}
/* the strip and its popover are drawn at their own size whatever the page is shrunk to: scaled back up by the page's factor */
.sc-strip{position:absolute;left:50%;top:-6px;width:max-content;transform:translate(calc(-50% + var(--dx,0px)),calc(-100% + var(--dy,0px))) scale(calc(1/var(--s,.8)));transform-origin:50% 100%;z-index:6;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:5px 6px;border-radius:12px;background:var(--ink);color:var(--bg);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.2;cursor:default}
.sc-strip button{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 9px;border:none;border-radius:8px;background:transparent;color:var(--bg);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.sc-strip button:hover,.sc-strip button[aria-pressed="true"]{background:rgba(128,128,128,.25)}.sc-strip .danger{color:#B23A1D}.sp.light .sc-strip .danger{color:#ffb4a0}
.sc-strip svg{width:14px;height:14px}.sc-strip .sc-strip-g{display:inline-flex;align-items:center;gap:2px;padding-right:6px;border-right:1px solid rgba(128,128,128,.45);font-size:12px;font-weight:600}.sc-strip .sc-strip-g button{padding:0 4px}.sc-strip .sc-strip-g b{min-width:3ch;text-align:center}
.sc-strip .sel{min-height:30px;padding:0 8px;border-radius:8px;font-size:13px;background:rgba(128,128,128,.2);color:inherit;border-color:transparent;outline:none}.sc-strip select.sel{padding-right:26px;background-position:right 6px center}
.sc-strip .sc-strip-g button b,.sc-strip .sc-strip-g button i{font-family:var(--f-ui)}.sp-head .sc-strip{top:-2mm}.sp .st p,.sp .sh h2{white-space:pre-wrap}
.sc-pop{position:absolute;left:0;top:calc(100% + 6px);min-width:340px;transform:translate(var(--dx,0px),var(--dy,0px)) scale(calc(1/var(--s,.8)));transform-origin:0 0;z-index:6;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;overflow:auto;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:13px;line-height:1.35;color:var(--ink);cursor:default}
.sc-pop.small{font-size:13px}.sc-pop .lab{font-size:11px}.sc-pop .sh-in{height:34px;font-size:14px;border-radius:8px;padding:0 10px;width:100%}.sc-pop .linkbtn{font-size:inherit}
.sc-pop-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sc-shape{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit}.sc-shape svg{width:100%;height:auto}.sc-shape code{font-family:var(--f-m);font-size:11px;color:var(--ink-2)}
.sc-shape:hover{border-color:var(--accent)}.sc-shape.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sc.picked.fing .pc .nt,.sc.picked.fing .sc-d g.nt{cursor:pointer}
/* printing the sheet: the pages alone, one to a sheet of paper, at full size (the paper size is set by sheet.js) */
@media print{
  html:has(#sheet),body:has(#sheet){background:#fff!important}
  body:has(#sheet)>*:not(main),#sheet .bd-top,#sheet .bd-tune,#sheet .bd-find,#sheet .bd-open,#sheet .bd-lay,#sheet .bd-marquee,#sheet .sh-gate,#sheet .sp-ui{display:none!important}
  body:has(#sheet) main,#sheet,#sheet .bd-work,#sheet .bd-sheet,#sheet .bd-pages{display:block!important;padding:0!important;margin:0!important;gap:0!important}
  #sheet .sp-frame{width:auto!important;max-width:none!important;aspect-ratio:auto!important;overflow:visible;box-shadow:none;border-radius:0;break-after:page}
  #sheet .sp-frame:last-child{break-after:auto}
  #sheet .sp{position:relative;transform:none!important}
  #sheet .picked{outline:none!important}#sheet .sc,#sheet .sb{cursor:default}#sheet .sc-strip,#sheet .sc-pop{display:none!important}
  #sheet [data-sedit]:empty::before{content:none}
}
/* your account (account.js) */
.acct{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto;padding:30px 40px 70px}.acct-h{display:flex;flex-direction:column;gap:4px}.acct-h h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:36px;line-height:1.05;overflow-wrap:anywhere}.acct-h p{margin:4px 0 0;max-width:60ch}
.acct-card{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.acct-card p{margin:0}.acct-card h2{margin:0;font-family:var(--f-display);font-size:24px;line-height:1.1}
.acct-ch{display:flex;align-items:baseline;gap:10px}.acct-form label{font-size:13px;font-weight:600;color:var(--ink-2)}.acct-form .sh-in{flex:none;height:44px;font-size:17px;max-width:420px}.acct-code{letter-spacing:.3em;font-family:var(--f-m);font-size:22px;max-width:200px}
.acct-err{margin:0;color:var(--accent);font-weight:600}.acct-note{border-color:var(--accent);background:var(--accent-soft)}
.acct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.acct-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.acct-list li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.acct-list b{font-family:var(--f-display);font-size:19px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-foot{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}.acct-sure{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}.btn-o.sm.danger{color:var(--accent);border-color:var(--accent)}
.acct .btn-p.off{opacity:.45;pointer-events:none}.lic-key{font-family:var(--f-m);font-size:15px!important;letter-spacing:.04em;max-width:520px!important}.lic-import{cursor:pointer}.lic-import:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.hdr-acct[hidden]{display:none}.hdr-acct{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
@media (max-width:760px){.acct{padding-inline:16px}}
/* the live chord sheet (live.js) */
.live{display:flex;flex-direction:column;gap:16px;padding:22px 40px 56px}
.live-h{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.live-h>div{min-width:0;flex:1 1 320px}
.live-h h1{margin:2px 0 4px;font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1.05}.live-sub{margin:0 0 4px;font-size:17px;color:var(--ink-2)}.live-h p{margin:0}
.live-tip{margin:0;max-width:80ch}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;align-items:start}
.live-grid .live-head{grid-column:1/-1;margin:14px 0 0;font-family:var(--f-display);font-weight:700;font-size:26px;border-bottom:1px solid var(--line);padding-bottom:6px}
.live-grid .live-text{grid-column:1/-1;margin:0;max-width:72ch;white-space:pre-wrap;color:var(--ink-2)}
.live-strum{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.live-strum-t{flex:1 1 360px;min-width:0}.live-strum .sst-h{height:auto;font-size:14px;color:var(--ink-3)}.live-strum .sst-h b{font-family:var(--f-display);font-size:20px;color:var(--ink)}
.live-strum .sst-t{height:52px;margin-top:6px;background:var(--bg)}.live-strum .sst-t td{border-color:var(--line-2);padding-bottom:4px}.live-strum .sst-t td.bt{border-left-color:var(--ink)}.live-strum .sst-t td:last-child{border-right-color:var(--ink)}
.live-strum .sst-t i{font-size:11px;top:3px;color:var(--ink-3)}.live-strum .sst-t td.bt i{color:var(--ink)}.live-strum .sst-t b{font-size:24px;color:var(--ink)}.live-strum .sst-t .lt b{font-size:18px;color:var(--ink-2)}.live-strum .sst-t .fg b{font-size:13px}
.live-changes{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.live-changes>b{font-family:var(--f-display);font-size:20px}
.live-legend{grid-column:1/-1;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.live-legend .slg-h{height:auto;margin-bottom:8px}.live-legend .slg-h b{font-family:var(--f-display);font-size:20px;color:var(--ink)}
.live-legend .slg-g{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 24px}.live-legend .slg-g>div{height:auto;min-height:30px;font-size:14px;color:var(--ink-2)}.live-legend .slg-g svg{width:22px;height:22px}
.live-foot{margin:8px 0 0}
.pc.none{align-items:center;justify-content:center;min-height:120px}
/* the PDF builder: the link, its QR code, and the full-version gate */
.sp-qr{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:center;width:20mm;text-decoration:none;color:var(--ink-3)}
.sp-qr svg{width:16mm;height:16mm;display:block}.sp-qr span{font-size:2.2mm;line-height:1.15;text-align:center;margin-top:.4mm}
.sp-head.with-qr h1,.sp-head.with-qr p{padding-right:22mm}.sp-head.with-qr{min-height:23mm}
.pro{margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.18);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sh-gate{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--accent);border-radius:14px;background:var(--accent-soft)}.sh-gate>div{flex:1 1 320px}.sh-gate p{margin:4px 0 0}
@media (max-width:760px){.live{padding-inline:16px}}
@media print{body:not(.can-export) #sheet .sp-frame{display:none!important}body:not(.can-export) #sheet::after{content:'Printing and downloading chord sheets are part of the full version of Chordhalla: chordhalla.com/account/';display:block;padding:20mm;font-size:5mm}}

/* ---------- phones (decided 30 September 2026: the Library works well on a phone before launch) ---------- */
.ftoggle{display:none}
@media (max-width:760px){
  /* the header: the name, Full version and the look on one row, the pages under them (the builder that is coming is left out) */
  .site-h{flex-wrap:wrap;height:auto;gap:0 10px;padding-top:8px}
  .site-h>.grow{order:1}.site-h .hdr-acct{order:2;min-height:34px;padding:0 10px;font-size:13.5px}.site-h .theme-btn{order:3}
  .site-h nav{order:4;flex:1 1 100%;gap:22px;overflow-x:auto;scrollbar-width:none}
  .site-h nav a{min-height:44px;white-space:nowrap}
  .site-h nav .nav-soon{display:none}
  /* the Library: the search box first, the settings under it in short rows, the filters folded behind one button */
  .sview{gap:10px}
  .sview>.shead{order:-1}
  .sbar{gap:8px}
  .sbar .sgroup{display:contents}
  .sbar>.grow,.sbar .lab{display:none}
  .sbar .tune-wrap{flex:1 1 100%;min-width:0}
  .sbar .tune-wrap .tbtn{width:100%;height:38px;overflow:hidden}
  .sbar .tbtn{height:38px}
  .sbox{min-height:52px}
  .facets{padding:2px 12px}
  .facets.open{padding-bottom:12px}
  .facets:not(.open) .frow{display:none}
  .ftoggle{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:0;background:none;border:none;color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
  .ftoggle b{font-weight:600;color:var(--accent)}
  .ftoggle svg:last-child{transition:transform .15s}
  .facets.open .ftoggle svg:last-child{transform:rotate(180deg)}
  .khint{display:none}
  /* the results one card a row, the picture no wider than it needs (two a row left the buttons too small to press), and a picked
     chord's panel above them */
  .rcards,.cards.rcards{grid-template-columns:minmax(0,1fr);gap:10px}
  .rcards>.pc{min-width:0}
  .rcards>.pc .pc-dg{width:100%;max-width:270px;margin-inline:auto}
  .sbody.with-panel>#sv-panel{order:-1}
  /* the PDF builder: the buttons under the title, the finder above the sheet (so a chord can be added without scrolling past the
     page), no Hide button (there is no second column to make room for); the tuning as wide as the page */
  .bd-top>.grow{display:none}
  .bd-tt{flex:1 1 100%}
  .bd-work>.bd-find{order:-1}
  .bd-hide{display:none}
  .bd-tune{flex-wrap:wrap}
  .bd-tune .tune-wrap{flex:1 1 100%}
  .bd-tune .tbtn{max-width:100%;overflow:hidden}
}
@media (hover:none){.khint{display:none}}

/* ---------- the full version, said plainly (1 October 2026): the header link, the builder's chip and buttons, the Full version page ---------- */
.hdr-acct{gap:6px}
.hdr-acct.on{gap:8px;padding:3px 13px 3px 4px;border-radius:999px;color:var(--ink);background:none}.hdr-acct.on:hover,.hdr-acct.on.here{border-color:var(--accent)}      /* the full version: your page, with your initial */
.hdr-acct .av,.up-av{display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:700;line-height:1}.hdr-acct .av{width:28px;height:28px;font-size:15px}
.hdr-acct svg{flex:none}
.fv-chip{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:2px 9px 2px 7px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;vertical-align:middle}
.btn-o.locked,.btn-p.locked{gap:6px}
.btn-o .pro{background:var(--accent-soft);color:var(--accent)}
.fv-status{display:flex;align-items:center;gap:8px;margin:2px 0 6px;padding:9px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);font-size:14.5px}
.fv-status b{color:var(--ink)}
.fv-status.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.fv-status.on svg{color:var(--accent)}
.fv-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fv-compare h2{margin:0 0 8px}
.fv-compare ul,.fv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.fv-compare li,.fv-list li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.fv-compare li svg,.fv-list li svg{flex:none;margin-top:2px;color:var(--ink-3)}
.fv-full{padding-left:18px;border-left:1px solid var(--line)}
.fv-full li svg,.fv-list li svg{color:var(--accent)}
.fv-list{margin-top:8px}
@media (max-width:760px){.fv-compare{grid-template-columns:minmax(0,1fr)}.fv-full{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--line)}}
.sp-qr-lock{justify-content:center;gap:1mm;height:19mm;border:.3mm dashed var(--line-2);border-radius:1.5mm;color:var(--ink-3)}
.sp-qr-lock svg{width:4mm;height:4mm}
.live-crumbs{margin-bottom:4px}
/* the live sheet: the builder's cards across on a wide screen; the chord's name is not a link (everything happens on the card) */
@media (min-width:1101px){#live .live-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.pc-link.pc-plain{cursor:default;text-decoration:none}


/* ---------- live sheets kept online (FEATURES.online, 1 October 2026): the builder's Live sheet button and panel, your page, the owner's bar ---------- */
.bd-top>.bd-tt{flex:1 1 360px}      /* (the title's width does not push the buttons onto a second line) */
.lv-ys{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none}.lv-ys:hover{color:var(--ink);border-color:var(--ink-3)}
.lv-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--raised);color:var(--ink-2);font-size:12px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.lv-status{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:-4px 0 0!important}
.lv-addr{font-family:var(--f-m);font-size:12.5px;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}.lv-addr:hover{color:var(--ink);text-decoration:underline}
.lv-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}.lv-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.lv-chip.on{background:rgba(108,197,146,.14);color:#6CC592}.lv-chip.warn{background:rgba(232,176,75,.15);color:#E8B04B}.lv-chip.off{background:var(--raised);color:var(--ink-3)}
:root[data-theme="light"] .lv-chip.on{color:#237A4B;background:rgba(35,122,75,.1)}:root[data-theme="light"] .lv-chip.warn{color:#8A5A00;background:rgba(170,110,0,.12)}
.lv-wrap{position:relative;display:inline-flex;z-index:40}
.lv-btn{gap:7px}.lv-btn.open{border-color:var(--accent)}.lv-btn>svg:last-child{opacity:.7}
.lv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#6CC592;box-shadow:0 0 0 3px rgba(108,197,146,.18)}.lv-dot.warn{background:#E8B04B;box-shadow:0 0 0 3px rgba(232,176,75,.2)}
.lv-badge{padding:1px 7px;border-radius:999px;background:#E8B04B;color:#1B1405;font-size:11.5px;font-weight:700}
.lv-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:440px;max-width:calc(100vw - 24px);display:flex;flex-direction:column;gap:14px;padding:18px 20px 16px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);text-align:left;white-space:normal;font-weight:400;cursor:auto}
.lv-pop p{margin:0;line-height:1.45}.lv-pop-h{display:flex;align-items:center;gap:10px}.lv-pop-h h2{margin:0;flex:1;font-family:var(--f-display);font-weight:700;font-size:25px;line-height:1.05}.lv-pop-h .lv-chip{flex:none}
.lv-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.lv-points li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-2);font-size:14.5px;line-height:1.4}.lv-points svg{flex:none;margin-top:2px;color:#6CC592}
.lv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lv-row code,.lv-pop code{font-family:var(--f-m);font-size:12px}
.lv-foot{padding-top:12px;border-top:1px solid var(--line)}
.lv-link{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg)}.lv-link code{flex:1;min-width:0;font-family:var(--f-m);font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.lv-qrrow{display:flex;gap:16px;align-items:center}.lv-qrrow>svg{flex:none;border-radius:8px;background:#fff;padding:6px}.lv-qrrow>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.btn-o.lv-warn{border-color:#E8B04B;color:#E8B04B}.btn-o.sm.on{border-color:var(--accent)}
/* your page */
.up{display:flex;flex-direction:column;gap:18px;max-width:1180px;margin:0 auto;padding:30px 40px 56px}
.up-h{display:flex;align-items:center;gap:20px}.up-av{flex:none;width:76px;height:76px;font-size:40px}
.up-id{display:flex;flex-direction:column;gap:4px;min-width:0}.up-id h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1;overflow-wrap:anywhere}
.up-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 0;color:var(--ink-3);font-size:14px}.up-meta code,.up-dl code{font-family:var(--f-m);font-size:13px;color:var(--ink-2)}
.up-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.up-tabs a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px 11px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--ink-2);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}.up-tabs a:hover{color:var(--ink)}.up-tabs a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.up-sub{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.up-sub p{margin:0;max-width:66ch}
.up-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.up-col{display:flex;flex-direction:column;gap:18px;min-width:0}.up-grid .acct-card{margin:0}
.up-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;margin:6px 0 10px}.up-dl dt{color:var(--ink-3);font-size:14px}.up-dl dd{margin:0;color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.ys-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ys-find{flex:1 1 320px;min-height:46px}.ys-find input{font-size:15px}
.ys-seg a{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none}.ys-seg a[aria-pressed="true"]{background:var(--ink);color:var(--bg)}.ys-seg a[aria-pressed="true"] .lv-n{background:rgba(0,0,0,.12);color:inherit}
.ys-sort{display:flex;align-items:center;gap:8px}.ys-sort .sel{min-height:38px;padding:0 34px 0 12px}
.ys-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.ys-r{position:relative;display:grid;grid-template-columns:268px minmax(0,1fr) 300px auto;gap:10px 20px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}.ys-r:first-child{border-top:none}.ys-r.open{background:var(--raised)}.ys-r[hidden]{display:none}
.ys-r.local,.ys-r.set{grid-template-columns:268px minmax(0,1fr) auto}
.ys-pv{display:flex;align-items:center;gap:2px;min-height:86px;padding:6px 8px 4px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;overflow:hidden}.ys-pv:hover{border-color:var(--line-2)}
.ys-m{display:flex;flex-direction:column;align-items:center}.ys-m i{font-style:normal;font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--ink-2)}
.ys-name{padding:4px 8px;margin:2px;border-radius:8px;background:var(--raised);font-family:var(--f-display);font-weight:700;font-size:16px}.ys-plus{align-self:center;padding:0 6px;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink-3)}.ys-none{color:var(--ink-3);font-size:13px;padding:0 8px}
.ys-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}.ys-t b{font-family:var(--f-display);font-size:23px;line-height:1.1;overflow-wrap:anywhere}
.ys-name-btn{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.ys-name-btn:hover b{text-decoration:underline}
.ys-s{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.ys-a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px}.ys-more{width:36px;height:36px}
.ys-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:170px;display:flex;flex-direction:column;padding:6px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ys-menu button{padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-weight:600;font-size:14px;text-align:left;cursor:pointer}.ys-menu button:hover{background:var(--raised)}.ys-menu .danger{color:#E5664A}
.ys-pop{top:calc(100% + 6px);right:0}
.ys-sure{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:rgba(229,102,74,.1);color:var(--ink)}
.ys-ren{display:flex;align-items:center;gap:8px}.ys-ren input{width:240px;max-width:100%}
.ys-note{margin:0}.ys-empty h2{margin:0 0 6px}
/* the live sheet: the owner's bar, the share panel under it, a sheet no longer shared */
.lv-owner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border:1px solid rgba(108,197,146,.45);border-radius:14px;background:rgba(108,197,146,.07)}.lv-owner>div{min-width:0}.lv-owner .linkbtn{color:var(--ink-2)}
.lv-share{display:flex;flex-direction:column;gap:12px;max-width:460px;padding:16px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel)}
.lv-sep{margin:0 4px}.live-wait{padding:40px 0}
.lv-gone{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding:90px 0 140px}.lv-gone h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:48px;line-height:1.02}.lv-gone p{margin:0;font-size:17px}
@media (max-width:1100px){.ys-r{grid-template-columns:minmax(0,1fr) auto}.ys-r .ys-pv{grid-column:1/-1;justify-self:start}.ys-r .ys-s{grid-column:1}.ys-r .ys-a{grid-column:2;grid-row:2/4;align-self:start}}
@media (max-width:760px){.up{padding:20px 16px 40px}.up-h{gap:14px}.up-av{width:56px;height:56px;font-size:28px}.up-id h1{font-size:28px}.up-grid{grid-template-columns:1fr}
  .ys-r,.ys-r.local,.ys-r.set{grid-template-columns:1fr;padding:12px}.ys-r .ys-a{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap}.lv-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:calc(100vh - 24px);overflow-y:auto}.lv-gone{padding:50px 0 80px}.lv-gone h1{font-size:34px}}

/* phones, checked 1 October 2026 with live sheets: the builder's title in full, a live sheet's link on two lines rather than cut, the
   small chord pictures on your page inside their row, the full version's details one under the other, and the footer's line in one piece */
@media (max-width:760px){
  .bd-name{max-width:100%}
  .lv-link{align-items:flex-start}.lv-link code{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;padding-top:6px}
  .ys-pv{max-width:100%}.ys-pv .ys-m svg{width:58px;height:auto}.ys-name{font-size:14px;padding:3px 6px}
  .up-dl{grid-template-columns:minmax(0,1fr);gap:2px}.up-dl dd{margin-bottom:10px}
  .site-f{flex-wrap:wrap;gap:6px 18px;padding-block:22px}.site-f>.grow{display:none}.site-f>.logo+.muted{flex:1 1 100%;order:1}.site-f>*:not(.logo):not(.logo+.muted){order:2}
}