:root{--music-ink:#f4f0ff;--music-muted:#a29caf;--music-violet:#a17cff;--music-pink:#ff55b8;--music-lime:#d3ff4e;--music-cyan:#52e1d2}
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,'Segoe UI',Arial,sans-serif}
*::before,*::after{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:#0b0c12;scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:radial-gradient(ellipse at 4% 7%,#38205a55 0,transparent 29%),radial-gradient(ellipse at 99% 17%,#074c4a35 0,transparent 27%),radial-gradient(ellipse at 73% 100%,#54321f33 0,transparent 35%),linear-gradient(140deg,#0b0c12,#10111a 54%,#0b0c12);color:var(--music-ink);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--music-lime);outline-offset:3px}
.site-topbar{position:relative;top:auto;left:auto;z-index:3;transform:none;width:min(1080px,calc(100% - 48px));height:68px;margin:0 auto;border-bottom:1px solid #ffffff17}
.site-topbar .brand{display:flex;align-items:center;gap:9px;color:#f8f4ff;text-decoration:none;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.45px}
.site-topbar .brand-mark{width:48px;height:36px;display:block;flex:none;object-fit:contain}
.site-topbar .brand-period{color:var(--music-lime)}
.site-topbar .privacy-pill{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #d3ff4e35;border-radius:99px;background:#d3ff4e12;color:#d8ff78;font-size:8px;font-weight:800;letter-spacing:.8px}
.site-topbar .privacy-pill span{width:6px;height:6px;border-radius:50%;background:var(--music-lime);box-shadow:0 0 0 4px #d3ff4e17,0 0 12px #d3ff4e90}
.wrapper{width:min(380px,100%);margin:0 auto;padding:22px 25px 20px;overflow:hidden;position:relative;border:1px solid #ffffff1b;border-radius:18px;background:linear-gradient(145deg,#191a25f5,#14151df7);box-shadow:0 22px 65px #0008,0 1px 0 #ffffff09 inset;backdrop-filter:blur(16px)}
.wrapper:before{position:absolute;top:0;left:18%;width:64%;height:1px;background:linear-gradient(90deg,transparent,#d3ff4e75,#a17cff99,#52e1d275,transparent);content:''}
.wrapper i{cursor:pointer}
.top-bar,.progress-area .song-timer,.controls,.music-list .header,.music-list ul li{display:flex;align-items:center;justify-content:space-between}
.top-bar{height:24px}
.top-bar h2{display:grid;width:28px;height:28px;place-items:center;border:1px solid #ffffff12;border-radius:8px;background:#ffffff07;color:#a39bb2;font-size:17px;font-weight:500}
.top-bar span{margin:0;color:#e9e3f3;font-size:11px;font-weight:800;letter-spacing:1.4px}
.img-area{position:relative;width:100%;height:256px;overflow:hidden;margin-top:17px;border:1px solid #ffffff1b;border-radius:13px;background:radial-gradient(circle at 50% 50%,#a17cff16,transparent 65%),#101119;box-shadow:0 10px 28px #0005}
.img-area:after{position:absolute;inset:0;border:1px solid #ffffff09;border-radius:inherit;background:linear-gradient(145deg,#ffffff0a,transparent 35%,#0003);pointer-events:none;content:''}
.img-area img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease,filter .4s ease}
.wrapper.paused .img-area img{filter:saturate(1.05)}
.song-details{min-width:0;margin:17px 0 13px;text-align:center}
.song-details p{overflow:hidden;color:var(--music-ink);text-overflow:ellipsis;white-space:nowrap}
.song-details .name{font-size:16px;font-weight:750;letter-spacing:-.25px}
.song-details .artist{margin-top:4px;color:#a7a0b4;font-size:10px;line-height:1.5}
.progress-area{position:relative;width:100%;height:42px;border-radius:0;background:transparent;cursor:pointer;touch-action:pan-y}
.progress-area:before{position:absolute;top:4px;right:0;left:0;height:5px;border:1px solid #ffffff1c;border-radius:99px;background:#ffffff18;box-shadow:0 1px 3px #0005 inset;content:''}
.progress-area .progress-bar{position:absolute;top:4px;left:0;z-index:1;height:5px;width:0%;border-radius:99px;background:linear-gradient(90deg,#9b7bff 0%,#62c9ed 62%,#7ce0b1 100%);box-shadow:0 0 10px #8c7bff45;transition:width .12s linear}
.progress-bar:before{position:absolute;top:50%;right:-5px;z-index:2;width:11px;height:11px;transform:translateY(-50%);border:2px solid #181923;border-radius:50%;background:#c4f4df;box-shadow:0 0 0 1px #ffffffaa,0 1px 5px #0008;opacity:0;pointer-events:none;transition:opacity .2s;content:''}
.progress-area:hover .progress-bar:before,.progress-area:focus-within .progress-bar:before{opacity:1;pointer-events:auto}
.progress-area .song-timer{position:absolute;top:17px;left:0;width:100%;margin:0}
.song-timer span{color:#b5afc3;font-size:10px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;letter-spacing:.15px}
.controls{margin:13px 0 3px}
.controls i{color:#a8a0b8;font-size:20px;user-select:none;transition:color .16s,transform .16s}
.controls i:hover{transform:scale(1.1);color:var(--music-lime)}
.controls i:nth-child(2),.controls i:nth-child(4){color:#e5def0;font-size:32px}
.controls #prev{margin-right:-7px}.controls #next{margin-left:-7px}
.controls #repeat-plist,.controls #more-music{font-size:18px}
.controls #repeat-plist[title="Song looped"],.controls #repeat-plist[title="Playback shuffled"]{color:var(--music-lime)}
.controls #more-music{padding:6px;border:1px solid #a17cff26;border-radius:9px;background:#a17cff10;color:#c7b0ff}
.controls .play-pause{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff65;border-radius:50%;background:linear-gradient(130deg,#b95cff,#7653f0 55%,#37c9bb);box-shadow:0 7px 22px #874cff42;cursor:pointer;transition:transform .18s,box-shadow .18s}
.controls .play-pause:hover{transform:scale(1.06);box-shadow:0 9px 25px #874cff66}
.play-pause:before{position:absolute;inset:-5px;border:1px solid #a17cff28;border-radius:50%;content:''}
.play-pause i{position:relative;color:#fff;font-size:27px}
.music-list{position:absolute;right:0;bottom:-100%;left:0;z-index:5;width:100%;max-height:84%;padding:15px 22px 12px;overflow:hidden;border-top:1px solid #ffffff24;border-radius:15px 15px 0 0;background:linear-gradient(145deg,#1c1d29,#12131c);box-shadow:0 -12px 32px #0008;opacity:0;pointer-events:none;transition:bottom .22s ease,opacity .2s ease}
.music-list.show{bottom:0;opacity:1;pointer-events:auto}
.music-list .header{padding-bottom:10px;border-bottom:1px solid #ffffff13}
.header .row{display:flex;align-items:center;gap:8px;color:#f0ebf8;font-size:11px;font-weight:800;letter-spacing:.7px}
.header .row i{color:var(--music-lime);font-size:17px;cursor:default}
.header .row span{margin:0}
.playlist-count{margin-left:2px;padding:4px 6px;border:1px solid #a17cff2b;border-radius:6px;background:#a17cff12;color:#c9b2ff;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:7px;font-weight:800;letter-spacing:.4px}
.header #close{width:30px;height:30px;display:grid;place-items:center;border:1px solid #ffffff15;border-radius:8px;background:#ffffff07;color:#a49bb4;font-size:19px;cursor:pointer;transition:all .16s}.header #close:hover{border-color:#ff55b84a;background:#ff55b812;color:#ff82c9}
.playlist-search{height:36px;display:flex;align-items:center;gap:8px;margin:10px 0 7px;padding:0 9px;border:1px solid #ffffff16;border-radius:8px;background:#0e0f16;color:#8e879e}
.playlist-search>i{font-size:16px}.playlist-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f1edfa;font-size:9px}.playlist-search input::placeholder{color:#7f788f}.playlist-search kbd{flex:none;padding:2px 5px;border:1px solid #ffffff14;border-radius:4px;color:#827b90;font:9px Inter,'Segoe UI',Arial,sans-serif}
.playlist-search:focus-within{border-color:#a17cff75;box-shadow:0 0 0 3px #a17cff14}
.playlist-hint{display:flex;justify-content:space-between;margin:0 2px 3px;color:#777084;font-size:6px;font-weight:800;letter-spacing:.8px}
.music-list ul{max-height:250px;margin:8px 0 0;overflow:auto;scrollbar-color:#514563 transparent;scrollbar-width:thin}
.music-list ul::-webkit-scrollbar{width:4px}.music-list ul::-webkit-scrollbar-thumb{border-radius:8px;background:#514563}
.music-list ul li{gap:8px;padding:8px 5px;margin:0;border-bottom:1px solid #ffffff0d;border-radius:6px;color:#e5dfed;cursor:pointer;transition:background .15s,color .15s,opacity .15s,transform .15s}
.music-list ul li:hover{background:#ffffff08}.music-list ul li:last-child{border-bottom:0}
.music-list ul li[hidden]{display:none!important}.music-list ul li:focus-visible{outline:2px solid var(--music-lime);outline-offset:-2px}
.drag-handle{flex:none;color:#746c83;font-size:16px;cursor:grab;transition:color .15s}.music-list ul li:hover .drag-handle{color:#c2a7ff}.music-list ul li.is-dragging{transform:scale(.985);opacity:.35}.music-list ul li:active .drag-handle{cursor:grabbing}
.music-list ul li .row{min-width:0;flex:1}.music-list ul li .row span,.music-list ul li .row p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-list ul li .row span{font-size:10px;font-weight:650}.music-list ul li .row p{margin-top:2px;color:#9991a7;font-size:8px}
.music-list ul li .audio-duration{flex:none;color:#8f879d;font-size:8px;font-variant-numeric:tabular-nums}
.music-list ul li.playing{color:var(--music-lime)}.music-list ul li.playing .audio-duration{color:var(--music-lime)}
@media(max-width:520px){.site-topbar{width:calc(100% - 30px);height:61px}.site-topbar .brand{font-size:15px}.site-topbar .brand-mark{width:42px;height:33px}.site-topbar .privacy-pill{padding:7px 9px;font-size:7px}.wrapper{width:min(380px,100%);padding:18px 18px 17px;border-radius:16px}.img-area{height:min(66vw,256px);min-height:190px;margin-top:14px}.song-details{margin:14px 0 11px}.controls{margin-top:10px}}
@media(max-height:640px){.page-shell{padding-top:22px}.img-area{height:min(47vh,230px);min-height:155px}.song-details{margin:12px 0 8px}.controls{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}

.playback-status{min-height:1.2em;margin:0 0 6px;color:#ffb4a8;font-size:11px;line-height:1.5;text-align:center}
.playback-status:empty{display:none}