/* Website 2.0: mobile workspaces use readable rows, not squeezed desktop cards.
   Compact musical controls (keys, transport and icon buttons) retain useful grouping. */
@media(max-width:700px){
 body.website2 :is(.m-state,.om-screen,.ss-view,.vs-panel,.bt-compose){min-width:0}
 body.website2 :is(.m-done-sub,.om-intro,.ss-stage-heading p,.ss-result-footer p,.vs-fine,.bt-help){text-wrap:pretty}
 body.website2 :is(.m-sheet,.l-sheet,.kg-dialog,.vs-dialog,.bt-dialog){max-width:calc(100vw - 24px);box-sizing:border-box}
 /* Chopper: the processing facts and deliveries read in one direction. */
 body.website2 .c-work-stats{grid-template-columns:1fr;gap:0;margin-top:18px}
 body.website2 .c-work-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 0;border:0;border-bottom:1px solid #ddd5e6;border-radius:0;background:none}
 body.website2 .c-work-stats :is(span,small){font-size:12px;line-height:1.5}
 body.website2 .c-delivery-stats{display:flex;flex-wrap:wrap;gap:12px 22px}
 body.website2 .c-loop{grid-template-columns:44px minmax(0,1fr);padding:16px;gap:12px}
 body.website2 .c-loop :is(.c-loop-wave,.c-loop-acts,.c-loop-actions,.c-loop-foot){grid-column:1/-1;min-width:0;width:100%}
 body.website2 .c-loop :is(.c-loop-name,.c-loop-meta){white-space:normal;overflow-wrap:anywhere}
 body.website2 .c-work-caption{font-size:13px;line-height:1.6}
 body.website2 .c-steps{grid-template-columns:1fr;gap:8px}
 /* StemSep: each separation choice has room for its purpose and outputs. */
 body.website2 .ss-source-card{grid-template-columns:40px minmax(0,1fr);gap:12px;text-align:left}
 body.website2 .ss-source-card #ss-choose{grid-column:1/-1;max-width:none;width:100%;font-size:13px;margin-top:8px}
 body.website2 .ss-source-card .ss-source-mark{grid-column:1;grid-row:1/3}
 body.website2 .ss-source-title,body.website2 .ss-source-help{grid-column:2}
 body.website2 .ss-mode-group .ss-mode-grid{grid-template-columns:1fr;gap:10px}
 body.website2 .ss-mode-group .ss-mode-card{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px;min-height:78px}
 body.website2 .ss-mode-group .ss-mode-card>svg{width:30px;height:30px;flex:none}
 body.website2 .ss-mode-group .ss-mode-card strong{font-size:14px;line-height:1.4}
 body.website2 .ss-mode-group .ss-mode-card small{font-size:12px;line-height:1.5;margin-top:4px}
 body.website2 .ss-mode-group h3{font-size:12px;letter-spacing:0;line-height:1.5}
 body.website2 .ss-selection-footer{position:static;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-top:20px}
 body.website2 .ss-selection-footer>.ss-primary{min-width:0;max-width:none;width:100%;font-size:14px}
 body.website2 :is(.ss-format,.ss-account,#ss-mode-hint,.ss-output-chips>span){font-size:12px;line-height:1.6}
 body.website2 .ss-selection-title{font-size:14px}
 body.website2 .ss-result-head{align-items:stretch;flex-direction:column;gap:16px}
 body.website2 .ss-result-acts{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 body.website2 .ss-result-acts>button{width:100%;font-size:13px}
 body.website2 .ss-result-footer{align-items:stretch;flex-direction:column;gap:14px}
 body.website2 .ss-result-footer p{max-width:none;font-size:13px}
 body.website2 .ss-work-heading{flex-wrap:wrap;gap:12px}
 body.website2 .ss-work-heading p{font-size:13px;line-height:1.6}
 /* OttoMix: full-width choices and actions; never miniature benefit cards. */
 body.website2 .om-preference-options{grid-template-columns:1fr;gap:10px}
 body.website2 .om-preference-options label>span{display:grid;grid-template-columns:38px minmax(0,1fr);gap:3px 12px;padding:14px 32px 14px 14px;min-height:76px}
 body.website2 .om-preference-options svg{grid-column:1;grid-row:1/3;align-self:center;width:34px;height:28px;margin:0}
 body.website2 .om-preference-options :is(b,small){grid-column:2;white-space:normal;line-height:1.5}
 body.website2 .om-preference-options b{font-size:14px}
 body.website2 .om-preference-options small{font-size:12px}
 body.website2 .om-preference-options input{width:18px;height:18px;top:16px;right:12px}
 body.website2 .om-preference-heading{font-size:13px;line-height:1.5}
 body.website2 .om-result-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 body.website2 .om-result-actions :is(button,a){width:100%;min-height:48px;font-size:14px}
 body.website2 .om-reference .om-text-button{white-space:normal;line-height:1.5;min-height:44px;font-size:13px;text-align:left}
 body.website2 :is(.om-reference p,.om-download-note,.om-match-note,.om-screen #analysis-note){font-size:12px;line-height:1.6}
 /* Lead: generous sound controls and a readable browser/export sheet. */
 body.website2 .l-knobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 body.website2 .l-grid{grid-template-columns:1fr}
 body.website2 .l-sound-btn{min-width:0}
 body.website2 #l-sound-name{white-space:normal;line-height:1.4}
 body.website2 .l-sheet :is(input,select){font-size:16px;min-height:44px}
 body.website2 .l-panel-foot{flex-wrap:wrap;gap:16px}
 /* Vocal Studio: clean findings, full-width settings and exports. */
 body.website2 .vs-inside{grid-template-columns:1fr;gap:0}
 body.website2 .vs-inside li{grid-template-columns:1fr;gap:5px;padding:14px 0;border:0;border-bottom:1px solid #e1dce8;border-radius:0;background:none}
 body.website2 .vs-inside li b{font-size:14px}
 body.website2 .vs-inside li span{font-size:13px;line-height:1.6}
 body.website2 :is(.vs-two,.vs-actions,.vs-choice){grid-template-columns:1fr;gap:12px}
 body.website2 .vs-choice label span{padding:14px;min-height:64px}
 body.website2 .vs-choice small{font-size:12px;line-height:1.5}
 body.website2 .vs-actions button{min-height:46px}
 body.website2 .vs-dialog :is(input:not([type=checkbox]):not([type=radio]),select){font-size:16px;min-height:44px}
 /* Beat Studio: creation fields and contextual choices stay readable. */
 body.website2 :is(.bc-addons,.bc-pair){grid-template-columns:1fr;gap:12px}
 body.website2 .bc-addon{min-height:64px}
 body.website2 .bc-addons :is(small,p){font-size:12px;line-height:1.5}
 body.website2 :is(.bt-prompt-foot,.bt-library-tools,.bf-action-dock){flex-wrap:wrap;gap:12px}
 body.website2 .bf-editor-modal .bf-action-dock{grid-template-columns:1fr}
 body.website2 .bf-action-dock :is(button,a){min-height:44px;white-space:normal;line-height:1.5}
 body.website2 .bt-dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
}

@media(max-width:700px){body.website2 .c-loop-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}body.website2 .c-loop-dl{min-height:44px;white-space:normal;font-size:13px}body.website2 .c-loop-clean{font-size:11px}}

body.website2 .ss-mode-group summary{cursor:pointer;color:#35263f;font-size:14px;min-height:48px;padding:14px 0;line-height:1.5;border-bottom:1px solid #e1dbe7;margin-bottom:10px}body.website2 .ss-mode-group:not([open]) summary{margin-bottom:0}

body.website2 .ss-mode-group summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}body.website2 .ss-mode-group summary::-webkit-details-marker{display:none}body.website2 .ss-mode-group summary::after{content:'+';font-size:22px;font-weight:400}body.website2 .ss-mode-group[open] summary::after{content:'−'}
@media(max-width:700px){
 body.website2 .om-preference-options label>span{height:auto;min-height:68px;grid-template-rows:1fr;align-items:center;box-sizing:border-box}
 body.website2 .om-preference-options label>span b{grid-row:1/3;align-self:center}
 body.website2 .om-preference-options .om-auto{height:auto;min-height:68px;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:14px 32px 14px 14px}
 body.website2 .om-preference-options .om-auto>span{margin:0;width:38px;text-align:center;flex:none}
 body.website2 .om-preference-options .om-auto b{font-size:14px;text-align:left;line-height:1.5}
}

@media(max-width:700px){body.website2 .c-loop-play{grid-column:1;grid-row:1}body.website2 .c-loop-top{grid-column:2;grid-row:1;min-width:0}body.website2 .c-loop-wave{grid-row:2}body.website2 .c-loop-foot{grid-row:3}body.website2 .c-delivery-toolbar{flex-wrap:wrap;gap:14px}body.website2 .c-delivery-toolbar>span{font-size:11px}}

/* Format upgrades already have a full labelled action above the mixer. */
body.website2 .ss-ruler-end .sz-pro-chip{display:none}

@media(max-width:700px){
 body.website2 .om-result-actions #download{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;padding:14px}
 body.website2 .om-result-actions #download svg{width:18px;height:18px;flex:none}
 body.website2 .tw-handoff{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 body.website2 .tw-handoff button{width:100%;min-height:48px;font-size:13px;line-height:1.5}
}