/* Mobile UX R1: audio workspace. The processing engine and controls are shared across sizes. */
:root { --bg:#f3f7fc;--paper:#ffffff;--surface:#eaf1f8;--ink:#142238;--muted:#50647b;--line:#dbe5ef;--line-strong:#a9bacc;--accent:#087e8b;--accent-soft:#dcf3f3;--accent-ink:#fff;--focus:#b95c00;--wave-bg:#101e32;--wave-grid:#223c56;--wave-sel:#9baeff;--wave-dim:#4f637c;--wave-head:#6de6d2;--radius:20px;--radius-s:12px;--shadow:0 4px 20px rgba(20,34,56,.045); }
@media(prefers-color-scheme:dark){ :root{--bg:#0c1625;--paper:#142238;--surface:#1c3046;--ink:#edf5fc;--muted:#acbfd1;--line:#2c4258;--line-strong:#607d97;--accent:#6de6d2;--accent-ink:#0c1625;--accent-soft:#173e40;--focus:#ffbf7a;--wave-bg:#081321;--wave-grid:#23344a;--shadow:none;} }
body{line-height:1.5;} h1,h2,h3{letter-spacing:-.025em;} .home h1{font-size:clamp(1.8rem,3.6vw,2.75rem);line-height:1.2;}
.btn,.workspace-tab{transition:background-color 160ms,color 160ms;border-radius:12px;} .btn-primary{box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 16%,transparent);}
[data-icon]::before{content:'';display:inline-block;flex:none;width:20px;height:20px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;}
[data-icon=trim]::before{mask-image:url('/tools/audio/src/assets/icon-trim.svg');}[data-icon=play]::before{mask-image:url('/tools/audio/src/assets/icon-play.svg');}[data-icon=stop]::before{mask-image:url('/tools/audio/src/assets/icon-stop.svg');}[data-icon=file]::before{mask-image:url('/tools/audio/src/assets/icon-file.svg');}[data-icon=volume]::before{mask-image:url('/tools/audio/src/assets/icon-volume.svg');}
.workspace-tabs{display:none;}.export-context{display:none;}.work-main .bench{gap:12px;padding:16px;border:0;}.wave-panel{border-radius:16px;}
.sel-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end;}.time-ctl{display:block;}.time-field{min-width:0;}.time-field label{font-size:.875rem;}.time-ctl input{min-width:0;width:100%;}.sel-length{grid-column:auto;grid-row:auto;padding-bottom:10px;}.sel-length strong{font-size:1.35rem;}.sel-row>legend{margin-bottom:4px;}.sel-row .error-text{grid-column:1/-1;}
.controls{grid-template-columns:minmax(0,1fr)!important;gap:12px;}.listen-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;}.listen-btns .btn{font-size:.9rem;padding:0 10px;}.listen-btns #play-stop{min-width:44px;} .listen .mini-title{display:none;}.listen{gap:4px;} #preview-status{font-size:.85rem;}
.gain-disclosure{border-top:1px solid var(--line);}.gain-disclosure>summary{display:flex;align-items:center;gap:8px;min-height:52px;cursor:pointer;list-style:none;font-weight:650;}.gain-disclosure>summary::after{content:'+';font-size:1.3rem;margin-left:8px;}.gain-disclosure[open]>summary::after{content:'−';}#gain-chip{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--accent);}.summary-icon{display:inline-flex;}.gain-disclosure .gain{padding:0 0 12px;}.gain>legend{display:none;}.gain-row input[type=range]{min-width:0;}.gain-row{flex-wrap:wrap;} .gain-row output{flex-basis:100%;text-align:left!important;}.more{margin-top:0;padding-top:0;}.precision-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}.precision-row>span{min-width:3em;font-weight:600;}.precision-row .btn{padding:0 6px;}
.example-rail-wrap{min-width:0;}.how{margin:0;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:16px;padding-bottom:4px;position:relative;touch-action:pan-x pan-y;}.how::-webkit-scrollbar{display:none;}.how li{flex:0 0 calc((100% - 32px)/3);min-width:0;scroll-snap-align:start;padding:0;display:block;overflow:hidden;}.step-art{position:relative;background:#101e32;cursor:grab;padding:8px;}.step-art img{display:block;width:100%;height:auto;pointer-events:none;}.step-art .example-badge{top:8px;right:8px;color:#eef8fa;background:#142238;border:1px solid #607d97;z-index:1;}.step-caption{padding:16px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;}.step-caption p{grid-column:1/-1;font-size:.9rem;}.how.dragging{scroll-snap-type:none;user-select:none;}.how.dragging .step-art{cursor:grabbing;}.rail-marks{display:flex;justify-content:center;gap:2px;padding-top:6px;}.rail-mark{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;}.rail-mark>span{width:7px;height:7px;border-radius:999px;background:var(--line-strong);transition:width 160ms;}.rail-mark[aria-current=true]>span{width:20px;background:var(--accent);}
.final-card{border:0;padding:24px;}.final-facts>div{padding:12px;}.result-actions .btn{background:var(--paper);}.result .steps{margin-bottom:12px;}.hero-figure .example{border:0;padding:24px;}.drop{border:1px solid var(--line-strong);padding:20px;box-shadow:var(--shadow);}.band{padding:28px 0;}.more summary{font-size:.875rem;}
@media(max-width:1023px){
 .workspace-tabs{display:flex;gap:4px;background:var(--surface);border-radius:14px;padding:4px;margin:0 0 12px;scroll-margin-top:12px;}
 .workspace-tab{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;min-height:44px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.95rem;font-weight:650;cursor:pointer;}
 .workspace-tab[aria-pressed=true]{background:var(--paper);color:var(--accent);box-shadow:var(--shadow);}
 .work[data-work-pane=edit] #export-pane{display:none;}.work[data-work-pane=export] #edit-pane{display:none;}
 .export-context{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}.export-context>span{font-variant-numeric:tabular-nums;}
 .work-grid{gap:0;}.bench{border-radius:20px;}.filebar{margin-bottom:12px;gap:8px;}.file-id{flex:1 1 180px;}.filebar #replace-file{font-size:.85rem;padding:0 10px;min-height:44px;}
 #work-title{font-size:1.1rem;}.file-info{font-size:.82rem;line-height:1.45;}.badge{font-size:.75rem;margin-top:4px;}.work>.steps{display:none;}

 .how li{flex-basis:82%;}.how{padding-right:18%;}.how li:last-child{margin-right:-22%;}.wave-wrap{height:180px;}.tap-mode legend{font-size:.8rem;width:auto!important;float:none;}.tap-mode{gap:4px 8px;}.tap-mode label{font-size:.85rem;padding:0 4px;}.tap-mode legend{margin-right:0;}.sel-row{gap:8px;}.sel-row>legend{display:none;}.sel-length span{font-size:.75rem;}.sel-length strong{font-size:1.1rem;}
 .work .bench{padding:12px;}.sel-row .time-field{order:initial;}.sel-row .sel-length{order:initial;grid-column:auto!important;grid-row:auto!important;}.sel-row .time-field label{font-size:.8rem;}
 .final-card{padding:16px;}.final-facts{gap:6px;}.final-facts>div{padding:10px 8px;}.final-facts dd{font-size:1.1rem;}.result-side{gap:12px;}
}
@media(max-width:767px){
 main{padding:12px 12px 32px;}.topbar{padding:4px 12px;gap:0 8px;}.topbar .brand{font-size:.95rem;}.langnav{gap:0;margin-left:0;}.langnav a{font-size:.82rem;padding:0 8px;}.topbar .mainnav{font-size:.85rem;}
 .wave-wrap{height:150px;}.listen-btns{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;}.listen-btns .btn{font-size:.85rem;padding:0 8px;gap:4px;} #play-stop{font-size:0;}#play-stop::before{width:18px;}.work .controls{gap:8px;}.gain-disclosure>summary{min-height:48px;}
 .home .hero-text{gap:12px;}.hero-figure .example{padding:18px;}.support{gap:6px 12px;font-size:.875rem;}.home .drop-actions{display:grid;grid-template-columns:1fr;width:100%;}.drop-hint{display:none;}.home .drop{padding:16px;}.fine{font-size:.875rem;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important;}}

.export-source{display:grid;gap:4px;min-width:0;}.export-source strong{font-size:.875rem;overflow-wrap:anywhere;}.export-source .mini-title{font-size:.8rem;letter-spacing:0;margin:0;}.export-context .btn{flex:none;font-size:.85rem;}.rail-marks{display:none;}
@media(max-width:1023px){.rail-marks{display:flex;} .started .topbar .mainnav{display:none;} .export-context{align-items:flex-start;} }

/* Container responsiveness also covers enlarged text/layout, without changing audio state. */
#edit-pane,#export-pane,.final-card{container-type:inline-size;}
.workspace-tab{min-width:0;flex-wrap:wrap;overflow-wrap:anywhere;}
@container(max-width:21.25rem){
 .sel-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.sel-row .sel-length{grid-column:1/-1!important;grid-row:2!important;display:flex;justify-content:center;align-items:center;gap:8px;padding:2px 0;}
 .listen-btns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.listen-btns #play-stop{grid-column:1/-1;justify-self:end;width:44px;}
 .export-context{display:grid;grid-template-columns:minmax(0,1fr);}.export-context .btn{justify-self:start;}
 .gain-row output{min-width:0;}.choice-text{min-width:0;overflow-wrap:anywhere;}.final-facts{grid-template-columns:minmax(0,1fr);}.final-facts>div{display:flex;justify-content:space-between;gap:8px;}
}

.export-source .mini-title{text-transform:none;}