/* OFFON 2026-10-02: flat, neutral studio surfaces and consistent controls. */
:root{color:#303438;background:#c8c9ca;--line:#a5a8ab;--muted:#61666b;--dark:#34383c}
button,input,select{font-family:inherit}
button{height:32px;padding:0 12px;gap:7px;border-radius:3px;border-color:#a7aaad;background:#d6d7d8;transition:background-color .12s}
button:hover{filter:none;background:#e0e1e2}
button:disabled{opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #596c78;outline-offset:3px}
.primary{background:#34383c;border-color:#34383c;color:#f4f4f4}
.primary:hover{background:#474c51}
.quiet{background:transparent;border-color:transparent}
.quiet:hover{background:#b9bdc1}
.secondary{background:#d6d7d8}
.mint{background:#a0c8b7;border-color:#80a996;color:#273b32}
.mint:hover{background:#aed3c2}
header{height:56px;background:#d5d6d7;padding:0 24px;gap:20px;border-color:var(--line)}
.brand{font-size:23px;color:#303438}
.brand{flex:none;line-height:0;letter-spacing:0}
.brand img{display:block;width:168px;height:30px;max-width:none}
.header-label{font-size:11px;color:#5e646a;border-color:#aeb1b4;padding-left:20px}
.filename{font-size:12px;color:#51585e}
header #new{height:30px;font-size:12px}
main{min-height:calc(100dvh - 56px)}
.start{background-image:linear-gradient(90deg,#34383c04 1px,transparent 1px),linear-gradient(#34383c04 1px,transparent 1px);background-size:80px 80px}
.upload-card{width:440px;min-height:284px;padding:34px 32px;background:#d1d2d3;border:1px dashed #989da2;border-radius:4px;justify-content:center}
.upload-symbol{margin:0 0 13px;color:#5e666d;display:grid;place-items:center;width:44px;height:44px;border:1px solid #adb1b5;border-radius:3px}
.upload-symbol svg{width:22px;height:22px}
h1{font-size:16px;font-weight:500;margin:6px 0 9px;color:#303438}
p{color:#5e656c;font-size:12px;margin-bottom:22px}
.upload-card .primary{height:34px;min-width:128px}
.upload-card small{font-size:11px;color:#656b71;line-height:1.9;margin-top:16px}
.upload-limit{display:block;color:#656b71}
.processing h1{max-width:100%;overflow-wrap:anywhere}
.progress-steps{margin:18px 0 22px}
footer{height:30px;padding:0 24px;color:#62686e;font-size:10px;border-color:#aeb1b4}
.result:not(.comparison-dashboard){padding:12px 24px;max-width:none;display:grid;grid-template-rows:24px 50px 38px minmax(200px,1fr) 46px 62px;gap:0;height:max(530px,calc(100dvh - 56px));min-height:0}
.result-bar{height:auto;font-size:11px;color:#555f65;gap:7px}
.music-summary{font-size:11px;color:#5d656d;gap:16px;margin-left:14px}
.duration{font-size:11px;color:#58616a}
.result:not(.comparison-dashboard) .transport{height:auto;min-height:0;flex-wrap:nowrap;gap:14px;padding:0 0 8px;border-bottom:1px solid #a8acb0}
.play-buttons{gap:5px}
.play{border-radius:3px;height:32px;width:34px;background:#34383c;color:#f2f2f2}
.play:hover{background:#474c51}
.icon{height:32px;width:30px;padding:0}
#clock{font-size:12px;color:#353d44;font-variant-numeric:tabular-nums}
.speed-control{font-size:11px;color:#596169;gap:6px;padding-left:12px;border-left:1px solid #aeb1b4}
.speed-control select{background:#d8d9da;border-color:#a7aaad;border-radius:3px;color:#343b42;height:28px;padding:0 7px}
.speed-status{font-size:11px;color:#596169}
.speed-settings{position:relative;border-left:1px solid #aeb1b4;padding-left:12px;color:#596169;font-size:11px;flex:none;z-index:10}
.speed-settings summary{display:flex;align-items:center;gap:8px;list-style:none;height:28px;padding:0 9px;border:1px solid #a7aaad;border-radius:3px;background:#d8d9da;cursor:pointer;color:#343b42;white-space:nowrap}
.speed-settings summary::-webkit-details-marker{display:none}
.speed-settings summary:focus-visible{outline:2px solid #596c78;outline-offset:3px}
.speed-settings summary span:not(.disclosure){font-variant-numeric:tabular-nums}
.disclosure{color:#6a747d;font-size:13px}
.speed-panel{position:absolute;left:12px;top:35px;width:260px;padding:14px;background:#dfe0e1;border:1px solid #9da3a8;border-radius:3px;box-shadow:0 4px 12px #21262b20;color:#4c5862}
.speed-panel label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:10px}
.speed-panel input{width:82px;height:28px;border:1px solid #a5abb0;border-radius:3px;background:#eef0f1;padding:4px 6px;font-size:12px;color:#354049;font-variant-numeric:tabular-nums}
.speed-panel input:disabled{opacity:.5}
.speed-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px}
.speed-presets button{height:25px;padding:0 5px;font-size:10px}
.speed-presets button[aria-pressed="true"]{background:#b9c2ca;border-color:#8e9ca7}
.bpm-settings{border-top:1px solid #b6bdc2;padding-top:12px}
.bpm-settings #bpm-auto{height:24px;padding:0;font-size:10px}
.bpm-settings p{font-size:10px;line-height:1.6;margin:6px 0 0;text-align:left;color:#64717b}
.pitch-control{display:flex;align-items:center;gap:5px;padding-left:12px;border-left:1px solid #aeb1b4;color:#596169;font-size:11px;flex:none}
.pitch-control button{height:28px;width:27px;padding:0;font-size:14px}
.pitch-control #pitch-reset{width:30px;font-size:12px;font-variant-numeric:tabular-nums;background:transparent;border-color:transparent}
.pitch-control #pitch-reset:hover:enabled{background:#bcc3c8}
.pitch-control #pitch-reset:disabled{opacity:1;color:#596169}
.result:not(.comparison-dashboard) .edit-toolbar{padding:0;gap:12px;align-items:center}
.edit-actions{gap:5px}
.edit-actions button{height:26px;font-size:11px;padding:0 9px;border-color:#afb2b5;background:#d0d2d4}
.edit-actions button:hover:enabled{background:#dfe1e3}
.edit-scope{font-size:11px;color:#656d74}
.tool-divider{background:#aaafb3;height:17px;margin:0 4px}
.result:not(.comparison-dashboard) .timeline{display:flex;flex-direction:column;min-height:0;border-color:#747d84;border-radius:3px;background:#34383c}
.result:not(.comparison-dashboard) .ruler-row{height:32px;flex:none;color:#c0c5ca;background:#303439}
.result:not(.comparison-dashboard) .ruler-label{width:164px;padding:10px 14px;border-color:#58616a;color:#aab1b8}
.result:not(.comparison-dashboard) .ruler{margin:0 12px}
.result:not(.comparison-dashboard) .ruler span{top:9px;height:23px;border-color:#606970}
.result:not(.comparison-dashboard) .stem{flex:1;min-height:0;border-color:#59616a}
.result:not(.comparison-dashboard) .stem-controls{width:164px;padding:16px 8px 16px 14px;position:relative;background:#3e444a;border-color:#59616a;color:#edf0f2}
.result:not(.comparison-dashboard) .stem-name{gap:12px;font-size:13px;margin:0 0 20px;padding-right:30px}
.stem-name span{color:#b0b8bf;font-size:10px;font-family:ui-monospace,monospace}
.result:not(.comparison-dashboard) .power{position:absolute;right:13px;top:12px;height:25px;width:25px;border-radius:3px;background:#515961;color:#aeb7bf}
.result:not(.comparison-dashboard) .power.on{background:var(--color);color:#2f4440}
.result:not(.comparison-dashboard) .volume{margin-top:0;gap:4px}
.result:not(.comparison-dashboard) .volume input[type="range"]{width:100px;margin-left:0;min-width:0}
.volume-display{background:transparent;font-size:11px;color:#d0d7dd;border:0;width:36px;justify-content:center;text-align:center}
.volume-display:hover{background:#505861}
.volume-value{flex:none;width:36px;justify-content:center}
.volume-entry{color:#d0d7dd;font-size:11px;gap:1px}
.volume-percent{width:27px;height:22px;padding:2px;text-align:center;font-variant-numeric:tabular-nums;color:#e0e5e9;border-color:#69747d;background:#343b42}
.volume-percent:focus-visible{outline-offset:2px}
.result:not(.comparison-dashboard) .wave{margin:10px 12px;border-radius:2px;background:color-mix(in srgb,var(--color) 80%,#bfc2c5)}
.result:not(.comparison-dashboard) .clip-label{top:7px;left:10px;font-size:11px;color:#34433e}
.result:not(.comparison-dashboard) .wave canvas{height:calc(100% - 24px);margin-top:24px}
.result:not(.comparison-dashboard) .grid-floor{height:10px;flex:none;margin-left:164px;background:none}
.result:not(.comparison-dashboard) .selection-bar{padding:7px 0;gap:9px;border-color:#a8acb0;flex-wrap:nowrap;font-size:11px}
.selection-hint{font-size:11px;color:#5f6870}
.selection-times label{color:#5b656e;gap:6px}
.selection-times input{width:91px;height:28px;padding:5px 6px;border-radius:3px;background:#d9dbdd;border-color:#a5abb0;color:#354049}
.selection-bar button{height:28px;font-size:11px;padding:0 8px}
.result:not(.comparison-dashboard) .downloads{padding:10px 0 0;gap:8px;flex-wrap:nowrap;align-items:center}
.download-note{font-size:12px;color:#343c43}
.download-note span{font-size:11px;color:#657078;margin-top:5px}
.export-format{font-size:11px;color:#5b656d;margin-right:6px}
.export-format select{height:32px;border-radius:3px;background:#d9dbdd;border-color:#a5abb0;color:#344049}
.result:not(.comparison-dashboard) .downloads button{height:32px;padding:0 12px;font-size:12px;white-space:nowrap}
.fade-grip{background:#eff1ed;border-color:#59696b;box-shadow:none}
.fade-tooltip{background:#333c43;border-radius:2px;font-size:11px}
.selection{background:#f5f2d42b;border-color:#f8f5dd}
.reveal-result .wave{animation:wave-ready .22s ease-out both}
.reveal-result .stem:nth-of-type(3) .wave{animation-delay:.04s}
@keyframes wave-ready{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.reveal-result .wave{animation:none}}
@media(max-width:899px){
 .result:not(.comparison-dashboard){height:auto;min-height:calc(100dvh - 56px);grid-template-rows:auto auto auto auto auto auto;padding:14px 16px}
 .result-bar{min-height:28px;flex-wrap:wrap;row-gap:6px}
 .result:not(.comparison-dashboard) .transport{padding:9px 0;flex-wrap:wrap;gap:10px;min-height:82px}
 .speed-panel{left:auto;right:0}
 .result:not(.comparison-dashboard) .edit-toolbar{padding:9px 0;flex-wrap:wrap;gap:8px}
 .result:not(.comparison-dashboard) .timeline{min-height:320px}
 .result:not(.comparison-dashboard) .stem{min-height:142px}
 .result:not(.comparison-dashboard) .wave canvas{height:100px}
 .result:not(.comparison-dashboard) .selection-bar{flex-wrap:wrap;padding:12px 0;gap:8px}
 .selection-hint{flex-basis:100%}
 .result:not(.comparison-dashboard) .downloads{flex-wrap:wrap;padding:14px 0 4px;row-gap:10px}
 .download-note{flex-basis:100%;margin:0}
 .export-format{flex-basis:100%;margin:0}
 .result:not(.comparison-dashboard) .downloads button{flex:1}
}
@media(max-width:650px){
 header{padding:0 14px;gap:12px}
 .brand{font-size:21px}
 .brand img{width:142px;height:26px}
 .header-label{font-size:10px;padding-left:12px}
 header #new{font-size:11px;padding:0 8px}
 .start{padding:24px 18px;min-height:calc(100dvh - 56px)}
 .upload-card{width:100%;min-height:276px;padding:28px 20px}
 .result:not(.comparison-dashboard){padding:10px 12px 18px}
 .transport{position:relative}
 .speed-settings{position:static}
 .speed-panel{left:0;right:auto;top:calc(100% - 2px);width:min(280px,calc(100vw - 24px));z-index:20}
 .music-summary{font-size:10px;gap:9px;margin-left:5px}
 .result:not(.comparison-dashboard) .ruler-label,.result:not(.comparison-dashboard) .stem-controls{width:108px}
 .result:not(.comparison-dashboard) .ruler-label{padding-left:10px}
 .result:not(.comparison-dashboard) .stem-controls{padding:15px 10px}
 .result:not(.comparison-dashboard) .stem-name{font-size:12px;gap:8px;padding-right:0;margin-bottom:39px}
 .result:not(.comparison-dashboard) .power{top:43px;left:10px;right:auto;height:25px;width:28px}
 .result:not(.comparison-dashboard) .volume{gap:4px;flex-wrap:wrap}
 .result:not(.comparison-dashboard) .volume input[type="range"]{width:80px}
 .volume-display{justify-content:center;text-align:center}
 .result:not(.comparison-dashboard) .wave{margin:9px 8px}
 .result:not(.comparison-dashboard) .ruler{margin:0 8px}
 .result:not(.comparison-dashboard) .grid-floor{margin-left:108px}
 .edit-scope{flex-basis:100%;font-size:10px}
 .edit-actions{gap:4px}
 .edit-actions button{height:28px;padding:0 7px;font-size:10px}
 .tool-divider{margin:0 1px}
 .selection-times{flex:1 1 100%;gap:7px}
 .selection-times input{width:94px}
 .download-note span{font-size:10px}
 .result:not(.comparison-dashboard) .downloads button{padding:0 8px;font-size:11px;gap:5px}
 footer{padding:0 14px;font-size:9px}
}
@media(max-width:360px){.header-label{display:none}}

/* Model comparison retains its technical footer. */
.result.comparison-dashboard{min-height:calc(100dvh - 86px)}

/* Larger, explicit speed increment controls. */
.speed-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.speed-row>label{margin:0}
.speed-entry{display:flex;align-items:center;gap:6px}
.speed-panel #speed{width:72px;height:50px;text-align:center;appearance:textfield;-moz-appearance:textfield}
.speed-panel #speed::-webkit-inner-spin-button,.speed-panel #speed::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.speed-stepper{display:flex;flex-direction:column;gap:2px}
.speed-stepper button{width:36px;height:24px;min-height:24px;padding:0;font-size:10px;line-height:1;flex:none}

/* Keep form labels, values and disclosure arrows inside their controls. */
.export-select{position:relative;display:inline-flex;align-items:center}
.export-select::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.5px solid #52606a;border-bottom:1.5px solid #52606a;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.export-format select{appearance:none;-webkit-appearance:none;width:128px;padding:0 28px 0 12px;text-align:left;text-align-last:left;font-variant-numeric:tabular-nums}
.bpm-settings input,.selection-times input{text-align:center}
.speed-settings summary{min-width:104px;justify-content:center}
.pitch-control>span{margin-right:3px}
@media(max-width:650px){
 header:has(#new){height:auto;min-height:78px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:6px}
 header:has(#new) .header-label{order:3;flex-basis:100%;border-left:0;padding-left:0}
 .result:not(.comparison-dashboard){min-height:calc(100dvh - 78px)}
}

/* Mouse interactions keep one border; keyboard navigation stays visible. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,.speed-settings summary:focus-visible{outline:none}
input:focus-visible,select:focus-visible{border-color:#596c78}
.keyboard-focus button:focus-visible,.keyboard-focus a:focus-visible,.keyboard-focus input:focus-visible,.keyboard-focus select:focus-visible,.keyboard-focus canvas:focus-visible,.keyboard-focus .speed-settings summary:focus-visible{outline:2px solid #596c78;outline-offset:2px}

/* Center the selected label and arrow as one group for either format. */
.export-select::after{content:none}
.export-format select{color:transparent;padding:0 12px}
.export-format select option{color:#344049}
.export-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none;color:#344049;white-space:nowrap}
.export-chevron{width:7px;height:7px;border-right:1.5px solid #52606a;border-bottom:1.5px solid #52606a;transform:translateY(-2px) rotate(45deg);flex:none}

/* Honest AI guidance and transitions between actual processing stages. */
.processing .progress-current{margin-bottom:10px}
.progress-hint{min-height:38px;max-width:100%;margin:0;font-size:11px;line-height:1.7;color:#647078;display:flex;align-items:center;justify-content:center;text-wrap:pretty}
.progress-steps li{position:relative;isolation:isolate}
.progress-steps li:not(:last-child)::after{content:"";position:absolute;top:11px;left:calc(50% + 16px);width:calc(100% - 24px);height:1px;background:#acb4b9;z-index:-1}
.progress-steps .done:not(:last-child)::after{background:#718e79}
.progress-advanced .done:not(:last-child)::after{transform-origin:left;animation:stage-connect .4s ease-out both}
.progress-advanced .active .step-marker{animation:stage-arrive .35s ease-out both}
.progress-steps .active .step-marker{background:#a7bca9;animation:stage-breathe 1.8s ease-in-out infinite}
.progress-advanced .active .step-marker{animation:stage-arrive .35s ease-out both,stage-breathe 1.8s .35s ease-in-out infinite}
@keyframes stage-connect{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes stage-arrive{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}}
@keyframes stage-breathe{0%,100%{background:#a7bca9}50%{background:#c0d0c1}}
@media(prefers-reduced-motion:reduce){.progress-steps .step-marker,.progress-steps li::after{animation:none!important}}
/* Approved studio typography and controls. */
:root{background:#edf0f2;color:#28343a;--line:#c9d1d5;--muted:#626e76;--dark:#29373d}
header{background:#fafbfc;border-color:#d3dade}
.header-label{font-size:13px;color:#596971}
.filename{font-size:13px}
.start{background-image:linear-gradient(90deg,#3b565304 1px,transparent 1px),linear-gradient(#3b565304 1px,transparent 1px);background-size:96px 96px}
.upload-card{background:#fafcfc;border:1px dashed #a8bdb5;min-height:310px;width:480px;padding:36px;border-radius:8px;box-shadow:0 6px 24px #253f3505}
.upload-symbol{width:48px;height:48px;border:0;background:#e6f1ec;color:#427b66;border-radius:8px;margin-bottom:16px}
h1{font-size:26px;font-weight:600;letter-spacing:-.7px;margin-bottom:12px;color:#28343a}
p{font-size:14px;line-height:1.7;color:#627078}
.upload-card .primary{height:40px;font-size:14px;min-width:142px;background:#345c50;border-color:#345c50;border-radius:5px}
.upload-card small{font-size:12px;color:#69777d}
button{background:#fafbfc;border-color:#c6d0d5;color:#35444b;border-radius:4px}
button:hover{background:#fff}
.primary,.play{background:#304b42;border-color:#304b42;color:#fff}
.quiet{background:transparent;border-color:transparent}
.result:not(.comparison-dashboard){grid-template-rows:28px 58px 42px minmax(200px,1fr) 50px 66px}
.result-bar,.music-summary,.duration{font-size:12px;color:#65747c}
.result:not(.comparison-dashboard) .transport{border-color:#c9d3d8;gap:16px}
.play{width:40px;height:38px}
.icon{height:36px;width:34px}
#clock{font-size:14px;color:#33474f}
.speed-settings{font-size:14px;border-color:#cad3d8}
.speed-settings summary{height:36px;font-size:14px;background:#fafbfc;border-color:#bccbd1;min-width:120px}
.pitch-control{font-size:14px;border-color:#cad3d8;gap:6px}
.pitch-control button{width:32px;height:34px;font-size:17px;background:#fafbfc}
.pitch-control #pitch-reset{font-size:14px}
.edit-actions button{height:30px;font-size:12px;background:#f7f9fa;border-color:#ccd5da}
.edit-scope{font-size:12px;color:#68767d}
.result:not(.comparison-dashboard) .timeline{background:#35434a;border-color:#526269;border-radius:5px}
.result:not(.comparison-dashboard) .ruler-row{background:#303d44;color:#c4d0d5}
.result:not(.comparison-dashboard) .stem-controls{background:#3a4a50;border-color:#566970;width:178px;padding-left:16px}
.result:not(.comparison-dashboard) .ruler-label{width:178px}
.result:not(.comparison-dashboard) .stem-name{font-size:16px;font-weight:600;margin-bottom:22px}
.stem-name span{font-size:11px;color:#a1b5be}
.volume-display,.volume-entry{font-size:13px;color:#e0e8eb}
.result:not(.comparison-dashboard) .power{width:28px;height:28px}
.result:not(.comparison-dashboard) .wave{background:color-mix(in srgb,var(--color) 28%,#f7f9f7);margin:10px 12px;border-radius:3px}
.result:not(.comparison-dashboard) .grid-floor{margin-left:178px}
.result:not(.comparison-dashboard) .selection-bar{border-color:#cad4d9;font-size:12px}
.selection-hint{font-size:12px;color:#69777d}
.selection-times label{font-size:12px;color:#596e78}
.selection-times input{background:#fafbfc;border-color:#bfccd2;font-size:13px;height:32px}
.selection-bar button{font-size:12px;height:32px;background:#fafbfc}
.download-note{font-size:14px;font-weight:500}
.download-note span{font-size:12px;font-weight:400;color:#69777d}
.export-format{font-size:13px}
.export-format select{height:38px;background:#fafbfc;border-color:#bfccd2;width:142px}
.export-caption{font-size:13px}
.result:not(.comparison-dashboard) .downloads button{font-size:14px;height:38px;background:#fafbfc;padding:0 15px}
header #new{font-size:13px}
.speed-panel{background:#fafbfc;border-color:#c0ced4}
.speed-panel label,.speed-row>label{font-size:13px}
.speed-presets button{font-size:12px;height:30px}
.bpm-settings p,.bpm-settings #bpm-auto{font-size:12px}
@media(max-width:650px){.upload-card{width:100%;padding:28px 20px}.header-label{font-size:11px}.result:not(.comparison-dashboard) .stem-controls,.result:not(.comparison-dashboard) .ruler-label{width:118px}.result:not(.comparison-dashboard) .grid-floor{margin-left:118px}.result:not(.comparison-dashboard) .stem-name{font-size:14px}.result:not(.comparison-dashboard){grid-template-rows:auto auto auto auto auto auto}}

/* Approved charcoal / blue / apricot studio palette. */
:root{background:#383b40;color:#e3e6e9;--line:#565a61;--muted:#aeb4bd;--dark:#292c31}
header{background:#303338;border-color:#50545b}
.header-label,.filename{color:#bac0c8;border-color:#585d65}
header #new{color:#d0d5dc}
.start{background-image:linear-gradient(90deg,#ffffff03 1px,transparent 1px),linear-gradient(#ffffff03 1px,transparent 1px)}
.upload-card{background:#40444a;border-color:#6a717a;box-shadow:none;border-radius:5px}
.upload-symbol{background:#4b586a;color:#adc6f1;border-radius:4px}
h1{color:#f0f2f4}
p,.upload-card small,.upload-limit{color:#bac0c8}
.upload-card .primary{background:#91afe3;border-color:#91afe3;color:#20334e}
button,.edit-actions button,.pitch-control button,.selection-bar button,.result:not(.comparison-dashboard) .downloads button,.export-format select,.speed-settings summary,.selection-times input{background:#484c53;border-color:#60656e;color:#e2e6ec}
button:hover{background:#565c65}
.quiet{background:transparent;border-color:transparent}
.play{background:#91afe3;border-color:#91afe3;color:#223550}
.icon{background:transparent;border-color:transparent;color:#d6dce4}
#clock{color:#e0e5ed}
.result-bar,.music-summary,.duration,.edit-scope,.selection-hint,.selection-times label,.export-format,.download-note span,.pitch-control,.speed-settings{color:#b9c1cb}
.result:not(.comparison-dashboard) .transport,.speed-settings,.pitch-control,.result:not(.comparison-dashboard) .selection-bar{border-color:#565b63}
.pitch-control #pitch-reset:disabled{color:#cad2dd}
.download-note{color:#e5e9ef}
.export-caption{color:#e2e6ec}
.export-chevron{border-color:#c2cbd6}
.export-format select{color:transparent}
.export-format select option{color:#e2e6ec;background:#484c53}
.result:not(.comparison-dashboard) .timeline{background:#33363d;border-color:#60656d;border-radius:4px}
.result:not(.comparison-dashboard) .ruler-row{background:#30333a;color:#b8bec9}
.result:not(.comparison-dashboard) .ruler span{border-color:#5a606a}
.result:not(.comparison-dashboard) .stem{border-color:#5a606a}
.result:not(.comparison-dashboard) .stem-controls{background:#42464e;color:#eff2f6;border-color:#60656d}
.stem-name span{color:#a4adba}
.volume-display,.volume-entry{color:#dce2eb}
.volume-percent{background:#353941;color:#e0e5ed;border-color:#6b7480}
.result:not(.comparison-dashboard) .power{background:#555b66;color:#bbc5d3}
.result:not(.comparison-dashboard) .power.on{background:var(--color);color:#263c5b}
.result:not(.comparison-dashboard) .wave{background:var(--color);border-radius:2px}
.speed-panel{background:#42474f;border-color:#6a737e;color:#dbe2eb}
.speed-panel label,.bpm-settings p,.bpm-settings #bpm-auto{color:#c2ccd9}
.speed-panel input{background:#343941;border-color:#717c89;color:#e5ebf3}
.speed-presets button[aria-pressed="true"]{background:#6484af;border-color:#88a7d1;color:#f0f5fb}
.bpm-settings{border-color:#636d79}
.fade-grip{background:#e3e9f0;border-color:#4b5e73}
.selection{background:#ffffff25;border-color:#eff4fb}

.brand img{filter:none}
.play.icon{background:#91afe3;border-color:#91afe3;color:#223550}

/* Keep every interaction and processing stage readable on charcoal. */
button:hover:enabled,.edit-actions button:hover:enabled,.selection-bar button:hover:enabled,.result:not(.comparison-dashboard) .downloads button:hover:enabled,.pitch-control button:hover:enabled{background:#565c65}
.quiet:hover:enabled,.pitch-control #pitch-reset:hover:enabled{background:#4b5058}
.upload-card .primary:hover:enabled,.play.icon:hover:enabled{background:#abc3eb;border-color:#abc3eb;color:#20334e}
.fade-handle:hover:enabled{background:transparent}
.disclosure,.speed-status{color:#c2cbd6}
.error p{color:#f0b99f}
.status-dot{background:#91afe3}
.progress-hint{color:#bac0c8;font-size:12px}
.progress-steps li{color:#b2bac6;font-size:12px}
.step-marker{background:#4a5058;border-color:#858f9e;color:#c7cfda}
.progress-steps .done{color:#c1d4ee}
.progress-steps .done .step-marker{background:#91afe3;border-color:#91afe3;color:#233652}
.progress-steps .active{color:#edf3ff}
.progress-steps .active .step-marker{background:#91afe3;border-color:#b7cdf1;color:#233652}
.progress-steps li:not(:last-child)::after{background:#677381}
.progress-steps .done:not(:last-child)::after{background:#91afe3}
@keyframes stage-breathe{0%,100%{background:#91afe3}50%{background:#b2c7ec}}
input:focus-visible,select:focus-visible{border-color:#9ab7e8}
.keyboard-focus button:focus-visible,.keyboard-focus a:focus-visible,.keyboard-focus input:focus-visible,.keyboard-focus select:focus-visible,.keyboard-focus canvas:focus-visible,.keyboard-focus .speed-settings summary:focus-visible{outline-color:#abc7f6}
#toast.visible{background:#30343b;border-color:#718198;color:#edf2f8}

/* Desktop tracks stay compact; short windows shrink only the waveform rows. */
@media(min-width:900px){
 .result:not(.comparison-dashboard){--stem-height:clamp(110px,calc((100dvh - 368px)/2),140px);height:auto;min-height:0;grid-template-rows:28px 58px 42px auto 50px 66px;align-content:start}
 .result:not(.comparison-dashboard) .timeline{height:auto;min-height:0}
 .result:not(.comparison-dashboard) .stem{flex:0 0 var(--stem-height);height:var(--stem-height);min-height:0}
}

/* Clearer working text and primary icons, without enlarging the whole UI. */
.result:not(.comparison-dashboard){font-family:'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;color:#e7ebf0}
.header-label,.filename,header #new{font-family:'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;color:#c5cdd7}
.result:not(.comparison-dashboard) button,.result:not(.comparison-dashboard) .speed-settings summary,.result:not(.comparison-dashboard) .export-caption{font-weight:500;color:#e7ebf0}
.result:not(.comparison-dashboard) .downloads button,.result:not(.comparison-dashboard) .edit-actions button,.result:not(.comparison-dashboard) .selection-bar button,.result:not(.comparison-dashboard) .pitch-control button{color:#e7ebf0}
.result:not(.comparison-dashboard) .stem-name,.result:not(.comparison-dashboard) .download-note{font-weight:600}
.result:not(.comparison-dashboard) .result-bar,.result:not(.comparison-dashboard) .music-summary,.result:not(.comparison-dashboard) .edit-scope,.result:not(.comparison-dashboard) .selection-hint,.result:not(.comparison-dashboard) .download-note span{font-size:12px;color:#c5cdd7;font-weight:400}
.result:not(.comparison-dashboard) .selection-times label,.result:not(.comparison-dashboard) .export-format,.result:not(.comparison-dashboard) .pitch-control{color:#c5cdd7}
.result:not(.comparison-dashboard) .edit-actions button{font-size:13px}
.result:not(.comparison-dashboard) .ruler-row{font-size:12px;color:#c5cdd7}
.result:not(.comparison-dashboard) .stem-name span{color:#c5cdd7}
.result:not(.comparison-dashboard) #play svg,.result:not(.comparison-dashboard) #reset svg,.result:not(.comparison-dashboard) .downloads button svg,.result:not(.comparison-dashboard) .power svg{width:18px;height:18px;stroke-width:1.9}
.result:not(.comparison-dashboard) .power:not(.on){color:#e2e8f0;background:#4b515b;border:1px solid #737d8a}
.result:not(.comparison-dashboard) .power.on{color:#263c5b}
.result:not(.comparison-dashboard) .play.icon{color:#223550}
.result:not(.comparison-dashboard) button:disabled,.result:not(.comparison-dashboard) button:disabled:hover{opacity:1;color:#aab3be;background:#3c4047;border-color:#505760}
.result:not(.comparison-dashboard) #pitch-reset:disabled{background:transparent;border-color:transparent;color:#c5cdd7}
@media(max-width:650px){.header-label{font-size:12px}.result:not(.comparison-dashboard) .ruler-row{font-size:10px;font-weight:500}}

/* Spare desktop height sits above downloads; waveform height stays capped. */
@media(min-width:900px){
 .result:not(.comparison-dashboard){min-height:calc(100dvh - 56px);grid-template-rows:28px 58px 42px auto 50px minmax(66px,1fr)}
 .result:not(.comparison-dashboard) .downloads{height:66px;align-self:end}
}

/* Balance the working group while preserving the download row. */
@media(min-width:900px){
 .result:not(.comparison-dashboard){--work-offset:clamp(0px,calc((100dvh - 640px)/2),180px);grid-template-rows:28px calc(58px + var(--work-offset)) 38px auto 50px minmax(66px,1fr)}
 .result:not(.comparison-dashboard) .transport{margin-top:var(--work-offset)}
}

/* Playback replaces the selection hint within the existing lower control row. */
.result:not(.comparison-dashboard) .selection-bar{position:relative;justify-content:space-between;flex-wrap:wrap;column-gap:12px;row-gap:6px;padding:7px 0}
.result:not(.comparison-dashboard) .selection-bar .transport{margin:0;padding:0;border:0;min-height:0;flex:0 0 auto;gap:12px}
.result:not(.comparison-dashboard) .selection-bar .selection-times{margin-left:auto}
.result:not(.comparison-dashboard) .speed-panel{top:auto;bottom:calc(100% + 6px)}
@media(min-width:900px){
 .result:not(.comparison-dashboard){grid-template-rows:28px calc(38px + var(--work-offset)) auto minmax(58px,auto) minmax(66px,1fr)}
 .result:not(.comparison-dashboard) .edit-toolbar{margin-top:var(--work-offset)}
}
@media(max-width:1199px){
 .result:not(.comparison-dashboard) .selection-bar .transport{flex-basis:100%;flex-wrap:wrap}
 .result:not(.comparison-dashboard) .selection-bar .selection-times{margin-left:0}
}

.result:not(.comparison-dashboard) .selection-bar .selection-hint{flex-basis:100%;font-size:12px;color:#aeb8c5;line-height:1.4}

/* Separate the drag hint from the controls with the existing divider. */
.result:not(.comparison-dashboard) .selection-bar{border-bottom:0;row-gap:0}
.result:not(.comparison-dashboard) .selection-bar .selection-hint{border-top:1px solid #565b63;padding-top:6px}

/* Match the control row's upper and lower breathing room. */
.result:not(.comparison-dashboard) .selection-bar .selection-hint{margin-top:7px;padding-top:7px}

/* Joined music/vocal lanes: one shared timeline, centered waveforms. */
.result:not(.comparison-dashboard) .timeline{height:auto;min-height:0;align-self:start}
.result:not(.comparison-dashboard) .stem{height:128px;min-height:128px;flex:0 0 128px}
.result:not(.comparison-dashboard) .wave{margin:0;border-radius:0}
.result:not(.comparison-dashboard) .wave canvas{height:100%;margin-top:0}
.result:not(.comparison-dashboard) .ruler{margin:0}
.result:not(.comparison-dashboard) .ruler span:last-child{padding-right:8px}
.result:not(.comparison-dashboard) .grid-floor{display:none}
@media(max-width:650px){.result:not(.comparison-dashboard) .stem{height:120px;min-height:120px;flex-basis:120px}}