:root {
  --on-accent: #fff8ff;
  --bg: #f5f0f7; --surface: #fdfafd; --surface-2: #eae1f1;
  --text: #403449; --muted: #766580; --line: #dcd0e4;
  --accent: #79558c; --accent-soft: #e9dcf1; --wave-rest: #bba5c8;
  --plus: #75518a; --plus-soft: #eee3f4; --minus: #466659; --minus-soft: #e4eee7;
  --orig: #716047; --orig-soft: #f1ebdf; --radius: 22px;
  --shadow: 0 5px 24px rgb(72 44 89 / .035);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --on-accent: #31203d;
    --bg: #24212c; --surface: #2e2838; --surface-2: #393044;
    --text: #f0e7f4; --muted: #bfacc9; --line: #51425f;
    --accent: #d1ace5; --accent-soft: #4b3858; --wave-rest: #796688;
    --plus: #d6b2ec; --plus-soft: #44334f; --minus: #b0d7c0; --minus-soft: #2d4037;
    --orig: #dcc7a2; --orig-soft: #403a2d; --shadow: none;
  }
}
html { zoom: var(--interface-scale, 1); }
body { font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; }
[hidden] { display: none !important; }
button, a, input, select, [contenteditable] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.studio-header { max-width: 1040px; margin: auto; padding: 28px 24px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.studio-brand { display: flex; align-items: center; gap: 12px; font: 500 31px/1.1 'Cormorant Garamond', Georgia, serif; }
.studio-brand { color: var(--text); text-decoration: none; }
.studio-brand:hover { color: var(--accent); }
.dialog-field { display: grid; gap: 8px; font-size: 14px; }
.dialog-status { min-height: 24px; margin-top: 12px !important; overflow-wrap: anywhere; }
.format-main, .format-color-presets, .format-color-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar-fmt { align-items: stretch; }
.format-main { flex-basis: 100%; }
.format-color-group { min-width: 0; flex: 1 1 240px; display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.format-color-group legend { color: var(--text); font-size: 12px; font-weight: 600; padding: 0 5px; }
.format-swatch { display: block; width: 22px; height: 22px; border: 1px solid rgb(0 0 0 / .15); border-radius: 50%; }
.format-color-picker { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.format-color-value { min-width: 0; flex: 1 1 150px; width: 150px; font-size: 13px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.lyrics mark, .lyrics-edit mark { color: inherit; }
.studio-brand svg { width: 29px; height: 34px; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.studio-brand span { display: block; margin-top: 7px; font: 500 10px/1.5 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.studio-motto { display: flex; gap: .35em; font-size: 12px; color: var(--muted); }
.studio-motto>span { white-space: nowrap; }
.interface-scale-control { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 13px; }
.interface-scale { padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); max-width: 90px; }
main { max-width: 1040px; padding: 30px 24px 64px; }
body.has-player main, body.has-player:has(.player.with-metro) main { padding-bottom: calc(var(--player-height, 240px) + 48px); }
h1 { font: 500 clamp(38px, 5.5vw, 56px)/1.08 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; margin-bottom: 10px; }
.page-head { margin-bottom: 28px; align-items: center; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; margin-bottom: 9px; }
.page-phrase { color: var(--accent); font: italic 500 23px/1.4 'Cormorant Garamond', Georgia, serif; margin: 0 0 9px; }
.page-head .muted { font-size: 12px; }
.btn { font-size: 13px; padding: 10px 16px; border-radius: 12px; }
.btn.small { font-size: 12px; padding: 8px 12px; }
.btn.primary { color: #fff8ff; }
@media(prefers-color-scheme:dark) { .btn.primary { color: #31203d; } }
.search { background: var(--surface); padding: 14px 17px; border-radius: 14px; font-size: 14px; }
.sort { font-size: 12px; padding: 0 12px; max-width: 150px; }
.toolbar { gap: 12px; margin-bottom: 22px; }
.students { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.student { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding: 16px; gap: 3px 12px; border-color: var(--line); position: relative; align-items: start; }
.student-mark { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; background: var(--surface-2); color: var(--accent); font: 500 21px 'Cormorant Garamond', Georgia, serif; border-radius: 50% 50% 8px 50%; }
.student-name { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-weight: 500; font-size: 16px; line-height: 1.4; }
.student>p { grid-column: 2; margin: 0; font-size: 12px; }
.student>.student-actions { grid-column: 1 / -1; align-self: end; margin-top: 9px; gap: 6px; }
.student>.student-actions .btn { min-height: 40px; padding: 8px 10px; }
.student-actions { margin-top: 14px; gap: 8px; }
.badge { font-size: 10px; font-weight: 600; }
.hint { font-size: 11px; margin-top: 26px; max-width: 650px; }
.archive-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.archive-tabs [aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--accent); }
.archive-notice { padding: 14px 16px; margin: 0 0 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.archive-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.archive-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.archive-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.archive-dialog p { font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.songs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.song { min-width: 0; padding: 23px; border-radius: 22px; transition: border-color .2s; }
.song:has(.reading:not([hidden])), .song:has(.editor:not([hidden])) { grid-column: 1 / -1; }
.song.selected-song { border-color: var(--accent); }
.song-head { align-items: center; margin-bottom: 16px; gap: 7px; }
.song h2 { font: 500 29px/1.15 'Cormorant Garamond', Georgia, serif; overflow-wrap: anywhere; }
.owner { font-size: 11px; }
.variants { gap: 8px; }
.chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; position: relative; padding: 10px 12px 10px 28px; border-radius: 12px; font-size: 12px; flex: 1 1 125px; min-width: 0; text-align: left; }
.chip::before { position: absolute; left: 12px; top: 14px; border-left-width: 5px; border-top-width: 4px; border-bottom-width: 4px; }
.chip.active { box-shadow: none; }
.variant-label { font-weight: 600; overflow-wrap: anywhere; }
.variant-help { font-size: 10px; font-weight: 400; line-height: 1.4; }
.impulse { margin: 0 0 15px; font-size: 12px; }
.impulse.empty { font-size: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.impulse.required { border: 1px solid var(--line); background: var(--surface-2); padding: 12px; }
.impulse-input { font-size: 13px; }
.impulse-hint { font-size: 11px; }
.impulse-word { font-weight: 500; }
.notes { font-size: 13px; border-left-width: 2px; padding: 12px 14px; }
.song-links { justify-content: space-between; align-items: center; gap: 10px; margin-top: 17px; }
.song-links>.link-btn { margin: 0; font-size: 11px; color: var(--muted); }
.reading-modes { display: flex; flex-wrap: wrap; gap: 5px; }
.reading-mode { border: 1px solid var(--line); background: transparent; padding: 7px 10px; border-radius: 9px; font-size: 11px; cursor: pointer; }
.reading-mode[aria-pressed="true"] { background: var(--accent); color: #fff8ff; border-color: var(--accent); }
.reading { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); gap: 24px; }
.lyrics { margin: 0; padding: 20px 22px; border-radius: 15px; background: var(--surface-2); white-space: normal; min-width: 0; }
.lyrics-text { white-space: pre-wrap; font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
.reading-appearance { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.lyrics-font { border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); padding: 7px 11px; font-family: 'Manrope', system-ui, sans-serif; }
:root[data-lyrics-font="book"] .lyrics-text { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.85; }
:root[data-lyrics-font="clear"] .lyrics-text { font-family: Arial, Helvetica, sans-serif; line-height: 1.85; }
:root[data-lyrics-font="spacious"] .lyrics-text { font-family: Verdana, system-ui, sans-serif; font-size: 17px; line-height: 2; letter-spacing: .015em; }
.ensemble-hint { margin: -10px 0 24px; font-size: 12px; line-height: 1.6; max-width: 560px; }
.pane-title { font: 600 10px/1.5 'Manrope', sans-serif; letter-spacing: .12em; margin: 0 0 16px; }
.reading .collapse { grid-column: 1 / -1; justify-self: start; margin: 0; font-size: 11px; color: var(--muted); }
.teacher-tools { margin-bottom: 26px; }
.space-switcher { margin-bottom: 24px; }
.space-links { display: flex; flex-wrap: wrap; gap: 8px; }
.space-links a { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
.space-links a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.space-kind { color: var(--muted); font-size: 10px; font-weight: 400; }
.space-members { display: grid; gap: 8px; margin-bottom: 18px; }
.space-member { display: flex; gap: 10px; align-items: center; padding: 9px 0; overflow-wrap: anywhere; }
.space-member input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.space-member .small { margin-left: auto; }
.field, .lyrics-edit { background: var(--surface); }
.editor-footer { border-radius: 14px; }
body.has-player .editor-footer, body.has-player:has(.player.with-metro) .editor-footer { bottom: calc(var(--player-height, 240px) + 8px); }
.standalone-widget { margin: 0 0 0; background: var(--surface-2); border-top: 1px solid var(--line); box-shadow: 0 3px 12px rgb(72 44 89 / .04); }
.standalone-widget { padding-top: 0; }
@media (display-mode: standalone) { .standalone-widget { padding-top: env(safe-area-inset-top); } }
.standalone-inner { max-width: 1040px; padding: 12px 24px; gap: 8px 18px; }
.standalone-title strong { font: 600 22px 'Cormorant Garamond', Georgia, serif; }
.standalone-title>.small { font-size: 10px; }
.standalone-pattern { max-width: 210px; width: 190px; border-radius: 10px; background: var(--surface); font-size: 12px; height: 36px; }
.standalone-bpm { height: 36px; font-size: 15px; background: var(--surface); border-radius: 10px; }
.standalone-controls .btn { min-width: 95px; }
.m-btn { border-radius: 9px; height: 34px; font-size: 12px; }
.standalone-controls .m-vol { width: 72px; }
.player { border: 1px solid var(--line); border-bottom: 0; background: var(--surface); width: min(992px, calc(100% - 32px)); margin: auto; border-radius: 22px 22px 0 0; padding: 14px 22px calc(13px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 25px rgb(61 37 78 / .07); grid-template-areas: "info controls extra" "wave wave wave" "time time time" "metro metro metro"; gap: 8px 16px; }
.p-title { font: 600 22px 'Cormorant Garamond', Georgia, serif; }
.p-sub { font-size: 10px; }
.p-play { width: 43px; height: 43px; }
.p-btn { width: 34px; height: 34px; }
.p-btn { padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-btn svg { display: block; flex-shrink: 0; }
.p-play .i-play { transform: translateX(1px); }
.p-play .i-pause { transform: none; }
.p-btn .skip-icon { width: 29px; height: 29px; fill: none; }
.skip-ring { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.skip-arrow { fill: currentColor; }
.skip-number { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-btn.small { width: 30px; height: 30px; }
.p-extra { flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.p-speed { font-size: 11px; }
.p-impulse { font-size: 11px; }
.p-timeline { font-size: 10px; gap: 12px; }
.p-waveform { grid-area: wave; position: relative; height: 44px; }
.waveform-canvas { display: block; width: 100%; height: 44px; cursor: pointer; }
.song-wave { margin: 16px 0 0; }
.song-wave .waveform-canvas { height: 48px; }
.waveform-status { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--muted); pointer-events: none; }
.waveform-status:empty { display: none; }
.waveform-status { pointer-events: auto; width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11px; color: var(--muted); }
.waveform-status:focus-visible { outline: 2px solid var(--accent); border-radius: 8px; }
.song-index { grid-template-columns: 1fr; }
.songs.song-index { gap: 8px; }
.song.song-index-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; min-height: 64px; border-radius: 16px; color: var(--text); text-decoration: none; }
.song-index-item:hover { border-color: var(--accent); }
.song-head h1 { font-size: 30px; margin: 0; }
.song-index-content { flex: 1; min-width: 0; }
.song-index-title { display: block; color: var(--text); font-size: 18px; line-height: 1.3; font-family: inherit; overflow-wrap: anywhere; }
.song-index-content .muted { margin: 4px 0 0; font-size: 11px; }
.song-index-item > .btn { flex-shrink: 0; padding: 6px 10px; font-size: 11px; }
@media (max-width: 600px) {
  .song.song-index-item { padding: 10px 13px; gap: 8px; min-height: 60px; }
  .song-index-title { font-size: 16px; }
  .song-index-open { white-space: nowrap; }
}
.p-seek::-webkit-slider-runnable-track { height: 2px; }
.p-seek::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }
.p-metro { padding: 10px; border-radius: 12px; gap: 8px; }
.m-status { font-size: 11px; }
.m-bpm { font-size: 12px; }
@media(prefers-color-scheme:dark) { .reading-mode[aria-pressed="true"], .p-play, .p-impulse, .m-btn.active { color: #31203d; } }
@media (min-width: 760px) { .reading.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 700px) {
  .studio-header { padding: 24px 18px 18px; }
  .studio-brand { font-size: 28px; }
  .studio-header { gap: 12px; }
  .studio-brand { min-width: 0; }
  .studio-motto { flex-direction: column; flex-shrink: 0; gap: 2px; font-size: 11px; text-align: right; line-height: 1.55; }
  main { padding: 24px 18px 48px; }
  .songs { grid-template-columns: 1fr; gap: 15px; }
  .song { padding: 21px; }
  .student { padding: 14px; }
  .page-head { align-items: flex-start; gap: 14px; }
  .head-actions { gap: 7px; }
  .page-phrase { font-size: 21px; }
  .toolbar { gap: 8px; }
  .sort { max-width: 140px; padding: 0 7px; font-size: 11px; }
  .standalone-inner { display: grid; grid-template-columns: 32px minmax(78px, 1fr) 32px minmax(66px, 1fr) 48px; grid-template-areas: "title title pattern pattern volume" "minus tempo plus toggle toggle"; padding: 6px 12px; gap: 5px 6px; align-items: center; }
  .standalone-controls { display: contents; }
  .standalone-title { grid-area: title; width: auto; gap: 6px; }
  .standalone-title strong { font-size: 20px; }
  .standalone-title > .small { display: none; }
  .standalone-pattern { grid-area: pattern; width: 100%; max-width: 100%; min-width: 0; height: 32px; font-size: 11px; }
  .standalone-decrease { grid-area: minus; }
  .standalone-increase { grid-area: plus; }
  .standalone-controls .m-tempo { grid-area: tempo; justify-content: center; font-size: 10px; }
  .standalone-controls .btn { grid-area: toggle; min-width: 0; height: 32px; padding: 4px 10px; justify-content: center; }
  .standalone-bpm { width: 54px; height: 32px; }
  .standalone-controls .m-vol { grid-area: volume; width: 48px; min-width: 0; }
  .player { width: 100%; border-radius: 18px 18px 0 0; padding: 11px 16px calc(10px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info extra" "wave wave" "time time" "controls controls" "metro metro"; gap: 6px 10px; }
  .p-controls { gap: 20px; }
  .p-controls .p-play { width: 44px; height: 44px; }
  .p-controls { justify-content: center; padding: 4px 0; }
  .p-waveform, .waveform-canvas { height: 35px; }
  .p-extra { max-width: 210px; }
  .p-title { font-size: 20px; }
  .m-status { flex-basis: 100%; }
  .lyrics { padding: 18px; }
  .lyrics-text { font-size: 15px; line-height: 1.85; }
  input.field, .search, .standalone-bpm, .m-bpm-input, select { font-size: 16px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex-basis: 100%; }
  .toolbar .sort { height: 36px; max-width: 100%; font-size: 12px; }
  .standalone-pattern { font-size: 13px; }
  .p-speed { font-size: 12px; }
}
@media(max-width:380px) {
  main { padding-left: 12px; padding-right: 12px; }
  .studio-header { padding-left: 12px; padding-right: 12px; }
  .studio-brand { font-size: 25px; gap: 9px; }
  .studio-brand span { font-size: 8px; letter-spacing: .09em; }
  .studio-motto { font-size: 10px; }
  .standalone-inner { padding-left: 12px; padding-right: 12px; }
  .standalone-controls { gap: 5px; }
  .standalone-bpm { width: 60px; }
  .standalone-controls .m-vol { width: 54px; }
  .standalone-controls .btn { min-width: 80px; padding-left: 9px; padding-right: 9px; }
  .p-extra { max-width: 174px; }
  .p-btn.small { width: 28px; height: 28px; }
  .p-speed { max-width: 54px; }
  .song { padding: 18px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* A quiet, visible explanation while working from an older reserve snapshot. */
.reserve-notice { padding: 12px 20px; background: #eee6f5; color: #554761; font-size: 14px; line-height: 1.5; text-align: center; }
.reserve-notice[hidden] { display: none; }
/* Practice controls: metronome stays above the waveform at every width. */
.player { grid-template-areas: "info controls extra" "metro metro metro" "wave wave wave" "time time time"; }
.p-metro { min-width: 0; align-items: center; flex-wrap: wrap; }
.p-metro .m-tools { min-width: 0; flex-wrap: wrap; }
.beat-mask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; }
.beat-mask label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.beat-count { padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.beat-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.beat-toggle { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; color: var(--muted); background: var(--surface); }
.beat-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.beat-toggle[aria-pressed="false"] { opacity: .65; text-decoration: line-through; }
.beat-toggle.beat-current { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-metro .beat-mask { padding: 4px 0; flex-basis: 100%; }
.metro-background-note { max-width: 992px; margin: 0 auto; padding: 0 12px 8px; font-size: 10px; }
.standalone-widget > .beat-mask { max-width: 1016px; margin: auto; }
.p-speed-control { display: grid; gap: 2px; justify-items: center; font-size: 10px; }
.p-speed { width: 86px; max-width: 86px; padding: 0; height: 20px; cursor: pointer; accent-color: var(--accent); }
.p-speed-reset { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 4px 6px; font-size: 11px; cursor: pointer; }
.variant-slot { display: flex; flex: 1 1 150px; min-width: 0; flex-direction: column; gap: 5px; }
.variant-slot .chip { flex: 1 1 auto; width: 100%; }
.variant-download { align-self: flex-start; font-size: 10px; padding: 4px 8px; }
.lyrics-editor { overflow: visible; }
.selection-toolbar {
  position: fixed; inset: auto; margin: 0; width: max-content; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); box-shadow: 0 6px 24px rgb(0 0 0 / .18); overflow: auto;
}
.selection-toolbar[hidden] { display: none; }
.selection-toolbar .tool { min-width: 40px; height: 44px; }
.selection-toolbar .tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.selection-palette {
  position: fixed; inset: auto; margin: 0; width: 340px; box-sizing: border-box;
  padding: 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--text); overflow: auto;
  box-shadow: 0 10px 36px rgb(0 0 0 / .2);
}
.selection-palette::backdrop { background: rgb(0 0 0 / .12); }
.selection-palette-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selection-palette .format-color-group { border: 0; padding: 8px 0 0; }
.selection-palette .tool { height: auto; min-height: 44px; }
.selection-palette .format-color-presets .tool { min-width: 44px; }
.selection-palette .format-color-custom .tool { padding: 6px; }
.selection-palette .format-color-value { font-size: 16px; }
:root[data-lyrics-font="garden"] .lyrics-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; }
:root[data-lyrics-font="times"] .lyrics-text { font-family: 'Times New Roman', Times, serif; font-size: 19px; }
:root[data-lyrics-font="mono"] .lyrics-text { font-family: ui-monospace, Consolas, monospace; font-size: 15px; }
:root[data-lyrics-font="rounded"] .lyrics-text { font-family: ui-rounded, 'Trebuchet MS', system-ui, sans-serif; font-size: 17px; }
.lyric-line { display: block; min-height: 1.9em; white-space: pre-wrap; position: relative; padding-left: 64px; }
.lyric-timed { border: 0; width: 100%; background: transparent; padding: 0 4px; text-align: left; cursor: pointer; color: inherit; font: inherit; line-height: inherit; border-radius: 5px; }
.lyric-timed:hover, .lyric-timed:focus-visible { background: var(--surface); outline: 1px solid var(--accent); }
.lyric-timed { padding-left:64px; }
.lyric-timed::before { content:attr(data-time); position:absolute; left:4px; top:.3em; color:var(--accent); font:600 12px/1.9 'Manrope',sans-serif; }
.timing-warning { margin-top: 10px; color: var(--accent); font-size: 12px; }
.timing-dialog { width: min(720px, calc(100% - 24px)); }
.timing-fields { display: grid; gap: 8px; margin: 16px 0; }
.timing-row { display: grid; grid-template-columns: minmax(0, 1fr) 94px auto; gap: 8px; align-items: center; }
.timing-preview { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; }
.timing-preview [data-readable] {color:var(--readable-ink) !important;}
.timing-input { padding: 6px !important; font-size: 13px; width: 94px; }
.timing-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.timing-heading h2 { margin:8px 0; }
.timing-mini { position:sticky; top:-1px; z-index:2; display:flex; align-items:center; gap:10px; background:var(--surface); padding:10px 0; border-bottom:1px solid var(--line); }
.timing-mini .p-seek { flex:1; }
.timing-clock { font-size:12px; font-variant-numeric:tabular-nums; min-width:66px; }
.timing-play { min-width:44px; min-height:44px; }
.timing-footer { position:sticky; bottom:-1px; background:var(--surface); display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.timing-fields { scroll-padding-top:80px; }
.timing-row { scroll-margin-top:80px; }
.timing-resume { position:fixed; bottom:calc(var(--player-height, 0px) + 16px); right:16px; z-index:20; box-shadow:var(--shadow); }
.timing-resume[hidden] {display:none;}
.song-documents {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
.document-row {display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface-2);border-radius:12px;padding:8px 12px;max-width:100%;}
.document-row > span {font-size:12px;overflow-wrap:anywhere;}
.pdf-dialog {width:min(1100px,calc(100vw - 16px));height:90dvh;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);padding:12px;}
.pdf-dialog::backdrop {background:rgb(0 0 0 / .45);}
.pdf-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pdf-heading strong {overflow-wrap:anywhere;}
.pdf-dialog iframe {border:0;width:100%;height:calc(100% - 110px);border-radius:8px;}
.audio-tool-button {border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:9px;padding:7px 9px;font:inherit;font-size:11px;min-height:36px;cursor:pointer;}
.audio-tool-button[aria-expanded="true"] {border-color:var(--accent);background:var(--accent-soft);}
.audio-tool-panel {grid-column:1/-1;background:var(--surface-2);padding:14px;border-radius:14px;}
.audio-tool-panel[hidden] {display:none;}
.audio-tool-panel > input[type="range"] {width:100%;accent-color:var(--accent);height:38px;}
.audio-tool-panel .p-speed-control {display:inline-flex;margin:10px 12px;}
.audio-tool-panel .p-speed {width:min(400px,50vw);}
.audio-tool-heading,.audio-tool-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.audio-tool-heading output {font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);}
.p-return {background:none;border:0;color:var(--accent);font:inherit;font-size:11px;cursor:pointer;padding:4px 0;}
.p-text {background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;min-height:36px;padding:5px 12px;margin-left:10px;}
.p-text[aria-expanded="true"] {background:var(--accent);color:var(--on-accent,#fff);}
.player.with-lyrics {max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;grid-template-areas:"info controls extra" "wave wave wave" "time time time" "metro metro metro" "lyrics lyrics lyrics";}
.p-reading {grid-area:lyrics;min-width:0;border-top:1px solid var(--line);padding-top:10px;}
.p-reading[hidden] {display:none;}
.p-reading-head {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.p-reading .reading {margin:8px 0 0;border:0;padding:0;}
.p-reading .reading-appearance {display:none;}
.p-reading .reading-modes {margin:10px 0;}
.p-reading .lyrics {max-height:min(42dvh,460px);overflow-y:auto;overscroll-behavior:contain;padding:12px 10px;scrollbar-gutter:stable;}
.p-reading .lyrics-text {font-size:16px;}
.player {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
.p-controls {justify-content:center;gap:12px;}
.p-controls > .p-btn {width:36px;height:36px;}
.p-controls > .p-play {width:44px;height:44px;}
.p-extra {justify-content:center;}
@media(max-width:700px) {
  .player {grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info info" "wave wave" "time time" "controls controls" "extra extra" "metro metro";}
  .player.with-lyrics {grid-template-areas:"info info" "wave wave" "time time" "controls controls" "extra extra" "metro metro" "lyrics lyrics";}
  .p-controls {gap:20px;}
  .p-extra {max-width:none;gap:8px;}
}
.p-controls {justify-content:center;}
.chip.active::before { width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; background:none; }
.chip.is-playing::before { border:0; width:8px; height:10px; background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px,currentColor 5px); }
@media(max-width:700px) {
  .player { grid-template-areas: "info info" "wave wave" "time time" "controls controls" "extra extra" "metro metro"; }
  .p-metro .m-tools { flex-basis: 100%; gap: 5px; }
  .p-extra { max-width: none; }
  .selection-palette { width: calc(100vw - 16px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .format-color-value { font-size: 16px; }
  .timing-row { grid-template-columns: minmax(0,1fr) 84px; }
  .timing-row .btn { grid-column: 2; }
  .timing-input { width: 84px; }
}
:root[data-theme="dark"] {
  color-scheme: dark; --on-accent: #31203d;
  --bg: #24212c; --surface: #2e2838; --surface-2: #393044;
  --text: #f0e7f4; --muted: #bfacc9; --line: #51425f;
  --accent: #d1ace5; --accent-soft: #4b3858; --wave-rest: #796688;
  --plus: #d6b2ec; --plus-soft: #44334f; --minus: #b0d7c0; --minus-soft: #2d4037;
  --orig: #dcc7a2; --orig-soft: #403a2d; --shadow: none;
}
:root[data-theme="light"] { color-scheme: light; --on-accent: #fff8ff; }
.theme-control { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.theme-choice { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--surface); color: var(--text); max-width: 150px; }
.btn.primary, .p-play, .p-impulse, .reading-mode[aria-pressed="true"], .m-btn.active { color: var(--on-accent); }
.lyrics [data-readable], .lyrics-edit [data-readable] { color: var(--readable-ink) !important; }
.lyrics .c-red { color: #c62828; } .lyrics .c-blue { color: #1565c0; }
.lyrics .c-green { color: #2e7d32; } .lyrics .c-purple { color: #7b1fa2; }
.lyrics mark, .lyrics-edit mark { background-color: #fff176; }
.format-color-presets { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.selection-palette .format-color-presets .tool { min-width: 0; width: 100%; }
.format-swatch { width: 26px; height: 26px; }
.custom-color-options summary { padding: 10px 0; font-size: 13px; cursor: pointer; }
.custom-color-options .format-color-custom { margin-top: 8px; }
.song-head { margin-bottom: 8px; }
.impulse { gap: 6px 10px; margin-bottom: 16px; }
.impulse.empty { font-size: 12px; }
.impulse-hint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.variant-slot { border-radius: 13px; display: flex; flex-direction: row; align-items: stretch; gap: 0; overflow: hidden; }
.variant-slot.minus { background: var(--minus-soft); color: var(--minus); }
.variant-slot.plus { background: var(--plus-soft); color: var(--plus); }
.variant-slot.orig { background: var(--orig-soft); color: var(--orig); }
.variant-slot .chip { width: auto; border-radius: 12px; background: transparent; flex: 1; }
.variant-slot .variant-download { align-self: stretch; flex-shrink: 0; background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 8px 10px; font-size: 11px; color: inherit; }
@media(min-width:701px) {
  .standalone-inner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 20px; padding-top: 8px; padding-bottom: 4px; }
  .standalone-controls { justify-content: center; flex-wrap: wrap; }
  .standalone-inner .beat-mask { grid-column: 2; justify-content: center; margin: 0; padding: 0; }
  .metro-background-note { text-align: center; padding: 4px 16px 8px; margin: 0; }
}
@media(max-width:700px) {
  .standalone-inner { grid-template-areas: "title title pattern pattern volume" "minus tempo plus toggle toggle" "beats beats beats beats beats"; }
  .standalone-inner .beat-mask { grid-area: beats; justify-content: center; padding: 4px 0 0; margin: 0; }
  .theme-choice { font-size: 16px; }
  .variant-slot { flex-basis: 100%; }
}
.player.with-lyrics {overflow:hidden;}
.p-reading .reading {max-height:min(40dvh,max(100px,calc(100dvh - 420px)));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.p-reading .lyrics {max-height:none;overflow:visible;}
.standalone-widget {z-index:9;}