:root {
  --ink: #171716;
  --paper: #f2f0ea;
  --muted: #7c7b75;
  --line: #d8d5cd;
  --orange: #e65825;
  --orange-soft: #f7c5a2;
  --lime: #b9df51;
  --panel: #e8e6de;
  --hero-surface: #1f201d;
  --hero-copy: #f7f4ec;
  font-family: Manrope, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.app-shell { display: flex; min-height: 100vh; padding-bottom: 96px; }

.sidebar { width: 256px; min-height: calc(100vh - 96px); position: fixed; inset: 0 auto 96px 0; display: flex; flex-direction: column; padding: 30px 18px 20px; border-right: 1px solid var(--line); background: rgba(242,240,234,.87); backdrop-filter: blur(12px); z-index: 4; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.06em; font-size: 24px; padding: 0 10px; }
.brand-logo-frame { position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(66,176,163,.42); border-radius: 50%; background: #eaf5ed; box-shadow: 0 8px 20px rgba(44,133,122,.16), 0 0 0 4px rgba(103,207,193,.08); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.brand-logo-frame::after { position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.6); border-radius: inherit; content: ""; pointer-events: none; }
.brand-logo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-logo-frame--sidebar { width: 38px; height: 38px; }
.brand-logo-frame--topbar { width: 44px; height: 44px; }
.wordmark:hover .brand-logo-frame, .topbar-brand:hover .brand-logo-frame { border-color: rgba(49,181,164,.8); box-shadow: 0 11px 25px rgba(44,133,122,.24), 0 0 0 5px rgba(103,207,193,.1); transform: translateY(-1px) scale(1.035); }
.wordmark:focus-visible, .topbar-brand:focus-visible { border-radius: 5px; outline: 2px solid var(--orange); outline-offset: 4px; }
.main-nav { display: grid; gap: 3px; margin-top: 57px; }
.nav-item { display: flex; align-items: center; gap: 14px; border-radius: 7px; padding: 11px 10px; color: #74736e; text-decoration: none; font-weight: 700; font-size: 14px; transition: .2s ease; }
.nav-item:hover, .nav-item.active { color: var(--ink); background: #e5e2d9; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--orange); }
.nav-icon { width: 19px; text-align: center; font-size: 21px; font-weight: 400; line-height: 15px; }
.sidebar-playlists { margin: 40px 10px 0; min-height: 80px; overflow: auto; }
.side-label, .eyebrow { color: #898780; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; font-weight: 500; }
.sidebar-playlist-list { display: grid; gap: 1px; margin-top: 12px; }
.sidebar-playlist-item { border: 0; background: transparent; text-align: left; padding: 7px 0; color: #72716d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.sidebar-playlist-item:hover { color: var(--orange); }
.empty-side-playlist { margin: 12px 0 0; color: #99968f; font-size: 12px; line-height: 1.6; }
.new-playlist-button { margin: 24px 10px; padding: 0; width: max-content; border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: 13px; }
.new-playlist-button span { color: var(--orange); font-size: 20px; vertical-align: -2px; }
.profile-chip { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px; border: 1px solid #d9d6ce; border-radius: 10px; background: rgba(255,255,255,.25); text-align: left; transition: .2s ease; }
.profile-chip:hover { background: #fffdf8; border-color: #c8c4bb; }
.profile-avatar { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #324118; font-family: "Playfair Display", serif; font-weight: 700; }
.profile-name-wrap { display: grid; gap: 1px; min-width: 0; }
.profile-name-wrap strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.profile-name-wrap small { color: var(--muted); font-size: 9px; white-space: nowrap; }.profile-more { margin-left: auto; color: var(--muted); letter-spacing: 1px; }

.content { width: calc(100% - 256px); margin-left: 256px; }
.topbar { height: 92px; display: flex; align-items: center; gap: clamp(16px,2vw,30px); padding: 0 clamp(25px, 4vw, 74px); }
.topbar-leading, .topbar-brand { display: flex; align-items: center; }.topbar-leading { flex: 0 0 auto; gap: 12px; }.topbar-brand { gap: 10px; color: var(--ink); text-decoration: none; }.topbar-brand-copy { display: grid; gap: 1px; line-height: 1; }.topbar-brand-copy strong { font-size: 17px; letter-spacing: -.055em; }.topbar-brand-copy small { color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.search-box { width: min(365px, 50vw); min-width: 0; display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 12px; border-bottom: 1px solid #c9c6be; color: var(--muted); }
.search-box > span { font-size: 27px; line-height: 15px; transform: rotate(-20deg); }.search-box input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 13px; }.search-box input::placeholder { color: #898780; }.search-box kbd { padding: 2px 4px; border: 1px solid #c9c6be; border-radius: 3px; color: #8e8b83; font-family: "DM Mono", monospace; font-size: 8px; }.topbar-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 15px; }.theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 17px; line-height: 1; transition: .2s ease; }.theme-toggle:hover { border-color: var(--orange); color: var(--orange); transform: rotate(12deg); }.now-chip { color: #77756e; font-size: 11px; }.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #f8ded2; }.mobile-menu-button { display: none; }

.page { display: none; padding: 0 clamp(25px, 4vw, 74px) 58px; animation: appear .35s ease; }.page.active-page { display: block; }@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hero { min-height: 390px; display: grid; grid-template-columns: minmax(320px,1.12fr) minmax(360px,.88fr); overflow: hidden; border-radius: 4px; background: var(--hero-surface); color: var(--hero-copy); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px,6vw,86px); background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 38%); }.hero .eyebrow { color: #c0bdb5; margin: 0 0 18px; }.hero h1, .inner-page-heading h1 { margin: 0; font-size: clamp(39px, 4.35vw, 66px); letter-spacing: -.065em; line-height: .99; font-weight: 800; text-wrap: balance; }.hero h1 em { color: var(--orange-soft); font-family: "Playfair Display", serif; font-weight: 600; letter-spacing: -.07em; }.hero-description { max-width: 410px; margin: 25px 0 29px; color: #d0ccc3; font-size: 13px; line-height: 1.8; }.hero-actions { display: flex; align-items: center; gap: 25px; }.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 4px; padding: 13px 19px; background: var(--orange); color: white; font-size: 12px; font-weight: 800; box-shadow: 0 7px 20px rgba(230,88,37,.2); transition: transform .2s ease, background .2s ease; }.primary-button:hover { transform: translateY(-2px); background: #d74e1f; }.text-button, .see-all { border: 0; background: transparent; color: #e6e1d8; font-size: 12px; font-weight: 800; text-decoration: none; }.text-button span, .see-all span { margin-left: 6px; color: var(--orange); }.hero-art { position: relative; min-height: 390px; overflow: hidden; background: #e9d4bd; color: #312818; }.sun-disc { position: absolute; width: 280px; height: 280px; left: 52%; top: 47%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 0 0 38px rgba(255,255,255,.11); }.orbit { position: absolute; z-index: 1; border: 1px solid rgba(55,42,25,.5); border-radius: 50%; }.orbit-one { width: 420px; height: 150px; top: 120px; left: -18px; transform: rotate(-23deg); }.orbit-two { width: 280px; height: 500px; top: -55px; left: 140px; transform: rotate(31deg); }.hero-art p { position: absolute; z-index: 2; top: 30px; left: 30px; margin: 0; font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.5; letter-spacing: .1em; }.hero-art p i { font-family: "Playfair Display", serif; font-size: 22px; line-height: .7; letter-spacing: -.04em; }.art-caption { position: absolute; z-index: 2; bottom: 25px; right: 30px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; transform: rotate(-90deg); transform-origin: right bottom; }

.section-block { margin-top: 56px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.section-heading .eyebrow, .genre-heading .eyebrow { margin: 0 0 7px; }.section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.055em; }.see-all { color: var(--ink); }.count-label { color: #8f8b81; font-family: "DM Mono", monospace; font-size: 10px; }.genre-groups { display: grid; gap: 42px; }.genre-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }.genre-heading h3 { margin: 0; font-size: 21px; letter-spacing: -.05em; }
.continue-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.continue-card { position: relative; min-height: 184px; overflow: hidden; padding: 19px; border-radius: 3px; color: white; cursor: pointer; }.continue-card:hover .card-play { opacity: 1; transform: translateY(0); }.continue-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.48),transparent 65%); }.continue-card > * { position: relative; z-index: 1; }.cover-empty { background: #51504a; }.cover-dawn { background: linear-gradient(145deg,#e75e30,#f6b382 52%,#332846); }.cover-forest { background: linear-gradient(145deg,#172e29,#527c68 47%,#c1da7b); }.cover-lilac { background: linear-gradient(145deg,#705b91,#dbb3d8 55%,#eddfc3); }.cover-blue { background: linear-gradient(145deg,#17284b,#4983aa 57%,#c8d8de); }.cover-sienna { background: linear-gradient(145deg,#482524,#b4512f 51%,#efb36c); }.cover-night { background: linear-gradient(145deg,#06090e,#2b4555 55%,#77a9a2); }.cover-wave { background: linear-gradient(145deg,#6b4937,#b68a69 50%,#ded7b6); }.continue-number { color: rgba(255,255,255,.67); font-family: "DM Mono", monospace; font-size: 10px; }.continue-card h3 { position: absolute; bottom: 16px; margin: 0; font-size: 16px; letter-spacing: -.045em; }.continue-card p { position: absolute; left: 19px; bottom: 0; margin: 0 0 4px; color: rgba(255,255,255,.72); font-size: 10px; }.card-play { position: absolute; right: 17px; bottom: 16px; width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--orange); color: white; opacity: 0; transform: translateY(6px); transition: .2s ease; }
.track-list { border-top: 1px solid var(--line); }.track-row { display: grid; grid-template-columns: 30px 45px minmax(150px,1.25fr) minmax(120px,1fr) minmax(70px,.58fr) 85px 35px; align-items: center; min-height: 69px; border-bottom: 1px solid var(--line); column-gap: 10px; cursor: pointer; transition: .15s ease; }.track-row:hover, .track-row.current-track { background: #e6e3da; }.track-index { color: #96938b; font-family: "DM Mono", monospace; font-size: 11px; text-align: center; }.track-row.current-track .track-index { color: var(--orange); }.track-cover, .mini-cover { display: grid; place-items: center; overflow: hidden; }.track-cover { width: 39px; height: 39px; border-radius: 2px; color: white; font-family: "DM Mono", monospace; font-size: 9px; }.track-info { min-width: 0; display: grid; gap: 3px; }.track-info strong, .track-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.track-info strong { font-size: 12px; }.track-info span, .track-album, .track-duration { color: #7f7d76; font-size: 11px; }.track-album { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.track-tag { width: max-content; padding: 4px 7px; border: 1px solid #c6c2b8; border-radius: 20px; color: #7c7971; font-family: "DM Mono", monospace; font-size: 8px; }.track-row.current-track .track-tag { border-color: var(--orange); color: var(--orange); }.row-menu, .icon-button { border: 0; background: transparent; color: #66645f; }.row-menu { font-size: 18px; line-height: 1; }.row-menu:hover, .icon-button:hover { color: var(--orange); }.track-menu { position: relative; }.track-menu-popover { position: absolute; z-index: 5; top: 29px; right: 0; width: 186px; padding: 6px; border: 1px solid #d2cec4; border-radius: 5px; background: #fffdf7; box-shadow: 0 12px 25px rgba(45,39,28,.12); }.track-menu-popover p { margin: 4px 8px 7px; color: #949188; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .1em; }.track-menu-popover button { width: 100%; padding: 8px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); font-size: 11px; text-align: left; }.track-menu-popover button:hover { background: #eeeae1; color: var(--orange); }.empty-state { padding: 35px 0; color: var(--muted); font-size: 13px; }

.inner-page-heading { padding: 61px 0 41px; border-bottom: 1px solid var(--line); }.inner-page-heading .eyebrow { margin: 0 0 15px; }.inner-page-heading h1 { font-size: clamp(38px,5vw,70px); }.inner-page-heading > p:not(.eyebrow) { margin: 17px 0 0; color: var(--muted); font-size: 13px; }.full-track-list { margin-top: 29px; }.playlists-heading { display: flex; justify-content: space-between; align-items: end; }.playlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 32px; }.playlist-card { position: relative; min-height: 210px; display: flex; flex-direction: column; justify-content: end; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: #ebe7dc; cursor: pointer; }.playlist-card::before { content: ""; position: absolute; top: -55px; right: -35px; width: 185px; height: 185px; border: 25px solid var(--card-accent,#d8a85f); border-radius: 50%; opacity: .75; }.playlist-card::after { content: ""; position: absolute; top: 30px; right: 28px; width: 30px; height: 30px; border-radius: 50%; background: var(--card-accent,#d8a85f); }.playlist-card > * { position: relative; z-index: 1; }.playlist-card:hover { border-color: var(--orange); }.playlist-card h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.055em; }.playlist-card p { margin: 0; color: #77736b; font-size: 11px; }.playlist-card .playlist-dots { position: absolute; right: 8px; bottom: 7px; z-index: 2; border: 0; background: transparent; color: #6f6a61; font-size: 19px; }.playlist-card .playlist-dots:hover { color: var(--orange); }.new-playlist-card { justify-content: center; align-items: center; gap: 10px; border-style: dashed; background: transparent; color: #77746d; text-align: center; }.new-playlist-card::before, .new-playlist-card::after { display: none; }.new-playlist-card strong { font-size: 13px; }.plus-circle { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #aaa69d; border-radius: 50%; font-size: 27px; font-weight: 300; }.playlist-detail { margin-top: 38px; }.playlist-detail.hidden { display: none; }.playlist-detail-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }.playlist-detail-title h2 { margin: 5px 0 0; font-size: 28px; letter-spacing: -.06em; }.subtle-button { padding: 7px 10px; border: 1px solid #cfcbc1; border-radius: 4px; background: transparent; color: #6b6862; font-size: 10px; font-weight: 700; }.subtle-button:hover { color: var(--orange); border-color: var(--orange); }

.player { position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; height: 96px; display: grid; grid-template-columns: 1fr minmax(360px, 590px) 1fr; align-items: center; gap: 23px; padding: 12px 31px; border-top: 1px solid #333431; background: #1c1d1b; color: white; }.player-track-info { display: flex; align-items: center; gap: 11px; min-width: 0; }.mini-cover { width: 53px; height: 53px; flex: 0 0 auto; border-radius: 2px; color: white; font-family: "DM Mono", monospace; font-size: 10px; }.player-track-info > div:nth-child(2) { display: grid; min-width: 0; gap: 4px; }.player-track-info strong, .player-track-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.player-track-info strong { font-size: 11px; }.player-track-info span { color: #aaa9a3; font-size: 10px; }.like-button { margin-left: 5px; color: #aaa9a3; font-size: 22px; }.like-button.liked { color: var(--orange); }.player-main { display: grid; gap: 6px; }.player-controls { display: flex; justify-content: center; align-items: center; gap: 13px; }.player .icon-button { color: #aaa9a3; font-size: 16px; }.player .icon-button.active { color: var(--orange); }.play-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f5f2ea; color: #222; font-size: 11px; padding-left: 3px; }.progress-row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; }.progress-row time { color: #a6a39d; font-family: "DM Mono", monospace; font-size: 9px; text-align: center; }.player-extra { display: flex; justify-content: end; align-items: center; gap: 8px; }.player-extra input { width: 88px; }.queue-button { margin-left: 9px; }
input[type="range"] { accent-color: var(--orange); cursor: pointer; height: 3px; }
.track-cover.has-cover, .mini-cover.has-cover { background: transparent; }.track-cover img, .mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-page { padding-top: 12px; }.now-playing-stage { display: grid; grid-template-columns: minmax(300px,.92fr) minmax(280px,.78fr); gap: clamp(32px,6vw,88px); min-height: 570px; padding: clamp(25px,4vw,56px); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }.now-playing-topline { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.now-playing-topline .eyebrow { margin: 0; }.now-playing-topline .text-button { color: var(--ink); }.turntable-scene { position: relative; min-height: 390px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: radial-gradient(circle at 50% 42%, #3f3e39 0 3%, #252623 4% 27%, #1d1e1c 28% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 18px 24px 45px rgba(45,39,28,.14); }.vinyl-record { position: relative; z-index: 1; width: min(70%,350px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #141512 0 2px, #22231f 3px 5px, #11120f 6px 8px); box-shadow: 12px 16px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.09); animation: vinyl-spin 9s linear infinite; animation-play-state: paused; }.vinyl-label { position: absolute; inset: 24%; overflow: hidden; border: 3px solid #171816; border-radius: 50%; background: #e65825; }.vinyl-label::after { content: ""; position: absolute; inset: 50%; width: 13px; height: 13px; margin: -6.5px; border-radius: 50%; background: #191a18; box-shadow: 0 0 0 3px rgba(245,242,234,.42); }.vinyl-label img { width: 100%; height: 100%; object-fit: cover; }.turntable-arm { position: absolute; z-index: 2; top: 10%; right: 11%; width: 30%; height: 12px; border-radius: 10px; background: linear-gradient(90deg,#c7c4bd,#77766f); box-shadow: 0 2px 8px rgba(0,0,0,.34); transform: rotate(-27deg); transform-origin: right center; transition: transform .8s cubic-bezier(.2,.8,.2,1); }.turntable-arm::before { content: ""; position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; border-radius: 50%; background: #d1cec5; box-shadow: inset 0 0 0 5px #696963; }.turntable-arm span { position: absolute; bottom: -13px; left: -4px; width: 20px; height: 29px; border-radius: 3px; background: #d8d4ca; transform: rotate(16deg); }.now-playing-copy { align-self: center; max-width: 410px; }.now-playing-copy .eyebrow { margin: 0 0 18px; }.now-playing-copy h1 { max-width: 9ch; margin: 0; font-size: clamp(46px,5.5vw,76px); letter-spacing: -.075em; line-height: .9; text-wrap: balance; }.now-playing-artist { margin: 24px 0 4px; font-size: 16px; font-weight: 700; }.now-playing-album { margin: 0; color: var(--muted); font-size: 12px; }.audio-visualizer { height: 61px; display: flex; align-items: end; gap: 5px; margin: 38px 0 30px; }.audio-visualizer span { width: 5px; height: 100%; border-radius: 8px; background: var(--orange); opacity: .28; transform: scaleY(.22); transform-origin: bottom; animation: visualizer-pulse .85s ease-in-out infinite alternate; animation-play-state: paused; }.audio-visualizer span:nth-child(3n) { animation-duration: .62s; }.audio-visualizer span:nth-child(4n) { animation-duration: 1.1s; }.audio-visualizer span:nth-child(5n) { animation-delay: -.35s; }.player-page.is-playing .vinyl-record, .player-page.is-playing .audio-visualizer span { animation-play-state: running; }.player-page.is-playing .turntable-arm { transform: rotate(-12deg); }.player-page.is-playing .audio-visualizer span { opacity: 1; }.page-player-controls { display: flex; align-items: center; gap: 20px; }.page-player-controls .icon-button { font-size: 17px; }.page-player-controls .play-button { width: 44px; height: 44px; font-size: 14px; padding-left: 4px; }.player-page .page-player-controls .icon-button { color: var(--ink); }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }@keyframes visualizer-pulse { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
:root[data-theme="dark"] .now-playing-stage { background: #22231f; border-color: #3b3d39; }.player-page.is-playing .turntable-scene { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 18px 24px 45px rgba(0,0,0,.32); }
@media (max-width: 800px) { .now-playing-stage { grid-template-columns: 1fr; gap: 30px; min-height: 0; }.now-playing-copy { width: 100%; max-width: none; }.turntable-scene { min-height: 350px; }.vinyl-record { width: min(72%,320px); }.now-playing-copy h1 { max-width: 12ch; } }
@media (prefers-reduced-motion: reduce) { .vinyl-record, .audio-visualizer span { animation: none !important; } .turntable-arm { transition: none; } }
:root[data-theme="dark"] { color-scheme: dark; --ink: #f1efe9; --paper: #161715; --muted: #b4b1a9; --line: #3b3d39; --panel: #242622; --hero-surface: #201e1b; --hero-copy: #f7f4ec; }
:root[data-theme="dark"] .sidebar { background: rgba(22,23,21,.9); }
:root[data-theme="dark"] .brand-logo-frame { border-color: rgba(122,226,210,.56); background: #b7e7df; box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 5px rgba(99,211,194,.1); }
:root[data-theme="dark"] .brand-logo-frame::after { border-color: rgba(15,46,43,.18); }
:root[data-theme="dark"] .brand-logo-frame img { filter: saturate(.82) contrast(1.04) brightness(.92); }
:root[data-theme="dark"] .topbar-brand-copy small { color: #9ab8b1; }
:root[data-theme="dark"] .nav-item { color: #bbb8af; }
:root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .nav-item.active { background: #2c2e2a; color: var(--ink); }
:root[data-theme="dark"] .profile-chip { border-color: #3d3f3a; background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .profile-chip:hover { background: #292b27; border-color: #555750; }
:root[data-theme="dark"] .search-box { border-color: #4b4d47; }
:root[data-theme="dark"] .search-box input::placeholder, :root[data-theme="dark"] .search-box kbd, :root[data-theme="dark"] .now-chip { color: #aaa79f; }
:root[data-theme="dark"] .search-box kbd { border-color: #4b4d47; }
:root[data-theme="dark"] .pulse { box-shadow: 0 0 0 4px #442b20; }
:root[data-theme="dark"] .hero-art { background: #453c32; color: #f1e3cf; }
:root[data-theme="dark"] .orbit { border-color: rgba(241,227,207,.42); }
:root[data-theme="dark"] .track-row:hover, :root[data-theme="dark"] .track-row.current-track { background: #292b27; }
:root[data-theme="dark"] .track-info span, :root[data-theme="dark"] .track-album, :root[data-theme="dark"] .track-duration { color: #b8b5ad; }
:root[data-theme="dark"] .track-tag { border-color: #62645d; color: #b8b5ad; }
:root[data-theme="dark"] .row-menu, :root[data-theme="dark"] .icon-button { color: #c0bdb5; }
:root[data-theme="dark"] .track-menu-popover { border-color: #454741; background: #242622; box-shadow: 0 12px 25px rgba(0,0,0,.35); }
:root[data-theme="dark"] .track-menu-popover button { color: var(--ink); }
:root[data-theme="dark"] .track-menu-popover button:hover { background: #343630; }
:root[data-theme="dark"] .playlist-card { background: #292b27; }
:root[data-theme="dark"] .playlist-card p, :root[data-theme="dark"] .playlist-card .playlist-dots, :root[data-theme="dark"] .new-playlist-card { color: #b8b5ad; }
:root[data-theme="dark"] .subtle-button { border-color: #5a5c55; color: #c3c0b8; }
:root[data-theme="dark"] .dialog { background: #242622; }
:root[data-theme="dark"] .dialog input { border-color: #5a5c55; }
.dialog { width: min(455px, calc(100vw - 32px)); border: 0; border-radius: 5px; padding: 0; background: #f6f3eb; color: var(--ink); box-shadow: 0 25px 70px rgba(27,24,18,.35); }.dialog::backdrop { background: rgba(30,29,25,.54); backdrop-filter: blur(2px); }.dialog form { position: relative; display: grid; padding: 34px; }.dialog .eyebrow { margin: 0 0 10px; }.dialog h2 { margin: 0 0 26px; font-size: 29px; letter-spacing: -.06em; }.dialog label { margin-bottom: 7px; font-size: 11px; font-weight: 800; }.dialog label span { color: var(--muted); font-weight: 400; }.dialog input { margin-bottom: 19px; padding: 11px 0; border: 0; border-bottom: 1px solid #bdb9ae; outline: none; background: transparent; color: var(--ink); font-size: 13px; }.dialog input:focus { border-color: var(--orange); }.dialog-submit { justify-self: start; margin-top: 4px; }.close-dialog { position: absolute; top: 15px; right: 17px; border: 0; background: transparent; color: #77736c; font-size: 26px; line-height: 1; }.dialog-copy { margin: -14px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }.toast { position: fixed; z-index: 20; bottom: 115px; left: 50%; transform: translate(-50%,15px); padding: 10px 15px; border-radius: 3px; background: #20211e; color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s ease; }.toast.visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) { .sidebar { width: 210px; }.content { width: calc(100% - 210px); margin-left: 210px; }.hero { grid-template-columns: 1fr .7fr; }.hero-copy { padding: 46px 38px; }.continue-grid { grid-template-columns: 1fr 1fr; }.continue-grid > :last-child { display: none; }.track-row { grid-template-columns: 26px 42px minmax(110px,1fr) minmax(70px,.55fr) 75px 28px; }.track-album { display: none; }.player { grid-template-columns: minmax(180px,1fr) minmax(280px,1.2fr); }.player-extra { display: none; } }
@media (max-width: 680px) { .app-shell { padding-bottom: 118px; }.sidebar { width: min(285px,85vw); transform: translateX(-101%); transition: transform .25s ease; z-index: 12; bottom: 118px; box-shadow: 12px 0 30px rgba(0,0,0,.15); }.sidebar.open { transform: none; }.content { width: 100%; margin: 0; }.topbar { height: 72px; padding: 0 19px; gap: 15px; }.mobile-menu-button { display: block; border: 0; background: transparent; font-size: 20px; }.search-box { flex: 1; width: auto; }.search-box kbd, .now-chip { display: none; }.page { padding: 0 19px 40px; }.hero { grid-template-columns: 1fr; min-height: 500px; }.hero-copy { position: relative; z-index: 1; min-height: 315px; padding: 40px 30px; }.hero-art { min-height: 185px; margin-top: -95px; }.hero-art p { top: 100px; }.sun-disc { width: 200px; height: 200px; top: 62%; }.orbit-one { top: 85px; }.section-block { margin-top: 44px; }.continue-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.continue-card { min-height: 155px; padding: 14px; }.continue-card h3 { left: 14px; bottom: 25px; font-size: 13px; }.continue-card p { left: 14px; font-size: 9px; }.track-row { grid-template-columns: 23px 40px minmax(100px,1fr) 48px 27px; min-height: 65px; gap: 6px; }.track-tag { display: none; }.track-duration { font-size: 10px; }.track-row .track-menu-popover { right: 0; }.inner-page-heading { padding: 38px 0 30px; }.playlists-heading { align-items: start; gap: 20px; }.playlists-heading .primary-button { flex: 0 0 auto; padding: 11px; font-size: 0; }.playlists-heading .primary-button span { font-size: 18px; }.playlist-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }.playlist-card { min-height: 170px; padding: 15px; }.player { height: 118px; grid-template-columns: 1fr auto; padding: 8px 15px 8px; gap: 7px; }.player-track-info .like-button { display: none; }.mini-cover { width: 44px; height: 44px; }.player-main { grid-column: 1 / -1; grid-row: 2; }.player-controls { margin-top: -49px; justify-content: end; gap: 8px; }.player .icon-button { font-size: 13px; }.progress-row { margin-top: 1px; grid-template-columns: 31px 1fr 31px; }.play-button { width: 28px; height: 28px; }.profile-chip { margin-top: 0; }.sidebar-playlists { margin-top: 28px; }.dialog form { padding: 28px 23px; } }
@media (max-width: 680px) { .topbar { gap: 10px; }.topbar-leading { gap: 8px; }.topbar-brand { gap: 8px; }.brand-logo-frame--topbar { width: 36px; height: 36px; }.topbar-brand-copy strong { font-size: 15px; }.topbar-brand-copy small { font-size: 7px; }.search-box { margin-left: 0; } }
@media (max-width: 440px) { .topbar-brand-copy { display: none; }.topbar-leading { gap: 7px; } }

/* Now-playing page: a cover-reactive listening room that keeps the record central. */
.player-page { padding-top: 16px; }
.now-playing-stage { position: relative; isolation: isolate; min-height: 610px; padding: clamp(24px, 4vw, 56px); border: 1px solid #d5d1c7; border-radius: 18px 5px 18px 5px; background: radial-gradient(circle at 92% 7%, rgba(230,88,37,.13), transparent 24%), linear-gradient(135deg, #f1f0eb 0%, #e6e4db 100%); box-shadow: 0 24px 52px rgba(44,39,29,.10), inset 0 1px rgba(255,255,255,.74); }
.now-playing-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .42; pointer-events: none; background-image: linear-gradient(90deg, transparent 49.8%, rgba(49,49,43,.075) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(49,49,43,.075) 50%, transparent 50.2%); background-size: 52px 52px; mask-image: linear-gradient(90deg, black, transparent 72%); }
.now-playing-stage::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; right: -150px; bottom: -185px; border: 1px solid rgba(230,88,37,.27); border-radius: 50%; box-shadow: 0 0 0 37px rgba(230,88,37,.045), 0 0 0 76px rgba(230,88,37,.035); pointer-events: none; }
.now-playing-topline { position: relative; z-index: 3; }
.now-playing-topline .eyebrow { display: flex; align-items: center; gap: 8px; }
.now-playing-topline .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(230,88,37,.13); }
.turntable-scene { isolation: isolate; min-height: 430px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px 3px 15px 3px; background: radial-gradient(circle at 50% 44%, #42413c 0 3%, #292a26 4% 29%, #171815 30% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.44), 19px 25px 48px rgba(44,39,29,.17); }
.cover-ambient { position: absolute; z-index: -2; inset: -20%; opacity: .56; background-image: var(--page-cover); background-position: center; background-size: cover; filter: blur(34px) saturate(.86) brightness(.61); transform: scale(1.14); animation: page-ambient-drift 13s ease-in-out infinite alternate; transition: background-image .55s ease; }
.turntable-scene::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 48%, transparent 9%, rgba(8,9,8,.17) 42%, rgba(5,6,5,.72) 100%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%, rgba(0,0,0,.4)); pointer-events: none; }
.turntable-scene::after { content: ""; position: absolute; z-index: 0; inset: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px 2px 9px 2px; pointer-events: none; }
.turntable-stamp { position: absolute; z-index: 3; top: 22px; left: 22px; display: grid; gap: 3px; color: #f0ece2; font-family: "DM Mono", monospace; letter-spacing: .14em; }
.turntable-stamp span { max-width: 150px; overflow: hidden; color: rgba(240,236,226,.75); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.turntable-stamp strong { font-size: 27px; font-weight: 400; line-height: 1; }
.turntable-note { position: absolute; z-index: 3; right: 20px; bottom: 19px; display: flex; align-items: center; gap: 7px; margin: 0; color: rgba(240,236,226,.68); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.turntable-note span { width: 7px; height: 7px; border: 1px solid #f3c2a9; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(230,88,37,.55); }
.player-page.is-playing .turntable-note span { animation: player-signal 1.45s ease-out infinite; }
.vinyl-record { z-index: 2; width: min(71%, 372px); box-shadow: 14px 18px 38px rgba(0,0,0,.53), inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 12px rgba(0,0,0,.09); }
.vinyl-record::after { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: inset 0 0 0 16px rgba(0,0,0,.09); pointer-events: none; }
.vinyl-label { z-index: 1; border-width: 4px; box-shadow: 0 0 0 6px rgba(0,0,0,.18); }
.turntable-arm { z-index: 4; filter: drop-shadow(0 4px 6px rgba(0,0,0,.34)); }
.now-playing-copy { position: relative; z-index: 2; padding-block: 16px; }
.now-playing-copy h1 { max-width: 10ch; font-size: clamp(48px, 5.7vw, 78px); }
.now-playing-artist { margin-top: 26px; letter-spacing: -.02em; }
.player-page-meta { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #78756c; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .11em; }
.player-page-meta span:first-child { padding: 5px 7px; border: 1px solid #c8c3b8; border-radius: 999px; color: #57554e; font-size: 8px; }
.audio-visualizer { height: 56px; gap: 5px; margin: 29px 0 20px; }
.audio-visualizer span { width: 5px; background: linear-gradient(180deg, #f39a72, var(--orange)); }
.page-progress-wrap { width: min(100%, 390px); }
.page-progress-times { display: flex; justify-content: space-between; margin-bottom: 7px; color: #77736b; font-family: "DM Mono", monospace; font-size: 9px; }
.page-progress-wrap input[type="range"] { width: 100%; margin: 0; accent-color: var(--orange); }
.page-player-controls { gap: 13px; margin-top: 28px; }
.page-player-controls .icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; }
.page-player-controls .icon-button:hover { border-color: #c8c4ba; background: rgba(255,255,255,.48); }
.page-player-controls .play-button { width: 57px; height: 57px; box-shadow: 0 10px 21px rgba(42,39,31,.16); transition: transform .2s ease, box-shadow .2s ease; }
.page-player-controls .play-button:hover { transform: translateY(-2px) scale(1.035); box-shadow: 0 14px 26px rgba(42,39,31,.22); }
.page-utility-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #c9c5bb; border-radius: 50%; background: transparent; color: #6f6c65; font-size: 17px; line-height: 1; transition: .2s ease; }
.page-utility-button:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.page-utility-button.active, .page-utility-button.liked { border-color: var(--orange); background: var(--orange); color: #fff; box-shadow: 0 7px 15px rgba(230,88,37,.2); }
.page-like-button { margin-left: 4px; font-size: 21px; }
.player-page button:focus-visible, .page-progress-wrap input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

:root[data-theme="dark"] .now-playing-stage { border-color: #42453e; background: radial-gradient(circle at 93% 7%, rgba(230,88,37,.18), transparent 25%), linear-gradient(135deg, #292b27 0%, #20221e 100%); box-shadow: 0 27px 58px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.035); }
:root[data-theme="dark"] .now-playing-stage::before { opacity: .24; }
:root[data-theme="dark"] .now-playing-stage::after { border-color: rgba(247,197,162,.22); box-shadow: 0 0 0 37px rgba(230,88,37,.065), 0 0 0 76px rgba(230,88,37,.035); }
:root[data-theme="dark"] .turntable-scene { border-color: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 20px 26px 50px rgba(0,0,0,.42); }
:root[data-theme="dark"] .player-page-meta { color: #aaa79f; }
:root[data-theme="dark"] .player-page-meta span:first-child { border-color: #5b5e56; color: #ddd9cf; }
:root[data-theme="dark"] .page-progress-times { color: #aaa79f; }
:root[data-theme="dark"] .page-player-controls .icon-button:hover { border-color: #575a53; background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .page-utility-button { border-color: #565952; color: #d0ccc4; }
:root[data-theme="dark"] .page-player-controls .play-button { box-shadow: 0 10px 24px rgba(0,0,0,.36); }

@keyframes page-ambient-drift { from { transform: scale(1.12) rotate(-1.5deg); } to { transform: scale(1.2) rotate(1.5deg); } }
@keyframes player-signal { 0% { box-shadow: 0 0 0 0 rgba(230,88,37,.58); } 80%,100% { box-shadow: 0 0 0 9px rgba(230,88,37,0); } }
@media (max-width: 800px) { .player-page { padding-top: 8px; }.now-playing-stage { gap: 30px; min-height: 0; padding: 23px; }.turntable-scene { min-height: 360px; }.now-playing-copy { padding: 0; }.now-playing-copy h1 { max-width: 12ch; }.page-player-controls { margin-top: 23px; }.turntable-stamp { top: 17px; left: 17px; }.turntable-note { right: 16px; bottom: 15px; } }
@media (max-width: 440px) { .now-playing-stage { padding: 18px; }.now-playing-topline .text-button { font-size: 10px; }.turntable-scene { min-height: 315px; }.turntable-stamp strong { font-size: 22px; }.now-playing-copy h1 { font-size: clamp(42px, 15vw, 58px); }.page-player-controls { gap: 8px; }.page-utility-button { width: 31px; height: 31px; }.page-player-controls .icon-button { width: 34px; height: 34px; }.page-player-controls .play-button { width: 51px; height: 51px; } }
@media (prefers-reduced-motion: reduce) { .cover-ambient, .player-page.is-playing .turntable-note span { animation: none !important; } }

/* Audio-reactive spectrum and floating notation on the turntable. */
.music-notes { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.music-note { position: absolute; color: #ffd5c1; font-family: "Playfair Display", serif; font-size: 27px; line-height: 1; opacity: .16; text-shadow: 0 0 var(--music-note-glow, 9px) rgba(230,88,37,.6); transform: scale(var(--music-note-scale, .88)); transform-origin: center; transition: opacity .16s ease, text-shadow .16s ease; }
.note-one { top: 24%; left: 17%; animation-duration: 4.8s; animation-delay: -.7s; }
.note-two { top: 15%; right: 25%; font-size: 20px; animation-duration: 5.6s; animation-delay: -2s; }
.note-three { top: 57%; left: 21%; font-size: 19px; animation-duration: 5.2s; animation-delay: -3.1s; }
.note-four { top: 58%; right: 16%; font-size: 25px; animation-duration: 4.4s; animation-delay: -1.6s; }
.player-page.is-playing .music-note { opacity: var(--music-note-opacity, .5); animation-name: music-note-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.player-page.is-playing .vinyl-record { box-shadow: 14px 18px 38px rgba(0,0,0,.53), inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 12px rgba(0,0,0,.09), 0 0 var(--record-glow, 0px) rgba(230,88,37,.26); transition: box-shadow 90ms linear; }
.audio-visualizer { position: relative; overflow: visible; }
.audio-visualizer span { animation: none !important; opacity: var(--bar-opacity, .32); transform: scaleY(var(--level, .16)); transition: transform 74ms linear, opacity 110ms linear, filter 110ms linear; will-change: transform, opacity; }
.audio-visualizer.is-live span { filter: drop-shadow(0 0 0 rgba(230,88,37,0)); }
.audio-visualizer.is-live.is-active span { filter: drop-shadow(0 0 7px rgba(230,88,37,.28)); }
@keyframes music-note-float { 0%, 100% { transform: translate3d(0, 8px, 0) rotate(-4deg) scale(var(--music-note-scale, .88)); } 48% { transform: translate3d(5px, -14px, 0) rotate(5deg) scale(var(--music-note-scale, .88)); } }
.falling-notes { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .28s ease; }
.falling-note { position: absolute; top: -14%; color: #ffd1b7; font-family: "Playfair Display", serif; font-size: 22px; line-height: 1; opacity: 0; text-shadow: 0 0 14px rgba(255,112,63,.72); animation: falling-note-rain 6s linear infinite; animation-play-state: paused; }
.falling-note:nth-child(1) { left: 11%; animation-delay: -3.2s; animation-duration: 6.3s; }.falling-note:nth-child(2) { left: 24%; font-size: 17px; animation-delay: -1.4s; animation-duration: 5.7s; }.falling-note:nth-child(3) { left: 39%; font-size: 25px; animation-delay: -4.8s; animation-duration: 7.1s; }.falling-note:nth-child(4) { left: 53%; font-size: 18px; animation-delay: -2.3s; animation-duration: 5.2s; }.falling-note:nth-child(5) { left: 68%; font-size: 23px; animation-delay: -5.5s; animation-duration: 6.8s; }.falling-note:nth-child(6) { left: 80%; font-size: 16px; animation-delay: -.7s; animation-duration: 5.9s; }.falling-note:nth-child(7) { left: 89%; font-size: 21px; animation-delay: -3.9s; animation-duration: 7.4s; }.falling-note:nth-child(8) { left: 6%; font-size: 16px; animation-delay: -6.1s; animation-duration: 6.6s; }
.player-page.notes-rain-enabled .falling-notes { opacity: 1; }.player-page.is-playing.notes-rain-enabled .falling-note { animation-play-state: running; }
@keyframes falling-note-rain { 0% { opacity: 0; transform: translate3d(0, -30px, 0) rotate(-14deg) scale(.72); } 12% { opacity: .68; } 74% { opacity: .42; } 100% { opacity: 0; transform: translate3d(24px, 760px, 0) rotate(25deg) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .player-page.is-playing .music-note { animation: none; } .audio-visualizer span { transition: none; } }

/* Immersive dark listening mode, matched to the player reference composition. */
.topbar-greeting, .topbar-premium { display: none; }
body.player-mode { --ink: #f3f1ee; --paper: #050812; --muted: #9498a3; --line: rgba(157,174,203,.15); --panel: #10131e; background: #050812; color: #f3f1ee; }
body.player-mode .app-shell { min-height: 100dvh; padding-bottom: 118px; background: radial-gradient(circle at 62% 25%, rgba(51,34,72,.16), transparent 31%), radial-gradient(circle at 98% 5%, rgba(10,48,82,.22), transparent 31%), #050812; }
body.player-mode .content { width: calc(100% - 244px); min-height: 100dvh; margin-left: 244px; background: radial-gradient(circle at 54% 10%, rgba(60,32,57,.13), transparent 27%); }
body.player-mode .sidebar { width: 244px; bottom: 122px; padding: 29px 18px 17px; border-color: rgba(123,161,199,.17); background: linear-gradient(180deg, rgba(4,10,18,.98), rgba(4,15,28,.96)); box-shadow: 12px 0 42px rgba(0,0,0,.22); }
body.player-mode .wordmark { position: relative; padding: 0 10px 20px; color: #f7f5f1; font-size: 25px; }
body.player-mode .wordmark::after { content: "MUSIC LIBRARY"; position: absolute; top: 42px; left: 59px; color: #8f96a3; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .16em; }
body.player-mode .brand-logo-frame { border-color: rgba(160,212,224,.42); background: #112638; box-shadow: 0 8px 23px rgba(0,0,0,.42), 0 0 0 4px rgba(91,179,202,.10); }
body.player-mode .main-nav { gap: 9px; margin-top: 48px; }
body.player-mode .nav-item { padding: 14px 13px; border: 1px solid transparent; border-radius: 15px; color: #939aa8; font-size: 14px; }
body.player-mode .nav-item:hover { border-color: rgba(246,118,69,.36); background: rgba(255,255,255,.035); color: #fff; }
body.player-mode .nav-item.active { border-color: rgba(244,112,65,.38); background: linear-gradient(90deg, rgba(235,92,45,.22), rgba(60,29,49,.29)); box-shadow: inset 3px 0 0 #ff8754, 0 0 25px rgba(244,90,40,.12); color: #fff; }
body.player-mode .sidebar-playlists { border-top-color: rgba(151,177,205,.09); }
body.player-mode .side-label, body.player-mode .sidebar-playlist-item { color: #777f8e; }
body.player-mode .new-playlist-button { color: #b5bdca; }
body.player-mode .profile-chip { border-color: rgba(139,165,194,.15); background: linear-gradient(145deg, rgba(20,35,52,.78), rgba(9,16,27,.78)); color: #f4f3f0; }
body.player-mode .profile-chip:hover { border-color: rgba(235,118,70,.42); background: rgba(26,38,54,.9); }
body.player-mode .profile-name-wrap small, body.player-mode .profile-more { color: #778290; }
body.player-mode .topbar { height: 104px; padding: 0 clamp(28px, 3vw, 49px); }
body.player-mode .topbar-brand { gap: 12px; }
body.player-mode .topbar-brand-copy { gap: 1px; }
body.player-mode .topbar-brand-copy strong { color: #fbfaf7; font-size: 20px; }
body.player-mode .topbar-greeting { display: block; color: #a3a8b2; font-family: Manrope, Arial, sans-serif; font-size: 10px; letter-spacing: 0; text-transform: none; }
body.player-mode .topbar-library-label { display: none; }
body.player-mode .topbar-premium { display: inline-flex; align-items: center; margin-left: 3px; padding: 5px 9px; border: 1px solid rgba(238,95,49,.26); border-radius: 999px; background: rgba(133,44,25,.23); color: #fb8654; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
body.player-mode .search-box { width: min(382px, 35vw); padding: 13px 16px; border: 1px solid rgba(157,174,203,.14); border-radius: 999px; background: rgba(10,13,22,.55); color: #9da5b1; box-shadow: inset 0 1px rgba(255,255,255,.02); }
body.player-mode .search-box input { color: #f4f2ed; }
body.player-mode .search-box input::placeholder, body.player-mode .search-box kbd, body.player-mode .now-chip { color: #9097a4; }
body.player-mode .search-box kbd { border-color: rgba(157,174,203,.18); }
body.player-mode .theme-toggle { width: 48px; height: 48px; border-color: rgba(157,174,203,.14); color: #e1ddd5; background: rgba(10,13,22,.44); }
body.player-mode .theme-toggle:hover { border-color: #ff8958; color: #ff8958; }
body.player-mode .pulse { box-shadow: 0 0 0 4px rgba(230,88,37,.13); }

body.player-mode .player-page { padding: 18px 20px 142px clamp(32px, 2.85vw, 48px); }
body.player-mode .now-playing-stage { display: grid; grid-template-columns: minmax(0, 1.67fr) minmax(370px, 1fr); gap: 23px; min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.player-mode .now-playing-stage::before, body.player-mode .now-playing-stage::after { display: none; }
body.player-mode .turntable-scene, body.player-mode .now-playing-copy { height: clamp(500px, calc(100dvh - 280px), 880px); min-height: 500px; border: 1px solid rgba(244,126,78,.38); border-radius: 26px; }
body.player-mode .turntable-scene { overflow: hidden; background: radial-gradient(circle at 16% 77%, rgba(9,63,112,.45), transparent 39%), radial-gradient(circle at 85% 17%, rgba(106,40,38,.22), transparent 31%), radial-gradient(circle at 50% 48%, #202432 0%, #0d101a 62%, #0a0c14 100%); box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 0 70px rgba(1,4,11,.74), 0 30px 54px rgba(0,0,0,.20); }
body.player-mode .turntable-scene::before { z-index: 0; background: radial-gradient(circle at 50% 50%, transparent 24%, rgba(4,7,14,.09) 60%, rgba(2,4,9,.59) 100%), linear-gradient(115deg, rgba(116,151,225,.10), transparent 32%, rgba(254,87,45,.08)); }
body.player-mode .turntable-scene::after { inset: 18px; z-index: 0; border-color: rgba(214,224,245,.075); border-radius: 18px; }
body.player-mode .cover-ambient { opacity: .25; filter: blur(48px) saturate(1.05) brightness(.52); }
body.player-mode .scene-status { position: absolute; z-index: 5; top: 29px; left: 27px; display: flex; align-items: center; gap: 9px; margin: 0; color: #d9dce1; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .13em; }
body.player-mode .scene-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff7440; box-shadow: 0 0 11px rgba(255,106,59,.74); }
body.player-mode .turntable-stamp { z-index: 5; top: 73px; left: 27px; gap: 5px; }
body.player-mode .turntable-stamp span { color: #ff8354; font-size: 9px; }
body.player-mode .turntable-stamp strong { color: #ff8657; font-size: 29px; }
body.player-mode .turntable-note { z-index: 5; right: 30px; bottom: 30px; color: #ced1d9; }
body.player-mode .notes-rain-toggle { position: absolute; z-index: 6; top: 25px; right: 25px; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(163,183,212,.2); border-radius: 999px; background: rgba(8,13,23,.61); color: #dfe4ec; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .04em; box-shadow: inset 0 1px rgba(255,255,255,.035); transition: border-color .2s ease, color .2s ease, background .2s ease; }.player-mode .notes-rain-toggle > span:first-child { color: #ff8957; font-size: 15px; }.player-mode .notes-rain-toggle strong { color: #ff8a59; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.player-mode .notes-rain-toggle:hover { border-color: rgba(255,131,82,.64); background: rgba(255,106,55,.11); color: #fff; }.player-mode .notes-rain-toggle[aria-pressed="false"] > span:first-child, .player-mode .notes-rain-toggle[aria-pressed="false"] strong { color: #8a929e; }.player-mode .notes-rain-toggle:focus-visible { outline: 2px solid #ff8957; outline-offset: 3px; }
body.player-mode .vinyl-record { z-index: 2; width: min(76%, 558px); background: repeating-radial-gradient(circle, #07090d 0 2px, #12161e 3px 5px, #05070b 6px 8px), conic-gradient(from 108deg, #121821, #05070b 19%, #272e36 30%, #07090d 43%, #313946 55%, #05070b 69%, #181d24 83%, #080a0d); box-shadow: 16px 25px 50px rgba(0,0,0,.66), inset 0 0 0 1px rgba(214,226,251,.12), 0 0 0 13px rgba(4,7,13,.22); }
body.player-mode .vinyl-record::before { content: ""; position: absolute; z-index: 1; inset: 4%; border: 1px solid rgba(235,244,255,.07); border-radius: 50%; background: conic-gradient(from 230deg, transparent 0 13%, rgba(119,158,196,.43) 19%, rgba(255,110,72,.44) 26%, transparent 37% 68%, rgba(101,135,212,.18) 76%, transparent 88%); mix-blend-mode: screen; opacity: .76; pointer-events: none; }
body.player-mode .vinyl-record::after { z-index: 3; inset: -8%; border-color: rgba(255,104,63,.31); box-shadow: 0 0 0 18px rgba(239,96,57,.045), 0 0 0 47px rgba(92,104,214,.055), 0 0 42px rgba(255,99,59,.28); }
body.player-mode .vinyl-label { z-index: 2; inset: 30.5%; border: 3px solid #0b0e15; box-shadow: 0 0 0 4px rgba(242,137,100,.56), 0 0 25px rgba(255,98,63,.23); }
body.player-mode .turntable-arm { z-index: 5; top: 12%; right: max(calc(50% - 320px), 9%); left: auto; width: min(53%, 440px); height: 11px; border-radius: 12px; background: linear-gradient(90deg, #cfc0b7 0%, #8d5e51 43%, #ffab70 57%, #4a4e5a 100%); box-shadow: 0 1px 2px rgba(255,237,220,.68), 0 5px 12px rgba(0,0,0,.68), 0 0 17px rgba(255,113,65,.24); transform: rotate(-62deg); transform-origin: right center; }
body.player-mode .turntable-arm::before { top: -22px; right: -22px; width: 50px; height: 50px; background: radial-gradient(circle at 38% 38%, #fff3d2, #ff9e63 15%, #3a3d48 26%, #0c0e13 59%, #242834 61%); box-shadow: 0 0 0 6px rgba(116,120,143,.16), 0 0 26px rgba(255,115,65,.37); }
body.player-mode .turntable-arm span { bottom: -16px; left: -7px; width: 29px; height: 37px; border: 2px solid #e6b48d; background: linear-gradient(135deg, #282d36, #080b11); box-shadow: 0 4px 10px rgba(0,0,0,.65); }
body.player-mode .player-page.is-playing .turntable-arm { transform: rotate(-55deg); }
body.player-mode .music-notes { z-index: 4; }
body.player-mode .music-note { color: #ffbd9c; text-shadow: 0 0 var(--music-note-glow, 13px) rgba(255,117,68,.82); }
body.player-mode .note-one { top: 26%; left: 17%; }.player-mode .note-two { top: 19%; right: 26%; }.player-mode .note-three { top: 67%; left: 19%; }.player-mode .note-four { top: 65%; right: 18%; }
body.player-mode .vinyl-mode { position: absolute; z-index: 5; bottom: 25px; left: 25px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid rgba(167,187,215,.12); border-radius: 14px; background: rgba(10,14,24,.58); box-shadow: inset 0 1px rgba(255,255,255,.025); }
body.player-mode .vinyl-mode > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: rgba(237,99,51,.16); color: #ff8050; font-size: 16px; }.player-mode .vinyl-mode div { display: grid; gap: 2px; }.player-mode .vinyl-mode strong { color: #eef0f5; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .12em; }.player-mode .vinyl-mode small { color: #88909d; font-size: 9px; }

body.player-mode .now-playing-copy { display: flex; flex-direction: column; align-self: stretch; max-width: none; padding: 25px clamp(28px, 3.5vw, 54px) 26px; background: radial-gradient(circle at 100% 0%, rgba(228,92,48,.19), transparent 31%), linear-gradient(135deg, rgba(22,24,34,.98), rgba(14,16,25,.98)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 30px 54px rgba(0,0,0,.18); }
body.player-mode .player-copy-top { display: flex; align-items: center; justify-content: space-between; min-height: 39px; margin-bottom: auto; }
body.player-mode .player-back-button { padding: 12px 15px; border: 1px solid rgba(167,187,215,.16); border-radius: 12px; background: rgba(8,11,18,.34); color: #f0eeeb; font-size: 10px; }.player-mode .player-back-button:hover { border-color: rgba(255,132,83,.55); color: #fff; }.player-mode .player-back-button span { color: #e9e9e5; font-size: 20px; line-height: 0; vertical-align: -2px; }
body.player-mode .now-playing-copy > .eyebrow { margin: 23px 0 16px; color: #aeb4be; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .16em; }
body.player-mode .now-playing-copy h1 { max-width: 8.4ch; color: #f6f4f1; font-size: clamp(54px, 5.1vw, 80px); letter-spacing: -.085em; line-height: .91; text-shadow: 0 6px 24px rgba(0,0,0,.22); }
body.player-mode .now-playing-artist { margin-top: 27px; color: #fff; font-size: 15px; }.player-mode .now-playing-album { color: #a8adb7; font-size: 12px; }
body.player-mode .player-page-meta { margin-top: 17px; color: #7f8793; }.player-mode .player-page-meta span:first-child { border-color: rgba(168,184,210,.25); color: #c3c7d0; background: rgba(255,255,255,.025); }
body.player-mode .page-like-button { width: 39px; height: 39px; border-color: transparent; color: #c8c8ce; background: transparent; font-size: 27px; }.player-mode .page-like-button:hover { border-color: rgba(255,133,84,.44); color: #ff8252; }.player-mode .page-like-button.liked { border-color: rgba(255,116,64,.52); background: rgba(235,89,39,.18); color: #ff8454; box-shadow: 0 0 18px rgba(255,102,48,.16); }
body.player-mode .audio-visualizer { height: 52px; gap: 4px; margin: 24px 0 13px; }.player-mode .audio-visualizer span { width: 3px; border-radius: 4px; background: linear-gradient(180deg, #ff9362, #ee5b34); }.player-mode .audio-visualizer.is-live.is-active span { filter: drop-shadow(0 0 6px rgba(255,107,58,.45)); }
body.player-mode .page-progress-wrap { width: 100%; }.player-mode .page-progress-times { color: #b1b3b9; font-size: 10px; }.player-mode .page-progress-wrap input[type="range"] { accent-color: #ff8959; }
body.player-mode .page-player-controls { justify-content: space-between; gap: 13px; margin: 20px auto 0; width: min(100%, 350px); }.player-mode .page-utility-button, .player-mode .page-player-controls .icon-button { border-color: transparent; color: #e7e5e2; background: transparent; }.player-mode .page-player-controls .icon-button:hover, .player-mode .page-utility-button:hover { border-color: rgba(255,129,78,.50); background: rgba(255,104,53,.09); color: #ff8757; }.player-mode .page-player-controls .play-button { width: 68px; height: 68px; border: 1px solid #ff8757; background: radial-gradient(circle, #2e2526, #17161c); color: #fff; box-shadow: 0 0 0 4px rgba(255,126,77,.08), 0 0 26px rgba(255,108,56,.42); }.player-mode .page-player-controls .play-button:hover { box-shadow: 0 0 0 4px rgba(255,126,77,.13), 0 0 34px rgba(255,108,56,.56); }
body.player-mode .player-quote { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding: 10px 13px; border: 1px solid rgba(164,180,208,.12); border-radius: 14px; background: rgba(255,255,255,.025); color: #9ca1ad; }.player-mode .player-quote > span { color: #ff8252; }.player-mode .player-quote p { flex: 1; margin: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.player-mode .player-quote i { color: #cb5757; font-family: "DM Mono", monospace; font-size: 13px; }
body.player-mode .player { left: 10px; right: 10px; bottom: 16px; height: 96px; padding: 12px 29px; border: 1px solid rgba(237,125,75,.23); border-radius: 31px; background: radial-gradient(circle at 95% 5%, rgba(221,87,43,.17), transparent 19%), linear-gradient(110deg, rgba(14,17,26,.98), rgba(12,14,22,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035); }.player-mode .player .icon-button, .player-mode .like-button { color: #e4e1dc; }.player-mode .player .icon-button.active, .player-mode .like-button.liked { color: #ff8454; }.player-mode .player .play-button { width: 43px; height: 43px; border: 1px solid #ff8757; background: #201c1d; color: #fff; box-shadow: 0 0 19px rgba(255,107,55,.35); }.player-mode .player-track-info span, .player-mode .progress-row time { color: #a4a8b3; }.player-mode .mini-cover { border-radius: 6px; }

@media (max-width: 1080px) { body.player-mode .now-playing-stage { grid-template-columns: minmax(0, 1.32fr) minmax(320px, .98fr); } body.player-mode .now-playing-copy { padding-inline: 30px; } body.player-mode .now-playing-copy h1 { font-size: clamp(49px, 6.6vw, 69px); } body.player-mode .turntable-arm { width: 49%; } }
@media (max-width: 800px) { body.player-mode .topbar { height: 76px; } body.player-mode .topbar-brand-copy, body.player-mode .topbar-premium, body.player-mode .now-chip { display: none; } body.player-mode .search-box { width: auto; } body.player-mode .player-page { padding: 11px 19px 148px; } body.player-mode .now-playing-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; } body.player-mode .turntable-scene, body.player-mode .now-playing-copy { min-height: 0; } body.player-mode .turntable-scene { width: 100%; height: min(520px, 71vw + 80px); } body.player-mode .now-playing-copy { height: auto; padding: 24px; } body.player-mode .now-playing-copy h1 { font-size: clamp(50px, 15vw, 72px); } body.player-mode .vinyl-record { width: min(74%, 480px); } body.player-mode .turntable-arm { width: 48%; } body.player-mode .notes-rain-toggle { top: 16px; right: 16px; min-height: 30px; padding: 6px 8px; }.player-mode .notes-rain-toggle-label { display: none; } body.player-mode .player { left: 7px; right: 7px; bottom: 7px; border-radius: 24px; } body.player-mode .player-quote { margin-top: 26px; } }
@media (max-width: 800px) { body.player-mode .cover-ambient { display: none; } body.player-mode .turntable-scene { box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 0 34px rgba(1,4,11,.55); } body.player-mode .now-playing-copy { box-shadow: inset 0 1px rgba(255,255,255,.035); } body.player-mode .vinyl-record { animation-duration: 14s; box-shadow: 9px 13px 25px rgba(0,0,0,.48), inset 0 0 0 1px rgba(214,226,251,.1), 0 0 0 8px rgba(4,7,13,.18); } body.player-mode .vinyl-record::after { box-shadow: 0 0 0 12px rgba(239,96,57,.035), 0 0 20px rgba(255,99,59,.18); } body.player-mode .player-page.is-playing .music-note { animation: none !important; transition: none; text-shadow: 0 0 6px rgba(255,117,68,.42); } body.player-mode .music-note:nth-child(n+3), body.player-mode .falling-note:nth-child(n+5) { display: none; } body.player-mode .falling-note { text-shadow: 0 0 7px rgba(255,112,63,.48); } body.player-mode .audio-visualizer span:nth-child(even) { display: none; } body.player-mode .audio-visualizer.is-live.is-active span { filter: none; } }
@media (max-width: 680px) { body.player-mode .content { width: 100%; margin-left: 0; } body.player-mode .sidebar { width: min(285px,85vw); bottom: 118px; } }
@media (prefers-reduced-motion: reduce) { body.player-mode .vinyl-record, body.player-mode .music-note { animation: none !important; } }

/* Keep the inactive listening room dormant and reduce composition work on phones. */
body:not(.player-mode) .player-page.is-playing .vinyl-record,
body:not(.player-mode) .player-page.is-playing .audio-visualizer span,
body:not(.player-mode) .player-page.is-playing.notes-rain-enabled .falling-note { animation-play-state: paused; }
body:not(.player-mode) .player-page.is-playing .turntable-arm { transform: rotate(-27deg); }
body:not(.player-mode) .player-page.is-playing .turntable-note span,
body:not(.player-mode) .player-page.is-playing .music-note { animation: none !important; }

@media (max-width: 800px) {
  .genre-group { content-visibility: auto; }
  body.player-mode .now-playing-stage::before,
  body.player-mode .now-playing-stage::after,
  body.player-mode .vinyl-record::before { display: none; }
  body.player-mode .vinyl-record,
  body.player-mode .player-page.is-playing .turntable-note span { animation: none !important; }
  body.player-mode .turntable-arm { filter: none; transition: none; }
  body.player-mode .audio-visualizer span { filter: none !important; transition: none; will-change: auto; }
}

/* Shared dark application system for Discover, Library and Playlists. */
body.app-dark:not(.player-mode) { --ink: #f3f1ee; --paper: #050812; --muted: #9498a3; --line: rgba(157,174,203,.15); --panel: #10131e; --hero-surface: #0d1422; --hero-copy: #f5f3ef; background: #050812; color: #f3f1ee; }
body.app-dark:not(.player-mode) .app-shell { min-height: 100dvh; padding-bottom: 118px; background: radial-gradient(circle at 61% 18%, rgba(28,48,86,.18), transparent 34%), radial-gradient(circle at 96% 6%, rgba(86,35,38,.12), transparent 28%), #050812; }
body.app-dark:not(.player-mode) .content { width: calc(100% - 244px); min-height: 100dvh; margin-left: 244px; background: radial-gradient(circle at 51% 4%, rgba(31,51,89,.14), transparent 32%); }
body.app-dark:not(.player-mode) .sidebar { width: 244px; bottom: 122px; padding: 29px 18px 17px; border-color: rgba(123,161,199,.17); background: linear-gradient(180deg, rgba(4,10,18,.98), rgba(4,15,28,.96)); box-shadow: 12px 0 42px rgba(0,0,0,.22); }
body.app-dark:not(.player-mode) .wordmark { position: relative; padding: 0 10px 20px; color: #f7f5f1; font-size: 25px; }
body.app-dark:not(.player-mode) .wordmark::after { content: "MUSIC LIBRARY"; position: absolute; top: 42px; left: 59px; color: #8f96a3; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .16em; }
body.app-dark:not(.player-mode) .brand-logo-frame { border-color: rgba(160,212,224,.42); background: #112638; box-shadow: 0 8px 23px rgba(0,0,0,.42), 0 0 0 4px rgba(91,179,202,.10); }
body.app-dark:not(.player-mode) .main-nav { gap: 9px; margin-top: 48px; }
body.app-dark:not(.player-mode) .nav-item { padding: 14px 13px; border: 1px solid transparent; border-radius: 15px; color: #939aa8; font-size: 14px; }
body.app-dark:not(.player-mode) .nav-item:hover { border-color: rgba(246,118,69,.36); background: rgba(255,255,255,.035); color: #fff; }
body.app-dark:not(.player-mode) .nav-item.active { border-color: rgba(244,112,65,.38); background: linear-gradient(90deg, rgba(235,92,45,.22), rgba(60,29,49,.29)); box-shadow: inset 3px 0 0 #ff8754, 0 0 25px rgba(244,90,40,.12); color: #fff; }
body.app-dark:not(.player-mode) .sidebar-playlists { border-top-color: rgba(151,177,205,.09); }
body.app-dark:not(.player-mode) .side-label, body.app-dark:not(.player-mode) .sidebar-playlist-item { color: #7d8796; }
body.app-dark:not(.player-mode) .empty-side-playlist { color: #748090; }
body.app-dark:not(.player-mode) .new-playlist-button { color: #b5bdca; }
body.app-dark:not(.player-mode) .profile-chip { border-color: rgba(139,165,194,.15); background: linear-gradient(145deg, rgba(20,35,52,.78), rgba(9,16,27,.78)); color: #f4f3f0; }
body.app-dark:not(.player-mode) .profile-chip:hover { border-color: rgba(235,118,70,.42); background: rgba(26,38,54,.9); }
body.app-dark:not(.player-mode) .profile-name-wrap small, body.app-dark:not(.player-mode) .profile-more { color: #778290; }
body.app-dark:not(.player-mode) .topbar { height: 104px; padding: 0 clamp(28px, 3vw, 49px); }
body.app-dark:not(.player-mode) .topbar-brand { gap: 12px; }
body.app-dark:not(.player-mode) .topbar-brand-copy { gap: 1px; }
body.app-dark:not(.player-mode) .topbar-brand-copy strong { color: #fbfaf7; font-size: 20px; }
body.app-dark:not(.player-mode) .topbar-greeting { display: block; color: #a3a8b2; font-family: Manrope, Arial, sans-serif; font-size: 10px; letter-spacing: 0; text-transform: none; }
body.app-dark:not(.player-mode) .topbar-library-label { display: none; }
body.app-dark:not(.player-mode) .topbar-premium { display: inline-flex; align-items: center; margin-left: 3px; padding: 5px 9px; border: 1px solid rgba(238,95,49,.26); border-radius: 999px; background: rgba(133,44,25,.23); color: #fb8654; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
body.app-dark:not(.player-mode) .search-box { width: min(382px, 35vw); padding: 13px 16px; border: 1px solid rgba(157,174,203,.14); border-radius: 999px; background: rgba(10,13,22,.55); color: #9da5b1; box-shadow: inset 0 1px rgba(255,255,255,.02); }
body.app-dark:not(.player-mode) .search-box input { color: #f4f2ed; }.app-dark:not(.player-mode) .search-box input::placeholder, .app-dark:not(.player-mode) .search-box kbd, .app-dark:not(.player-mode) .now-chip { color: #9097a4; }.app-dark:not(.player-mode) .search-box kbd { border-color: rgba(157,174,203,.18); }
body.app-dark:not(.player-mode) .theme-toggle { width: 48px; height: 48px; border-color: rgba(157,174,203,.14); color: #e1ddd5; background: rgba(10,13,22,.44); }.app-dark:not(.player-mode) .theme-toggle:hover { border-color: #ff8958; color: #ff8958; }.app-dark:not(.player-mode) .pulse { box-shadow: 0 0 0 4px rgba(230,88,37,.13); }
body.app-dark:not(.player-mode) .page { padding: 18px 20px 142px clamp(32px, 2.85vw, 48px); }

body.app-dark:not(.player-mode) .hero { min-height: 340px; border: 1px solid rgba(236,119,72,.31); border-radius: 26px; background: linear-gradient(105deg, #101725 0%, #0a101b 53%, #0a1b31 100%); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 28px 55px rgba(0,0,0,.18); }
body.app-dark:not(.player-mode) .hero-copy { position: relative; z-index: 2; padding: clamp(38px, 4vw, 62px); background: radial-gradient(circle at 8% 15%, rgba(255,116,66,.09), transparent 28%); }
body.app-dark:not(.player-mode) .hero .eyebrow { color: #b8bec9; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .14em; }
body.app-dark:not(.player-mode) .hero h1 { max-width: 530px; font-size: clamp(42px, 4.3vw, 66px); color: #f8f6f3; line-height: .98; }.app-dark:not(.player-mode) .hero h1 em { color: #ff7747; font-family: Manrope, Arial, sans-serif; font-style: normal; }
body.app-dark:not(.player-mode) .hero-description { max-width: 440px; color: #aeb5c0; line-height: 1.72; }.app-dark:not(.player-mode) .primary-button { border: 1px solid rgba(255,174,135,.35); border-radius: 13px; background: linear-gradient(135deg, #ff7e4d, #e9552d); box-shadow: 0 9px 23px rgba(239,91,39,.27); }.app-dark:not(.player-mode) .primary-button:hover { background: #ff8455; box-shadow: 0 13px 28px rgba(239,91,39,.38); }
body.app-dark:not(.player-mode) .text-button { color: #dfe1e5; }.app-dark:not(.player-mode) .hero-art { min-height: 340px; background: radial-gradient(circle at 58% 68%, rgba(255,111,57,.62) 0 2%, transparent 4%), radial-gradient(ellipse at 61% 66%, rgba(255,104,48,.32), transparent 22%), radial-gradient(ellipse at 71% 36%, rgba(24,69,128,.68), transparent 46%), linear-gradient(140deg, #071321, #0c223d); color: #e2e9f4; }.app-dark:not(.player-mode) .hero-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 10%, rgba(255,116,61,.16) 40%, transparent 65%), repeating-linear-gradient(90deg, transparent 0 45px, rgba(161,191,234,.08) 46px 47px); opacity: .7; }.app-dark:not(.player-mode) .sun-disc { width: 190px; height: 190px; left: 63%; top: 56%; background: radial-gradient(circle at 38% 36%, #ffd0a4, #ff713d 28%, rgba(255,91,34,.3) 59%, transparent 70%); box-shadow: 0 0 0 1px rgba(255,142,90,.5), 0 0 56px rgba(255,100,45,.38); }.app-dark:not(.player-mode) .orbit { border-color: rgba(253,119,70,.45); }.app-dark:not(.player-mode) .hero-art p { color: #cfd7e5; }.app-dark:not(.player-mode) .art-caption { color: #a6b0bf; }

body.app-dark:not(.player-mode) .section-block { margin-top: 44px; }.app-dark:not(.player-mode) .section-heading { margin-bottom: 22px; }.app-dark:not(.player-mode) .section-heading h2, .app-dark:not(.player-mode) .genre-heading h3 { color: #f4f2ef; }.app-dark:not(.player-mode) .section-heading h2 { font-size: 25px; }.app-dark:not(.player-mode) .count-label { color: #8d96a4; }.app-dark:not(.player-mode) .genre-groups { gap: 31px; }.app-dark:not(.player-mode) .genre-heading { margin-bottom: 12px; }.app-dark:not(.player-mode) .genre-heading h3 { display: flex; align-items: center; gap: 9px; font-size: 19px; }.app-dark:not(.player-mode) .genre-heading h3::before { content: "♫"; color: #ff7848; font-size: 20px; }.app-dark:not(.player-mode) .track-list { overflow: hidden; border: 1px solid rgba(145,169,199,.13); border-radius: 15px; background: linear-gradient(90deg, rgba(13,24,39,.82), rgba(8,16,27,.76)); }.app-dark:not(.player-mode) .track-row { min-height: 64px; border-color: rgba(151,174,202,.10); }.app-dark:not(.player-mode) .track-row:hover { background: rgba(255,255,255,.035); }.app-dark:not(.player-mode) .track-row.current-track { background: linear-gradient(90deg, rgba(235,88,39,.18), rgba(30,41,60,.24)); box-shadow: inset 2px 0 #ff7848; }.app-dark:not(.player-mode) .track-index { color: #8792a1; }.app-dark:not(.player-mode) .track-info strong { color: #f0efed; }.app-dark:not(.player-mode) .track-info span, .app-dark:not(.player-mode) .track-album, .app-dark:not(.player-mode) .track-duration { color: #969eaa; }.app-dark:not(.player-mode) .track-tag { border-color: rgba(244,114,66,.38); color: #ff8c60; background: rgba(228,86,38,.07); }.app-dark:not(.player-mode) .row-menu, .app-dark:not(.player-mode) .icon-button { color: #b9bec8; }.app-dark:not(.player-mode) .row-menu:hover, .app-dark:not(.player-mode) .icon-button:hover { color: #ff8051; }.app-dark:not(.player-mode) .empty-state { color: #929aa7; }.app-dark:not(.player-mode) .track-menu-popover { border-color: rgba(157,174,203,.18); border-radius: 12px; background: #111a28; box-shadow: 0 18px 35px rgba(0,0,0,.37); }.app-dark:not(.player-mode) .track-menu-popover p { color: #a0a7b1; }.app-dark:not(.player-mode) .track-menu-popover button { color: #e9e8e5; }.app-dark:not(.player-mode) .track-menu-popover button:hover { background: rgba(255,116,66,.12); color: #ff8b5a; }

body.app-dark:not(.player-mode) .inner-page-heading { padding: 4px 0 31px; border-color: rgba(150,173,200,.12); }.app-dark:not(.player-mode) .inner-page-heading .eyebrow { color: #9fa8b5; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .14em; }.app-dark:not(.player-mode) .inner-page-heading h1 { color: #f7f5f1; font-size: clamp(42px, 4.8vw, 64px); }.app-dark:not(.player-mode) .inner-page-heading > p:not(.eyebrow) { color: #9fa7b3; }.app-dark:not(.player-mode) .full-track-list { margin-top: 28px; }
body.app-dark:not(.player-mode) .playlists-heading { align-items: end; }.app-dark:not(.player-mode) .playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 31px; }.app-dark:not(.player-mode) .playlist-card { min-height: 210px; border-color: rgba(150,173,200,.14); border-radius: 18px; background: linear-gradient(135deg, rgba(21,36,55,.94), rgba(10,17,28,.96)); box-shadow: inset 0 1px rgba(255,255,255,.035); }.app-dark:not(.player-mode) .playlist-card::before { border-color: var(--card-accent,#f07a50); opacity: .25; }.app-dark:not(.player-mode) .playlist-card::after { background: var(--card-accent,#f07a50); box-shadow: 0 0 20px color-mix(in srgb, var(--card-accent,#f07a50) 55%, transparent); }.app-dark:not(.player-mode) .playlist-card:hover { border-color: rgba(255,125,76,.52); transform: translateY(-2px); }.app-dark:not(.player-mode) .playlist-card h3 { color: #f6f4f0; }.app-dark:not(.player-mode) .playlist-card p, .app-dark:not(.player-mode) .playlist-card .playlist-dots, .app-dark:not(.player-mode) .new-playlist-card { color: #a6aeba; }.app-dark:not(.player-mode) .new-playlist-card { border-color: rgba(255,122,72,.42); background: rgba(255,105,52,.035); }.app-dark:not(.player-mode) .plus-circle { border-color: rgba(255,126,78,.65); color: #ff8958; }
body.app-dark:not(.player-mode) .playlist-empty { grid-column: 1 / -1; min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 55px 26px; border: 1px dashed rgba(147,174,204,.19); border-radius: 22px; background: radial-gradient(circle at 50% 27%, rgba(255,104,52,.12), transparent 29%), linear-gradient(145deg, rgba(11,23,40,.76), rgba(7,14,25,.86)); text-align: center; }.app-dark:not(.player-mode) .playlist-empty .eyebrow { margin: 20px 0 9px; color: #98a2b0; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .14em; }.app-dark:not(.player-mode) .playlist-empty h2 { margin: 0; color: #f5f3ef; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.065em; }.app-dark:not(.player-mode) .playlist-empty > p:not(.eyebrow) { max-width: 415px; margin: 14px 0 24px; color: #a5adb9; font-size: 13px; line-height: 1.7; }.app-dark:not(.player-mode) .playlist-empty-art { position: relative; display: grid; width: 116px; height: 92px; place-items: center; border: 1px solid rgba(255,131,84,.42); border-radius: 20px; background: linear-gradient(145deg, #1a2d47, #1a1721); box-shadow: 0 0 0 11px rgba(255,105,55,.035), 0 18px 36px rgba(0,0,0,.22); }.app-dark:not(.player-mode) .playlist-empty-art::before, .app-dark:not(.player-mode) .playlist-empty-art::after { content: ""; position: absolute; z-index: -1; width: 96px; height: 74px; border: 1px solid rgba(155,178,214,.19); border-radius: 14px; background: #102038; }.app-dark:not(.player-mode) .playlist-empty-art::before { transform: translate(-18px, 7px) rotate(-8deg); }.app-dark:not(.player-mode) .playlist-empty-art::after { transform: translate(18px, 7px) rotate(8deg); }.app-dark:not(.player-mode) .playlist-empty-art span { color: #ff8655; font-size: 39px; text-shadow: 0 0 20px rgba(255,115,66,.55); }.app-dark:not(.player-mode) .playlist-detail-title h2 { color: #f4f2ef; }.app-dark:not(.player-mode) .subtle-button { border-color: rgba(159,179,205,.23); color: #c8cdd5; background: rgba(255,255,255,.025); }.app-dark:not(.player-mode) .subtle-button:hover { border-color: #ff8958; color: #ff8958; }

body.app-dark:not(.player-mode) .dialog { border: 1px solid rgba(173,190,215,.18); border-radius: 19px; background: linear-gradient(145deg, #151c2a, #0c1421); box-shadow: 0 28px 75px rgba(0,0,0,.58); }.app-dark:not(.player-mode) .dialog::backdrop { background: rgba(1,4,10,.72); }.app-dark:not(.player-mode) .dialog h2 { color: #f6f4f1; }.app-dark:not(.player-mode) .dialog input { border-color: rgba(158,178,204,.25); color: #f4f2ef; }.app-dark:not(.player-mode) .close-dialog { color: #aab1bd; }
body.app-dark:not(.player-mode) .player { left: 10px; right: 10px; bottom: 16px; height: 96px; padding: 12px 29px; border: 1px solid rgba(237,125,75,.23); border-radius: 31px; background: radial-gradient(circle at 95% 5%, rgba(221,87,43,.17), transparent 19%), linear-gradient(110deg, rgba(14,17,26,.98), rgba(12,14,22,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035); }.app-dark:not(.player-mode) .player .icon-button, .app-dark:not(.player-mode) .like-button { color: #e4e1dc; }.app-dark:not(.player-mode) .player .icon-button.active, .app-dark:not(.player-mode) .like-button.liked { color: #ff8454; }.app-dark:not(.player-mode) .player .play-button { width: 43px; height: 43px; border: 1px solid #ff8757; background: #201c1d; color: #fff; box-shadow: 0 0 19px rgba(255,107,55,.35); }.app-dark:not(.player-mode) .player-track-info span, .app-dark:not(.player-mode) .progress-row time { color: #a4a8b3; }.app-dark:not(.player-mode) .mini-cover { border-radius: 6px; }

@media (max-width: 800px) { body.app-dark:not(.player-mode) .topbar { height: 76px; }.app-dark:not(.player-mode) .topbar-brand-copy, .app-dark:not(.player-mode) .topbar-premium, .app-dark:not(.player-mode) .now-chip { display: none; } body.app-dark:not(.player-mode) .search-box { width: auto; }.app-dark:not(.player-mode) .page { padding: 11px 19px 148px; }.app-dark:not(.player-mode) .hero { grid-template-columns: 1fr; }.app-dark:not(.player-mode) .hero-art { min-height: 230px; margin-top: 0; }.app-dark:not(.player-mode) .playlist-grid { grid-template-columns: 1fr; }.app-dark:not(.player-mode) .player { left: 7px; right: 7px; bottom: 7px; border-radius: 24px; } }
@media (max-width: 680px) { body.app-dark:not(.player-mode) .content { width: 100%; margin-left: 0; } body.app-dark:not(.player-mode) .sidebar { width: min(285px,85vw); bottom: 118px; } }