:root {
  color-scheme: light dark;
  --app: light-dark(#f7f5f1, #232330);
  --paper: light-dark(#fffefa, #2b2b3a);
  --ink: light-dark(#292638, #f5f1f8);
  --quiet: light-dark(#635d70, #c0b9cc);
  --edge: light-dark(#e1dce4, #454456);
  --rule: light-dark(#9c95a5, #8b8599);
  --music: light-dark(#504c61, #cbc4d8);
  --wash: light-dark(#efebfb, #3e345b);
  --key: light-dark(#5543a3, #cfbfff);
  --note: light-dark(#4a358f, #e3d6ff);
  --button: light-dark(#54419c, #cbb9ff);
  --button-ink: light-dark(#fff, #231641);
  --beat: light-dark(#b83e36, #ff9384);
  --pitch-trace: light-dark(#7435ae, #cea5ff);
  --pitch-guide: light-dark(#378550, #8acb9e);
  --backdrop: light-dark(#31254166, #0e0c18a8);
  font: 400 14px/1.3 system-ui, sans-serif;
  color: var(--ink);
  background: var(--app);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, select, input { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: default; opacity: .44; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--key);
  outline-offset: 2px;
}
button[aria-pressed="true"] {
  color: var(--note);
  border-color: var(--key);
  background: var(--wash);
  font-weight: 650;
}
.choir-symbols { position: absolute; width: 0; height: 0; }
.choir-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.choir-app {
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  max-width: 920px;
  margin-inline: auto;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
}
.choir-header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 5px 2px 6px;
}
.choir-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  flex: none;
}
.choir-heading { flex: 1; min-width: 0; }
.choir-heading-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.choir-brand {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .015em;
}
.choir-brand, .choir-header h1 {
  -webkit-user-select: none;
  user-select: none;
}
.choir-header h1 {
  margin: 0;
  font: 400 clamp(19px, 5.25vw, 27px)/1.09 Georgia, serif;
  overflow-wrap: anywhere;
  letter-spacing: -.034em;
}
.choir-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 3px;
  min-height: 24px;
  padding: 0 4px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  color: var(--note);
  background: var(--paper);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.choir-pdf .choir-icon { width: 12px; height: 12px; }
.choir-pdf:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
.choir-voices {
  display: grid;
  grid-template-columns: repeat(var(--voice-count, 4), minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}
.choir-voices button, .choir-control {
  min-height: 44px;
  padding: 0 5px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 550;
}
.choir-voices button {
  min-height: 22px;
  padding: 1px 3px;
  font-size: clamp(11px, 3.25vw, 13px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.choir-voices button[aria-pressed="true"] {
  background: var(--wash);
  border-color: var(--key);
  font-weight: 650;
}
.choir-score {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.choir-score-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  padding-inline: 1px 4px;
  border-bottom: 1px solid var(--edge);
  font-size: 12px;
  color: var(--quiet);
}
.choir-bar-nav, .choir-view-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.choir-bar-nav span {
  min-width: 28px;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.choir-bar-nav button, .choir-focus, .choir-size button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  white-space: nowrap;
}
.choir-bar-nav button, :is([data-action="close-mix"], [data-action="close-sections"]) {
  width: 44px;
  display: grid;
  place-items: center;
  padding: 0;
}
.choir-focus { padding: 0 5px; }
.choir-size { position: relative; isolation: isolate; display: flex; align-items: center; }
.choir-size::before, .choir-size::after { content: ''; position: absolute; inset-block: 8px; z-index: -1; }
.choir-size::before { inset-inline: 0; border: 1px solid var(--edge); border-radius: 7px; background: var(--paper); }
.choir-size::after { inset-inline-start: 50%; border-inline-start: 1px solid var(--edge); }
.choir-size button { width: 36px; padding: 0; display: grid; place-items: center; }
.choir-size-icon {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  height: 27px;
  color: var(--ink);
  line-height: 25px;
}
.choir-size-icon span { font-size: 11px; }
[data-action="size-down"] b { font-size: 12px; }
[data-action="size-up"] b { font-size: 17px; }
.choir-tempo { position: relative; }
.choir-tempo > .choir-icon {
  position: absolute;
  inset-inline-start: 6px;
  pointer-events: none;
}
.choir-tempo select {
  background: transparent;
  border: 0;
  width: 100%;
  min-width: 5.5em;
  min-height: 28px;
  padding-inline: 22px 0;
  font-size: max(16px, 1em);
  font-weight: 650;
  border-radius: 6px;
}
.choir-score-window {
  grid-row: 3;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.choir-score-window:focus-visible { outline: 2px solid var(--key); outline-offset: -2px; }
.choir-score-track { position: relative; max-width: 100%; }
.choir-system { position: relative; }
.choir-system::after {
  content: '';
  position: absolute;
  inset: auto 8px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--edge), var(--rule) 40%);
  pointer-events: none;
}
.choir-system:last-child::after { border: 0; }
.choir-notation { display: block; width: 100%; }
.choir-bar-targets { position: absolute; inset: 0; pointer-events: none; }
.choir-bar-targets button {
  position: absolute;
  inset-block: 0;
  pointer-events: auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.choir-bar-targets button:focus-visible { outline-offset: -3px; }
.choir-notation .staff-rule { stroke: var(--rule); stroke-width: .73; }
.choir-notation .score-rule { stroke: var(--music); stroke-width: .95; }
.choir-notation .end-rule { stroke-width: 2.2; }
.choir-notation .staff-wash { fill: var(--wash); }
.choir-notation .staff-label { fill: var(--quiet); font-weight: 650; }
.choir-notation .measure-number { fill: var(--quiet); font-size: 10px; font-weight: 650; }
.choir-notation .pulse-tick { fill: var(--rule); }
.choir-notation .clef, .choir-notation .meter, .choir-notation .accidental, .choir-notation .repeat-dot { fill: var(--music); }
.choir-notation .meter, .choir-notation .accidental { font-family: Georgia, serif; }
.choir-notation .meter { font-weight: 700; }
.choir-notation .notation-event { color: var(--music); }
.choir-notation .my-voice .notation-event { color: var(--note); }
.choir-notation .my-voice .staff-label { fill: var(--note); }
.choir-notation .note-stroke { stroke: currentColor; stroke-width: 1.05; }
.choir-notation .note-half { fill: none; stroke: currentColor; stroke-width: 1.35; }
.choir-notation :is(.note-quarter, .rest-shape, .flag, .note-dot) { fill: currentColor; }
.choir-notation .beam { stroke: var(--music); }
.choir-notation .my-voice .beam { stroke: var(--note); }
.choir-notation :is(.slur, .note-tie, .hairpin, .lyric-extension) { stroke: var(--music); stroke-width: 1; fill: none; }
.choir-notation .my-voice :is(.slur, .note-tie, .hairpin, .lyric-extension) { stroke: var(--note); }
.choir-notation .note-focus { fill: var(--paper); stroke: var(--key); stroke-width: 1.15; visibility: hidden; }
.choir-notation .notation-event:has(.note-half) .note-focus { fill: none; }
.choir-notation .current-note .note-focus { visibility: visible; }
.choir-notation .lyric { fill: var(--music); }
.choir-notation .my-voice .lyric { fill: var(--note); }
.choir-notation :is(.score-mark, .ending-label, .pass-label) { fill: var(--ink); }
.choir-notation .mark-level { font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.choir-notation .mark-rehearsal { font-weight: 700; }
.choir-notation .rehearsal-box { fill: none; stroke: var(--rule); stroke-width: .8; }
.choir-notation .ending-label, .choir-notation .pass-label { font-size: 9px; font-weight: 650; }
.choir-notation .current-note .lyric { text-decoration: underline; }
.choir-notation .playhead { color: var(--beat); pointer-events: none; }
.choir-app:not([data-pitch-tracking]) :is(.pitch-guide, .pitch-overlay) { display: none; }
.choir-notation :is(.pitch-guide, .pitch-trace) { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.choir-notation .pitch-guide { stroke: var(--pitch-guide); stroke-opacity: .76; }
.choir-notation .pitch-trace { stroke: var(--pitch-trace); stroke-opacity: .50; }
.choir-notation .pitch-dot { fill: var(--pitch-trace); stroke: var(--paper); stroke-width: .65; pointer-events: none; }
.choir-notation .pitch-dot[data-clipped] { fill: var(--paper); stroke: var(--pitch-trace); }
.choir-controls {
  --drawer-motion: .3s cubic-bezier(.4, 0, .2, 1);
  --chevron-fade: .5s ease;
  position: relative;
  z-index: 2;
  padding: 3px 0 4px;
  display: grid;
}
.choir-controls :is(button, select) { touch-action: manipulation; }
.choir-progress { position: relative; }
.choir-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  color: var(--quiet);
  padding: 0 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.choir-position > :first-child { color: var(--ink); font-weight: 650; }
.choir-seek-area {
  --thumb-size: 16px;
  --seek-position: 0%;
  --played-from: var(--loop-start, 0%);
  --played-to: clamp(var(--played-from), var(--seek-position), var(--loop-end, 100%));
  --colored-to: var(--loop-end, var(--played-to));
  --loop-fill: color-mix(in srgb, var(--key) 44%, var(--paper));
  position: relative;
}
.choir-seek-scale {
  position: absolute;
  inset: 0 calc(var(--thumb-size) / 2);
  pointer-events: none;
}
.choir-seek-rail {
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -50%;
  height: 7px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--rule);
  background: linear-gradient(to right,
    var(--paper) var(--played-from),
    var(--key) var(--played-from) var(--played-to),
    var(--loop-fill) var(--played-to) var(--colored-to),
    var(--paper) var(--colored-to));
}
.choir-seek-loop {
  position: absolute;
  inset: 0 calc(100% - var(--loop-end)) 0 var(--loop-start);
  color: var(--note);
}
.choir-seek-loop::before, .choir-seek-loop::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  translate: -50% -50%;
  width: 1px;
  height: 11px;
  background: currentColor;
}
.choir-seek-loop::after { left: 100%; }
.choir-seek-loop > span {
  position: absolute;
  bottom: 1px;
  left: 50%;
  translate: -50% 0;
  width: max(2px, 100%);
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.choir-seek {
  position: relative;
  display: block;
  width: 100%;
  height: 23px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  touch-action: none;
}
.choir-seek::-webkit-slider-runnable-track { height: var(--thumb-size); background: transparent; }
.choir-seek::-moz-range-track { height: var(--thumb-size); background: transparent; }
.choir-seek::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--key);
}
.choir-seek::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--key);
}
.choir-position [data-ui="time"] { grid-column: 3; white-space: nowrap; }
.choir-section-trigger {
  min-height: 19px;
  padding: 0 6px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
  color: var(--note);
  font-size: 11px;
  font-weight: 650;
}
.choir-rehearsal-ticks {
  position: relative;
  height: 15px;
  margin: 0 8px 1px;
}
.choir-marker {
  position: absolute;
  top: 0;
  left: calc(var(--at) + var(--label-shift, 0px));
  transform: translateX(-50%);
  min-width: min(16px, var(--label-max, 16px));
  max-width: var(--label-max, none);
  height: 16px;
  padding: 3px 0 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--quiet);
  white-space: nowrap;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}
.choir-marker span { display: block; overflow: hidden; text-overflow: ellipsis; }
.choir-marker::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - var(--label-shift, 0px));
  width: 1px;
  height: 4px;
  background: var(--rule);
  pointer-events: none;
}
.choir-marker[aria-current] { color: var(--note); background: var(--wash); }
.choir-marker[aria-current]::before { width: 2px; background: var(--key); }
.choir-flap {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: 1;
}
.choir-flap::before, .choir-flap > * {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
}
.choir-flap::before {
  content: '';
  z-index: 1;
  width: 40px;
  height: 24px;
  border: 1px solid var(--edge);
  border-bottom-color: transparent;
  border-radius: 13px 13px 5px 5px;
  background: var(--app);
  pointer-events: none;
  transition: height var(--drawer-motion),
    border-radius var(--drawer-motion), background var(--drawer-motion), border-color var(--drawer-motion);
}
.choir-controls[data-collapsed] .choir-flap::before {
  height: 40px;
  border-color: transparent;
  border-radius: 50%;
  background: var(--button);
}
.choir-drawer-toggle, .choir-quick-play, .choir-play-flight {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
}
:is(.choir-drawer-toggle, .choir-quick-play, .choir-transport .choir-play, .choir-play-flight) {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.choir-drawer-toggle {
  z-index: 2;
  width: 44px;
  height: 30px;
  border-radius: 12px;
  background: transparent;
  color: color-mix(in srgb, var(--quiet) 68%, var(--app));
  transition: transform var(--drawer-motion), width var(--drawer-motion),
    background var(--drawer-motion), box-shadow var(--drawer-motion), opacity var(--chevron-fade);
}
.choir-drawer-toggle .choir-icon {
  width: 26px;
  height: 18px;
  transform: translateY(3px);
  transition: transform var(--drawer-motion), width var(--drawer-motion);
}
.choir-controls[data-collapsed] .choir-drawer-toggle {
  width: 28px;
  transform: translate(-40px, -15px);
  background: var(--app);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.choir-controls[data-collapsed]:not([data-chevron-visible]) .choir-drawer-toggle:not(:focus-visible) { opacity: 0; }
.choir-drawer-toggle[data-pinned]::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  translate: -50% -50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--note);
}
.choir-controls[data-collapsed] .choir-drawer-toggle .choir-icon {
  width: 15px;
  transform: rotate(180deg);
}
.choir-quick-play {
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--button-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-out, visibility 0s 120ms;
}
.choir-quick-play .choir-icon { width: 20px; height: 20px; }
.choir-controls[data-collapsed] .choir-quick-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 75ms, 0s;
}
.choir-play-flight {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-ink);
  opacity: 0;
  pointer-events: none;
}
.choir-controls:is([data-play-flight], [data-drawer-scrubbing]) .choir-play-flight {
  pointer-events: auto;
  cursor: pointer;
}
.choir-drawer {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--drawer-motion), visibility var(--drawer-motion);
}
.choir-controls[data-collapsed] .choir-drawer {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.choir-controls[data-collapsed] .choir-transport .choir-play { visibility: hidden; }
.choir-controls[data-play-flight]:not([data-collapsed]) .choir-transport .choir-play { opacity: 0; }
.choir-controls[data-drawer-scrubbing] {
  --drawer-motion: 0s;
  --chevron-fade: 0s;
}
.choir-controls[data-drawer-scrubbing] .choir-drawer {
  grid-template-rows: calc(var(--drawer-height) * var(--drawer-progress));
  visibility: visible;
}
.choir-controls[data-drawer-scrubbing] .choir-flap::before {
  height: calc(40px - 16px * var(--drawer-progress));
  border-radius: calc(20px - 7px * var(--drawer-progress)) calc(20px - 7px * var(--drawer-progress))
    calc(20px - 15px * var(--drawer-progress)) calc(20px - 15px * var(--drawer-progress));
  background: color-mix(in srgb, var(--button), var(--app) calc(100% * var(--drawer-progress)));
  border-color: color-mix(in srgb, transparent, var(--edge) calc(100% * var(--drawer-progress)));
  border-bottom-color: transparent;
}
.choir-controls[data-drawer-scrubbing] .choir-drawer-toggle {
  width: calc(28px + 16px * var(--drawer-progress));
  transform: translate(calc(-40px * (1 - var(--drawer-progress))), calc(-15px * (1 - var(--drawer-progress))));
  background: color-mix(in srgb, var(--app), transparent calc(100% * var(--drawer-progress)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge), transparent calc(100% * var(--drawer-progress)));
}
.choir-controls[data-drawer-scrubbing] .choir-drawer-toggle .choir-icon {
  width: calc(15px + 11px * var(--drawer-progress));
  transform: translateY(calc(3px * var(--drawer-progress))) rotate(calc(180deg * (1 - var(--drawer-progress))));
}
.choir-controls[data-drawer-scrubbing] .choir-quick-play { transition: none; }
.choir-controls[data-drawer-scrubbing] :is(.choir-quick-play .choir-icon, .choir-transport .choir-play) { opacity: 0; }
.choir-controls[data-drawer-scrubbing] .choir-play-flight { z-index: 2; }
.choir-drawer-content {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}
.choir-transport, .choir-settings {
  display: grid;
  gap: 5px;
  justify-self: center;
  width: 66.6667%;
  min-width: min-content;
}
.choir-transport { grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1.48fr) minmax(min-content, 1fr) auto; margin-top: 4px; }
.choir-settings { grid-template-columns: minmax(min-content, 1.35fr) minmax(min-content, 1fr) 32px; margin-bottom: 4px; }
.choir-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
:is(.choir-transport, .choir-settings) > .choir-control {
  min-height: 30px;
  padding: 0 2px;
  gap: 3px;
}
.choir-transport > .choir-pitch-toggle { padding-inline: 5px; }
.choir-pitch-toggle[data-on] { color: var(--note); background: var(--wash); border-color: var(--key); }
.choir-pitch-switch {
  display: flex;
  align-items: center;
  flex: none;
  width: 20px;
  height: 12px;
  padding: 2px;
  border-radius: 9px;
  background: var(--rule);
  transition: background-color .18s ease;
}
.choir-pitch-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); transition: transform .18s ease; }
.choir-pitch-toggle[data-on] .choir-pitch-switch { background: var(--pitch-trace); }
.choir-pitch-toggle[data-on] .choir-pitch-thumb { transform: translateX(8px); }
.choir-pitch-toggle[data-pending] .choir-pitch-switch { opacity: .77; }
.choir-pitch-hint {
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: min(242px, 100%);
  margin: 0;
  padding: 7px 10px;
  transform: translateX(-50%);
  border: 1px solid var(--key);
  border-radius: 8px;
  background: var(--paper);
  color: var(--note);
  box-shadow: 0 3px 12px var(--backdrop);
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}
.choir-pitch-hint::after {
  content: '';
  position: absolute;
  top: calc(100% - 4px);
  left: var(--pitch-hint-arrow, 50%);
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border: solid var(--key);
  border-width: 0 1px 1px 0;
  background: var(--paper);
}
.choir-follow {
  position: absolute;
  inset: auto 9px 9px auto;
  z-index: 1;
  min-height: 36px;
  font-size: 12px;
  padding-inline: 8px 12px;
  border-radius: 99px;
  border-color: transparent;
  background: var(--button);
  color: var(--button-ink);
  box-shadow: 0 2px 8px var(--backdrop);
}
.choir-play, .choir-done {
  color: var(--button-ink);
  border-color: transparent;
  background: var(--button);
  font-weight: 650;
}
.choir-caret { width: 13px; height: 13px; color: var(--quiet); }
.choir-audio-message {
  margin: 0 2px;
  font-size: 12px;
  color: var(--quiet);
}
.choir-dialog {
  position: fixed;
  inset: auto 0 max(8px, env(safe-area-inset-bottom));
  width: min(398px, calc(100% - 16px));
  max-width: none;
  max-height: calc(100% - 16px);
  margin: 0 auto;
  padding: 7px 12px 12px;
  border: 1px solid var(--edge);
  border-radius: 15px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 10px 35px var(--backdrop);
}
.choir-dialog::backdrop { background: var(--backdrop); }
.choir-mix-head { display: flex; align-items: center; justify-content: space-between; }
.choir-mix-head h2 { margin: 0; font: 400 23px/1.1 Georgia, serif; }
.choir-calibration-heading, .choir-calibration-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.choir-calibration-heading { font-size: 13px; font-weight: 650; }
.choir-calibration-heading output { color: var(--note); font-variant-numeric: tabular-nums; }
.choir-calibration-slider { display: block; width: 100%; height: 30px; margin: 2px 0 0; accent-color: var(--key); }
.choir-calibration-scale, .choir-calibration-help { color: var(--quiet); font-size: 11px; }
.choir-calibration-scale { position: relative; }
.choir-calibration-scale > :nth-child(2) { position: absolute; left: 20%; translate: -50% 0; }
.choir-calibration-help { margin: 8px 0 0; }
.choir-pitch-settings { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--edge); }
.choir-pitch-settings h3 { margin: 0 0 5px; font-size: 14px; }
.choir-pitch-field {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 650;
}
.choir-pitch-field select { min-height: 35px; width: 100%; min-width: 0; padding: 3px; border: 1px solid var(--edge); border-radius: 7px; background: var(--paper); font-size: 16px; }
.choir-find-mics { min-height: 32px; margin-top: 5px; font-size: 12px; }
.choir-pitch-help, .choir-pitch-mic-status { margin: 5px 0 0; color: var(--quiet); font-size: 11px; }
.choir-pitch-mic-status:empty { display: none; }
:is([data-action="close-mix"], [data-action="close-sections"]) { min-height: 44px; border: 0; border-radius: 8px; background: transparent; }
.choir-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.choir-track-list { margin: 7px 0; }
.choir-piano-credits {
  display: block;
  margin-top: 6px;
  color: var(--quiet);
  font-size: 11px;
  text-align: center;
}
.choir-track {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 5px;
  border-bottom: 1px solid var(--edge);
}
.choir-track:last-child { border-bottom: 0; }
.choir-track > span:nth-child(2) { color: var(--note); font-size: 11px; }
.choir-track input { width: 18px; height: 18px; margin: 0 0 0 auto; accent-color: var(--key); }
.choir-done { width: 100%; }
.choir-section-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.choir-section-jump {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 2px;
  padding-inline: 10px;
}
.choir-section-jump > small { color: var(--quiet); font-weight: 400; font-size: 10px; }
.choir-section-jump[aria-current] { color: var(--note); background: var(--wash); border-color: var(--key); }
.choir-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 620px) {
  .choir-app { padding-inline: 16px; }
  .choir-header h1 { font-size: 30px; }
  .choir-drawer-content { grid-template-columns: 1.35fr 1fr; gap: 8px; }
  .choir-transport, .choir-settings { margin-block: 4px; }
}
@media (max-width: 355px) {
  .choir-control { gap: 4px; }
  .choir-settings { gap: 3px; }
  .choir-settings > [data-action="mix"] { font-size: 12px; }
  .choir-bar-nav button { width: 35px; }
  .choir-focus { font-size: 11.5px; padding-inline: 3px; }
  .choir-brand { font-size: 10px; }
  .choir-pdf { font-size: 10px; }
  .choir-position { gap: 4px; font-size: 11px; }
  .choir-section-trigger { padding-inline: 4px; font-size: 10px; }
  .choir-flap { left: calc(50% - 6px); }
  .choir-marker { min-width: min(14px, var(--label-max, 14px)); }
}
@media (max-width: 390px) {
  .choir-follow { bottom: 31px; }
}
@media (max-width: 619px) and (pointer: coarse) {
  .choir-follow {
    bottom: 3px;
    gap: 3px;
    font-size: 10px;
    padding-inline: 5px 7px;
  }
  .choir-follow .choir-icon { width: 12px; height: 12px; }
}
@media (max-height: 600px) {
  .choir-header { min-height: 48px; padding-block: 3px; }
  .choir-mark { width: 40px; height: 40px; }

}

.choir-focus { display: inline-flex; align-items: center; gap: 5px; }
.choir-switch-track {
  position: relative;
  width: 23px;
  height: 14px;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--edge);
}
.choir-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quiet);
  transition: transform 120ms ease-out;
}
.choir-focus[aria-checked="true"] { color: var(--note); font-weight: 650; }
.choir-focus[aria-checked="true"] .choir-switch-track { background: var(--button); border-color: var(--button); }
.choir-focus[aria-checked="true"] .choir-switch-track::after { transform: translateX(9px); background: var(--button-ink); }
.choir-locked-voices {
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  min-height: 22px;
  padding-inline: 11px;
  color: var(--quiet);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 9px;
  font-size: 13px;
}
.choir-app.locked :is(.choir-controls, .choir-score-tools) { opacity: .55; }
.choir-unlock {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  overflow: auto;
  padding: 12px;
  transition: opacity 190ms ease;
}
.choir-unlock.leaving { opacity: 0; }
.choir-unlock-form { display: grid; gap: 7px; width: min(100%, 270px); }
.choir-unlock-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: var(--wash);
  color: var(--note);
}
.choir-unlock.accepted .choir-unlock-icon { animation: choir-unlocked 230ms ease-out; }
.choir-unlock-form h2 { margin: 1px 0 3px; text-align: center; font: 400 21px/1.12 Georgia, serif; }
.choir-unlock-form label { color: var(--quiet); font-size: 12px; font-weight: 650; }
.choir-unlock-form input, .choir-loop-field :is(input, select) {
  width: 100%;
  min-height: 38px;
  min-width: 0;
  padding: 0 7px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--paper);
  font-size: 16px;
}
.choir-unlock-status { margin: 0; min-height: 15px; text-align: center; color: var(--quiet); font-size: 12px; }
.choir-unlock:has(input[aria-invalid]) .choir-unlock-status { color: var(--beat); }
.choir-unlock.accepted .choir-unlock-status { color: var(--note); font-weight: 650; }
.choir-app.just-unlocked .choir-score-track { animation: choir-score-enter 240ms ease-out; }
@keyframes choir-unlocked { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
@keyframes choir-score-enter { from { opacity: 0; } to { opacity: 1; } }

.choir-dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.choir-loop-dialog { overflow-y: auto; }
.choir-loop-modes { display: grid; grid-template-columns: 1fr 1fr 1.22fr; gap: 5px; margin-bottom: 8px; }
.choir-loop-modes .choir-control { min-height: 39px; }
.choir-loop-bounds, .choir-loop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choir-saved-pick { width: 100%; margin-top: 7px; }
.choir-saved-actions { grid-template-columns: minmax(0, 1fr) 44px; }
.choir-loop-field { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 650; }
.choir-loop-field + .choir-loop-bounds { margin-top: 7px; }
.choir-loop-status, .choir-loop-help, .choir-loop-feedback {
  margin: 5px 0 7px;
  color: var(--quiet);
  font-size: 12px;
}
.choir-loop-feedback { color: var(--beat); }
.choir-loop-actions, .choir-loop-off { margin-top: 7px; }
[data-action="loop"][data-active="true"] { color: var(--note); background: var(--wash); border-color: var(--key); }
.choir-saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  margin-bottom: 6px;
}
.choir-saved-use { justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; }
.choir-pick-banner {
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin: 3px 5px 0;
  padding: 2px 7px;
  background: var(--paper);
  border: 1px solid var(--key);
  border-radius: 7px;
  color: var(--note);
  font-size: 12px;
  box-shadow: 0 2px 6px var(--backdrop);
}
.choir-pick-banner button { border: 0; background: transparent; color: var(--note); min-height: 28px; }
@media (max-width: 355px) {
  .choir-bar-nav button { width: 31px; }
  .choir-focus { gap: 3px; }
  .choir-switch-track { width: 20px; }
  .choir-focus[aria-checked="true"] .choir-switch-track::after { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .choir-controls { --drawer-motion: 0s; --chevron-fade: 0s; }
  .choir-controls .choir-quick-play { transition: none; }
  .choir-pitch-switch, .choir-pitch-thumb { transition: none; }
  .choir-switch-track::after, .choir-unlock { transition: none; }
  .choir-unlock.accepted .choir-unlock-icon, .choir-app.just-unlocked .choir-score-track { animation: none; }
}
.choir-loop-pass { margin-top: 5px; }