:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:#111114;color:#f7f6f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d6bbff;outline-offset:3px}button{border:0}a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh;padding-bottom:100px}.sidebar{width:224px;position:fixed;top:0;bottom:100px;background:#161619;border-right:1px solid #29292d;padding:31px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-1.4px;padding:0 7px}.brand-light{font-weight:400}.brand small{display:block;letter-spacing:1.7px;font-size:7px;font-weight:700;color:#908c99;margin-top:1px}.mark{display:grid;place-items:center;width:35px;height:35px;background:#cdb6f5;color:#17121e;border-radius:11px;font:italic 800 26px Georgia}.sidebar nav{display:grid;gap:5px;margin-top:58px}.nav{background:none;color:#99969f;border-radius:10px;text-align:left;padding:12px;font-weight:600}.nav span{display:inline-block;font-size:22px;width:36px;vertical-align:middle}.nav.active,.nav:hover{background:#29272e;color:#fff}.sidebar-note{margin-top:auto;padding:18px 12px;color:#8f8998;font-size:13px;line-height:1.7}.studio{border-top:1px solid #333037;padding:21px 12px;color:#bdb8c1;font-size:13px}.studio span{float:right}.workspace{width:calc(100% - 224px);margin-left:224px}header{height:91px;display:flex;align-items:center;gap:20px;padding:0 5%;position:sticky;top:0;background:#111114ee;backdrop-filter:blur(12px);z-index:3}.search-wrap{height:48px;width:min(550px,100%);display:flex;align-items:center;background:#242428;border:1px solid #323238;border-radius:9px;padding:0 15px;color:#aaa;gap:12px}.search-wrap span{font-size:24px}.search-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:white;font-size:14px}.search-wrap kbd{color:#777;border:1px solid #555;border-radius:4px;padding:1px 6px}.account{margin-left:auto;width:42px;height:42px;background:#d8c1ed;color:#3b2946;border-radius:50%;font-size:21px}.mobile-brand{display:none}main{max-width:1540px;margin:auto;padding:18px 5% 65px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:#b9a5cc}.headline{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:25px}.headline h1{font-size:clamp(32px,4vw,49px);letter-spacing:-1.8px;line-height:1.05;margin:10px 0}.headline p,.muted{color:#aaa6af}.hero{background:linear-gradient(120deg,#382442,#241d2f 62%,#18181c);border:1px solid #4e3b58;border-radius:17px;padding:36px;min-height:190px;margin-bottom:38px;position:relative;overflow:hidden}.hero:after{content:'♫';position:absolute;right:9%;top:-42px;font-size:210px;color:#ffffff0a;transform:rotate(-15deg)}.hero h2{font-size:30px;letter-spacing:-.8px;margin:12px 0}.hero p{max-width:500px;color:#d0c3d6;margin-bottom:0;line-height:1.6}.section{margin:37px 0}.section h2{font-size:23px;letter-spacing:-.5px;margin:0 0 5px}.section-intro{margin:0 0 20px;color:#8e8994;font-size:13px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px}.card{border-radius:11px;min-width:0;cursor:pointer}.card:hover .cover:after{opacity:1}.cover{background:linear-gradient(145deg,#493853,#25202b);aspect-ratio:1;position:relative;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#d4bce7;font-size:38px}.cover img{width:100%;height:100%;object-fit:cover}.cover:after{content:'▶';position:absolute;bottom:10px;right:10px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#d9c1f3;color:#1b1422;font-size:15px;opacity:0;transition:opacity .2s}.card strong,.card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card strong{font-size:14px;margin-top:11px}.card small{font-size:12px;color:#96919c;margin-top:5px}.song-list{display:grid}.song{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:9px 8px;border-bottom:1px solid #29282d;border-radius:8px;cursor:pointer}.song:hover{background:#252328}.song-art{height:38px;border-radius:6px;overflow:hidden;background:#382c43;display:grid;place-items:center}.song-art img{width:100%;height:100%;object-fit:cover}.song strong,.song small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song strong{font-size:14px}.song small{font-size:12px;margin-top:4px;color:#99949e}.song .time{font-size:12px;color:#96919c}.empty{color:#aaa4b0;padding:22px 0;line-height:1.6}.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:30px;background:#d6b9f3;color:#25192b;font-weight:750}.secondary{border:1px solid #55505a;color:#eee;background:transparent;padding:10px 16px;border-radius:25px}.player{height:100px;position:fixed;bottom:0;left:0;right:0;background:#1b1a1e;border-top:1px solid #38343b;display:grid;grid-template-columns:1fr minmax(300px,1fr) 1fr;align-items:center;gap:15px;padding:10px 22px;z-index:5}.now{display:flex;align-items:center;gap:12px;min-width:0}.now-art{height:55px;width:55px;flex-shrink:0;border-radius:7px;display:grid;place-items:center;background:#39303f}.now-art img{width:100%;height:100%;object-fit:cover;border-radius:7px}.now strong,.now span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.now strong{font-size:13px}.now span{font-size:12px;color:#aaa;margin-top:5px}.icon{background:transparent;color:#d2ced4;font-size:21px;min-width:38px;height:38px;border-radius:50%}.icon:hover{background:#343137}.icon.on{color:#d6b9f3}.icon:disabled{opacity:.35}.like{margin-left:8px}.controls-row{display:flex;align-items:center;justify-content:center;gap:13px}.play{width:39px;height:39px;border-radius:50%;background:#ece9ed;color:#161419;font-size:17px}.progress{display:flex;align-items:center;gap:10px;color:#aaa;font-size:10px;margin-top:3px}input[type=range]{accent-color:#dfc1f3;height:4px;cursor:pointer}.progress input{flex:1}.extras{display:flex;justify-content:flex-end;align-items:center;gap:9px}.extras input{width:90px}dialog{background:#242128;border:1px solid #48404e;color:#f7f5f8;border-radius:16px;width:min(440px,calc(100vw - 32px));padding:27px;box-shadow:0 20px 100px #000a}dialog::backdrop{background:#000b}dialog h2{font-size:25px;letter-spacing:-.5px}dialog p{color:#aaa3af;line-height:1.5}dialog label{display:block;font-size:13px;color:#c9c4cc;margin:17px 0}dialog label input{display:block;width:100%;margin-top:8px;background:#18171b;border:1px solid #4e4853;border-radius:8px;color:white;padding:12px}.close{float:right;background:none;color:#bbb;font-size:26px}.form-error{color:#ffb6ad;min-height:1em;font-size:13px}.small{font-size:12px}.dialog-head{display:flex;justify-content:space-between}.loading{color:#aaa;padding-top:40px}#notice{position:fixed;bottom:115px;left:50%;transform:translateX(-50%);background:#f4ecfa;color:#2c2031;border-radius:8px;padding:10px 16px;z-index:10;display:none;font-size:13px}#notice.visible{display:block}.back{background:transparent;color:#cdb6f5;padding:8px 0;font-weight:650}.detail-header{display:flex;align-items:end;gap:25px;margin:16px 0 30px}.detail-art{width:200px;flex-shrink:0}.detail-header h1{font-size:38px;margin:10px 0}.detail-actions{display:flex;gap:10px;margin-top:18px}@media(max-width:760px){.sidebar{top:auto;bottom:0;width:100%;height:65px;z-index:7;padding:0;border:0;border-top:1px solid #353238}.sidebar .brand,.sidebar-note,.studio{display:none}.sidebar nav{display:flex;justify-content:space-around;margin:0;height:100%}.nav{text-align:center;font-size:10px;padding:5px 25px}.nav span{display:block;width:auto;font-size:20px}.workspace{width:100%;margin:0}header{height:78px;padding:0 18px}.mobile-brand{display:flex;align-items:center;font-weight:750;letter-spacing:-1px}.mobile-brand span:last-child{font-weight:400}.mobile-brand .mark{width:28px;height:28px;font-size:22px;margin-right:6px}.search-wrap{flex:1;height:42px}.search-wrap kbd{display:none}main{padding:10px 18px 90px}.hero{padding:25px;min-height:160px}.hero h2{font-size:25px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.player{bottom:65px;height:68px;grid-template-columns:1fr auto;gap:5px;padding:7px 14px}.now-art{height:46px;width:46px}.now .like,.extras,.progress,.controls-row #prev,.controls-row #next,.controls-row #shuffle,.controls-row #repeat{display:none}.controls-row{gap:0}.play{width:40px;height:40px}.detail-art{width:110px}.detail-header h1{font-size:27px}.detail-header{gap:15px}.app{padding-bottom:130px}}

.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.auth-links button{background:none;color:#d6bbef;padding:0;font-size:13px}.auth-links button:hover{text-decoration:underline}

.full-player{max-height:90vh;overflow:auto}.full-art{width:min(100%,300px);aspect-ratio:1;margin:28px auto;background:#382d40;border-radius:14px;display:grid;place-items:center;font-size:55px}.full-art img{width:100%;height:100%;object-fit:cover;border-radius:14px}.full-player h2{margin-bottom:2px}.full-player p{margin-top:5px}.full-controls{justify-content:space-between;margin:30px 0}.full-controls .icon{font-size:26px}.full-controls .play{width:58px;height:58px}.full-actions{display:flex;justify-content:space-between}.now{cursor:pointer}

.profile-row{display:flex;width:100%;gap:14px;align-items:center;padding:15px 5px;color:#f5f2f6;text-align:left;background:none;border-bottom:1px solid #3f3943}.profile-row:hover{color:#dfc5f5}.profile-row span:first-child{font-size:21px;width:28px;color:#cdb6e2}.profile-row span:last-child{margin-left:auto}.profile-back{padding:8px 0;background:none;color:#d6bbef}.profile-select{width:100%;padding:12px;background:#18171b;color:#f7f5f8;border:1px solid #4e4853;border-radius:8px}

.full-actions{gap:8px;flex-wrap:wrap}.full-actions .secondary{font-size:12px}.playlist-list{margin-top:20px}

.playlist-edit-row{cursor:default;grid-template-columns:38px minmax(0,1fr) auto}.playlist-edit-row:hover{background:transparent}.playlist-edit-controls{display:flex;align-items:center}.playlist-edit-controls .icon{font-size:20px}.playlist-song-label{cursor:pointer}.playlist-song-label:focus-visible{outline:2px solid #d6bbff}

.demo-login{display:block;width:100%;margin-top:12px}.demo-login[hidden]{display:none}
