:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; background: #f5f7f6; color: #22302e; font-synthesis: none; --accent: #16766b; --line: #dce3df; --muted: #687771; --canvas-grid: #344b40; --canvas-wave: #81d7b2; --canvas-spectrum: #7bc5a5; --canvas-peak: #d6be89; --canvas-program: #16766b; --canvas-marker: #c8775b; }
* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
button, select, input, a { outline-offset: 4px; }
:focus-visible { outline: 2px solid #227fca; }
a { color: #226d67; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { max-width: 1440px; margin: auto; padding: 0 40px; position: relative; z-index: 1; }
#matrix-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .3; pointer-events: none; }
@media(prefers-reduced-motion: reduce) { #matrix-rain { display: none; } }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { display: grid; place-items: center; background: #79d3b7; width: 48px; height: 48px; border-radius: 7px; flex: none; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand h1 { font-size: 19px; line-height: 1.2; margin: 0; }
.local-tag { display: flex; gap: 7px; align-items: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.local-tag i { height: 6px; width: 6px; background: #548b6a; border-radius: 50%; }
.topbar-actions { display: flex; align-items: center; gap: 24px; }
.theme-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.theme-field select { width: 120px; height: 32px; font-size: 12px; }
.library-bar { min-height: 84px; display: flex; align-items: center; gap: 10px; }
.preset-field { display: flex; align-items: center; gap: 14px; }
.preset-field > label { font-size: 12px; color: var(--muted); font-weight: 600; }
select, input[type="text"] { height: 38px; color: #253732; background: #fff; border: 1px solid #cbd6d0; border-radius: 5px; padding: 0 10px; }
#mix-select { width: 224px; max-width: 100%; font-size: 13px; font-weight: 600; }
.storage-status { margin-left: auto; font-size: 11px; color: var(--muted); text-align: right; }
.icon { width: 17px; height: 17px; flex: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 14px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.primary { background: var(--accent); color: white; }
.primary:hover { background: #0d665b; }
.primary .icon { filter: invert(1); }
.secondary { background: #fff; border-color: #cbd6d0; color: #3f504b; }
.secondary:hover, .icon-button:hover:not(:disabled) { background: #eaf0ed; }
.icon-button { width: 33px; height: 33px; flex: none; display: inline-grid; place-items: center; border: 1px solid #d5dfd9; border-radius: 5px; background: transparent; padding: 6px; }
.icon-button img { width: 17px; height: 17px; opacity: .65; }
.icon-button[aria-pressed="true"] { background: #e4efec; border-color: #68aa9f; }
.icon-button.mute[aria-pressed="true"], #master-mute[aria-pressed="true"] { background: #fce9e4; border-color: #cf927c; }
.icon-button.solo[aria-pressed="true"] { background: #f9eccb; border-color: #c9a44f; }
.icon-button[aria-pressed="true"] img { opacity: 1; }
.transport-bar { display: grid; grid-template-columns: minmax(410px,1fr) auto minmax(220px,.72fr); align-items: center; gap: 28px; background: #e9efec; border-top: 1px solid #d9e2dc; border-bottom: 1px solid #d9e2dc; padding: 19px 20px; }
.transport { display: flex; align-items: center; gap: 8px; min-width: 0; }
#play-button { min-width: 100px; min-height: 43px; }
.stop-button { width: 41px; height: 43px; background: #fff; }
.mix-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.reset-button, .randomize-button, .restore-button { width: 52px; height: 48px; }
.reset-button img, .randomize-button img, .restore-button img { width: 24px; height: 24px; }
.transport-status { display: flex; align-items: center; gap: 7px; padding-left: 8px; color: #5b6e65; font-size: 12px; min-width: 0; }
#status { min-width: 0; overflow-wrap: anywhere; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #97a59e; }
.status-dot.playing { background: #148568; }
.session-clock { display: flex; gap: 14px; align-items: center; }
.session-clock output { font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 76px; }
.session-clock select { font-size: 12px; height: 33px; width: 94px; }
.master-control { display: flex; align-items: center; gap: 12px; }
.master-control .field { flex: 1; }
.field { display: grid; min-width: 0; gap: 9px; }
.field > span, .field-heading > label { color: #53665d; font-size: 12px; font-weight: 600; }
.field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
output { font-variant-numeric: tabular-nums; }
.field output { color: #314940; font-size: 12px; }
.level-heading > label { min-width: 0; }
.percent-field { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: 11px; font-weight: 500; }
.percent-field input { width: 72px; min-width: 0; height: 30px; padding: 3px 4px 3px 6px; border: 1px solid var(--edge, #cbd6d0); border-radius: 4px; background: var(--surface, #fff); color: var(--text, #253732); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.control-tooltip { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 16px)); padding: 7px 10px; border: 1px solid var(--edge, #cbd6d0); border-radius: 4px; background: var(--surface, #fff); color: var(--text, #253732); box-shadow: 0 3px 12px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
@media(prefers-reduced-motion: no-preference) {
  .button, .icon-button, .enable-toggle span { transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease; }
  .enable-toggle span::after { transition: transform 150ms ease; }
  .button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px); }
}
input[type="range"] { width: 100%; min-width: 0; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.workspace { display: grid; grid-template-columns: minmax(290px,.77fr) minmax(0,1.23fr); gap: 34px; padding: 32px 0 26px; }
[data-interface-mode="simple"] [data-advanced-only] { display: none !important; }
.mixer-mode-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.interface-mode-control { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); background: var(--tabs, #eaf0ec); border-radius: 5px; }
.interface-mode-control button, .tone-layer-tabs button, .effect-navigation button { color: var(--muted); background: transparent; border: 0; font-size: 12px; font-weight: 650; min-width: 0; }
.interface-mode-control button { border-radius: 3px; min-height: 30px; padding: 5px 16px; }
.interface-mode-control button[aria-pressed="true"] { background: var(--surface, #fff); color: var(--text, #22302e); }
.mode-status { color: var(--muted); font-size: 11px; }
.generator-stack { min-width: 0; border-right: 1px solid var(--line); padding-right: 34px; }
.generator-stack .generator-panel { padding: 0; border: 0; }
.tone-layer-toolbar { display: grid; gap: 8px; margin-bottom: 24px; }
.tone-layer-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--tabs, #eaf0ec); padding: 3px; border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.tone-layer-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 32px; border-radius: 3px; padding: 4px 8px; }
.tone-layer-tabs button[aria-selected="true"] { background: var(--surface, #fff); color: var(--text, #22302e); }
.tone-layer-tabs i { width: 5px; height: 5px; background: var(--toggle, #a5b4aa); border-radius: 50%; flex: none; }
.tone-layer-tabs i.on { background: var(--accent); }
.tone-editor { min-width: 0; }
.tone-editor > .field { margin-bottom: 22px; }
.tone-editor .section-heading h2 { flex: 1; }
.tone-shaping { margin-top: 22px; }
.sound-top .source-fx-button { width: 28px; height: 28px; padding: 5px; }
.source-fx-button.has-effects { border-color: var(--accent); background: var(--selected, #e4efec); }
dialog.source-effects { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 22px; overflow-y: auto; }
.source-effects h3 { font-size: 14px; margin: 0 0 14px; }
.source-effects .envelope-toolbar h3 { margin: 0; }
.source-effects .error { margin: 0; }
.effects-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; position: sticky; top: -22px; padding: 10px 0; background: var(--surface, #fff); z-index: 2; }
.effects-heading h2 { font-size: 18px; margin: 0; }
.effects-source { margin-bottom: 16px; }
.effect-navigation { display: grid; grid-template-columns: minmax(0, .7fr) minmax(82px, 1.2fr) repeat(2, minmax(0, .7fr)); gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.effect-navigation:has([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.effect-navigation button { min-height: 36px; padding: 4px; border-bottom: 2px solid transparent; }
.effect-navigation button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.stage-changes { min-width: 0; padding-top: 10px; }
.stage-changes > summary { padding: 6px 0; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.stage-changes > summary span { font-variant-numeric: tabular-nums; }
.stage-changes-heading { display: flex; justify-content: end; margin: 8px 0; }
.stage-changes-heading .button { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.stage-change-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.stage-change-row > :first-child { grid-column: 1 / -1; }
.stage-change-row > .icon-button { justify-self: end; width: 30px; height: 34px; }
.stage-change-error:empty { display: none; }
@media(max-width:1100px) { .generator-stack { padding-right: 25px; } }
@media(max-width:720px) { .generator-stack { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--line); } }
@media(max-width:480px) {
  .studio-trim { font-size: 11px; gap: 8px; }
  .studio-compare .check-field { margin-left: 0; }
  dialog.source-effects { padding: 16px; }
  .effects-heading { top: -16px; }
}
.generator-panel { border-right: 1px solid var(--line); padding-right: 34px; min-width: 0; }
.environment-panel { min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
.eyebrow { color: #819087; font-size: 10px; font-weight: 650; text-transform: uppercase; }
h2 { font-size: 21px; margin: 5px 0 0; line-height: 1.2; }
.channel-tools { display: flex; align-items: center; gap: 5px; }
.count-tag { color: #4d6b5a; background: #e7eee8; font-size: 11px; padding: 5px 8px; border-radius: 4px; }
.mode-control { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 42px; margin: 0; padding: 3px; gap: 3px; border: 1px solid #d6e0d9; background: #eaf0ec; border-radius: 6px; }
.mode-control label { cursor: pointer; min-width: 0; position: relative; }
.mode-control input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.mode-control span { height: 34px; display: grid; place-items: center; font-size: 11px; font-weight: 650; border-radius: 4px; color: #5f7266; }
.mode-control input:checked + span { background: #fff; color: #146d5f; box-shadow: 0 1px 3px #25392c18; }
.mode-control input:focus-visible + span { outline: 2px solid #227fca; }
.frequency-controls { display: grid; gap: 18px; margin-top: 24px; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.number-field { display: flex; align-items: center; border: 1px solid #c7d4cb; background: #fff; border-radius: 5px; height: 36px; }
.number-field:focus-within { outline: 2px solid #227fca; outline-offset: 2px; }
.number-field input { width: 94px; min-width: 0; height: 100%; padding: 0 4px 0 8px; border: 0; outline: 0; border-radius: inherit; color: #274337; background: transparent; font-size: 17px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.number-field span { padding: 0 9px 0 3px; color: #738478; font-size: 11px; }
.range-labels { display: flex; justify-content: space-between; font-size: 10px; color: #8a978e; margin-top: -6px; }
.tone-field { padding-top: 22px; margin-top: 20px; border-top: 1px solid var(--line); }
.signal-detail { margin-top: 20px; min-height: 16px; font-size: 11px; color: #6a7d70; font-variant-numeric: tabular-nums; }
.headphone-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #507468; font-size: 11px; }
.headphone-note .icon { width: 14px; height: 14px; opacity: .5; }
.sound-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.sound-row { border: 1px solid #dbe3dc; background: #fff; border-radius: 6px; padding: 15px; min-width: 0; }
.sound-row.active { border-color: #a7c7b4; }
.sound-row.silenced { background: #f1f4f2; }
.sound-top { display: flex; align-items: center; gap: 9px; }
.sound-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 5px; flex: none; }
.sound-icon img { width: 32px; height: 32px; opacity: .9; }
.bell-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0; color: var(--muted); font-size: 13px; }
.bell-interval-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bell-repeat .number-field input { width: 64px; appearance: textfield; -moz-appearance: textfield; }
.bell-repeat input::-webkit-inner-spin-button, .bell-repeat input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.bell-repeat-stepper { display: flex; gap: 4px; }
.bell-repeat-stepper .icon-button { width: 32px; height: 36px; }
.studio-trim { color: var(--muted); font-size: 12px; display: flex; gap: 10px; align-items: center; }
.studio-trim output { min-width: 62px; font-variant-numeric: tabular-nums; }
.studio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.studio-fields > * { min-width: 0; }
.studio-fields input, .studio-fields select { width: 100%; min-width: 0; }
.studio-voice-level { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; align-items: end; }
.studio-voice-level .icon-button { width: 34px; height: 34px; }
.studio-fx { border: 0; padding: 0; margin: 0; min-width: 0; }
.studio-fx legend { padding: 0; margin-bottom: 18px; font-size: 14px; font-weight: 650; }
.studio-fx > .field { margin-bottom: 18px; }
.envelope-toolbar { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 20px 0 10px; }
.envelope-toolbar > output { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.studio-compare { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.studio-compare > span { color: var(--muted); }
.studio-compare .check-field { margin: 0 0 0 8px; }
.studio-compare button { border: 1px solid var(--line); border-radius: 4px; padding: 7px 14px; background: transparent; color: inherit; font-size: 12px; }
.studio-compare button[aria-pressed="true"] { background: var(--accent); color: var(--primary-text, #fff); border-color: var(--accent); }
#am-envelope { display: block; width: 100%; height: 110px; background: var(--scope-bg, #1e2d28); border-radius: 5px; }
.blue { background: #e8f1f9; }.teal { background: #e0f0e9; }.violet { background: #efebf6; }.coral { background: #faede4; }
.sound-title { min-width: 0; flex: 1; }
.sound-title h3 { margin: 0; font-size: 13px; font-weight: 650; }
.sound-title small { display: block; color: #829084; font-size: 10px; margin-top: 3px; }
.enable-toggle { display: inline-flex; cursor: pointer; position: relative; flex: none; }
.enable-toggle input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.enable-toggle span { width: 28px; height: 17px; background: #d9e1db; border-radius: 12px; display: block; pointer-events: none; }
.enable-toggle span::after { content: ''; display: block; width: 11px; height: 11px; margin: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #31473725; }
.enable-toggle input:checked + span { background: #328670; }
.enable-toggle input:checked + span::after { transform: translateX(11px); }
.enable-toggle input:focus-visible + span { outline: 2px solid #227fca; outline-offset: 3px; }
.channel-strip { margin-top: 17px; display: grid; grid-template-columns: minmax(0,1fr) 66px; gap: 12px; align-items: end; }
.channel-strip .icon-button { width: 30px; height: 30px; }
.channel-strip .channel-tools { gap: 6px; padding-bottom: 1px; }
.pan-field { margin-top: 15px; display: grid; gap: 3px; }
.pan-heading { display: flex; justify-content: space-between; align-items: center; color: #7b8b7e; font-size: 10px; }
.pan-heading button { font-size: 10px; padding: 0; border: 0; background: transparent; color: #718472; cursor: pointer; }
.pan-field input { height: 17px; accent-color: #8a9a89; }
.track-state { color: #b5553a; min-height: 12px; font-size: 10px; margin: 5px 0 -5px; }
.environment-footer { min-height: 27px; display: flex; justify-content: space-between; align-items: center; color: #819083; font-size: 11px; margin-top: 10px; }
.text-button { padding: 3px 0; border: 0; background: none; color: #a17122; font-size: 11px; font-weight: 650; }
.output-panel { border-bottom: 1px solid var(--line); padding: 20px 0 24px; }
.output-toolbar { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; }
.output-title { display: flex; gap: 12px; align-items: baseline; }
.output-title h2 { font-size: 16px; margin: 0; }
.view-control { display: flex; border: 1px solid #d6e0d9; border-radius: 4px; padding: 2px; }
.view-control button { border: 0; background: transparent; font-size: 11px; padding: 5px 9px; color: #718071; border-radius: 3px; }
.view-control button[aria-pressed="true"] { background: #fff; color: #285d42; }
.meter-group { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 10px; color: #7d8b7e; }
.meter-group output { min-width: 64px; color: #566e57; }
.level-meter { width: 110px; height: 5px; background: #dce5dd; overflow: hidden; border-radius: 2px; }
.level-meter span { display: block; height: 100%; width: 0; background: #76a080; }
.scope { height: 104px; width: 100%; position: relative; overflow: hidden; background: #1e2d28; border-radius: 6px; }
.scope canvas { width: 100%; height: 100%; display: block; }
#scope-state { position: absolute; top: 9px; right: 12px; font-size: 10px; color: #92ad9e; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 25px; border-top: 1px solid var(--line); font-size: 10px; color: #8a958a; }
footer a { white-space: nowrap; color: #6f8574; }
dialog { padding: 26px; width: min(400px, calc(100% - 32px)); border: 1px solid #c9d5cd; border-radius: 8px; color: #283d30; box-shadow: 0 20px 60px #182c3533; }
dialog::backdrop { background: #1c2c2c66; }
dialog h2 { margin: 0 0 24px; font-size: 22px; }
dialog .field input { width: 100%; }
dialog p { color: #7b877d; font-size: 12px; min-height: 16px; }
#save-error { color: #b54d3c; }
.dialog-actions { display: flex; justify-content: end; gap: 9px; margin-top: 22px; }
@media(max-width:1100px) { .app-shell { padding: 0 25px; }.transport-bar { gap: 18px; grid-template-columns: 1fr auto; }.master-control { grid-column: 1 / -1; max-width: 500px; width: 100%; }.workspace { grid-template-columns: minmax(270px,.8fr) minmax(0,1.2fr); gap: 25px; }.generator-panel { padding-right: 25px; }.sound-list { grid-template-columns: 1fr; }.sound-row { padding: 13px; }.pan-field { margin-top: 10px; }.storage-status { display: none; } }
@media(max-width:720px) { .workspace { grid-template-columns: 1fr; gap: 26px; }.generator-panel { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 26px; }.sound-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.preset-field > label { display: none; }.preset-field { min-width: 0; flex: 1; }#mix-select { width: 100%; }.library-bar { gap: 6px; }.library-bar .button { padding: 8px 10px; }.level-meter { width: 70px; }.output-toolbar { gap: 10px; } }
@media(max-width:480px) { .app-shell { padding: 0 18px; }.topbar { min-height: 72px; }.brand h1 { font-size: 17px; }.library-bar { min-height: 76px; flex-wrap: wrap; padding: 14px 0; }.preset-field { flex-basis: calc(100% - 90px); }.library-bar #save-mix { order: 1; width: 100%; }.transport-bar { padding: 15px 12px; gap: 18px; grid-template-columns: 1fr; }.transport { justify-content: start; }.transport-status { margin-left: auto; }.session-clock { justify-content: space-between; }.master-control { grid-column: auto; max-width: none; }.sound-list { grid-template-columns: 1fr; }.output-toolbar { flex-wrap: wrap; }.meter-group { margin-left: auto; }.level-meter { display: none; }footer { flex-direction: column; gap: 8px; line-height: 1.5; } }
@media(max-width:480px) { .topbar-actions .local-tag { display: none; }.theme-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.theme-field select { width: 98px; } }
@media(max-width:760px) {
  .transport-bar { grid-template-columns: minmax(0, 1fr); }
  .transport { display: grid; grid-template-columns: 100px 41px minmax(0, 1fr); gap: 8px; }
  .transport-status { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; padding-left: 0; }
  .mix-actions { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .session-clock { justify-content: space-between; }
  .master-control { grid-column: auto; }
}

:root[data-color-scheme="dark"] {
  color-scheme: dark; background: var(--page); color: var(--text);
  --page: #08080b; --text: #efedf5; --accent: #b89af4; --accent-hover: #ccb4ff; --primary-text: #1a1029;
  --line: #2b2534; --muted: #b4aabd; --surface: #141218; --edge: #483d58; --hover: #251e30;
  --selected: #382b50; --transport: #100e16; --quiet: #0e0d12; --quiet-line: #352d41; --tabs: #110f16;
  --toggle: #62566f; --toggle-on: var(--accent); --tag: #2c2338; --meter: #332b40; --dialog-line: #655478;
  --focus: var(--accent); --link: var(--accent); --selected-line: var(--accent); --active: #9073b5;
  --label: var(--text); --value: var(--text); --detail: var(--muted); --tag-text: var(--text);
  --tab-text: var(--muted); --tab-selected: var(--selected); --tab-value: var(--text); --signal: var(--muted);
  --utility: #e1b8ef; --error: #f2aa95; --meter-fill: var(--accent); --footer: var(--muted); --dialog-text: var(--muted); --pan-accent: var(--accent); --playing: var(--accent);
  --scope-bg: #0d0b12; --scope-label: #b4aabd; --canvas-grid: #282133; --canvas-wave: #c6a6ff;
  --canvas-spectrum: #a98be4; --canvas-peak: #e8b4d8; --canvas-program: #c6a6ff; --canvas-marker: #f0b77a;
}
:root[data-theme="green"] {
  --page: #171b1a; --text: #e3ece6; --accent: #79d3b7; --accent-hover: #94e0c6; --primary-text: #132a20;
  --line: #354039; --muted: #a8b8ad; --surface: #252e28; --edge: #4b5b50; --hover: #34473b;
  --selected: #345346; --selected-line: #79b49b; --transport: #202a23; --quiet: #1d241f; --quiet-line: #3c4840; --tabs: #202b24;
  --toggle: #56635a; --toggle-on: #4e9e7f; --tag: #304337; --meter: #3b4a3e; --dialog-line: #597160;
  --focus: #82c5f5; --link: #97d1b8; --active: #739a81; --label: #b5c7b9; --value: #e0ebe3; --detail: #a6bbab;
  --tag-text: #bddcc6; --tab-text: #b4c9bb; --tab-selected: #365445; --tab-value: #d4f3df; --signal: #abc5b2;
  --utility: #ecd18d; --meter-fill: #91cfa6; --footer: #a8bcae; --dialog-text: #bacbbd; --pan-accent: #8a9a89; --playing: #148568;
  --scope-bg: #1e2d28; --scope-label: #92ad9e; --canvas-grid: #344b40; --canvas-wave: #81d7b2;
  --canvas-spectrum: #7bc5a5; --canvas-peak: #d6be89; --canvas-program: #8cdbbf; --canvas-marker: #c8775b;
}
:root[data-theme="cyberpunk"] {
  font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
  --page: #090a0e; --text: #e5eff6; --accent: #56e4ec; --accent-hover: #9af6fa; --primary-text: #07191c;
  --line: #2c3645; --muted: #a7b4c8; --surface: #111820; --edge: #415268; --hover: #20283a;
  --selected: #16343d; --transport: #10131d; --quiet: #0c1119; --quiet-line: #303c50; --tabs: #0e141e;
  --toggle: #566379; --tag: #26333b; --meter: #273342; --dialog-line: #57718b; --active: #56b5be;
  --utility: #f6ef61; --focus: #f6ef61; --scope-bg: #080d15; --scope-label: #99bfce;
  --canvas-grid: #23384a; --canvas-wave: #56e4ec; --canvas-spectrum: #56e4ec; --canvas-peak: #f6ef61;
  --canvas-program: #56e4ec; --canvas-marker: #ff67b7;
}
:root[data-theme="matrix"] {
  font-family: "Consolas", "Liberation Mono", monospace;
  --page: #030705; --text: #c0edc8; --accent: #72ed8e; --accent-hover: #a4ffb8; --primary-text: #05200d;
  --line: #203d28; --muted: #94b59b; --surface: #0b140e; --edge: #315b3c; --hover: #14291b;
  --selected: #183822; --transport: #08130c; --quiet: #07100a; --quiet-line: #24452e; --tabs: #07110b;
  --toggle: #42664c; --tag: #173321; --meter: #1a3623; --dialog-line: #3f7950; --active: #4ca962;
  --utility: #b5e9a3; --scope-bg: #020805; --scope-label: #87b894; --canvas-grid: #173820;
  --canvas-wave: #72ed8e; --canvas-spectrum: #50d578; --canvas-peak: #c5f7a0; --canvas-program: #72ed8e; --canvas-marker: #d5f2ac;
}
[data-color-scheme="dark"] :focus-visible, [data-color-scheme="dark"] .number-field:focus-within { outline-color: var(--focus); }
[data-color-scheme="dark"] a { color: var(--link); }
[data-color-scheme="dark"] .local-tag i { background: var(--accent); }
[data-color-scheme="dark"] .status-dot.playing { background: var(--playing); }
[data-color-scheme="dark"] .pan-field input { accent-color: var(--pan-accent); }
[data-color-scheme="dark"] select, [data-color-scheme="dark"] input[type="text"], [data-color-scheme="dark"] .secondary, [data-color-scheme="dark"] .number-field, [data-color-scheme="dark"] .sound-row, [data-color-scheme="dark"] .stop-button { background: var(--surface); color: var(--text); border-color: var(--edge); }
[data-color-scheme="dark"] .primary { color: var(--primary-text); }
[data-color-scheme="dark"] .primary:hover { background: var(--accent-hover); }
[data-color-scheme="dark"] .primary .icon, [data-color-scheme="dark"] .brand-mark img { filter: none; }
[data-color-scheme="dark"] .icon-button { border-color: var(--edge); }
[data-color-scheme="dark"] .icon-button img, [data-color-scheme="dark"] .secondary img, [data-color-scheme="dark"] .sound-icon img, [data-color-scheme="dark"] .headphone-note img { filter: invert(1); opacity: .85; }
[data-color-scheme="dark"] .secondary:hover, [data-color-scheme="dark"] .icon-button:hover:not(:disabled) { background: var(--hover); }
[data-color-scheme="dark"] .icon-button[aria-pressed="true"] { background: var(--selected); border-color: var(--selected-line); }
[data-color-scheme="dark"] .icon-button.mute[aria-pressed="true"], [data-color-scheme="dark"] #master-mute[aria-pressed="true"] { background: #563b35; border-color: #d29582; }
[data-color-scheme="dark"] .icon-button.solo[aria-pressed="true"] { background: #51452a; border-color: #cbb16a; }
[data-color-scheme="dark"] .transport-bar { background: var(--transport); border-color: var(--line); }
[data-color-scheme="dark"] .transport-status, [data-color-scheme="dark"] .field > span, [data-color-scheme="dark"] .field-heading > label { color: var(--label); }
[data-color-scheme="dark"] .field output, [data-color-scheme="dark"] .number-field input { color: var(--value); }
[data-color-scheme="dark"] .number-field span, [data-color-scheme="dark"] .range-labels, [data-color-scheme="dark"] .eyebrow, [data-color-scheme="dark"] .sound-title small, [data-color-scheme="dark"] .pan-heading, [data-color-scheme="dark"] .pan-heading button { color: var(--detail); }
[data-color-scheme="dark"] .count-tag { background: var(--tag); color: var(--tag-text); }
[data-color-scheme="dark"] .mode-control, [data-color-scheme="dark"] .view-control { background: var(--tabs); border-color: var(--edge); }
[data-color-scheme="dark"] .mode-control span, [data-color-scheme="dark"] .view-control button { color: var(--tab-text); }
[data-color-scheme="dark"] .mode-control input:checked + span, [data-color-scheme="dark"] .view-control button[aria-pressed="true"] { background: var(--tab-selected); color: var(--tab-value); }
[data-color-scheme="dark"] .sound-row.active { border-color: var(--active); }
[data-color-scheme="dark"] .sound-row.silenced { background: var(--quiet); border-color: var(--quiet-line); }
[data-color-scheme="dark"] .blue { background: #283f50; }
[data-color-scheme="dark"] .teal { background: #284839; }
[data-color-scheme="dark"] .violet { background: #3e344f; }
[data-color-scheme="dark"] .coral { background: #513d32; }
[data-color-scheme="dark"] .enable-toggle span { background: var(--toggle); }
[data-color-scheme="dark"] .enable-toggle input:checked + span { background: var(--toggle-on); }
[data-color-scheme="dark"] .signal-detail, [data-color-scheme="dark"] .headphone-note, [data-color-scheme="dark"] .environment-footer, [data-color-scheme="dark"] .meter-group, [data-color-scheme="dark"] .meter-group output { color: var(--signal); }
[data-color-scheme="dark"] .text-button { color: var(--utility); }
[data-color-scheme="dark"] .track-state, [data-color-scheme="dark"] #save-error { color: var(--error); }
[data-color-scheme="dark"] .level-meter { background: var(--meter); }
[data-color-scheme="dark"] .level-meter span { background: var(--meter-fill); }
[data-color-scheme="dark"] footer, [data-color-scheme="dark"] footer a { color: var(--footer); }
[data-color-scheme="dark"] dialog { background: var(--surface); border-color: var(--dialog-line); color: var(--text); }
[data-color-scheme="dark"] dialog p { color: var(--dialog-text); }
[data-color-scheme="dark"] .scope { background: var(--scope-bg); }
[data-color-scheme="dark"] #scope-state { color: var(--scope-label); }
[data-theme="cyberpunk"] .brand h1 { color: #f6ef61; }
[data-theme="cyberpunk"] .transport-bar { border-top-color: #56e4ec; border-bottom-color: #714160; }
[data-theme="cyberpunk"] .button, [data-theme="cyberpunk"] .icon-button, [data-theme="cyberpunk"] .mode-control, [data-theme="cyberpunk"] .sound-row { border-radius: 3px; }
[data-theme="matrix"] .brand h1 { color: var(--accent); }
[data-theme="matrix"] .app-shell { background: #0307054d; }
[data-theme="matrix"] .topbar-actions { gap: 8px; }
[data-theme="matrix"] .scope { background-image: repeating-linear-gradient(0deg, transparent 0 3px, #72ed8e08 3px 4px); }
[data-theme="matrix"] .button, [data-theme="matrix"] .icon-button, [data-theme="matrix"] .mode-control, [data-theme="matrix"] .sound-row { border-radius: 2px; }

.catalog-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto repeat(3, 33px); align-items: end; gap: 10px; padding: 0 0 18px; }
.compact-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.compact-field input, .compact-field select { width: 100%; min-width: 0; height: 34px; font-size: 12px; padding: 5px 8px; border: 1px solid #cbd6d0; background: #fff; color: #253732; border-radius: 5px; }
.catalog-controls .search-field { width: 100%; min-width: 0; }
.check-field { display: flex; align-items: center; gap: 6px; min-height: 34px; font-size: 12px; color: var(--muted); }
.check-field input { accent-color: var(--accent); }
#preset-summary { display: flex; align-items: center; min-height: 34px; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
@media(max-width:900px) { .catalog-controls { grid-template-columns: minmax(0, 1fr) auto repeat(3, 33px); }#preset-summary { grid-column: 1 / -1; } }
@media(max-width:480px) { .catalog-controls { grid-template-columns: minmax(0, 1fr) repeat(3, 33px); }.catalog-controls .search-field { grid-column: 1 / -1; } }
.automation-control { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.program-fields, .fade-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.wide-field { grid-column: 1 / -1; }
#program-monitor { margin-top: 18px; }
.program-readout { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
#live-rate { font-weight: 650; color: var(--accent); }
#program-canvas { width: 100%; height: 80px; display: block; }
progress { appearance: none; width: 100%; height: 6px; accent-color: var(--accent); display: block; border: 0; border-radius: 3px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.fade-fields { border-top: 1px solid var(--line); padding-top: 18px; }
#pulse-controls { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 8px; }
#pulse-controls h3, .noise-heading { font-size: 14px; margin: 18px 0 14px; }
#pulse-controls .field { margin-bottom: 14px; font-size: 12px; color: var(--muted); grid-template-columns: 1fr auto; gap: 6px; }
#pulse-controls input { grid-column: 1 / -1; }
.noise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.noise-list .sound-row { padding: 12px; }
.noise-list .sound-icon { display: grid; width: 32px; height: 32px; }
.noise-list .sound-icon img { width: 26px; height: 26px; }
.sound-icon.pink { background: #f6e2eb; }
.sound-icon.brown { background: #f1e6da; }
[data-color-scheme="dark"] .sound-icon.pink { background: #30232a; }
[data-color-scheme="dark"] .sound-icon.brown { background: #28211b; }
.noise-list .sound-icon.pink img, .noise-list .sound-icon.brown img { filter: none; opacity: 1; }
.noise-list .channel-strip { grid-template-columns: 1fr; gap: 8px; }
.noise-list .channel-tools { justify-content: end; }
.session-builder { margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.session-builder > .section-heading { margin-bottom: 12px; }
.session-builder h2 { font-size: 16px; margin: 0; }
#session-total { color: var(--muted); font-size: 11px; white-space: nowrap; }
.stage-row { min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.stage-header { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 8px; align-items: center; margin-bottom: 12px; }
.stage-number { font-size: 12px; color: var(--muted); font-weight: 650; }
.current-stage .stage-number { color: var(--accent); }
.stage-actions { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.stage-header .icon-button { width: 28px; height: 30px; padding: 5px; }
.stage-header .icon-button img { width: 15px; height: 15px; }
.stage-header select { height: 32px; }
.stage-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.stage-duration { border: 0; margin: 0; padding: 0; min-width: 0; }
.stage-duration legend { padding: 0; margin-bottom: 6px; }
.stage-duration-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr); gap: 4px; align-items: center; }
.stage-duration-inputs input { padding: 5px 3px; text-align: right; }
.stage-duration-inputs > span { text-align: center; }
.error { font-size: 12px; color: #b54d3c; line-height: 1.5; }
.error:empty { display: none; }
#duration:disabled { width: 128px; color: var(--muted); opacity: 1; }
.export-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.export-tabs button { flex: 1; font-size: 12px; padding: 10px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.export-tabs button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
#export-dialog, #import-dialog { width: min(500px, calc(100% - 32px)); max-height: 90vh; overflow: auto; }
#import-preview { max-height: 180px; overflow: auto; padding-left: 20px; font-size: 12px; line-height: 1.7; }
#import-current-field { margin-top: 14px; }
[data-color-scheme="dark"] .compact-field input, [data-color-scheme="dark"] .compact-field select { color: var(--text); background: var(--surface); border-color: var(--edge); }
[data-color-scheme="dark"] .error { color: var(--error); }
@media(max-width:1100px) { .noise-list { grid-template-columns: 1fr; }.noise-list .sound-icon { display: grid; }.noise-list .channel-strip { grid-template-columns: minmax(0, 1fr) 66px; } }
@media(max-width:720px) { .noise-list { grid-template-columns: 1fr; } }
@media(max-width:480px) { dialog { padding: 20px; }.export-tabs button { font-size: 11px; }.catalog-controls { gap: 8px; } }
.footer-links { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.credits-dialog { width: min(760px, calc(100% - 32px)); max-height: 85vh; overflow: auto; }
.credits-dialog form { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.credits-dialog form h2 { margin: 0; }
.credits-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 "Segoe UI", Arial, sans-serif; }
.credits-dialog summary { cursor: pointer; font-weight: 600; }

.topbar-actions { gap: 14px; }
.listening-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); color: #675219; }
.listening-notice > .icon { margin-top: 2px; opacity: .75; }
.listening-notice p { margin: 0; font-size: 12px; line-height: 1.6; color: inherit; }
.listening-notice strong { font-weight: 650; }
.info-dialog { width: min(580px, calc(100% - 32px)); max-height: 90vh; overflow: auto; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-heading h2 { margin: 0; }
.info-dialog > p { font-size: 13px; line-height: 1.7; color: #53665d; }
.info-dialog .listening-notice { margin: 18px 0; border-bottom: 1px solid var(--line); }
.info-definitions { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 12px; font-size: 13px; line-height: 1.6; }
.info-definitions dt { font-weight: 650; }
.info-definitions dd { margin: 0; color: #53665d; }
a.button, .guide-brand { text-decoration: none; }
.guide-shell { max-width: 1200px; padding: 0 32px; margin: auto; position: relative; z-index: 1; }
.guide-header { position: sticky; top: 0; z-index: 2; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: var(--page, #f5f7f6); }
.guide-brand { color: inherit; font-size: 19px; font-weight: 650; }
.guide-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 48px; padding: 32px 0 48px; }
.guide-toc { position: sticky; top: 116px; align-self: start; max-height: calc(100vh - 140px); overflow: auto; }
.guide-toc h2 { margin: 0 0 12px; font-size: 13px; }
.guide-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.guide-toc a { display: block; padding: 6px 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-decoration: none; }
.guide-toc a:hover { color: var(--accent); text-decoration: underline; }
.guide-content { min-width: 0; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.guide-content h1 { margin: 0 0 14px; font-size: 28px; line-height: 1.25; }
.guide-content h2 { margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 20px; line-height: 1.35; }
.guide-content h3 { font-size: 16px; margin-top: 24px; }
.guide-content h1, .guide-content h2, .guide-content h3 { scroll-margin-top: 112px; }
.guide-content p { margin: 12px 0; }
.guide-content li { margin: 7px 0; }
.guide-content ul, .guide-content ol { padding-left: 24px; }
.guide-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13px; line-height: 1.65; margin: 18px 0; }
.guide-content th, .guide-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-content th { color: var(--accent); }
.guide-content code { font-family: Consolas, monospace; font-size: 13px; }
.guide-content > p:first-of-type { color: var(--muted); font-size: 15px; }
[data-color-scheme="dark"] .listening-notice { color: #e5d193; }
[data-color-scheme="dark"] .listening-notice > .icon { filter: invert(1); opacity: .85; }
[data-color-scheme="dark"] .info-dialog > p, [data-color-scheme="dark"] .info-definitions dd { color: var(--dialog-text); }
[data-color-scheme="dark"] .guide-brand { color: var(--text); }
@media(max-width:720px) { .guide-shell { padding: 0 22px; }.guide-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }.guide-toc { position: static; max-height: none; border-bottom: 1px solid var(--line); padding-bottom: 20px; }.guide-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }
@media(max-width:480px) { .topbar-actions { gap: 7px; }.topbar-actions .icon-button { width: 30px; height: 32px; padding: 5px; }.brand { gap: 8px; }.brand-mark { width: 42px; height: 42px; }.theme-field select { width: 82px; }.guide-shell { padding: 0 18px; }.guide-header { min-height: 76px; }.guide-layout { padding-top: 24px; }.guide-content h1 { font-size: 25px; }.guide-content h1, .guide-content h2, .guide-content h3 { scroll-margin-top: 94px; }.info-definitions { grid-template-columns: 78px minmax(0, 1fr); gap: 8px; } }