frontend/app.css

:root {
  color-scheme: dark;
  --ui-bg: #0b0d0e;
  --ui-surface: #121517;
  --ui-surface-2: #171b1e;
  --ui-surface-3: #1b2023;
  --ui-line: rgba(218, 233, 229, .1);
  --ui-line-strong: rgba(218, 233, 229, .19);
  --ui-text: #eef4f1;
  --ui-soft: #b1bcb8;
  --ui-muted: #727e7a;
  --ui-accent: #45d1b5;
  --ui-accent-dark: #168f7d;
  --ui-warm: #eead68;
  --ui-danger: #fb7185;
  --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:host {
  display: block;
  min-height: 100vh;
  overflow-x: hidden;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background:
    linear-gradient(115deg, rgba(69,209,181,.045) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #101315 0%, #0b0d0e 34%, #090b0c 100%);
  background-size: 56px 56px, auto;
}

html, body { min-height: 100%; overflow-x: hidden; background: var(--ui-bg) !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ui-text); font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
.gradio-container, .gradio-container.dark { min-height: 100vh !important; max-width: none !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; color: var(--ui-text) !important; background: transparent !important; font-family: var(--ui-font) !important; }
.gradio-container .prose, .gradio-container .prose * { color: inherit; }
.gradio-container footer { display: none !important; }

#app-shell { width: min(1360px, calc(100% - 44px)); min-width: 0; margin: 0 auto; padding: 22px 0 48px; gap: 14px; }
#masthead, #intro { padding: 0 !important; border: 0 !important; background: transparent !important; }

.workbench-nav { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 20px; padding: 0 2px 11px; border-bottom: 1px solid var(--ui-line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ui-text) !important; text-decoration: none; }
.wordmark-glyph { display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(69,209,181,.3); border-radius: 8px; background: #101a18; box-shadow: inset 0 0 0 5px rgba(69,209,181,.035); }
.wordmark-glyph i { display: block; width: 2px; border-radius: 2px; background: var(--ui-accent); box-shadow: 0 0 7px rgba(69,209,181,.22); }
.wordmark-glyph i:nth-child(1) { height: 8px; opacity: .65; }
.wordmark-glyph i:nth-child(2) { height: 17px; }
.wordmark-glyph i:nth-child(3) { height: 12px; opacity: .82; }
.wordmark-glyph i:nth-child(4) { height: 20px; }
.wordmark strong, .wordmark small { display: block; }
.wordmark strong { font-size: .92rem; font-weight: 670; letter-spacing: -.02em; }
.wordmark small { margin-top: 2px; color: var(--ui-muted); font: .53rem var(--ui-mono); letter-spacing: .045em; text-transform: uppercase; }
.runtime-status { display: flex; align-items: center; gap: 6px; }
.runtime-status span { display: inline-flex; align-items: center; min-height: 28px; gap: 7px; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 6px; color: var(--ui-muted); background: rgba(255,255,255,.018); font: 590 .56rem var(--ui-mono); letter-spacing: .025em; text-transform: uppercase; }
.runtime-status .model-status { border-color: rgba(69,209,181,.24); color: var(--ui-soft); background: rgba(69,209,181,.035); }
.runtime-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 10px rgba(69,209,181,.65); }
.runtime-status .gpu-status::before { color: var(--ui-soft); content: "◇"; font-size: .65rem; }

.workbench-intro { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(390px,.75fr); align-items: end; gap: clamp(32px,5vw,82px); padding: clamp(28px,4vw,46px) 2px clamp(24px,3.3vw,38px); }
.intro-statement { max-width: 790px; }
.overline { display: inline-block; margin-bottom: 11px; color: var(--ui-accent); font: 620 .58rem var(--ui-mono); letter-spacing: .1em; text-transform: uppercase; }
.intro-statement h1 { margin: 0; color: var(--ui-text); font-size: clamp(2.25rem,4.8vw,4.25rem); font-weight: 575; letter-spacing: -.058em; line-height: .96; }
.intro-statement h1 em { color: #8ee5d3; font-style: normal; }
.intro-statement p { max-width: 700px; margin: 14px 0 0; color: var(--ui-soft); font-size: clamp(.84rem,1.25vw,.98rem); line-height: 1.58; }
.project-references { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border-top: 1px solid var(--ui-line-strong); border-bottom: 1px solid var(--ui-line); }
.project-references a { position: relative; display: block; min-width: 0; padding: 12px 31px 12px 12px; color: var(--ui-text) !important; text-decoration: none; transition: background 140ms ease; }
.project-references a + a { border-left: 1px solid var(--ui-line); }
.project-references span, .project-references strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-references span { margin-bottom: 5px; color: var(--ui-muted); font: 590 .51rem var(--ui-mono); letter-spacing: .065em; text-transform: uppercase; }
.project-references strong { font: 620 .68rem var(--ui-mono); }
.project-references i { position: absolute; top: 50%; right: 12px; color: #697570; font: normal .72rem var(--ui-mono); transform: translateY(-50%); transition: color 140ms ease, transform 140ms ease; }
.project-references a:hover { background: rgba(69,209,181,.045); }
.project-references a:hover i { color: var(--ui-accent); transform: translate(1px,calc(-50% - 1px)); }
.project-references a:focus-visible { z-index: 1; outline: 2px solid rgba(69,209,181,.72); outline-offset: -2px; background: rgba(69,209,181,.055); }

#input-workbench, #transcription-panel { position: relative; min-width: 0; padding: clamp(16px,1.9vw,23px) !important; border: 1px solid var(--ui-line) !important; background: rgba(18,21,23,.94) !important; box-shadow: 0 20px 58px rgba(0,0,0,.19) !important; }
#input-workbench { border-radius: 14px !important; }
#transcription-panel { border-radius: 14px !important; }

.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 1px 13px; border-bottom: 1px solid var(--ui-line); }
.panel-heading span { display: block; margin-bottom: 5px; color: var(--ui-accent); font: 620 .57rem var(--ui-mono); letter-spacing: .1em; text-transform: uppercase; }
.studio-heading span { color: var(--ui-warm); }
.panel-heading h2 { margin: 0; color: var(--ui-text); font-size: 1.02rem; font-weight: 625; letter-spacing: -.025em; }
.panel-heading p { max-width: 440px; margin: 0; color: var(--ui-muted); font-size: .68rem; line-height: 1.45; text-align: right; }

#source-panel, #decode-panel, #notation-panel { min-width: 0; padding: 14px !important; border: 1px solid var(--ui-line) !important; border-radius: 9px !important; background: rgba(7,10,10,.32) !important; box-shadow: none !important; }
#decode-panel, #notation-panel {
  --block-background-fill: rgba(255,255,255,.014);
  --block-border-color: var(--ui-line);
  --input-background-fill: rgba(255,255,255,.025);
  --input-background-fill-focus: rgba(255,255,255,.045);
  --input-border-color: var(--ui-line);
  --input-border-color-focus: rgba(218,233,229,.28);
  --panel-background-fill: transparent;
  --checkbox-background-color: #0c1110;
  --checkbox-background-color-hover: #15201d;
  --checkbox-background-color-focus: #101916;
  --checkbox-background-color-selected: var(--ui-accent);
  --checkbox-border-color: rgba(218,233,229,.25);
  --checkbox-border-color-hover: rgba(69,209,181,.72);
  --checkbox-border-color-focus: var(--ui-accent);
  --checkbox-border-color-selected: var(--ui-accent);
  --checkbox-label-background-fill: rgba(255,255,255,.018);
  --checkbox-label-background-fill-hover: rgba(69,209,181,.07);
  --checkbox-label-background-fill-focus: rgba(69,209,181,.09);
  --checkbox-label-background-fill-selected: rgba(69,209,181,.16);
  --checkbox-label-border-color: var(--ui-line);
  --checkbox-label-border-color-selected: rgba(69,209,181,.52);
  --checkbox-label-text-color: var(--ui-soft);
  --checkbox-label-text-color-selected: #eafffa;
}
#decode-panel { --color-accent: var(--ui-accent); --border-color-primary: var(--ui-accent); }
#notation-panel {
  --checkbox-background-color-hover: #211a13;
  --checkbox-background-color-focus: #1c1712;
  --checkbox-background-color-selected: var(--ui-warm);
  --checkbox-border-color-hover: rgba(238,173,104,.72);
  --checkbox-border-color-focus: var(--ui-warm);
  --checkbox-border-color-selected: var(--ui-warm);
  --checkbox-label-background-fill-hover: rgba(238,173,104,.07);
  --checkbox-label-background-fill-focus: rgba(238,173,104,.09);
  --checkbox-label-background-fill-selected: rgba(238,173,104,.15);
  --checkbox-label-border-color-selected: rgba(238,173,104,.5);
  --checkbox-label-text-color-selected: #ffe5c7;
}
#notation-panel .form, #notation-panel #score-primary-settings, #notation-panel #score-musical-settings { border-color: var(--ui-line) !important; background: rgba(255,255,255,.014) !important; box-shadow: none !important; }
#source-panel { width: 100%; margin-top: 10px; background: linear-gradient(105deg,rgba(69,209,181,.045),rgba(7,10,10,.34) 58%) !important; }
#settings-grid { align-items: stretch; gap: 10px; padding-top: 10px; }
#decode-panel { flex: 2 1 0% !important; }
#notation-panel { flex: 1 1 0% !important; }
#notation-panel { background: linear-gradient(145deg,rgba(238,173,104,.035),rgba(7,10,10,.34)) !important; }
.control-heading { display: flex; align-items: flex-start; gap: 10px; min-height: 42px; padding-bottom: 9px; }
.control-icon { display: grid; width: 26px; height: 26px; flex: none; border: 1px solid rgba(69,209,181,.24); border-radius: 6px; color: var(--ui-accent); background: rgba(69,209,181,.04); place-items: center; }
.control-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
#notation-panel .control-icon { border-color: rgba(238,173,104,.25); color: var(--ui-warm); background: rgba(238,173,104,.04); }
.control-heading strong, .control-heading small { display: block; }
.control-heading strong { color: var(--ui-text); font-size: .77rem; font-weight: 620; }
.control-heading small { margin-top: 3px; color: var(--ui-muted); font-size: .59rem; line-height: 1.4; }

#audio-input { overflow: hidden; min-height: 154px; border: 1px dashed rgba(69,209,181,.3) !important; border-radius: 8px !important; background: rgba(5,9,8,.58) !important; }
#audio-input:hover, #audio-input:focus-within { border-color: rgba(69,209,181,.7) !important; background: rgba(69,209,181,.035) !important; }
#audio-input .wrap, #audio-input > div, #audio-input .upload-container { border: 0 !important; background: transparent !important; }
#audio-input .upload-container { min-height: 128px; }
#audio-input button, #audio-input .upload-button { border: 1px solid var(--ui-line-strong) !important; border-radius: 7px !important; background: var(--ui-surface-3) !important; color: var(--ui-text) !important; box-shadow: none !important; }
#audio-input audio { width: 100%; filter: saturate(.72) contrast(.96); }

#youtube-import-panel { width: 100%; min-width: 0; gap: 7px !important; margin-top: 10px; padding: 10px 11px !important; border: 1px solid var(--ui-line) !important; border-radius: 8px !important; background: rgba(4,8,8,.34) !important; box-shadow: none !important; --input-background-fill: rgba(255,255,255,.025); --input-border-color: var(--ui-line); --input-border-color-focus: rgba(69,209,181,.48); }
#youtube-import-heading, #youtube-import-heading > div, #youtube-import-heading .html-container, #youtube-import-status-output, #youtube-import-status-output > div, #youtube-import-status-output .html-container { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.youtube-import-heading { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; min-width: 0; gap: 9px; }
.youtube-import-icon { display: grid; width: 26px; height: 26px; border: 1px solid rgba(69,209,181,.2); border-radius: 6px; color: #8bdccc; background: rgba(69,209,181,.035); place-items: center; }
.youtube-import-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.youtube-import-heading strong, .youtube-import-heading small { display: block; }
.youtube-import-heading strong { color: var(--ui-soft); font-size: .65rem; font-weight: 620; }
.youtube-import-heading small { margin-top: 2px; color: var(--ui-muted); font-size: .53rem; line-height: 1.35; }
.youtube-import-heading > b { color: #56615d; font: 580 .48rem var(--ui-mono); letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
#youtube-import-row { display: grid !important; grid-template-columns: minmax(0,1fr) 156px; align-items: stretch; min-width: 0; gap: 7px; }
#youtube-url-input { width: 100%; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#youtube-url-input > div, #youtube-url-input .wrap { width: 100%; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#youtube-url-input input { width: 100%; min-height: 42px; padding: 0 12px !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; outline: 0; color: var(--ui-text) !important; background: rgba(255,255,255,.024) !important; font: .66rem var(--ui-mono) !important; box-shadow: none !important; transition: border-color .15s ease,background .15s ease; }
#youtube-url-input input::placeholder { color: #56615d !important; opacity: 1; }
#youtube-url-input input:focus { border-color: rgba(69,209,181,.5) !important; background: rgba(69,209,181,.035) !important; }
#youtube-import-button { width: 100% !important; min-width: 0 !important; min-height: 42px !important; border: 1px solid rgba(69,209,181,.32) !important; border-radius: 6px !important; color: #d9fff7 !important; background: rgba(69,209,181,.085) !important; font-size: .65rem !important; font-weight: 650 !important; box-shadow: none !important; }
#youtube-import-button:hover:not(:disabled) { border-color: rgba(69,209,181,.58) !important; background: rgba(69,209,181,.14) !important; }
#youtube-import-button:disabled { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; background: rgba(255,255,255,.018) !important; }
.youtube-import-status { display: grid; grid-template-columns: 7px minmax(0,1fr); align-items: center; min-width: 0; gap: 8px; padding: 1px 2px 0; }
.youtube-import-status > i { width: 7px; height: 7px; border: 1px solid var(--ui-line-strong); border-radius: 50%; background: #3a4441; }
.youtube-import-status strong, .youtube-import-status span { display: inline; font: .49rem/1.4 var(--ui-mono); }
.youtube-import-status strong { margin-right: 7px; color: var(--ui-soft); font-weight: 610; }
.youtube-import-status span { color: var(--ui-muted); }
.youtube-import-status[data-state="working"] > i { border-color: var(--ui-warm); background: var(--ui-warm); box-shadow: 0 0 10px rgba(238,173,104,.42); animation: stem-status-pulse 1.2s ease-in-out infinite; }
.youtube-import-status[data-state="complete"] > i { border-color: var(--ui-accent); background: var(--ui-accent); box-shadow: 0 0 10px rgba(69,209,181,.42); }
.youtube-import-status[data-state="error"] > i { border-color: var(--ui-danger); background: var(--ui-danger); }
.youtube-import-status[data-state="error"] strong { color: #ffacb9; }

#stem-workbench { width: 100%; gap: 9px !important; margin-top: 10px; padding: 12px !important; border: 1px solid var(--ui-line) !important; border-radius: 8px !important; background: linear-gradient(135deg,rgba(69,209,181,.022),rgba(255,255,255,.008) 52%,rgba(5,9,8,.26)) !important; box-shadow: none !important; }
#stem-workbench-heading, #stem-workbench-heading > div, #stem-workbench-heading .html-container, #stem-source-heading, #stem-source-heading > div, #stem-source-heading .html-container, #stem-status-output, #stem-status-output > div, #stem-status-output .html-container { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.stem-workbench-heading { display: flex; align-items: flex-end; justify-content: space-between; min-width: 0; gap: 14px; padding: 0 1px 2px; }
.stem-workbench-heading strong, .stem-workbench-heading small { display: block; }
.stem-workbench-heading strong { color: var(--ui-soft); font-size: .67rem; font-weight: 620; }
.stem-workbench-heading small { margin-top: 3px; color: var(--ui-muted); font-size: .55rem; line-height: 1.4; }
.stem-workbench-heading a { flex: none; color: #92dccc !important; font: 590 .52rem var(--ui-mono); text-decoration: none; }
.stem-workbench-heading a:hover { color: #d8fff6 !important; }
#demucs-quality-row { display: grid !important; grid-template-columns: 175px minmax(0,1fr); align-items: center; min-width: 0; gap: 10px; padding: 7px 8px !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; background: rgba(5,9,8,.3) !important; }
#demucs-quality-heading, #demucs-quality-heading > div, #demucs-quality-heading .html-container { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.demucs-quality-copy strong, .demucs-quality-copy small { display: block; }
.demucs-quality-copy strong { color: var(--ui-soft); font-size: .6rem; font-weight: 620; }
.demucs-quality-copy small { margin-top: 2px; color: var(--ui-muted); font: .48rem/1.35 var(--ui-mono); }
#demucs-quality-preset, #demucs-quality-preset > div, #demucs-quality-preset fieldset { width: 100%; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#demucs-quality-preset .wrap { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#demucs-quality-preset label { display: flex !important; align-items: center; justify-content: center; min-width: 0; min-height: 32px; gap: 6px; padding: 5px 8px !important; border: 1px solid var(--ui-line) !important; border-radius: 4px !important; color: var(--ui-muted) !important; background: rgba(255,255,255,.014) !important; font: 590 .53rem var(--ui-mono) !important; cursor: pointer; }
#demucs-quality-preset label:hover { border-color: rgba(69,209,181,.34) !important; color: var(--ui-soft) !important; background: rgba(69,209,181,.045) !important; }
#demucs-quality-preset label.selected, #demucs-quality-preset label:has(input:checked) { border-color: rgba(69,209,181,.48) !important; color: #dffff8 !important; background: rgba(69,209,181,.12) !important; }
#demucs-quality-preset input[type="radio"] { accent-color: var(--ui-accent); }
#stem-separation-row { display: grid !important; grid-template-columns: minmax(0,1fr) 205px; align-items: stretch; gap: 8px; }
#stem-status-output { min-width: 0; flex: 1 1 auto !important; }
.stem-status { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; min-height: 46px; gap: 9px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 6px; background: rgba(5,9,8,.38); }
.stem-status > i { width: 8px; height: 8px; border: 1px solid var(--ui-line-strong); border-radius: 50%; background: var(--ui-faint,#4e5855); }
.stem-status strong, .stem-status span { display: block; }
.stem-status strong { color: var(--ui-soft); font-size: .61rem; font-weight: 620; }
.stem-status span { margin-top: 3px; color: var(--ui-muted); font: .5rem/1.4 var(--ui-mono); }
.stem-status > b { color: #56615d; font: 580 .48rem var(--ui-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.stem-status[data-state="ready"], .stem-status[data-state="complete"], .stem-status[data-state="selected"] { border-color: rgba(69,209,181,.25); background: rgba(69,209,181,.035); }
.stem-status[data-state="ready"] > i, .stem-status[data-state="complete"] > i, .stem-status[data-state="selected"] > i { border-color: rgba(69,209,181,.72); background: var(--ui-accent); box-shadow: 0 0 10px rgba(69,209,181,.4); }
.stem-status[data-state="working"] { border-color: rgba(238,173,104,.3); background: rgba(238,173,104,.045); }
.stem-status[data-state="working"] > i { border-color: var(--ui-warm); background: var(--ui-warm); box-shadow: 0 0 11px rgba(238,173,104,.4); animation: stem-status-pulse 1.2s ease-in-out infinite; }
.stem-status[data-state="error"] { border-color: rgba(251,113,133,.32); background: rgba(251,113,133,.045); }
.stem-status[data-state="error"] > i { border-color: var(--ui-danger); background: var(--ui-danger); }
#separate-stems-button { width: 100% !important; min-width: 0 !important; min-height: 46px !important; border: 1px solid rgba(69,209,181,.32) !important; border-radius: 6px !important; background: rgba(69,209,181,.075) !important; color: #cffff5 !important; font-size: .65rem !important; font-weight: 650 !important; box-shadow: none !important; }
#separate-stems-button:hover:not(:disabled) { border-color: rgba(69,209,181,.55) !important; background: rgba(69,209,181,.13) !important; }
#separate-stems-button:disabled { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; background: rgba(255,255,255,.018) !important; }
.stem-source-heading { display: flex; align-items: flex-end; justify-content: space-between; min-width: 0; gap: 14px; margin-top: 2px; padding: 10px 1px 0; border-top: 1px solid var(--ui-line); }
.stem-source-heading div, .stem-source-heading span, .stem-source-heading strong, .stem-source-heading small { display: block; }
.stem-source-heading span { margin-bottom: 3px; color: var(--ui-accent); font: 600 .47rem var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; }
.stem-source-heading strong { color: var(--ui-soft); font-size: .65rem; font-weight: 620; }
.stem-source-heading small { max-width: 300px; color: var(--ui-muted); font-size: .52rem; line-height: 1.4; text-align: right; }
#stem-source-selector, #stem-source-selector > div, #stem-source-selector .form, #stem-source-selector fieldset { width: 100%; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; --checkbox-background-color-selected: transparent; --checkbox-border-color-selected: transparent; --checkbox-label-background-fill-selected: transparent; --checkbox-label-border-color-selected: transparent; --checkbox-label-text-color-selected: #eafffa; }
#stem-source-selector .wrap { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#stem-source-selector label { position: relative; display: flex !important; align-items: center; justify-content: flex-start; overflow: hidden; width: 100%; min-width: 0; min-height: 56px; gap: 9px; padding: 9px 10px !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; color: var(--ui-muted) !important; background: rgba(2,5,5,.34) !important; font-size: .61rem !important; font-weight: 580 !important; cursor: pointer; transition: border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease; }
#stem-source-selector label::before { display: grid; width: 30px; height: 30px; flex: none; border: 1px solid var(--ui-line); border-radius: 6px; content: "SRC"; background: rgba(255,255,255,.018); color: var(--ui-faint); font: 620 .43rem var(--ui-mono); letter-spacing: .04em; place-items: center; transition: inherit; }
#stem-source-selector label:nth-of-type(1)::before { content: "MIX"; }
#stem-source-selector label:nth-of-type(2)::before { content: "VOX"; }
#stem-source-selector label:nth-of-type(3)::before { content: "DRM"; }
#stem-source-selector label:nth-of-type(4)::before { content: "BAS"; }
#stem-source-selector label:nth-of-type(5)::before { content: "OTH"; }
#stem-source-selector label::after { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: #303936; box-shadow: 0 0 0 2px rgba(255,255,255,.018); }
#stem-source-selector label:hover:not(:has(input:disabled)) { border-color: rgba(69,209,181,.34) !important; color: var(--ui-soft) !important; background: rgba(69,209,181,.045) !important; transform: translateY(-1px); }
#stem-source-selector label.selected, #stem-source-selector label:has(input:checked) { border-color: rgba(69,209,181,.5) !important; color: #eafffa !important; background: linear-gradient(135deg,rgba(69,209,181,.16),rgba(69,209,181,.055)) !important; box-shadow: inset 0 1px rgba(255,255,255,.035); }
#stem-source-selector label.selected::before, #stem-source-selector label:has(input:checked)::before { border-color: rgba(69,209,181,.42); color: #cffff5; background: rgba(69,209,181,.12); }
#stem-source-selector label.selected::after, #stem-source-selector label:has(input:checked)::after { background: var(--ui-accent); box-shadow: 0 0 8px rgba(69,209,181,.55); }
#stem-source-selector label:has(input:focus-visible) { outline: 2px solid rgba(69,209,181,.72); outline-offset: 2px; }
#stem-source-selector input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
#stem-source-selector label > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
#stem-source-selector label:has(input:disabled):not(:has(input:checked)) { opacity: .38; cursor: not-allowed; }
#stem-source-selector .wrap > label:only-child { max-width: 220px; }

#decode-panel label, #notation-panel label { color: var(--ui-soft) !important; font-size: .7rem !important; }
#decode-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #decode-panel textarea, #decode-panel select, #notation-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #notation-panel textarea, #notation-panel select { border-color: var(--ui-line) !important; border-radius: 7px !important; background-color: rgba(255,255,255,.03) !important; color: var(--ui-text) !important; }
#decode-panel input[type="range"] { accent-color: var(--ui-accent); }
#notation-panel input[type="range"] { accent-color: var(--ui-warm); }
#decode-panel input[type="checkbox"], #notation-panel input[type="checkbox"], #notation-panel input[type="radio"] { position: relative; z-index: 1; flex: none; cursor: pointer; }
#decode-panel input[type="checkbox"]:focus-visible, #decode-panel input[type="radio"]:focus-visible { outline: 2px solid rgba(69,209,181,.72) !important; outline-offset: 2px; }
#notation-panel input[type="checkbox"]:focus-visible, #notation-panel input[type="radio"]:focus-visible { outline: 2px solid rgba(238,173,104,.72) !important; outline-offset: 2px; }
#decode-panel label.selected { border-color: rgba(69,209,181,.52) !important; background: rgba(69,209,181,.16) !important; color: #eafffa !important; }
#notation-panel label.selected { border-color: rgba(238,173,104,.5) !important; background: rgba(238,173,104,.15) !important; color: #ffe5c7 !important; }
#decoding-options, #score-primary-settings, #score-musical-settings { gap: 7px; }
#score-primary-settings > div, #score-musical-settings > div { min-width: 112px; }
#score-quantization { padding: 8px !important; border: 1px solid var(--ui-line) !important; border-radius: 7px !important; background: rgba(255,255,255,.012) !important; }
#score-quantization .wrap { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#score-quantization label { min-width: 0; min-height: 30px; justify-content: center; padding: 4px 6px !important; border-radius: 5px !important; }
#score-quantization .info { color: var(--ui-muted) !important; font-size: .52rem !important; line-height: 1.35; }
#transcription-controls-layout { align-items: stretch; flex-wrap: nowrap !important; min-width: 0; gap: 10px; }
#instrument-lock-panel { min-width: 0 !important; flex: 3 1 0% !important; }
#decode-settings-panel { min-width: 220px !important; align-self: stretch; flex: 2 1 0% !important; justify-content: space-between; gap: 10px !important; padding: 10px !important; border: 1px solid var(--ui-line) !important; border-radius: 7px !important; background: rgba(255,255,255,.012) !important; box-shadow: none !important; }
#decode-settings-panel > .form, #decode-settings-panel .form { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#decode-settings-panel #decode-preset { width: 100%; }
#decode-settings-panel #decode-preset, #decode-settings-panel #decoding-options, #decode-settings-panel #decoding-options > div { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#decode-settings-panel #decode-preset .wrap { display: grid !important; grid-template-columns: 1fr; gap: 4px !important; background: transparent !important; }
#decode-settings-panel #decode-preset label { width: 100%; min-height: 33px; }
#decode-settings-panel #decoding-options { width: 100%; }
#decode-preset { border: 1px solid var(--ui-line) !important; border-radius: 8px !important; background: rgba(255,255,255,.015) !important; }
#decode-preset label { min-height: 34px; border-radius: 5px !important; }

#instrument-lock-heading, #instrument-lock-heading > div, #instrument-lock-heading .html-container { padding: 0 !important; border: 0 !important; background: transparent !important; }
.instrument-lock-heading { display: flex; align-items: flex-end; justify-content: space-between; min-width: 0; gap: 12px; padding: 2px 1px 7px; }
.instrument-lock-heading strong, .instrument-lock-heading small { display: block; }
.instrument-lock-heading strong { color: var(--ui-soft); font-size: .67rem; font-weight: 620; }
.instrument-lock-heading strong span { margin-left: 5px; color: var(--ui-accent); font: 580 .48rem var(--ui-mono); letter-spacing: .035em; text-transform: uppercase; }
.instrument-lock-heading small { margin-top: 3px; color: var(--ui-muted); font-size: .55rem; line-height: 1.4; }
.instrument-lock-heading > b { flex: none; color: #56615d; font: 560 .5rem var(--ui-mono); letter-spacing: .05em; text-transform: uppercase; }
#instrument-categories { display: block !important; width: 100%; max-height: 310px; overflow-y: auto; padding: 0 4px 0 0 !important; scrollbar-color: rgba(69,209,181,.3) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#instrument-categories > .form { display: grid !important; width: 100%; grid-template-columns: 1fr; gap: 7px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#instrument-categories::-webkit-scrollbar { width: 6px; }
#instrument-categories::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(69,209,181,.28); }
#instrument-categories .instrument-category { width: 100%; min-width: 0; align-self: start; padding: 8px !important; border: 1px solid var(--ui-line) !important; border-radius: 7px !important; background: rgba(255,255,255,.012) !important; box-shadow: none !important; }
.instrument-category > .wrap, .instrument-category .wrap { align-content: flex-start; gap: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.instrument-category .label-wrap { margin-bottom: 5px; color: var(--ui-soft) !important; font: 620 .56rem var(--ui-mono) !important; letter-spacing: .045em; text-transform: uppercase; }
.instrument-category label { min-height: 28px !important; padding-block: 4px !important; border-radius: 5px !important; }
#instrument-lock-footer { display: grid !important; grid-template-columns: minmax(0,1fr) 112px; align-items: stretch; min-width: 0; gap: 8px; margin-top: 8px; }
#instrument-lock-output { width: 100%; min-width: 0; margin: 0; }
#instrument-lock-output, #instrument-lock-output > div, #instrument-lock-output .html-container { padding: 0 !important; border: 0 !important; background: transparent !important; }
.instrument-lock-status { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: center; gap: 8px; min-height: 47px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: rgba(255,255,255,.014); }
.instrument-lock-icon { position: relative; display: block; width: 12px; height: 10px; border: 1px solid var(--ui-muted); border-radius: 2px; }
.instrument-lock-icon::before { position: absolute; right: 2px; bottom: 8px; left: 2px; height: 6px; border: 1px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; content: ""; }
.instrument-lock-status strong, .instrument-lock-status small { display: block; }
.instrument-lock-status strong { color: var(--ui-soft); font-size: .59rem; font-weight: 620; }
.instrument-lock-status small { margin-top: 2px; color: var(--ui-muted); font: .5rem/1.35 var(--ui-mono); }
.instrument-lock-status[data-state="automatic"] .instrument-lock-icon::before { right: -1px; left: 5px; transform: translateY(-1px) rotate(18deg); transform-origin: left bottom; }
.instrument-lock-status[data-state="locked"] { border-color: rgba(69,209,181,.24); background: rgba(69,209,181,.035); }
.instrument-lock-status[data-state="locked"] .instrument-lock-icon { border-color: var(--ui-accent); color: var(--ui-accent); }
.instrument-lock-status[data-state="locked"] strong { color: #cffff5; }
#clear-instrument-lock-button { width: 100% !important; min-width: 0 !important; min-height: 47px !important; padding: 0 9px !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; color: var(--ui-soft) !important; background: rgba(255,255,255,.018) !important; font: 610 .53rem var(--ui-mono) !important; box-shadow: none !important; }
#clear-instrument-lock-button:hover:not(:disabled) { border-color: rgba(69,209,181,.38) !important; color: #dffff8 !important; background: rgba(69,209,181,.065) !important; }
#clear-instrument-lock-button:disabled { color: var(--ui-muted) !important; opacity: .4; }

#run-row { align-items: center; gap: 14px; padding: 11px 1px 0; }
#transcribe-button { flex: 0 1 330px !important; min-height: 48px; border: 1px solid rgba(141,255,230,.32) !important; border-radius: 7px !important; background: linear-gradient(112deg,#168f7d,#21aa93) !important; box-shadow: 0 9px 24px rgba(18,132,113,.23), inset 0 1px rgba(255,255,255,.17) !important; color: #f5fffc !important; font-size: .84rem !important; font-weight: 680 !important; letter-spacing: .005em; transition: transform 140ms ease, filter 140ms ease !important; }
#transcribe-button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
#transcribe-button:disabled, #transcribe-button[aria-busy="true"] { cursor: wait; filter: grayscale(.35) brightness(.75); }
.cold-note { display: flex; align-items: center; gap: 7px; margin: 0 !important; color: var(--ui-muted); font: .57rem/1.5 var(--ui-mono); }
.cold-note strong { color: var(--ui-soft); font-weight: 620; }
.cold-note > span { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ui-warm); }

#generate-score-button { min-height: 38px; margin-top: 2px; border: 1px solid rgba(238,173,104,.38) !important; border-radius: 7px !important; background: rgba(238,173,104,.1) !important; color: #f5c996 !important; font-weight: 650 !important; }
#generate-score-button:hover:not(:disabled) { background: rgba(238,173,104,.17) !important; }
#generate-score-button:disabled { border-color: var(--ui-line) !important; background: rgba(255,255,255,.018) !important; color: var(--ui-muted) !important; }

#score-analysis-output, #score-analysis-output > div, #score-analysis-output .html-container { padding: 0 !important; border: 0 !important; background: transparent !important; }
.score-analysis { display: grid; grid-template-columns: 8px minmax(0,1fr); align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 6px; background: rgba(255,255,255,.016); }
.score-analysis i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-muted); }
.score-analysis strong, .score-analysis span { display: block; }
.score-analysis strong { color: var(--ui-soft); font-size: .61rem; font-weight: 620; }
.score-analysis span { margin-top: 3px; color: var(--ui-muted); font: .52rem/1.4 var(--ui-mono); }
.score-analysis[data-state="ready"] { border-color: rgba(69,209,181,.22); background: rgba(69,209,181,.035); }
.score-analysis[data-state="ready"] i { background: var(--ui-accent); box-shadow: 0 0 8px rgba(69,209,181,.4); }
.score-analysis[data-state="unavailable"] i { background: var(--ui-warm); }

#studio-viewer { min-width: 0; margin: 14px 0 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
#studio-viewer > .wrap, #studio-viewer > div, #studio-viewer .html-container { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }

.footnote { display: flex; justify-content: space-between; gap: 16px; padding: 11px 3px 0; color: var(--ui-muted); font: .55rem var(--ui-mono); }

@keyframes stem-status-pulse { 0%,100% { opacity:.48; transform:scale(.82); } 50% { opacity:1; transform:scale(1); } }

@media (max-width: 1080px) {
  .workbench-intro { grid-template-columns: 1fr; gap: 22px; }
  .project-references { width: min(100%,520px); }
}

@media (max-width: 820px) {
  #settings-grid { flex-wrap: wrap !important; }
  #decode-panel, #notation-panel { width: 100% !important; flex: 1 1 100% !important; }
}

@media (max-width: 720px) {
  #app-shell { width: calc(100% - 18px); max-width: 1360px; padding-top: 14px; }
  .workbench-nav, .panel-heading, .footnote { align-items: flex-start; flex-direction: column; }
  .runtime-status { width: 100%; flex-wrap: wrap; }
  .workbench-intro { padding: 28px 2px 24px; }
  .intro-statement h1 { font-size: clamp(2.35rem,12vw,3.6rem); }
  .project-references { width: 100%; grid-template-columns: 1fr; }
  .project-references a { padding: 10px 34px 10px 3px; }
  .project-references a + a { border-top: 1px solid var(--ui-line); border-left: 0; }
  #input-workbench, #transcription-panel { padding: 12px !important; border-radius: 11px !important; }
  .panel-heading p { text-align: left; }
  #decode-panel, #notation-panel { width: 100% !important; flex-basis: 100% !important; }
  #score-primary-settings, #score-musical-settings { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #transcription-controls-layout { flex-wrap: wrap !important; }
  #instrument-lock-panel, #decode-settings-panel { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
  #decode-settings-panel { justify-content: flex-start; padding: 10px !important; }
  #decode-settings-panel #decode-preset .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #instrument-categories { max-height: 420px; }
  .stem-workbench-heading, .stem-source-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .stem-source-heading small { max-width: none; text-align: left; }
  .youtube-import-heading { grid-template-columns: 26px minmax(0,1fr); }
  .youtube-import-heading > b { grid-column: 2; white-space: normal; }
  #youtube-import-row { grid-template-columns: minmax(0,1fr); }
  #youtube-import-button { width: 100% !important; }
  .youtube-import-status strong, .youtube-import-status span { display: block; }
  .youtube-import-status strong { margin-right: 0; }
  #stem-separation-row { grid-template-columns: minmax(0,1fr); }
  #demucs-quality-row { grid-template-columns: minmax(0,1fr); }
  #demucs-quality-preset .wrap { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #separate-stems-button { width: 100% !important; min-width: 0 !important; min-height: 42px; }
  #stem-source-selector .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #stem-source-selector .wrap > label:first-of-type { grid-column: 1 / -1; }
  #stem-source-selector .wrap > label:only-child { max-width: none; }
  .stem-status { grid-template-columns: 8px minmax(0,1fr); }
  .stem-status > b { display: none; }
  #instrument-lock-footer { grid-template-columns: minmax(0,1fr); }
  #run-row { align-items: stretch; flex-direction: column !important; }
  #transcribe-button { width: 100% !important; flex-basis: auto !important; }
  #input-workbench input[type="text"], #input-workbench input[type="number"], #input-workbench input[type="search"], #input-workbench input[type="email"], #input-workbench input[type="url"], #input-workbench textarea, #input-workbench select { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}