:root {
  --bg: #101820;
  --panel: #172230;
  --panel-2: #1f2d3c;
  --text: #f8fafc;
  --muted: #aeb8c5;
  --line: #314154;
  --accent: #62d2a2;
  --danger: #ff776f;
  --font-size: 22px;
  --columns: 1;
  --focus-top: 42%;
  --focus-lines: 1;
  --diagram-line-color: #ffffff;
  --diagram-finger-color: var(--accent);
  --mobile-diagram-panel-height: clamp(150px, 28svh, 210px);
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

body.theme-light {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --text: #111827;
  --muted: #475569;
  --line: #cbd5e1;
  --accent: #0f766e;
  --diagram-line-color: #111827;
  --diagram-finger-color: var(--accent);
  color-scheme: light;
}

body.theme-stage {
  --bg: #000000;
  --panel: #050505;
  --panel-2: #111111;
  --text: #ffffff;
  --muted: #cccccc;
  --line: #333333;
  --accent: #facc15;
  --diagram-line-color: #ffffff;
  --diagram-finger-color: var(--accent);
  color-scheme: dark;
}

body.theme-light .reader-shell,
body.theme-light .reader-main,
body.theme-light .reader-stage,
body.theme-light .reader-song-content {
  background: var(--bg);
  color: var(--text);
}

body.theme-light .reader-topbar,
body.theme-light .reader-browser,
body.theme-light .reader-settings,
body.theme-light .reader-quick-menu.open,
body.theme-light.reader-quick-open .reader-quick-menu {
  background: var(--panel);
  color: var(--text);
}

body.theme-light .reader-chord-panel {
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.reader-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.reader-topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 34px minmax(180px, 1fr) auto auto 34px;
  align-items: center;
  gap: 10px;
  padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.reader-now-playing {
  min-width: 0;
}

.reader-now-playing h1 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-topbar span,
.reader-status,
.reader-key-help,
.reader-settings-hint {
  color: var(--muted);
  font-size: 12px;
}

.reader-settings-hint {
  margin: 4px 0 8px;
  line-height: 1.35;
}

.reader-build-badge {
  display: inline-block;
  margin-top: 3px;
  color: #111;
  background: #ffd84d;
  border: 1px solid #fff2a8;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.reader-scheme-warning {
  margin: 6px 0 8px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
}

#reader-library-status {
  display: none;
  max-width: min(720px, calc(100vw - 180px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-top-actions {
  display: flex;
  gap: 8px;
}

#reader-quick-toggle,
.reader-quick-speed {
  display: none;
}

button,
input,
select {
  font: inherit;
}

button,
.file-import {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 11px;
}

button {
  cursor: pointer;
  font-weight: 700;
}

button:active {
  transform: translateY(1px);
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 10px;
}

input[type="range"] {
  padding: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.reader-settings {
  position: fixed;
  z-index: 30;
  top: 55px;
  bottom: 10px;
  right: 10px;
  width: min(300px, calc(100vw - 20px));
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  display: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.reader-settings.open { display: block; }

.reader-settings section {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.reader-settings section:last-child { border-bottom: 0; }

.reader-settings h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.reader-settings-subhead {
  margin: 16px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reader-settings-subhead:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.reader-settings section > button,
.reader-settings details > button {
  display: block;
  width: 100%;
  margin: 8px 0;
  text-align: center;
}

.reader-settings label {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 12px;
}

.reader-check-row {
  display: flex !important;
  align-items: center;
  gap: 9px;
  color: var(--text) !important;
}

.reader-check-row input {
  width: auto;
}

.reader-key-map {
  display: grid;
  gap: 7px;
  margin: 8px 0;
}

.reader-live-clients {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.reader-live-client-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 7px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

.reader-live-client-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.reader-live-transfer {
  display: grid;
  gap: 6px;
}

.reader-live-transfer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.reader-live-invite {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 8px;
}

.reader-live-invite-link {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 12px;
}

.reader-live-qr {
  display: grid;
  place-items: center;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.reader-live-qr[hidden] {
  display: none;
}

.reader-live-qr svg {
  width: min(220px, 100%);
  height: auto;
  display: block;
}

.reader-live-transfer input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
}

.reader-live-client-action,
.reader-live-release {
  padding: 3px 7px;
  font-size: 11px;
}

.reader-live-release {
  justify-self: start;
}

.reader-live-client-summary b {
  color: var(--accent);
}

.reader-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.reader-key-name {
  color: var(--muted);
  font-size: 12px;
}

.reader-key-code {
  display: inline-block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.reader-key-learn {
  min-width: 82px;
  padding: 7px 9px;
  font-size: 12px;
}

.reader-key-learn.waiting {
  border-color: var(--accent);
  color: var(--accent);
}

.reader-inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.reader-inline-field button {
  padding-left: 12px;
  padding-right: 12px;
}

.file-import {
  display: block;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.file-import input { display: none; }

.reader-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 0;
}

body.reader-performance .reader-main {
  grid-template-columns: minmax(0, 1fr);
}

body.reader-performance .reader-browser {
  display: none;
}

body.reader-live-follower .reader-main {
  grid-template-columns: minmax(0, 1fr);
}

body.reader-live-follower .reader-browser {
  display: none;
}

body.reader-projection-mode .reader-controls {
  display: none;
}

body.reader-projection-mode .reader-song-content {
  padding-bottom: 28px;
}

.reader-browser {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.reader-browser-backdrop {
  display: none;
}

.reader-browser-row {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.reader-song-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 8px 10px;
}

.reader-song-row {
  display: block;
  width: 100%;
  margin: 5px 0;
  text-align: left;
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.reader-song-row.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.reader-song-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.reader-stage {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0 0;
  grid-template-rows: minmax(0, 1fr);
  background: var(--bg);
  /* --mobile-diagram-panel-height default lives on :root, not here - a rule
     declaring this custom property directly on .reader-stage would shadow the
     JS-set override on <html> for every element under .reader-stage (custom
     properties resolve from the nearest rule that specifies them for a given
     element, not by walking up to find the "real" override), which is
     exactly what silently broke the mobile resize handle: the drag correctly
     updated the property on <html>, but .reader-stage never saw it. */
}

body.reader-simplified-panel-enabled .reader-stage,
body.reader-original-panel-enabled .reader-stage {
  grid-template-columns: minmax(0, 1fr) 6px minmax(220px, var(--chord-column-width, 42vw));
}

body.reader-chords-left .reader-stage {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

body.reader-chords-top .reader-stage,
body.reader-chords-bottom .reader-stage {
  grid-template-columns: minmax(0, 1fr);
}

body.reader-chords-left.reader-simplified-panel-enabled .reader-stage,
body.reader-chords-left.reader-original-panel-enabled .reader-stage {
  grid-template-columns: minmax(220px, var(--chord-column-width, 42vw)) 6px minmax(0, 1fr);
}

.reader-stage-resizer {
  grid-row: 1;
  width: 6px;
  min-width: 6px;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
  display: none;
}

.reader-stage-resizer::after {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background: var(--line);
  border-radius: 2px;
}

.reader-stage-resizer:hover::after,
.reader-stage-resizer.dragging::after {
  background: var(--accent);
}

body.reader-simplified-panel-enabled .reader-stage-resizer,
body.reader-original-panel-enabled .reader-stage-resizer {
  display: block;
}


#reader-song-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.reader-performance-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  font-size: 12px;
}

.reader-quick-menu.open,
body.reader-quick-open .reader-quick-menu {
  position: fixed;
  z-index: 80;
  top: max(54px, calc(env(safe-area-inset-top) + 48px));
  right: 8px;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: min(330px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.reader-quick-menu.open .reader-leader-controls,
.reader-quick-menu.open .reader-follower-controls {
  flex-direction: column;
  align-items: stretch;
}

.reader-quick-menu.open label {
  display: grid;
  gap: 5px;
}

.reader-quick-menu.open input[type="number"],
.reader-quick-menu.open input[type="range"],
.reader-quick-menu.open button {
  width: 100%;
}

.reader-quick-menu.open .reader-quick-speed {
  display: grid;
}

.reader-leader-controls,
.reader-follower-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reader-performance-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.reader-performance-controls input {
  width: 50px;
  padding: 5px 7px;
}

.reader-performance-controls button {
  padding: 5px 8px;
}

.reader-stepper {
  display: inline-grid;
  grid-template-columns: 28px 36px 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.reader-stepper input[type="number"] {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.reader-stepper button {
  border: 0;
  border-radius: 0;
  padding: 5px 0;
}

.reader-stepper output {
  text-align: center;
  color: var(--text);
  font-weight: 800;
}

#reader-save-performance.dirty {
  border-color: var(--accent);
  color: var(--accent);
}

body.reader-live-follower .reader-leader-controls {
  display: none;
}

body:not(.reader-live-follower) .reader-follower-controls {
  display: none;
}

.reader-song-content {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 18px 90px;
  font-size: var(--font-size);
  line-height: 1.42;
}

.reader-scroll-spacer {
  height: min(42svh, 42vh);
  break-inside: avoid;
}

.reader-scroll-spacer-bottom {
  height: calc(min(42svh, 42vh) + 32px);
}

.reader-section {
  break-inside: avoid;
  margin: 0 0 0.9em;
}

.reader-section-title {
  margin: 0.7em 0 0.3em;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reader-line {
  min-height: 1.55em;
  margin: 0.05em 0;
  border-radius: 6px;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: background-color 120ms ease, color 120ms ease;
}

.reader-line-chorded {
  display: block;
  min-width: 0;
  width: 100%;
  white-space: normal;
  overflow-x: visible;
  overflow-y: visible;
  scrollbar-width: auto;
}

.reader-line-chorded::-webkit-scrollbar {
  display: none;
}

body.reader-focus-enabled .reader-line.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

body.reader-focus-enabled .reader-line.active-window {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
}

.reader-segment {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: auto;
  max-width: 100%;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  break-inside: avoid;
}

.reader-chord {
  display: block;
  min-height: 0.9em;
  color: var(--accent);
  font-size: 0.72em;
  font-weight: 800;
  line-height: 0.9;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.reader-chord-simplified,
.reader-chord-original,
.reader-chord-pair {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reader-chord-original {
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
  font-size: 0.82em;
}

.reader-chord-pair {
  display: inline-grid;
  gap: 0.1em;
  margin-right: 0.65em;
}

.reader-lyric {
  display: block;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.reader-chord-only {
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reader-chord-panel {
  grid-column: 3;
  grid-row: 1;
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
}

body.reader-chords-left .reader-song-content {
  grid-column: 3;
}

body.reader-chords-top .reader-song-content,
body.reader-chords-bottom .reader-song-content {
  grid-column: 1;
}

body.reader-chords-left .reader-chord-panel {
  grid-column: 1;
  border-right: 1px solid var(--line);
  border-left: 0;
}

body.reader-chords-top .reader-chord-panel,
body.reader-chords-bottom .reader-chord-panel {
  grid-column: 1;
  border-left: 0;
}

body.reader-simplified-panel-enabled .reader-chord-panel,
body.reader-original-panel-enabled .reader-chord-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

body.reader-simplified-panel-enabled.reader-original-panel-enabled .reader-chord-panel {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.reader-active-chords {
  position: relative;
  z-index: 2;
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px 12px 10px 30px;
  color: var(--text);
  font-size: 12px;
}

body.reader-original-panel-enabled .reader-chord-pane-original:not(:empty),
body.reader-simplified-panel-enabled .reader-chord-pane-simplified:not(:empty) {
  display: block;
}

.reader-chord-pane-original {
  border-bottom: 1px solid var(--line);
}

body.reader-original-panel-enabled:not(.reader-simplified-panel-enabled) .reader-chord-pane-original {
  border-bottom: 0;
}

.reader-diagram-viewport {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.reader-chord-pane-title {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  cursor: pointer;
}

.reader-chord-pane-title:hover {
  color: var(--text);
}

.reader-chord-pane-title:active {
  transform: rotate(180deg);
}

.reader-chord-pane-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 25%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
}

.reader-chord-pane-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.reader-diagram-track {
  container-type: inline-size;
  container-name: reader-diagram-row;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  will-change: transform;
}

.reader-diagram-shift-down .reader-diagram-track,
.reader-diagram-shift-up .reader-diagram-track {
  height: calc(150% + 12px);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.reader-diagram-shift-down .reader-diagram-track {
  animation: reader-diagram-scroll-down 900ms linear both;
}

.reader-diagram-shift-up .reader-diagram-track {
  animation: reader-diagram-scroll-up 900ms linear both;
}

.reader-diagram-row {
  --diagram-width: 72px;
  --diagram-grid-height: 76px;
  --diagram-font-size: 12px;
  --diagram-dot-size: 9px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 12px clamp(3px, calc(var(--diagram-width) * 0.08), 8px);
  min-height: 0;
  overflow-x: hidden;
  /* Both axes stay visually clipped. Horizontal auto-follow still uses
     scrollLeft programmatically, without exposing a native scrollbar. */
  overflow-y: hidden;
  padding: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  opacity: 0.55;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.reader-diagram-row.reader-diagram-row-auto-wrap {
  display: grid;
  grid-template-columns: repeat(var(--diagram-auto-wrap-columns), max-content);
  grid-template-rows: repeat(2, max-content);
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  align-items: start;
  overflow: hidden;
  row-gap: 4px;
}

/* Diagrams scale continuously to fill whatever width the row actually has, instead of a
   handful of hardcoded small/medium/large tiers - the row width follows the resizable
   chord column (.reader-stage-resizer), so dragging it wider makes diagrams bigger too. */
@container reader-diagram-row (min-width: 0) {
  .reader-diagram-row {
    --diagram-width: clamp(46px, 21cqw, 116px);
    --diagram-grid-height: calc(var(--diagram-width) * 1.02);
    --diagram-font-size: calc(var(--diagram-width) * 0.155);
    --diagram-dot-size: calc(var(--diagram-width) * 0.115);
  }
}

.reader-diagram-row .reader-diagram-pair {
  flex: 0 0 auto;
}

.reader-diagram-row.active {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 1;
}

.reader-diagram-pair {
  display: inline-flex;
  justify-content: center;
  gap: 5px;
  align-items: flex-start;
}

.reader-active-chord-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.reader-active-chord-label {
  color: var(--muted);
}

.reader-active-chord-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.reader-active-chord-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--accent);
  font-weight: 800;
}

.reader-diagram {
  position: relative;
  display: inline-grid;
  /* Fixed (not auto/minmax) row sizes so every diagram in a row has the same
     total height regardless of which glyphs it happens to render (e.g. a
     chord with no muted "x" strings has a shorter auto-sized open-string row
     than one with a large "x" glyph) - that mismatch was the cause of
     fretboards not lining up horizontally across a row. */
  grid-template-rows: 1em 1.25em var(--diagram-grid-height) 1.05em;
  gap: 2px;
  width: var(--diagram-width);
  color: var(--text);
  font-size: var(--diagram-font-size);
  color-scheme: only light;
  forced-color-adjust: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.reader-diagram *,
.reader-diagram-grid * {
  forced-color-adjust: none;
}

.reader-diagram-name {
  text-align: center;
  color: var(--accent);
  font-weight: 800;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-diagram-open {
  margin: 0 4px;
  display: grid;
  grid-template-columns: repeat(var(--strings, 6), 1fr);
  align-items: center;
  color: var(--muted);
  font-size: 1em;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

/* All three marker kinds (x / o / blank) share one font-size so every column's
   glyph occupies the exact same box - a size mismatch here (there used to be
   one: x was 1.35em, o was 1.15em) is what let some strings' markers sit
   lower/higher than their neighbours and bleed into the nut/fret line below. */
.reader-diagram-open span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.1em;
  font-weight: 800;
  line-height: 1;
}

.reader-diagram-open .reader-diagram-muted {
  color: var(--danger);
}

.reader-diagram-open .reader-diagram-open-string {
  color: var(--muted);
  transform: translateY(-0.08em);
}

.reader-diagram-grid {
  position: relative;
  height: var(--diagram-grid-height);
  margin: 0 4px;
}

.reader-diagram-position {
  position: absolute;
  left: auto;
  /* Hug the right edge of the grid with only a hair of gap, at the level of the
     first fret line (below the top fret space it labels). */
  right: -0.15em;
  top: calc(100% / var(--visible-frets, 4));
  transform: translate(100%, -50%);
  color: var(--text);
  font-size: 0.92em;
  font-weight: 800;
  line-height: 1;
}

.reader-diagram-dot {
  position: absolute;
  width: var(--diagram-dot-size);
  height: var(--diagram-dot-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--diagram-finger-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 72%, transparent);
}

.reader-diagram-barre {
  position: absolute;
  z-index: 1;
  height: var(--diagram-dot-size);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--diagram-finger-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 72%, transparent);
}

.reader-diagram-dot {
  z-index: 2;
}

.reader-diagram-string,
.reader-diagram-fretline {
  position: absolute;
  background: var(--diagram-line-color);
}

.reader-diagram-string {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
}

.reader-diagram-fretline {
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

.reader-diagram-fretline.nut {
  z-index: 1;
  height: calc(var(--diagram-dot-size) * 0.72);
  border-radius: 999px;
  background: var(--diagram-line-color);
  transform: translateY(-50%);
}

.reader-diagram-fret {
  text-align: center;
  color: var(--muted);
  min-height: 1.05em;
  font-size: 0.78em;
  line-height: 1.05;
}

.reader-diagram-fret-empty {
  opacity: 0;
}

body:not(.theme-light) .reader-diagram-open,
body:not(.theme-light) .reader-diagram-open .reader-diagram-open-string,
body:not(.theme-light) .reader-diagram-position {
  color: #ffffff !important;
}

body:not(.theme-light) .reader-diagram-dot,
body:not(.theme-light) .reader-diagram-barre {
  background: var(--diagram-finger-color) !important;
  background-color: var(--diagram-finger-color) !important;
}

body:not(.theme-light) .reader-diagram-string,
body:not(.theme-light) .reader-diagram-fretline,
body:not(.theme-light) .reader-diagram-fretline.nut {
  background: var(--diagram-line-color) !important;
  background-color: var(--diagram-line-color) !important;
}

body:not(.theme-light) .reader-diagram-dot,
body:not(.theme-light) .reader-diagram-barre {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) !important;
}

.reader-controls {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
}

.reader-controls output {
  min-width: 48px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

@keyframes reader-diagram-scroll-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-33.333% - 4px));
  }
}

@keyframes reader-diagram-scroll-up {
  from {
    transform: translateY(calc(-33.333% - 4px));
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 980px), (pointer: coarse) {
  .reader-main {
    grid-template-columns: 1fr;
  }

  .reader-stage-resizer {
    display: none !important;
  }

  .reader-stage,
  body.reader-simplified-panel-enabled .reader-stage,
  body.reader-original-panel-enabled .reader-stage,
  body.reader-simplified-panel-enabled.reader-original-panel-enabled .reader-stage,
  body.reader-chords-left .reader-stage,
  body.reader-chords-left.reader-simplified-panel-enabled .reader-stage,
  body.reader-chords-left.reader-original-panel-enabled .reader-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .reader-song-content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.reader-simplified-panel-enabled.reader-original-panel-enabled .reader-chord-pane-simplified {
    display: none;
  }

  body.reader-simplified-panel-enabled.reader-original-panel-enabled .reader-chord-pane-original:not(:empty) {
    display: block;
  }

  .reader-active-chords {
    padding: 6px 28px 6px 24px;
  }

  .reader-chord-pane-title {
    left: 3px;
    width: 14px;
    font-size: 8px;
  }

  .reader-chord-pane-close {
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    font-size: 13px;
  }

  .reader-diagram-row {
    gap: 2px clamp(4px, calc(var(--diagram-width) * 0.1), 8px);
    padding: 1px 0;
    align-items: center;
  }

  body:not(.theme-light) .reader-diagram-string,
  body:not(.theme-light) .reader-diagram-fretline,
  body:not(.theme-light) .reader-diagram-fretline.nut {
    background-color: var(--diagram-line-color) !important;
  }

  body:not(.theme-light) .reader-diagram-open,
  body:not(.theme-light) .reader-diagram-open .reader-diagram-open-string,
  body:not(.theme-light) .reader-diagram-position {
    color: #ffffff !important;
  }

  .reader-diagram-pair {
    gap: 1px;
  }

  .reader-diagram {
    gap: 0;
  }

  .reader-diagram-name {
    font-size: 0.92em;
  }

  .reader-diagram-open {
    font-size: 0.9em;
    margin: 0 2px;
  }

  .reader-diagram-grid {
    margin: 0 2px;
  }

  .reader-diagram-string {
    width: 0.8px;
    transform: translateX(-0.4px);
  }

  .reader-diagram-fretline {
    height: 0.8px;
    transform: translateY(-0.4px);
  }

  .reader-diagram-position {
    font-size: 0.78em;
  }

  body.reader-simplified-panel-enabled .reader-controls,
  body.reader-original-panel-enabled .reader-controls {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--mobile-diagram-panel-height) + 12px);
    z-index: 24;
  }

  .reader-browser {
    flex: 0 0 auto;
    max-height: 38vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .reader-song-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 0 10px 10px;
  }

  .reader-song-row {
    flex: 0 0 220px;
  }

}

@media (max-width: 980px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  body.reader-simplified-panel-enabled .reader-stage,
  body.reader-original-panel-enabled .reader-stage {
    grid-template-rows: minmax(0, 1fr) 32px var(--mobile-diagram-panel-height);
  }

  body.reader-chords-top.reader-simplified-panel-enabled .reader-stage,
  body.reader-chords-top.reader-original-panel-enabled .reader-stage {
    grid-template-rows: var(--mobile-diagram-panel-height) 32px minmax(0, 1fr);
  }

  .reader-song-content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  /* Divider between text and chords is draggable here too (dragging up/down
     resizes --mobile-diagram-panel-height), not just on the desktop column
     layout - it just swaps from a column-resize handle to a row-resize one. */
  body.reader-simplified-panel-enabled .reader-stage-resizer,
  body.reader-original-panel-enabled .reader-stage-resizer {
    display: flex !important;
    align-items: center;
    position: relative;
    z-index: 5;
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 32px;
    touch-action: none;
    cursor: row-resize;
  }

  .reader-stage-resizer::after {
    width: 100%;
    height: 2px;
  }

  .reader-chord-panel {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
    border-right: 0;
  }

  body.reader-simplified-panel-enabled .reader-chord-panel,
  body.reader-original-panel-enabled .reader-chord-panel {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr);
  }

  body.reader-chords-top .reader-song-content {
    grid-row: 3;
  }

  body.reader-chords-top .reader-chord-panel {
    grid-row: 1;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Mobile/tablet in LANDSCAPE was falling through to the generic mobile rule
   above, which collapses .reader-stage to a single grid column/row. That's
   fine for the song text alone, but .reader-chord-panel kept its desktop
   grid-column: 3 (or grid-column: 1 for chords-left) placement, which no
   longer corresponds to an explicit column once there's only one - Grid
   auto-generates an implicit column sized to content instead, so the panel
   on the right rendered as a barely-visible sliver, and on the left
   overlapped the text entirely. Landscape is wide (closer to desktop's
   aspect ratio than portrait), so it gets the same side-by-side column split
   and draggable resizer as desktop instead of portrait's stacked rows. */
@media (max-width: 980px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  body.reader-simplified-panel-enabled .reader-stage,
  body.reader-original-panel-enabled .reader-stage {
    grid-template-columns: minmax(0, 1fr) 20px minmax(220px, var(--chord-column-width, 42vw));
  }

  body.reader-chords-left.reader-simplified-panel-enabled .reader-stage,
  body.reader-chords-left.reader-original-panel-enabled .reader-stage {
    grid-template-columns: minmax(220px, var(--chord-column-width, 42vw)) 20px minmax(0, 1fr);
  }

  .reader-song-content {
    grid-column: 1;
  }

  body.reader-chords-left .reader-song-content {
    grid-column: 3;
  }

  .reader-chord-panel {
    grid-column: 3;
  }

  body.reader-chords-left .reader-chord-panel {
    grid-column: 1;
  }

  body.reader-simplified-panel-enabled .reader-stage-resizer,
  body.reader-original-panel-enabled .reader-stage-resizer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    grid-row: 1;
    grid-column: 2;
    width: 20px;
    height: 100%;
    touch-action: none;
    cursor: col-resize;
  }

  .reader-stage-resizer::after {
    width: 2px;
    height: 100%;
  }

  /* The floating auto-scroll button's bottom offset normally reserves space
     for the portrait-stacked chord panel below it (var(--mobile-diagram-panel-height)).
     In landscape the panel is beside the text instead, so that reserved gap
     is meaningless here and just floated the button oddly far up. */
  body.reader-simplified-panel-enabled .reader-controls,
  body.reader-original-panel-enabled .reader-controls {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 980px), (pointer: coarse) {
  .reader-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #reader-prev-song,
  #reader-next-song,
  #reader-stage-mode-toggle {
    display: none;
  }

  #reader-song-meta {
    display: none;
  }

  .reader-now-playing h1 {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
    text-underline-offset: 3px;
  }

  .reader-build-badge {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reader-top-actions {
    display: grid;
    grid-template-columns: 42px 42px;
    gap: 6px;
  }

  #reader-quick-toggle,
  #reader-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
  }

  #reader-settings-toggle {
    font-size: 0;
  }

  #reader-settings-toggle::before {
    content: "☰";
    font-size: 20px;
    line-height: 1;
  }

  .reader-performance-controls {
    position: fixed;
    z-index: 35;
    top: max(54px, calc(env(safe-area-inset-top) + 48px));
    right: 8px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: min(310px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
  }

  .reader-quick-menu.open {
    display: flex;
  }

  body.reader-quick-open .reader-quick-menu {
    display: flex !important;
  }

  .reader-leader-controls,
  .reader-follower-controls {
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.reader-live-follower) .reader-performance-controls.open .reader-leader-controls {
    display: flex;
  }

  body.reader-live-follower .reader-performance-controls.open .reader-follower-controls {
    display: flex;
  }

  body.reader-live-follower .reader-performance-controls.open .reader-leader-controls {
    display: none;
  }

  body:not(.reader-live-follower) .reader-performance-controls.open .reader-follower-controls {
    display: none;
  }

  .reader-performance-controls label {
    display: grid;
    gap: 5px;
  }

  .reader-performance-controls input[type="number"],
  .reader-performance-controls input[type="range"] {
    width: 100%;
  }

  .reader-performance-controls button {
    width: 100%;
  }

  .reader-stepper {
    grid-template-columns: 42px 1fr 42px;
  }

  .reader-quick-speed {
    display: grid;
  }

  .reader-settings {
    top: max(54px, calc(env(safe-area-inset-top) + 46px));
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: auto;
    width: min(228px, calc(100vw - 16px));
    padding-bottom: 20px;
  }

  .reader-browser {
    position: fixed;
    z-index: 32;
    top: max(54px, calc(env(safe-area-inset-top) + 46px));
    bottom: 0;
    left: 0;
    width: min(78vw, 360px);
    max-height: none;
    border-right: 1px solid color-mix(in srgb, var(--text) 42%, var(--line));
    border-bottom: 0;
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(-102%);
    transition: transform 180ms ease;
  }

  body.reader-browser-open .reader-browser {
    display: flex !important;
    transform: translateX(0);
  }

  .reader-browser-backdrop {
    position: fixed;
    z-index: 31;
    inset: 0;
    display: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.48);
  }

  body.reader-browser-open .reader-browser-backdrop {
    display: block;
  }

  .reader-browser-row {
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }

  .reader-song-list {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 8px 16px;
  }

  .reader-song-row {
    width: 100%;
    min-height: 54px;
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: 0;
  }

  .reader-song-content {
    padding: 12px 12px 92px;
  }

  .reader-controls {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: none;
    width: 54px;
    height: 54px;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(23, 34, 48, 0.35);
  }

  .reader-controls #reader-scroll-up,
  .reader-controls #reader-scroll-down,
  .reader-controls output {
    display: none;
  }

  #reader-scroll-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  #reader-scroll-toggle::before {
    content: "↓";
    color: var(--text);
    font-size: 28px;
    line-height: 1;
  }
}

/* Tablets: touch input but enough width for a roomier settings panel than phones get. */
@media (min-width: 620px) and (pointer: coarse) {
  .reader-settings {
    width: min(360px, calc(100vw - 24px));
  }
}