/*
Cross-surface finish layer.
Loaded after each page's local design system so the player, public pages,
studio and control room share the same keyboard, touch and world-aware
behaviour without changing any product data or playback state.
*/
:root{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:96px}
::selection{background:color-mix(in srgb,var(--a2,#67e8ff) 42%,transparent);color:var(--fg,#fff)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-x:none}
:where(a,button,input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--a2,#67e8ff)!important;outline-offset:4px}
:where(button,a[href],input,select,textarea){touch-action:manipulation}
:where(.artist-hero,.profile-hero,.mast,.card,.panel,.artist-main,.side-card,.playlist-card,.person-card,.submission,.soundcheck,.review-editor,.locked-card,.track-intro){scroll-margin-top:106px}
/* A single keyboard escape route for every major surface. */
.surface-skip{position:fixed;z-index:200;left:12px;top:10px;padding:11px 13px;border:1px solid var(--a2,#67e8ff);border-radius:10px;background:var(--bg2,#0b1428);color:var(--fg,#fff);font:800 .72rem/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:0 14px 34px -16px #000;transform:translateY(-180%);transition:transform .18s ease}
.surface-skip:focus{transform:translateY(0)}
.surface-error-page{display:grid;min-height:100vh;place-items:center;padding:24px;background:var(--ev-scene,radial-gradient(700px 460px at 88% 0%,rgba(104,92,255,.28),transparent 62%),linear-gradient(155deg,#050713,#0a1430))!important}.surface-unavailable{width:min(640px,100%);padding:clamp(26px,6vw,52px);border:1px solid color-mix(in srgb,var(--a2,#67e8ff) 37%,rgba(167,207,255,.18));border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--a2,#67e8ff) 12%,rgba(9,22,40,.92)),rgba(9,22,40,.9) 52%,color-mix(in srgb,var(--a3,#ae8dff) 14%,rgba(9,22,40,.92)));box-shadow:inset 0 1px rgba(255,255,255,.13),0 36px 80px -40px #000;text-align:center}.surface-unavailable .eyebrow{display:block;color:var(--a2,#67e8ff);font:800 .62rem/1 Inter,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase}.surface-unavailable h1{margin:12px 0 0;color:var(--fg,#f3f8ff);font:800 clamp(2rem,8vw,4.2rem)/.94 "Space Grotesk",Inter,sans-serif;letter-spacing:-.07em}.surface-unavailable p{max-width:470px;margin:16px auto 0;color:var(--muted,#a3b5cd);font-size:.9rem;line-height:1.55}.surface-unavailable .surface-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:25px}.surface-unavailable .surface-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--a2,#67e8ff) 35%,rgba(167,207,255,.18));border-radius:10px;background:color-mix(in srgb,var(--a2,#67e8ff) 9%,rgba(255,255,255,.03));color:var(--fg,#f3f8ff);font:800 .74rem/1 Inter,system-ui,sans-serif;text-decoration:none}.surface-unavailable .surface-actions a.primary{border-color:transparent;background:linear-gradient(135deg,var(--a1,#ffc276),var(--a3,#ae8dff));color:#fff}
/* Give repeated controls a consistent, legible resting and hover state. */
:where(.artist-top nav a,.top nav a,.top-actions a,.top-actions button,.actions a,.actions button,.small-btn,.secondary,.action,.profile-actions button,.editor-actions button,.header-open){min-height:42px}
@media(hover:hover){
:where(.artist-tile,.playlist-card,.person-card,.submission,.metric,.journey li,.world-card,.path-card,.system-card,.platform-card){transition:transform .22s ease,border-color .22s ease,box-shadow .25s ease}
:where(.artist-tile,.playlist-card,.person-card,.submission,.world-card,.path-card,.system-card,.platform-card):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a2,#67e8ff) 55%,var(--line))!important;box-shadow:0 22px 42px -31px color-mix(in srgb,var(--a2,#67e8ff) 60%,transparent)}
}
/* Artist directory: browse feels like a catalog, not a static wall of tiles. */
.directory-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(155px,.32fr) minmax(155px,.32fr);gap:12px;align-items:end;margin-top:28px;padding:14px;border:1px solid color-mix(in srgb,var(--a2) 22%,var(--line));border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--a2) 8%,transparent),color-mix(in srgb,var(--bg2) 78%,transparent));box-shadow:inset 0 1px rgba(255,255,255,.08),0 19px 38px -36px #000}
.directory-filter,.directory-source,.directory-sort{display:grid;gap:7px;color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.directory-filter-field{display:flex;gap:8px}.directory-filter input,.directory-source select,.directory-sort select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--fg);font:600 .8rem/1 Inter,system-ui,sans-serif;letter-spacing:normal;text-transform:none}.directory-filter button{min-width:44px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--a2) 9%,transparent);color:var(--a2);font:800 1rem/1 Inter,system-ui,sans-serif;cursor:pointer}.directory-filter button:hover{border-color:var(--a2);background:color-mix(in srgb,var(--a2) 16%,transparent)}.directory-count,.directory-collection-status{grid-column:1/-1;min-height:1.3em;margin:0;color:var(--muted);font-size:.7rem}.directory-count strong{color:var(--a2)}.directory-collection-status{color:color-mix(in srgb,var(--a2) 78%,var(--fg));font-size:.67rem}.artist-grid[aria-busy="true"]{opacity:.62;transition:opacity .15s ease}.artist-grid .artist-tile[hidden]{display:none!important}.artist-tile[data-source~="signal"] .tile-mark{background:linear-gradient(135deg,var(--a2),var(--a3))}.artist-tile[data-source~="signal"] .tile-arrow{color:var(--a1)}.tile-origin{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:3px 5px;border:1px solid color-mix(in srgb,var(--a2) 42%,var(--line));border-radius:999px;color:var(--a2);font:800 .5rem/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}.directory-empty{margin:18px 0 0;padding:18px;border:1px dashed color-mix(in srgb,var(--a2) 38%,var(--line));border-radius:15px;color:var(--muted);font-size:.8rem;text-align:center}
/* Theme worlds have different material, not merely different hues. */
:root[data-theme="cyber"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a2) 13%,transparent),0 20px 44px -34px #000}
:root[data-theme="anime"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 2px rgba(255,255,255,.14),0 23px 45px -34px color-mix(in srgb,var(--a3) 35%,transparent)}
:root[data-theme="girly"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 1px rgba(255,255,255,.16),0 23px 46px -34px color-mix(in srgb,var(--a1) 34%,transparent)}
:root[data-theme="miami"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 1px rgba(255,255,255,.13),0 23px 46px -34px color-mix(in srgb,var(--a1) 32%,transparent)}
:root[data-theme="cuban"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 1px rgba(255,248,222,.13),0 23px 46px -34px color-mix(in srgb,var(--a1) 28%,transparent)}
:root[data-theme="aurora"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 1px rgba(239,255,251,.14),0 23px 46px -34px color-mix(in srgb,var(--a2) 31%,transparent)}
:root[data-theme="verdant"] :is(.directory-tools,.artist-tile,.card,.panel,.submission,.playlist-card,.person-card){box-shadow:inset 0 1px rgba(243,255,237,.13),0 23px 46px -34px color-mix(in srgb,var(--a1) 26%,transparent)}
:root:is([data-theme="fps"],[data-theme="rpg"],[data-theme="moba"],[data-theme="racing"]) .directory-tools{border-color:color-mix(in srgb,var(--a1) 35%,var(--line));background:linear-gradient(122deg,color-mix(in srgb,var(--a1) 10%,var(--bg2)),color-mix(in srgb,var(--a2) 7%,var(--bg2)))}
@media(max-width:760px){
:root{scroll-padding-top:82px}
.surface-skip{left:8px;top:8px}
.directory-tools{grid-template-columns:1fr;gap:11px;margin-top:21px;padding:12px;border-radius:15px}
.directory-count{grid-column:auto;line-height:1.45}
:where(.review-nav,.top-actions,.artist-top nav){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
:where(.review-nav,.top-actions,.artist-top nav)::-webkit-scrollbar{display:none}
:where(.review-filters,.catalog-filters,.release-filters){align-items:stretch}
}
@media(max-width:520px){
:where(.directory-filter input,.directory-source select,.directory-sort select){font-size:16px}
:where(.artist-top nav a,.top nav a,.top-actions a,.top-actions button,.actions a,.actions button,.small-btn,.secondary,.action,.profile-actions button,.editor-actions button,.header-open){min-height:44px}
:where(.review-pagination,.catalog-pagination,.control-actions,.actions,.artist-actions,.editor-actions){gap:8px}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.surface-skip,:where(.artist-tile,.playlist-card,.person-card,.submission,.metric,.journey li,.world-card,.path-card,.system-card,.platform-card){transition:none!important}}
/* `hidden` must actually hide. An author rule that sets display — .watch-video-status
button{...}, .feedback-btn{display:inline-flex}, .watch-actions button{...} — outranks
the UA [hidden]{display:none} rule (0,1,1 beats 0,1,0), so controls the JS had "hidden"
stayed on screen. That shipped three separate times, including a permanently visible
"Retry video" button on a page whose video was fine. The only prior guard was scoped to
.artist-grid .artist-tile. Every surface loads this file, so enforce it once, here. */
[hidden]{display:none!important}
/* Platform rhythm: one navigation treatment, bounded copy, deliberate focus. */
:root{--surface-space:clamp(18px,3vw,32px);--surface-radius:18px}
:where(.artist-hero,.directory-head,.mast,.hub-command-copy,.track-intro) h1{text-wrap:balance}
:where(.artist-hero,.directory-head,.mast,.hub-command-copy,.track-intro) p{text-wrap:pretty}
/* Main regions receive programmatic focus after navigation; controls keep rings. */
main[tabindex="-1"]:focus{outline:none}
.platform-embedded>.surface-skip{display:none}
:is(.artist-top,.top) nav.platform-nav{display:flex;align-items:center;gap:6px;min-width:0}
:is(.artist-top,.top) nav.platform-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:9px 12px;border:1px solid transparent;border-radius:11px;color:var(--muted);background:transparent;text-decoration:none;white-space:nowrap;font:700 .72rem/1.2 Inter,system-ui,sans-serif}
:is(.artist-top,.top) nav.platform-nav a:is(:hover,:focus-visible){color:var(--fg);background:color-mix(in srgb,var(--a2) 8%,transparent);border-color:color-mix(in srgb,var(--a2) 32%,var(--line))}
:is(.artist-top,.top) nav.platform-nav a:is([aria-current="page"],[aria-current="true"]){color:var(--fg);background:color-mix(in srgb,var(--a2) 12%,var(--bg2));border-color:color-mix(in srgb,var(--a2) 48%,var(--line));box-shadow:inset 0 -2px var(--a2)}
:is(.artist-top,.top) nav.platform-nav a[aria-current]::before{display:none}
.studio-sections{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 0}
.studio-sections a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;color:var(--fg);text-decoration:none;font:700 .76rem/1.2 Inter,system-ui,sans-serif;background:color-mix(in srgb,var(--a2) 5%,var(--bg2))}
.studio-sections a:hover{border-color:var(--a2);color:var(--a2)}
:where(#studioIdentity,#studioUpload,#studioReleases,#creatorPro){scroll-margin-top:16px}
@media(max-width:760px){
/* A single swipeable row leaves room for the page itself. */
:is(.artist-top,.top) nav.platform-nav{width:100%;max-width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding-inline:4px;gap:3px;padding:4px 2px 7px;margin:0;grid-column:1/-1}
:is(.artist-top,.top) nav.platform-nav a{min-height:44px;padding:9px 8px;font-size:.72rem}
.artist-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.artist-top>.brand{min-width:0;font-size:.85rem;white-space:nowrap}
.artist-top .brand i{display:none}
.artist-top-tools{display:contents}
.artist-top .artist-theme-toggle{width:auto;max-width:155px;min-height:44px;padding:9px 11px;font-size:.7rem;justify-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-top nav.platform-nav{grid-row:2}
.artist-shell main{padding-top:24px}
.artist-directory .directory-collection{flex-direction:column;align-items:stretch}
.artist-directory .directory-collection-actions{flex-direction:row;flex-wrap:wrap;width:100%;gap:8px}
.artist-directory .directory-collection-actions .action{flex:1 1 120px;min-height:44px;width:auto}
#appMain .discover-shortcuts{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:2px 2px 8px;scroll-padding-inline:2px}
#appMain .discover-shortcuts a{flex:none;width:auto;min-width:132px;min-height:44px;padding:10px 16px;white-space:nowrap}
#creatorMain .studio-sections{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:14px 0 7px;scrollbar-width:thin}
#creatorMain .studio-sections a{flex:none}
#creatorMain .mast{gap:0;padding:24px 0}
#creatorMain .mast h1{font-size:clamp(2rem,8vw,3rem)}
#creatorMain .mast p{max-width:55ch;margin-bottom:0}
#creatorMain .studio-art{display:none}
#creatorMain .journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:20px}
#creatorMain .journey li{display:grid;gap:6px;padding:12px 10px}
#creatorMain .journey li>span{font-size:1rem}
#creatorMain .journey b{font-size:.71rem;line-height:1.35}
#creatorMain .journey p{display:none}
#hubShell .hub-command{padding:22px 20px;margin:20px 0;gap:0}
#hubShell .hub-command-copy h1{font-size:clamp(2rem,9vw,3rem)}
#hubShell .hub-command-copy p{font-size:.85rem;line-height:1.55}
#hubShell .hub-route-stack{display:none}
#hubShell .hub-command-actions{display:flex;flex-wrap:wrap;gap:8px}
#hubShell .hub-command-actions a{flex:1 1 auto;min-height:44px}
#hubShell .hub-worldbar{padding:14px;gap:12px;margin-block:16px}
#hubShell .worldbar-status{display:none}
#hubShell .worldbar-copy p{display:none}
}
@media(max-width:360px){
.artist-top>.brand{font-size:.74rem;gap:7px}
.artist-top .artist-theme-toggle{max-width:132px;font-size:.66rem}
}
/* Section rhythm and reading surfaces share each world's materials. Geometry
remains local to the owning page so embedded pages keep their own layouts. */
:is(#hubShell,#creatorMain,.artist-shell,#prof) :is(.section-head h2,.card>h2,.side-card h2,.dashboard-heading h2){font-family:var(--world-heading,'Space Grotesk'),Inter,sans-serif;line-height:1.18;letter-spacing:-.025em;text-wrap:balance}
:is(#hubShell,#creatorMain,.artist-shell) :is(.playlist-card,.person-card,.side-card,.submission,.card,.artist-tile,.signal-post){border-radius:var(--world-radius,18px);border-color:var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--a3) 4%,var(--bg2)),var(--bg2));box-shadow:inset 0 1px #ffffff08,0 14px 34px -28px #000}
:is(#hubShell,#creatorMain,.artist-shell) :is(.section-head p,.field-help,.context-note,.card>p,.side-card p){line-height:1.65}
:is(#hubShell,#creatorMain,.artist-shell) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){background-color:var(--bg);border-color:color-mix(in srgb,var(--a2) 13%,var(--line));border-radius:11px;box-shadow:inset 0 1px 3px #0001}
:is(#hubShell,#creatorMain,.artist-shell) :is(input,textarea,select):focus{border-color:var(--a2)}
#hubShell .hub-worldbar{border-radius:var(--world-radius,20px);background:var(--bg2);border-color:var(--line);box-shadow:none;padding:20px 24px}
#hubShell .worldbar-art{border-radius:var(--world-small-radius,14px);box-shadow:none}
#hubShell .worldbar-copy h2{font:700 clamp(1.2rem,2.1vw,1.7rem)/1.18 var(--world-heading,'Space Grotesk'),sans-serif;letter-spacing:-.025em}
#hubShell .worldbar-copy p{font-size:.76rem;line-height:1.55;max-width:65ch}
#hubShell .worldbar-pulse{animation:none;box-shadow:none}
#hubShell .hub-command{padding:34px;border-radius:var(--world-radius,24px);border:1px solid var(--line);background:linear-gradient(125deg,color-mix(in srgb,var(--a2) 8%,var(--bg2)),var(--bg));box-shadow:none}
#hubShell .hub-command-copy h1{font-family:var(--world-heading,'Space Grotesk'),sans-serif;line-height:1.06;letter-spacing:-.045em}
#hubShell .hub-command-copy p{max-width:56ch;font-size:.88rem;line-height:1.65}
#hubShell .hub-route-stack a{background:var(--bg);border-color:var(--line);box-shadow:none;border-radius:12px}
#hubShell .hub-route-stack a>span{border-color:var(--line);background:var(--bg2);box-shadow:none}
#hubShell .section:not(.message-inbox){margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
#hubShell .section-head{margin-bottom:22px;gap:18px}
#hubShell .section-head h2{font-size:clamp(1.55rem,2.8vw,2.2rem);margin-top:7px}
#hubShell .person-card{padding:20px;gap:15px}
#hubShell .person-avatar{border-radius:var(--world-small-radius,15px);box-shadow:inset 0 1px #ffffff55;color:#0b172a;text-shadow:none}
#hubShell .person-card h3{font-size:1.08rem;line-height:1.3;letter-spacing:-.02em}
#hubShell .person-bio{font-size:.78rem;line-height:1.6}
#hubShell .playlist-card{padding:22px}
#hubShell .playlist-card h3{line-height:1.3;font-size:1.13rem}
#hubShell .playlist-tools{background:var(--bg2);border-color:var(--line);padding:16px;border-radius:14px}
#hubShell .signal-compose{background:var(--bg2);border:1px solid var(--line);border-radius:var(--world-radius,18px);padding:20px}
#hubShell .signal-post{padding:22px}
#hubShell .signal-body{font-size:.9rem;line-height:1.7}
#hubShell .editor-intro{background:var(--bg2);border-radius:var(--world-radius,18px);box-shadow:none}
#hubShell .profile-preview{background:linear-gradient(140deg,color-mix(in srgb,var(--a2) 7%,var(--bg)),var(--bg));border-color:var(--line);box-shadow:none}
#hubShell .avatar-options{gap:9px}
#hubShell .avatar-option{background:var(--bg);border-color:var(--line);box-shadow:none;border-radius:12px}
#hubShell .avatar-option[aria-pressed="true"]{background:color-mix(in srgb,var(--a2) 10%,var(--bg));border:2px solid var(--a2)}
#creatorMain .mast h1{font-family:var(--world-heading,'Space Grotesk'),sans-serif;line-height:1.05;letter-spacing:-.05em}
#creatorMain .card{padding:clamp(22px,3vw,34px)}
#creatorMain .card>h2{font-size:1.65rem;margin-top:10px}
#creatorMain .journey li{background:var(--bg2);border-color:var(--line);box-shadow:none;border-radius:var(--world-small-radius,14px)}
#creatorMain .studio-sections a{border-radius:12px;background:var(--bg2);box-shadow:none}
#creatorMain .release-summary>div{background:var(--bg);border-color:var(--line);box-shadow:none}
.artist-shell .artist-hero{border-radius:var(--world-radius,24px);border-color:var(--line);background:linear-gradient(125deg,color-mix(in srgb,var(--a3) 7%,var(--bg2)),var(--bg));box-shadow:none}
.artist-shell :is(.artist-hero,.directory-head) h1{font-family:var(--world-heading,'Space Grotesk'),sans-serif;line-height:1.04;letter-spacing:-.05em}
.artist-shell .side-card{padding:24px}
.artist-shell .artist-row{border-radius:12px}
.artist-shell .artist-row:hover{background:color-mix(in srgb,var(--a2) 5%,var(--bg2))}
.artist-shell .directory-tools{background:var(--bg2);border-color:var(--line);box-shadow:none;border-radius:var(--world-small-radius,16px);padding:18px}
#prof .dashboard-space{background:var(--bg2);box-shadow:inset 0 1px #ffffff08;border-color:var(--line)}
#prof .dashboard-space:hover{border-color:var(--a2);background:color-mix(in srgb,var(--a2) 6%,var(--bg2))}
#prof .dashboard-space-icon{border-radius:12px;box-shadow:none;background:var(--bg);border:1px solid var(--line)}
#appMain .shelf-head{align-items:end;gap:14px;margin-bottom:20px}
#appMain .shelf-head h2{font-family:var(--world-heading,'Space Grotesk'),sans-serif;letter-spacing:-.025em;line-height:1.2}
#appMain .shelf-head p{font-size:.78rem;line-height:1.5;color:var(--muted)}
#appMain .pathways{border-radius:var(--world-radius,22px);border-color:var(--line);box-shadow:none}
@media(max-width:640px){
#hubShell .hub-worldbar{padding:14px}
#hubShell .hub-command{padding:24px 20px}
#hubShell .section:not(.message-inbox){margin-top:28px;padding-top:24px}
#hubShell .section-head{gap:12px;margin-bottom:18px}
#hubShell :is(.person-card,.playlist-card,.signal-post,.signal-compose){padding:18px}
#creatorMain .card{padding:22px 18px}
.artist-shell .side-card{padding:20px}
.artist-shell .directory-tools{padding:14px}
}
/* Phone headings: the column layout starts every heading at the left edge (the
desktop row aligns them to the bottom, which on a phone pushed them right). */
@media(max-width:640px){#appMain .shelf-head{align-items:flex-start}}
/* Phone website header, like the app's: the command bar above already has Search
and My music, so the header keeps the brand, the account, the world and the
station; signed out the account is a labelled "Sign in" pill, not a bare dot. */
@media(max-width:640px){
html:not([data-app]) header#appHeader>:is(#collectionBtn,.search){display:none}
html:not([data-app]) header#appHeader{grid-template-columns:minmax(0,1fr) auto repeat(2,44px)}
html:not([data-app]) header#appHeader>.account-btn{grid-column:2;grid-row:1}
html:not([data-app]) header#appHeader>.theme-wrap{grid-column:3;grid-row:1}
html:not([data-app]) header#appHeader>.tune-btn{grid-column:4;grid-row:1}
html:not([data-app]) header#appHeader>#accountBtn:not(.signed-in){
width:auto;min-width:44px;height:36px;min-height:36px;align-self:center;justify-content:center;gap:6px;padding:0 14px 0 11px;
border:0;border-radius:var(--chrome-radius,18px);background:var(--accent-grad,linear-gradient(135deg,var(--a1,#8768ef),var(--a2,#7ce6dc)));color:var(--on-accent,#080a14);
font:800 13px/1 Inter,system-ui,sans-serif;overflow:visible;
}
html:not([data-app]) header#appHeader>#accountBtn:not(.signed-in)::after{content:none}
html:not([data-app]) header#appHeader>#accountBtn:not(.signed-in) #accountLabel{display:inline}
html:not([data-app]) header#appHeader>#accountBtn:not(.signed-in) .account-mini-avatar{display:none}
html:not([data-app]) header#appHeader>#accountBtn:not(.signed-in) .account-dot{
display:block;flex:none;width:16px;height:16px;border-radius:0;background:currentColor;box-shadow:none;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
}
/* Until the first account status arrives the control waits unseen, so a signed-in
visit never flashes "Sign in"; it shows after 2.5 s regardless. */
@media(max-width:640px){
html:not([data-app]) header#appHeader>#accountBtn[data-state=pending]{visibility:hidden;animation:web-account-late .2s ease 2.5s forwards}
}
@keyframes web-account-late{to{visibility:visible}}
/* Now playing on a phone: the radio actions and the tools are one even three-column grid
(they wrapped into ragged rows of different widths). Short phones in the app keep their
single row of icons (app-shell.css). */
@media(max-width:540px){
#stage .stage-feedback,#stage .stage-intelligence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#stage .stage-feedback .feedback-btn,#stage .stage-intelligence .stage-tool{width:100%;min-width:0;gap:5px;padding-inline:4px;justify-content:center;white-space:nowrap}
#stage .stage-feedback .feedback-btn svg{flex:none}
#stage .stage-intelligence .queue-count{min-width:0;padding:0 4px;font-size:.56rem}
}
@media(max-width:540px) and (max-height:900px){html[data-app] #stage .stage-feedback{display:flex}}
/* One first-run card at a time: the languages card waits until the getting-started tip is dismissed. */
#discover>.evm-welcome:not([hidden])~#languageNudge{display:none}
/* My music with an empty playlist: no disabled Play all / Shuffle, no Delete on the built-in list (it cannot be
deleted), and the song tools (select, undo, search, "0 of 0") step aside for the empty-state card. They come
back with the first song, and never hide while a search is typed. */
.playlist-play-actions:has(>#playlistPlay:disabled):has(>#playlistShuffle:disabled){display:none}
#deletePlaylist:disabled{display:none}
body:has(#playlistPlay:disabled) #playlistTracks:has(>#collectionEmpty:not([hidden])):not(:has(#playlistSearch:not(:placeholder-shown)))>:is(.evm-library-tools,.playlist-search-row,#playlistResults){display:none}
/* Mini player: the song title opens the full player; its tap area covers the bar's height (it was a 19 pt
strip, under the 44 pt minimum, measured on an iPhone 13 mini), never wider than the title. */
.np .np-title-open{position:relative}
.np .np-title-open::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-26px}