@import url('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-scheme:dark;--bg:#0b0c16;--panel:#131522;--line:#242636;--muted:#9293aa;--accent:#b4a0ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f3f0ff;font-family:'DM Sans',sans-serif;font-size:14px}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;border-radius:9px}button:hover{background:#ffffff0c}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}small{color:var(--muted);font-size:11px}aside{position:fixed;width:235px;inset:0 auto 88px 0;border-right:1px solid var(--line);padding:35px 23px;background:#0e0f1b;display:flex;flex-direction:column}.brand{font:800 24px Manrope;letter-spacing:-1px;white-space:nowrap}.mark{color:var(--accent);margin-right:8px;font-size:30px}.dot{color:var(--accent)}aside>small{font-size:8px;letter-spacing:2px;margin:13px 0 35px}nav{display:grid;gap:7px}nav button, .aside-bottom>button{display:flex;align-items:center;gap:14px;text-align:left;padding:13px 16px;color:var(--muted)}nav button.active{background:#29233f;color:#d0c1ff}nav i{font-size:10px;font-style:normal;margin-left:auto;background:#44365e;padding:2px 6px;border-radius:5px}.side-label{border-top:1px solid var(--line);padding-top:25px;margin-top:23px;font-size:9px;letter-spacing:1.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}.side-label button{font-size:22px}#sidePlaylists button{display:block;color:var(--muted);margin-top:14px;font-size:12px}.aside-bottom{margin-top:auto}.aside-bottom>button{font-size:12px;width:100%;padding-left:5px}.profile{border-top:1px solid var(--line);padding-top:19px;margin-top:14px;display:flex;gap:12px;align-items:center}.profile b,.avatar{border-radius:50%;background:#33304e;padding:10px 14px;color:#d6caff}.profile small{display:block;margin-top:3px}.profile>span{margin-left:auto}.shell{margin-left:235px;padding-bottom:105px}header{height:100px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;gap:20px}header>div{display:flex;align-items:center;gap:25px}.search{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:24px}.search input{width:270px;background:none;border:0;font:12px 'DM Sans';color:white;outline:none}.private-badge{color:#b1a7c9;font-size:11px}.primary{background:#b9a4fc;color:#191227;padding:12px 18px;font-weight:700;font-size:12px}.primary:hover{background:#d0bfff}main{padding:10px 44px 25px;max-width:1500px;margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:9px;color:#b5a2db;font-weight:700}h1{font:700 32px Manrope;letter-spacing:-1.2px;margin:8px 0 9px}p{color:var(--muted);line-height:1.7}.intro{margin-bottom:28px}.intro p{margin:0;font-size:13px}.hero{position:relative;overflow:hidden;border:1px solid #3c3555;border-radius:17px;padding:35px 34px;background:linear-gradient(110deg,#29223e,#141a31);min-height:236px;display:flex;align-items:center;margin-bottom:34px}.hero h2{font:600 38px Manrope;letter-spacing:-1.4px;margin:13px 0 8px}.hero p{font-size:12px;margin:0 0 23px;color:#b4acc8}.hero .eyebrow{color:#c1afd7}.hero-text{position:relative;z-index:1}.hero-art{position:absolute;right:5%;width:245px;height:245px;border-radius:50%;background:repeating-radial-gradient(circle,#141221 0 2px,#282439 3px 4px);box-shadow:0 0 90px #8b61a740;transform:rotate(-20deg)}.hero-art:after{content:'';position:absolute;inset:75px;border-radius:50%;background:radial-gradient(circle,#0d0e1b 0 8%,#b48fcb 9%,#666097 75%)}.hero-art:before{content:'';position:absolute;inset:-20px 115px;background:#9994ce25;filter:blur(18px);transform:rotate(40deg)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:30px 0 18px}.section-head h2{font:600 18px Manrope;margin:0;letter-spacing:-.3px}.section-head button{color:var(--muted);font-size:11px}.albums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.album{text-align:left;padding:0;min-width:0}.cover{aspect-ratio:1;position:relative;overflow:hidden;border-radius:11px;background:#262442;display:grid;place-items:center}.cover:before,.cover:after{content:'';position:absolute}.cover.a{background:radial-gradient(ellipse at 58% 22%,#747295,transparent 50%),linear-gradient(150deg,#3b3556,#181c36 65%)}.cover.a:before{width:90%;height:65%;background:linear-gradient(150deg,#707a9b,#222942);transform:rotate(-23deg);bottom:-30%;border-radius:40%;box-shadow:0 -20px 55px #b8c1e129}.cover.b{background:radial-gradient(ellipse at 50% 90%,#836baa,#222039 60%)}.cover.b:before{inset:13% 31%;border:1px solid #bbb1c65c;border-radius:50% 50% 0 0;box-shadow:12px 0 0 #71628a30,24px 0 0 #71628a30}.cover.c{background:radial-gradient(ellipse at 70% 25%,#a86d86,#453553 45%,#182033)}.cover.c:before{inset:50% -30% -10%;background:#1b2035;transform:rotate(-20deg);box-shadow:0 -20px 0 #3e365450,0 -40px 0 #45334d50}.cover.d{background:radial-gradient(ellipse at 50% 45%,#4b7090,#16293e 45%,#0c192a)}.cover.d:before{inset:10%;border:1px solid #84a2b63a;border-radius:50%;box-shadow:0 0 0 20px #7aa5be10,0 0 0 40px #7aa5be08}.cover span{z-index:1;letter-spacing:4px;font:400 10px Manrope;text-transform:uppercase;color:#e9e4f2c0;text-align:center}.album strong{display:block;margin:13px 0 5px;font-size:13px;font-weight:500}.album small{font-size:11px}.lower{display:grid;grid-template-columns:1.6fr 1fr;gap:35px}.track{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid #ffffff06}.track .cover{width:43px;flex-shrink:0;border-radius:7px}.track .cover span{display:none}.track-title{text-align:left;padding:0;flex:1}.track-title strong{font-size:12px;font-weight:500;display:block}.track-title small{display:block;margin-top:5px;font-size:10px}.track>small{font-size:10px}.track>button:last-child{color:var(--muted)}.note-card{background:#141623;padding:19px;border:1px solid var(--line);border-radius:12px}.note-card p{font-size:12px}.note-card small{font-size:10px}.note-card .eyebrow{font-size:8px}.chip{font-size:10px;padding:5px 9px;border-radius:5px;background:#29233c;color:#cbb6ff}.demo-note{text-align:center;color:#75758d;font-size:9px;letter-spacing:.7px;margin:20px}#mini{position:fixed;bottom:0;left:0;right:0;height:88px;background:#141521f5;backdrop-filter:blur(20px);border-top:1px solid #303043;display:flex;align-items:center;padding:15px 27px;gap:17px;z-index:5}#mini>.cover{width:52px;flex-shrink:0}#mini .track-title{max-width:210px}.transport{margin:auto;width:40%;text-align:center}.transport>div:first-child{display:flex;align-items:center;justify-content:center;gap:24px}.play{border-radius:50%;background:#e4dcf5;color:#201c2f;width:33px;height:33px;font-size:12px}.seek{display:flex;align-items:center;gap:9px;margin-top:8px}.seek small{font-size:9px}.seek input{width:100%;height:3px;accent-color:var(--accent)}.player-tail{color:var(--muted);display:flex;align-items:center;gap:20px;font-size:12px}.mobile-nav,.mobile-brand{display:none}.tabs{display:flex;gap:8px;margin:25px 0;flex-wrap:wrap}.tabs button{padding:9px 16px;border:1px solid var(--line);color:var(--muted);font-size:12px}.tabs button.selected{background:#d9cef4;color:#211b31}.panel{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:25px;margin-top:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label.field{display:grid;gap:9px;font-size:12px;color:#cac4d9;margin-bottom:18px}input,select,textarea{background:#0d0f1c;border:1px solid #333146;border-radius:8px;padding:12px;color:#eee;font:inherit;max-width:100%}textarea{resize:vertical;min-height:90px;width:100%}.dropzone{border:1px dashed #65517f;border-radius:12px;text-align:center;padding:30px;margin:0 0 24px;background:#26203755}.dropzone b{font-size:30px;color:var(--accent)}.dropzone p{font-size:12px}.setting{display:flex;align-items:center;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}.setting>div{flex:1}.setting small{display:block;margin-top:7px}.setting input[type=checkbox]{width:35px;height:20px;accent-color:var(--accent)}dialog{background:#121321;border:1px solid #3a3450;color:white;border-radius:19px;padding:30px;width:min(550px,94vw);max-height:90vh}dialog::backdrop{background:#050610b8;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{margin:0;font:600 21px Manrope}.big-cover{width:190px;margin:0 auto 22px}.song-heading{text-align:center}.wave{display:flex;height:55px;align-items:center;gap:3px;margin:20px 0}.wave i{flex:1;border-radius:2px;background:#6a578d}.comment{padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}.comment p{color:#ccc5de;font-size:12px;margin:9px 0}.comment small{font-size:10px}.comment button{font-size:10px;color:var(--accent)}.composer{display:flex;gap:8px;margin-top:17px}.composer input{flex:1;min-width:0;font-size:12px}.privacy{display:block;margin-top:10px;color:var(--muted);font-size:10px}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#d9ccf1;color:#21182f;padding:12px 20px;border-radius:10px;z-index:20;font-size:12px;display:none}.empty{text-align:center;padding:50px 20px}.empty b{font-size:30px;color:var(--accent)}.empty p{font-size:13px}@media(min-width:1450px){main{padding-top:30px}.hero{min-height:270px}.hero-art{right:10%;width:280px;height:280px}.hero-art:after{inset:85px}}@media(max-width:1050px){aside{width:195px;padding:30px 15px}.shell{margin-left:195px}main{padding:10px 25px}header{padding:0 25px}.private-badge{display:none}.albums{gap:14px}.hero-art{right:-45px;opacity:.6}.lower{grid-template-columns:1fr}.player-tail{display:none}.transport{width:45%}}@media(max-width:700px){aside{display:none}.shell{margin:0;padding-bottom:155px}header{padding:18px 22px;height:auto;flex-wrap:wrap}.mobile-brand{display:block;font:800 22px Manrope}.search{order:3;width:100%;background:#151624;padding:8px 12px;border-radius:9px;margin-top:12px}.search input{width:100%}header .primary{font-size:10px;padding:10px}.private-badge{display:none}main{padding:10px 22px}h1{font-size:27px}.intro{margin-bottom:23px}.hero{padding:25px 22px;min-height:228px}.hero h2{font-size:30px}.hero-art{width:210px;height:210px;right:-90px;opacity:.4}.hero-art:after{inset:65px}.hero p{max-width:210px}.albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.lower{gap:0}.section-head{margin-top:29px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;background:#10111d;border-top:1px solid var(--line);justify-content:space-around;z-index:6;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{display:flex;flex-direction:column;gap:3px;align-items:center;padding:8px 20px;font-size:20px}.mobile-nav button span{font-size:9px}.mobile-nav button.active{background:none;color:var(--accent)}#mini{bottom:64px;height:68px;padding:10px 17px;gap:11px}#mini>.cover{width:43px}#mini .track-title{max-width:none}#mini .transport{width:auto;margin:0}#mini .transport>div:first-child{gap:10px}#mini .transport>div:first-child>button:not(.play){display:none}#mini .seek,#mini>.heart{display:none}.form-grid{grid-template-columns:1fr}.panel{padding:18px}#toast{bottom:145px;width:85%}.demo-note{line-height:1.8}dialog{padding:22px}.big-cover{width:140px}}