:root {
  font-family: 'DM Sans', system-ui, sans-serif; color: #21332e; background: #f5f4ed;
  font-synthesis: none; --green: #226346; --muted: #738078; --line: #dfe2d7; --chrome-background: #111f1a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, a:focus-visible, summary:focus-visible, .arrangement-scroll:focus-visible {
  outline: 3px solid #c19542; outline-offset: 3px;
}
.studio { width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.studio-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); padding: 0px; }
.workspace { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0px; min-height: 0; min-width: 0; }
.panel { background: #fffef9; border: 1px solid var(--line); padding: 22px; min-width: 0; min-height: 0; }
.chart { grid-column: 2; grid-row: 1; width: 100%; max-width: 1080px; justify-self: center; display: flex; flex-direction: column; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-shrink: 0; }
.eyebrow, .small-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; margin: 0 0 6px; color: #72806b; }
h2 { font-family: Manrope, system-ui, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.7px; margin: 0; }
.pill { background: #eef1e7; padding: 7px 11px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.song-meta { display: flex; gap: 22px; border-bottom: 1px solid var(--line); padding-bottom: 16px; flex-shrink: 0; }
.song-meta label { flex: 1; min-width: 0; font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: var(--muted); }
.song-meta label.tempo { flex: 0 0 87px; }
.tempo span { float: right; font-size: 8px; font-weight: 400; }
.song-meta input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid transparent; outline: none; color: #273d31; padding: 7px 0 3px; font-size: 17px; letter-spacing: -.5px; }
.song-meta input:focus { border-color: var(--green); }
.song-meta input:disabled { opacity: .75; }
.arrangement-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin-right: -8px; padding: 0 8px 10px 0; }
.section-heading { position: sticky; top: 0; z-index: 1; background: #fffef9; display: flex; align-items: center; gap: 9px; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; padding: 14px 0; }
.section-heading > span:last-child { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: 0; font-size: 11px; }
.section-letter { background: #e3ebd5; color: #507044; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; font-size: 11px; }
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bar { position: relative; background: #f9faf4; border: 1px solid #dce2d5; border-radius: 5px; padding: 30px 8px 20px; min-height: 96px; }
.bar:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.bar-number { position: absolute; top: 9px; left: 11px; font-size: 10px; color: #8e9a88; }
.bar input { width: 100%; text-align: center; font-size: 19px; font-weight: 500; letter-spacing: -.7px; border: 0; outline: none; color: #315335; background: transparent; }
.remove-bar { position: absolute; right: 5px; top: 3px; border: 0; background: none; color: #85917e; opacity: 0; font-size: 16px; padding: 3px 6px; }
.bar:hover .remove-bar, .bar:focus-within .remove-bar, .remove-bar:focus { opacity: 1; }
.bar.playing { background: #e6eed6; border-color: #6f9154; box-shadow: inset 0 -3px #6f9154; }
.bar input:disabled { opacity: 1; color: #315335; }
.bar:has(input:disabled) .remove-bar { visibility: hidden; }
.chart-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 0; flex-shrink: 0; }
.chart-footer p { font-size: 10px; color: #8a9383; margin: 0; }
.text-button { border: 0; background: transparent; color: #4b6944; font-size: 11px; padding: 5px 0; }
.document-actions { display: flex; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
.secondary { border: 1px solid #dce1d3; border-radius: 5px; background: transparent; padding: 9px 14px; color: #59694f; font-size: 11px; }
.document-actions .text-button { margin-left: auto; }
.settings { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.settings .panel-heading { margin-bottom: 14px; }
.inspector-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 14px; background: #eef1e7; border-radius: 6px; }
.inspector-tabs button { border: 0; background: transparent; color: #6b7a63; border-radius: 4px; padding: 9px 3px; font-size: 11px; white-space: nowrap; }
.inspector-tabs button[aria-selected='true'] { color: #234e33; background: #fffef9; box-shadow: 0 1px 4px #1e36251a; font-weight: 600; }
.inspector-content { min-height: 0; overflow: hidden; }
.tab-panel { height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 4px 8px 0; }
.tab-panel:focus-visible { outline: 2px solid #91a57f; outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.current-style { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #f9faf5; color: #354a31; padding: 11px; text-align: left; }
.current-style > span:first-child { min-width: 0; }
.current-style strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.current-style small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.current-style:hover { border-color: #91a57f; background: #f0f4e8; }
.styles-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 9px; overflow: hidden; padding-right: 0; }
.style-search { position: relative; }
.style-search input { width: 100%; padding: 10px 32px 10px 11px; border: 1px solid var(--line); border-radius: 5px; background: #fffef9; color: #21332e; font-size: 12px; }
.style-search input::-webkit-search-cancel-button { display: none; }
.style-search input:focus { outline: 2px solid #91a57f; outline-offset: -1px; }
.style-search button { position: absolute; right: 10px; top: 3px; font-size: 20px; }
.style-filters { display: flex; align-items: center; gap: 10px; }
.style-filters select { flex: 1; min-width: 0; padding: 7px 9px; font-size: 11px; }
#style-count { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.style-favourites { flex-shrink: 0; border: 1px solid var(--line); border-radius: 5px; background: #fffef9; padding: 7px 9px; font-size: 11px; color: #667449; white-space: nowrap; }
.style-favourites[aria-pressed=true] { border-color: #819a64; background: #e6eed6; color: #36522d; }
.style-star { color: #a07624; font-size: 14px; flex-shrink: 0; }
.style-context-menu { position: fixed; z-index: 30; padding: 4px; max-width: calc(100vw - 16px); background: #fffef9; border: 1px solid #bac5ae; border-radius: 6px; box-shadow: 0 5px 22px #172a2633; }
.style-context-menu button { display: block; border: 0; border-radius: 3px; padding: 9px 12px; font-size: 12px; text-align: left; background: transparent; color: #294431; }
.style-context-menu button:hover, .style-context-menu button:focus-visible { background: #e6eed6; outline: none; }
.style-browser-footer { grid-row: 4; }
#style-favourite-status { font-size: 10px; color: #9c582a; margin: 5px 0 0; }
#style-favourite-status:empty { display: none; }
.style-library { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.style-columns, .style-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 58px; align-items: center; gap: 7px; padding: 8px 18px 8px 8px; }
.style-columns { color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); background: #f3f5ed; scrollbar-gutter: stable; overflow-y: auto; }
.style-columns button { min-width: 0; padding: 2px 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; white-space: nowrap; }
.style-columns button:hover { text-decoration: underline; }
.style-columns button[aria-pressed='true'] { color: #d8e9a9; }
.style-columns button:focus-visible { outline-offset: 1px; }
.style-sort-arrow { display: inline-block; min-width: 8px; }
.style-results { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: #fffef9; }
.style-results:focus-visible { outline: 2px solid #91a57f; outline-offset: -1px; }
.style-row { position: relative; min-height: 34px; border-bottom: 1px solid #e9ecdf; cursor: pointer; }
.style-row:last-child { border-bottom: 0; }
.style-row:hover { background: #f3f6ec; }
.style-row[aria-selected='true'] { background: #e6eed6; color: #264c31; }
.style-results:focus .style-row.active { box-shadow: inset 3px 0 #6e8d54; }
.style-row[aria-disabled='true'] { cursor: not-allowed; }
.style-row-text { min-width: 0; display: flex; align-items: center; gap: 4px; }
.style-row strong { min-width: 0; display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-category-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.style-meter { font-size: 10px; color: #5b7052; white-space: nowrap; }
.style-check { position: absolute; right: 3px; color: #38633a; font-size: 12px; width: 10px; visibility: hidden; }
.style-row[aria-selected='true'] .style-check { visibility: visible; }
.style-empty { grid-row: 2; display: grid; align-content: center; text-align: center; padding: 12px; font-size: 12px; color: var(--muted); overflow: auto; }
.style-empty p { margin: 0 0 8px; }
.style-browser-hint { grid-row: 4; margin: 0; font-size: 10px; color: var(--muted); line-height: 1.5; }
/* Give the library the panel's height; its tab already identifies this view. */
.settings:has(#tab-styles[aria-selected='true']) { grid-template-rows: auto minmax(0, 1fr) auto; }
.settings:has(#tab-styles[aria-selected='true']) .panel-heading,
.settings:has(#tab-styles[aria-selected='true']) .engine-card:has(.status-dot.ready) { display: none; }
.part-context { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; padding: 10px; background: #f3f5ed; border-radius: 6px; }
.part-context strong { display: block; font-size: 12px; font-weight: 600; }
.part-context div > span { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 3px; }
.variation-label { margin-top: 20px; }
.part-note { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 16px 0 0; }
.inspector-actions { padding-top: 12px; }
.inspector-actions .engine-card { padding-top: 12px; margin: 0 0 14px; }
.inspector-actions .engine-card p { font-size: 10px; }
.inspector-actions .engine-card:has(.status-dot.ready) p { display: none; }
.memo-panel { display: flex; flex-direction: column; }
.memo-panel > label { font-size: 12px; font-weight: 600; }
.memo-panel .hint { margin: 8px 0 14px; }
#song-memo { width: 100%; flex: 1; min-height: 90px; resize: none; border: 1px solid #dce2d5; border-radius: 6px; background: #f9faf5; padding: 12px; font-family: inherit; font-size: 13px; line-height: 1.8; color: #354a31; }
#song-memo:focus { outline: 2px solid #91a57f; outline-offset: -1px; }
#memo-count { color: var(--muted); font-size: 10px; text-align: right; padding-top: 8px; }
.settings h2 { font-size: 19px; }
.music-icon { color: #749168; font-size: 26px; }
.rhythm-label { font-size: 9px; letter-spacing: 1.3px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 10px; }
select { width: 100%; padding: 12px 10px; border: 1px solid #dce2d5; border-radius: 5px; background: #f9faf5; color: #354a31; font-size: 12px; }
.hint { font-size: 11px; line-height: 1.7; color: #7c8674; margin: 11px 0 20px; }
.engine-card { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 20px; }
.engine-card > div { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.status-dot { height: 6px; width: 6px; display: inline-block; border-radius: 50%; background: #b89c58; }
.status-dot.ready { background: #6f9c54; }
.engine-card p { font-size: 11px; line-height: 1.7; color: #7c8674; margin: 9px 0 0; }
.primary { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-radius: 5px; background: var(--green); color: #fff; padding: 14px 16px; font-size: 12px; font-weight: 600; }
.primary:hover:not(:disabled) { background: #174c34; }
.export-note { font-size: 10px; line-height: 1.7; text-align: center; color: #7c8674; margin: 12px 0 0; }
.instrument-mixer { padding: 0; }
.instrument-mixer h3 { margin: 0 0 14px; font-size: 12px; font-weight: 600; }
.mixer-empty { margin: 0; font-size: 11px; line-height: 1.7; color: var(--muted); }
.mixer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(65px, 1.1fr) 32px; align-items: center; gap: 10px; min-height: 38px; }
.mixer-row label { font-size: 11px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #435a3b; }
.mixer-row input { width: 100%; min-width: 0; height: 4px; margin: 0; accent-color: var(--green); cursor: pointer; }
.mixer-row input:focus-visible { outline: 2px solid #c19542; outline-offset: 5px; }
.mixer-value { font-size: 10px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.status-message { min-width: 0; font-size: 11px; line-height: 18px; color: #537146; margin: 0; max-height: 36px; overflow: auto; }
.status-message.error { color: #a44535; }
.now-playing { min-width: 0; }
.now-playing .small-label { color: #91a78a; font-size: 8px; }
.now-playing h3 { margin: 6px 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#player-style { display: block; color: #a8b6a1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player { min-width: 0; }
.controlbar .secondary { color: #d1ddc9; border-color: #52644f; padding: 8px 14px; font-size: 12px; }
.transport button[aria-busy='true'] { cursor: progress; }
.player progress { display: block; flex: 1; min-width: 0; height: 4px; border: 0; border-radius: 5px; overflow: hidden; background: #425140; accent-color: #b7d78e; }
.player progress::-webkit-progress-bar { background: #425140; }
.player progress::-webkit-progress-value { background: #b7d78e; }
#play-clock { font-size: 10px; color: #b9c9ae; font-variant-numeric: tabular-nums; white-space: nowrap; }
#play-state { font-size: 10px; line-height: 15px; color: #a8b99d; min-height: 15px; max-height: 30px; overflow: auto; text-align: center; margin: 8px 0 0; }
#play-state.error { color: #ffb8a1; }
.master-control label { font-size: 8px; letter-spacing: 1px; }
#master-gain { flex: 1; width: 100%; min-width: 30px; accent-color: #b7d78e; height: 4px; }
#master-gain-value { width: 58px; padding: 4px; color: #e1edce; background: #203229; border: 1px solid #52644f; border-radius: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mute-button { padding: 4px 6px; border: 1px solid #52644f; border-radius: 4px; color: #b9c9ae; background: transparent; font-size: 10px; }
.mute-button[aria-pressed="true"] { background: #d8e9a9; color: #21332e; }
.output-level > span:first-child { font-size: 8px; letter-spacing: 1px; }
#output-meter { flex: 1; min-width: 20px; height: 8px; }
#output-meter::-webkit-meter-bar { background: #344b3c; border: 0; border-radius: 2px; }
#output-meter::-webkit-meter-optimum-value { background: #9fc578; }
#output-meter::-webkit-meter-suboptimum-value { background: #d9b665; }
#output-meter::-webkit-meter-even-less-good-value { background: #dd846c; }
.output-level output { min-width: 65px; text-align: right; }
#output-peak { white-space: nowrap; }
.output-level.full-scale #output-peak { color: #ff9e85; }
#output-diagnostics { font: 11px/1.8 monospace; border-top: 1px solid #52644f; padding-top: 10px; margin: 10px 0 0; }
.control-menu { font-size: 10px; color: #bfceb4; }
.control-menu summary { padding: 3px 0; }
.control-popover { position: absolute; bottom: calc(100% + 12px); right: 24px; width: min(400px, calc(100vw - 32px)); max-height: min(360px, 55dvh); overflow: auto; overscroll-behavior: contain; padding: 20px; background: #203229; border: 1px solid #52644f; border-radius: 9px; box-shadow: 0 10px 40px #0004; color: #d7e1cf; }
.control-popover h3 { margin: 0 0 14px; font-size: 14px; }
#play-diagnostics { font: 11px/1.8 monospace; overflow-wrap: anywhere; margin: 0; }
.control-popover a { color: #cde8a8; font-size: 11px; }
.sample-credit { font-size: 11px; line-height: 1.8; color: #a8b99d; margin: 16px 0; }
/* Credits remain a normal document; only the studio uses the viewport shell. */
.about { max-width: 760px; padding: 40px 24px; margin: auto; line-height: 1.8; }
.about h1 { font-size: 36px; line-height: 1.2; }
.about h2 { margin-top: 30px; }
.about a { color: var(--green); }
@media (max-width: 1000px) {
  .panel { padding: 18px; }
  .chart-footer p { max-width: 190px; text-align: right; line-height: 1.5; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 300px minmax(0, 1fr); gap: 12px; }
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .studio-main { padding: 12px; }
  .workspace { grid-template-columns: 280px minmax(0, 1fr); gap: 10px; }
  .panel { padding: 14px; }
  .settings h2 { font-size: 17px; }
  .engine-card { padding-top: 14px; margin: 16px 0; }
  .engine-card p { font-size: 10px; }
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-footer p { display: none; }
}
@media (max-width: 520px) {
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .chart { grid-column: 1; grid-row: 2; }
  .settings { grid-row: 1; grid-column: 1; grid-template-rows: auto minmax(0, 1fr) auto; padding: 10px 12px; height: clamp(170px, 28dvh, 260px); }
  .settings .panel-heading, .settings .engine-card p, .part-context { display: none; }
  .inspector-tabs { margin-bottom: 8px; padding: 2px; }
  .inspector-tabs button { padding: 6px 4px; }
  .settings select { padding: 8px 6px; font-size: 11px; }
  .settings .primary { width: auto; padding: 9px; font-size: 10px; }
  .inspector-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding-top: 8px; }
  .inspector-actions .engine-card { margin: 0; padding: 0; border: 0; }
  .variation-label { margin-top: 12px; }
  .engine-card > div { font-size: 10px; }
  .chart .panel-heading { margin-bottom: 10px; }
  .chart .panel-heading .eyebrow { display: none; }
  .song-meta { padding-bottom: 8px; gap: 12px; }
  .song-meta input { font-size: 15px; }
  .section-heading { padding: 10px 0; }
  .document-actions { gap: 8px; padding-top: 8px; }
  .document-actions .secondary { padding: 7px 10px; }
  .chart-footer { padding: 5px 0; }
  .remove-bar { opacity: 1; }
  .now-playing h3 { font-size: 13px; }
  #player-style { font-size: 9px; }
  #play-clock { font-size: 9px; }
  .control-popover { right: 12px; }
}
@media (max-width: 520px) and (max-height: 660px) {
  .chart .panel-heading > div:first-child { display: none; }
  .chart.panel { padding: 10px; }
  .chart .section-heading { padding: 5px 0; }
  .bar { min-height: 64px; padding: 24px 4px 10px; }
}
@media (max-height: 580px) and (min-width: 521px) {
  .studio-main { padding-block: 8px; }
  .panel { padding: 12px 16px; }
  .panel-heading { margin-bottom: 8px; }
  .panel-heading .eyebrow { display: none; }
  .song-meta { padding-bottom: 8px; }
  .chart-footer { padding: 5px 0; }
  .document-actions { padding-top: 6px; }
}

/* Section editing and explicit development previews. */
.meter-select { width: 78px; padding: 7px; font-size: 12px; }
.section-editor, .preview-range, .generate-actions { display: flex; gap: 8px; align-items: end; }
.section-editor { margin-top: 10px; }
.section-editor label, .preview-range label { flex: 1; min-width: 0; font-size: 10px; color: #6d7a71; }
.section-editor input, .preview-range input { display: block; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 4px; background: #fffef9; color: #21332e; }
.section-editor .secondary { padding: 8px; font-size: 10px; }
.preview-range { margin-bottom: 8px; }
.preview-range .text-button { padding: 8px 0; font-size: 10px; }
.generate-actions button { flex: 1; padding: 12px 8px; }
.bar-section { position: absolute; top: 8px; right: 28px; max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #66824e; font-size: 10px; }

@media (max-width: 520px) {
  .settings { height: clamp(250px, 44dvh, 380px); }
  .inspector-actions { display: block; }
  .inspector-actions .engine-card { margin-bottom: 5px; }
  .preview-range input { padding: 4px; }
  .generate-actions button { padding: 8px; }
}
/* Inspector colours follow the header; layout and resizer remain independent. */
.settings { background: var(--chrome-background); color: #e9eee4; --muted: #a8b99d; --line: #405344; border-color: var(--line); color-scheme: dark; scrollbar-color: #718269 #1b3025; }
.settings .eyebrow, .settings .small-label, .settings .hint,
.settings .engine-card p, .settings .section-editor label, .settings .preview-range label,
.settings .mixer-row label { color: var(--muted); }
.settings .music-icon { color: #b7d78e; }
.settings select, .settings .section-editor input, .settings .preview-range input,
.settings .style-search input, .settings #song-memo, .settings .current-style {
  background: #1b3025; color: #e9eee4; border-color: var(--line);
}
.settings input::placeholder, .settings textarea::placeholder { color: #a8b99d; opacity: 1; }
.settings .inspector-tabs { background: #20352a; }
.settings .inspector-tabs button { color: #c3d1b9; }
.settings .inspector-tabs button[aria-selected='true'] { background: #d8e9a9; color: #243d26; }
.settings .secondary, .settings .style-favourites { background: #20352a; color: #d8e6cd; border-color: #52694e; }
.settings .secondary:hover:not(:disabled), .settings .current-style:hover { background: #2b4533; border-color: #8ba475; }
.settings .text-button { color: #c9dfa9; }
.settings .primary { background: #2b7351; }
.settings .primary:hover:not(:disabled) { background: #348560; }
.settings .part-context, .settings .style-columns { background: #20352a; }
.settings .section-letter { background: #304d38; color: #d8e9a9; }
.settings .style-results { background: var(--chrome-background); }
.settings .style-row { border-bottom-color: #2c4033; }
.settings .style-row:hover { background: #233c2c; }
.settings .style-row[aria-selected='true'], .settings .style-favourites[aria-pressed='true'] { background: #304d38; color: #e8f4d2; }
.settings .style-meter { color: #c0d2b0; }
.settings .style-check { color: #d8e9a9; }
.settings .style-star { color: #e2c879; }
.settings #style-favourite-status { color: #ffbe9c; }
.settings .mixer-row input { accent-color: #b7d78e; }
.style-context-menu { background: #1b3025; border-color: #52694e; color-scheme: dark; }
.style-context-menu button { color: #e9eee4; }
.style-context-menu button:hover, .style-context-menu button:focus-visible { background: #304d38; }

.piano-toggle { background: transparent; border: 0; color: #d3e1bf; padding: 0; font-size: 12px; white-space: nowrap; }
.piano-toggle[aria-expanded=true] { color: #e3f5b5; text-decoration: underline; }
.piano-popup { position: absolute; bottom: calc(100% + 10px); left: 16px; right: 16px; max-height: var(--piano-available-height, calc(100dvh - 180px)); overflow-y: auto; border: 1px solid #53654e; border-radius: 12px; background: #182a23; color: #e9eee4; box-shadow: 0 8px 30px #0005; padding: 12px; z-index: 10; }
.piano-popup[hidden] { display: none; }
.piano-controls, .piano-performance, .piano-status { display: flex; align-items: center; gap: 14px; }
.piano-help, .piano-warning { font-size: 11px; margin: 0; color: #b9c7af; }
.piano-popup button:not(.key) { background: #263e31; color: #e3edd9; border: 1px solid #617458; border-radius: 5px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.piano-popup #piano-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; }
.piano-popup #piano-apply { background: #d8e9a9; border-color: #d8e9a9; color: #243d26; }
#piano-track-target { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9c7af; font-size: 10px; }
.piano-popup button:focus-visible, .piano-popup input:focus-visible { outline: 2px solid #d9edab; outline-offset: 2px; }
.piano-popup label, .piano-instrument-label { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #d2dfc9; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.piano-popup #piano-instrument { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 240px; background: #12231c; text-align: left; }
#piano-instrument-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piano-popup #piano-instrument[aria-expanded=true] { border-color: #b8d48e; }
.piano-controls, .piano-performance { flex-wrap: nowrap; min-height: 32px; overflow-x: auto; scrollbar-width: thin; }
.piano-controls { margin-right: 40px; }
.piano-controls > *, .piano-performance > * { flex-shrink: 0; }
.piano-popup input[type=range] { flex: 0 0 88px; width: 88px; margin: 0; }
.piano-controls output { min-width: 24px; font-variant-numeric: tabular-nums; }
.piano-popup input[type=range] { accent-color: #c1db92; }
.piano-popup select { flex: none; width: 240px; background: #12231c; border: 1px solid #64745b; border-radius: 4px; color: #e7efdf; padding: 6px; min-width: 0; font-size: 12px; margin: 0; }
.piano-controls input[type=number] { width: 56px; color: #e7efdf; border: 1px solid #64745b; border-radius: 4px; padding: 5px; background: #12231c; }
.piano-performance { margin: 8px 0 10px; font-size: 11px; }
.piano-performance input[type=checkbox] { margin: 0; }
.piano-midi { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.piano-popup #piano-midi-input, .piano-popup #piano-midi-enable { width: 160px; }
#piano-range { margin-left: auto; }
.piano-keybed { display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; gap: 6px; }
.piano-popup .piano-arrow { font-size: 30px; padding: 0; }
.piano-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.piano-viewport::-webkit-scrollbar { display: none; }
.piano-content { position: relative; }
.piano-popup.browsing { overflow: hidden; }
.piano-popup.browsing #piano-view { visibility: hidden; }
.instrument-browser { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; background: #14241d; border: 0; border-radius: inherit; padding: 12px; }
.instrument-toolbar { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-bottom: 5px; font-size: 10px; min-height: 30px; }
.instrument-banks { display: flex; gap: 4px; }
.piano-popup .instrument-toolbar button, .piano-popup .instrument-empty button { padding: 3px 7px; font-size: 10px; }
.instrument-toolbar button[aria-pressed=true] { background: #c3daa2; color: #182a23; }
#instrument-count { color: #b2c2a7; }
#instrument-search-toggle { margin-left: auto; display: flex; align-items: center; }
.instrument-search-popup { position: absolute; right: 100px; top: 0; z-index: 2; display: flex; width: min(260px, calc(100% - 105px)); background: #20372a; border: 1px solid #82946b; border-radius: 4px; }
.instrument-search-popup input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 11px; border: 0; outline: none; color: #edf4e6; background: transparent; }
.instrument-results { display: flex; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #64795a #14241d; }
.instrument-column { flex: 1; min-width: 0; }
.instrument-family { margin-bottom: 8px; }
.instrument-family summary { display: flex; align-items: center; gap: 5px; padding: 5px 7px; background: #253b2e; color: #d4e4c3; font-size: 11px; font-weight: 600; border-radius: 3px; list-style: none; }
.instrument-family summary::-webkit-details-marker { display: none; }
.instrument-family summary::before { content: '›'; }
.instrument-family[open] summary::before { transform: rotate(90deg); }
.instrument-family summary span { margin-left: auto; color: #a7ba99; font-size: 9px; }
.instrument-family ul { list-style: none; margin: 3px 0 0; padding: 0; }
.piano-popup button.instrument-choice { display: block; width: 100%; padding: 2px 7px; background: transparent; border: 1px solid transparent; border-radius: 3px; color: #e8efdf; font-size: 11px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.piano-popup button.instrument-choice:hover { background: #304e38; }
.piano-popup button.instrument-choice[aria-pressed=true] { background: #3f5d39; border-color: #96b679; color: #f2ffdc; }
.instrument-empty { padding: 14px; color: #becdb3; font-size: 11px; }
.instrument-results:empty { display: none; }
@media(max-width:900px) { .instrument-results { flex-wrap: wrap; align-content: flex-start; } .instrument-column { flex: 1 0 29%; } }
@media(max-width:500px) { .instrument-column { flex-basis: 45%; } #instrument-count { display: none; } .instrument-toolbar { gap: 4px; } .piano-popup .instrument-toolbar button { padding: 3px 4px; font-size: 9px; } .instrument-search-popup { right: 75px; width: calc(100% - 80px); } }
.piano-keys { position: relative; height: 150px; user-select: none; }
.piano-keys .key { position: absolute; top: 0; bottom: 0; border: 1px solid #aaa; border-top: 0; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,#c9cbc7,#fffffa 15%,#fffffa 70%,#d9dbd7); color: #677064; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 0 0 12px; font-size: 11px; touch-action: pan-y; }
.piano-keys .key.black { height: 96px; z-index: 2; background: linear-gradient(#101c18,#304037); border-color: #0b1710; color: #bac6b2; box-shadow: 0 3px 0 #0a140c; font-size: 9px; }
.piano-keys .key.active { background: #b8d48e; color: #19321e; box-shadow: inset 0 4px 7px #0003; }
.piano-keys .key.black.active { background: #557f43; color: #efffd5; }
.piano-keys .key:disabled { opacity: .55; }
.piano-keys .key:focus-visible { outline: 2px solid #77b35b; outline-offset: -3px; }
.piano-status { flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 11px; font-variant-numeric: tabular-nums; }
#piano-stats { margin-left: auto; }
#piano-midi-state:empty, .piano-warning:empty { display: none; }
.piano-warning { color: #f3c987; }
.piano-help { cursor: help; white-space: nowrap; }
.instrument-audition { border: 0; background: transparent; color: inherit; padding: 0; font: inherit; font-size: 12px; text-align: left; }
.instrument-audition:hover { text-decoration: underline; }
.track-channel { padding: 7px 0; border-bottom: 1px solid var(--line); }
.track-channel:last-child { border-bottom: 0; }
.track-mixer-row { grid-template-columns: minmax(0, 1.2fr) minmax(45px, 1fr) 31px 24px 24px 26px; gap: 5px; }
.track-mixer-row > :first-child { min-width: 0; font-size: 11px; }
.track-mixer-row > :first-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-mixer-row small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.track-switch { padding: 3px; border: 1px solid #52694e; border-radius: 4px; background: #20352a; color: #d8e6cd; font-size: 10px; }
.track-switch[aria-pressed='true'] { background: #d8e9a9; color: #243d26; border-color: #d8e9a9; }
.drum-pad-mixer { padding: 5px 0 0 8px; }
.drum-pad-mixer summary { color: #c9dfa9; font-size: 11px; padding: 5px 0; }
.drum-pad-mixer .mixer-row { min-height: 31px; }
.track-switch[aria-expanded='true'] { background: #304d38; border-color: #b7d78e; color: #e8f4d2; }
.track-fx-controls { padding: 6px 0 6px 8px; }
.track-fx-controls .mixer-row { min-height: 30px; }
.track-fx-controls .text-button { font-size: 10px; }
.effects-help { margin: 0 0 12px; }
.effect-card { min-width: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.effect-card legend { font-size: 12px; padding: 0 5px; }
.effect-enable { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 8px; }
.effect-row { display: grid; grid-template-columns: 48px minmax(45px, 1fr) 48px; align-items: center; gap: 8px; min-height: 30px; font-size: 11px; }
.effect-row input { width: 100%; min-width: 0; }
.effect-row output { font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.effect-card input { accent-color: #b7d78e; }
@media(max-width:700px) { .piano-popup { left: 6px; right: 6px; } .piano-keys { height: 125px; } .piano-keys .key.black { height: 80px; } }

/* Compact playback-source controls; independent of arrangement generation. */
.playback-bank-control { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; font-size: 11px; }
.playback-bank-control > span { margin-right: auto; color: var(--muted); }
.playback-bank-control button { border: 1px solid #52694e; border-radius: 4px; padding: 5px 10px; background: #20352a; color: #d8e6cd; font: inherit; }
.playback-bank-control button[aria-pressed='true'] { background: #d8e9a9; color: #243d26; border-color: #d8e9a9; }
.drum-source-control { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.drum-source-control label { font-size: 11px; color: var(--muted); }
.settings .drum-source-control select { width: auto; flex: 1; min-width: 0; margin: 0; }
.mixer-row { grid-template-columns: minmax(0, 1fr) minmax(65px, 1.1fr) 50px; }
.track-mixer-row { grid-template-columns: minmax(0, 1.2fr) minmax(45px, 1fr) 50px 24px 24px 26px; }
.mixer-value { white-space: nowrap; }


.track-mixer-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.generate-actions .playback-bank-control { margin: 0; flex: none; align-self: stretch; }
.generate-actions .playback-bank-control button { flex: none; padding: 5px 6px; font-size: 10px; }
/* Composition controls stay inside the chart's scroll area. */
.composition-toolbar { display:flex; gap:8px; align-items:center; padding:4px 0 10px; flex-wrap:wrap; }
.composition-toolbar select { width:auto; min-width:110px; max-width:200px; }
.arrangement-order { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:14px; }
.order-tile { display:flex; align-items:stretch; border:1px solid var(--line,#d8dfcf); border-radius:5px; overflow:hidden; background:#edf0e7; }
.order-tile.active { border-color:#276348; background:#dce7c6; }
.order-tile button { background:transparent; border:0; color:#173b2c; font-size:11px; padding:7px; cursor:pointer; }
.order-tile button:first-child { font-weight:600; }
.composition-heading { grid-column:1/-1; display:flex; gap:12px; align-items:center; border-bottom:1px solid #d8dfcf; padding:9px 0 4px; min-width:0; }
.composition-heading button { border:0; background:transparent; padding:0; font-weight:600; color:#245c42; cursor:pointer; white-space:nowrap; }
.composition-heading span { font-size:10px; color:#687769; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar.selected-bar { outline:2px solid #93b66b; outline-offset:-2px; }
.bar input[readonly] { cursor:pointer; }
.occurrence-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.pattern-controls { display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:10px; }
.pattern-controls .text-button { font-size:11px; padding:4px; }
.chord-context-menu { position:fixed; z-index:150; width:245px; padding:6px; background:#152a20; color:#e7eddb; border:1px solid #65805b; border-radius:7px; box-shadow:0 10px 30px #0005; }
.chord-context-menu[hidden] { display:none; }
.chord-context-menu button { display:block; text-align:left; border:0; color:inherit; background:transparent; width:100%; padding:9px 10px; cursor:pointer; border-radius:3px; }
.chord-context-menu button:hover,.chord-context-menu button:focus-visible { background:#38533b; }
.chord-context-menu small { display:block; border-top:1px solid #43604a; padding:8px; font-size:10px; }
.composition-dialog { border:1px solid #617c52; border-radius:9px; background:#f8f8f0; color:#1b3026; padding:22px; width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; }
.composition-dialog::backdrop { background:#07180eb0; }
.composition-dialog h3 { margin:0 0 18px; }
.composition-dialog-body { display:grid; gap:12px; }
.composition-dialog-body label { display:grid; gap:5px; font-size:12px; }
.composition-dialog-body input,.composition-dialog-body select { width:100%; min-width:0; background:#fff; color:#193426; border:1px solid #c3cdb8; padding:8px; border-radius:4px; }
.composition-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.composition-dialog-actions button { padding:8px 18px; border-radius:4px; border:1px solid #bcc8af; cursor:pointer; }
.fifths-wheel { position:relative; width:240px; height:240px; margin:5px auto; border-radius:50%; background:#e8eddc; }
.fifths-wheel button { position:absolute; transform:translate(-50%,-50%); width:36px; height:36px; border:1px solid #a9ba90; background:#fff; border-radius:50%; color:#1b442f; cursor:pointer; }
.bar-performance { position:absolute; left:9px; right:9px; bottom:7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; color:#536e43; pointer-events:none; }
.composition-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:4px 0 10px; }
.composition-controls .composition-toolbar,.composition-controls .arrangement-order { padding:0; }
.chart .section-heading { padding:9px 0; }
.composition-controls { padding:0 0 6px; }
.composition-controls select { height:32px; padding:4px 8px; font-size:11px; }
.composition-controls .secondary { padding:7px 10px; }
.composition-heading { padding:3px 0; }
.native-document { display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; margin-bottom:10px; font-size:11px; color:#496348; }
.native-document > span { font-weight:600; overflow-wrap:anywhere; }
.native-document a { color:#275f44; }
.native-document small { flex-basis:100%; font-size:10px; color:#687b67; }
.native-bar { padding-top:28px; }
.native-chords { display:flex; justify-content:space-around; flex-wrap:wrap; gap:5px; }
.native-chord { display:grid; text-align:center; gap:3px; min-width:35px; }
.native-chord strong { font-size:17px; font-weight:500; color:#315335; }
.native-chord small { font-size:9px; color:#7b8974; }
.native-hold { color:#97a58a; font-size:20px; }
#native-part-info { font-size:11px; line-height:1.6; }
#native-part-info label { display:grid; gap:5px; }
.native-parameters { display:grid; grid-template-columns:minmax(90px,.6fr) minmax(0,1fr); gap:5px 12px; }
.native-parameters dt { color:#a8bc96; }
.native-parameters dd { margin:0; overflow-wrap:anywhere; color:#d7e5c7; }
.native-warning { color:#ebc792; }
.native-library-dialog { width:min(760px,calc(100vw - 36px)); height:min(680px,calc(100dvh - 40px)); padding:20px; border:1px solid #6d865c; border-radius:8px; background:#13261d; color:#e2eacb; }
.native-library-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.native-library-dialog::backdrop { background:#06170dc0; }
.native-library-heading { display:flex; align-items:center; justify-content:space-between; }
.native-library-heading h2 { margin:0; font-size:20px; }
.native-library-heading button { background:#294332; color:inherit; border:1px solid #6b825b; border-radius:4px; padding:7px 12px; }
.native-library-filters { display:flex; gap:10px; }
.native-library-filters input { flex:1; min-width:0; }
.native-library-filters select { width:180px; }
.native-library-filters input,.native-library-filters select { border:1px solid #617952; border-radius:4px; background:#1e3528; color:inherit; padding:9px; }
.native-library-dialog p { margin:0; font-size:11px; }
.native-library-results { min-height:0; flex:1; overflow:auto; border:1px solid #3a5540; border-radius:5px; }
.native-library-song { display:grid; grid-template-columns:minmax(0,1fr) 150px 80px; align-items:center; gap:12px; width:100%; text-align:left; padding:10px; color:inherit; background:transparent; border:0; border-bottom:1px solid #304a36; cursor:pointer; }
.native-library-song:hover,.native-library-song:focus-visible { background:#2d4935; }
.native-library-song strong { font-weight:500; overflow-wrap:anywhere; }
.native-library-song span,.native-library-song small { font-size:10px; color:#adbd9d; }
@media(max-width:600px){.native-library-song{grid-template-columns:minmax(0,1fr) 90px}.native-library-song small{display:none}.native-library-filters select{width:125px}}

/* The chart header owns document and arrangement controls; only bars scroll. */
.chart-top { flex-shrink: 0; min-width: 0; }
.chart-top > .panel-heading { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.chart-top .document-actions { flex: 1; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; border: 0; }
.chart-top .document-actions .secondary { padding: 6px 9px; }
.chart-top .document-actions .text-button { margin-left: 0; }
.chart-top .section-heading { position: static; }
.chart-top .composition-controls { padding-bottom: 8px; }
.chart-top .chart-footer { display: contents; }
.chart-top .chart-footer .text-button { white-space: nowrap; }
@media (max-width: 1100px) {
  .chart-top .document-actions { flex-basis: 100%; order: 1; justify-content: flex-start; }
  .chart-top .panel-heading > .meter-select { margin-left: auto; }
}

/* Three footer columns: song, centred transport, master and diagnostics. */
.controlbar { position: relative; z-index: 5; background: #111f1a; border-top: 1px solid #344439; color: #e9eee4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 2fr) minmax(0, 1fr); align-items: start; gap: 24px; padding: 12px 24px; }
.player-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.transport { display: flex; align-items: center; gap: 6px; }
.controlbar .transport-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; min-width: 0; margin: 0; padding: 6px; border: 1px solid #52644f; border-radius: 4px; background: transparent; color: #d1ddc9; }
.transport-icon svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.controlbar .play-button { background: #d8e9a9; border-color: #d8e9a9; color: #243d26; }
.loop-label { position: relative; cursor: pointer; }
.loop-label:has(input:checked) { background: #d8e9a9; border-color: #d8e9a9; color: #243d26; }
.loop-label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.loop-label:has(input:focus-visible) { outline: 3px solid #c19542; outline-offset: 3px; }
.playback-position { display: flex; gap: 10px; align-items: center; min-width: 0; margin: 0; }
.master-control { display: flex; gap: 8px; align-items: center; min-width: 0; color: #b9c9ae; font-size: 10px; }
.player { display: grid; grid-template-rows: 32px 20px; row-gap: 4px; }
.player-meta { display: flex; align-items: center; justify-content: center; margin: 0; }
.control-popover #play-state { text-align: left; margin: 0 0 12px; max-height: none; }
.now-playing { display: grid; grid-template-rows: 32px 20px; row-gap: 4px; align-items: center; }
.now-playing h3 { margin: 0; }
.player-tools { display: grid; grid-template-rows: 32px 20px; row-gap: 4px; align-items: center; min-width: 0; width: 100%; max-width: 300px; justify-self: end; }
.player-tools .master-control { min-height: 32px; }
.player-tools .tool-menus { margin: 0; }
.tool-menus { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-shrink: 0; }
.output-level { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 9px; color: #b9c9ae; font-variant-numeric: tabular-nums; }
#voice-count { margin: 10px 0; font-size: 11px; font-variant-numeric: tabular-nums; color: #b9c9ae; }
.sample-memory { margin: 10px 0; font-size: 11px; color: #9fb192; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .controlbar { grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 16px; padding: 12px 16px; }
  .player-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) {
  .controlbar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .player-tools { justify-self: center; }
  .now-playing { display: flex; align-items: baseline; gap: 12px; }
  .now-playing .small-label { display: none; }
  .now-playing h3 { margin: 0; font-size: 13px; }
}
@media (max-width: 520px) {
  .player-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .player-meta { flex-wrap: wrap; }
  .tool-menus { margin-left: auto; }
  .now-playing #player-style { font-size: 9px; }
}
body.access-pending > .studio-main, body.access-pending > .controlbar { visibility: hidden; }
.access-dialog { width: min(360px, calc(100vw - 32px)); padding: 28px; border: 1px solid #6e8268; border-radius: 10px; background: #15291f; color: #e6edda; }
.access-dialog::backdrop { background: #0d1c17ed; }
.access-dialog h1 { margin: 8px 0 12px; font-size: 28px; }
.access-dialog .eyebrow { color: #b8cd91; font-size: 10px; letter-spacing: .15em; }
.access-dialog #access-message { line-height: 1.5; min-height: 3em; }
.access-dialog label { display: block; margin: 14px 0 6px; }
.access-dialog input { width: 100%; min-width: 0; background: #0f2019; color: #f4f7ed; border: 1px solid #75856b; }
.access-dialog button { width: 100%; margin-top: 22px; background: #d9e9aa; color: #14251b; font-weight: 600; }

.generation-state { margin: 0 0 8px; font-size: 11px; overflow-wrap: anywhere; }
.generation-state.error { color: #ffb69d; }

/* Compact route controls and preparation status, outside the audio callback. */
.playback-position { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.playback-timeline { display:flex; align-items:center; gap:10px; min-width:0; }
.playback-timeline progress { flex:1; min-width:0; }
.play-loading { font-size:10px; line-height:1.3; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mixer-pan { display:flex; align-items:center; gap:7px; margin:0 0 7px auto; width:180px; max-width:100%; font-size:10px; color:var(--muted); }
.mixer-pan input { width:80px; min-width:40px; accent-color:#b7d78e; }
.mixer-pan output { min-width:27px; text-align:center; }
.mixer-pan button { padding:1px 4px; font-size:9px; min-height:20px; }
.drum-pad-mixer .track-channel { padding-left:7px; border-bottom:1px solid #304837; }

.fill-help {font-size:10px;color:var(--muted);margin:4px 0 8px;}