@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans Variable;font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/instrument-sans-latin-ext-wght-normal-B5bTHO_g.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans Variable;font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/instrument-sans-latin-wght-normal-BbzFLZTg.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#0e1f23;--surface:#14292e;--raised:#1c383e;--line:#2a4a51;--text:#f0eadd;--muted:#93abad;--amber:#f5b841;--coral:#f0715a;--display:"Bricolage Grotesque Variable", system-ui, sans-serif;--body:"Instrument Sans Variable", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);font:400 .9375rem/1.5 var(--body);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--amber);outline-offset:2px}h1{font:700 clamp(2rem, 1.2rem + 3vw, 3.5rem) / 1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}h2{font:600 1.375rem/1.2 var(--display);letter-spacing:-.01em;margin:2.75rem 0 .875rem}h3{font:600 1rem/1.3 var(--body);margin:1.75rem 0 .75rem}.app{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:15.5rem minmax(0,1fr);height:100dvh;display:grid}.sidebar{background:var(--surface);flex-direction:column;gap:1.25rem;padding:1.5rem 1rem 1rem;display:flex;overflow-y:auto}.brand{font:800 1.625rem/1 var(--display);letter-spacing:-.04em;color:var(--amber);padding:0 .625rem}.search-box{background:var(--bg);color:var(--muted);border-radius:.5rem;align-items:center;gap:.5rem;padding:0 .75rem;display:flex}.search-box:focus-within{outline:2px solid var(--amber)}.search-box input{min-width:0;color:var(--text);background:0 0;border:0;outline:none;flex:1;padding:.5625rem 0}.nav-groups{flex-direction:column;flex:1;gap:1.25rem;display:flex}.nav a,.nav button{width:100%;color:var(--muted);text-align:left;text-overflow:ellipsis;white-space:nowrap;border-radius:.375rem;padding:.4375rem .625rem;font-weight:500;display:block;overflow:hidden}.nav a:hover,.nav button:hover{color:var(--text)}.nav a.active{color:var(--text);background:var(--raised)}.nav-playlists{flex:1}.nav-playlists h2{font:600 .8125rem/1 var(--body);letter-spacing:0;color:var(--muted);border-top:1px solid var(--line);margin:0 0 .5rem;padding:.75rem .625rem 0}.nav-playlists input,.menu input{border:1px dashed var(--line);background:0 0;border-radius:.375rem;width:100%;margin-top:.375rem;padding:.4375rem .625rem}.nav-playlists input::placeholder,.menu input::placeholder{color:var(--muted)}.nav-foot{border-top:1px solid var(--line);padding-top:.75rem}.main{padding:clamp(1.25rem,4vw,3rem) clamp(1.25rem,4vw,3rem) 4rem;overflow-y:auto}.page{max-width:72rem;margin:0 auto}.page-narrow{max-width:40rem;margin-left:0}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 1.5rem;margin-bottom:1.75rem;display:flex}.hero{grid-template-columns:minmax(8rem,15rem) minmax(0,1fr);align-items:end;gap:clamp(1rem,3vw,2.25rem);margin-bottom:2rem;display:grid}.hero-meta{margin-top:.75rem;font-size:1.0625rem;font-weight:500}.hero-meta a:hover,.track-album:hover,.player-text a:hover{text-decoration:underline}.hero-sub{color:var(--muted);margin:.375rem 0 0}.hero .btn{margin-top:1.25rem}.empty{max-width:34rem;color:var(--muted);margin-top:1.5rem;font-size:1.0625rem}.empty a{color:var(--amber);text-decoration:underline}.btn{border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;gap:.5rem;padding:.5625rem 1.125rem;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn-primary{border-color:var(--amber);background:var(--amber);color:#1b1503}.btn-primary:hover:not(:disabled){background:#ffd070;border-color:#ffd070}.btn-danger{border-color:var(--coral);color:var(--coral)}.actions{flex-wrap:wrap;gap:.5rem;display:flex}.icon-btn{width:2.25rem;height:2.25rem;color:var(--muted);border-radius:50%;place-items:center;display:inline-grid;position:relative}.icon-btn:hover:not(:disabled){color:var(--text)}.icon-btn.toggle.is-on{color:var(--amber)}.heart.is-on{color:var(--coral)}.segmented{background:var(--surface);border-radius:999px;padding:.1875rem;display:inline-flex}.segmented button{color:var(--muted);border-radius:999px;padding:.375rem .875rem;font-weight:500}.segmented button[aria-pressed=true]{background:var(--raised);color:var(--text)}input[type=range]{appearance:none;cursor:pointer;background:0 0;height:1rem;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--amber) var(--fill,0%), var(--line) var(--fill,0%));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text);border-radius:50%;width:12px;height:12px;margin-top:-4px}input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--amber);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:12px;height:12px}.cover{aspect-ratio:1;object-fit:cover;background:var(--raised);border-radius:.375rem;width:100%;display:block}.cover-blank{background:radial-gradient(circle, var(--bg) 0 3.5%, oklch(.78 .12 var(--hue)) 4% 16%, transparent 16.5%), repeating-radial-gradient(circle, transparent 0 3px, #ffffff0d 3px 4px), radial-gradient(circle, #0a1416 0 45%, transparent 45.5%), oklch(.4 .07 var(--hue))}.album-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1.75rem 1.25rem;display:grid}.album-card{display:block}.album-card .cover{margin-bottom:.625rem;transition:translate .15s ease-out}.album-card:hover .cover{translate:0 -3px}.album-card-title,.album-card-artist{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.album-card-title{font-weight:600}.album-card-artist{color:var(--muted);font-size:.875rem}.artist-list{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 1.5rem;margin-top:1.5rem;display:grid}h2+.artist-list{margin-top:0}.artist-list a{border-bottom:1px solid var(--line);font:600 1.125rem/1.3 var(--display);justify-content:space-between;align-items:baseline;gap:1rem;padding:.6875rem 0;display:flex}.artist-list a:hover{color:var(--amber)}.artist-list small{color:var(--muted);font:400 .8125rem var(--body);white-space:nowrap}.track{border-radius:.5rem;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 2.25rem 3.5rem 2.25rem;align-items:center;gap:.5rem;padding:.25rem .375rem;display:grid}.tracks-no-album .track{grid-template-columns:minmax(0,1fr) 2.25rem 3.5rem 2.25rem}.track:hover,.track:focus-within{background:var(--surface)}.track-main{text-align:left;align-items:center;gap:.75rem;min-width:0;padding:.25rem 0;display:flex}.track-no{width:1.75rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;flex:none}.track-text{min-width:0}.track-title,.track-artist,.track-album{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-title{font-weight:500}.track-artist,.track-album,.track-time{color:var(--muted);font-size:.875rem}.track-time{font-variant-numeric:tabular-nums;text-align:right}.is-current .track-title{color:var(--amber)}.track-more{position:relative}.eq{align-items:flex-end;gap:2px;height:.875rem;display:inline-flex}.eq i{background:var(--amber);transform-origin:bottom;border-radius:1px;width:3px;height:40%}.eq i:nth-child(2){height:100%}.eq i:nth-child(3){height:65%}@media (prefers-reduced-motion:no-preference){.eq.is-playing i{animation:.9s ease-in-out infinite alternate eq}.eq.is-playing i:nth-child(2){animation-delay:-.5s}.eq.is-playing i:nth-child(3){animation-delay:-.25s}}@keyframes eq{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.menu{z-index:20;border:1px solid var(--line);background:var(--raised);border-radius:.625rem;width:15.5rem;padding:.375rem;position:absolute;top:100%;right:0;box-shadow:0 12px 32px #030c0e8c}.menu button{text-align:left;text-overflow:ellipsis;white-space:nowrap;border-radius:.375rem;width:100%;padding:.4375rem .625rem;display:block;overflow:hidden}.menu button:hover:not(:disabled){background:var(--line)}.menu hr{border:0;border-top:1px solid var(--line);margin:.375rem 0}.menu-label{color:var(--muted);padding:.25rem .625rem;font-size:.8125rem;display:block}.player{background:var(--surface);border-top:1px solid var(--line);grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;padding:.875rem 1.25rem .75rem;display:grid;position:relative}.seek{width:100%;position:absolute;top:-.5625rem;left:0}.seek::-webkit-slider-runnable-track{border-radius:0}.seek::-moz-range-track{border-radius:0}.seek::-moz-range-progress{border-radius:0}.seek:not(:hover,:focus-visible)::-webkit-slider-thumb{opacity:0}.seek:not(:hover,:focus-visible)::-moz-range-thumb{opacity:0}.player-now{align-items:center;gap:.75rem;min-width:0;display:flex}.player-now .cover{flex:none;width:3.25rem}.player-text{min-width:0}.player-title,.player-artist{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.player-title{font-weight:600}.player-artist,.player-idle,.clock{color:var(--muted);font-size:.875rem}.player-controls{align-items:center;gap:.375rem;display:flex}.play-btn{background:var(--amber);color:#1b1503;border-radius:50%;place-items:center;width:2.875rem;height:2.875rem;margin:0 .375rem;display:grid}.play-btn:hover:not(:disabled){background:#ffd070}.repeat-one{font-size:.625rem;font-weight:700;position:absolute;top:.125rem;right:.125rem}.player-side{justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.clock{font-variant-numeric:tabular-nums;white-space:nowrap}.volume{color:var(--muted);align-items:center;gap:.375rem;display:flex}.volume input{width:6rem}.player-remote{color:var(--amber);text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;display:block;overflow:hidden}.device-menu{position:relative}.device-menu .menu{width:17rem;top:auto;bottom:calc(100% + .5rem)}.device-menu .menu button small{color:var(--muted);text-overflow:ellipsis;display:block;overflow:hidden}.device-menu .menu button[aria-checked=true] span{color:var(--amber);font-weight:600}.jam-count{background:var(--amber);color:#1b1503;text-align:center;border-radius:999px;min-width:1rem;padding:0 .1875rem;font-size:.6875rem;font-weight:700;line-height:1rem;position:absolute;top:0;right:-.125rem}.jam-members li{justify-content:space-between;align-items:baseline;gap:.75rem;padding:.25rem .625rem;font-weight:600;display:flex}.jam-members small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-weight:400;overflow:hidden}.menu-hint{color:var(--muted);padding:.375rem .625rem;font-size:.8125rem}.volume input:disabled{opacity:.4;cursor:default}.queue{z-index:30;background:var(--raised);border-left:1px solid var(--line);flex-direction:column;width:min(22rem,100vw);padding:1.25rem .75rem 1rem 1rem;display:flex;position:fixed;top:0;bottom:5rem;right:0;box-shadow:-16px 0 40px #030c0e73}.queue header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.queue h2{margin:0}.queue ol{overflow-y:auto}.queue li{align-items:center;gap:.25rem;display:flex}.queue li.is-played{opacity:.5}.queue-item{text-align:left;flex:1;min-width:0;padding:.375rem 0}.toast{z-index:40;pointer-events:none;position:fixed;bottom:6.5rem;left:50%;translate:-50%}.toast span{background:var(--text);color:var(--bg);border-radius:999px;padding:.5625rem 1rem;font-weight:600;display:block}.form,.login-card{justify-items:start;gap:1rem;display:grid}.form label,.login-card label{gap:.375rem;width:100%;font-weight:500;display:grid}.form input:not([type=checkbox]),.login-card input,.title-input{border:1px solid var(--line);background:var(--surface);border-radius:.5rem;width:100%;padding:.625rem .75rem}.form label.check{align-items:center;gap:.5rem;font-weight:400;display:flex}.check input{width:1.0625rem;height:1.0625rem;accent-color:var(--amber)}.title-input{font:700 2rem/1.1 var(--display)}.form-error{color:var(--coral);font-weight:500}.storage{width:100%;height:.625rem;margin-bottom:1.25rem;display:block}.avatar{object-fit:cover;border-radius:50%;flex:none;place-items:center;display:inline-grid}.avatar-blank{background:oklch(.45 .09 var(--hue));color:var(--text);font-weight:700;line-height:1}.profile-photo{flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;display:flex}.form label small{color:var(--muted);font-weight:400}.nav-user{border-radius:.375rem;align-items:center;gap:.625rem;padding:.375rem .625rem;font-weight:600;display:flex}.nav-user span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-user.active{background:var(--raised)}.user-name{align-items:center;gap:.625rem;min-width:0;display:flex}.user-detail{display:block}.user-list li{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.625rem 0;font-weight:600;display:flex}.user-list small{color:var(--muted);font-weight:400}.page-narrow>p{color:var(--muted);margin-bottom:1rem}.url-form{max-width:40rem}.job-list{max-width:40rem;margin-top:1.25rem}.job-list li{border-bottom:1px solid var(--line);gap:.125rem;padding:.625rem 0;display:grid}.job-list small{color:var(--muted);overflow-wrap:anywhere;font-size:.875rem}.job-link{color:var(--amber);justify-self:start;font-size:.875rem;font-weight:600;text-decoration:underline}.job-list .actions{margin-top:.5rem}.section-lead{max-width:40rem;color:var(--muted);margin-bottom:.5rem}.section-lead+.url-form,.job-list+.url-form{margin-top:1.25rem}.job-list details{color:var(--muted);margin-top:.25rem;font-size:.875rem}.job-list summary{cursor:pointer}.job-list details ul{margin-top:.375rem;padding-left:1.125rem;list-style:outside}.job-list details li{border:0;padding:.125rem 0;display:list-item}.job-list .is-failed small{color:var(--coral)}.job-list progress{width:100%;height:.375rem;accent-color:var(--amber);margin-top:.25rem}.dropzone{border:2px dashed var(--line);text-align:center;border-radius:1rem;justify-items:center;gap:1rem;padding:clamp(1.5rem,6vw,3.5rem);display:grid}.dropzone p{max-width:30rem;color:var(--muted)}.dropzone.is-dragging{border-color:var(--amber);background:var(--surface)}.dropzone progress{width:min(24rem,100%);accent-color:var(--amber)}.dropzone+.form-error,ul.form-error{margin-top:1rem}.login{place-items:center;min-height:100dvh;padding:1.5rem;display:grid}.login-card{width:min(23rem,100%)}.login-card .brand{padding:0;font-size:clamp(2.75rem,12vw,3.75rem)}.login-lead{color:var(--muted)}@media (width<=52rem){.app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}.sidebar{flex-flow:wrap;align-items:center;gap:.625rem;padding:.75rem;overflow:visible}.brand{padding:0;font-size:1.25rem}.search-box{flex:1}.nav-groups{scrollbar-width:none;flex-direction:row;flex:none;align-items:center;gap:.125rem;width:100%;overflow-x:auto}.nav,.nav-playlists{flex:none;align-items:center;gap:.125rem;display:flex}.nav-playlists,.nav-foot{border:0;padding:0}.nav-playlists h2{display:none}.nav-playlists input{width:9rem;margin:0}.track,.tracks-no-album .track{grid-template-columns:minmax(0,1fr) 2.25rem 2.25rem}.track-album,.track-time{display:none}.hero{grid-template-columns:minmax(0,1fr)}.hero .cover{width:11rem}.player{grid-template-columns:minmax(0,1fr) auto auto;gap:.25rem;padding-inline:.75rem}.player-controls .toggle,.clock,.volume{display:none}.play-btn{margin:0}}