@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#f7f3fb;font-synthesis:none;text-rendering:optimizelegibility;font-smooth:always;font-optical-sizing:auto;--bg:#100d18;--panel:#191522;--panel2:#211b2b;--muted:#a49bad;--orange:#ff9a62;--pink:#e77b91;--purple:#a78bfa;background:#100d18;font-family:DM Sans,sans-serif;font-weight:400}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}.app-shell{background:#0b0910;grid-template-rows:minmax(0,1fr) 88px;grid-template-columns:250px minmax(0,1fr);gap:8px;height:100vh;min-height:560px;padding:8px;display:grid}.sidebar{background:#15111d;border:1px solid #292130;border-radius:14px;flex-direction:column;grid-area:1/1;min-height:0;padding:27px 17px 17px;display:flex;overflow:hidden}.brand{letter-spacing:-1.2px;align-items:center;gap:10px;padding:0 9px 35px;font:800 22px Manrope,sans-serif;display:flex}.brand-mark{color:#241525;background:linear-gradient(135deg,#ffb16f,#e87988 58%,#a58af4);border-radius:11px;place-items:center;width:34px;height:34px;display:grid}.brand-light{color:#f2b28e;font-weight:500}.main-nav{gap:7px;display:grid}.nav-item,.collection-item{color:#aaa1b4;text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:13px;padding:12px;font-size:14px;transition:all .2s;display:flex}.nav-item:hover,.collection-item:hover,.nav-item.active,.collection-item.active{color:#fff;background:#292132}.nav-item.active{box-shadow:inset 3px 0 #f69b72}.side-divider{background:#302737;height:1px;margin:24px 5px 18px}.library-heading{color:#8d8298;letter-spacing:1.6px;justify-content:space-between;align-items:center;padding:0 7px 10px;font-size:10px;font-weight:700;display:flex}.icon-button{color:#9e95a8;background:0 0;border:0;border-radius:7px;place-items:center;padding:6px;display:grid}.icon-button:hover{color:#fff;background:#ffffff12}.collection-item{gap:10px;padding:8px 9px;font-size:12px}.collection-art{border-radius:7px;flex-shrink:0;place-items:center;width:31px;height:31px;display:grid}.liked-art{color:#fff;background:linear-gradient(135deg,#e9a0b9,#9c78dd)}.recent-art{color:#fff;background:linear-gradient(135deg,#edaa68,#c66b5f)}.playlist-art{color:#d8c5eb;background:#30283a}.library-art{background:linear-gradient(135deg,#8f7ab5,#4b3c69)}.sidebar-bottom{color:#71677b;letter-spacing:1.4px;gap:12px;margin-top:auto;padding:15px 8px 0;font-size:9px;display:grid}.offline-note{letter-spacing:0;color:#a69bad;align-items:center;gap:8px;font-size:10px;display:flex}.status-dot,.eyebrow span{background:#8bd5a7;border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px #8bd5a777}.main-area{background:#15111d;border:1px solid #292130;border-radius:14px;flex-direction:column;grid-area:1/2;min-width:0;display:flex;overflow:hidden}.topbar{z-index:2;background:#17131e;flex-shrink:0;align-items:center;gap:17px;height:76px;padding:0 30px;display:flex;position:relative}.history-arrows{gap:8px;display:flex}.history-arrows button{color:#a59bab;background:#292330;border:0;border-radius:50%;place-items:center;width:29px;height:29px;display:grid}.top-search{color:#a99eaf;background:#292330;border-radius:30px;align-items:center;gap:10px;width:min(390px,45vw);height:42px;padding:0 16px;display:flex}.top-search:focus-within{outline:1px solid #bd8a9d}.top-search input{color:#fff;background:0 0;border:0;outline:0;width:100%;font-size:12px}.top-search input::placeholder{color:#a99eaf}.import-button,.primary-button,.secondary-button,.hero-button{border:0;border-radius:25px;justify-content:center;align-items:center;gap:8px;padding:11px 17px;font-size:12px;font-weight:700;transition:transform .2s,filter .2s;display:inline-flex}.import-button{color:#f4d8cb;background:#302739;margin-left:auto}.import-button:hover,.secondary-button:hover{background:#403248}.primary-button,.hero-button{color:#291a25;background:linear-gradient(105deg,#ffae70,#e87d89);box-shadow:0 5px 22px #e77b9125}.primary-button:hover,.hero-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.secondary-button{color:#eee5f1;background:#302739}.content-scroll{scrollbar-color:#42364b transparent;scrollbar-width:thin;flex:1;padding:0 30px 22px;overflow:auto}.hero{background:linear-gradient(112deg,#382437 0%,#573044 44%,#9a594e 100%);border-radius:13px;align-items:center;height:300px;min-height:270px;margin:10px 0 30px;padding:35px 43px;display:flex;position:relative;overflow:hidden}.hero:after{content:"";pointer-events:none;background:linear-gradient(90deg,#281d31 0%,#3a2639dd 43%,#0000 100%);position:absolute;inset:0}.hero-glow{filter:blur(65px);background:#ffb16c33;border-radius:50%;width:360px;height:360px;position:absolute;top:-130px;right:8%}.hero-content{z-index:1;max-width:460px;position:relative}.eyebrow{letter-spacing:2px;color:#d6a99f;align-items:center;gap:9px;font-size:9px;font-weight:700;display:flex}.hero .eyebrow span{background:#ffc28a;box-shadow:0 0 10px #ffc28a}.hero h1,.page-heading h1{letter-spacing:-2px;margin:17px 0 11px;font:800 clamp(32px,4vw,48px)/1.12 Manrope,sans-serif}.hero h1 em{color:#ffb27c;font-style:normal}.hero p{color:#e0cbd0;max-width:330px;margin:0 0 20px;font-size:12px;line-height:1.7}.hero-button{padding:12px 19px}.hero-art{z-index:1;place-items:center;width:350px;height:100%;display:grid;position:absolute;top:0;right:7%}.sun-orb{background:linear-gradient(145deg,#ffd18b,#f28a72 70%,#c96e86);border-radius:50%;width:185px;height:185px;position:absolute;top:38px;right:50px;box-shadow:0 0 75px #ffb47c66}.orbit{border:1px solid #fbd4c35c;border-radius:50%;position:absolute;transform:rotate(-28deg)}.orbit-one{width:320px;height:115px}.orbit-two{width:270px;height:180px;transform:rotate(48deg)}.hero-disc{color:#2d2034;filter:drop-shadow(0 12px 16px #24152b88);position:absolute;bottom:18px;right:100px;transform:rotate(-16deg)}.spark{color:#ffe1bc;font-size:25px;position:absolute}.spark-one{top:75px;right:30px}.spark-two{bottom:55px;left:35px}.hero-grain{opacity:.13;pointer-events:none;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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");position:absolute;inset:0}.section-heading{justify-content:space-between;align-items:end;margin:0 0 14px;display:flex}.section-heading h2{letter-spacing:-.5px;margin:5px 0 0;font:700 20px Manrope,sans-serif}.section-heading .eyebrow{color:#98869d;font-size:8px}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.quick-card{text-align:left;background:#211b2a;border:1px solid #302638;border-radius:9px;grid-template-rows:1fr 1fr;grid-template-columns:55px minmax(0,1fr);align-items:center;column-gap:12px;min-width:0;padding:10px;transition:all .2s;display:grid}.quick-card:hover{background:#302638;transform:translateY(-2px)}.quick-art{border-radius:7px;grid-row:span 2;place-items:center;width:55px;height:55px;display:grid}.quick-art svg{width:23px;height:23px}.quick-card strong{white-space:nowrap;text-overflow:ellipsis;align-self:end;font-size:11px;overflow:hidden}.quick-card>span:last-child{color:#a99eaf;align-self:start;margin-top:4px;font-size:10px}.music-section{margin-top:32px}.text-button{color:#a99eaf;background:0 0;border:0;font-size:10px;font-weight:700}.text-button:hover{color:#fff}.track-list{width:100%}.track-header,.track-row{grid-template-columns:35px minmax(180px,1.5fr) minmax(100px,1fr) 55px 85px;align-items:center;gap:10px;padding:0 12px;display:grid}.track-header{color:#8e8497;border-bottom:1px solid #342b3b;height:34px;font-size:10px}.track-header span:last-child{text-align:right}.track-header svg{vertical-align:middle}.track-row{color:#b9afc0;border-radius:7px;height:61px;font-size:11px}.track-row:hover{background:#ffffff0b}.track-row.selected{background:#ffffff0a}.row-play{color:#a99eaf;background:0 0;border:0;place-items:center;width:24px;height:30px;display:grid;position:relative}.row-number{font-size:11px}.hover-play,.track-row:hover .row-number,.track-row.selected .row-number{display:none}.track-row:hover .hover-play{display:block}.track-info{text-align:left;background:0 0;border:0;align-items:center;gap:11px;min-width:0;padding:0;display:flex}.mini-cover,.cover-art{color:#f5d2b6;background:linear-gradient(145deg,#5e3b58,#d28b70);border-radius:5px;flex-shrink:0;place-items:center;display:grid}.mini-cover{width:37px;height:37px}.track-copy{gap:4px;min-width:0;display:grid}.track-copy strong,.now-copy strong{color:#f5f0f7;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;overflow:hidden}.track-copy small,.now-copy span{color:#a79cad;white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.track-album,.track-duration{color:#a79cad;font-size:10px}.track-actions{opacity:0;justify-content:flex-end;align-items:center;gap:5px;display:flex}.track-row:hover .track-actions,.track-row.selected .track-actions{opacity:1}.liked{color:#f19aae!important}.more-wrap{position:relative}.context-menu{z-index:5;background:#302638;border:1px solid #4b3c50;border-radius:8px;min-width:180px;padding:6px;position:absolute;top:28px;right:0;box-shadow:0 10px 30px #0008}.context-menu[hidden]{display:none}.context-menu button{text-align:left;color:#eee;background:0 0;border:0;border-radius:5px;align-items:center;gap:7px;width:100%;padding:9px;font-size:10px;display:flex}.context-menu button:hover{background:#ffffff12}.danger-text{color:#f19aae!important}.empty-state{text-align:center;border:1px dashed #42364b;border-radius:12px;margin-top:10px;padding:48px 20px}.empty-icon{color:#e9a17f;background:#2b2232;border-radius:50%;place-items:center;width:58px;height:58px;margin:0 auto 13px;display:grid}.empty-state h3{margin:0 0 7px;font:700 16px Manrope}.empty-state p{color:#a99eaf;max-width:320px;margin:0 auto 17px;font-size:11px;line-height:1.6}.page-heading{padding:43px 0 25px}.page-heading h1{margin:9px 0;font-size:38px}.page-heading p,.search-hint{color:#a99eaf;font-size:11px}.library-toolbar{gap:9px;margin:0 0 20px;display:flex}.footer-note{text-align:center;color:#62586c;letter-spacing:2px;margin:35px 0 8px;font-size:8px}.footer-note span{color:#e99a79;padding:0 5px}.player{background:#17131e;border:1px solid #302638;border-radius:13px;grid-area:2/1/auto/3;grid-template-columns:minmax(180px,1fr) minmax(250px,1.2fr) minmax(150px,1fr);align-items:center;gap:20px;padding:0 20px;display:grid}.now-playing{align-items:center;gap:11px;min-width:0;display:flex}.cover-art{border-radius:6px;flex-shrink:0;width:49px;height:49px}.empty-cover{color:#c8a4a0;background:#2b2232}.now-copy{gap:5px;min-width:0;display:grid}.player-center{justify-self:center;gap:7px;width:100%;max-width:510px;display:grid}.player-controls{justify-content:center;align-items:center;gap:20px;display:flex}.control-button{color:#9f95a8;background:0 0;border:0;place-items:center;padding:5px;display:grid}.control-button:hover,.control-button.toggled{color:#f2a17b}.play-button{color:#211923;background:#f5eee9;border:0;border-radius:50%;place-items:center;width:34px;height:34px;transition:all .2s;display:grid}.play-button:hover{background:#ffb27c;transform:scale(1.06)}.progress-row{color:#918699;align-items:center;gap:9px;font-size:9px;display:flex}.progress-row input,.player-extra input{accent-color:#ed9a7a;cursor:pointer;width:100%;height:3px}.player-extra{justify-self:end;align-items:center;gap:9px;width:130px;display:flex}.player-extra input{max-width:90px}.modal-backdrop{z-index:20;background:#09070dbb;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#211b2a;border:1px solid #44364b;border-radius:15px;width:min(390px,100%);padding:30px;position:relative;box-shadow:0 20px 80px #0009}.modal-close{position:absolute;top:14px;right:14px}.modal-icon{color:#281c2c;background:linear-gradient(135deg,#eaa36f,#bd7794);border-radius:12px;place-items:center;width:43px;height:43px;margin-bottom:20px;display:grid}.modal h2{margin:8px 0;font:700 23px Manrope}.modal p{color:#a99eaf;font-size:11px}.modal>input{color:#fff;background:#17131e;border:1px solid #55445b;border-radius:7px;outline:0;width:100%;margin:12px 0 18px;padding:12px 13px;font-size:12px}.modal>input:focus{border-color:#e99a79}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.mobile-menu,.mobile-close{display:none}@media (width<=900px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:22px 12px}.hero-art{opacity:.8;right:-5%}.content-scroll{padding:0 22px 20px}.topbar{padding:0 22px}.quick-grid{grid-template-columns:1fr 1fr}.quick-card:last-child{display:none}.player{grid-template-columns:minmax(130px,1fr) minmax(220px,1.3fr) minmax(100px,.7fr);gap:10px;padding:0 13px}.player-extra{width:100px}}@media (width<=650px){.app-shell{flex-direction:column;gap:0;height:100dvh;min-height:0;padding:0;display:flex}.sidebar{z-index:15;border-radius:0 14px 14px 0;width:min(290px,84vw);transition:transform .25s;position:fixed;inset:0 auto 0 0;transform:translate(-105%);box-shadow:15px 0 45px #0008}.sidebar.mobile-open{transform:translate(0)}.mobile-close,.mobile-menu{display:grid}.brand{padding-bottom:27px}.main-area{border:0;border-radius:0;flex:1;min-height:0}.topbar{gap:10px;height:64px;padding:0 14px}.mobile-menu{color:#b6aabd}.history-arrows{display:none}.top-search{flex:1;width:auto;height:39px}.import-button{padding:10px 12px}.import-button span{display:none}.content-scroll{padding:0 15px 18px}.hero{height:275px;min-height:275px;margin:8px 0 24px;padding:25px 23px}.hero-content{max-width:75%}.hero h1{font-size:34px}.hero p{max-width:230px;font-size:10px}.hero-art{opacity:.55;right:-135px}.hero:after{background:linear-gradient(90deg,#281d31 0%,#3a2639ed 55%,#3a263955 100%)}.quick-grid{grid-template-columns:1fr 1fr;gap:8px}.quick-card{grid-template-columns:43px minmax(0,1fr);column-gap:8px;padding:8px}.quick-art{width:43px;height:43px}.quick-card strong{font-size:10px}.quick-card>span:last-child{font-size:9px}.section-heading h2{font-size:17px}.track-header,.track-row{grid-template-columns:24px minmax(120px,1fr) 42px;gap:7px;padding:0 5px}.album-col,.track-duration{display:none}.track-actions{opacity:1;gap:0}.track-row{height:58px}.track-info{gap:8px}.mini-cover{width:34px;height:34px}.track-copy strong{max-width:145px}.page-heading{padding:34px 0 20px}.page-heading h1{font-size:32px}.player{border-bottom:0;border-left:0;border-right:0;border-radius:0;flex-shrink:0;grid-template-columns:minmax(0,1fr) auto;gap:8px;height:78px;padding:0 12px}.cover-art{width:42px;height:42px}.now-copy strong{max-width:130px;font-size:10px}.now-copy span{max-width:130px;font-size:9px}.now-playing>.icon-button{display:none}.player-center{grid-area:1/2;gap:3px;width:auto}.player-controls{gap:8px}.player-controls .control-button:first-child,.player-controls .control-button:last-child{display:none}.play-button{width:32px;height:32px}.progress-row{gap:5px;width:145px;font-size:8px}.player-extra{display:none}.footer-note{margin-top:25px;font-size:7px}.library-toolbar{flex-wrap:wrap}.modal{padding:25px}.search-hint{margin-bottom:16px}}@media (width<=380px){.hero h1{font-size:30px}.hero-content{max-width:85%}.quick-grid{grid-template-columns:1fr}.quick-card:last-child{display:grid}.player{grid-template-columns:minmax(0,1fr) auto}.progress-row{width:125px}.now-copy{max-width:110px}}.online-track-info{color:inherit;min-width:0;text-decoration:none}.online-track-info:hover strong{color:var(--accent,#ff9b54)}.online-track-info .mini-cover{overflow:hidden}.online-track-info .mini-cover img{object-fit:cover;width:100%;height:100%}.online-search .empty-state{min-height:180px}.online-search .search-hint{align-items:center;gap:8px;display:flex}.spin{animation:1s linear infinite sunset-spin}@keyframes sunset-spin{to{transform:rotate(360deg)}}
