:root{--bg:#0c0e12;--panel:#14171c;--panel-2:#1b1f25;--text:#f4f5f2;--muted:#979da7;--muted-2:#68707b;--accent:#c7f35a;--accent-2:#adf142;--line:#252a31;--bottom:94px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}svg use{pointer-events:none}.sprite{width:0;height:0;position:absolute;overflow:hidden}.hidden{display:none!important}::selection{background:#c7f35a;color:#111}
.site-shell{display:flex;min-height:100vh;padding-bottom:var(--bottom)}.sidebar{position:sticky;top:0;flex:0 0 252px;width:252px;height:calc(100vh - var(--bottom));padding:30px 18px 17px 22px;border-right:1px solid var(--line);background:#0f1216;display:flex;flex-direction:column;z-index:15}.logo{display:flex;align-items:center;gap:13px;color:var(--text);border:0;background:transparent;text-align:left;padding:0 8px;width:max-content}.logo-mark{width:44px;height:44px;border-radius:14px;background:var(--accent);color:#111713;font-family:Outfit,sans-serif;font-size:28px;font-weight:800;letter-spacing:-4px;display:inline-flex;justify-content:center;align-items:center;padding-right:5px;flex-shrink:0}.logo-dot{color:#3f5335}.logo-words{display:flex;flex-direction:column;font-family:Outfit,sans-serif;line-height:1}.logo-words strong{font-size:22px;letter-spacing:-.7px}.logo-words small{font-size:10px;letter-spacing:5px;margin-top:5px;font-weight:700;color:var(--accent)}.sidebar-kicker,.sidebar-section-header,.eyebrow{font-family:Outfit,sans-serif;font-size:10px;font-weight:700;letter-spacing:1.9px;color:#777e88}.sidebar-kicker{margin:47px 12px 18px}.nav{display:flex;flex-direction:column;gap:5px}.nav-item{height:46px;width:100%;display:flex;align-items:center;gap:14px;border:1px solid transparent;color:#a3aab3;background:transparent;border-radius:12px;padding:0 13px;text-align:left;font-weight:600}.nav-item svg{width:20px;height:20px}.nav-item.active{background:#263120;border-color:#3b5133;color:var(--accent)}.nav-item:hover:not(.active){background:#1b2026;color:white}.nav-count{margin-left:auto;font-size:11px;color:#808a94;background:#252a31;border-radius:6px;padding:2px 7px}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;margin:38px 10px 14px}.icon-button{display:inline-flex;justify-content:center;align-items:center;color:#a8afb7;background:transparent;border:0;border-radius:9px;min-width:33px;height:33px;padding:5px;transition:color .2s,background .2s}.icon-button:hover{background:#262c32;color:var(--text)}.add-playlist{margin-right:-7px}.add-playlist svg{width:17px;height:17px}.playlist-nav{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:0}.playlist-link{display:flex;align-items:center;gap:12px;width:100%;min-height:41px;text-align:left;padding:9px 12px;border:0;background:transparent;border-radius:9px;color:#9da4ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-link svg{width:16px;height:16px}.playlist-link span{overflow:hidden;text-overflow:ellipsis}.playlist-link.active,.playlist-link:hover{background:#1e2527;color:var(--accent)}.playlist-empty{padding:2px 12px;color:#636c76;font-size:12px;line-height:1.6}.sidebar-bottom{margin-top:auto}.privacy-card{padding:18px 16px;border:1px solid #303b2d;background:linear-gradient(140deg,#243026,#1c2521 90%);border-radius:13px}.privacy-icon{font-size:20px;color:var(--accent)}.privacy-card strong{display:block;font-family:Outfit,sans-serif;font-size:13px;margin:8px 0}.privacy-card p{font-size:11px;line-height:1.55;margin:0;color:#a2b4a4}.sidebar-credit{margin:20px 8px 0;font-size:10px;color:#5d6570}.sidebar-credit span{margin:0 5px}.main{min-width:0;flex:1;max-width:1640px;margin:0 auto;padding:24px 37px 34px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.searchbox{height:44px;max-width:460px;min-width:240px;display:flex;align-items:center;gap:13px;flex:1;padding:0 15px;background:#191e23;border:1px solid #2a3036;border-radius:12px;color:#7d858e}.searchbox svg{height:18px;width:18px;flex-shrink:0}.searchbox:focus-within{border-color:#637951}.searchbox input{background:transparent;color:#e7e8e8;outline:0;border:0;flex:1;min-width:0;font-size:12px}.searchbox input::placeholder{color:#818892}.search-shortcut{font-size:10px;border:1px solid #343a40;border-radius:4px;color:#767e86;padding:3px 5px;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:14px}.import-btn{height:42px;padding:0 17px;display:flex;align-items:center;gap:9px;background:var(--accent);border:0;color:#101810;border-radius:11px;font-weight:800;font-size:12px;white-space:nowrap}.import-btn:hover,.button:hover,.cta-banner button:hover{background:#d5ff75}.import-btn svg{width:16px;height:16px}.guest-pill{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid #2f3539;border-radius:22px;font-size:11px;color:#b2b8b8;white-space:nowrap}.guest-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 9px #b9ff74}.mobile-brand{display:none}.greeting{margin:0 0 16px;display:flex;align-items:center;gap:9px}.tiny-light{width:7px;height:7px;border-radius:50%;background:var(--accent)}.hero{position:relative;overflow:hidden;display:flex;min-height:330px;border-radius:20px;background:radial-gradient(ellipse at 85% 48%,#628e47 0,#283d2f 28%,transparent 54%),linear-gradient(106deg,#c6f65a 0%,#b5ee59 44%,#90b86a 100%);color:#111813;isolation:isolate}.hero-glow{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#c8f565 0,rgba(199,245,97,.98) 34%,rgba(199,245,97,0) 74%)}.hero-copy{position:relative;z-index:2;max-width:580px;padding:34px 46px 33px}.hero-tag{display:inline-flex;align-items:center;gap:8px;color:#30432e;background:#a2db57;border:1px solid #92bc55;border-radius:30px;padding:7px 13px;font-family:Outfit,sans-serif;font-size:9px;font-weight:800;letter-spacing:1px}.hero-tag span{font-size:13px}.hero h1{font-family:Outfit,sans-serif;font-size:clamp(43px,5.1vw,76px);line-height:.99;letter-spacing:-3.5px;margin:20px 0 13px;font-weight:800}.hero h1 em{font-style:normal;color:#486c36}.hero p{max-width:355px;font-size:12px;line-height:1.6;margin:0;color:#3e5136;font-weight:600}.hero-actions{display:flex;align-items:center;gap:21px;margin-top:23px}.button{height:41px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#131914;border:0;border-radius:10px;font-weight:800;font-size:12px}.button svg{width:15px;height:15px;fill:currentColor;stroke-width:1}.button-dark{color:#f4f7ee;background:#141b14}.button-dark:hover{color:#111;background:#f4ffe1}.hero-secondary{border:0;background:transparent;color:#314329;font-weight:800;font-size:12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.hero-secondary svg{height:15px;width:15px}.hero-visual{position:absolute;top:0;bottom:0;right:0;width:49%;display:flex;align-items:center;justify-content:center}.vinyl{width:min(330px,30vw);height:min(330px,30vw);min-width:240px;min-height:240px;border-radius:50%;position:absolute;right:9%;top:2%;box-shadow:0 20px 40px #1a271066,0 0 0 4px #596947,0 0 0 9px #24302a;background:repeating-radial-gradient(circle,#151b19 0,#151b19 3px,#222b27 4px,#141916 7px)}.vinyl:before{content:"";position:absolute;inset:6%;border:1px solid #566058;border-radius:50%;box-shadow:0 0 0 23px #0e131012,0 0 0 51px #0002}.vinyl-label{display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 24% 20%,#ddf9a3,#81b853);border:6px solid #263a29;color:#243b28;font-family:Outfit,sans-serif;font-weight:800;font-size:23px;z-index:1}.vinyl-label:after{content:"";position:absolute;width:10px;height:10px;background:#122217;border-radius:50%;top:calc(50% - 5px);left:calc(50% - 5px)}.vinyl-label span,.vinyl-label small{transform:translateY(-13px)}.vinyl-label small{font-size:9px;letter-spacing:3px}.hero-visual canvas{position:absolute;right:0;bottom:0;max-width:100%;opacity:.5}.hero-corner{position:absolute;right:18px;bottom:11px;font-size:9px;font-weight:800;letter-spacing:1.4px;z-index:2;color:#253d24}.is-playing .vinyl{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.section{margin-top:38px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:19px}.section-heading h2{margin:7px 0 0;font:700 25px/1.2 Outfit,sans-serif;letter-spacing:-.8px}.heading-star{color:var(--accent);margin-left:3px}.text-link{display:flex;align-items:center;gap:5px;background:transparent;border:0;color:#a4b2a1;font-weight:700;font-size:11px;white-space:nowrap}.text-link svg{width:15px;height:15px}.text-link:hover{color:var(--accent)}.featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.track-card{min-width:0;background:#171b21;border:1px solid #262c34;border-radius:15px;padding:12px;text-align:left;transition:transform .2s,background .2s,border-color .2s;position:relative}.track-card:hover{transform:translateY(-3px);background:#1b2028;border-color:#45563c}.track-card .card-cover{width:100%;aspect-ratio:1.35;border-radius:10px;overflow:hidden;position:relative}.track-card .card-cover .art{height:100%;width:100%;border-radius:10px}.track-card h3{font:700 14px/1.2 Outfit,sans-serif;margin:13px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-card p{color:#8a929c;margin:0 0 3px;font-size:11px}.card-play{position:absolute;right:12px;bottom:12px;width:37px;height:37px;background:var(--accent);border-radius:50%;color:#151a14;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 20px #0005;opacity:0;transform:translateY(6px);transition:all .18s}.track-card:hover .card-play,.track-card:focus-within .card-play{opacity:1;transform:none}.card-play svg{width:16px;height:16px;fill:currentColor;stroke-width:1}.art{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;isolation:isolate}.art:before,.art:after{content:"";position:absolute;border-radius:50%;z-index:-1}.art:before{width:75%;aspect-ratio:1;border:34px solid #ffffff22;transform:translate(45%,-35%)}.art:after{width:65%;aspect-ratio:1;background:#ffffff15;transform:translate(-60%,62%);box-shadow:60px -45px 0 #00000016}.art svg{width:42px;height:42px;opacity:.85;stroke-width:1}.art b{font:800 46px Outfit,sans-serif;letter-spacing:-3px;text-shadow:0 7px 25px #0004}.art-night{background:linear-gradient(132deg,#42358d,#bc5eff 64%,#ff9b95)}.art-shadow{background:linear-gradient(135deg,#120e31,#503f80 48%,#a24860)}.art-sun{background:linear-gradient(135deg,#e68b49,#f7c56e 49%,#a46179)}.art-star{background:linear-gradient(135deg,#143a50,#2c8380 57%,#9cceaf)}.art-user-0{background:linear-gradient(135deg,#7d3da0,#ca4a7b)}.art-user-1{background:linear-gradient(135deg,#1c6c9a,#3ba6a7)}.art-user-2{background:linear-gradient(135deg,#b16a26,#d6ad5a)}.art-user-3{background:linear-gradient(135deg,#386c44,#83ad5b)}.track-list{display:flex;flex-direction:column;gap:4px}.track-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(100px,1.1fr) 75px 100px;align-items:center;gap:14px;border-radius:10px;padding:9px 14px;border:1px solid transparent;min-height:64px}.track-row:hover,.track-row.active{background:#1a2024;border-color:#26312c}.track-main{display:flex;align-items:center;gap:13px;min-width:0}.row-cover{width:48px;height:48px;border-radius:8px;flex:0 0 48px}.row-cover b{font-size:20px}.row-cover svg{height:21px;width:21px}.row-title{min-width:0}.row-title strong{display:block;font-size:12px;color:#ecefeb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}.row-title small{font-size:10px;color:#939aa2;display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row.active .row-title strong{color:var(--accent)}.row-genre{color:#969da5;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-duration{color:#969da5;font-variant-numeric:tabular-nums;font-size:11px}.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:4px}.row-actions .icon-button{min-width:31px;width:31px;height:31px}.row-actions svg{width:16px;height:16px}.liked,.icon-button.liked{color:var(--accent)!important}.liked svg{fill:currentColor;stroke-width:1}.row-play{border:0;background:transparent;padding:0;text-align:left;color:inherit;width:100%;min-width:0}.cta-banner{display:flex;align-items:center;gap:16px;margin:32px 0 15px;padding:21px;border:1px solid #303b2b;background:linear-gradient(92deg,#202b21,#1b2425);border-radius:14px}.cta-icon{width:48px;height:48px;flex:0 0 48px;background:#34452e;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent)}.cta-banner strong{font:700 16px Outfit,sans-serif}.cta-banner p{margin:5px 0 0;color:#9dad9d;font-size:11px}.cta-banner button{margin-left:auto;white-space:nowrap;background:var(--accent);border:0;border-radius:9px;color:#131a13;height:37px;padding:0 13px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:8px}.cta-banner button svg{width:16px;height:16px}.collection-view{padding:13px 0 50px}.collection-head{display:flex;align-items:flex-end;gap:27px;padding:30px 0 33px}.collection-art{width:195px;height:195px;flex:0 0 195px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(135deg,#344b25,#b8ed5a);box-shadow:0 14px 45px #0004}.collection-art svg{height:85px;width:85px;color:#e4ffd0;stroke-width:1}.collection-head h1{font:800 clamp(34px,4vw,60px)/1.1 Outfit,sans-serif;margin:11px 0 9px;letter-spacing:-1.5px}.collection-head p{margin:0;color:#a0a8ae;font-size:12px}.collection-actions{display:flex;align-items:center;gap:11px;margin-top:20px}.round-play{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#162018;border:0;display:flex;align-items:center;justify-content:center}.round-play svg{width:20px;height:20px;fill:currentColor;stroke-width:1}.outline-btn{border:1px solid #414a4d;background:transparent;color:#e6ebe2;padding:10px 15px;border-radius:9px;font-weight:700;font-size:11px}.outline-btn:hover{border-color:var(--accent)}.outline-btn.danger:hover{border-color:#ff7180;color:#ff7180}.table-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(100px,1.1fr) 75px 100px;gap:14px;padding:11px 14px;color:#6e7980;letter-spacing:1.2px;font-size:10px;font-weight:700;border-bottom:1px solid var(--line);margin-bottom:9px}.empty-state{text-align:center;margin:42px 0 70px;color:#9ba5a8}.empty-icon{width:80px;height:80px;margin:0 auto 15px;border-radius:50%;background:#263223;display:grid;place-items:center;color:var(--accent)}.empty-icon svg{width:33px;height:33px}.empty-state h3{font:700 21px Outfit,sans-serif;color:#f0f3ee;margin:4px 0 7px}.empty-state p{font-size:12px;margin:0 0 20px}.main-footer{margin-top:38px;color:#66706e;font-size:10px;text-align:center}.main-footer span{margin:0 8px;color:#4b5b4c}
.player{position:fixed;bottom:0;left:0;right:0;height:var(--bottom);background:#171b20;border-top:1px solid #333c3a;z-index:50;display:grid;grid-template-columns:minmax(235px,1fr) minmax(360px,1.1fr) minmax(180px,1fr);align-items:center;gap:20px;padding:12px 27px;box-shadow:0 -10px 36px #05060733}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:53px;height:53px;flex:0 0 53px;border-radius:8px}.player-cover svg{width:24px;height:24px}.player-meta{display:flex;flex-direction:column;min-width:0;gap:4px}.player-meta strong{max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.player-meta span{color:#88939b;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player-heart{margin-left:6px}.player-heart svg{height:18px;width:18px}.playback{min-width:0}.playback-controls{display:flex;gap:16px;justify-content:center;align-items:center;margin-bottom:7px}.playback-controls svg{width:17px;height:17px}.playback-controls .active{color:var(--accent)}.playback-controls .icon-button{position:relative}.playback-controls #repeatOne{position:absolute;color:var(--accent);font-size:8px;right:3px;top:2px}.big-play{width:36px;height:36px;background:var(--text);border-radius:50%;border:0;display:grid;place-items:center;color:#191e1b}.big-play:hover{background:var(--accent)}.big-play svg{height:18px;width:18px;fill:currentColor;stroke-width:1.2}.seekline{display:flex;align-items:center;gap:10px;font-size:10px;font-variant-numeric:tabular-nums;color:#9da5a9}.seekline span{min-width:30px;text-align:center}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:#414a4d;height:4px;border-radius:8px;outline:none;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;background:var(--accent);border-radius:50%;border:0}input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--accent);border-radius:50%;border:0}.seekline input{width:100%;min-width:0}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:9px}.player-format{font-size:9px;letter-spacing:1px;color:#6e8980;margin-right:11px;white-space:nowrap}.player-right input{width:100px}.mobile-nav{display:none}.toast{position:fixed;bottom:calc(var(--bottom) + 14px);left:50%;transform:translateX(-50%) translateY(15px);background:#2f4131;border:1px solid #648658;color:#efffe7;padding:12px 20px;border-radius:12px;box-shadow:0 12px 35px #0008;z-index:100;opacity:0;pointer-events:none;transition:all .2s;max-width:min(90vw,490px);text-align:center;font-size:12px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal{background:#1b2026;color:var(--text);border:1px solid #435044;border-radius:17px;padding:24px;width:min(420px,92vw);box-shadow:0 28px 70px #0009}.modal::backdrop{background:#000b;backdrop-filter:blur(6px)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.modal-head h3{font:700 22px Outfit,sans-serif;margin:7px 0 20px}.playlist-choices{display:flex;flex-direction:column;gap:7px;max-height:270px;overflow:auto}.playlist-choice{display:flex;align-items:center;justify-content:space-between;min-height:43px;padding:0 13px;border:1px solid #343d41;background:#232a30;color:#e1e6e3;border-radius:9px;text-align:left}.playlist-choice:hover{border-color:var(--accent)}.playlist-choice svg{width:16px;height:16px;color:var(--accent)}.modal-new{margin-top:14px;width:100%;border:1px dashed #647c55;background:transparent;border-radius:9px;color:var(--accent);padding:12px;font-size:12px;font-weight:800;display:flex;justify-content:center;align-items:center;gap:8px}.modal-new svg{width:17px;height:17px}.modal-empty{color:#87928d;font-size:12px;padding:10px}.mobile-brand{align-items:center;gap:10px;font-family:Outfit,sans-serif}.mobile-brand .logo-mark{width:34px;height:34px;border-radius:10px;font-size:22px}
@media(max-width:1230px){.sidebar{flex-basis:222px;width:222px}.main{padding-left:24px;padding-right:24px}.hero-copy{padding-left:32px}.hero-visual{width:43%}.vinyl{right:-5%;top:8%}.hero h1{font-size:60px}.featured-grid{gap:11px}.track-card{padding:9px}.guest-pill{display:none}.player-format{display:none}}
@media(max-width:920px){.sidebar{width:72px;flex-basis:72px;padding:22px 11px}.logo{padding:0 3px}.logo-words,.sidebar-kicker,.nav-item span,.sidebar-section-header span,.playlist-link span,.playlist-empty,.sidebar-bottom,.nav-count{display:none!important}.nav{margin-top:42px;align-items:center}.nav-item{justify-content:center;padding:0;width:48px}.sidebar-section-header{margin:23px 0;justify-content:center}.playlist-link{justify-content:center}.playlist-link svg{width:18px;height:18px}.hero h1{font-size:clamp(41px,6vw,56px)}.hero-visual{width:41%;opacity:.82}.vinyl{width:245px;height:245px;min-width:0;min-height:0;right:-30%;top:23%}.hero-copy{padding:32px}.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track-card .card-cover{aspect-ratio:1.9}.player{grid-template-columns:1fr 1.1fr;gap:12px}.player-right{display:none}.player-track{max-width:260px}.top-actions .import-btn{padding:0 12px}.top-actions .import-btn span{display:none}}
@media(max-width:660px){:root{--bottom:133px}.site-shell{padding-bottom:180px}.sidebar{display:none}.main{padding:18px 16px 22px;width:100%}.topbar{flex-wrap:wrap;gap:12px;margin-bottom:22px}.mobile-brand{display:flex;order:0;margin-right:auto}.top-actions{order:1}.import-btn{width:39px;height:39px;justify-content:center}.searchbox{order:2;flex-basis:100%;max-width:100%;height:43px}.search-shortcut{display:none}.greeting{font-size:9px}.hero{min-height:300px;border-radius:15px}.hero-copy{padding:25px 24px 24px}.hero h1{font-size:47px;letter-spacing:-2.5px;margin-top:23px}.hero p{max-width:230px;font-size:11px}.hero-visual{opacity:.3;width:60%}.hero-glow{background:linear-gradient(90deg,#c8f565 0,rgba(199,245,97,.9) 53%,rgba(199,245,97,0) 100%)}.vinyl{right:-60%;top:10%;width:250px;height:250px}.hero-actions{gap:12px;flex-wrap:wrap}.hero-secondary{font-size:10px}.button{padding:0 12px;font-size:11px}.hero-corner{display:none}.section{margin-top:29px}.section-heading h2{font-size:23px}.section-heading .eyebrow{font-size:9px}.featured-grid{gap:11px}.track-card{padding:8px;border-radius:12px}.track-card .card-cover{aspect-ratio:1.15}.track-card h3{font-size:12px;margin-top:10px}.track-card p{font-size:10px}.card-play{opacity:1;transform:none;right:8px;bottom:8px;width:32px;height:32px}.track-list{gap:3px}.track-row,.table-head{grid-template-columns:minmax(0,1fr) 40px 70px;gap:6px}.track-row{padding:7px 3px;min-height:61px}.track-main{gap:9px}.row-cover{width:42px;height:42px;flex-basis:42px}.row-genre,.table-head span:nth-child(2){display:none}.row-duration{font-size:10px;text-align:center}.row-actions{gap:0}.row-actions .icon-button{width:27px;min-width:27px}.row-actions .icon-button:first-child{display:none}.table-head{padding:8px 3px}.table-head span:nth-child(3){text-align:center}.cta-banner{padding:17px;flex-wrap:wrap;gap:11px}.cta-banner p{font-size:10px}.cta-banner button{margin-left:0;width:100%;justify-content:center}.collection-head{align-items:center;gap:14px;padding:8px 0 25px}.collection-art{width:105px;height:105px;flex-basis:105px;border-radius:14px}.collection-art svg{width:51px;height:51px}.collection-head h1{font-size:31px;letter-spacing:-1px}.collection-head p{font-size:10px}.collection-head .eyebrow{font-size:8px}.collection-actions{gap:7px;margin-top:11px;flex-wrap:wrap}.round-play{width:38px;height:38px}.outline-btn{padding:8px 10px;font-size:10px}.main-footer{line-height:1.6;font-size:9px}.player{height:91px;bottom:56px;grid-template-columns:minmax(0,1fr) auto;padding:8px 13px;gap:4px;border-top:1px solid #435141}.player-cover{width:46px;height:46px;flex-basis:46px}.player-meta strong{font-size:11px}.player-meta span{font-size:10px}.player-heart{display:none}.playback{display:flex;align-items:center}.playback-controls{gap:3px;margin:0}.playback-controls #shuffleBtn,.playback-controls #repeatBtn{display:none}.playback-controls .icon-button{width:30px;min-width:30px}.playback-controls #prevBtn{display:none}.playback-controls svg{width:17px;height:17px}.big-play{width:36px;height:36px}.seekline{position:absolute;left:0;bottom:0;width:100%;gap:0;height:4px}.seekline span{display:none}.seekline input{width:100%;height:3px;margin:0;border-radius:0}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:#12171b;z-index:55;border-top:1px solid #2b3832;align-items:stretch;justify-content:space-around}.mobile-nav button{border:0;background:transparent;color:#7d888b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;min-width:65px}.mobile-nav button.active{color:var(--accent)}.mobile-nav svg{width:18px;height:18px}.toast{bottom:161px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.drop-layer{position:fixed;inset:0;z-index:200;background:#131c18ed;border:7px dashed var(--accent);display:none;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--accent);font:800 clamp(22px,4vw,42px) Outfit,sans-serif;pointer-events:none}.drop-layer.visible{display:flex}
.modal-delete{margin-top:10px;width:100%;background:#2e2529;color:#ffa4a9;border:1px solid #59434a;border-radius:9px;min-height:39px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px}.modal-delete svg{width:15px;height:15px}.modal-delete:hover{background:#402c31}