:root{font-family:system-ui,sans-serif;color:#e8eee9;background:#101c19;color-scheme:dark;font-size:16px}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:240px 1fr;min-height:100vh;padding-bottom:140px}button,input,select{font:inherit}button{cursor:pointer;background:#233630;color:#e8eee9;border:1px solid #3a5147;border-radius:8px;padding:10px 14px}button:hover{background:#354d42}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #cbdf9b;outline-offset:3px}.primary{background:#cadd9b;color:#14251b;border-color:#cadd9b;font-weight:650}.primary:hover{background:#d9e9b7}aside{padding:32px 22px;border-right:1px solid #304039;display:flex;flex-direction:column;gap:8px}aside button{width:100%;text-align:left;border-color:transparent;background:transparent}.selected{background:#2c4337!important;color:#d3e8ae}.brand{color:inherit;text-decoration:none;font-size:22px;font-weight:700}.brand span{display:block;font-size:12px;letter-spacing:4px;color:#cadd9b;margin:8px 0 42px}.label,.eyebrow{font-size:12px;letter-spacing:2px;color:#a8beb0}.playlist-heading{display:flex;align-items:center;justify-content:space-between;margin-top:25px}.playlist-heading button{width:auto}.privacy{margin-top:auto;color:#a8beb0;font-size:14px;padding-top:35px}main{padding:44px clamp(20px,5vw,80px)}header{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-2px;margin:12px 0}#count{color:#a8beb0}.imports{display:flex;gap:10px}.toolbar{display:flex;gap:12px;border-top:1px solid #304039;padding-top:28px;margin-top:32px}input[type=search]{flex:1;min-width:100px;background:#192a23;border:1px solid #3a5147;border-radius:8px;padding:12px;color:inherit}#status{min-height:24px;color:#d3e8ae}#empty{text-align:center;padding:45px 15px}#empty p{color:#a8beb0;line-height:1.8}.record{border:2px solid #405d4d;border-radius:50%;width:140px;height:140px;display:grid;place-items:center;margin:auto;color:#cadd9b;font-size:55px;box-shadow:0 0 0 14px #1c3027,0 0 0 15px #30473a}#empty h2{margin-top:44px;font-size:28px}.track{display:grid;grid-template-columns:44px minmax(120px,1fr) minmax(90px,.7fr) auto;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid #304039}.track.active{background:#243c2e}.track strong,.track small{display:block;overflow-wrap:anywhere}.track small{color:#a8beb0;margin-top:5px}.track select{max-width:130px;background:#192a23;color:inherit;border:1px solid #3a5147;border-radius:6px;padding:8px}.actions{display:flex;gap:6px}.track .album{color:#a8beb0;font-size:14px}footer{position:fixed;bottom:0;left:0;right:0;background:#192b23;border-top:1px solid #405648;padding:18px 28px;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:30px;align-items:center}.now{display:flex;gap:14px;align-items:center;min-width:0}.now strong{display:block;overflow-wrap:anywhere}.now small{display:block;color:#a8beb0;margin-top:5px}.now img,.art-placeholder{width:58px;height:58px;object-fit:cover;border-radius:8px;flex-shrink:0}.art-placeholder{display:grid;place-items:center;background:#3b513a;color:#d1e4a2;font-size:30px}.buttons{display:flex;justify-content:center;gap:10px;align-items:center}.buttons button{padding:8px 12px}.buttons [aria-pressed=true],#repeat.enabled{color:#cadd9b;border-color:#cadd9b}.seek{display:flex;align-items:center;gap:10px;font-size:12px;color:#b5c8b9;margin-top:10px}.seek input{width:100%}input[type=range]{accent-color:#cadd9b}.volume{justify-self:end;font-size:14px;display:flex;gap:10px;align-items:center}.volume input{width:90px}dialog{background:#192b23;color:inherit;border:1px solid #405648;border-radius:14px;max-width:90vw}dialog::backdrop{background:#0009}dialog label{display:grid;gap:10px}dialog input{padding:10px}dialog form>div{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}[hidden]{display:none!important}@media(max-width:900px){body{grid-template-columns:180px 1fr}aside{padding:25px 14px}main{padding:25px 20px}header{align-items:flex-start;flex-direction:column}.track{grid-template-columns:40px 1fr auto}.album{display:none}footer{grid-template-columns:1fr 1.2fr;gap:15px;padding:14px}.volume{display:none}.actions{flex-direction:column}}@media(max-width:600px){body{display:block;padding-bottom:200px}aside{border-right:0;border-bottom:1px solid #304039;padding:18px;display:block}.brand span{display:inline;margin-left:10px}.label,.privacy{display:none}.playlist-heading{display:inline-flex;margin:0}aside>button{width:auto}#playlists{display:flex;flex-wrap:wrap}#playlists button{width:auto}.toolbar{flex-wrap:wrap;margin-top:20px}.toolbar input{flex-basis:100%}main{padding:20px 16px}footer{grid-template-columns:1fr}.now img,.art-placeholder{width:38px;height:38px}.track{gap:8px}.track select{max-width:105px;font-size:14px}.track button{padding:8px}.now small{font-size:12px}}

.imports{flex-wrap:wrap}#download-dialog{width:540px}#download-dialog p{line-height:1.6;color:#b5c8b9}#download-dialog label{margin:16px 0}#download-dialog input[type=url],#download-dialog select{width:100%;background:#101c19;color:inherit;border:1px solid #405648;padding:10px;border-radius:6px}#download-dialog .consent{display:flex;align-items:flex-start;gap:10px}#download-dialog .hint{font-size:14px}#download-dialog progress{width:100%;accent-color:#cadd9b}

.online-search{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid currentColor;border-radius:8px;color:inherit;text-decoration:none}.online-search:focus-visible{outline:3px solid #35bfa2;outline-offset:3px}

#online-dialog{width:720px;max-width:calc(100vw - 32px);max-height:85vh;overflow:auto}.online-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}#online-form{display:flex;gap:10px}#online-query{min-width:0;width:100%}#online-status{color:#cadd9b;line-height:1.5}#online-preview{width:100%;margin-bottom:14px}.online-result{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;border-bottom:1px solid #304039;padding:16px 0}.online-result strong,.online-result small{display:block;overflow-wrap:anywhere}.online-result small{color:#a8beb0;margin-top:5px}@media(max-width:540px){.online-result{grid-template-columns:1fr 1fr}.online-result>div{grid-column:1/-1}}

:root{--music-accent:#cadd9b;--music-line:#405648;--music-muted:#a8beb0;--music-radius:8px}button,input,select,summary{min-height:44px}button{min-width:44px}button:disabled{opacity:.5;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}#connection-state,.hint,.search-hint,#music-diagnostics{color:var(--music-muted);font-size:14px;line-height:1.6}#music-diagnostics{margin:16px 0}summary{cursor:pointer;display:flex;align-items:center}.online-feedback{display:flex;gap:10px}.skeleton{height:116px;border-radius:var(--music-radius);background:linear-gradient(100deg,#233630 25%,#354d42 45%,#233630 65%);background-size:200% 100%;animation:music-pending 1.5s linear infinite;margin:16px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#online-detail{min-height:22px}.move-buttons{display:flex;gap:4px}.track .actions{flex-wrap:wrap}#undo{border-color:var(--music-accent);margin-bottom:12px}@keyframes music-pending{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.skeleton{animation:none}button:active:not(:disabled){transform:none}}@media(max-width:600px){#online-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:90dvh;margin:5dvh auto;padding:16px}.track .actions{max-width:150px}.track .move-buttons button{min-width:44px}}

.music-search-field{flex:1;min-width:0}.music-search-field label{display:block;margin-bottom:8px}.music-search-field input{width:100%;min-height:44px;padding:12px 14px;border-radius:var(--music-radius);box-sizing:border-box}.music-search-field .hint{margin:8px 0 0}@media(max-width:600px){.music-search-field{flex-basis:100%}}
:is(textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--music-accent, #cadd9b); outline-offset: 3px; }

dialog input:not([type=checkbox]),dialog select{width:100%;min-width:0;padding:12px 14px;border-radius:var(--music-radius);background:#101c19;color:inherit;border:1px solid var(--music-line)}
dialog .hint{margin:8px 0 16px}dialog form>div{flex-wrap:wrap}
#online-form{align-items:flex-start}#online-form>.music-search-field{display:block;margin:0}#online-submit{margin-top:30px}
#playlist-dialog{width:440px;max-width:calc(100vw - 32px)}
@media(max-width:540px){#online-form{flex-direction:column}#online-form>.music-search-field{width:100%}#online-submit{margin-top:0;width:100%}}
.transport,.now>div{min-width:0}.buttons{flex-wrap:wrap}.buttons button{overflow-wrap:anywhere}.seek{min-width:0}.seek input{flex:1;min-width:0;width:auto}
body{padding-bottom:max(140px,var(--music-player-height,140px))}@media(max-width:600px){body{padding-bottom:max(200px,var(--music-player-height,200px))}}