/* Tabs styles. Loaded by index.html; saved for offline use by sw.js. */
:root {
  --bg: #0c0d0f;
  --bg-glow: rgba(255,255,255,0.05);
  --fg: #f3f1ee;
  --fg-2: #c9c7c3;
  --muted: #8f8e8c;
  --accent: #eda27f;
  --bad: #e07a6c;
  --bad-line: rgba(224,122,108,.4);
  --accent-deep: #c97a57;
  --on-accent: #1a120d;
  --accent-soft: rgba(237,162,127,0.13);
  --accent-line: rgba(237,162,127,0.4);
  --card: rgba(255,255,255,0.035);
  --card-2: rgba(255,255,255,0.07);
  --rim: rgba(255,255,255,0.09);
  --hair: rgba(255,255,255,0.07);
  --rim-hi: rgba(255,255,255,0.12);
  --bar: rgba(38,39,42,0.86);
  --solid: #1b1c1f;
  --scrim: rgba(4,4,5,0.6);
  --head: #efe7da;
  --good: #8fd3a3;
  --tune: #5fb383;      /* the tuner: the string you're tuning (green; brightens to --good in tune) */
  --good-soft: rgba(143,211,163,0.14);
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --r: 12px;
  --r-bar: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f0eb;
  --bg-glow: rgba(255,255,255,0.8);
  --fg: #1d1c1a;
  --fg-2: #3b3936;
  --muted: #6a6762;
  --accent: #a3532c;
  --bad: #a8413a;
  --bad-line: rgba(168,65,58,.4);
  --accent-deep: #a95a37;
  --on-accent: #fff8f3;
  --accent-soft: rgba(196,111,72,0.1);
  --accent-line: rgba(196,111,72,0.4);
  --card: rgba(255,255,255,0.6);
  --card-2: rgba(255,255,255,0.92);
  --rim: rgba(0,0,0,0.08);
  --hair: rgba(0,0,0,0.07);
  --rim-hi: rgba(255,255,255,0.9);
  --bar: rgba(255,255,255,0.86);
  --solid: #fbf9f6;
  --scrim: rgba(40,30,20,0.28);
  --head: #2b2420;
  --good: #2f8a52;
  --tune: #4f9d6e;
  --good-soft: rgba(47,138,82,0.12);
  --shadow: 0 8px 24px rgba(60,40,20,0.12);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); touch-action: manipulation; } /* pinch zoom stays; double-tap zoom goes (stage mode pauses on a double tap) */
body {
  margin: 0; min-height: 100dvh; color: var(--fg); font-family: var(--sans); font-size: 16px;
  background: radial-gradient(120% 50% at 50% -10%, var(--bg-glow), transparent 60%), var(--bg);
  background-attachment: fixed; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { outline: none; }
::placeholder { color: var(--muted); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app { max-width: 520px; margin: 0 auto; padding: calc(18px + var(--safe-t)) 20px calc(110px + var(--safe-b)); }

/* Surfaces */
.glass {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 var(--rim-hi);
}
.float { box-shadow: inset 0 1px 0 var(--rim-hi), var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); background: var(--bar); }

/* Header */
.head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 4px; }
.title { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.ib { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--fg-2); flex: none; position: relative; }
.ib::after { content: ""; position: absolute; inset: -4px; }
.ib.on { color: var(--accent); }
.ib.on svg { fill: var(--accent); }
.row-btns { display: flex; align-items: center; gap: 10px; }
/* Song view back button floats; it fades out scrolling down and back in scrolling up */
/* Compact song header: fades out scrolling down, fades in scrolling up */
.chead { position: fixed; z-index: 25; left: 0; right: 0; top: 0; padding-top: calc(10px + var(--safe-t)); opacity: 0; pointer-events: none; transition: opacity .12s linear; }
.chead::before { content: ""; position: absolute; inset: 0 0 -18px; background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.chead .in { position: relative; max-width: 520px; margin: 0 auto; padding: 0 20px 8px; display: flex; align-items: center; gap: 12px; height: 56px; }
.chead .ctitle { flex: 1; min-width: 0; border: 0; background: none; padding: 4px 0; text-align: left; color: var(--fg); }
.chead .ct { font-family: var(--serif); font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .cs { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .cs b { color: var(--fg-2); font-weight: 500; }

/* Chips */
.chips { display: flex; gap: 8px; margin: 14px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips > * { flex: none; }
.chip { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; border: 1px solid var(--rim); background: var(--card); color: var(--muted); }
.chip.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* Sections and lists */
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 8px; }
.label.lrow { display: flex; align-items: center; justify-content: space-between; }
.sortby { position: relative; display: inline-flex; align-items: center; gap: 3px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.sortby .chev { width: 13px; height: 13px; transform: rotate(90deg); opacity: .7; }
.sortby select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.row .hit { font-style: italic; }
.row .hit mark { background: none; color: var(--accent); font-style: normal; }
.list { border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; height: 60px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; color: var(--fg); }
.row:last-child { border-bottom: 0; }
.row:active { background: var(--card-2); }
.row .txt { flex: 1; min-width: 0; }
.row .t { font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .a { font-size: 13.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .k { font: 500 13px var(--mono); color: var(--muted); min-width: 30px; text-align: right; }
.heart { width: 14px; height: 14px; fill: var(--accent); flex: none; }
.recent { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc { border-radius: 14px; padding: 12px 14px; text-align: left; color: var(--fg); min-width: 0; }
.rc .t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc .a { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--muted); text-align: center; padding: 56px 24px; line-height: 1.6; font-size: 15px; }

/* Bottom bars */
.dock { position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); width: min(496px, calc(100% - 24px)); transform: translateX(-50%); z-index: 20; display: flex; gap: 10px; transition: transform .15s; }
.dock-fade { position: fixed; left: 0; right: 0; bottom: 0; height: calc(110px + var(--safe-b)); background: linear-gradient(180deg, transparent, var(--bg) 70%); pointer-events: none; z-index: 10; }
.cmd { flex: 1; min-width: 0; height: 52px; border-radius: var(--r-bar); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; }
.cmd svg { color: var(--accent); }
.cmd input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; height: 100%; }
.cmd .clear[hidden] { display: none; }
.cmd .clear { width: 32px; height: 32px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; }
.add { width: 52px; height: 52px; border-radius: var(--r-bar); border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.add svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* Song view */
.song-title { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.01em; line-height: 1.1; margin: 18px 0 6px; overflow-wrap: anywhere; }
.metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.metarow .meta { margin-bottom: 0; }
.stat { border: 1px solid var(--rim); background: var(--card); color: var(--muted); font-size: 12.5px; height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; gap: 6px; }
.stat.learning { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.stat.got { color: #7ac47f; border-color: rgba(122,196,127,0.4); background: rgba(122,196,127,0.1); }
.stat .pl { color: var(--muted); }
.row .a .st.learning { color: var(--accent); }
.row .a .st.got { color: #7ac47f; }
.weekly { font-size: 13px; color: var(--muted); margin: 2px 4px 0; }
/* Today: streak dots and the nudge, under the title */
.today { margin: 2px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.today .weekly { margin: 0; display: flex; align-items: center; gap: 8px; }
.today .weekly b { color: var(--fg-2); font-weight: 600; }
.t-dots { display: inline-flex; gap: 3px; flex: none; }
.t-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rim); }
.t-dots i.on { background: var(--accent); box-shadow: 0 0 5px var(--glow-c, rgba(255,150,70,.55)); }
.t-dots i.now { background: none; border: 1.3px dashed var(--accent); }
.nudge { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: none; color: var(--fg-2); text-align: left; }
.nudge > svg:first-child { width: 20px; height: 20px; color: var(--accent); flex: none; }
.nudge span { flex: 1; min-width: 0; }
.nudge small { display: block; font-size: 12.5px; color: var(--muted); }
.nudge b { display: block; font-size: 15px; color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nudge .chev { width: 14px; height: 14px; color: var(--muted); flex: none; }
.meta { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.meta b { color: var(--fg-2); font-weight: 500; }
.sheet { font-size: calc(var(--lyric-size, 17px) * var(--wide, 1)); line-height: 1.45; overflow-wrap: anywhere; overflow-x: clip; position: relative; }
.sheet .sec { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; }
.sheet .sec:first-child { margin-top: 4px; }
.sheet .gap { height: 0.7em; }
.sheet .ly { margin: 0 0 0.5em; }
/* Chord-over-word blocks: each word stays whole; lines wrap between words */
.sheet .pr { margin: 0 0 0.55em; }
.sheet .w { white-space: nowrap; }
.sheet .sg { display: inline-block; vertical-align: baseline; }
.sheet .sg > .c { display: block; line-height: 1.25; padding-right: 0.45em; min-height: 1.25em; }
.sheet .sg > .l { white-space: pre; }
.sheet .sg.free > .c { width: 0; overflow: visible; white-space: nowrap; padding-right: 0; }
.sheet .c[data-ch] { cursor: pointer; position: relative; }
.sheet .c[data-ch]::after { content: ""; position: absolute; inset: -6px -4px; }
.sheet .c.sel .ct { background: var(--accent-soft); border-radius: 4px; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent-line); }
/* Chord diagram cards */
.prow { position: absolute; left: 0; right: 0; height: 0; z-index: 5; pointer-events: none; animation: fade .25s ease-out; }
.pcard, .dpop { position: absolute; top: 0; box-sizing: border-box; border-radius: 10px; background: var(--solid); border: 1px solid var(--rim); box-shadow: 0 6px 18px rgba(0,0,0,0.4); display: grid; place-items: center; }
.dpop { z-index: 6; animation: pop .16s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.dptr { position: absolute; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: var(--solid); border-right: 1px solid var(--rim); border-bottom: 1px solid var(--rim); }
.pcard svg, .dpop svg { display: block; }
.dn { font: 600 10.5px var(--sans); fill: var(--fg); }
.dx { stroke: var(--muted); stroke-width: 1.1; stroke-linecap: round; fill: none; }
.do { fill: none; stroke: var(--fg-2); stroke-width: 1; }
.dnut { fill: var(--fg); }
.df { stroke: var(--fg); stroke-opacity: .38; stroke-width: .8; }
.ds { stroke: var(--fg); stroke-opacity: .55; stroke-width: .8; }
.dd { fill: var(--accent); }
.dk { font: 700 5.4px var(--sans); fill: var(--on-accent); }
.db { font: 7px var(--sans); fill: var(--muted); }
.sheet .c { color: var(--accent); font-weight: 650; font-size: 0.88em; letter-spacing: 0.01em; }
.sheet .crow { display: flex; flex-wrap: wrap; column-gap: 1.1em; row-gap: 0.2em; margin: 0 0 0.55em; }
/* Tabs: all strings wrap together, a measure at a time */
.sheet .tab { font-family: var(--mono); font-size: calc(var(--tab-size, 14px) * var(--wide, 1)); line-height: 1.35; white-space: pre; margin: 0 0 1em; color: var(--fg); }
.sheet .tab + .tab { margin-top: -0.2em; }
.pw { flex: 1; min-width: 0; border-radius: var(--r-bar); overflow: hidden; }
.player { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 8px; }
/* Now and Next: a fixed panel in the dock while playing; only its contents change */
.nn { display: none; align-items: flex-end; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
body.nn-on .nn { display: flex; animation: nnin .2s ease-out; }
@keyframes nnin { from { opacity: 0; } }
.nn .lab { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 6px 2px; }
.nn .nowcol .lab { color: var(--accent); }
.nn .vs { width: 1px; align-self: stretch; background: var(--rim); }
.nn .cards { display: flex; gap: 8px; align-items: flex-end; min-width: 0; overflow: hidden; }
.nn .card { flex: none; border-radius: 10px; background: var(--solid); border: 1px solid var(--rim); display: grid; place-items: center; box-sizing: border-box; }
.nn .card svg { display: block; }
.nn .swap { animation: swap .16s ease-out; }
@keyframes swap { from { opacity: .3; } }
/* Chords in this song */
.strip-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.strip-h .n { font-weight: 500; letter-spacing: 0; }
.strip { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 10px; padding: 2px 20px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.scard { flex: none; width: 54px; height: 78px; padding: 0; border-radius: 10px; background: var(--solid); border: 1px solid var(--rim); display: grid; place-items: center; }
.scard svg { display: block; }
.scard.sel { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
/* AI help */
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: rot .7s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: var(--r); font-size: 15px; font-weight: 500; border: 1px solid var(--rim); background: var(--card); color: var(--fg-2); flex: 1; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .6; }
.btn.sm { flex: none; height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.sm.primary { flex: none; }
.chip.ai { display: inline-flex; align-items: center; gap: 6px; height: 32px; color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip.ai svg { width: 15px; height: 15px; }
.chip.ai:disabled { opacity: .55; }
.ai-note { font-size: 13px; color: var(--bad); margin: -4px 2px 10px; line-height: 1.4; }
.err { color: var(--bad); }
.link { border: 0; background: none; color: var(--accent); font-size: 13px; padding: 4px 2px; text-decoration: underline; }
.seg.mini { flex: none; height: 28px; padding: 2px; border-radius: 8px; }
.seg.mini button { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.key-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--hair); }
.ai-status { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.ai-status .dot, .s-keys .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rim); }
.ai-status .dot.on, .s-keys .dot.on { background: #7ac47f; }
/* Make it easier */
.strip-h .chip.easy { text-transform: none; letter-spacing: 0; font-weight: 500; height: 28px; font-size: 12.5px; }
.chip.easy.off { color: var(--muted); border-color: var(--rim); background: var(--card); }
.easy-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 18px 2px 22px; }
.easy-note { font-size: 14px; color: var(--fg-2); line-height: 1.45; margin: 0 2px 12px; }
.elabel { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 2px 6px; }
.erow { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none; }
.erow::-webkit-scrollbar { display: none; }
.ecard { flex: none; border-radius: 9px; background: var(--card); border: 1px solid var(--rim); padding: 1px; }
.ecard svg { display: block; }
/* Backup banner */
.bk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 14px; padding: 12px 14px; margin: 16px 0 0; }
.bk .tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.bk .tile svg { width: 17px; height: 17px; }
.bk-t { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.bk-t b { font-size: 15px; font-weight: 600; color: var(--fg); }
.bk-b { display: flex; gap: 8px; margin-left: auto; }
.set .val.muted { color: var(--muted); }
.ib.aa { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.countin { position: fixed; left: 50%; transform: translateX(-50%); z-index: 15; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  font: 300 64px var(--serif); color: var(--accent); background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.countin.pulse { animation: beat .35s ease-out; }
@keyframes beat { from { transform: translateX(-50%) scale(1.12); opacity: .6; } }
/* Sets */
.row.newset .t { color: var(--accent); display: flex; align-items: center; gap: 8px; }
.row.newset svg { width: 16px; height: 16px; }
.row .chev { color: var(--muted); width: 16px; height: 16px; }
.settitle { border: 0; background: none; padding: 0; text-align: left; color: var(--fg); display: block; margin: 14px 2px 0; }
.cta svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.setrow { gap: 8px; }
.setrow .num { font: 500 13px var(--mono); color: var(--muted); width: 18px; text-align: right; }
.setrow .open { border: 0; background: none; padding: 0; text-align: left; color: inherit; flex: 1; min-width: 0; }
.setrow .sb:disabled { opacity: .3; }
.row.pick .check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rim); display: grid; place-items: center; color: var(--on-accent); flex: none; }
.row.pick.on .check { background: var(--accent); border-color: var(--accent); }
.row.pick:disabled { opacity: .55; }
.row.pick:disabled .check { background: var(--card-2); color: var(--muted); }
.row.pick .check svg { width: 13px; height: 13px; stroke-width: 2.4; }
.setbar { display: flex; align-items: center; gap: 8px; margin: 14px 0 -8px; }
.setbar .setname { flex: 1; min-width: 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setbar .sb:disabled { opacity: .3; }
.nextup { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); z-index: 22; width: min(496px, calc(100% - 24px)); border-radius: 14px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 8px; animation: fade .25s; }
.nu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); }
.nu-t .lab { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); }
.nu-t b { font-size: 16px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Spark tone */
.panel.tone { max-height: calc(100dvh - 40px); overflow-y: auto; }
.ampname { font-size: 15px; font-weight: 500; margin: 0 2px 10px; }
.knobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.knob { text-align: center; }
.kv { font: 600 15px var(--mono); color: var(--accent); }
.kbar { height: 4px; border-radius: 2px; background: var(--card-2); margin: 4px 0 4px; overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--accent); }
.kl { font-size: 11px; color: var(--muted); }
.chain { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--hair); margin-bottom: 12px; overflow: hidden; }
.fx { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.fx:last-child { border-bottom: 0; }
.fxn { width: 50px; flex: none; font-weight: 600; color: var(--fg-2); }
.fxv { color: var(--fg); }
.fx.off .fxv, .fx.off .fxn { color: var(--muted); font-weight: 400; }
.tone-foot { font-size: 12px; color: var(--muted); margin: 0 2px 12px; }
/* First-time guide */
/* Song menu */
.menu { position: fixed; z-index: 35; width: 272px; border-radius: 16px; padding: 6px; background: var(--solid); animation: pop .14s ease-out; }
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 10px; color: var(--fg); font-size: 15px; text-align: left; }
button.mrow:active { background: var(--card-2); }
.mrow .mi { width: 20px; color: var(--fg-2); display: grid; place-items: center; }
.mrow .mi svg { width: 18px; height: 18px; }
.mrow .ml { flex: 1; white-space: nowrap; }
.mrow .mh { font-size: 12.5px; color: var(--accent); }
.mrow.size { border-bottom: 1px solid var(--hair); border-radius: 10px 10px 0 0; margin-bottom: 4px; padding-bottom: 6px; }
.mrow.size .v { font: 600 13px var(--mono); min-width: 40px; text-align: center; }
/* Screen transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
::view-transition-group(song-title) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(song-title), ::view-transition-new(song-title) { height: 100%; width: auto; }
@media (prefers-reduced-motion: reduce) { *, ::view-transition-group(*) { animation-duration: 0s !important; transition-duration: 0s !important; } }
/* Practice a section */
.loopbanner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + var(--safe-t)); z-index: 40; width: min(480px, calc(100% - 24px)); border-radius: 14px; padding: 10px 8px 10px 14px; display: flex; align-items: center; gap: 10px; background: var(--solid); font-size: 14px; animation: fade .2s; }
.loopbanner span { flex: 1; }
.sheet > .inloop { position: relative; padding-left: 12px; }
.sheet > .inloop::before { content: ""; position: absolute; left: 0; top: 0; bottom: -0.55em; width: 2px; background: var(--accent); opacity: .55; }
.sheet > .loopfirst::before { top: 4px; border-radius: 2px 2px 0 0; }
.sheet > .looplast::before { bottom: 2px; border-radius: 0 0 2px 2px; }
.sheet > .loopa { background: var(--accent-soft); border-radius: 6px; }
.looprow { display: none; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.looprow.on { display: flex; }
.imp-t { margin: 0 2px 14px; font-size: 15px; }
.linkbtn { background: none; border: 0; padding: 10px 6px; margin: -10px -6px; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.imp-list { margin-bottom: 12px; max-height: 40vh; overflow-y: auto; }
.looprow > svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.looprow .lt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.looprow .lt b { color: var(--fg); font-weight: 500; }
.looprow .chip { height: 26px; font-size: 12px; padding: 0 10px; }
body.loop-on .app.viewer { padding-bottom: calc(160px + var(--safe-b)); }
.nn .none { color: var(--muted); font-size: 13px; padding: 0 2px 6px; }
body.nn-on .app.viewer { padding-bottom: calc(250px + var(--safe-b)); }
/* Current line focus while playing: other lines dim in place (no motion) */
.sheet > * { transition: opacity .3s, transform .2s ease-out; }
/* Focus current line: heavier and 5% larger without changing how it wraps.
   The stroke thickens the letters without widening them, and the scale is a
   transform, so nothing below moves. Lines keep 5% spare width on the right
   so a scaled line never runs off the edge. */
.sheet > .pr, .sheet > .ly { margin-right: 5%; }
.sheet.focus > .cur:is(.pr, .ly) { transform: scale(1.05); transform-origin: left center; -webkit-text-stroke: 0.78px currentColor; }
.sheet.focus > .cur .c { -webkit-text-stroke: 0; }
/* The next line is in focus too, a little softer, to read ahead. */
.sheet.focus > .cur2:is(.pr, .ly) { opacity: .72; transform: none; -webkit-text-stroke: 0.4px currentColor; }
@media (prefers-reduced-motion: reduce) { .sheet > * { transition: opacity .3s; } }
.sheet.focus > *:not(.cur):not(.prow):not(.dpop) { opacity: .38; }
/* Daylight: dimmed lines stay readable on the light background. */
:root[data-theme="light"] .sheet.focus > *:not(.cur):not(.prow):not(.dpop) { opacity: .5; }
.s-ver { text-align: center; margin-top: 18px; opacity: .7; }
.sheet .c.now .ct { box-shadow: inset 0 -2px 0 var(--accent); }
/* While playing, the top of the song (header, title, chord strip) goes quiet */
.app.viewer > .head, .app.viewer > .song-title, .app.viewer > .meta, .app.viewer > #strip { transition: opacity .3s, filter .3s; }
body.playing .app.viewer > .head, body.playing .app.viewer > .song-title,
body.playing .app.viewer > .meta, body.playing .app.viewer > #strip { opacity: .35; transition: opacity .5s, filter .5s; }
body.playing .app.viewer > #strip { filter: grayscale(1); }
/* Player controls fade after a few idle seconds while playing; play/pause stays */
.player .speed, .player .vsep, .player .step, .player .nnbtn { transition: opacity .3s; }
.player.idle .speed, .player.idle .vsep, .player.idle .step, .player.idle .nnbtn { opacity: .4; transition: opacity .6s; }
.play { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; padding: 0; }
.play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.speed { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.speed span { font: 500 13px var(--mono); color: var(--fg-2); width: 38px; text-align: right; }
.vsep { width: 1px; height: 26px; background: var(--rim); }
.step { display: flex; align-items: center; gap: 4px; }
.sb { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rim); background: var(--card); color: var(--fg-2); display: grid; place-items: center; padding: 0; }
.sb svg { width: 14px; height: 14px; }
.sb.nnbtn svg { width: 16px; height: 16px; }
.sb.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.step .v { font: 600 13px var(--mono); color: var(--accent); min-width: 28px; text-align: center; }
.step .v.zero { color: var(--muted); font-weight: 500; }

input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--card-2) var(--fill, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--card-2) var(--fill, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #f6c3a8; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f6c3a8; border: 0; }

/* Sheets (add / edit / paste) */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; animation: fade .2s; }
.panel { position: fixed; left: 50%; transform: translateX(-50%); width: min(520px, 100%); z-index: 41; background: var(--solid); border: 1px solid var(--rim); }
.panel.full { top: calc(10px + var(--safe-t)); bottom: 0; border-radius: 18px 18px 0 0; border-bottom: 0; display: flex; flex-direction: column; animation: up .42s cubic-bezier(.2,1.15,.3,1); }
.panel.card { bottom: calc(12px + var(--safe-b)); width: min(496px, calc(100% - 24px)); border-radius: 22px; padding: 16px; box-shadow: 0 -10px 50px rgba(0,0,0,0.5); animation: up .36s cubic-bezier(.2,1.15,.3,1); }
@keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.findcard { margin-top: 18px; border-radius: 16px; border: 1px solid var(--rim); background: var(--card); padding: 16px; }
.fc-t { font-size: 16px; font-weight: 600; color: var(--fg); }
.findcard.more { padding: 14px; }
.findcard.more .fc-t { font-size: 15px; margin-bottom: 10px; }
.fc-s { font-size: 14px; color: var(--muted); margin: 6px 0 12px; line-height: 1.4; }
.fc-b { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-b .chip { display: inline-flex; align-items: center; gap: 6px; }
.fc-b .chip svg { width: 14px; height: 14px; }
.fc-ai, .nextidea { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--fg); text-align: left; }
.fc-ai > svg:first-child, .nextidea > svg:first-child { width: 20px; height: 20px; color: var(--accent); flex: none; }
.fc-ai span, .nextidea span { flex: 1; font-size: 13px; color: var(--muted); }
.fc-ai b, .nextidea b { display: block; font-size: 15px; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.fc-ai .chev, .nextidea .chev { width: 16px; height: 16px; color: var(--muted); }
.nextidea { margin: 0 0 18px; border-color: var(--rim); background: var(--card); }
.backpaste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); z-index: 30; width: min(496px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; font-size: 14px; animation: fade .25s; }
.backpaste span { flex: 1; }
.cs-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--fg); }
.cs-head span { font-size: 14px; color: var(--muted); }
.cs-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.cs-meta span { font-size: 12.5px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--rim); color: var(--fg-2); }
.cs-meta .cs-conf.high { color: #7ac47f; border-color: rgba(122,196,127,.4); }
.cs-meta .cs-conf.medium { color: var(--accent); border-color: var(--accent-line); }
.cs-meta .cs-conf.low { color: var(--bad); border-color: var(--bad-line); }
.cs-chart { font: 14px/1.6 var(--mono); color: var(--accent); background: var(--card); border: 1px solid var(--rim); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; margin: 0 0 8px; max-height: 42vh; overflow: auto; -webkit-text-size-adjust: 100%; }
.cs-src { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cs-src a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-src svg { width: 13px; height: 13px; flex: none; color: var(--accent); }
.nx .pbody > *, .cs .pbody > * { flex: none; }
/* Get the song */
.gs-rows { border-radius: 14px; padding: 2px 14px; margin-top: 14px; }
.gs-row { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; border-bottom: 1px solid var(--rim); }
.gs-row:last-child { border-bottom: 0; }
.gs-row .muted { color: var(--muted); }
.gs-src { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.gs-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.gs-st .spin { margin: 0; }
.gs-st.ok { color: var(--good); border: 1px solid var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.gs-st.ok svg { width: 13px; height: 13px; }
.gs-st.wait { border: 1px dashed var(--rim); }
.gs-st.none { color: var(--muted); border: 1px solid var(--rim); font-size: 12px; }
.gs-pick { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; }
.gs-pick svg { width: 14px; height: 14px; }
.gs-pick.none { display: block; }
.cs-meta span.agree { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.cs-meta span svg { width: 12px; height: 12px; vertical-align: -1px; }
.cs-meta small { color: var(--muted); font-size: 11.5px; }
.gs-chart { color: var(--fg); }
.gs-vh { margin: 4px 2px 12px; } .gs-vh b { display: block; font-size: 17px; } .gs-vh span { font-size: 13px; color: var(--muted); }
.gs-ver { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.gs-ver i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.gs-ver.on { border-color: var(--accent-line); background: var(--accent-soft); } .gs-ver.on i { border: 5px solid var(--accent); }
.gs-ver b { display: block; font-size: 14.5px; font-weight: 500; } .gs-ver small { font-size: 12.5px; color: var(--muted); }
.foot.credit a, .foot a { color: var(--accent); }
.nx .row.nx-row { align-items: flex-start; height: auto; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
.nx-ch { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.nx-ch span { font: 600 12px var(--sans); padding: 2px 7px; border-radius: 7px; background: var(--card); border: 1px solid var(--rim); color: var(--fg-2); }
.nx-ch span.new { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.nx-b { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.nx-ctl { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pfoot .nx-ctl { margin-top: 0; }
.nx-ctl > *, .nx-ctl > .btn.primary { flex: none; }
.nx-ctl .seg { width: 100%; }
.nx-err { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 12px 12px; }
.nx-err > svg { width: 28px; height: 28px; color: var(--accent); opacity: .8; margin-bottom: 4px; }
.nx-err b { font-size: 17px; font-weight: 600; color: var(--fg); }
.nx-err p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.nx-err details { margin-top: 10px; width: 100%; text-align: left; font-size: 13px; color: var(--muted); }
.nx-err summary { text-align: center; cursor: pointer; }
.nx-err pre { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rim); white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 40vh; overflow: auto; }
.nx .pbody .nx-ctl .btn, .nx-ctl .btn { width: 100%; }
.nx-ctl .seg button { flex: 1; height: 36px; }
.nx-why { font-size: 13px; color: var(--fg-2); margin-top: 3px; line-height: 1.35; }

.stamp { position: absolute; right: 12px; top: 12px; transform: rotate(-8deg); font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 1.5px solid rgba(255,255,255,.85); border-radius: 6px; padding: 4px 7px; background: rgba(0,0,0,.28); }
.set-played { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.hist { display: flex; gap: 10px; margin: 10px 0 12px; }
.hist div { flex: 1; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); padding: 10px 12px; text-align: center; }
.hist b { display: block; font-size: 18px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist span { font-size: 12px; color: var(--muted); }
.set-note { display: block; margin: 0 0 14px; }
.set-note .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.set-note textarea { width: 100%; resize: none; border: 0; border-left: 2px solid var(--accent-line); background: none; color: var(--fg-2); font: 16px/1.45 var(--sans); padding: 4px 0 4px 12px; min-height: 30px; overflow: hidden; }
.set-note textarea::placeholder { color: var(--muted); }

.titlecard { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: radial-gradient(90% 60% at 50% 35%, var(--tint), transparent 75%), #08080a; color: #fff; animation: fade .35s ease-out; cursor: pointer; }
.titlecard.out { opacity: 0; transition: opacity .3s; }
.tc-cv { width: min(270px, 70vw); aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: tcin .9s cubic-bezier(.2,.8,.2,1); }
.tc-cv .cover { border-radius: 22px; }
@keyframes tcin { from { transform: scale(.92); opacity: .4; } }
.tc-k { font: 600 11px var(--sans); letter-spacing: .18em; color: var(--accent); text-transform: uppercase; margin-top: 30px; }
.titlecard h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 8px 0 6px; line-height: 1.1; }
.tc-m { font-size: 14px; color: rgba(255,255,255,.62); }
.tc-first { margin-top: 30px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.tc-first b { color: #fff; font-weight: 600; }
.tc-bar { width: 160px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); margin-top: 16px; overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: tcbar linear forwards; }
@keyframes tcbar { from { transform: scaleX(0); } }
.tc-skip { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.4); }
@media (prefers-reduced-motion: reduce) { .tc-cv { animation: none; } }

.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.set-hero { position: relative; text-align: center; margin: 0 0 4px; }
.set-hero::before { content: ""; position: absolute; left: -20px; right: -20px; top: -120px; height: 520px; background: radial-gradient(110% 70% at 50% 18%, var(--tint), transparent 72%); pointer-events: none; z-index: -1; }
.sh-big { position: relative; width: min(250px, 66vw); aspect-ratio: 1; margin: 6px auto 0; }
.sh-cover { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55); background: none; }
.sh-cover .cover { border-radius: 20px; }
.sh-edc { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; height: 28px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-size: 13px; }
.sh-edc svg { width: 14px; height: 14px; }
.cvopts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 2px; animation: fade .2s; }
.cvopts[hidden] { display: none; }
.cvo { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); width: 68px; border: 0; background: none; padding: 0; }
.cvo i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 11px; overflow: hidden; border: 1px solid var(--rim); background: var(--card); color: var(--accent); }
.cvo i > svg { width: 20px; height: 20px; }
.cvo i img { width: 100%; height: 100%; object-fit: cover; }
.cvo i .cover { border-radius: 0; place-self: stretch; width: 56px; height: 56px; }
.pk .cmd { flex: none; }
.cvo.on { color: var(--fg); }
.cvo.on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.cvo[aria-disabled="true"] { opacity: .5; }
.set-hero .settitle { display: block; margin: 16px auto 4px; text-align: center; }
.set-hero .title { font-size: 32px; }
.set-hero .meta { justify-content: center; margin: 0 0 6px; }
.set-hero .set-when { justify-content: center; display: inline-flex; margin: 4px 0 12px; padding: 4px 11px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; }
.crop { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; color: #fff; }
.cr-top { text-align: center; padding: calc(18px + var(--safe-t)) 0 12px; font-size: 16px; }
.cr-area { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.cr-area img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-select: none; max-width: none; }
.cr-frame { position: absolute; left: 20px; right: 20px; top: 50%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 18px; box-shadow: 0 0 0 2000px rgba(0,0,0,.62); border: 1.5px solid rgba(255,255,255,.85); pointer-events: none; max-height: calc(100% - 40px); }
.cr-hint { text-align: center; font-size: 14px; color: rgba(255,255,255,.7); padding: 10px 0; }
.cr-bar { display: flex; justify-content: space-between; padding: 6px 18px calc(18px + var(--safe-b)); }
.cr-bar .tb { color: #fff; font-size: 17px; }
.cr-bar .tb.go { color: var(--accent); font-weight: 600; }

.pk-top { display: flex; gap: 14px; align-items: center; margin: 2px 0 14px; }
.pk-cv { width: 92px; height: 92px; border-radius: 13px; overflow: hidden; flex: none; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.pk-tt { min-width: 0; }
.pk-tt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--fg); }
.pk-tt span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.pk-tt small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; opacity: .85; }
.pk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 2px; }
.pk-n { font: 600 12px var(--sans); color: var(--accent); width: 18px; text-align: center; flex: none; }
.set-when { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent); margin: 0 2px 16px; }
.set-when svg { width: 15px; height: 15px; }
.set-when span { color: var(--muted); }
.cover { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #121214; }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-t { position: absolute; left: 9%; right: 9%; bottom: 8%; font-family: var(--serif); color: #fff; line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,.5); text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cv-k { position: absolute; left: 9%; top: 8%; font: 600 9px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.upnext { display: flex; gap: 14px; align-items: center; border-radius: 20px; padding: 12px; margin: 16px 0 2px; background: linear-gradient(120deg, var(--tint), var(--card)); border: 1px solid var(--rim); cursor: pointer; }
.un-cv { width: 88px; height: 88px; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.un-t { flex: 1; min-width: 0; }
.un-t .lab { font: 600 10.5px var(--sans); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.un-t b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--fg); margin: 3px 0 4px; line-height: 1.12; }
.un-t span { font-size: 13px; color: var(--muted); }
.un-play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.un-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.shelf-h .sh-all { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; text-decoration: none; }
.shelf { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scroll-padding-left: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.shelf::-webkit-scrollbar { display: none; }
.sh-it { width: 128px; flex: none; border: 0; background: none; padding: 0; text-align: left; scroll-snap-align: start; }
.sh-cv { width: 128px; height: 128px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.sh-t { font-size: 13.5px; color: var(--fg); margin: 7px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-s { font-size: 12px; color: var(--muted); margin: 1px 2px 0; }
.sh-new .sh-cv { border: 1.5px dashed var(--rim); box-shadow: none; display: grid; place-items: center; color: var(--accent); }
.sh-new .sh-cv svg { width: 26px; height: 26px; }
.row-cv { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; flex: none; margin-right: 2px; }
body.searching .upnext, body.searching .shelf, body.searching .shelf-h { display: none; }
.ns .ns-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.ns .ns-head b { font-size: 16px; font-weight: 600; }
.ns-body { overflow-y: auto; padding: 4px 20px 30px; }
.ns-cover { width: 210px; height: 210px; margin: 6px auto 6px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.ns-cap { text-align: center; font-size: 12.5px; color: var(--muted); margin: 8px 0 18px; }
.ns-f { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rim); border-radius: 12px; padding: 0 14px; margin-bottom: 10px; min-height: 50px; }
.ns-f span { font-size: 14px; color: var(--muted); width: 54px; flex: none; }
.ns-f input { flex: 1; min-width: 0; border: 0; background: none; font-size: 17px; color: var(--fg); height: 48px; }
.ns-f input[type=datetime-local] { -webkit-appearance: none; appearance: none; text-align: left; }
.ns-x { border: 0; background: none; color: var(--muted); padding: 4px; }
.ns-x[hidden] { display: none; }
.ns-x svg { width: 16px; height: 16px; }
.ns-lab { font-size: 13px; color: var(--muted); margin: 14px 2px 8px; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-chips .n { color: var(--muted); font-size: 12px; margin-left: 2px; }

.seg.slide { position: relative; }
.seg.slide::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 7px; background: var(--accent-soft); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.seg.slide.right::before { transform: translateX(100%); }
.seg.slide button { position: relative; transition: color .2s; }
.seg.slide button.on { background: none; }
.cebar .seg[hidden] { display: none; }
.cebar #ce-done { margin-left: auto; }
.ed-tools { display: flex; gap: 8px; margin: 0 0 12px; }
.ed-tx { overflow-x: auto; border: 1px solid var(--rim); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
.ed-tx-in { position: relative; display: inline-block; min-width: 100%; vertical-align: top; }
/* iPhone enlarges wide blocks of text on its own; keep the editor at its set size. */
.ed-tx, .ed-tx * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 16px: iPhone zooms into any text field set smaller than that when it gets focus. */
.ed-hl, .ed-tx textarea { font: 16px/1.55 var(--mono); padding: 12px 14px 40px; margin: 0; white-space: pre; tab-size: 4; letter-spacing: 0; box-sizing: border-box; }
.ed-hl { color: var(--fg); min-height: 50vh; }
.ed-hl .hc, .ed-hl div.hc { color: var(--accent); }
.ed-hl div.hs { color: var(--muted); }
.ed-tx textarea { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; resize: none; overflow: hidden; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--fg); outline: none; }
.ed-tx textarea::placeholder { -webkit-text-fill-color: var(--muted); color: var(--muted); }
.ed-tx textarea::selection { background: var(--accent-soft); }

/* Writing mode (phone, typing in Text): the editor fills the space above the
   keyboard and the bar rides on the keyboard. --vv-* follow the visible area. */
body.writing::before { content: ""; position: fixed; inset: -50vh 0; z-index: 24; background: var(--bg); }
body.writing .ed-tx { position: fixed; z-index: 25; left: 8px; right: 8px; top: calc(var(--vv-top, 0px) + var(--safe-t) + 8px); height: calc(var(--vv-h, 100vh) - var(--safe-t) - var(--bar-h, 56px) - 24px); overflow: auto; overscroll-behavior: contain; }
body.writing .ed-tx-in { min-height: 100%; }
body.writing .cebar { bottom: auto; top: calc(var(--vv-top, 0px) + var(--vv-h, 100vh) - var(--bar-h, 56px) - 8px); box-shadow: none; }
body.writing .coach, body.writing .coach-dim { display: none; }

.qcancel { display: none; border: 0; background: none; color: var(--accent); font-size: 16px; padding: 0 4px 0 6px; flex: none; }
body.searching .head, body.searching .weekly, body.searching .today, body.searching #chips, body.searching .bk, body.searching .dock-fade, body.searching .dock .add { display: none; }
body.searching .qcancel { display: block; }
body.searching .dock { top: calc(10px + var(--safe-t)); bottom: auto; transform: translateX(-50%) !important; animation: totop .28s cubic-bezier(.2,.8,.2,1); }
body.searching #list { padding-top: 52px; }
body.searching #list > .label:first-child { margin-top: 8px; }
@keyframes totop { from { opacity: 0; transform: translate(-50%, 24px); } }
@media (prefers-reduced-motion: reduce) { body.searching .dock { animation: none; } }

.cebar .seg { flex: 0 0 160px; }
.ed-title { width: 100%; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--rim); border-radius: 12px; padding: 4px 10px; letter-spacing: inherit; }
.ed-details { margin: 8px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.ed-artist { font-size: 16px; color: var(--fg-2); background: var(--card); border: 1px solid var(--rim); border-radius: 10px; padding: 9px 10px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--rim); background: var(--card); font-size: 14px; color: var(--muted); }
.ed-chip b { color: var(--fg); font-weight: 600; }
.ed-tap { color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ed-tap svg { width: 15px; height: 15px; }
.ed-tap.beat { animation: tapbeat .18s ease-out; }
@keyframes tapbeat { from { background: var(--accent-soft); border-color: var(--accent); } }
.ed-chip select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.ed-chip input { width: 42px; border: 0; background: none; color: var(--fg); font: 600 16px var(--sans); text-align: right; padding: 0; }
.ed-hint { font-size: 13px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ed-hint svg, .ce-sec svg, .ce-pen svg { width: 14px; height: 14px; }
.ce-sec { display: flex; width: fit-content; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; text-align: left; }
.ce-sec svg { color: var(--muted); opacity: .7; }
.ce-pen { position: absolute; right: -6px; bottom: 0; border: 0; background: none; color: var(--muted); padding: 6px 8px; opacity: .8; }
.ce-input { width: 100%; font: inherit; font-size: max(16px, 1em); color: var(--fg); background: var(--card); border: 1px solid var(--accent-line); border-radius: 8px; padding: 6px 8px; }
.ce-add { display: flex; width: fit-content; align-items: center; gap: 6px; border: 1px dashed var(--rim); background: none; color: var(--muted); border-radius: 10px; padding: 6px 12px; font-size: 13px; margin: 0 0 14px; }
.ce-add svg { width: 14px; height: 14px; }
.ed-end { margin-top: 6px; }

.empty-hint { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0 4px 12px; }
body.cedit .sheet > * { opacity: 1 !important; }
body.cedit .sheet .prow, body.cedit .sheet .dpop { display: none; }
body.cedit .dock, body.cedit .dock-fade, body.cedit #strip, body.cedit .metarow, body.cedit .chead, body.cedit .smap { display: none; }
body.cedit .sheet { padding-bottom: 120px; }
.cebar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); width: min(496px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; font-size: 14px; color: var(--fg-2); justify-content: space-between; border: 1px solid var(--rim); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.cebar.glass { background: var(--solid); }
.cebar span { flex: 1; }
.ce-line { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: .3em; row-gap: 4px; margin: 0 0 .7em; padding-right: 30px; }
.ce-w { display: inline-flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0 1px; font: inherit; color: var(--fg); border-radius: 6px; text-align: left; }
.ce-w .ce-t { border-bottom: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); line-height: 1.35; }
.ce-w .ce-c { font-size: .82em; font-weight: 650; color: var(--accent); min-height: 1.3em; line-height: 1.3; }
.ce-w:not(.has) .ce-c { color: transparent; }
.ce-w.sel { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line); }
.ce-w.sel:not(.has) .ce-c { color: var(--accent); opacity: .6; }
.ce-other { color: var(--muted); font-size: .85em; white-space: pre-wrap; margin: 0 0 .6em; }
.ce-word { color: var(--accent); font-weight: 500; }
.ce-lab { margin: 10px 0 6px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-chips.q { margin-top: 6px; }
.ce-chip { min-width: 42px; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font-size: 15px; font-weight: 600; }
.ce-chips.q .ce-chip { font-weight: 500; color: var(--fg-2); font-size: 14px; }
.ce-chip.on, .ce-chips.q .ce-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.smap { position: fixed; right: 0; top: calc(118px + var(--safe-t)); bottom: calc(118px + var(--safe-b)); width: 22px; z-index: 18; touch-action: none; transition: opacity .3s; }
.smap .sm-track, .smap .sm-fill { position: absolute; right: 10px; top: 0; width: 2px; border-radius: 2px; }
.smap .sm-track { bottom: 0; background: var(--rim); }
.smap .sm-fill { background: var(--accent); opacity: .8; }
.smap .sm-m { position: absolute; right: 5px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; }
.smap .sm-m i { width: 11px; height: 11px; border-radius: 50%; background: var(--solid); border: 2px solid var(--muted); display: block; box-sizing: border-box; }
.smap .sm-m.past i { border-color: var(--accent); }
.smap .sm-m.on i { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.smap .sm-m b { display: none; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); background: var(--solid); border: 1px solid var(--rim); padding: 5px 9px; border-radius: 9px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.smap .sm-m.on b { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.smap.active .sm-m b { display: block; }
body.playing .smap:not(.active) { opacity: .45; }
.smap.away { opacity: 0 !important; pointer-events: none; }
body.stage.playing .smap { opacity: 0; pointer-events: none; }

.tappause.hint { width: auto; height: auto; margin: 0; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; font-size: 15px; animation: fade .2s; }
.stagechip { display: flex; align-items: center; gap: 8px; margin: 10px auto 0; background: none; border: 0; color: var(--muted); font-size: 14px; }
.stagechip svg { width: 16px; height: 16px; }
.stagechip b { font-weight: 600; color: var(--fg-2); }
.stagechip.on, .stagechip.on b { color: var(--accent); }
.nextline { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-b)); z-index: 21; width: min(496px, calc(100% - 24px)); display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--solid) 92%, transparent); border: 1px solid var(--rim); font-size: 14px; color: var(--fg-2); animation: fade .6s; white-space: nowrap; overflow: hidden; }
.nextline .lab { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); flex: none; }
.nextline b { font-weight: 600; color: var(--fg); flex: none; }
.nextline .fl { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.nextline .tn { flex: none; color: var(--accent); font-size: 12px; }
/* Stage mode: bigger, brighter, nothing extra on screen. */
body.stage #strip, body.stage .metarow { display: none; }
body.stage .song-title { font-size: 26px; margin-top: 8px; }
body.stage .sheet { color: #fff; }
:root[data-theme="light"] body.stage .sheet { color: #000; }
body.stage .sheet .c { filter: saturate(1.2) brightness(1.12); }
body.stage .sheet.focus > *:not(.cur):not(.prow):not(.dpop) { opacity: .6; }
body.stage .sheet.focus > .cur2:is(.pr, .ly) { opacity: .85; }
body.stage.playing { overscroll-behavior: none; }

.ls-list { margin: 10px 0 6px; max-height: min(46dvh, 420px); overflow-y: auto; }
.ls-q { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rim); margin: 2px 0 6px; }
.ls-qi svg { width: 16px; height: 16px; color: var(--muted); }
.ls-q input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--fg); height: 40px; }
.ls-item { display: flex; align-items: center; }
.ls-item .ls-row { flex: 1; min-width: 0; }
.ls-pv { flex: none; margin: 0 10px 0 4px; width: 36px; height: 36px; border-radius: 50%; color: var(--accent); border-color: var(--accent-line); }
.ls-pv svg { fill: currentColor; stroke: none; width: 13px; height: 13px; }
.ls-pv.on { background: var(--accent-soft); }
.ls-other { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.ls-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; }
.ls-open svg { width: 18px; height: 18px; }
.ls-other .danger { margin: 0; }
.ls-row { gap: 12px; }
.ls-row img, .ls-art { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; background: var(--card); display: grid; place-items: center; color: var(--muted); }
.ls-more { display: block; margin: 8px auto 4px; font-size: 14px; }
.stat.listen svg, .stat.tunechip svg { width: 13px; height: 13px; color: var(--accent); }

.tappause { position: fixed; left: 50%; top: 40%; z-index: 60; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--solid) 85%, transparent); border: 1px solid var(--rim); color: var(--fg); pointer-events: none; animation: tp .7s ease-out forwards; }
.tappause svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
@keyframes tp { 0% { opacity: 0; transform: scale(.85); } 20% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
.endnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 8px; font-size: 14px; color: var(--muted); animation: endin .9s ease-out both; }
.endnote svg { width: 16px; height: 16px; color: var(--accent); }
@keyframes endin { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .endnote { animation: fade .3s; } }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--rim); margin: 8px auto 4px; flex: none; }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px; flex: none; }
.ph h2 { font-size: 17px; font-weight: 600; margin: 0; }
.tb { border: 0; background: none; font-size: 16px; padding: 8px 10px; color: var(--fg-2); }
.tb.go { color: var(--accent); font-weight: 600; }
.pbody { flex: 1; overflow-y: auto; padding: 0 16px calc(20px + var(--safe-b)); display: flex; flex-direction: column; }
.fields { border-radius: var(--r); margin-bottom: 12px; }
.fld { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.fld:last-child { border-bottom: 0; }
.fld .lab { width: 54px; font-size: 15px; color: var(--muted); flex: none; }
.fld input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; height: 44px; }
.fld .fsel { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; height: 44px; color: var(--fg); -webkit-appearance: none; appearance: none; }
.seg { display: flex; padding: 2px; border-radius: 9px; background: var(--card-2); flex: 1; }
.seg button { flex: 1; height: 28px; border-radius: 7px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.danger { margin-top: 18px; border: 0; background: none; color: var(--bad); font-size: 15px; padding: 10px; }
.pc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); margin-bottom: 12px; }
.pc-head svg { color: var(--accent); width: 16px; height: 16px; }
.preview { border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); padding: 10px 14px; height: 96px; overflow: hidden; font: 13px/1.5 var(--mono); white-space: pre; margin-bottom: 12px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.preview .ch { color: var(--accent); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; display: inline-flex; align-items: center; border: 1px solid var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.actions { display: flex; gap: 10px; margin-top: 2px; }
.btn.primary { flex: 2; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Settings */
.set-group { border-radius: 16px; overflow: hidden; margin-top: 8px; }
.set { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; color: var(--fg); font-size: 16px; }
.set:last-child { border-bottom: 0; }
.set .tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--rim); color: var(--fg-2); flex: none; }
.set .tile svg { width: 17px; height: 17px; }
.set .name { flex: 1; }
.set .val { color: var(--accent); font-size: 15px; }
.set .chev { color: var(--muted); width: 16px; height: 16px; }
.set select { position: absolute; inset: 0; opacity: 0; width: 100%; font-size: 16px; }
.toggle { width: 51px; height: 31px; border-radius: 16px; position: relative; flex: none; border: 0; padding: 0; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim); transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform .2s; }
.toggle.on { background: var(--accent); box-shadow: none; }
.toggle.on::after { transform: translateX(20px); }
.foot { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 14px 6px 0; }

.toast { position: fixed; left: 50%; top: calc(12px + var(--safe-t)); transform: translate(-50%, -150%); padding: 10px 16px; border-radius: var(--r); z-index: 60; transition: transform .25s; font-size: 14px; background: var(--solid); border: 1px solid var(--rim); box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); }
.tact { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 2px; flex: none; }
.toast.near { transform: translate(-50%, 6px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.toast.near.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Tuner ---------- */
body.tuning { overflow: hidden; }
.tuner2 { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; padding: calc(8px + var(--safe-t)) 18px calc(14px + var(--safe-b)); max-width: 520px; margin: 0 auto; animation: fade .2s; overflow: hidden; }
.tn-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.tn-top label[hidden] { visibility: hidden; display: inline-flex; }
.tn-chip { position: relative; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--rim); background: var(--card); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-2); }
.tn-chip b { color: var(--fg); font-weight: 600; }
.tn-chip .chev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--muted); }
.tn-chip select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.tn-tiles { display: flex; gap: 8px; margin-top: 10px; }
.tn-tile { flex: 1; height: 92px; border-radius: 16px; border: 1px solid var(--rim); background: var(--card); color: var(--muted); padding: 10px 0 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tn-tile i { display: flex; justify-content: center; align-items: flex-start; margin-top: 8px; height: 60px; }
.tn-tile i svg { height: 64px; width: auto; }
.tn-tile[data-mode="chromatic"] i svg { height: 36px; margin-top: 8px; }
.tn-tile.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
:root[data-theme="light"] .tn-tile.on { color: #8f4524; } /* small caps on a copper tint need a deeper copper */
.tn-read { text-align: center; margin-top: 18px; }
/* Strings show the advice only: the headstock already says which string.
   Chromatic and "All in tune" keep the big letter. */
.tn-note { min-height: 78px; display: none; align-items: baseline; justify-content: center; }
.tuner2.chrom .tn-note, .tn-note.done { display: flex; }
.tn-note b { font-family: var(--serif); font-weight: 400; font-size: 72px; line-height: 1; color: var(--fg); }
.tn-note sub { font-size: 22px; color: var(--muted); margin-left: 2px; vertical-align: baseline; }
.tn-note.done b { font-size: 46px; color: var(--good); }
.tn-sayrow { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 24px; }
.tn-say { font: 500 18px var(--sans); color: var(--fg); }
.tn-say.warn { font-weight: 400; font-size: 14px; color: var(--muted); padding: 0 10px; }
.tn-c { font: 500 12.5px var(--mono); color: var(--muted); min-height: 16px; margin-top: 3px; display: none; }
.tuner2.chrom .tn-c, .tn-note.done + .tn-sayrow + .tn-c { display: block; }
.tn-gauge { position: relative; margin: 14px 4px 0; flex: none; text-align: center; }
.tn-gauge[hidden] { display: block; visibility: hidden; }
.tuner2.chrom .tn-gauge { display: none; }
/* The meter window: a dark well with bronze piping, lit softly from behind. */
.tn-win { position: relative; height: 66px; border-radius: 14px; border: 1px solid var(--bronze-line);
  background: radial-gradient(60% 90% at 50% 50%, rgba(255,194,122,.1), transparent 70%), var(--recess);
  box-shadow: var(--recess-shadow), 0 0 0 3px rgba(0,0,0,.35); overflow: hidden; }
.tn-meter { position: absolute; inset: 0; }
.tn-meter[hidden] { display: none; }
.tn-tick { position: absolute; top: 24px; width: 1.5px; height: 22px; margin-left: -.75px; border-radius: 1px; background: rgba(241,227,196,.38); }
.tn-tick.big { top: 18px; height: 34px; background: rgba(241,227,196,.6); }
.tn-zone { position: absolute; top: 12px; bottom: 8px; border-radius: 5px; background: color-mix(in srgb, var(--good) 16%, transparent); }
.tn-mid { position: absolute; left: 50%; top: 8px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--recess-fg); }
.tn-dot { position: absolute; top: 18px; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; --c: #e0a43a; background: var(--c); box-shadow: 0 0 10px var(--c); transition: left .12s ease-out, background .2s, opacity .3s; }
.tn-dot.far { --c: #d9534f; }
.tn-dot.good { --c: var(--good); }
.tn-dot.idle { opacity: 0; left: 50%; }
/* The label sits on the side toward the center, so it never runs off the window. */
.tn-dot span { position: absolute; top: -16px; right: 10px; font: 600 11px var(--sans); color: var(--c); white-space: nowrap; }
.tn-dot.flat span { right: auto; left: 10px; }
.tn-pill { display: inline-block; min-height: 26px; margin-top: 10px; padding: 0 12px; border-radius: 13px; font: 500 12.5px/26px var(--sans); font-variant-numeric: tabular-nums; color: var(--recess-dim); background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); }
.tn-pill:empty { visibility: hidden; }
.tn-stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.tn-stage > svg { height: 100%; max-height: 380px; width: auto; max-width: 100%; }
.tn-stage .tn-key { cursor: pointer; }
.tn-stage svg text { font-family: var(--sans); }
.tn-dial { width: 100%; max-width: 320px; height: auto; }
#tn-needle line { stroke: var(--accent); } #tn-needle circle { fill: var(--accent); }
#tn-needle.good line { stroke: var(--good); } #tn-needle.good circle { fill: var(--good); }
#tn-needle.idle { opacity: .25; }
#tn-needle { transform-box: view-box; transform-origin: 150px 176px; transition: transform .16s cubic-bezier(.3,.7,.4,1), opacity .3s; } /* glides between readings */
.tuner2.chrom .tn-note b { font-size: 92px; }
.tn-foot { display: flex; align-items: center; gap: 10px; min-height: 48px; flex: none; }
.tn-foot .btn { flex: 1; height: 46px; }
.tn-foot .btn.primary { flex: 1.4; }
.tn-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); position: relative; }
.tn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tn-switch i { width: 40px; height: 24px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rim); position: relative; transition: background .2s; }
.tn-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.tn-switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.tn-switch input:checked + i::after { transform: translateX(16px); background: #fff; }
.tn-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-status, .tn-any { margin-left: auto; font-size: 13px; color: var(--muted); }
.tuner2.chrom .tn-foot { justify-content: center; }
.tuner2.chrom .tn-any { margin-left: 0; }

/* ---------- Coach: one-time captions ---------- */
.coach { position: fixed; z-index: 66; max-width: min(300px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 14px; background: var(--solid); border: 1px solid var(--accent-line); color: var(--fg); font-size: 14.5px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; animation: coachin .28s cubic-bezier(.2,1.1,.3,1); }
.coach.out { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.coach.above::after, .coach.below::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 12px; height: 12px; background: var(--solid); border: 1px solid var(--accent-line); transform: rotate(45deg); }
.coach.above::after { bottom: -7px; border-top: 0; border-left: 0; }
.coach.below::after { top: -7px; border-bottom: 0; border-right: 0; }
.coach.free { left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); width: max-content; text-align: center; }
.coach.free.out { transform: translate(-50%, 4px); }
@keyframes coachin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.coach.free { animation-name: coachinfree; }
@keyframes coachinfree { from { opacity: 0; transform: translate(-50%, 6px); } }
.coach-pulse { animation: coachpulse 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes coachpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-line); } 50% { box-shadow: 0 0 0 8px transparent, 0 0 0 4px var(--accent-soft); } }
.coach-twice { animation: coachpulse .7s ease-in-out 2; }
.coach-line { background: var(--accent-soft); border-radius: 10px; box-shadow: 0 0 0 6px var(--accent-soft); transition: background .4s, box-shadow .4s; }
.tappause.ghost { animation: ghostpause 1.7s ease-in-out forwards; }
@keyframes ghostpause { 0% { opacity: 0; transform: scale(.9); } 25%, 70% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
.newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: 2px; }
#more { position: relative; }
#more .newdot { position: absolute; top: 7px; right: 7px; margin: 0; }
.cmd.ph-swap input::placeholder { color: var(--accent); transition: color .4s; }
@media (prefers-reduced-motion: reduce) { .coach-pulse, .coach-twice, .tappause.ghost { animation: none; } .tappause.ghost { opacity: .85; } }

.coach b { display: block; font-weight: 600; }
.coach span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.coach span svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--accent); }
.coach ul { margin: 6px 0 0; padding: 0 0 0 16px; color: var(--fg-2); font-size: 13.5px; }
.coach li { margin: 3px 0; }
.coach li::marker { color: var(--accent); }
.coach-dim { position: fixed; inset: 0; z-index: 64; pointer-events: none; background: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), transparent 0 96%, rgba(0,0,0,.5) 100%); animation: fade .3s; }
:root[data-theme="light"] .coach-dim { background: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), transparent 0 96%, rgba(40,30,20,.3) 100%); }
.coach-dim.out { opacity: 0; transition: opacity .25s; }
.ed-tap.flash { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transition: none; }
body.nn-demo .nn { display: flex; animation: nnin .3s ease-out; }
.haptic { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.gs-intro { color: var(--muted); font-size: 14.5px; line-height: 1.45; margin: 0 0 18px; }
.gs-intro b { color: var(--fg-2); }
.gs-list { margin-bottom: 16px; }
.gs-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.gs-row:last-child { border-bottom: 0; }
.gs-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.gs-ic svg { width: 19px; height: 19px; }
.gs-t { flex: 1; min-width: 0; }
.gs-t b { display: block; font-weight: 500; font-size: 15px; color: var(--fg); }
.gs-t span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.gs-show { flex: none; font: 600 13px var(--sans); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 14px; padding: 6px 10px; background: none; }

/* ---------- Library: Key and Tuning filters, A–Z index ---------- */
.azx { position: fixed; z-index: 18; right: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; touch-action: none; -webkit-user-select: none; user-select: none; }
.azx button { width: 22px; height: min(19px, 2.6vh); padding: 0; border: 0; background: none; font: 600 11px var(--sans); color: var(--accent); line-height: 1; }
.azx.on { background: var(--card-2); }
.azx-pop { position: absolute; right: 34px; width: 52px; height: 52px; margin-top: -26px; border-radius: 14px; display: grid; place-items: center; background: var(--solid); border: 1px solid var(--accent-line); color: var(--accent); font: 600 26px var(--serif); box-shadow: var(--shadow); pointer-events: none; }
.azx-pop[hidden] { display: none; }
body.searching .azx { display: none; }

.set .seg.mini { margin-left: auto; }
/* Tuner: why it needs the microphone, before the phone asks */
.tuner2.asking .tn-gauge, .tuner2.asking .tn-stage, .tuner2.asking .tn-foot { display: none; }
.tuner2.asking .tn-note { display: none; }
.tn-mic { margin: auto 6px; padding: 26px 22px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--rim); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tn-mic-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.tn-mic-ic svg { width: 26px; height: 26px; }
.tn-mic b { font-size: 19px; font-weight: 600; color: var(--fg); }
.tn-mic p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tn-mic .btn, .tn-mic .tb { flex: none; }
.tn-mic .btn { width: 100%; height: 46px; }
body.has-azx #list .list { margin-right: 22px; }

/* A screen that failed to draw */
.oops { margin: 22vh 24px 0; text-align: center; }
.oops b { display: block; font-size: 19px; margin-bottom: 8px; }
.oops p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.oops .actions { justify-content: center; }
.oops .btn { flex: 1; white-space: nowrap; }

/* In-app questions (ask): above any open panel, below coach callouts */
.ask .scrim { z-index: 62; }
.ask .panel { z-index: 63; padding: 18px 16px 16px; }
.ask-t { display: block; font-size: 17px; font-weight: 600; color: var(--fg); margin: 0 2px 6px; }
.ask-p { color: var(--muted); font-size: 14px; line-height: 1.4; margin: 0 2px 12px; }
.ask-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.ask-row .fields { flex: 1; min-width: 0; }
.ask-row input { font-size: 18px; font-weight: 500; }
.ask-pv { flex: none; width: 70px; height: 84px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); display: grid; place-items: center; }
.ask-pv:empty { display: none; }
.ask-pv svg { width: 58px; height: auto; }
.ask-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.ask-picks .chip { height: 34px; font-size: 14px; }
.actions.stack { flex-direction: column; }
.actions.stack .btn { flex: none; width: 100%; }
.btn.bad { color: var(--bad); border-color: var(--bad-line); }

/* Keyboard focus is always visible (touch doesn't show it) */
button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible, label:has(> select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
[role=dialog]:focus-visible { outline: none; }
/* Bigger touch areas for small text controls, without moving them */
#sort { padding: 10px 0; margin: -10px 0; }
.stagechip { padding: 8px 10px; margin: 3px auto -7px; }

/* ---------- Wide screens: iPad and phone landscape ---------- */
.rail, .side { display: none; }
@media (min-width: 700px) {
  :root { --wide: 1.25; }
  .app { max-width: 680px; }
  .dock { width: min(640px, calc(100% - 48px)); }
}
@media (min-width: 1000px) {
  :root { --wide: 1.5; }
  body.wide .app.viewer { max-width: none; margin: 0; padding-left: 64px; padding-right: 372px; }
  body.wide .rail { display: block; position: fixed; top: calc(28px + var(--safe-t)); right: 36px; bottom: calc(100px + var(--safe-b)); width: 300px; overflow-y: auto; z-index: 6; scrollbar-width: none; }
  body.wide .rail::-webkit-scrollbar { display: none; }
  body.wide .rail .nn { border: 1px solid var(--accent-line); border-radius: 18px; background: var(--card); margin-bottom: 22px; }
  body.wide .rail .strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 10px; }
  body.wide .rail .scard { width: 64px; height: 92px; }
  body.wide .rail .scard svg { width: 60px; height: auto; }
  body.wide.nn-on .app.viewer { padding-bottom: calc(110px + var(--safe-b)); }
  body.wide .smap { right: 340px; }
  body.wide .dock { left: calc((100% - 336px) / 2); width: min(720px, calc(100% - 440px)); }
  body.wide .dock-fade { right: 360px; }
  body.wide .chead { right: 360px; }
}
@media (min-width: 1150px) {
  body.wide .app.viewer { padding-left: 326px; }
  body.wide .side { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 290px; padding: calc(24px + var(--safe-t)) 12px calc(24px + var(--safe-b)); border-right: 1px solid var(--hair); background: var(--bg); overflow-y: auto; z-index: 26; }
  body.wide .dock { left: calc(290px + (100% - 290px - 360px) / 2); width: min(720px, calc(100% - 290px - 420px)); }
  body.wide .chead { left: 290px; }
}
/* Editing on a wide screen: the full width for the song, nothing to tap away to */
@media (min-width: 1000px) {
  body.wide.cedit .rail, body.wide.cedit .side { display: none; }
  body.wide.cedit .app.viewer { max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  body.wide .dock-fade { left: 290px; }
}
.side-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 12px 10px; }
.side-r { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--fg); }
.side-r b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-r span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-r.on { background: var(--accent-soft); }
.side-r.on b { color: var(--accent); }
/* Phone on its side: the controls become a slim column on the right, so the
   song gets the whole height. Now and Next and the loop bar need the height. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --wide: 1.25; }
  .app.viewer { max-width: none; padding-left: calc(40px + var(--safe-l, 0px)); padding-right: calc(124px + var(--safe-r, 0px)); padding-bottom: 40px; }
  .app.viewer .dock { left: auto; right: calc(10px + var(--safe-r, 0px)); top: calc(10px + var(--safe-t)); bottom: calc(10px + var(--safe-b)); width: 84px; transform: none; }
  .app.viewer .pw { display: flex; flex-direction: column; }
  body .app.viewer .dock .nn, .app.viewer .looprow.on { display: none; }
  .app.viewer .player { flex: 1; height: auto; flex-direction: column; justify-content: space-between; padding: 12px 0; gap: 6px; }
  .app.viewer .play { width: 56px; height: 56px; border-radius: 16px; }
  .app.viewer .speed { flex: 1; flex-direction: column-reverse; justify-content: center; gap: 6px; }
  .app.viewer .speed input { writing-mode: vertical-lr; direction: rtl; width: 28px; flex: 1; min-height: 60px; max-height: 140px; }
  .app.viewer .speed span { width: auto; text-align: center; }
  .app.viewer .vsep { width: 40px; height: 1px; }
  .app.viewer .step { flex-direction: column-reverse; }
  .app.viewer .dock-fade { display: none; }
  .smap { right: calc(100px + var(--safe-r, 0px)); }
  body.nn-on .app.viewer { padding-bottom: 40px; }
}

/* ---------- Sketch: sing a song idea line by line ---------- */
.app:has(.skpad) { padding-bottom: calc(260px + var(--safe-b)); }
.app:has(.skpad.small) { padding-bottom: calc(190px + var(--safe-b)); }
.skh { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; }
.skh .title { font-size: 32px; }
.skdots { display: flex; gap: 6px; }
.skdots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); display: block; }
.skdots i.on { background: var(--accent); }
.skmeter { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-2); margin: 0 2px; min-height: 20px; }
.skm-k { color: var(--accent); font-weight: 600; }
.skm-bars { display: flex; gap: 3px; }
.skm-bars i { width: 14px; height: 5px; border-radius: 3px; background: var(--rim); display: block; transition: background .3s; }
.skm-bars i.on { background: var(--accent); }
.skwheel.big { display: flex; justify-content: center; margin: 6px 0 2px; }
.skwheel-row { display: flex; gap: 14px; align-items: center; margin: 10px 0 8px; }
.skwheel.small { flex: none; width: 116px; height: 116px; }
.skw path { fill: var(--card); stroke: var(--bg); stroke-width: 2; transition: fill .4s; cursor: pointer; }
.skw.m path { fill: transparent; stroke: var(--hair); stroke-width: 1; }
.skw text { text-anchor: middle; fill: var(--muted); font-weight: 500; pointer-events: none; transition: fill .4s; }
.skw.lit path { fill: color-mix(in srgb, var(--accent) calc(var(--s) * 18% + 2%), transparent); }
.skw.lit text { fill: var(--accent); }
.skw.on path { fill: color-mix(in srgb, var(--accent) calc(var(--s) * 85% + 10%), transparent); }
.skw.on text { fill: var(--fg); font-weight: 700; }
.skw.tap path { fill: var(--accent); }
.skw.tap text { fill: var(--on-accent); }
.skw-ring { fill: none; stroke: var(--hair); }
.skw-dot { fill: var(--rim); transition: r .3s; }
.skw-dot.on { fill: var(--accent); }
.skw-glow { fill: var(--accent); opacity: .15; }
.skw-c { text-anchor: middle; fill: var(--fg); font-family: var(--serif); }
.skw-s { text-anchor: middle; fill: var(--muted); }
.skfam span { font-size: 13px; color: var(--muted); }
.skfam div { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.skfam-c { height: 30px; min-width: 38px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font: 600 14px var(--sans); }
.skfam small { font-size: 11.5px; color: var(--muted); }
.sk-lab { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.sk-lab.on { color: var(--accent); }
.sklive { margin: 6px 2px 0; }
#sk-rib { display: block; width: 100%; height: 86px; }
.skg-a { stop-color: var(--accent); stop-opacity: .45; }
.skg-b { stop-color: var(--accent); stop-opacity: 0; }
.sk-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sk-empty { font: 13px var(--sans); fill: var(--muted); }
.skwords { font: 500 19px var(--sans); color: var(--fg-2); margin-top: 4px; }
.skchips { display: flex; gap: 6px; align-items: center; margin-top: 8px; min-height: 28px; }
.skc { padding: 3px 10px; border-radius: 10px; font: 600 13px var(--sans); border: 1px solid var(--rim); color: var(--fg-2); }
.skc.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.skchips small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.skintro { color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; margin: 8px 18px 0; }
/* Strum it */
.seg.skmode { display: flex; margin: 4px 0 10px; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--rim); }
.seg.skmode button { flex: 1; min-height: 36px; border: 0; border-radius: 9px; background: none; color: var(--fg-2); font-size: 14px; }
.seg.skmode button.on { background: var(--card-2); color: var(--fg); font-weight: 600; box-shadow: 0 1px 0 var(--rim); }
.seg.skmode button:disabled { opacity: .5; }
.skear { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.skear .spin, .sknb-hear .spin { margin: 0; }
.sknb-hear { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.sknb-riff { display: block; margin: 6px 0 2px; font: 600 13px var(--mono); color: var(--accent); }
.skcmp { display: flex; gap: 8px; margin: 8px 0 4px; }
.skcmp button { flex: 1; text-align: left; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--muted); font-size: 12px; }
.skcmp button.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg-2); }
.skcmp b { display: block; margin-top: 2px; font: 600 14px var(--mono); color: var(--accent); }
.sknb { border-radius: 18px; background: var(--card); border: 1px solid var(--rim); padding: 2px 12px; }
.sknb-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.sknb-n { width: 14px; padding-top: 24px; font-size: 12px; color: var(--muted); flex: none; }
.sknb-txt { flex: 1; min-width: 0; }
.sknb-line { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 16px 0 2px; color: var(--fg); font: 18px/1.9 var(--serif); }
.sknb-w { position: relative; display: inline-block; }
.sknb-w b { position: absolute; left: 0; top: -1.05em; font: 700 13px var(--sans); color: var(--accent); white-space: nowrap; }
.sknb-none { color: var(--muted); font-style: italic; }
.sknb-in { width: 100%; margin-top: 14px; height: 40px; border: 0; border-bottom: 1.5px solid var(--accent-line); background: none; font: 18px var(--serif); color: var(--fg); }
.sknb-hint { display: block; text-align: left; margin: 6px 0 4px; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--accent-line); background: none; font: italic 14px/1.4 var(--serif); color: var(--muted); }
.sknb-acts { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.sknb-acts .sb { width: 30px; height: 30px; }
.sknb-next { padding: 12px 0 12px 22px; font: italic 16px var(--serif); color: var(--muted); }
/* The pad: a glowing half circle at the bottom */
.skpad { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(520px, 100%); height: calc(240px + var(--safe-b)); border-radius: 50% 50% 0 0 / 22% 22% 0 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(28px + var(--safe-b)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 100%, rgba(224,90,74,.32), rgba(224,90,74,.08) 55%, transparent 75%); transition: background .25s; }
.skpad.small { height: calc(170px + var(--safe-b)); }
.skpad.on { background: radial-gradient(120% 90% at 50% 100%, rgba(224,90,74,.6), rgba(224,90,74,.14) 55%, transparent 75%); }
.skpad.on.redo { background: radial-gradient(120% 90% at 50% 100%, rgba(140,140,140,.45), rgba(140,140,140,.1) 55%, transparent 75%); }
.skpad.up { background: radial-gradient(120% 90% at 50% 100%, rgba(237,162,127,.55), rgba(237,162,127,.12) 55%, transparent 75%); }
.skpad b { font: 600 16px var(--sans); color: var(--fg); position: relative; }
.skpad span { font-size: 12.5px; color: var(--fg-2); margin-top: 4px; position: relative; min-height: 1.2em; }
.skpad-ring { position: absolute; bottom: calc(58px + var(--safe-b)); width: 150px; height: 150px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg) 18%, transparent); display: none; }
.skpad-ring.r2 { width: 210px; height: 210px; bottom: calc(28px + var(--safe-b)); opacity: .5; }
.skpad.on .skpad-ring { display: block; transform: scale(calc(1 + var(--lv, 0) * .18)); border-color: color-mix(in srgb, var(--accent) calc(var(--lv, 0) * 80%), color-mix(in srgb, var(--fg) 18%, transparent)); transition: transform .1s, border-color .1s; }
.skpad-dot { position: absolute; bottom: calc(66px + var(--safe-b)); width: 64px; height: 64px; border-radius: 50%; background: #e05a4a; box-shadow: 0 0 0 6px rgba(224,90,74,.2); }
.skpad:not(.small) .skpad-dot { width: 84px; height: 84px; bottom: calc(80px + var(--safe-b)); }
.skpad.on .skpad-dot { width: 30px; height: 30px; border-radius: 9px; bottom: calc(118px + var(--safe-b)); box-shadow: none; }
.skpad:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .skpad.on .skpad-ring { transition: none; } }
/* A sketch song: hear it back with the words following; Simple or Rich chords */
.skrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.sk-hear { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); border-color: var(--accent-line); }
.sk-hear svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.sk-hear.on { background: var(--accent-soft); }
.sk-style { margin-left: auto; }
.sheet.skplay > .pr, .sheet.skplay > .ly, .sheet.skplay > .crow { opacity: .4; transition: opacity .3s; }
.sheet.skplay > .skcur { opacity: 1; }
.sheet .sg.skc > .l { color: var(--accent); }
.sheet .sg.skc > .c .ct { box-shadow: inset 0 -2px 0 var(--accent); }
/* The chord picker on a sketch song: chords that fit the melody, and whole-line options */
.ce-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.ce-fitb { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 4px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.ce-fitb.on { border-color: var(--accent-line); background: var(--accent-soft); }
.ce-fitb b { font-size: 16px; font-weight: 650; }
.ce-fitb span { font-size: 12px; color: var(--muted); justify-self: end; }
.ce-fitb i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--rim); overflow: hidden; display: block; }
.ce-fitb i i { height: 100%; background: var(--accent); }
.ce-alts { display: flex; flex-direction: column; gap: 6px; }
.ce-alt { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font-size: 15px; font-weight: 500; text-align: left; }
.ce-alt.on { border-color: var(--accent-line); color: var(--accent); }
.ce-alt small { font-size: 12px; color: var(--muted); font-weight: 400; }
#ce-panel { max-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b)); overflow-y: auto; }
.sheet.skplay .prow, .sheet.skplay .dpop { display: none; }
/* Add the words */
.cs-words { width: 100%; margin-top: 12px; }
.ws-text { width: 100%; box-sizing: border-box; min-height: 180px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font: 16px/1.5 var(--sans); padding: 12px 14px; resize: vertical; }
#ws-prev { white-space: pre; color: var(--fg-2); }

/* ---------- One hand: a phone held upright ----------
   Controls you use often sit at the bottom, in reach of the thumb. Same sizes
   and look as before; only the places change. iPad and landscape keep their
   layouts, so the bar's Back, favorite and ••• are hidden there. */
.oh { display: none; }
.sb.fav.on { color: var(--accent); }
.sb.fav.on svg { fill: var(--accent); }
.sb.more { position: relative; }
@media (max-width: 699px) and (orientation: portrait) {
  /* Song page: the top is just the song; its buttons move into the bar. */
  body:not(.cedit) .app.viewer > .head { display: none; }
  body:not(.cedit) .app.viewer > .song-title { margin-top: 10px; }
  .app.viewer .chead .ib { display: none; }
  .app.viewer .player { display: grid; height: auto; padding: 10px 8px 8px; gap: 8px 6px;
    grid-template-columns: auto auto auto 1fr auto auto;
    grid-template-areas: "dial dial dial set . nn" "back fav more . step play"; }
  .app.viewer .player .oh { display: grid; }
  .app.viewer .player .speed { display: none; }
  .app.viewer .player .dialbtn { grid-area: dial; }
  .app.viewer .player .setdial { grid-area: set; justify-self: start; }
  .app.viewer .player .nnbtn { grid-area: nn; }
  .app.viewer .player .vsep { display: none; }
  .app.viewer .player .step { grid-area: step; margin-right: 6px; }
  .app.viewer .player .play { grid-area: play; }
  .app.viewer .player .oh-back { grid-area: back; }
  .app.viewer .player .fav { grid-area: fav; }
  .app.viewer .player .more { grid-area: more; }
  .app.viewer { padding-bottom: calc(150px + var(--safe-b)); }
  body.loop-on .app.viewer { padding-bottom: calc(200px + var(--safe-b)); }
  body.nn-on .app.viewer { padding-bottom: calc(290px + var(--safe-b)); }
  .app.viewer .dock-fade { height: calc(150px + var(--safe-b)); }
  /* Things that sit above the bar move up with it (the bar has two rows). */
  .nextup, .backpaste { bottom: calc(134px + var(--safe-b)); }
  .nextline { bottom: calc(140px + var(--safe-b)); }
  .smap { bottom: calc(140px + var(--safe-b)); }
  .coach.free { bottom: calc(140px + var(--safe-b)); }
  /* The ••• menu rises from the bottom: same rows, within reach. */
  .menu.msheet { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); width: auto; border-radius: 22px; padding: 2px 8px 8px; animation: rise .22s cubic-bezier(.2,1,.3,1); transition: transform .12s; }
  .menu.msheet .grab { margin: 8px auto 6px; }
  .menu.msheet .mrow.size { border-bottom: 0; border-top: 1px solid var(--hair); border-radius: 0 0 10px 10px; margin: 4px 0 0; padding-top: 6px; padding-bottom: 0; }
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
/* One hand, full-height sheets: the main action is the lowest button. */
.pfoot { flex: none; padding: 10px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--hair); }
.pfoot .btn { width: 100%; }
.panel.full:has(.pfoot) .pbody { padding-bottom: 12px; }
@media (max-width: 699px) and (orientation: portrait) {
  .cs .pbody .cs-act { order: 9; margin-top: auto; }
}

/* ---------- the corner dial and the glow ----------
   The glow is for values you glance at (a dial's reading, the count-in, the
   chord you're on, in tune, a gig countdown): one at a time, never on buttons
   or the words. */
:root { --glow-c: #ffd2a0; --glow: 0 0 4px rgba(255,170,90,.9), 0 0 12px rgba(255,140,60,.65), 0 0 28px rgba(255,120,40,.4); }
:root[data-theme="light"] { --glow-c: var(--accent-deep); --glow: 0 0 6px rgba(237,140,80,.45), 0 0 16px rgba(237,140,80,.25); }
.glow { color: var(--glow-c); text-shadow: var(--glow); }
.dialbtn { display: none; white-space: nowrap; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; border: 1px solid var(--rim); background: var(--card); color: var(--fg-2); font: 500 13px var(--mono); touch-action: none; -webkit-user-select: none; user-select: none; }
.dialbtn svg { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 699px) and (orientation: portrait) { .app.viewer .player .dialbtn.oh { display: inline-flex; } }
.dial { position: fixed; inset: 0; z-index: 70; touch-action: none; opacity: 0; transition: opacity .15s; }
.dial.on { opacity: 1; }
.dial svg { position: absolute; inset: 0; transform-origin: 100% 100%; transform: scale(.82); transition: transform .2s cubic-bezier(.2,1,.3,1); }
.dial.on svg { transform: none; }
.dial-bg { fill: var(--solid); fill-opacity: .95; stroke: var(--rim); }
.dial-ticks line { stroke: var(--muted); stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; }
.dial-ticks line.lit { stroke: #ffab5e; stroke-opacity: 1; }
.dial-ticks line.cur { stroke: var(--glow-c); stroke-opacity: 1; stroke-width: 3.4; }
:root[data-theme="light"] .dial-ticks line.lit { stroke: var(--accent); }
.dial-labels text { font: 500 11px var(--sans); fill: var(--muted); }
.dial-labels text.cur { font-weight: 700; font-size: 14px; fill: var(--glow-c); }
.dial-big { font: 600 38px var(--sans); fill: var(--glow-c); font-variant-numeric: tabular-nums; }
.dial.set .dial-big { font-size: 19px; }
.dial-small { font: 500 11px var(--sans); fill: var(--muted); letter-spacing: .08em; }
.dial-end { font: 500 10px var(--sans); fill: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dial, .dial svg { transition: none; } }
/* Count-in, the chord you're on, in tune: the glow */
.countin { color: var(--glow-c); text-shadow: var(--glow); }
.nn .nowcol .dn { fill: var(--glow-c); filter: url(#glow-f); }
.tn-note.glow b { color: var(--glow-c); text-shadow: var(--glow); transition: color .2s, text-shadow .2s; }
.un-cd { font: 600 26px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; margin: 4px 0 2px; }

/* ---------- one-hand ring controls (phone upright; ring.js) ----------
   The bar becomes an island in the lower right; Play sits in its corner, or
   rises to the thumb's resting spot on the speed track while the phone is in
   your hand. Hold Play for the ring. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#rc { display: none; } /* the ring controls; .rc alone is also the Recent cards */
body.ring #rc { display: block; position: fixed; inset: 0; z-index: 21; pointer-events: none; }
body.ring .rc > * { pointer-events: auto; }
body.ring .rc .rc-track { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
body.ring.ring-up .rc .rc-track { opacity: 1; }
body.ring.playing.ring-up .rc .rc-track { opacity: .55; }
.rc-t0 { fill: none; stroke: var(--rim); stroke-width: 10; stroke-linecap: round; }
.rc-t1 { fill: none; stroke: var(--accent); stroke-opacity: .6; stroke-width: 3; stroke-linecap: round; }
body.ring .rc-isl { position: fixed; right: 12px; bottom: calc(12px + var(--safe-b)); height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 64px 0 12px; border-radius: var(--r-bar); background: var(--bar); border: 1px solid var(--rim); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: padding .28s cubic-bezier(.2,1,.3,1); }
body.ring.ring-up .rc-isl { padding-right: 12px; }
body.ring .rc-isl .dialbtn { display: inline-flex; height: 36px; border-radius: 10px; }
body.ring .rc #play { position: fixed; z-index: 22; width: 48px; height: 48px; border-radius: var(--r); right: 18px; bottom: calc(18px + var(--safe-b)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); transition: right .3s cubic-bezier(.2,1,.3,1), bottom .3s cubic-bezier(.2,1,.3,1); touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.ring.ring-up .rc #play { right: calc(34vw - 24px); bottom: calc(21vh - 24px); }
body.ring .rc #play svg { width: 18px; height: 18px; }
body.ring .app.viewer .player { display: none; }
body.ring:not(.nn-on):not(.loop-on) .app.viewer .dock { display: none; }
body.ring .app.viewer .dock { bottom: calc(84px + var(--safe-b)); }
body.ring .app.viewer { padding-bottom: calc(120px + var(--safe-b)); }
body.ring.nn-on .app.viewer { padding-bottom: calc(300px + var(--safe-b)); }
body.ring .app.viewer .dock-fade { height: calc(100px + var(--safe-b)); }
/* The ring around Play */
.ringx { position: fixed; inset: 0; z-index: 66; opacity: 0; transition: opacity .14s; }
.ringx.on { opacity: 1; }
.ring-bg { position: fixed; width: 384px; height: 384px; margin: -192px 0 0 -192px; border-radius: 50%; background: color-mix(in srgb, var(--solid) 94%, transparent); border: 1px solid var(--rim); box-shadow: 0 12px 40px rgba(0,0,0,.45); transform: scale(.7); transition: transform .18s cubic-bezier(.2,1,.3,1); }
.ringx.on .ring-bg { transform: none; }
.ri { position: fixed; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card-2); color: var(--fg); display: grid; place-items: center; padding: 0; transition: transform .1s, border-color .1s; }
.ri svg { width: 20px; height: 20px; }
.ri .ri-t { font: 700 13px var(--sans); color: var(--accent); }
.ri.on { transform: scale(1.1); border-color: var(--accent); color: var(--glow-c); box-shadow: 0 0 14px rgba(255,150,70,.45); }
.ring-name { position: fixed; transform: translateX(-50%); font: 600 15px var(--sans); white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.ring .rc #play, body.ring .rc-isl, .ring-bg, .ringx, body.ring .rc .rc-track { transition: none; } }
body.cedit.ring .rc { display: none; }
/* no iPhone selection or tap highlight on the ring controls */
body.ring .rc, body.ring .rc *, .ringx, .ringx * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* sweep the track to move through the song */
.rc-hit { fill: none; stroke: transparent; stroke-width: 44; stroke-linecap: round; pointer-events: none; }
body.ring.ring-up .rc .rc-hit { pointer-events: stroke; cursor: grab; }
body.ring.ring-sweep .rc .rc-track { opacity: 1; }
body.ring.ring-sweep .rc-t1 { stroke-opacity: 1; stroke-width: 4; filter: url(#glow-f); }
/* no rubber-band bounce of the whole page on the song screen */
body.ring { overscroll-behavior: none; }
/* while sweeping, the section you're in glows above Play */
.rc-where { display: none; }
body.ring.ring-sweep .rc-where { display: block; position: fixed; right: calc(34vw - 24px); bottom: calc(21vh + 40px); transform: translateX(calc(50% - 24px)); font: 600 15px var(--sans); white-space: nowrap; pointer-events: none; text-transform: none; }
/* Not tuned in the last few hours: a solid dot on the fork's corner, with an
   outline so it stands off the button, and two rings that ripple out from it
   three times every 7 seconds, like a ringing fork. The dot itself never
   fades, so it's there whenever you look. */
.ib .dotmark, .add.tool .dotmark, .ri .dotmark { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); pointer-events: none; }
.ib .dotmark { top: 2px; right: 2px; }
.add.tool .dotmark { top: 12px; right: 14px; }
.ri .dotmark { top: 5px; right: 5px; background: #eda27f; box-shadow: 0 0 0 2px #111113; }
.ib .dotmark::before, .ib .dotmark::after, .add.tool .dotmark::before, .add.tool .dotmark::after, .ri .dotmark::before, .ri .dotmark::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; opacity: 0; }
.ri .dotmark::before, .ri .dotmark::after { border-color: #eda27f; }
.ib .dotmark::before, .add.tool .dotmark::before, .ri .dotmark::before { inset: -4px; animation: fork-ring 7s ease-out infinite; }
.ib .dotmark::after, .add.tool .dotmark::after, .ri .dotmark::after { inset: -8px; animation: fork-ring 7s ease-out .12s infinite; }
@keyframes fork-ring {
  0% { transform: scale(.7); opacity: .9; } 15.9% { transform: scale(1.3); opacity: 0; }
  16% { transform: scale(.7); opacity: .9; } 31.9% { transform: scale(1.3); opacity: 0; }
  32% { transform: scale(.7); opacity: .9; } 47.9%, 100% { transform: scale(1.3); opacity: 0; }
}
/* Reduce Motion: the rings stay, still. */
@media (prefers-reduced-motion: reduce) {
  .ib .dotmark::before, .add.tool .dotmark::before, .ri .dotmark::before, .ib .dotmark::after, .add.tool .dotmark::after, .ri .dotmark::after { animation: none; }
  .ib .dotmark::before, .add.tool .dotmark::before, .ri .dotmark::before { opacity: .7; } .ib .dotmark::after, .add.tool .dotmark::after, .ri .dotmark::after { opacity: .4; }
}
}
/* while sweeping the arc, the page keeps still: no chord diagrams,
   compact header or line resizing until you let go */
body.ring-sweep .sheet .prow, body.ring-sweep .sheet .dpop { display: none; }
body.ring-sweep .chead { opacity: 0 !important; pointer-events: none !important; }
body.ring-sweep .sheet > * { transition: none !important; }
/* Back in the island; pull down at the top to go back */
body.ring .rc-isl .rc-back { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--rim); background: var(--card-2); color: var(--fg); display: grid; place-items: center; padding: 0; flex: none; }
body.ring .rc-isl .rc-back svg { width: 18px; height: 18px; }
.rc-pull { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); padding: 8px 14px; border-radius: 18px; background: var(--solid); border: 1px solid var(--rim); color: var(--fg-2); font: 500 13px var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: color .12s, border-color .12s, box-shadow .12s; }
.rc-pull.go { color: var(--glow-c); border-color: var(--accent); box-shadow: 0 0 14px rgba(255,150,70,.4); text-shadow: var(--glow); }
body.ring .app.viewer[style*="--pull"] > :not(.rc):not(.dock):not(.dock-fade):not(.chead):not(.smap) { transform: translateY(var(--pull)); }
/* ring items that are on (Favorite, Metronome, Now and Next) */
.ri.act { border-color: var(--accent-line); color: var(--accent); }
.ri.act svg { fill: currentColor; fill-opacity: .2; }
/* the tuner's success: "All in tune" glows green */
.tn-note.done.glow b { color: var(--good); text-shadow: 0 0 6px color-mix(in srgb, var(--good) 80%, transparent), 0 0 18px color-mix(in srgb, var(--good) 50%, transparent); }
/* no iPhone text selection or callout on the dials */
.dial, .dial *, .dialbtn, .dialbtn * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* the Now and Next tip shows its panel in ring mode too */
body.ring.nn-demo .app.viewer .dock { display: flex !important; }

/* German practice: German words in the sheet, gender by a dotted line
   (der blue, die rose, das green; other words copper), the level sheet and the word card. */
:root { --de-der: #6f9fd8; --de-die: #d27f90; --de-das: #5fae7c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --de-der: #8db8ec; --de-die: #eba1ae; --de-das: #8fd3a3; } }
:root[data-theme="dark"] { --de-der: #8db8ec; --de-die: #eba1ae; --de-das: #8fd3a3; }
.sheet .de { color: var(--accent); font-weight: 600; border-bottom: 2px dotted currentColor; cursor: pointer; }
.de.g-der { color: var(--de-der); } .de.g-die { color: var(--de-die); } .de.g-das { color: var(--de-das); }
.de-sheet .de, .de-lv em .de { font-weight: 600; border-bottom: 2px dotted currentColor; }
.de-sheet .de:not(.g-der):not(.g-die):not(.g-das) { color: var(--accent); }
.de-en { display: block; font-size: .72em; color: var(--muted); font-weight: 400; margin-top: 1px; }
.stat.dechip[hidden] { display: none; }
.stat.dechip b { font-size: 11px; color: var(--accent); letter-spacing: .04em; }
.stat.dechip.on { border-color: var(--accent-line); color: var(--fg-2); }
.de-levels { display: flex; flex-direction: column; gap: 8px; }
.de-lv { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.de-lv i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; margin-top: 2px; }
.de-lv.on { border-color: var(--accent-line); background: var(--accent-soft); } .de-lv.on i { border: 5px solid var(--accent); }
.de-lv b { display: block; font-size: 15px; font-weight: 600; } .de-lv small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.de-lv em { display: block; font-style: normal; font-size: 14px; color: var(--fg-2); margin-top: 5px; }
.de-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 4px; font-size: 14px; color: var(--fg-2); }
.panel.de-sheet { bottom: 0; max-height: calc(100dvh - 40px - var(--safe-t)); border-radius: 18px 18px 0 0; border-bottom: 0; display: flex; flex-direction: column; animation: up .42s cubic-bezier(.2,1.15,.3,1); }
.de-sheet .pbody { min-height: 0; }
.de-sheet .pbody > * { flex: none; }
.decard { background: var(--solid); border: 1px solid var(--rim); box-shadow: 0 14px 40px rgba(0,0,0,.35); position: fixed; left: 12px; right: 12px; max-width: 480px; margin: 0 auto; z-index: 40; padding: 14px 16px; border-radius: 18px; animation: fade .2s; }
.dc-w { font: 400 24px var(--serif); color: var(--fg); }
.dc-w .art { font-weight: 600; }
.dc-w .art.g-der { color: var(--de-der); } .dc-w .art.g-die { color: var(--de-die); } .dc-w .art.g-das { color: var(--de-das); }
.dc-t { font-size: 14.5px; color: var(--fg-2); margin: 3px 0 8px; }
.dc-r { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rim); font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.dc-r b { width: 76px; flex: none; color: var(--muted); font-weight: 500; }
.dc-b { display: flex; gap: 8px; margin-top: 10px; } .dc-b .btn { flex: 1; }
/* the DE chip fills as a translation runs in the background. */
.stat.dechip.busy { background: linear-gradient(90deg, var(--accent-soft) calc(var(--p, 0) * 100%), var(--card) calc(var(--p, 0) * 100%)); }

/* Settings menu: one row per page, Back up now in thumb reach. */
.set-group.s-gap { margin-top: 18px; }
.s-keys { display: inline-flex; align-items: center; gap: 5px; }
.s-keys .dot { margin-left: 6px; }
.s-keys .dot:first-child { margin-left: 0; }
.s-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--hair); background: var(--bg); }
.s-dock .btn { flex: none; width: 100%; max-width: 560px; }
.s-dock span { font-size: 12px; color: var(--muted); }
#app:has(.s-dock) { padding-bottom: calc(110px + var(--safe-b)); }
details.s-why { margin-top: 4px; }
details.s-why summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
#s-keymsg:empty { display: none; }

/* Changes: the Today line opens the week's chord changes. */
.today .t-stat { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; min-height: 32px; width: 100%; cursor: pointer; }
.today .t-stat .chev { width: 14px; height: 14px; color: var(--muted); margin-left: auto; flex: none; }
.chg-list { display: flex; flex-direction: column; margin: 2px 0 8px; }
.chg { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--hair); }
.chg:last-child { border-bottom: 0; }
.chg b { font: 600 15px var(--sans); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg b em { font-style: normal; color: var(--muted); margin: 0 4px; }
.chg .bar { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.chg .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.chg small { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.chg.work b { color: var(--accent); }
.chg.work .bar i { background: var(--accent-line); }
.chg-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 2px; }

/* Play together: a shared start time, a countdown on both phones. */
.duet-t { font: 600 17px var(--sans); color: var(--fg); margin: 2px 2px 4px; }
.duet-a { font-size: 13.5px; color: var(--muted); margin: 0 2px 10px; }
.duet-when { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 16px; }
.duet-when big { font: 600 40px var(--sans); color: var(--fg); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.duet-when span { font-size: 13px; color: var(--muted); text-align: center; }
.duet-seg { margin: 6px 0 4px; }
.duet-seg button { height: 36px; }
.duet-wait .actions .btn { flex: 1; }

/* First-time hint: where the ring opens, a glass circle grows, shrinks,
   bounces and goes, and Play comes back on top of it. */
.ring-hint { position: fixed; z-index: 21; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none; transform: scale(.16); opacity: 0; animation: ringHint 1.7s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes ringHint {
  0% { transform: scale(.16); opacity: 0; }
  12% { opacity: 1; }
  32% { transform: scale(1); }
  50% { transform: scale(.5); }
  64% { transform: scale(.82); }
  76% { transform: scale(.66); }
  86% { transform: scale(.74); opacity: 1; }
  100% { transform: scale(.16); opacity: 0; }
}
body.ring .rc #play.hint-under { z-index: 23; }
@media (prefers-reduced-motion: reduce) { .ring-hint { display: none; } }

/* Small shared pieces that used to be inline styles. */
.fld.fld-k { min-height: 52px; }
.tile.ftile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--rim); color: var(--fg-2); }
.foot.pn { margin: 0 2px 12px; }
.prow.below .dptr { bottom: auto; top: -5px; border: 0; border-left: 1px solid var(--rim); border-top: 1px solid var(--rim); }

/* ==========================================================================
   Amp theme
   Everything below draws from one set of materials, so a gold plate, a copper
   button or a lamp looks the same wherever it appears:
     piping     the thin bronze edge on bars, lists, cards, sheets and the ring
     plate      brushed gold, like an amp's front panel; holds recesses
     recess     dark wells set into a plate (Back, the time, Cancel, switches)
     copper     the main action (Play, Save, add, primary buttons)
     chrome     amp-control buttons (the ring, the editor's tool buttons)
     lamp       the amber jewel lamp: off, warming, or lit
     tolex      black pebbled covering for the ring and result cards
   Liquid Glass is kept for bars that float over the song or library, where
   seeing content slide underneath helps. Sheets are frosted; plates are solid.
   ========================================================================== */
:root {
  --bronze: #b8935a;
  --bronze-line: rgba(184,147,90,.42);
  --plate: repeating-linear-gradient(90deg, rgba(255,250,230,.07) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(90,60,20,.05) 3px 4px), linear-gradient(180deg, #e6cb92, #cfab6a 42%, #b08b4f);
  --plate-edge: #6d5326;
  --plate-shadow: inset 0 1px 0 rgba(255,246,220,.75), inset 0 -1px 0 rgba(60,40,10,.35), 0 10px 28px rgba(0,0,0,.4);
  --recess: linear-gradient(180deg, #1f1910, #2e2517);
  --recess-edge: rgba(40,26,8,.7);
  --recess-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,244,214,.5);
  --recess-fg: #f1e3c4;
  --recess-dim: #a99b80;
  --recess-on: #ffc27a;
  --copper: linear-gradient(180deg, #c8804f, #9c5631);
  --copper-fg: #fff3e6;
  --copper-hi: inset 0 1px 0 rgba(255,220,190,.45);
  --copper-glow: 0 8px 22px rgba(156,86,49,.45);
  --chrome: radial-gradient(circle at 50% 25%, #2b2b2f, #111113);
  --chrome-edge: #8e8e94;
  --chrome-fg: #e9e9ec;
  --chrome-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.5);
  --lamp-off: radial-gradient(circle at 35% 30%, rgba(255,230,190,.3) 0 14%, #6b3a12 45%, #2e1606 85%);
  --lamp-warm: radial-gradient(circle at 35% 30%, #ffd9a0 0 12%, #d9822f 40%, #8a3d10 80%);
  --lamp-on: radial-gradient(circle at 35% 30%, #fff1c9 0 12%, #ffb24a 34%, #e2661c 70%, #8a2d08);
  --lamp-ring: 0 0 0 1.5px rgba(0,0,0,.5);
  --lamp-glow: 0 0 8px 2px rgba(255,140,40,.6);
  --tolex-card: var(--tolex), radial-gradient(circle at 30% 0, #202023, #121214);
  --tolex-inset: inset 0 0 0 3px #0b0b0c, inset 0 0 0 4px rgba(184,147,90,.22);
  --gold-text: #d9bd85;
  --glass-tint: rgba(28,28,31,.38);
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.03) 40%, rgba(255,255,255,0) 62%, rgba(255,255,255,.06));
  --glass-rim: rgba(255,255,255,.3);
  --tolex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='2.4' lighting-color='%23fff' result='l'%3E%3CfeDistantLight azimuth='235' elevation='50'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.17 0.17 0.17 0 -0.36' result='hi'/%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.16 -0.16 -0.16 0 0.36' result='lo'/%3E%3CfeMerge%3E%3CfeMergeNode in='lo'/%3E%3CfeMergeNode in='hi'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='220' height='220' filter='url(%23t)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
  --bronze: #86663a;
  --bronze-line: rgba(134,102,58,.38);
  --lamp-off: radial-gradient(circle at 35% 30%, rgba(255,240,220,.7) 0 14%, #c9a27a 50%, #a07a52 90%);
  --lamp-ring: 0 0 0 1.5px rgba(0,0,0,.18);
  --tolex-card: var(--card);
  --tolex-inset: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(134,102,58,.2);
  --gold-text: #86663a;
  --chrome: radial-gradient(circle at 50% 25%, #ffffff, #e6e6e9);
  --chrome-edge: #a3a3a9;
  --chrome-fg: #2a2a2d;
  --chrome-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.12);
  --glass-tint: rgba(255,255,255,.42);
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 65%, rgba(255,255,255,.3));
  --glass-rim: rgba(255,255,255,.9);
}

/* ---- Piping and labels ---- */
.cmd, .float, body.ring .rc-isl, .list.glass, .set-group, .panel, .ring-bg, .ed-strip, .gs .gs-rows.glass, .nx .nx-row { border-color: var(--bronze-line); }
.label, .sheet .sec, .strip-h, .ed-new { color: var(--bronze); }
/* Sheet titles that name a tool (Play next, Get the song) read like panel lettering. */
.nx .ph h2, .gs .ph h2 { font: 700 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }

/* ---- Liquid Glass: the bars that float over content ----
   Mostly see-through, a light blur that lifts the colour behind, a bright rim
   along the top and a faint one along the bottom. */
.cmd, .float {
  background: var(--glass-sheen), var(--glass-tint);
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.06); backdrop-filter: blur(12px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.35);
}
/* Sheets are frosted: the page shows softly through but text stays easy to read. */
.panel.card { background: var(--bar); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.dock-fade { height: calc(76px + var(--safe-b)); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 80%, transparent) 85%); }
/* The library's search bar and add button sit on one line at the song bar's height. */
.dock { align-items: center; }
.dock > .cmd { height: 60px; border-radius: 18px; }

/* ---- Amp covering (Settings > Look): the tolex grain behind every screen ----
   One small tile, repeated, so scrolling costs nothing. The light theme washes
   it back to a cream covering so faded lines stay readable. */
:root[data-tolex="on"] body { background-image: var(--tolex), radial-gradient(120% 50% at 50% -10%, var(--bg-glow), transparent 60%); background-size: 220px 220px, auto; background-repeat: repeat, no-repeat; }
:root[data-tolex="on"][data-theme="light"] body { background-image: linear-gradient(rgba(243,240,235,.6), rgba(243,240,235,.6)), var(--tolex), radial-gradient(120% 50% at 50% -10%, var(--bg-glow), transparent 60%); background-size: auto, 220px 220px, auto; background-repeat: no-repeat, repeat, no-repeat; }

/* ---- Buttons ----
   Two families. Everyday buttons (.btn) are quiet cards with a copper .primary
   for the main action. Amp controls (.chrome) are black with a chrome rim. */
.btn.primary, .ce-save, body.ring .rc #play, .nx .nx-ch span.new { background: var(--copper); color: var(--copper-fg); border: 0; box-shadow: var(--copper-hi); }
body.ring .rc #play { box-shadow: var(--copper-hi), var(--copper-glow); }
body.ring-open .rc #play { box-shadow: var(--copper-hi); }
body.knob-drag .rc #play { transition: none; }
.ri, .ed-tl, .ed-tile { background: var(--chrome); border: 1px solid var(--chrome-edge); color: var(--chrome-fg); box-shadow: var(--chrome-shadow); }

/* ---- Plates and recesses ---- */
body.ring .rc-isl, .ce-plate, .nx #nx-level, .gs #gs-level {
  background: var(--plate); border: 1px solid var(--plate-edge); box-shadow: var(--plate-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ce-plate, .nx #nx-level, .gs #gs-level { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 6px; box-sizing: border-box; border-radius: 18px; }
body.ring .rc-isl .rc-back, body.ring .rc-isl .dialbtn, .ce-rec, .cebar .ce-plate .seg, .nx #nx-level button, .gs #gs-level button {
  background: var(--recess); border: 1px solid var(--recess-edge); color: var(--recess-fg); box-shadow: var(--recess-shadow);
}

/* The add button: copper set into a 6 px band of plate, exactly like Play on the song bar.
   The note is drawn filled in brushed silver, with a small + badge. */
.add { position: relative; box-sizing: border-box; width: 60px; height: 60px; margin: 0; border: 6px solid transparent; border-radius: 18px; color: var(--copper-fg);
  background: var(--copper) padding-box, var(--plate) border-box;
  box-shadow: 0 0 0 1px var(--plate-edge), var(--copper-hi), 0 10px 28px rgba(0,0,0,.4); }
.add .add-note { width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.add .add-bdg { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #2a1d0c; color: var(--recess-on);
  font: 800 13px/15px var(--sans); font-style: normal; text-align: center; box-shadow: 0 0 0 1.5px #e6cb92; pointer-events: none; }

/* ---- Lamps ----
   One lamp in four sizes. .on is lit, .warm pulses while something is working. */
.jewel, .gs-lamp, .nx-lamp, .nx-jewel, #chips .chip::before, .ri[aria-pressed]::after {
  border-radius: 50%; flex: none; background: var(--lamp-off); box-shadow: var(--lamp-ring); transition: background .3s, box-shadow .3s; }
body.playing .jewel, .gs-lamp.on, .nx #nx-level button.on .nx-lamp, .gs #gs-level button.on .nx-lamp, #chips .chip.on::before, .ri.act::after, .nx-jewel {
  background: var(--lamp-on); box-shadow: var(--lamp-ring), var(--lamp-glow); }
.gs-lamp.warm { background: var(--lamp-warm); animation: lampwarm 1.2s ease-in-out infinite alternate; }
.nx-jewel { animation: lampwarm 1.6s ease-in-out infinite alternate; }
@keyframes lampwarm { from { filter: brightness(.55); box-shadow: var(--lamp-ring); } }
@media (prefers-reduced-motion: reduce) { .gs-lamp.warm, .nx-jewel { animation: none; } }
.jewel { width: 12px; height: 12px; margin: 0 4px; align-self: center; }
body.stage .jewel { display: none; }
.gs-lamp { width: 12px; height: 12px; }
.nx-lamp { width: 8px; height: 8px; }
.nx-jewel { width: 34px; height: 34px; }

/* ---- Tolex cards: the result cards in Play next and Get the song ---- */
.nx .nx-row, .gs .gs-rows.glass { border-width: 1px; border-style: solid; border-radius: 16px; background: var(--tolex-card); background-size: 120px 120px, auto; box-shadow: var(--tolex-inset);
  -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Library ---- */
/* Filter chips: a lamp each, lit on the one you've picked. */
#chips .chip { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; }
#chips .chip::before { content: ""; width: 7px; height: 7px; }
/* Swipe a song: Delete on the left, Favorite on the right. The buttons sit
   behind the row and widen as it slides. */
.sw { position: relative; overflow: hidden; }
.sw .row { position: relative; z-index: 1; touch-action: pan-y; }
.sw.swiping .row { transition: transform .2s cubic-bezier(.2,1,.3,1); }
.sw .row:active { transition: none; }
.sw-act { position: absolute; top: 0; bottom: 0; width: 0; border: 0; padding: 0; display: grid; place-items: center; overflow: hidden; color: #fff; transition: width .2s cubic-bezier(.2,1,.3,1); }
.sw-act svg { width: 22px; height: 22px; flex: none; transition: transform .15s; }
.sw-del { right: 0; background: #c0392b; }
.sw-fav { left: 0; background: #a8653a; }
.sw-act.go svg { transform: scale(1.25); }
.sw:not(.swiping) .sw-act { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sw .row, .sw-act, .sw.swiping .row { transition: none; } }

/* ---- Speed dial: a backlit amp meter (dial.js draws the parts) ---- */
.dial-rim { fill: #1b1712; stroke: var(--bronze); stroke-opacity: .6; stroke-width: 1.5; }
.dial-bg { fill: url(#dial-face); fill-opacity: 1; stroke: rgba(0,0,0,.5); }
.dial-ticks line, .dial-ticks line.lit, .dial-ticks line.cur, :root[data-theme="light"] .dial-ticks line.lit { stroke: #2a1d0c; stroke-opacity: .85; stroke-width: 1.5; }
.dial-ticks line.mj { stroke-width: 2.6; stroke-opacity: 1; }
.dial-ticks line.hot { stroke: #b3261e; stroke-opacity: 1; }
.dial-needle { stroke: #151008; stroke-width: 2.4; stroke-linecap: round; }
.dial-pivot { fill: #0c0a08; stroke: var(--bronze); stroke-opacity: .7; }
.dial-win { fill: #16110b; stroke: var(--bronze); stroke-opacity: .55; }
.dial-big { fill: var(--recess-on); font-family: var(--mono); font-size: 32px; }
.dial.set .dial-big { font-family: var(--sans); }
.dial-small { fill: #c9b48c; font-weight: 700; letter-spacing: .14em; font-size: 10px; }
.dial.set .dial-small { letter-spacing: .04em; }
.dial-end { fill: #5a4220; font-weight: 800; letter-spacing: .12em; font-size: 9px; }
.dial-labels text { fill: #4a3518; }
.dial-labels text.cur { fill: #151008; font-weight: 800; }
.dial-labels text.sc { font: 700 10px var(--sans); fill: #3a2810; }

/* ---- The hold-Play menu: a tolex panel with a gold edge ----
   Each button is named in gold on the panel; a lamp in its corner shows what's on. */
.ring-bg { background: var(--tolex), radial-gradient(circle, #1d1d20, #0e0e10); background-size: 120px 120px, auto; border: 2px solid var(--bronze);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 4px #0b0b0c, inset 0 0 0 5px var(--bronze-line), 0 12px 40px rgba(0,0,0,.6); }
/* The ring is always dark tolex, so its buttons keep the dark chrome in either theme. */
.ringx { --chrome: radial-gradient(circle at 50% 25%, #2b2b2f, #111113); --chrome-edge: #8e8e94; --chrome-fg: #e9e9ec; --chrome-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.5); }
.ri .ri-t { color: #e8cf9c; }
.ri.act { border-color: var(--chrome-edge); color: var(--recess-on); }
.ri.on { border-color: var(--gold-text); color: #fff3e0; box-shadow: var(--chrome-shadow), 0 0 14px rgba(255,190,110,.45); }
.ri::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; display: none; }
.ri[aria-pressed]::after { display: block; }
.ri-l { position: fixed; transform: translate(-50%, -50%); font: 800 8.5px var(--sans); letter-spacing: .12em; color: var(--gold-text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
:root[data-theme="light"] .ri-l { color: #d9bd85; }
.ringx.on .ri-l { opacity: 1; }
.ring-name { color: var(--recess-fg); }
@media (prefers-reduced-motion: reduce) { .ri-l { transition: none; } }

/* ---- Editor ----
   The bottom bar is a gold plate: Cancel and Edit / Preview in recesses, Save
   in copper. Tools sit just above it once there's text. */
.ed-new { font: 400 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 2px; }
.cebar.plate { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ce-rec, .cebar .ce-plate .seg { height: 48px; border-radius: 12px; font: 600 15px var(--sans); padding: 0 16px; flex: none; }
.cebar .ce-plate .seg { flex: 1; padding: 4px; display: flex; box-sizing: border-box; }
.cebar .ce-plate .seg button { flex: 1; height: 38px; border: 0; background: none; color: var(--recess-dim); font: 600 14px var(--sans); }
.cebar .ce-plate .seg button.on { color: var(--recess-on); }
.cebar .ce-plate .seg.slide::before { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #3a2f1f; border-radius: 9px; }
.cebar .ce-plate .seg[hidden] { display: none; }
.ce-save { margin-left: auto; height: 48px; padding: 0 22px; border-radius: 12px; font: 700 15px var(--sans); flex: none; }
.ed-toolrow { display: flex; gap: 8px; }
.ed-toolrow:empty { display: none; }
.ed-tl, .ed-tile { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; flex: 1; border-radius: 12px; font: 600 13px var(--sans); }
.ed-tl svg, .ed-tile svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ed-tile:disabled, .ed-tl:disabled { opacity: .55; }
/* Ways to start a new, empty song, under the pad. */
.ed-start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.ed-start[hidden] { display: none; }
.ed-tile { height: 72px; justify-content: flex-start; gap: 12px; padding: 0 14px; border-radius: 16px; text-align: left; font-size: 15px; }
.ed-tile svg { width: 24px; height: 24px; }
.ed-tile small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ed-tile.wide { grid-column: 1 / 3; height: 52px; justify-content: center; }
/* Key, Tuning and Tempo folded into one line on a new song. */
.ed-sum { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: 400 14px var(--sans); text-align: left; }
.ed-sum b { color: var(--fg); font-weight: 600; }
.ed-sum .found { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ed-sum .more { margin-left: auto; color: var(--bronze); }
.ed-chips[hidden] { display: none; }
/* The writing area is a pad: dark ruled lines with a copper margin in the dark
   theme, a cream legal pad in the light theme. The rules repeat every line
   height (1.55em) from the top padding, so each line of text sits on one. */
.ed-hl, .ed-tx textarea { padding-left: 38px; }
.ed-tx { background: #141416; }
.ed-hl { background-image: linear-gradient(90deg, transparent 27px, rgba(232,160,122,.5) 27px 28.5px, transparent 28.5px),
  repeating-linear-gradient(180deg, transparent 0 calc(1.55em - 1px), rgba(150,170,200,.17) calc(1.55em - 1px) 1.55em);
  background-position: 0 0, 0 12px; background-origin: border-box; }
:root[data-theme="light"] .ed-tx { background: #f4ecd8; border-color: #d8c9a6; }
:root[data-theme="light"] .ed-hl { color: #2b2620; background-image: linear-gradient(90deg, transparent 27px, rgba(200,70,60,.55) 27px 28.5px, transparent 28.5px),
  repeating-linear-gradient(180deg, transparent 0 calc(1.55em - 1px), rgba(70,110,170,.28) calc(1.55em - 1px) 1.55em); }
:root[data-theme="light"] .ed-hl .hc, :root[data-theme="light"] .ed-hl div.hc { color: #a8522c; }
:root[data-theme="light"] .ed-tx textarea { caret-color: #2b2620; }
:root[data-theme="light"] .ed-tx textarea::placeholder { color: #8a7d66; -webkit-text-fill-color: #8a7d66; }
.sheet:has(.ed-tx) { padding-bottom: 150px; }
.ed-tx:has(~ .ed-start:not([hidden])) .ed-hl { min-height: 200px; }
/* Editing hides Play and the arc (the ring controls are id #rc). */
body.cedit.ring #rc { display: none; }
/* Writing mode: a slim strip above the pad keeps the title, artist and key in view. */
.ed-strip { display: none; }
body.writing .ed-strip { display: flex; position: fixed; z-index: 26; left: 8px; right: 8px; top: calc(var(--vv-top, 0px) + var(--safe-t) + 8px); height: 40px; box-sizing: border-box;
  align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bronze-line); background: var(--card); color: var(--muted); font: 400 14px var(--sans); text-align: left; white-space: nowrap; overflow: hidden; }
.ed-strip b { color: var(--fg); font: 400 17px var(--serif); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.ed-strip b.none { color: var(--muted); font-style: italic; }
.ed-strip i { font-style: normal; color: var(--muted); opacity: .7; }
.ed-strip span:not(.go) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-strip em { font-style: normal; font-weight: 600; color: var(--accent); flex: none; }
.ed-strip .go { margin-left: auto; color: var(--bronze); flex: none; padding-left: 6px; }
body.writing .ed-tx { top: calc(var(--vv-top, 0px) + var(--safe-t) + 56px); height: calc(var(--vv-h, 100vh) - var(--safe-t) - var(--bar-h, 56px) - 72px); }

/* ---- Play next ----
   While the AI looks, a large lamp warms up. Each song is a tolex card; the
   level switch is a plate with a lamp lit on your pick. */
.nx-warm { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 90px 0 40px; text-align: center; color: var(--muted); font-size: 15px; }
.nx .list.glass { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; gap: 10px; }
.nx .nx-row { height: auto; align-items: flex-start; padding: 14px 14px 14px 16px; }
.nx .nx-row .t { font-size: 17px; font-weight: 600; }
.nx-why { color: var(--gold-text); }
.nx .nx-ctl { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
.nx .nx-ctl > .btn { height: 46px; }
.nx #nx-level button, .gs #gs-level button { flex: 1; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--recess-dim); font: 600 15px var(--sans); }
.nx #nx-level button.on, .gs #gs-level button.on { color: var(--recess-on); }
.gs #gs-level { margin: 12px 0; gap: 6px; }
.gs #gs-level button { font-size: 14px; gap: 7px; padding: 0 4px; }

/* ---- Get the song: a lamp per step, like a channel strip ---- */
.gs .gs-row { gap: 14px; }
.gs .gs-src { color: var(--muted); }
.gs .gs-row:has(.gs-lamp.on) .gs-src { color: var(--gold-text); }

/* ---- The library's title: "Library" in the phone's own script font (Snell
   Roundhand on iPhone), cream in the dark theme, dark bronze in the light theme. ---- */
.title.script { font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive; font-weight: 700; font-size: 46px; letter-spacing: 0; color: #efe2c2; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 14px rgba(239,226,194,.12); }
:root[data-theme="light"] .title.script { color: #6e5128; text-shadow: none; }

/* ---- The tuner: an amp front ----
   Tolex behind everything, the instrument tiles as channel buttons with a
   lamp on the one in use, and a pilot lamp that lights while a note is heard. */
.tuner2 { background: var(--tolex), radial-gradient(120% 60% at 50% 0, #1d1d20, #0c0c0d); background-size: 220px 220px, auto; }
:root[data-theme="light"] .tuner2 { background: linear-gradient(rgba(243,240,235,.6), rgba(243,240,235,.6)), var(--tolex), var(--bg); background-size: auto, 220px 220px, auto; }
.tn-tile { background: var(--tolex-card); background-size: 120px 120px, auto; border-color: var(--bronze-line); box-shadow: var(--tolex-inset); }
.tn-tile.on { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--tolex-card); background-size: auto, 120px 120px, auto; }
.tn-tile > span { display: inline-flex; align-items: center; gap: 6px; }
.tn-tile > span::before, .tn-lamp { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lamp-off); box-shadow: var(--lamp-ring); transition: background .3s, box-shadow .3s; }
.tn-tile.on > span::before, .tn-lamp.on { background: var(--lamp-on); box-shadow: var(--lamp-ring), var(--lamp-glow); }
.tn-lamp { width: 10px; height: 10px; }
.tn-sayrow:has(.warn) .tn-lamp, .tuner2.chrom .tn-lamp { display: none; }
:root[data-theme="light"] .tn-pill { background: var(--card); border-color: var(--bronze-line); color: var(--fg-2); }
/* Settings > Playing: the metronome's volume sits beside its switch. */
.set .s-vol { flex: 0 0 110px; }

/* ---- Your playing (#/you) ----
   The headline sits in a gold plate like an amp's front panel, three readouts
   set into it. Each question gets a tolex card with a bronze title and a plain
   sentence; the pictures underneath stay small and quiet. */
.pf-since { margin: 0 2px 14px; font-size: 14px; color: var(--muted); }
.pf-empty { margin: 18px 2px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.pf-plate { display: flex; gap: 8px; padding: 10px; border-radius: 20px; background: var(--plate); border: 1px solid var(--plate-edge); box-shadow: var(--plate-shadow); }
.pf-read { flex: 1; min-width: 0; padding: 12px 4px 10px; border-radius: 14px; text-align: center; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.pf-read b { display: block; font: 700 34px/1.05 var(--mono); color: var(--recess-on); text-shadow: 0 0 12px rgba(255,170,80,.35); }
.pf-read span { display: block; margin-top: 4px; font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--recess-dim); }
.pf-firsts { display: flex; gap: 8px; overflow-x: auto; margin: 14px -20px 4px; padding: 2px 20px 6px; scrollbar-width: none; }
.pf-firsts::-webkit-scrollbar { display: none; }
.pf-first { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--bronze-line); background: var(--card); font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.pf-first b { color: var(--fg); }
.pf-first small { color: var(--muted); font-size: 12px; }
.pf-first .nx-lamp { background: var(--lamp-on); box-shadow: var(--lamp-ring), var(--lamp-glow); }
.pf-first.big { border-color: var(--bronze); }
.pf-card { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--bronze-line); background: var(--tolex-card); background-size: 120px 120px, auto; box-shadow: var(--tolex-inset); }
.pf-card h2 { margin: 0 0 6px; font: 700 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.pf-line { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--fg); }
.pf-line:last-child { margin-bottom: 0; }
.pf-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pf-stamp { display: flex; flex-direction: column; align-items: center; padding: 9px 2px 7px; border-radius: 50%; aspect-ratio: 1; justify-content: center; border: 1.5px solid var(--bronze-line); background: radial-gradient(circle, rgba(184,147,90,.08), transparent 70%); }
.pf-stamp b { font: 700 17px var(--sans); color: var(--fg); }
.pf-stamp span { font-size: 11px; color: var(--fg-2); }
.pf-stamp small { font-size: 9.5px; color: var(--muted); }
.pf-stamp.barre { border-color: var(--bronze); border-width: 2px; }
.pf-stamp.barre b { color: var(--accent); }
.pf-stamp.next { border-style: dashed; opacity: .75; }
.pf-bars { display: flex; flex-direction: column; gap: 8px; }
.pf-bar { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); }
.pf-bar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--w), var(--card-2) var(--w)); }
.pf-bar small { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-grid { display: grid; grid-template-columns: 18px repeat(4, 1fr); gap: 5px; align-items: center; }
.pf-grid small { font-size: 11px; color: var(--muted); text-align: center; }
.pf-grid i { height: 18px; border-radius: 6px; background: var(--card-2); position: relative; overflow: hidden; }
.pf-grid i::after { content: ""; position: absolute; inset: 0; background: #ffb24a; opacity: var(--a); }
.pf-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-keys span { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--card-2); font-size: 13px; color: var(--muted); }
.pf-keys b { font-size: 16px; color: var(--fg); }
.pf-spark { display: block; width: 100%; height: 44px; margin-top: 10px; }
.pf-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-cols13 { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; height: 76px; align-items: end; }
.pf-cols13 div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.pf-cols13 i { display: block; height: var(--h); min-height: 2px; border-radius: 3px; background: var(--accent); opacity: .85; }
.pf-cols13 small { font-size: 10px; color: var(--muted); text-align: center; }
.pf-cols { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pf-cols h3 { margin: 4px 0 6px; font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-song { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--fg); font-size: 15px; text-align: left; }
.pf-song span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-song small { color: var(--muted); font-size: 12px; }
.pf-song .chev { width: 14px; height: 14px; color: var(--muted); }
.app:has(.pf-dock) { padding-bottom: calc(100px + var(--safe-b)); }

/* ---- The streak moment ----
   A flame runs up the G string (0 to 1.1 s), the 12th-fret dots flash, the neck
   gives way to fireworks (1.3 s), and the burning pick settles in (1.9 s) as the
   number rolls up and the week's lamps light one by one. */
.sk { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; padding: calc(40px + var(--safe-t)) 24px calc(20px + var(--safe-b));
  background: radial-gradient(90% 50% at 50% 28%, #2a170a, #0c0c0d 70%); color: #f1e3c4; overflow: hidden; animation: fade .25s; }
.sk.out { opacity: 0; transition: opacity .25s; }
.sk-art { position: relative; width: 100%; max-width: 360px; height: 300px; flex: none; }
.sk-art svg { position: absolute; inset: 0; margin: auto; overflow: visible; }
.sk-run { width: 100%; height: 100%; }
.sk-pick { height: 100%; width: auto; left: 0; right: 0; opacity: 0; transform: scale(.6); transform-origin: 50% 90%; animation: sk-in .6s cubic-bezier(.2,1.4,.4,1) 1.9s forwards; }
.sk-pick.t0 .sk-burn { transform: scale(.66); } .sk-pick.t1 .sk-burn { transform: scale(.78); } .sk-pick.t2 .sk-burn { transform: scale(.9); }
.sk-burn { transform-origin: 100px 250px; transform-box: view-box; }
.sk-burn > path:first-child { transform-origin: 100px 250px; transform-box: view-box; animation: sk-flicker 1.6s ease-in-out infinite alternate; }
.sk-pick.t3 .sk-core { rx: 30; ry: 40; }
.sk-neck { animation: sk-neck .4s ease 1.3s forwards; }
.sk-trail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sk-trail 1.1s cubic-bezier(.5,0,.6,1) forwards; }
.sk-spark { animation: sk-spark 1.1s cubic-bezier(.5,0,.6,1) forwards; }
.sk-twelve { animation: sk-flash .3s ease 1.1s 2 alternate; }
.sk-burst { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sk-burst 1s ease-out calc(1.3s + var(--d)) forwards; }
@keyframes sk-in { to { opacity: 1; transform: none; } }
@keyframes sk-flicker { from { transform: scale(1, 1) skewX(0); } 50% { transform: scale(1.03, .97) skewX(1.5deg); } to { transform: scale(.98, 1.04) skewX(-1.5deg); } }
@keyframes sk-neck { to { opacity: 0; transform: translateY(18px); } }
@keyframes sk-trail { to { stroke-dashoffset: 0; } }
@keyframes sk-spark { to { transform: translateX(var(--to)); } }
@keyframes sk-flash { to { filter: brightness(3) drop-shadow(0 0 6px #ffb24a); } }
@keyframes sk-burst { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
.sk-num { margin-top: 2px; font: 800 96px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #ffd27a, #f08a2a 60%, #e0562a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-num, .sk-unit { animation: fade .3s ease 1.9s backwards; }
.sk-unit { margin-top: 6px; font: 700 15px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #ffb24a; }
.sk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; max-width: 340px; margin-top: 28px; text-align: center; }
.sk-week small { font: 600 13px var(--sans); color: #8a7f70; }
.sk-week small.now { color: #ffb24a; }
.sk-week i { justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 8px; border-radius: 50%; background: #2a2a2e; box-shadow: inset 0 -2px 4px rgba(0,0,0,.4); font: 700 11px var(--sans); color: #d9bd85; font-style: normal; }
.sk-week i.on { background: linear-gradient(180deg, #ffc35a, #e8622a); box-shadow: 0 0 10px 2px rgba(255,120,40,.45); animation: sk-lamp .35s ease calc(2.1s + var(--i) * .12s) backwards; }
.sk-week i.on::after { animation: fade .2s ease calc(2.2s + var(--i) * .12s) backwards; content: ""; width: 9px; height: 5px; border: solid #3a1400; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translateY(-1px); }
.sk-week i.goal { box-shadow: 0 0 0 2px #b8935a; }
.sk-week i.on.goal { box-shadow: 0 0 0 2px #b8935a, 0 0 18px 6px rgba(255,140,40,.7); }
@keyframes sk-lamp { from { background: #2a2a2e; box-shadow: none; transform: scale(.7); } }
.sk-say { margin: 24px 8px 0; max-width: 330px; text-align: center; font: 500 19px/1.45 var(--sans); animation: fade .5s ease 2.3s backwards; }
.sk-say b { color: #ffb24a; font-weight: 600; }
.sk-best { animation: fade .5s ease 2.4s backwards; margin-top: 8px; font-size: 14px; color: #8a7f70; }
.sk-foot { margin-top: auto; display: flex; gap: 10px; width: 100%; max-width: 420px; }
.sk-foot .sb2 { flex: none; width: 58px; height: 56px; border-radius: 16px; border: 1px solid var(--bronze-line); background: radial-gradient(circle at 50% 25%, #2b2b2f, #111113); color: #e9e9ec; display: grid; place-items: center; }
.sk-foot .sb2 svg { width: 22px; height: 22px; }
.sk-foot .btn { flex: 1; height: 56px; font-size: 17px; }
/* Reduce Motion: the final picture, no run, no fireworks. */
.sk.still .sk-run { display: none; }
.sk.still .sk-pick { opacity: 1; transform: none; animation: none; }
.sk.still *, .sk.still { animation: none !important; }

/* Bass riff editor: a grid of sixteenth-note steps, a beat to a row. */
.rf .rf-grid { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.rf .rf-row { display: grid; grid-template-columns: 22px repeat(4, 1fr); gap: 6px; align-items: center; }
.rf .rf-row i { font-style: normal; color: var(--muted); font-size: 13px; text-align: center; }
.rf .rf-top span { color: var(--muted); font-size: 12px; text-align: center; }
.rf .rf-c { height: 46px; border-radius: 10px; border: 1px solid var(--rim); background: var(--card-2); color: var(--muted); font-size: 18px; font-weight: 600; }
.rf .rf-c.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.rf .actions .btn { flex: 1; }


/* Tour Map: full screen. The page is locked while it is open; the map takes pinch and drag. */
body.tm-open { overflow: hidden; overscroll-behavior: none; }
body.tm-open .app { padding: 0; }
.tm-page { position: fixed; inset: 0; z-index: 3; touch-action: none; background: #0c0d0f; }
.tm-map, .tm-map.leaflet-container { position: absolute; inset: 0; z-index: 0; /* its own layer, so Leaflet's controls (z-index 800) stay under the sheet */ background: #0c0d0f; }
.tm-map.plain { background-color: #141316; background-image: var(--tolex); background-size: 220px 220px; }
.tm-map .tm-tiles { filter: invert(1) hue-rotate(180deg) brightness(.78) contrast(.92) saturate(.55); }
.tm-map .tm-halo { filter: blur(3px); }
.tm-map .leaflet-control-attribution { background: rgba(12,13,15,.7); color: #a99b80; font-size: 10px; }
.tm-map .leaflet-control-attribution a { color: #a99b80; }
.tm-map .leaflet-bottom { bottom: var(--dock-h, 150px); }
/* the same header as every other page: the title and a glass back button, no bar around them; a soft shade keeps the title readable over the map */
.tm-top { position: absolute; left: 0; right: 0; top: 0; z-index: 500; display: flex; align-items: center; gap: 8px; padding: calc(18px + var(--safe-t)) 20px 28px; background: linear-gradient(180deg, rgba(8,8,10,.85), rgba(8,8,10,.5) 60%, transparent); pointer-events: none; }
.tm-top > * { pointer-events: auto; }
.tm-top .ib, .tm-ctl .ib { color: #e9e1cf; }
.tm-top .ib { background: rgba(20,20,22,.85); border: 1px solid #4a4a50; }
:root .tm-page .tm-top .title.script { color: #efe2c2; text-shadow: 0 1px 0 rgba(0,0,0,.55); }
.tm-top .title { font-size: 40px; line-height: 1.25; padding-bottom: 4px; }
.tm-ctl { position: absolute; right: 16px; bottom: calc(var(--dock-h, 180px) + 12px); z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.tm-ctl .ib { width: 44px; height: 44px; background: rgba(20,20,22,.85); border: 1px solid #4a4a50; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tm-flag { width: 100%; height: 48px; flex: none; border-color: rgba(184,147,90,.42); background: rgba(20,20,22,.9); color: #f1e3c4; }
.tm-flag svg { width: 18px; height: 18px; color: var(--accent); }
.linkish { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; }
.tm-pin { display: grid; place-items: center; }
.tm-pin.badge { width: 30px; height: 30px; border-radius: 50%; background: var(--plate); border: 1px solid var(--plate-edge); box-shadow: 0 3px 6px rgba(0,0,0,.6); color: #2a1d0a; font: 700 13px var(--mono); }
.tm-pin.badge svg { width: 16px; height: 16px; stroke: #2a1d0a; fill: none; stroke-width: 2; }
.tm-pin.dim { opacity: .5; }
.tm-lamp { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--lamp-on); box-shadow: var(--lamp-ring), 0 0 14px 5px rgba(255,140,40,.6); }
.tm-sheet-t { margin: 2px 0 8px; font: 400 26px/1.15 var(--serif); color: var(--fg); }
.tm-fine { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tm-btns { display: flex; gap: 10px; }
.tm-btns .btn { height: 52px; }
.tm-btns .btn svg { width: 18px; height: 18px; }

/* Library: back to Tonight beside the title */
.head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Tonight (home). New parts use the app's materials: tolex cards, recess, lamps, copper. */
.rd-say { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.rd-say .louie { flex: none; margin: -8px -4px -6px -10px; }
.rd-bubble { position: relative; flex: 1; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--bronze-line); background: var(--tolex-card); background-size: 120px 120px, auto; box-shadow: var(--tolex-inset); font-size: 15px; line-height: 1.4; color: var(--fg); }
.rd-next { margin-top: 12px; }
.rd-song { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--fg); }
.rd-song b { flex: 1; min-width: 0; font: 400 30px/1.1 var(--serif); overflow-wrap: anywhere; }
.rd-song .k { font: 600 14px var(--mono); color: var(--muted); }
.rd-meta { margin: 4px 0 14px; font-size: 14px; color: var(--muted); }
.rd-steps { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin: 0 0 16px; padding: 8px 10px; border-radius: 14px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.rd-steps button { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 4px; border: 0; background: none; font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--recess-dim); }
.rd-steps button.on, .rd-steps button.cur { color: var(--recess-on); }
.rd-go { width: 100%; height: 56px; font-size: 18px; }
.rd-go svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rd-map { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: inherit; font: inherit; }
.rd-turf { width: 84px; height: 84px; flex: none; border-radius: 12px; border: 1px solid var(--bronze-line); background-color: #141316; background-image: var(--tolex); background-size: 220px 220px; }
.rd-map-t { flex: 1; min-width: 0; }
.rd-map-t h2 { margin: 0 0 4px; }
.rd-map-t .pf-line { display: block; margin: 0; font-size: 15px; }
.rd-map .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.rd-search { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--muted); font: inherit; font-size: 16px; }
.rd-first { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 18px 10px 4px; }
.rd-first-t { margin: 8px 0 0; font: 400 30px/1.15 var(--serif); color: var(--fg); }
.rd-first .pf-line { margin-top: 6px; color: var(--fg-2); }
.louie .lv-body { transform-box: view-box; }
@keyframes lv-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-10px) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.06, .94); } }
.louie.cheer .lv-body, .louie.hornsUp .lv-body { animation: lv-hop .7s cubic-bezier(.3,1.4,.5,1) 2; transform-origin: 100px 180px; }
@keyframes lv-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.louie.happy .lv-eye { animation: lv-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .louie .lv-body, .louie .lv-eye { animation: none !important; } }
/* Tour Map: rival players and pressure */
.tm-rival { display: grid; place-items: center; }
.tm-rival b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #17181b; border: 2.5px solid var(--c); color: var(--c); font: 700 12px var(--sans); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.tm-rival.quiet b { opacity: .6; }
.tm-popwrap .leaflet-popup-content-wrapper { background: #17181b; color: #f1e3c4; border: 1px solid rgba(184,147,90,.42); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.tm-popwrap .leaflet-popup-tip { background: #17181b; }
.tm-popwrap .leaflet-popup-content { margin: 10px 14px; }
.tm-pop { display: flex; flex-direction: column; gap: 3px; font: 13px var(--sans); }
.tm-pop b { font: 400 18px var(--serif); color: #f1e3c4; }
.tm-pop span { color: #cbbfa6; }
.tm-pop small { margin-top: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8a7f70; }
.tm-push { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(40,18,10,.9); border: 1px solid rgba(229,72,77,.55); color: #ffd2c2; font-size: 13px; line-height: 1.4; }
.tm-lamp.warn { background: radial-gradient(circle at 35% 30%, #ffd2c2 0 12%, #ff6a4a 40%, #a8220c 85%); box-shadow: var(--lamp-ring), 0 0 14px 5px rgba(255,80,50,.6); }

/* Tonight (3.3): one fixed screen. Cards use the Library list's glass; only the drawer is tolex. */
/* No overflow lock here: on iPhone, any clipping box stops at the layout viewport, short of the screen's bottom edge, and cuts off the drawer. Tonight fits the screen, and road.js holds the page still. */
html:has(> body.is-home) { overscroll-behavior: none; }
/* iOS Home Screen apps keep fixed layers above the bottom strip where Safari's toolbar would be,
   so on Tonight the drawer, scrim and dock sit in the page instead, which runs the full screen
   height (--screen-h, set by road.js from the screen when the app is standalone). */
body.is-home { overscroll-behavior: none; position: relative; height: var(--screen-h, 100dvh); contain: paint; --peek: calc(150px + var(--safe-b)); }
body.is-home .rd-scrim, body.is-home .rd-drawer, body.is-home .dock { position: absolute; }
body.is-home .rd-drawer::after { display: none; }
body.is-home .app { height: var(--screen-h, 100dvh); box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: calc(var(--peek) + 10px); }
body.is-home .head .title.script { font-size: 40px; line-height: 1.25; padding: 0 0 4px; }
body.is-home .dock-fade { display: none; }
body.is-home .pf-card, body.is-home .rd-bubble { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi); border-radius: 16px; }
body.is-home .rd-next { margin-top: 10px; padding: 14px; }
body.is-home .rd-map { margin-top: 10px; padding: 12px 14px; }
body.is-home .rd-say .louie { height: 84px; width: auto; }
body.is-home .rd-song b { font-size: 26px; }
body.is-home .rd-meta { margin-bottom: 10px; }
body.is-home .rd-steps { margin-bottom: 10px; }
body.is-home .rd-go { height: 50px; }
body.is-home .rd-turf { width: 64px; height: 64px; }
@media (max-height: 740px) {
  body.is-home .rd-say, body.is-home .rd-first .louie { display: none; }
  body.is-home .rd-meta { display: none; }
}
.rd-scrim { position: fixed; inset: 0; z-index: 18; background: #000; opacity: 0; pointer-events: none; }
.rd-drawer { position: fixed; left: 50%; bottom: 0; width: min(560px, 100%); height: calc(var(--screen-h, 100dvh) - 44px - var(--safe-t)); z-index: 19; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 26px 26px 0 0; border: 1px solid var(--bronze-line); border-bottom: 0; background-color: var(--bg); background-image: var(--tolex-card); background-size: 120px 120px, auto; box-shadow: 0 -14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); color: var(--fg); will-change: transform; touch-action: pan-y; transform: translate3d(-50%, calc(100% - var(--peek)), 0); }
.rd-drawer::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 400px; background: inherit; background-color: var(--bg); border-left: 1px solid var(--bronze-line); border-right: 1px solid var(--bronze-line); }
.rd-dbody { opacity: 0; }
.rd-sizer { position: absolute; left: 0; right: 0; top: 0; height: var(--peek); pointer-events: none; visibility: hidden; }
.rd-dh { flex: none; display: block; width: 100%; padding: 10px 22px 8px; border: 0; background: none; color: inherit; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.rd-grab { display: block; width: 40px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 60%, transparent); }
.rd-dt { display: flex; align-items: baseline; gap: 10px; }
.rd-dt b { font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive; font-weight: 700; font-size: 30px; line-height: 1.2; color: var(--fg); }
.rd-dt > span { font-size: 13px; color: var(--muted); }
.rd-dbody { flex: 1; min-height: 0; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 0 20px calc(110px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.rd-dbody .chips { margin-top: 4px; }

/* Tour Map bottom (3.5): the venue line over the map and the scene sheet, a pull-up drawer in the
   app's glass with the copper Play. Pulled up: the takeover details and the scene in a recess. */
.tm-above { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tm-peek, 90px) + 8px); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tm-venue { margin: 0; padding: 8px 14px; border-radius: 20px; border-color: var(--bronze-line); font-size: 13px; color: var(--muted); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tm-venue b { color: var(--fg); font-weight: 600; }
.tm-venue[hidden] { display: none; }
.tm-scrim { position: absolute; inset: 0; z-index: 600; background: #000; opacity: 0; pointer-events: none; }
.tm-sheet { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); max-height: calc(100% - 96px - var(--safe-t)); z-index: 700; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 calc(14px + var(--safe-b)); border-radius: 24px 24px 0 0; border: 1px solid var(--bronze-line); border-bottom: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 -12px 30px rgba(0,0,0,.45), inset 0 1px 0 var(--rim-hi); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); touch-action: pan-y; will-change: transform; transform: translate3d(-50%, 100%, 0); }
.tm-sizer { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; visibility: hidden; }
.tm-sh { flex: none; padding: 8px 14px 4px; }
.tm-sh .rd-grab { margin-bottom: 10px; cursor: pointer; }
.tm-sh-row { display: flex; align-items: center; gap: 12px; }
.tm-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: #17181b; border: 2.5px solid var(--c); color: var(--c); font: 700 13px var(--sans); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.tm-sh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.tm-sh-t b { font: 400 22px/1.15 var(--serif); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sh-t span { font-size: 14px; color: var(--muted); }
.tm-sh-row .tm-go { flex: 0 0 auto; width: auto; min-width: 0; height: 46px; padding: 0 20px; font-size: 16px; }
.tm-go svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tm-sbody { flex: 1; min-height: 0; overflow-y: hidden; overscroll-behavior: contain; padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 12px; opacity: 0; }
.tm-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.tm-line b { color: var(--fg); font-weight: 600; }
.tm-lab { margin: 4px 0 -4px; font: 700 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.tm-board { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.tm-bd { display: grid; grid-template-columns: 18px minmax(0, 120px) 1fr 30px; align-items: center; gap: 10px; font-size: 13px; color: var(--recess-dim); }
.tm-bd > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9dcc0; }
.tm-bd i { height: 8px; border-radius: 4px; background: var(--c); }
.tm-bd b { font: 700 13px var(--mono); color: var(--recess-on); text-align: right; }
.tm-bd.you > span:nth-child(2) { color: var(--recess-on); font-weight: 700; }
.tm-bd.you i { background: var(--lamp-on); box-shadow: 0 0 8px rgba(255,150,50,.5); }
.tm-bd.more i { display: none; }
.tm-sbody .tm-fine { margin: 0; font-size: 12px; color: var(--muted); }

/* ---- The neck (3.6.0): practice lessons ---- */
.rd-skip { display: block; margin: 6px auto 0; padding: 6px 12px; border: 0; background: none; font: 600 14px var(--sans); color: var(--muted); }
.rd-steps button#rd-sound { flex: none; }
.pk-count { float: right; font: 600 12px var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: none; }
.pk-level.soon { opacity: .6; border-style: dashed; }
.pk-board { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 4px; margin: 8px -2px 0; border-radius: 12px; scrollbar-width: none; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.pk-board::-webkit-scrollbar { display: none; }
.pk-fret { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 62px; height: 72px; padding: 0; border: 0; border-right: 3px solid var(--bronze-line); background: none; color: var(--recess-dim); font: inherit; }
.pk-fret b { font: 700 17px var(--sans); }
.pk-fret small { font: 600 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; min-height: 12px; }
.pk-fret.done { color: var(--gold-text); }
.pk-fret.now { color: var(--recess-on); background: radial-gradient(circle at 50% 100%, rgba(255,178,74,.28), transparent 70%); box-shadow: inset 0 0 0 1.5px rgba(255,194,122,.6); border-radius: 8px; }
.pk-fret.locked { border-right-style: dashed; opacity: .55; }
.pk-inlay { flex: none; align-self: center; width: 22px; height: 22px; margin: 0 8px; padding: 0; border-radius: 50%; border: 1.5px solid var(--bronze-line); background: none; }
.pk-inlay.done { background: radial-gradient(circle at 35% 30%, #ffe7b8, #c9953f); border-color: var(--gold-text); }
.pk-inlay.now { border-color: var(--copper); box-shadow: 0 0 12px rgba(255,178,74,.7); }
.pk-lesson { margin-top: 12px; }
.pk-chord { display: flex; justify-content: center; margin: 4px 0 10px; }
.pk-chord svg { height: 190px; width: auto; }
.pk-strings { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.pk-str { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pk-str small { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--recess-dim); }
.pk-str.skip { opacity: .4; }
.pk-pair { display: flex; align-items: center; gap: 12px; }
.pk-now { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; border-radius: 16px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.pk-now b { font: 400 64px/1 var(--serif); color: var(--recess-on); }
.pk-now small { margin-top: 6px; font: 600 13px var(--sans); color: var(--recess-dim); }
.pk-diag { flex: none; width: 96px; opacity: .8; }
.pk-diag svg { width: 100%; height: auto; }
.pk-beats { display: flex; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.pk-beats i { width: 14px; height: 14px; border-radius: 50%; background: var(--lamp-off); border: 1px solid var(--recess-edge); transition: background .06s; }
.pk-beats i.on { background: var(--lamp-on); box-shadow: 0 0 10px rgba(255,178,74,.8); }
.pk-lesson .rd-say { margin-top: 10px; }
.s-dock .btn:disabled { opacity: .6; }

/* ---- What I hear (3.8.0): the microphone, live ---- */
.pk-hearcard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: inherit; font: inherit; }
.pk-hearcard > svg:first-child { width: 26px; height: 26px; flex: none; color: var(--gold-text); }
.pk-hearcard > span { flex: 1; min-width: 0; }
.pk-hearcard b { display: block; font: 700 17px var(--sans); color: var(--fg); }
.pk-hearcard .pf-line { display: block; margin: 2px 0 0; font-size: 14px; }
.pk-hearcard .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pk-lesson .pf-plate { margin: 0 0 12px; }
.ph-lane { display: block; width: 100%; height: 110px; border-radius: 12px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.ph-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 2px 14px; font-size: 12px; color: var(--muted); }
.ph-k { display: inline-block; width: 12px; height: 3px; margin-right: -6px; border-radius: 2px; vertical-align: middle; }
.ph-k.lvl { background: #ffc27a; }
.ph-k.thr { background: repeating-linear-gradient(90deg, rgba(255,120,90,.9) 0 3px, transparent 3px 5px); }
.ph-k.on { width: 8px; height: 8px; border-radius: 50%; background: #ffb24a; }
.ph-k.beat { width: 2px; height: 12px; background: rgba(255,255,255,.35); }
.ph-h { margin: 0 0 8px; }
.ph-chords { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ph-chords button { min-width: 44px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--bronze-line); background: none; font: 700 14px var(--sans); color: var(--fg-2); }
.ph-chords button.on { border-color: var(--gold-text); color: var(--gold-text); box-shadow: 0 0 10px rgba(255,190,110,.25); }
.ph-say { margin: 4px 0 0; }
.ph-row { display: flex; justify-content: center; gap: 8px; }