@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080a12;--panel:#10131d;--panel2:#151925;--line:#222735;--muted:#7f879a;--text:#f4f3f8;--violet:#9b7cff;--cyan:#58e1e0;--pink:#ef78c9;--mono:'DM Mono',monospace;--sans:'Manrope',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-width:320px}button{font:inherit;color:inherit;cursor:pointer}.app-shell{min-height:100vh;padding-bottom:100px}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;border-right:1px solid #1a1e2a;padding:27px 18px;background:rgba(9,11,19,.96);display:flex;flex-direction:column;z-index:10}.brand{height:60px;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);margin:0 0 38px 8px}.brand-mark{width:33px;height:33px;border:1px solid #8c75ec;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-8deg);box-shadow:0 0 20px #8064ff30}.brand-mark span{width:3px;border-radius:4px;background:linear-gradient(var(--cyan),var(--violet));height:11px}.brand-mark span:nth-child(2){height:19px}.brand-mark span:nth-child(3){height:14px}.brand b{font-size:17px;letter-spacing:3px;display:block}.brand small{display:block;font:9px var(--mono);letter-spacing:1.1px;color:#a1a6b7;margin-top:2px}.side-label{font:9px var(--mono);color:#60697f;letter-spacing:1.6px;padding:0 11px;margin:0 0 10px}.main-nav{display:grid;gap:4px}.nav-item{border:0;background:transparent;border-radius:9px;text-align:left;color:#9ca3b5;padding:11px 12px;display:flex;align-items:center;gap:12px;font-size:12px;transition:.2s}.nav-item:hover,.nav-item.active{background:#171b28;color:#fff}.nav-item.active{box-shadow:inset 2px 0 var(--violet)}.nav-icon{width:17px;text-align:center;color:#a38aff;font-size:17px}.nav-count{margin-left:auto;border:1px solid #303646;border-radius:20px;padding:1px 7px;font:10px var(--mono);color:#9299aa}.side-divider{height:1px;background:#1d2230;margin:24px 7px}.soon{margin-left:auto;color:#657083;font:8px var(--mono);border:1px solid #303645;border-radius:4px;padding:3px 5px}.sidebar-bottom{margin-top:auto}.offline-card{display:flex;gap:10px;background:#111722;border:1px solid #222b38;padding:12px 10px;border-radius:9px;align-items:flex-start}.offline-card b,.offline-card small{display:block}.offline-card b{font-size:10px;font-weight:600}.offline-card small{font-size:9px;color:#7e8899;margin-top:4px;line-height:1.4}.status-dot{display:inline-block;flex:none;width:6px;height:6px;background:#6be4b0;border-radius:50%;box-shadow:0 0 9px #6be4b0;margin-top:4px}.identity{font:8px var(--mono);letter-spacing:.6px;color:#666f80;margin:19px 5px 0}.identity span{color:#aa8cff;margin:0 3px}.main-content{margin-left:244px;padding:0 48px 50px;max-width:1570px}.topbar{height:80px;border-bottom:1px solid #1a1e2a;display:flex;align-items:center;justify-content:space-between}.breadcrumbs{font:9px var(--mono);letter-spacing:1.3px;color:#687085}.breadcrumbs i{font-style:normal;color:#3f4655;padding:0 10px}.breadcrumbs b{color:#abb0c1;font-weight:400}.top-actions{display:flex;align-items:center;gap:17px}.build-tag{font:9px var(--mono);color:#858da0;letter-spacing:1px}.build-tag i{font-style:normal;color:#bfa9ff;margin-left:5px;font-size:8px}.install-button{background:transparent;border:1px solid #343747;border-radius:6px;padding:8px 14px;font-size:11px}.install-button:hover{border-color:var(--violet);background:#171526}.install-button span{color:#c1aaff;font-size:15px;margin-right:5px}.mobile-menu{display:none}.page-view{display:none;animation:appear .3s ease}.page-view.current{display:block}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.hero{height:350px;position:relative;display:flex;align-items:center;border-bottom:1px solid #1b1f2b;overflow:hidden}.hero-copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:9px;font:9px var(--mono);letter-spacing:1.6px;color:#9c8bcd}.eyebrow-line{width:18px;height:1px;background:var(--violet)}h1,h2,p{margin:0}.hero h1,.page-intro h1{font-size:clamp(37px,4.1vw,57px);line-height:1.13;letter-spacing:-2.6px;font-weight:600;margin:17px 0 13px}.hero h1 em,.section-heading h2 em,.page-intro h1 em{font-style:normal;color:var(--violet)}.hero-copy>p,.page-intro p{font-size:12px;line-height:1.9;color:#9299aa}.hero-actions{display:flex;align-items:center;gap:19px;margin-top:24px}.primary-button{border:0;border-radius:6px;background:linear-gradient(110deg,#9476ef,#b077da);padding:11px 16px;font-weight:700;font-size:11px;color:#0e0b19;box-shadow:0 4px 20px #9c79e52c}.primary-button:hover{filter:brightness(1.12)}.primary-button span{font-size:15px;margin-right:5px}.text-button,.quiet-button{border:0;background:transparent;color:#9ca3b5;font-size:10px}.text-button:hover,.quiet-button:hover{color:#fff}.text-button span,.quiet-button span{color:var(--cyan);margin-left:6px}.hero-art{position:absolute;width:470px;height:340px;right:3%;top:4px;display:grid;place-items:center;opacity:.92}.orbit{position:absolute;border:1px solid #6c5ca966;border-radius:50%;transform:rotate(-26deg)}.orbit-one{width:325px;height:120px}.orbit-two{width:390px;height:170px;transform:rotate(25deg);border-color:#4d708064}.orbit-three{width:270px;height:270px;border-color:#926efc25}.planet{width:177px;height:177px;border-radius:50%;position:relative;background:radial-gradient(circle at 34% 30%,#fac4ee 0,#ad83e6 15%,#6952b6 40%,#282e5f 72%,#131a33 100%);box-shadow:0 0 50px #9d6be957,0 0 100px #7855ef2a,inset -20px -24px 30px #090d20;overflow:hidden}.planet:before,.planet:after{content:'';position:absolute;border-radius:50%;width:200px;height:38px;left:-12px;top:68px;transform:rotate(-31deg);background:repeating-linear-gradient(0deg,#b88aff00 0 5px,#d29ce955 6px 7px,#7057d244 8px 12px);filter:blur(.3px)}.planet:after{top:86px;left:-24px;opacity:.48}.planet-shine{position:absolute;inset:14px 26px 70px 16px;border-radius:50%;background:linear-gradient(135deg,#ffffff7a,transparent 52%);filter:blur(10px)}.planet-ring{position:absolute;inset:31px -48px;border:1px solid #d1a0ff70;border-radius:50%;transform:rotate(-31deg);box-shadow:0 0 16px #b797ff48}.art-cross{position:absolute;color:#bba5ff}.cross-a{right:67px;top:59px;font-size:17px}.cross-b{left:59px;bottom:53px;font-size:18px;color:#64d8e0}.art-caption{position:absolute;right:8px;bottom:33px;color:#786a9e;font:10px var(--mono);letter-spacing:3px;line-height:1.7}.art-caption span{color:#586076}.hero-index{position:absolute;right:3px;bottom:19px;color:#747b8d;font:9px var(--mono)}.hero-index span{color:#a989ff;padding:0 8px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:35px 0 20px}.section-heading h2{font-size:24px;letter-spacing:-.8px;margin-top:9px;font-weight:600}.section-heading h2 em{color:#c5a7ff}.dropzone{display:flex;align-items:center;gap:15px;border:1px dashed #39344e;border-radius:10px;min-height:86px;padding:16px 20px;background:linear-gradient(105deg,#13142399,#11151c66);transition:.2s}.dropzone.dragover{border-color:var(--cyan);background:#142127}.drop-icon{width:38px;height:38px;border:1px solid #453c63;background:#1b192b;border-radius:9px;display:grid;place-items:center;font-size:19px;color:#bba2ff}.dropzone b,.dropzone span{display:block}.dropzone b{font-size:11px;font-weight:600}.dropzone span{font-size:9px;color:#858da0;margin-top:6px}.small-outline{margin-left:auto;background:transparent;border:1px solid #353949;border-radius:5px;padding:8px 12px;font-size:9px;color:#a9afbd}.small-outline:hover{border-color:#9b7cff;color:#fff}.recent-heading{margin-top:37px}.subtle-count{font:9px var(--mono);letter-spacing:1px;color:#667084;padding-bottom:4px}.track-list{border-top:1px solid #202430}.empty-state{height:152px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#7e8698}.empty-orbit{width:35px;height:35px;border:1px solid #3d3656;border-radius:50%;display:grid;place-items:center;color:#ad96ed;font-size:15px;margin-bottom:3px}.empty-state b{font-size:10px;font-weight:600;color:#adb3c2}.empty-state>span{font-size:9px}.track-row{display:grid;grid-template-columns:38px minmax(100px,1fr) 110px 70px 30px;gap:13px;align-items:center;padding:10px 9px;border-bottom:1px solid #1b202a;transition:.15s}.track-row:hover{background:#11151e}.row-art{width:36px;height:36px;border:1px solid #35304c;border-radius:6px;background:linear-gradient(135deg,#292244,#12222d);display:grid;place-items:center;color:#c1a8ff}.row-info{min-width:0}.row-info b,.row-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-info b{font-size:10px;font-weight:600}.row-info span,.row-album{font-size:9px;color:#7d8597;margin-top:4px}.row-album{font-family:var(--mono)}.row-duration{font:9px var(--mono);color:#8790a1}.row-play{border:0;background:transparent;color:#8b92a3;font-size:13px}.row-play:hover{color:#c4a7ff}.row-play.playing{color:var(--cyan)}.footer-note{margin:29px 0 0;color:#667084;font:8px var(--mono);letter-spacing:.8px}.footer-note .status-dot{width:5px;height:5px;margin:0 7px 0 0}.footer-sep{color:#aa8aff;margin:0 8px}.page-intro{padding:66px 0 35px;border-bottom:1px solid #1c202b}.page-intro h1{font-size:46px;margin:15px 0 9px}.page-intro .hero-actions{margin-top:20px}.library-toolbar{display:flex;justify-content:space-between;align-items:center;padding:22px 2px;color:#8991a2;font-size:10px}.library-toolbar .quiet-button{color:#8f7688}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;padding-top:25px}.playlist-card{min-height:165px;border:1px solid #252a38;border-radius:9px;padding:16px;background:linear-gradient(145deg,#171525,#11151e);cursor:pointer}.playlist-art{height:82px;border-radius:6px;background:radial-gradient(circle at 65% 35%,#c08bee,#55478d 35%,#18232c 75%);display:grid;place-items:center;color:#f4d7fa;font-size:24px;margin-bottom:13px}.playlist-card b{font-size:11px}.playlist-card span{display:block;color:#7f879a;font-size:9px;margin-top:5px}.visualizer-panel{position:relative;margin-top:35px;border:1px solid #29293a;border-radius:12px;height:350px;background:radial-gradient(ellipse at 50% 65%,#262144 0,#131521 40%,#0c0f18 77%);overflow:hidden}.visualizer-panel canvas{width:100%;height:100%;display:block}.visualizer-overlay{position:absolute;left:19px;top:17px;display:flex;gap:12px;align-items:center;font:9px var(--mono);letter-spacing:1px;color:#838a9e}.visualizer-overlay b{font-weight:400;color:#b69cff}.eq-preview{margin-top:38px;border:1px solid #292d3b;border-radius:10px;padding:25px;background:#10131c}.eq-sliders{height:200px;display:flex;justify-content:space-around;align-items:stretch}.eq-band{display:flex;flex-direction:column;align-items:center;justify-content:space-between;font:9px var(--mono);color:#9da4b4}.eq-band>div{height:139px;width:4px;border-radius:5px;background:#343347;position:relative}.eq-band>div:after{content:'';position:absolute;width:13px;height:13px;left:-5px;top:38%;border:2px solid #c5a8ff;border-radius:50%;background:#151321;box-shadow:0 0 10px #9871ed88}.eq-band:nth-child(2)>div:after{top:27%}.eq-band:nth-child(3)>div:after{top:52%}.eq-band:nth-child(4)>div:after{top:33%}.eq-band:nth-child(5)>div:after{top:44%}.eq-band b{font-size:8px;color:#697286;font-weight:400;letter-spacing:1px}.coming-label{margin-top:26px;border-top:1px solid #252936;padding-top:16px;font:9px var(--mono);letter-spacing:1px;color:#b8a0f1}.coming-label span{color:#71798c;margin-left:8px;font-size:8px}.player-bar{position:fixed;inset:auto 0 0 0;height:88px;background:rgba(12,14,22,.97);border-top:1px solid #282b38;z-index:20;display:grid;grid-template-columns:minmax(230px,1fr) minmax(300px,1.2fr) minmax(220px,1fr);align-items:center;padding:0 27px;gap:20px;backdrop-filter:blur(18px)}.now-playing{display:flex;align-items:center;gap:10px;min-width:0}.mini-cover{width:42px;height:42px;flex:none;border:1px solid #41375e;border-radius:7px;background:radial-gradient(circle at 65% 35%,#bc8be8,#453968 45%,#19212c);display:grid;place-items:center;color:#eadbff;font-size:18px}.track-meta{min-width:0}.track-meta b,.track-meta span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track-meta b{font-size:10px;font-weight:600}.track-meta span{font-size:9px;color:#858c9d;margin-top:5px}.icon-button{border:0;background:transparent;color:#858c9d;padding:6px;font-size:14px}.icon-button:hover{color:#d6c7ff}.favorite-button{margin-left:1px;font-size:17px}.player-controls{width:min(100%,440px);justify-self:center}.control-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}.control-row .icon-button{font-size:11px}.play-button{width:31px;height:31px;border:0;border-radius:50%;background:#eee8ff;color:#171320;font-size:11px;box-shadow:0 0 15px #c4a6ff45}.play-button:hover{transform:scale(1.05)}.timeline{display:flex;align-items:center;gap:9px;color:#747d8e;font:8px var(--mono)}input[type=range]{accent-color:#ad91f7;cursor:pointer}.timeline input{height:3px;flex:1}.player-extras{display:flex;align-items:center;justify-content:flex-end;gap:11px}.player-extras input{width:75px;height:3px}.volume-icon{color:#9ba2b1;font-size:14px}.player-bar audio{display:none}#video{display:none;position:fixed;right:18px;bottom:105px;width:min(440px,calc(100vw - 36px));max-height:45vh;background:#000;border:1px solid #373445;border-radius:10px;z-index:21;box-shadow:0 15px 70px #000b}#video.visible{display:block}.toast{position:fixed;bottom:104px;left:50%;transform:translate(-50%,12px);background:#222232;border:1px solid #45415a;color:#eee9ff;padding:10px 16px;border-radius:7px;font-size:10px;opacity:0;pointer-events:none;transition:.2s;z-index:40;box-shadow:0 10px 30px #0008}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.main-content{padding:0 30px 45px}.sidebar{width:218px}.main-content{margin-left:218px}.hero-art{right:-10%;transform:scale(.85)}.player-bar{grid-template-columns:minmax(190px,1fr) minmax(260px,1.15fr) minmax(125px,.7fr);padding:0 17px}.player-extras{gap:4px}.player-extras input{width:55px}.visual-toggle{display:none}}
@media(max-width:760px){.app-shell{padding-bottom:141px}.sidebar{transform:translateX(-100%);transition:transform .25s;width:258px;box-shadow:12px 0 40px #0008}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0;padding:0 21px 34px}.topbar{height:65px}.mobile-menu{display:block;border:0;background:none;color:#a9afbf;font-size:17px;padding:6px 8px 6px 0;margin-right:10px}.breadcrumbs{margin-right:auto;font-size:8px}.top-actions{gap:10px}.build-tag{display:none}.install-button{padding:8px 11px}.hero{height:330px;align-items:flex-start;padding-top:54px}.hero h1{font-size:43px}.hero-art{width:280px;height:215px;right:-49px;top:121px;opacity:.52;transform:scale(.85)}.planet{width:120px;height:120px}.planet:before{top:45px}.planet:after{top:60px}.planet-ring{inset:21px -34px}.orbit-one{width:220px;height:86px}.orbit-two{width:260px;height:115px}.orbit-three{width:185px;height:185px}.art-caption{display:none}.hero-copy>p{font-size:11px}.hero-actions{gap:13px}.primary-button{padding:10px 12px;font-size:10px}.text-button{font-size:9px}.section-heading{margin-top:29px}.section-heading h2{font-size:21px}.quiet-button{font-size:9px}.dropzone{padding:13px;gap:11px;min-height:75px}.drop-icon{width:33px;height:33px}.dropzone b{font-size:9px}.dropzone span{font-size:8px;max-width:205px;line-height:1.5}.small-outline{display:none}.recent-heading{margin-top:30px}.track-row{grid-template-columns:34px minmax(90px,1fr) 40px 25px;gap:9px;padding:9px 4px}.row-art{width:32px;height:32px}.row-album{display:none}.row-duration{font-size:8px}.row-info b{font-size:9px}.row-info span{font-size:8px}.page-intro{padding-top:48px}.page-intro h1{font-size:36px;letter-spacing:-1.8px}.visualizer-panel{height:275px}.player-bar{height:128px;grid-template-columns:1fr auto;padding:10px 17px 9px;gap:4px 12px;align-content:center}.now-playing{grid-column:1;grid-row:1}.player-controls{grid-column:1/-1;grid-row:2;width:100%;max-width:none}.player-extras{grid-column:2;grid-row:1}.player-extras input,.volume-icon,.player-extras .icon-button:first-child{display:none}.control-row{gap:19px;margin-bottom:6px}.timeline{gap:7px}.player-bar .mini-cover{width:36px;height:36px}.toast{bottom:140px}.footer-note{font-size:7px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.playlist-card{padding:11px;min-height:148px}.playlist-art{height:70px}}
@media(max-width:390px){.main-content{padding-left:15px;padding-right:15px}.hero h1{font-size:39px}.breadcrumbs span{display:none}.breadcrumbs i{display:none}.breadcrumbs b{font-size:9px}.hero-art{right:-68px}.control-row{gap:12px}.section-heading h2{font-size:19px}.dropzone span{max-width:180px}}
.visualizer-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.mode-button{border:1px solid #303344;background:#11141e;border-radius:6px;padding:9px 13px;color:#8991a4;font-size:10px}.mode-button:hover,.mode-button.active{border-color:#8670ce;color:#e5dcff;background:#1b1928}.visualizer-panel{margin-top:16px}.eq-toolbar{display:flex;align-items:center;gap:20px;padding:20px 2px 0;color:#9ba2b1;font-size:10px}.eq-enable,.eq-preset{display:flex;align-items:center;gap:8px}.eq-enable input{accent-color:#a68aff}.eq-preset select{background:#171a25;color:#e3ddf2;border:1px solid #35394a;border-radius:5px;padding:7px;font:10px var(--sans)}.eq-toolbar .quiet-button{margin-left:auto}.eq-preview{padding:24px 18px}.eq-sliders{height:auto;min-height:225px;display:flex;justify-content:space-around;gap:8px}.eq-band{flex:1;gap:10px;justify-content:flex-end}.eq-band input{appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;height:145px;width:24px;accent-color:#b69aff}.eq-band output{font:9px var(--mono);color:#d0bbff;min-height:12px}.eq-band b{font-size:8px}.eq-footer{border-top:1px solid #252936;margin-top:15px;padding-top:13px;display:flex;justify-content:space-between;font:9px var(--mono);color:#878fa1}.eq-footer span:first-child{color:#77d8bd}.install-dialog{width:min(440px,calc(100vw - 32px));border:1px solid #39334e;border-radius:13px;padding:26px;background:#11131e;color:var(--text);box-shadow:0 22px 90px #000c}.install-dialog::backdrop{background:#02030bcc;backdrop-filter:blur(4px)}.install-dialog h2{font-size:22px;letter-spacing:-.7px;margin:13px 0 9px}.install-dialog p{font-size:11px;line-height:1.7;color:#a4aabb}.install-dialog ol{padding-left:20px;margin:17px 0;color:#c1c5d0;font-size:10px;line-height:1.8}.install-dialog li{padding-left:3px;margin:5px 0}.install-dialog .primary-button{margin-top:6px}.install-dialog form{position:absolute;right:14px;top:12px}.dialog-close{border:0;background:none;color:#8c93a4;font-size:22px}.dialog-close:hover{color:#fff}
@media(max-width:760px){.eq-toolbar{gap:10px;flex-wrap:wrap}.eq-sliders{gap:2px;padding:0}.eq-band span{font-size:8px}.eq-band input{height:125px}.eq-band b{font-size:6px}.visualizer-modes{gap:6px}.mode-button{padding:8px 9px;font-size:9px}}