@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101011;--panel:#19191b;--line:#2b2b2e;--muted:#a3a3ac;--white:#f3f1ed;--accent:#ff784f;--sidebar:254px;--player:114px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:hover{color:#fff}button:disabled{opacity:.45;cursor:not-allowed}svg{width:22px;height:22px;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:'Space Grotesk',Arial,sans-serif}input[type=range]{accent-color:var(--accent);cursor:pointer}input{min-width:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-100px;left:20px;background:var(--accent);padding:16px;z-index:100}.skip:focus{top:10px}
.sidebar{width:var(--sidebar);position:fixed;inset:0 auto var(--player) 0;padding:32px 22px;background:#121213;display:flex;flex-direction:column;z-index:10;overflow-y:auto}.brand{display:flex;align-items:center;gap:9px;font-size:25px;line-height:1;letter-spacing:-1.25px;font-weight:700;white-space:nowrap}.logo-mark{width:36px;height:36px;color:var(--accent);flex:none}.logo-hit{font-weight:500;color:#f3ad8b}.logo-word{display:block}.sidebar nav{margin-top:44px}.nav-item{width:100%;min-height:50px;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 13px;border-radius:10px;font-size:15px;font-weight:550;color:#b7b7be;margin-bottom:7px}.nav-item.active{background:#2b211e;color:#ff9876}.nav-item:hover{background:#222224}.nav-item svg{width:21px}.admin-nav{margin-top:25px;color:#e1c4b5}.page{margin-left:var(--sidebar);padding-bottom:var(--player)}.topbar{min-height:88px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--bg)}.search{display:flex;align-items:center;gap:12px;color:#aaaab1;max-width:430px;width:100%}.search input{width:100%;background:transparent;border:0;color:var(--white);padding:13px 0;font-size:15px}.search input::placeholder{color:#96969e}.search kbd{background:#262628;border-radius:5px;min-width:24px;text-align:center;font-size:14px;color:#a6a6ad}.topbar-right{display:flex;align-items:center;gap:12px;flex:none}.mobile-brand,.mobile-admin{display:none}.icon-button{display:flex;align-items:center;justify-content:center;border-radius:50%;width:38px;height:38px;color:#babac2;flex-shrink:0}.icon-button:hover{background:#ffffff0d;color:#fff}.icon-button[aria-pressed=true],button[data-like][aria-pressed=true]{color:var(--accent)}button[data-like][aria-pressed=true] svg,#like[aria-pressed=true] svg{fill:currentColor}.text-button{display:inline-flex;align-items:center;gap:9px;font-weight:550;font-size:14px;padding:7px 0}.text-button svg{width:18px;height:18px}.primary{background:var(--accent);color:#25140d;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 23px;font-size:16px;font-weight:700}.primary:hover{background:#ff9876;color:#25140d;transform:translateY(-1px)}.primary svg{width:20px;height:20px}main{max-width:1680px;margin:auto;padding:26px 40px 0}.page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.eyebrow{font-size:13px;font-weight:600;letter-spacing:1.3px;color:#b0a19b;margin-bottom:12px}h1{font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-1.6px;line-height:1.18}.intro-description{color:var(--muted);font-size:16px;margin-top:15px;line-height:1.7}
.hero{position:relative;min-height:390px;overflow:hidden;border-radius:18px;background:#100b07;isolation:isolate}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 52%;will-change:transform}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#110c08ef 0%,#130c067c 45%,#08070700 82%)}.hero-content{position:relative;padding:42px 40px;z-index:1;max-width:650px}.hero h2{font-size:clamp(48px,5vw,80px);letter-spacing:-3.6px;line-height:.98;font-weight:700;margin:10px 0 24px}.hero p{font-size:17px;color:#d0c4bc;line-height:1.8}.hero p strong{font-weight:600;color:#fff0e4}.hero-actions{display:flex;align-items:center;gap:13px;margin:27px 0 0}.hero-save{min-width:76px;height:48px;padding:0 14px;border-radius:9px;display:flex;gap:9px;align-items:center;justify-content:center;color:#ead6c9;background:#ffffff10;font-size:15px;font-variant-numeric:tabular-nums}.hero-save svg{width:21px;height:21px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading h2{font-size:28px;letter-spacing:-.9px;font-weight:500;line-height:1.2}.section-heading>.text-button{color:#cbc5c2;flex:none}.genre-section{margin:42px 0}.genre-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.genre-card{position:relative;min-width:0;overflow:hidden;text-align:left;display:flex;align-items:flex-start;flex-direction:column;isolation:isolate;border-radius:15px;min-height:230px;padding:15px 18px 20px;background:#19191b}.genre-card:before{position:absolute;inset:0;content:'';background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--genre-color) 13%,transparent),transparent 75%);z-index:-1}.genre-card:hover{background:#232325;transform:translateY(-3px)}.genre-illustration{display:block;align-self:center;object-fit:contain;width:140px;height:140px;max-width:100%;pointer-events:none}.genre-name{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;letter-spacing:-.7px;margin-top:auto;z-index:1;line-height:1.2}.genre-sub{font-size:14px;line-height:1.45;color:#b0abb0;z-index:1;margin-top:7px}.genre-arrow{position:absolute;right:14px;top:15px;opacity:0;color:var(--genre-color)}.genre-card:hover .genre-arrow{opacity:1}.count-label{font-size:14px;letter-spacing:.8px;color:#aaaab1;white-space:nowrap}.table-head{display:grid;grid-template-columns:35px 1fr 23% 65px 70px;align-items:center;gap:12px;padding:13px 14px;color:#a4a4ad;font-size:14px;background:#19191b;border-radius:9px}.table-head span:last-child{text-align:center}.track-row{position:relative;display:grid;grid-template-columns:35px 48px minmax(0,1fr) 23% 65px 70px;align-items:center;column-gap:12px;min-height:84px;padding:12px 14px;border-radius:10px;isolation:isolate}.track-row:hover{background:#1c1c1e}.track-row.is-playing{background:#29201d}.track-number{font-size:14px;color:#a3a3ac;font-variant-numeric:tabular-nums}.cover{background-color:#26212a;background-size:cover;background-position:center;background-repeat:no-repeat}.cover.icon-cover{background-size:88%}.track-art{height:48px;width:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.track-art svg{width:24px;color:#fff;filter:drop-shadow(0 1px 5px #000)}.track-name{min-width:0;display:flex;flex-direction:column;gap:4px}.track-name strong{font-size:16px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-name>span{font-size:14px;color:#a8a8b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-genre{font-size:14px;color:#bbb1ac;line-height:1.4}.track-time{font-size:14px;color:#b4b4bf;font-variant-numeric:tabular-nums}.track-like{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 4px;min-height:42px;color:#b8b8c1;border-radius:8px;font-size:14px;font-variant-numeric:tabular-nums}.track-like:hover{background:#ffffff08}.track-like svg{width:20px;height:20px}.track-wave{position:absolute;left:16px;bottom:11px;display:flex;align-items:center;gap:3px;height:12px;opacity:0;pointer-events:none}.track-wave i{display:block;width:3px;height:11px;border-radius:3px;background:var(--accent)}.track-wave i:nth-child(2n){height:7px}.track-row.is-playing .track-wave{opacity:1}.track-row.is-playing .track-number{transform:translateY(-8px)}.manifesto{display:flex;align-items:center;gap:18px;background:#1b1817;border-radius:14px;padding:25px 28px;margin-top:30px}.manifesto-symbol{font-size:43px;color:#e79b75}.manifesto p{font-size:16px;line-height:1.7;color:#b3a8a2}.manifesto p strong{font-weight:500;color:#e0d5ce}.manifesto .text-button{margin-left:auto;color:#d2b7a7}.page-footer{display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:#92929c;font-size:14px;margin:40px 0 28px}.footer-brand{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.6px;color:#bebbc0}.page-footer>button{margin-left:auto;color:#b2a8a2}
/* Every release uses the same motion treatment, including future uploads. */
.player{position:fixed;inset:auto 0 0;height:var(--player);z-index:30;background:#1d1b1b;box-shadow:0 -12px 35px #0002;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,1.15fr) minmax(125px,.6fr);gap:25px;align-items:center;padding:15px 25px}.playing-track{display:flex;align-items:center;gap:13px;min-width:0}.player-cover{position:relative;height:60px;width:60px;border-radius:10px;flex-shrink:0;overflow:hidden}.player-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;background:#17110b99;opacity:0}.player-wave i{height:25px;width:4px;background:#ffd6ba;border-radius:4px;transform-origin:center}.player-wave i:nth-child(2n){height:17px}.player-wave i:nth-child(3n){height:31px}#app.is-playing .player-wave{opacity:1}.playing-track>div:nth-child(2){display:flex;flex-direction:column;gap:6px;min-width:0}.playing-track strong{font-size:16px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playing-track>div>span{font-size:14px;color:#b4a8a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playing-track #like{width:auto;min-width:46px;height:48px;gap:6px;font-size:14px}.playing-track #like svg{width:21px;height:21px}.playback{max-width:560px;width:100%;justify-self:center}.playback-buttons{display:flex;align-items:center;justify-content:center;gap:20px}.playback-buttons>.icon-button svg{width:20px;height:20px}.main-play{width:43px;height:43px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f4f1eb;color:#171717}.main-play:hover{background:var(--accent);color:#171717;transform:scale(1.04)}.main-play svg{height:22px;width:22px}.progress{display:flex;align-items:center;gap:12px;margin-top:11px}.progress span{color:#c1b8b5;font-size:14px;font-variant-numeric:tabular-nums;min-width:33px}.progress span:last-child{text-align:right}.progress input{flex:1;min-width:0;height:4px;margin:0;border-radius:5px;appearance:none;background:linear-gradient(90deg,var(--accent) var(--progress,0%),#56504d var(--progress,0%))}.progress input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--accent)}.progress input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--accent)}.player-extra{display:flex;align-items:center;gap:8px;justify-content:flex-end}.player-extra input{width:70px;height:4px}.player-extra #queue{margin-left:5px}.mobile-nav{display:none}
.genre-search{display:flex;align-items:center;gap:12px;background:#202022;padding:0 18px;border-radius:12px;max-width:650px;min-height:54px;color:#b8b1ac}.genre-search input{font-size:16px;color:var(--white);background:transparent;border:0;padding:14px 0;width:100%}.genre-search input::placeholder{color:#a5a0a4}.genre-catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0;font-size:14px;color:#aaa2a0}.genre-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.genre-family{min-width:0;background:#19191b;border-radius:14px;overflow:hidden}.genre-family summary{display:flex;align-items:center;gap:14px;padding:15px 17px;cursor:pointer;list-style:none}.genre-family summary::-webkit-details-marker{display:none}.genre-family summary::after{content:'+';font-family:'Space Grotesk',sans-serif;color:#c1aaa0;font-size:28px;margin-left:auto;font-weight:400}.genre-family[open] summary::after{content:'−'}.genre-family-icon{width:66px;height:66px;object-fit:contain;flex:none}.genre-family-heading{display:flex;flex-direction:column;gap:3px;min-width:0}.genre-family-heading strong{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:500;letter-spacing:-.5px}.genre-family-heading>span{font-size:14px;color:#aaa4a7}.genre-family-body{padding:0 18px 19px}.genre-family-description{color:#b1aaad;font-size:14px;line-height:1.65;margin-bottom:17px}.genre-chips{display:flex;flex-wrap:wrap;gap:8px}.genre-chip{background:#272729;min-height:38px;padding:7px 12px;font-size:14px;border-radius:7px;color:#c6c1c3;text-align:left}.genre-chip:hover,.genre-chip.parent-chip{background:#352823;color:#f0b79c}.genre-detail-header{border-radius:16px;padding:35px;background:linear-gradient(110deg,#342117,#1c1714,#161617);margin:26px 0}.genre-detail-header h1{font-size:clamp(38px,4vw,68px);margin:10px 0 18px;letter-spacing:-2px;overflow-wrap:anywhere}.genre-detail-header p{color:#ceb4a6;font-size:16px}.genre-detail-header .eyebrow{font-size:13px}.back-link{color:#b8afaa}.view-panel[data-panel=saved],.view-panel[data-panel=genres],.view-panel[data-panel=trends]{min-height:calc(100vh - 330px)}.view-panel[data-panel=saved]>.page-intro>svg{color:#bb8d70;width:40px;height:40px}.empty-state{text-align:center;background:#18181a;border-radius:15px;padding:56px 24px;margin-top:22px}.empty-state>svg{width:35px;height:35px;color:#b69a88;margin-bottom:16px}.empty-state h3{font-size:25px;font-weight:500;margin-bottom:10px;letter-spacing:-.6px}.empty-state p{color:#aaa6ae;font-size:16px;line-height:1.7}.empty-state .primary{margin-top:24px}
dialog{max-width:640px;width:calc(100% - 32px);max-height:88vh;background:#1c1b1b;border:0;border-radius:17px;color:var(--white);padding:35px;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:15px;right:15px}.dialog-brand{margin-bottom:34px}dialog h2{font-size:34px;letter-spacing:-1px;line-height:1.15;margin-bottom:22px;font-weight:500}dialog>p,dialog .info-block p{color:#beb3ad;font-size:16px;line-height:1.8}.info-block{padding-top:12px;margin-top:23px}.info-block strong{font-size:17px;font-weight:550}.info-block p{margin-top:10px}.info-block a{color:var(--accent);font-size:15px;display:inline-block;margin-top:9px}.small-note{font-size:14px!important;color:#a39a9b!important;margin-top:22px}#queue-dialog .track-row{grid-template-columns:24px 44px minmax(0,1fr) 65px;gap:9px;padding:12px 0}#queue-dialog .track-genre,#queue-dialog .track-time{display:none}#queue-dialog .track-art{width:44px;height:44px}#queue-dialog .track-name strong{font-size:15px}#queue-dialog .track-wave{left:0}#toast{position:fixed;bottom:calc(var(--player) + 20px);left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#eee9e1;color:#24201b;box-shadow:0 4px 20px #0004;border-radius:9px;padding:14px 21px;font-size:15px;max-width:90vw;z-index:100;transition:opacity .2s,transform .2s}#toast.show,#toast.visible,#toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.genre-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.genre-card{min-height:238px}.genre-illustration{width:135px;height:135px}.hero{min-height:440px}.hero-content{padding:50px}.hero h2{font-size:85px}}
@media(max-width:1250px){:root{--sidebar:226px}.sidebar{padding:30px 16px}.brand{font-size:23px;gap:7px}.logo-mark{width:32px;height:32px}.topbar{padding:0 27px}main{padding:25px 27px 0}.genre-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.genre-catalog{grid-template-columns:1fr}.player{grid-template-columns:minmax(210px,1fr) minmax(290px,1.2fr) 120px;gap:16px;padding:14px 20px}.player-extra input{width:45px}.player-extra{gap:2px}.player-extra #queue{margin:0}.hero-content{padding:38px 32px}.table-head{grid-template-columns:28px 1fr 18% 53px 65px;gap:9px}.track-row{grid-template-columns:28px 45px minmax(0,1fr) 18% 53px 65px;gap:9px}.track-art{width:45px;height:45px}.track-name strong{font-size:15px}}
@media(max-width:950px){:root{--sidebar:212px}.sidebar{padding:27px 14px}.brand{font-size:21px}.logo-mark{width:31px;height:31px}.nav-item{font-size:14px;padding:11px 10px;gap:9px}.topbar{padding:0 22px;gap:15px}.search{max-width:280px}.search input{font-size:14px}.search kbd{display:none}main{padding:23px 22px 0}.hero{min-height:360px}.hero h2{font-size:54px;letter-spacing:-2.8px}.hero-content{padding:36px 27px}.hero p{font-size:16px}.genre-grid{gap:12px}.genre-card{padding:14px;min-height:223px}.genre-illustration{width:116px;height:116px}.genre-name{font-size:21px}.genre-sub{font-size:14px}.section-heading h2{font-size:26px}.track-genre,.table-head>span:nth-child(3){display:none}.track-row{grid-template-columns:25px 44px minmax(0,1fr) 49px 60px;gap:8px;padding:11px 8px}.table-head{grid-template-columns:25px minmax(0,1fr) 49px 60px;gap:8px;padding:12px 8px}.track-art{width:44px;height:44px}.player{grid-template-columns:minmax(220px,1fr) minmax(290px,1.1fr)}.player-extra{display:none}.playing-track{gap:10px}.player-cover{width:54px;height:54px}.playing-track strong{font-size:15px}.playback-buttons{gap:16px}.manifesto{padding:22px;gap:14px;flex-wrap:wrap}.manifesto p{font-size:15px}.page-footer{gap:16px}.page-footer>span:last-child{font-size:13px}}
@media(max-width:720px){:root{--sidebar:0px;--player:192px}.sidebar{display:none}.page{margin-left:0}.topbar{padding:17px 20px 0;min-height:130px;gap:15px;flex-wrap:wrap;align-content:flex-start}.mobile-brand{display:flex;font-size:25px;gap:7px}.logo-mark{width:33px;height:33px}.topbar .search{order:3;max-width:none;min-width:100%;height:46px;background:#1d1d1f;border-radius:9px;padding:0 14px}.search input{font-size:16px}.topbar-right{margin-left:auto;gap:5px}.mobile-admin{display:flex;width:33px;height:36px}.topbar-right .auth-actions{gap:7px}.topbar-right .auth-login,.topbar-right .auth-create{font-size:14px;padding:0 12px;min-height:39px}.topbar-right .auth-member{max-width:125px}.topbar-right #auth-member-name{max-width:75px;text-overflow:ellipsis;overflow:hidden}.page-intro{margin-bottom:25px}.page-intro h1{font-size:33px;letter-spacing:-1.2px}.intro-description{font-size:16px}.eyebrow{font-size:12px}main{padding:22px 20px 0}.hero{min-height:390px;border-radius:16px}.hero-image{object-position:68% center}.hero-shade{background:linear-gradient(90deg,#100b07c9,#100b0730),linear-gradient(0deg,#130d08da,transparent 80%)}.hero-content{padding:35px 26px;max-width:450px}.hero h2{font-size:62px;letter-spacing:-3.5px;margin:13px 0 25px}.hero p{font-size:16px;max-width:280px}.hero-actions{margin:26px 0 0}.genre-section{margin:32px 0}.section-heading h2{font-size:25px;max-width:260px}.section-heading{gap:12px;margin-bottom:20px}.section-heading>.text-button{font-size:14px;gap:7px}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.genre-card{min-height:235px;padding:15px 17px 19px}.genre-illustration{width:130px;height:130px}.genre-name{font-size:23px}.genre-sub{font-size:14px}.genre-arrow{display:none}.track-row{grid-template-columns:46px minmax(0,1fr) 43px 59px;gap:10px;padding:15px 0;min-height:85px}.table-head,.track-number{display:none}.track-art{width:46px;height:46px}.track-name strong{font-size:16px}.track-name>span{font-size:14px}.track-time{font-size:14px}.track-like{font-size:14px;gap:5px}.track-like svg{width:19px}.track-wave{left:0;bottom:8px;width:46px;justify-content:center}.track-row.is-playing .track-art{transform:translateY(-5px)}.track-row.is-playing{padding-left:8px;padding-right:8px}.track-row.is-playing .track-wave{left:8px}.manifesto{padding:23px 21px}.manifesto .text-button{margin-left:auto}.page-footer{margin:33px 0 25px;font-size:14px;gap:14px}.page-footer>span:last-child{font-size:13px;width:100%}.footer-brand{font-size:19px}.mobile-nav{display:flex;position:fixed;inset:auto 0 0;min-height:72px;padding:6px 18px max(8px,env(safe-area-inset-bottom));justify-content:space-around;background:#141415;z-index:31}.mobile-nav button{color:#a19ba2;min-width:65px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;padding:4px 8px}.mobile-nav button svg{height:23px;width:23px}.mobile-nav button.active{color:#ff9876}.player{bottom:calc(72px + max(0px,env(safe-area-inset-bottom) - 8px));height:120px;padding:13px 18px 38px;display:flex;gap:12px;background:#25201e}.playing-track{flex:1;gap:11px}.player-cover{width:51px;height:51px}.playing-track>div:nth-child(2){gap:4px}.playing-track strong{font-size:16px}.playing-track>div>span{font-size:13px}.playing-track #like{margin-left:auto;width:auto;min-width:43px;gap:5px;font-size:12px}.playing-track #like svg{width:20px;height:20px}.playback{width:auto;flex:none}.playback-buttons{gap:0}.playback-buttons>.icon-button{display:none}.main-play{width:43px;height:43px}.progress{position:absolute;left:18px;right:18px;bottom:13px;margin:0;height:17px;gap:10px}.progress span{display:block;font-size:12px;min-width:29px}.progress input{height:4px}.player-extra{display:none}.genre-catalog{grid-template-columns:1fr}.genre-family summary{padding:14px;gap:12px}.genre-family-icon{width:60px;height:60px}.genre-family-heading strong{font-size:22px}.genre-family-heading>span{font-size:14px}.genre-family-body{padding:0 16px 17px}.genre-detail-header{padding:28px 23px}.genre-detail-header h1{font-size:45px;letter-spacing:-2px}.empty-state{padding:44px 22px}.empty-state h3{font-size:25px}dialog{padding:31px 23px;max-height:85vh}dialog h2{font-size:31px}#queue-dialog .track-row{grid-template-columns:43px minmax(0,1fr) 62px}.genre-catalog-meta{align-items:flex-start}.genre-catalog-meta .text-button{padding-top:0;white-space:nowrap}}
@media(max-width:400px){.topbar{padding:15px 15px 0;gap:14px}.mobile-brand{font-size:21px;gap:4px}.logo-mark{width:29px;height:29px}.topbar-right .auth-login,.topbar-right .auth-create{font-size:13px;padding:0 9px}.topbar-right .auth-actions{gap:4px}main{padding:20px 15px 0}.hero-content{padding:31px 23px}.hero h2{font-size:55px}.hero{min-height:375px}.genre-card{padding:13px;min-height:222px}.genre-illustration{width:116px;height:116px}.genre-name{font-size:21px}.genre-sub{font-size:14px}.section-heading h2{font-size:23px}.count-label{font-size:12px}.track-row{grid-template-columns:42px minmax(0,1fr) 38px 53px;gap:8px}.track-art{width:42px;height:42px}.track-name strong{font-size:15px}.track-name>span{font-size:13px}.track-time{font-size:13px}.track-like{font-size:13px}.player{padding-left:13px;padding-right:13px;gap:8px}.player-cover{width:44px;height:48px}.playing-track{gap:8px}.playing-track strong{font-size:14px}.playing-track>div>span{font-size:12px}.playing-track #like{min-width:36px;gap:3px}.main-play{width:39px;height:39px}}
@media(prefers-reduced-motion:no-preference){button,a{transition:color .15s,background .15s,transform .2s}.hero-image{animation:hero-drift 19s ease-in-out infinite alternate}.genre-illustration{transition:transform .25s ease}.genre-card:hover .genre-illustration{transform:translateY(-4px) rotate(-4deg)}.track-row.is-playing .track-wave i,#app.is-playing .player-wave i{animation:music-pulse .7s ease-in-out infinite alternate}.track-row.is-playing .track-wave i:nth-child(2n),#app.is-playing .player-wave i:nth-child(2n){animation-delay:-.35s;animation-duration:.85s}.track-row.is-playing .track-wave i:nth-child(3n),#app.is-playing .player-wave i:nth-child(3n){animation-delay:-.5s;animation-duration:.6s}.track-row.is-playing .track-art{animation:artwork-breathe 3s ease-in-out infinite alternate}@keyframes hero-drift{from{transform:scale(1.02) translate(0,0) rotate(0)}to{transform:scale(1.11) translate(-1.4%,.4%) rotate(.6deg)}}@keyframes music-pulse{from{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes artwork-breathe{from{transform:scale(1)}to{transform:scale(1.045)}}}
/* Suspend decorative work outside the viewport and when the tab is hidden. */
.motion-offscreen .hero-image,.motion-offscreen .track-art,.motion-offscreen .track-wave i,.page-hidden .hero-image,.page-hidden .track-art,.page-hidden .track-wave i,.page-hidden .player-wave i{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-image{will-change:auto}}

/* Catalogue controls: track name, genre and duration. */
.track-row{grid-template-columns:28px 48px minmax(0,1fr) 18% 53px}.table-head{grid-template-columns:28px minmax(0,1fr) 18% 53px}
#queue-dialog .track-row{grid-template-columns:24px 44px minmax(0,1fr)}
.genre-card{min-height:205px}.genre-family-heading{gap:0}.genre-detail-header h1{margin-bottom:0}
@media(max-width:1250px){.track-row{grid-template-columns:28px 45px minmax(0,1fr) 18% 53px;gap:9px}.table-head{grid-template-columns:28px minmax(0,1fr) 18% 53px;gap:9px}}
@media(max-width:950px){.track-row{grid-template-columns:25px 44px minmax(0,1fr) 49px;gap:8px}.table-head{grid-template-columns:25px minmax(0,1fr) 49px;gap:8px}}
@media(max-width:720px){.track-row{grid-template-columns:46px minmax(0,1fr) 43px;gap:10px}.genre-card{min-height:205px}#queue-dialog .track-row{grid-template-columns:43px minmax(0,1fr)}}
@media(max-width:400px){.track-row{grid-template-columns:42px minmax(0,1fr) 38px;gap:8px}.genre-card{min-height:185px}}

/* Search focus belongs to the whole field rather than the input rectangle. */
.search,.genre-search{background:#1c1c1f;border:1px solid #ffffff0d;border-radius:14px;padding:0 16px;min-height:50px;transition:background .2s,box-shadow .2s,border-color .2s}
.search:hover,.genre-search:hover{background:#232326;border-color:#ffffff1c}
.search:focus-within,.genre-search:focus-within{background:#242122;border-color:#ff987638;box-shadow:0 0 0 3px #ff98760c;color:#ffad8f}
.search input,.genre-search input{min-width:0;outline:none!important;border:0;box-shadow:none;border-radius:0;background:transparent;appearance:none}
.search input::placeholder,.genre-search input::placeholder{color:#aaa5aa}
.search kbd{border-radius:6px;background:#ffffff07;border:1px solid #ffffff12;color:#b8b1b6;min-width:24px;text-align:center}
.hero-image{object-position:70% 45%}.hero-shade{background:linear-gradient(90deg,#100b07f2 0%,#100b07c2 35%,#100b0710 75%),linear-gradient(0deg,#100b0740,transparent)}
@media(max-width:720px){.topbar .search{min-height:48px;border-radius:12px}.hero-image{object-position:65% center}.hero-shade{background:linear-gradient(90deg,#100b07e5,#100b0725),linear-gradient(0deg,#100b07a0,transparent)}}

/* Genre interactions: lift, colour glow and a light sweep. */
.release-section{margin-top:32px}.genre-card{box-shadow:inset 0 0 0 1px #ffffff05}.genre-card::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 40%,#ffffff10 50%,transparent 60%);transform:translateX(-80%);opacity:0;pointer-events:none;z-index:2}
.genre-card:focus-visible{box-shadow:inset 0 0 0 1px var(--genre-color)}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 .genre-card{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}
 .genre-card:hover{transform:translateY(-7px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--genre-color) 45%,transparent),0 12px 28px #0005,0 0 24px color-mix(in srgb,var(--genre-color) 10%,transparent)}
 .genre-card:hover::after{animation:genre-sweep .75s ease-out both}
 .genre-card:hover .genre-illustration{animation:genre-pop .7s cubic-bezier(.2,.8,.2,1) both}
 .genre-family summary{transition:background .25s}.genre-family summary:hover{background:#ffffff06}
 .genre-family summary:hover .genre-family-icon{animation:genre-pop .7s cubic-bezier(.2,.8,.2,1) both}
 .genre-chip{transition:transform .2s,background .2s}.genre-chip:hover{transform:translateY(-3px)}
 @keyframes genre-sweep{0%{transform:translateX(-80%);opacity:0}20%{opacity:1}100%{transform:translateX(80%);opacity:0}}
 @keyframes genre-pop{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-9px) rotate(-7deg) scale(1.09)}70%{transform:translateY(-5px) rotate(3deg) scale(1.06)}100%{transform:translateY(-5px) rotate(-2deg) scale(1.05)}}
}
@media(prefers-reduced-motion:reduce){.genre-card:hover{transform:none}}

.track-buy,.hero-buy{font-size:13px;min-height:38px;padding:9px 12px;border-radius:9px;background:#ff987617;color:#ffba9d;white-space:nowrap;justify-self:end}.track-buy:hover,.hero-buy:hover{background:#ff98762b;color:#ffd9c8}.hero-buy{font-size:15px;min-height:48px;padding:12px 17px}.has-shop-offers .track-row{grid-template-columns:28px 48px minmax(0,1fr) 15% 53px 145px}.table-head.has-download{grid-template-columns:28px minmax(0,1fr) 15% 53px 145px}.purchase-download{display:inline-flex;margin-top:24px}.purchase-download[hidden]{display:none}#purchase-retry{margin-top:20px;display:block}
@media(max-width:1250px){.has-shop-offers .track-row{grid-template-columns:28px 45px minmax(0,1fr) 12% 53px 145px;gap:9px}.table-head.has-download{grid-template-columns:28px minmax(0,1fr) 12% 53px 145px;gap:9px}}
@media(max-width:950px){.has-shop-offers .track-row{grid-template-columns:25px 44px minmax(0,1fr) 49px 145px;gap:8px}.table-head.has-download{grid-template-columns:25px minmax(0,1fr) 49px 145px;gap:8px}.track-buy{font-size:12px;padding:9px}}
@media(max-width:720px){.has-shop-offers .track-row{grid-template-columns:46px minmax(0,1fr) 43px;gap:10px}.track-buy{grid-column:2/4;justify-self:start;min-height:36px;margin-top:2px}#queue-dialog .track-row{grid-template-columns:43px minmax(0,1fr)}#queue-dialog .track-buy{grid-column:2}.hero-actions{flex-wrap:wrap}}
@media(max-width:400px){.has-shop-offers .track-row{grid-template-columns:42px minmax(0,1fr) 38px;gap:8px}}
#queue-dialog .track-row{grid-template-columns:24px 44px minmax(0,1fr) auto}
@media(max-width:720px){#queue-dialog .track-row{grid-template-columns:43px minmax(0,1fr)}}

.site-ad{margin:36px 0;padding:16px;border:1px solid #ffffff0b;border-radius:16px;background:#171719;overflow:hidden;contain:layout style}.site-ad-label{display:block;margin-bottom:12px;font-size:10px;color:#9b979e;letter-spacing:1.5px;text-transform:uppercase;text-align:center}.site-ad .adsbygoogle{display:block;width:100%;height:250px}.site-ad[hidden]{display:none}.page-footer{flex-wrap:wrap}.page-footer a{font-size:14px}
@media(min-width:1100px){.site-ad .adsbygoogle{height:90px}}
@media(max-width:720px){.site-ad{margin:28px 0;padding:12px}.has-shop-offers #queue-dialog .track-row{grid-template-columns:43px minmax(0,1fr)}}