:root{color-scheme:dark;--bg:#050706;--ink:#edf2ed;--sub:#8a9d92;--line:#253129;--accent:#c1f782;--dim:#18211b}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
body{font:13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:pan-x}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.32;cursor:not-allowed}
a{color:inherit;text-decoration:none}
.ambient,.hero{display:none}
.topbar{height:43px;padding:0 13px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.back{height:29px;width:29px;display:grid;place-items:center;border:1px solid #344035;border-radius:6px;font-size:17px;color:#bacbb6}
.brand{display:flex;gap:7px;align-items:center;letter-spacing:.14em;font-size:12px;font-weight:800;font-variant:small-caps}
.brand-mark{color:var(--accent);font-size:21px;line-height:1}
.brand .light{font-weight:500;color:var(--sub)}
.version{margin-left:auto;color:#536356;font-size:10px;letter-spacing:.12em}
.studio{height:calc(100dvh - 43px);max-width:1120px;margin:auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dashboard-top{display:flex;flex-direction:column;flex:none}
.panel,.export-section{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;padding:0}
.source-panel{padding:8px 13px 4px;flex:none;border-bottom:1px solid var(--line)}
.source-panel .section-top{display:none}
.dropzone{height:31px;padding:0;display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}
.dropzone .drop-icon{display:none}
.dropzone>span:nth-of-type(2){display:flex;align-items:baseline;min-width:0;flex:1;gap:8px}
.dropzone strong{font-size:11px;color:#d5dfd7;font-weight:650;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dropzone small{color:#697c71;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
.browse{order:-1;flex:none;border:1px solid #688954;border-radius:5px;color:var(--accent);padding:6px 9px;font-size:10px;font-weight:850;letter-spacing:.02em}
.transport{display:flex;align-items:center;gap:8px;margin-top:5px;height:41px}
.transport-buttons{display:flex;gap:5px}
.play,.icon-btn{width:37px;height:37px;border:0;border-radius:6px;display:grid;place-items:center}
.play{color:#172515;background:var(--accent);font-size:17px}
.icon-btn{background:#1c2920;color:#b3c9b5;font-size:12px}
.wave-wrap{min-width:0;flex:1}
#waveform{display:block;width:100%;height:23px;cursor:pointer;touch-action:pan-y}
.time-row{display:flex;justify-content:space-between;margin:0;font:10px ui-monospace,monospace;color:#8aa093}
.tiny-toggle{height:32px;padding:0 8px;white-space:nowrap;color:var(--accent);background:#152116;border:1px solid #354c2b;border-radius:5px;font-size:10px;font-weight:750}
.tiny-toggle.off{color:#97a69d;background:#16201a;border-color:#35443a}
.visual-panel{padding:4px 12px 7px;flex:none;border-bottom:1px solid var(--line)}
.visual-panel .section-top{display:flex;justify-content:space-between;align-items:center;height:17px;margin:0 0 2px}
.visual-panel .section-top .eyebrow{display:none}
.visual-panel .section-top h2{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#80978a;font-weight:800;margin:0}
.monitor-right{display:flex;gap:12px;align-items:center;color:var(--accent);font:10px ui-monospace,monospace}
.chip{display:none}
.spectrum-wrap{background:#09100b;border:0;padding:0;overflow:hidden}
#spectrum{width:100%;height:59px;display:block}
.axis-freq{display:flex;justify-content:space-between;color:#65766b;font:9px ui-monospace,monospace;margin-top:-1px}
.meter-footer{display:none}
.workspace-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;height:39px;padding:0 12px;border-bottom:1px solid #334238;gap:3px}
.workspace-tabs button{border:0;border-bottom:2px solid transparent;color:#819586;background:transparent;font-size:11px;letter-spacing:.1em;font-weight:800;min-width:0}
.workspace-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.workspace-body{flex:1;min-height:0;overflow:hidden;position:relative;padding:0 13px}
.tab-pane{height:100%;min-height:0;overflow:hidden;display:none}
.tab-pane.active{display:block}
.tab-pane>.panel,.tab-pane>.export-section{width:100%}
.section-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:7px 0 5px}
.section-top .eyebrow{display:none}
.section-top h2{font-size:15px;font-weight:750;margin:0;letter-spacing:.035em;text-transform:uppercase}
.hint,.eq-count{font:10px ui-monospace,monospace;color:#788e7e}
.reset-button,.accent-secondary,.primary-outline,.danger{color:#bcd3ba;background:#152017;border:1px solid #344537;border-radius:5px;padding:6px 10px;min-height:29px;font-size:10px;font-weight:800}
.reset-button,.eq-count{white-space:nowrap}
.primary-outline{background:var(--accent);border-color:var(--accent);color:#13200e}
.danger{color:#de9c9c}
.feature-line{display:flex;align-items:baseline;gap:15px;margin:0;height:35px}
.big-value{font-size:28px;color:var(--accent);line-height:1;font-weight:800;letter-spacing:-.05em}
.big-value small{font-size:12px;letter-spacing:0}
.feature-caption{font-size:9px;color:#879d89;letter-spacing:.09em;line-height:1.2}
.feature-caption strong{font-size:11px;color:#dfebdb}
.control-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.control-card{display:flex;align-items:center;gap:10px;min-height:39px;border-bottom:1px solid #1d2b22;padding:0;background:transparent}
.control-label{display:flex;align-items:center;gap:6px;flex:1.25;min-width:0}
.control-label span{color:#bdcbbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:750;letter-spacing:.025em}
.control-label output{margin-left:auto;white-space:nowrap;color:var(--accent);font:700 10px ui-monospace,monospace}
.control-card input[type=range]{flex:1;min-width:87px;width:auto}
.range-foot{display:none}
input[type=range]{appearance:none;-webkit-appearance:none;border:0;outline:none;height:3px;border-radius:4px;touch-action:pan-y;cursor:ew-resize;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--fill,50%),#3b4b40 var(--fill,50%),#3b4b40 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;background:#c8ffa0;border:3px solid #1e3520;border-radius:50%;box-shadow:0 0 0 1px #b5e98566}
input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#c8ffa0;border:3px solid #1e3520;border-radius:50%}
select,input[type=number]{border:1px solid #344638;background:#121a14;color:#e0ece0;border-radius:5px;padding:4px 7px;min-width:0;min-height:29px}
.octave-select{flex:1;max-width:50%;font-size:10px;height:30px}
.engine-note,.eq-footnote{display:none}
.eq-panel .section-top{padding-bottom:4px}
.eq-toolbar{display:flex;gap:5px;flex-wrap:nowrap;margin:0 0 5px;overflow:hidden}
.eq-toolbar button{padding:5px 7px;min-height:28px;font-size:9px;white-space:nowrap}
.response-wrap{border:1px solid #2a3b2f;border-radius:6px;background:#0b120e;padding:1px 0 0}
#response{display:block;width:100%;height:clamp(108px,21dvh,215px);touch-action:none;cursor:crosshair}
.response-caption{display:none}
.band-strip{height:37px;padding:4px 0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.band-strip::-webkit-scrollbar{display:none}
.band-pill{flex:none;min-height:27px;border:1px solid #334936;color:#a4b5a8;background:#152017;border-radius:5px;padding:3px 8px;font:700 10px ui-monospace,monospace}
.band-pill.selected{border-color:var(--accent);color:var(--accent)}
.band-pill.disabled-band{opacity:.35}
.band-pill .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--band-color,var(--accent));margin-right:2px}
.band-editor{border-top:1px solid var(--line);padding:6px 0 0;background:transparent}
.band-editor-top{display:flex;align-items:center;gap:4px;margin:0 0 6px}
.band-editor-top b{font-size:10px;color:#b5c8b4;letter-spacing:.1em;margin-right:auto}
.band-editor-top select{max-width:124px;font-size:10px}
.band-editor-top button{border:1px solid #39483c;background:#162018;color:#b2c3b4;border-radius:5px;height:29px;padding:0 7px;font-size:9px;font-weight:800}
.band-editor-top button.active{border-color:#809e6e;color:var(--accent)}
.band-editor-top button.remove{color:#d09b93}
.band-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.band-field{min-width:0}
.band-field label{display:flex;align-items:center;justify-content:space-between;gap:3px;color:#839987;font-size:9px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.band-field input[type=number]{width:55px;text-align:right;min-height:26px;padding:3px 4px;font:10px ui-monospace,monospace}
.band-field input[type=range]{display:block;width:100%;height:4px;margin:11px 0 0}
.switchline{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:10px;font-weight:800}
.switchline input{accent-color:var(--accent)}
.dynamics-meter{margin-top:9px}
.meter-label{display:flex;justify-content:space-between;font-size:10px;color:#82958a;font-weight:700}
.meter-label strong{color:#f0b777}
.meter-track,.progress-track{height:5px;background:#26372a;border-radius:4px;overflow:hidden;margin-top:6px}
.meter-track span,.progress-track div{display:block;width:0;height:100%;background:var(--accent);transition:width .12s linear}
.preset-panel .section-top{padding:7px 0}
.preset-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:4px}
.preset-row select{flex:1;min-width:130px}
.subtle-row{gap:10px;justify-content:space-between}
.text-button{background:none;border:0;color:#a3b8a3;font-size:10px;font-weight:700;min-height:27px;padding:3px;cursor:pointer}
.export-section{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.export-section .eyebrow{display:none}
.export-section h2{font-size:15px;margin:0 0 7px;text-transform:uppercase;letter-spacing:.05em}
.export-section p{display:none}
.export-btn{width:100%;min-height:40px;background:var(--accent);color:#11250f;border:0;border-radius:6px;font-size:12px;font-weight:850;letter-spacing:.03em}
.export-btn span{font-size:15px;margin-right:5px}
.export-progress{padding-top:11px}
.export-progress[hidden]{display:none}
.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#b9d2b7}
.progress-head strong{font:800 32px ui-monospace,monospace;color:var(--accent)}
.progress-head span{font-size:11px;color:#9bb2a1;text-align:right}
.export-progress .progress-track{height:9px;margin-top:6px}
.progress-meta{display:flex;justify-content:space-between;margin-top:9px;font:10px ui-monospace,monospace;color:#789184}
.progress-meta b{color:#d5ecd1;font-size:13px}
.cancel-export{margin-top:11px;border:1px solid #6a4b4c;background:#271819;color:#e6aca9;border-radius:5px;padding:7px 10px;font-size:10px;font-weight:800}
footer{height:23px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 13px;border-top:1px solid var(--line);gap:10px;color:#5c7861;font:9px ui-monospace,monospace}
footer #status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;color:#a2bea8}
footer span:last-child{white-space:nowrap}
.muted{color:#718876}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-height:690px){
 .source-panel{padding-top:4px;padding-bottom:2px}.dropzone{height:25px}.transport{height:37px;margin-top:2px}
 .visual-panel{padding-top:2px;padding-bottom:4px}#spectrum{height:40px}
 .workspace-tabs{height:35px}
 .control-card{min-height:33px}
 .section-top{padding-top:5px;padding-bottom:3px}
 .feature-line{height:29px}.big-value{font-size:23px}
 #response{height:clamp(90px,18dvh,140px)}
 .band-strip{height:34px}
 .band-editor-top{margin-bottom:4px}
}
@media(min-width:720px){
 .dashboard-top{display:grid;grid-template-columns:1fr 1fr}
 .source-panel{border-right:1px solid var(--line)}
 .visual-panel{border-bottom:1px solid var(--line)}
 #spectrum{height:61px}
 .workspace-tabs{max-width:700px;width:100%;margin:0 auto}
 .workspace-body{width:min(100%,820px);margin:0 auto}
 .control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
 .control-card{min-height:55px}
 #response{height:clamp(180px,32dvh,350px)}
 .band-editor{padding-top:14px}
 .band-field label{font-size:12px}
 .band-field input[type=number]{width:85px}
 .preset-row select{flex:1}
 .export-section{max-width:650px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Distribute controls over available touch area instead of leaving dead space. */
@media(max-width:719px){
 #pane-bass>.panel,#pane-master>.panel,#pane-eq>.panel{
   display:flex;flex-direction:column;height:100%;min-height:0
 }
 #pane-bass .control-grid,#pane-master .control-grid{
   flex:1;min-height:0;grid-template-rows:repeat(8,minmax(0,1fr))
 }
 #pane-master .control-grid{grid-template-rows:repeat(7,minmax(0,1fr))}
 #pane-bass .control-card,#pane-master .control-card{min-height:0}
 #pane-master .dynamics-meter{flex:none;margin:10px 0 6px}
 #pane-eq .response-wrap{flex:1;min-height:80px;display:flex;overflow:hidden}
 #pane-eq #response{height:100%;min-height:0;flex:1}
 #pane-eq .eq-toolbar,#pane-eq .band-strip,#pane-eq .band-editor{flex:none}
}

@media(max-width:719px){
 .version{display:none}
 #pane-eq .band-editor{padding-bottom:12px}
}

@media(max-width:719px) and (max-height:650px){
 #pane-eq .response-wrap{flex:0 0 114px;min-height:0}
 #pane-eq .band-editor-top select{max-width:99px}
 #pane-eq .band-editor-top b{font-size:9px}
 #pane-eq .band-editor-top button{padding:0 5px}
}