/* Presentation only: retain control IDs and all mastering behaviour. */
:root{--brand:#f1bcbf;--brand-ink:#22191c}
body{background:#181818;color:#f2efe7;font-family:Arial,Helvetica,sans-serif}
main.simpleView,main{max-width:1120px;padding:24px 32px}
p,.muted,small{color:#beb9b4}
button,select,input[type=text],input[type=number]{border-radius:2px}
.studioBanner{border-radius:0;min-height:430px;margin-bottom:0;padding:64px 36px 36px;isolation:isolate;background:#080808}
.studioBannerImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.studioBanner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.7) 32%,rgba(0,0,0,.15) 58%,rgba(0,0,0,0));z-index:-1}
.studioHeroCopy{display:block;max-width:620px}
.studioKicker{font:10px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);margin:0 0 15px}
.studioHeroCopy h1{font:clamp(60px,8vw,94px)/.92 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 22px}
.studioHeroCopy h1 em{font-style:normal;color:var(--brand)}
.studioDescription{max-width:390px;font-size:16px;line-height:1.6;color:#e3ddd6;margin:0}
.studioBenefits{gap:8px 20px;margin:24px 0 0}
.studioBenefits li{border:0;border-radius:0;background:none;box-shadow:none;padding:0;font:10px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:.05em;color:#dfd6d3}
.studioBenefits .benefitIcon{display:none}
.trackRow{gap:0;margin:0 0 44px;border-top:3px solid #a80850;border-bottom:1px solid #4b4146;grid-template-columns:250px minmax(0,1fr);background:#252223}
.trackRow .uploadZone{border:0;border-right:1px solid #4b4146;border-radius:0;background:none;padding:26px;gap:12px}
.trackRow .uploadZone strong{font:700 22px/1.2 Arial,Helvetica,sans-serif;margin-bottom:10px}
.trackRow .uploadZone p{font-size:12px;line-height:1.6}
.trackRow .uploadZone input[type=file]::file-selector-button{border-radius:0}
.trackRow .transport{border:0;border-radius:0;background:#211f20;padding:24px}
#listeningState{font:11px/1.5 'Courier New',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.simpleView #wave{height:90px;border-radius:0;background:#111}
#time,#trackName{font:11px/1.5 'Courier New',monospace}
.presetBrowser{margin:36px 0}
.presetBrowser h2{font:700 clamp(28px,3.5vw,38px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.025em}
.presetBrowser>p{font-size:13px}
.presetCards{gap:18px;margin-top:26px}
.presetCards .presetCard{border:1px solid #4a4346;border-top:4px solid color-mix(in srgb,var(--tint) 65%,#eee);border-radius:0;background:#242223!important;box-shadow:none;padding:40px 0 0!important;transition:border-color .15s;min-height:245px}
.presetCards .presetCard:hover{transform:none;border-color:var(--brand);box-shadow:none}
.presetCards .presetCard.selected{border-width:1px;border-top-width:4px;outline:2px solid var(--brand);outline-offset:3px;background:#30262b!important;box-shadow:none}
.presetCards .presetSelect,.presetCards .selected .presetSelect{padding:16px 20px 24px}
.presetCards .presetCard strong{font:700 25px/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.02em;color:#f2efe7;text-shadow:none;margin:10px 0 14px}
.presetCards .presetSelect>span:last-child{font:13px/1.65 Arial,sans-serif;color:#c8c0c0}
.presetCards .presetTag{font:9px/1.4 'Courier New',monospace;letter-spacing:.12em;color:color-mix(in srgb,var(--tint) 40%,#fff);padding-right:0;min-height:0}
.presetCards .presetTier{left:20px;top:16px;font:9px/1.5 'Courier New',monospace!important;letter-spacing:.14em;color:#beb3b7!important}
.presetEdit{border-radius:0;background:transparent;width:32px;height:32px;top:10px;right:12px}
.presetCards .presetCompare,.presetCards .selected .presetCompare{border-radius:0;border:1px solid #63545c;background:#171516;margin:0 20px 20px;padding:3px;gap:3px}
.presetCompare button{border-radius:0;font:11px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:.06em;min-height:38px}
.presetCompare button[aria-pressed=true]{background:var(--brand);color:#21171d;box-shadow:inset 0 -3px 0 #a80850}
.presetCards .premiumCard{border-color:#786647!important;border-top-color:#ceb17e!important;background:linear-gradient(120deg,#302a23,#232121)!important}
.presetCards .premiumCard[data-preset-id="7b488331-aedd-4309-b98e-27e617c660a4"]{border-color:#936b54!important;background:linear-gradient(120deg,#342822,#232121)!important}
.presetCards .premiumCard[data-preset-id="12a3054a-2700-45de-b9ea-31e858e0ad7a"]{border-color:#7c8f93!important;background:linear-gradient(120deg,#283033,#212223)!important}
.premiumPresetIntro{border-top:1px solid #6b515d;padding-top:28px;margin-top:24px}
.premiumPresetIntro h2{font:700 clamp(27px,3.5vw,36px)/1.2 Arial,Helvetica,sans-serif;text-transform:none;letter-spacing:-.025em;max-width:640px;color:#f2efe7}
.listenActions{border-top:1px solid #58444c;padding-top:24px;margin-top:28px}
#exportFormat,#export{border-radius:0}
#export{background:var(--brand);color:var(--brand-ink);font-weight:700}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:700px){main.simpleView,main{padding:16px}.studioBanner{padding:48px 24px 30px;min-height:420px}.studioBanner::after{background:linear-gradient(90deg,#000e,#0008)}.studioHeroCopy h1{font-size:clamp(52px,17vw,68px)}.studioDescription{font-size:15px}.trackRow{grid-template-columns:1fr}.trackRow .uploadZone{border-right:0;border-bottom:1px solid #4b4146;padding:22px}.trackRow .transport{padding:22px}.presetCards{gap:14px}.presetCards .presetCard strong{font-size:24px}.studioBenefits{gap:10px 16px}}
@media(max-width:420px){.presetCards{grid-template-columns:1fr}.presetCards .presetCard{min-height:220px}.studioHeroCopy h1{font-size:clamp(52px,17vw,62px)}.studioKicker{font-size:9px}.studioBenefits{max-width:270px}}

/* On narrow screens use the right-hand room details, keeping the embedded
   centre logo outside the text area. Desktop retains the full composition. */
@media(max-width:1000px){
  .studioBannerImage{left:auto;right:0;width:240%;max-width:none;object-position:right center}
}