:where(#stemRoom) [hidden]{display:none!important}:where(#stemRoom) .topbar{max-width:none;padding-inline:max(24px,calc((100vw - 1176px)/2));gap:16px}:where(#stemRoom) .topbar .concept{display:none}:where(#stemRoom) .account-trigger{margin-left:auto;font-size:12px;font-family:'Space Mono',monospace;background:#111d;border-color:#2dd4bf40}:where(#stemRoom) .site-nav{display:flex;gap:8px;max-width:1240px;padding:14px 32px 0;margin:auto;overflow-x:auto}:where(#stemRoom) .site-nav button{white-space:nowrap;background:#111b;border-color:transparent;font-size:13px}:where(#stemRoom) .site-nav button[aria-current=page]{border-color:#2dd4bf50;color:#5eead4;background:#2dd4bf12}:where(#stemRoom) .page-intro{margin:16px 0 28px;max-width:760px}:where(#stemRoom) .page-intro h1,:where(#stemRoom) .page-intro div.room-h1{margin-top:12px}:where(#stemRoom) .page-intro p{color:#aaa}:where(#stemRoom) .page-view{padding-bottom:40px;min-height:65vh}:where(#stemRoom) .site-footer{max-width:1176px;margin:20px auto 0;padding:24px 0 145px;border-top:1px solid #292929;color:#999;font:11px 'Space Mono',monospace;display:flex;justify-content:space-between;align-items:center;gap:20px}:where(#stemRoom) .site-footer div{display:flex;gap:20px;align-items:center}:where(#stemRoom) .site-footer a{color:#aaa;text-decoration:none;min-height:44px;display:flex;align-items:center}:where(#stemRoom) .site-footer button{background:transparent;border:0;font:inherit}:where(#stemRoom) .accent{color:#2dd4bf}:where(#stemRoom) .output-meter{margin:16px 0;padding:12px;background:#1a1a1a;border:1px solid #292929;border-radius:6px}:where(#stemRoom) .meter-top{display:flex;justify-content:space-between;font:10px 'Space Mono',monospace;color:#bbb;margin-bottom:10px}:where(#stemRoom) .meter-top small{font-size:8px;color:#888;margin-left:8px}:where(#stemRoom) .stereo-bars>div{display:flex;gap:8px;align-items:center;margin:5px 0}:where(#stemRoom) .stereo-bars span{font:9px monospace;color:#999}:where(#stemRoom) .meter-track{height:6px;flex:1;background:#2b2b2b;overflow:hidden;border-radius:2px}:where(#stemRoom) .meter-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#2dd4bf 0%,#2dd4bf 65%,#eab308 88%,#ef4444);transition:width .12s linear}:where(#stemRoom) .master-fader{display:flex;align-items:center;gap:14px;font:10px 'Space Mono',monospace;color:#aaa;margin-top:4px}:where(#stemRoom) .master-fader input{flex:1}:where(#stemRoom) .master-fader output{min-width:32px}:where(#stemRoom) .session-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}:where(#stemRoom) .session-actions button{font-size:12px;background:#111}:where(#stemRoom) .upload-panel{max-width:800px}:where(#stemRoom) .drop-preview{padding:30px 16px;text-align:center;border:1px dashed #2dd4bf60;border-radius:10px;background:#2dd4bf06}:where(#stemRoom) .drop-preview p{color:#aaa;font-size:12px}:where(#stemRoom) .upload-glyph{font-size:40px;color:#2dd4bf}:where(#stemRoom) .split-models{border:0;padding:0;margin:24px 0}:where(#stemRoom) .split-models legend{font:10px 'Space Mono',monospace;color:#2dd4bf;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}:where(#stemRoom) .split-models label{display:flex;gap:12px;align-items:center;padding:16px 12px;background:#161616;border:1px solid #2a2a2a;border-radius:8px;margin:8px 0;cursor:pointer}:where(#stemRoom) .split-models label:has(input:checked){border-color:#2dd4bf;background:#2dd4bf08}:where(#stemRoom) .split-models strong,:where(#stemRoom) .split-models small{display:block}:where(#stemRoom) .split-models strong{font-size:14px}:where(#stemRoom) .split-models small{font-size:11px;color:#aaa}:where(#stemRoom) .split-models input{width:20px;height:20px}:where(#stemRoom) .split-models .pro,:where(#stemRoom) .free-tag{margin-left:auto;font:9px 'Space Mono',monospace}:where(#stemRoom) .free-tag{color:#2dd4bf;padding:5px 7px;border:1px solid rgba(45,212,191,.3);border-radius:4px;background:rgba(45,212,191,.08)}:where(#stemRoom) .allowance{color:#aaa;font-size:12px}:where(#stemRoom) .how-it-works{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:36px 0}:where(#stemRoom) .how-it-works b{font:10px 'Space Mono',monospace;color:#2dd4bf}:where(#stemRoom) .how-it-works h3{margin-top:10px}:where(#stemRoom) .how-it-works p{color:#aaa;font-size:13px}:where(#stemRoom) .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}:where(#stemRoom) .plan-grid h2{font-size:34px;margin:16px 0}:where(#stemRoom) .plan-grid h2 small{font:13px 'Archivo',sans-serif;color:#aaa}:where(#stemRoom) .plan-grid p,:where(#stemRoom) .plan-grid li{color:#aaa;font-size:14px}:where(#stemRoom) .plan-grid ul{padding-left:20px;line-height:2}:where(#stemRoom) .premium-plan{border-color:#D4A84B70}:where(#stemRoom) .proposed{border:1px solid #D4A84B40;border-radius:8px;padding:14px;margin:20px 0;font-size:12px}:where(#stemRoom) .proposed strong{color:#f5c451}:where(#stemRoom) .proposed p{font-size:12px;margin-bottom:0}:where(#stemRoom) .credits-card{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:20px;max-width:900px}:where(#stemRoom) .credits-card p{color:#aaa;font-size:13px}:where(#stemRoom) .faq-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}:where(#stemRoom) details{border-bottom:1px solid #292929;padding:8px 0}:where(#stemRoom) summary{min-height:48px;cursor:pointer;padding:12px 0;font-size:14px;line-height:1.5}:where(#stemRoom) details[open] summary{color:#5eead4}:where(#stemRoom) details p{color:#aaa;font-size:13px;line-height:1.7}:where(#stemRoom) .song-card{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}:where(#stemRoom) .song-card h2{margin:0}:where(#stemRoom) .song-card p{color:#aaa;font-size:12px}:where(#stemRoom) .account-state{display:flex;flex-direction:column;gap:8px;margin:20px 0;font-size:12px}:where(#stemRoom) .account-summary{padding:18px;background:#1a1a1a;border-radius:8px;margin:16px 0}:where(#stemRoom) .account-summary strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700}:where(#stemRoom) .account-summary p{font-size:12px}:where(#stemRoom) .usage-track{height:6px;border-radius:3px;background:#333;margin:12px 0}:where(#stemRoom) .usage-track span{display:block;height:100%;background:#2dd4bf;width:40%}:where(#stemRoom) .account-actions{display:flex;gap:8px;flex-wrap:wrap}:where(#stemRoom) .account-actions button{font-size:12px}:where(#stemRoom) .account-note{font-size:11px;color:#aaa}:where(#stemRoom) .flow-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}:where(#stemRoom) #flowDialog p{font-size:13px}:where(#stemRoom) .download-options{display:grid;gap:10px}:where(#stemRoom) .download-options button{text-align:left}:where(#stemRoom) .download-options small{display:block;color:#aaa;font-size:11px}:where(#stemRoom) .navigation-hint{color:#aaa;font-size:12px}:where(#stemRoom) .page-view:focus{outline:none}@media(prefers-reduced-motion:reduce){:where(#stemRoom) .meter-track i{transition:none}}@media(max-width:760px){:where(#stemRoom) .topbar{padding:0 16px;height:64px}:where(#stemRoom) .brand{font-size:12px}:where(#stemRoom) .brandmark{font-size:24px;margin-right:7px}:where(#stemRoom) .account-trigger{font:10px 'Archivo',sans-serif;padding:8px}:where(#stemRoom) .site-nav{padding:10px 16px 0;gap:4px}:where(#stemRoom) .site-nav button{font-size:12px;padding:8px 12px}:where(#stemRoom) .page-view{padding-bottom:24px}:where(#stemRoom) .plan-grid,:where(#stemRoom) .faq-layout,:where(#stemRoom) .how-it-works{grid-template-columns:1fr}:where(#stemRoom) .credits-card,:where(#stemRoom) .song-card{align-items:flex-start;flex-direction:column}:where(#stemRoom) .site-footer{margin:20px 16px 0;padding-bottom:150px;align-items:flex-start;flex-direction:column;gap:8px}:where(#stemRoom) .session-actions{gap:8px}:where(#stemRoom) .session-actions button{flex:1;font-size:11px}:where(#stemRoom) .split-models .pro{font-size:8px}:where(#stemRoom) .page-intro h1,:where(#stemRoom) .page-intro div.room-h1{font-size:28px}:where(#stemRoom) .output-meter{padding:10px;margin:12px 0}:where(#stemRoom) .master-fader{gap:10px}:where(#stemRoom) .how-it-works{gap:12px}:where(#stemRoom) .page-intro{margin-top:8px}:where(#stemRoom) .site-footer div{gap:16px}} 
:where(#stemRoom) .channel-wave{height:27px;display:flex;align-items:center;gap:2px;border-radius:4px;background:#ffffff03;padding:3px 5px;overflow:hidden}:where(#stemRoom) .channel-wave i{flex:1;min-width:1px;background:var(--stem);opacity:.38;border-radius:1px}:where(#stemRoom) .stem.muted .channel-wave i{opacity:.12}

/* Shared outline navigation icons; keep labels and a familiar ampersand. */
:where(#stemRoom) .site-nav {gap:8px}
:where(#stemRoom) .site-nav button,:where(#stemRoom) .site-nav a {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 16px;border-radius:10px;font-weight:500;line-height:1.2}
:where(#stemRoom) .site-nav .nav-icon {width:18px;height:18px;flex-shrink:0;opacity:.8}
:where(#stemRoom) .site-nav button:hover .nav-icon,:where(#stemRoom) .site-nav [aria-current=page] .nav-icon {opacity:1}
:where(#stemRoom) .site-nav .nav-amp {font-family:Arial,Helvetica,sans-serif;font-weight:400}
/* The Key & BPM Finder tab is a link to its own page, drawn like the buttons beside it. Full name on wide screens, Key & BPM on phones. */
:where(#stemRoom) .site-nav a{border:1px solid #45584e;background:#111b;color:#fff;font-size:13px;text-decoration:none;white-space:nowrap}
:where(#stemRoom) .site-nav a:hover .nav-icon{opacity:1}
:where(#stemRoom) .site-nav a[data-boot-disabled]{opacity:.4;cursor:default}
:where(#stemRoom) .site-nav .nav-short{display:none}
@media(max-width:760px){:where(#stemRoom) .site-nav .nav-full{display:none}:where(#stemRoom) .site-nav .nav-short{display:inline}}
@media(max-width:760px){:where(#stemRoom) .site-nav button,:where(#stemRoom) .site-nav a{gap:7px;padding:10px 12px;font-size:12px}:where(#stemRoom) .site-nav .nav-icon{width:16px;height:16px}}

/* Phones: the five tabs share the width instead of scrolling. Side by side at 12px the row is wider than most phones, so under 480px each tab stacks its icon over its label, like an app tab bar. Key & BPM, the longest label, is 58px at 11.5px: under 400px the labels drop to 11px with no side padding, which fits it from 340px up (common phones are 360-430px); narrower, it wraps to two lines. */
@media(max-width:760px){:where(#stemRoom) .site-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible}:where(#stemRoom) .site-nav button,:where(#stemRoom) .site-nav a{min-width:0;padding:10px 6px}}
@media(max-width:480px){:where(#stemRoom) .site-nav button,:where(#stemRoom) .site-nav a{flex-direction:column;gap:4px;min-height:52px;padding:7px 2px;font-size:11.5px;line-height:1.1}}
@media(max-width:400px){:where(#stemRoom) .site-nav{gap:4px}:where(#stemRoom) .site-nav button,:where(#stemRoom) .site-nav a{padding:7px 0;font-size:11px}}
@media(max-width:340px){:where(#stemRoom) .site-nav a{white-space:normal;text-align:center}}
/* A room tab's link (index.html's head script sets html.room-tab-entry; connected-pages.js clears it once the tab is
   open): until then the upload screen is hidden, all but its startup status, which says when the room is slow or failed. */
html.room-tab-entry :where(#stemRoom) #uploadView{visibility:hidden}html.room-tab-entry :where(#stemRoom) #roomStartup{visibility:visible}
/* Signed in on the narrowest phones the name would push the bar past the screen (brand + 145px button > 340px): the avatar
   stays, and the button's label and title still name the account. */
@media(max-width:350px){:where(#stemRoom) #accountButton.has-profile .account-name{display:none}}
/* Homepage landing layout (room-host.js sets html.room-landing): the room is followed on the page by the H1, the copy,
   the FAQ and the footer, so nothing in it is sized to the screen. The transport is hidden with no song open, so the
   footer (with Report a problem) keeps no clearance for it. */
html.room-landing :where(#stemRoom) .page-view{min-height:0}html.room-landing :where(#stemRoom) .site-footer{padding-bottom:28px}