:root{font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#fff;background:#080808;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.18)}input[type=range]{accent-color:#1ed760;height:4px;cursor:pointer}.sidebar{position:fixed;left:0;top:0;bottom:100px;width:250px;background:#080808;padding:30px 20px;display:flex;flex-direction:column}.brand{color:#fff;text-decoration:none;font-size:25px;font-weight:800;letter-spacing:-1.2px;display:flex;align-items:center;gap:8px}.brand-icon{background:#1ed760;border-radius:50%;color:#092b15;font-size:32px;line-height:30px;width:31px;text-align:center}.side-heading{margin:43px 4px 18px;color:#aaa;font-size:14px;font-weight:700;display:flex;justify-content:space-between}#playlistForm{display:flex;gap:6px;margin-bottom:20px}#playlistName{width:100%;min-width:0;background:#1b1b1b;border:1px solid #333;border-radius:5px;padding:10px 8px;font-size:11px;color:white}#playlistForm button{background:#242424;border-radius:5px;font-size:20px;padding:4px 10px}#playlists{overflow:auto;flex:1}.playlist-button{width:100%;display:flex;align-items:center;gap:11px;padding:12px 9px;background:none;text-align:left;border-radius:6px;margin-bottom:4px}.playlist-button.selected{background:#242424}.playlist-icon{width:40px;height:40px;background:linear-gradient(135deg,#27634d,#162d37);display:grid;place-items:center;font-size:23px;flex-shrink:0}.playlist-button .name{display:block;font-size:13px;max-width:139px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-button small{display:block;color:#909090;margin-top:7px;font-size:10px}.playlist-button.selected .name{color:#1ed760}.side-note{margin-top:22px;font-size:11px;color:#c1c1c1;line-height:1.8}.side-note small{color:#777;font-size:10px}.privacy-dot{display:inline-block;width:6px;height:6px;background:#1ed760;border-radius:50%;margin-right:5px}main{margin:8px 8px 110px 250px;min-height:calc(100vh - 118px);background:#121212;border-radius:9px;overflow:hidden}header{height:65px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#213b31}.breadcrumb{color:#c6d6cd;font-size:12px}.breadcrumb span{padding:0 12px;color:#879e91}.local-badge{font-size:10px;border-radius:30px;background:#14291e;color:#96e0ae;padding:8px 12px}.hero{background:linear-gradient(#294c3b,#233c30);padding:30px 32px 34px;display:flex;align-items:flex-end;gap:28px}.cover{width:175px;height:175px;flex-shrink:0;background:linear-gradient(135deg,#9bedb5,#39ad76 50%,#187450);box-shadow:0 12px 32px #0004;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#133d2b}.cover>span{font-size:110px;line-height:1;font-weight:700;transform:rotate(-15deg)}.cover>div{font-size:9px;letter-spacing:3px;font-weight:700;margin-top:12px}.hero-copy{min-width:0}.hero-copy>p:first-child{font-size:12px;font-weight:700;margin:0 0 12px}h1{font-size:clamp(30px,4.1vw,62px);line-height:1.1;letter-spacing:-2px;margin:0 0 20px;overflow-wrap:anywhere}.description{font-size:12px;color:#b4c5b9;margin:0 0 20px}.playlist-info{display:flex;gap:16px;font-size:11px;color:#d3ddd6;flex-wrap:wrap}.playlist-info strong{color:#fff}.content{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:28px;padding:26px 30px}.queue{min-width:0}.queue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.queue-toolbar>div{display:flex;align-items:center;gap:17px}.big-play{width:51px;height:51px;border-radius:50%;background:#1ed760;color:#071b0e;font-size:22px;padding-left:6px}.primary{background:none;border:1px solid #5b5b5b;border-radius:30px;padding:10px 15px;font-size:11px;font-weight:700;white-space:nowrap}.search{display:flex;align-items:center;gap:6px;max-width:180px;color:#bbb}.search>span{font-size:24px}.search input{background:#202020;border:0;border-radius:5px;padding:9px 8px;width:100%;min-width:0;font-size:10px;color:#ddd}.table-heading,.track{display:grid;grid-template-columns:22px minmax(0,1fr) 44px 85px;gap:10px;align-items:center}.table-heading{font-size:10px;color:#909090;border-bottom:1px solid #333;padding:0 8px 12px}.track{padding:12px 8px;border-radius:4px;min-height:63px}.track:hover{background:#242424}.track.active{background:#1c2b20;color:#1ed760}.track-number{font-size:11px;color:#888}.track.active .track-number{color:#1ed760}.select{background:none;text-align:left;min-width:0;padding:0;display:flex;align-items:center;gap:11px;color:inherit}.track-art{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(140deg,#3d6572,#324033);color:#c0d3cc;font-size:18px}.track:nth-child(3n) .track-art{background:linear-gradient(140deg,#825d64,#49375b)}.track-copy{min-width:0}.track-name{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-copy small{display:block;font-size:10px;color:#888;margin-top:6px}.type{font-size:9px;color:#929292}.row-actions{display:flex;gap:2px}.row-actions button{background:none;color:#a6a6a6;padding:5px;font-size:13px}.row-actions button:hover{color:#fff}#empty{text-align:center;padding:48px 8px 55px}.empty-icon{font-size:39px;color:#1ed760}h2{font-size:14px;margin:0}#empty h2{font-size:17px;margin:20px 0 12px}#empty p{font-size:11px;line-height:1.9;color:#999}.outline{border-radius:30px;background:#fff;color:#151515;font-weight:700;font-size:11px;padding:12px 20px;margin-top:12px}.queue-footer{display:flex;justify-content:space-between;border-top:1px solid #292929;padding-top:18px;font-size:10px;color:#6d6d6d;gap:12px}#noResults{font-size:13px;color:#aaa;padding:30px 8px}.right-panel{min-width:0}.now-playing,.settings{background:#1b1b1b;border-radius:8px;padding:17px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}.section-title h2{font-size:12px}.section-title>span{font-size:9px;color:#929292}.stage{height:170px;background:#263f34;position:relative;overflow:hidden;border-radius:5px;isolation:isolate}.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080808;opacity:0;z-index:2}.art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(at top left,#528e69,#1c382e)}.record{height:135px;width:135px;border-radius:50%;background:repeating-radial-gradient(circle,#151b18 0,#151b18 2px,#2d3831 3px,#18221b 4px);display:grid;place-items:center;box-shadow:10px 12px 20px #0005}.record span{width:49px;height:49px;border-radius:50%;background:#1ed760;color:#113b20;display:grid;place-items:center;font-size:32px;font-weight:700}.now-meta{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-top:16px}.now-meta strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#format{font-size:8px;background:#333;padding:4px;color:#bbb}#modeLabel{font-size:10px;color:#969696;margin:8px 0 0}.settings{margin-top:16px}.setting{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;gap:8px;cursor:pointer}.setting strong{display:block;font-size:11px;font-weight:500}.setting small{display:block;font-size:9px;color:#868686;margin-top:5px}.setting input{appearance:none;width:30px;height:17px;border-radius:12px;background:#535353;position:relative;cursor:pointer;margin:0;flex-shrink:0}.setting input:before{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#141414;border-radius:50%;transition:transform .2s}.setting input:checked{background:#1ed760}.setting input:checked:before{transform:translateX(13px)}.fade-label{display:flex;justify-content:space-between;font-size:10px;border-top:1px solid #343434;padding-top:15px;margin-bottom:12px}.fade-label output{color:#1ed760}#fade{width:100%;margin:0}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#777;margin-top:9px}#message{margin:0 30px 24px;font-size:11px;line-height:1.6;color:#8b978d}.dragging{outline:2px dashed #1ed760;outline-offset:10px}.playback{position:fixed;bottom:0;left:0;right:0;height:100px;background:#080808;border-top:1px solid #282828;display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.3fr) minmax(130px,1fr);align-items:center;gap:25px;padding:12px 24px;z-index:10}.track-meta{display:flex;align-items:center;gap:13px;min-width:0}.mini-cover{width:52px;height:52px;background:#203a2c;display:grid;place-items:center;color:#1ed760;font-size:24px;flex-shrink:0}.track-meta>div:last-child{min-width:0}#title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#subtitle{font-size:10px;color:#7e7e7e;margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport{display:flex;align-items:center;justify-content:center;gap:27px;margin-bottom:10px}.transport button{background:none;color:#b3b3b3;font-size:17px}.transport .play{background:#fff;color:#111;border-radius:50%;width:33px;height:33px;font-size:14px}.timeline{display:flex;align-items:center;gap:10px;font-size:9px;color:#999}.timeline input{width:100%;margin:0}.volume{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:#aaa;font-size:10px}.volume input{width:90px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body.playing .record{animation:spin 12s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(min-width:1600px){.hero{padding-top:45px;padding-bottom:45px}.cover{height:210px;width:210px}.content{grid-template-columns:minmax(0,1fr) 310px}.stage{height:210px}}@media(max-width:1150px){.sidebar{width:210px;padding:25px 14px}main{margin-left:210px}.content{grid-template-columns:minmax(0,1fr)}.right-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings{margin:0}.cover{width:135px;height:135px}.hero{gap:20px}.description{line-height:1.6}.search{max-width:200px}}@media(max-width:700px){.sidebar{position:relative;width:100%;bottom:auto;padding:20px 18px 10px}.brand{font-size:23px}.side-heading{margin:24px 0 12px}#playlistForm{max-width:360px;margin-bottom:12px}#playlists{display:flex;gap:8px;overflow-x:auto}.playlist-button{width:auto;min-width:160px;flex-shrink:0}.playlist-icon{width:28px;height:28px}.side-note{display:none}main{margin:0 8px 148px;border-radius:8px}header{height:48px;padding:0 18px}.hero{padding:24px 18px;gap:15px}.cover{width:90px;height:90px}.cover>span{font-size:60px}.cover>div{font-size:6px;letter-spacing:1px;margin-top:5px}h1{font-size:28px;letter-spacing:-1px;margin-bottom:12px}.hero-copy>p:first-child{font-size:10px;margin-bottom:8px}.description{display:none}.playlist-info{font-size:9px;gap:8px}.content{padding:22px 15px;gap:25px}.queue-toolbar{gap:10px}.queue-toolbar>div{gap:10px}.big-play{width:42px;height:42px;font-size:18px}.primary{padding:9px 11px;font-size:10px}.search{max-width:142px}.search input{font-size:9px}.table-heading,.track{grid-template-columns:18px minmax(0,1fr) 30px 75px;gap:5px}.track-name{font-size:11px}.track-art{width:28px;height:28px}.select{gap:7px}.row-actions button{padding:4px}.queue-footer{font-size:8px}#empty h2{font-size:14px}.right-panel{grid-template-columns:1fr}.now-playing{display:none}#message{margin:0 23px 22px}.playback{height:132px;grid-template-columns:minmax(0,1fr) 125px;gap:8px;padding:10px 18px 17px;align-items:start}.track-meta{padding-top:5px}.mini-cover{width:37px;height:37px}.playback-center{display:contents}.transport{padding-top:5px;gap:15px}.timeline{grid-column:1/-1}.volume{display:none}.sidebar .playlist-button .name{max-width:150px}#subtitle{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

.brand-icon{display:block;width:32px;height:32px;border-radius:8px;background:none}.cover>img{width:60%;height:60%;filter:drop-shadow(0 6px 8px #123a2930)}.record>img{width:49px;height:49px;border-radius:12px}.mini-cover{background:none}.mini-cover img{width:100%;height:100%;border-radius:9px}
.list-tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}.list-tools button{background:none;color:#aaa;font-size:10px;padding:5px}.list-tools button:hover{color:#fff}#renameForm,#deleteConfirm{background:#242424;padding:15px;border-radius:7px;margin-bottom:18px;font-size:12px}#renameForm label{display:block;margin-bottom:10px}#renameName{max-width:100%;background:#151515;border:1px solid #555;padding:9px;border-radius:4px;margin:0 8px 8px 0}#renameForm button,#deleteConfirm button{background:#3a3a3a;border-radius:20px;padding:8px 14px;font-size:11px;margin-right:6px}#deleteConfirm p{line-height:1.7;color:#ccc}#deleteConfirm #confirmDelete{color:#ffb6b6}#shuffle{font-size:23px}#shuffle[aria-pressed=true]{color:#1ed760}
@media(max-width:700px){.transport{gap:10px}.playback{grid-template-columns:minmax(0,1fr) 147px}}
.up-next,.sleep-panel{background:#1b1b1b;border-radius:8px;padding:17px;margin-top:16px}#upNextAction{width:100%;background:transparent;display:flex;align-items:center;text-align:left;gap:10px;padding:0}#upNextAction>span:nth-child(2){min-width:0;flex:1}#upNextTitle{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500}#upNextDetail{display:block;font-size:9px;color:#999;line-height:1.6;margin-top:5px}.next-icon{background:#294533;display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;color:#1ed760}.sleep-panel>label{display:block;font-size:10px;color:#a0a0a0;margin-bottom:10px}.sleep-controls{display:flex;gap:8px;align-items:center}.sleep-controls select{min-width:0;flex:1;background:#292929;border:1px solid #444;color:white;border-radius:5px;padding:8px;font:inherit;font-size:11px}.sleep-controls button{background:#333;border-radius:20px;padding:9px 12px;font-size:10px}.sleep-controls #sleepStart{background:#1ed760;color:#092715;font-weight:700}#sleepStatus{font-size:11px;color:#b6d6c1;line-height:1.6;margin:13px 0 8px}.sleep-panel>small{font-size:9px;color:#888;line-height:1.8}.shortcuts{font-size:10px;color:#888;padding:18px 4px;line-height:2.7}.shortcuts summary{cursor:pointer;color:#b3b3b3}.shortcuts kbd{background:#292929;border:1px solid #444;border-radius:3px;padding:2px 5px;color:#ccc;font:inherit;font-size:9px}#mute{background:transparent;font-size:13px;color:#aaa;padding:5px;white-space:nowrap}#mute[aria-pressed=true]{color:#1ed760}@media(min-width:701px) and (max-width:1150px){.right-panel{align-items:start}.up-next{margin-top:0}.settings,.sleep-panel{margin-top:0}.shortcuts{grid-column:1/-1}}@media(max-width:700px){.up-next{margin-top:0}.sleep-panel{margin-top:0}}

/* Keep only the useful save status above the playlist. */
header{height:42px;justify-content:flex-end;background:#294c3b;padding-top:8px}.hero{padding-top:14px}@media(max-width:700px){header{height:37px;padding-top:6px}.hero{padding-top:12px}}
.range-panel{background:#1b1b1b;border-radius:8px;padding:17px;margin-top:16px;min-width:0}#rangeTrack{font-size:11px;color:#b5b5b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 15px}.range-inputs{display:flex;gap:12px}.range-inputs label{flex:1;min-width:0;font-size:10px;color:#999}.range-inputs input{display:block;width:100%;margin-top:7px;background:#292929;color:white;border:1px solid #444;border-radius:5px;padding:9px;font-size:12px}.range-markers,.range-actions{display:flex;gap:7px;margin-top:10px}.range-markers button{background:none;color:#aaa;font-size:9px;padding:5px 0;flex:1;text-align:left}.range-actions button{border-radius:20px;padding:10px 12px;background:#333;font-size:10px}.range-actions #applyRange{background:#1ed760;color:#092715;font-weight:700}#rangeStatus{font-size:10px;line-height:1.7;color:#b6d6c1}.range-panel>small{font-size:9px;color:#888}@media(max-width:1150px){.range-panel{margin-top:0}}
.library-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 22px}.library-filters>button{background:#222;border:1px solid #3c3c3c;border-radius:20px;font-size:10px;padding:8px 12px;color:#ccc}.library-filters>button[aria-pressed=true]{background:#193b26;border-color:#1ed760;color:#1ed760}#favoriteCount{margin-left:6px}.sort-control select{background:#202020;border:1px solid #3c3c3c;color:#aaa;border-radius:5px;font:inherit;font-size:10px;padding:8px}.table-heading,.track{grid-template-columns:22px minmax(0,1fr) 38px 112px}.row-actions .favorite-button{font-size:17px;padding:3px 5px}.favorite-button[aria-pressed=true]{color:#1ed760}@media(max-width:700px){.table-heading,.track{grid-template-columns:15px minmax(0,1fr) 27px 99px;gap:4px}.row-actions button{padding:4px}.row-actions .favorite-button{padding:3px}.track-art{display:none}.library-filters{gap:8px}.sort-control select{max-width:140px;font-size:9px}}
.storage-tools{margin-top:20px;color:#b8b8b8;font-size:11px;flex-shrink:0}.storage-tools summary{cursor:pointer;padding:10px 4px}.storage-buttons{display:grid;gap:7px;margin-top:8px}.storage-buttons button{background:#232323;border:1px solid #383838;border-radius:5px;padding:9px 10px;text-align:left;font-size:10px;color:#ccc}.storage-tools p{font-size:9px;line-height:1.8;color:#888;margin:10px 4px}.sidebar{overflow-y:auto}#playlists{min-height:90px}.storage-tools #librarySize{color:#b7cabb}@media(max-width:700px){.storage-tools{margin-top:8px}.storage-buttons{grid-template-columns:1fr 1fr}.storage-tools p{margin-bottom:5px}#playlists{min-height:0;flex-shrink:0}}

.playlist-heading{display:flex;align-items:center;gap:16px;margin-bottom:20px}.playlist-heading h1{margin:0;flex:1;min-width:0}.hero-copy{flex:1}.list-actions{position:relative;flex-shrink:0}.list-actions summary{display:grid;place-items:center;list-style:none;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:28px;line-height:1;color:#d3ddd6;background:#ffffff09}.list-actions summary::-webkit-details-marker{display:none}.list-actions summary:hover,.list-actions[open] summary{background:#ffffff20;color:#fff}.list-actions summary:focus-visible{outline:2px solid white;outline-offset:4px}.list-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:20;min-width:165px;background:#262626;padding:5px;border:1px solid #424242;border-radius:7px;box-shadow:0 12px 28px #0006}.list-menu button{display:block;text-align:left;width:100%;padding:12px;border-radius:4px;background:transparent;color:#eee;font-size:12px;white-space:nowrap}.list-menu button:hover{background:#3b3b3b}.list-menu #deleteList{color:#ffabab}@media(max-width:700px){.playlist-heading{gap:8px;margin-bottom:12px}.list-actions summary{width:32px;height:32px;font-size:24px}.list-menu{min-width:150px}.playlist-heading h1{font-size:26px}}