@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap";:root{color:#f7f7f5;font-synthesis:none;--background:#171919;--panel:#202323;--panel-raised:#292d2d;--muted:#fff9;--faint:#ffffff5c;--line:#ffffff17;--cyan:#3be7ed;--blue:#3785ff;--red:#ff252d;background:#111313;font-family:Noto Sans SC,sans-serif}*{box-sizing:border-box}html{background:#111313}body{background:#111313;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.app-shell{background:var(--background);grid-template-columns:minmax(480px,.86fr) minmax(460px,1.14fr);min-height:100dvh;display:grid}.player-pane{border-right:1px solid var(--line);background-color:#141616;background-image:linear-gradient(#ffffff05 1px,#0000 1px);background-size:100% 7px;grid-template-rows:auto auto minmax(240px,1fr) auto;height:100dvh;padding:28px clamp(36px,5vw,88px) 34px;display:grid;position:sticky;top:0;overflow:hidden}.player-header,.library-title-row,.tab-row,.time-row,.transport-row,.track-list-heading{align-items:center;display:flex}.player-header{justify-content:space-between;min-height:44px}.brand-lockup{align-items:center;gap:11px;font-size:15px;font-weight:700;display:flex}.brand-logo{object-fit:cover;width:29px;height:29px}.icon-button{cursor:pointer;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;transition:color .16s,transform .16s,background .16s;display:grid}.icon-button:hover{color:var(--cyan)}.icon-button:active{transform:scale(.92)}.icon-button svg{width:22px;height:22px}.track-heading{text-align:center;padding:clamp(12px,2vh,22px) 0 4px}.track-heading h1{text-overflow:ellipsis;white-space:nowrap;max-width:620px;margin:0 auto;font-family:Outfit,Noto Sans SC,sans-serif;font-size:clamp(23px,2.2vw,34px);font-weight:700;line-height:1.18;overflow:hidden}.track-heading p{color:var(--muted);margin:7px 0 0;font-size:14px}.vinyl-stage{--vinyl-size:min(46vh, 40vw, 480px);width:var(--vinyl-size);aspect-ratio:1;filter:drop-shadow(0 32px 36px #00000052);place-self:center;position:relative}.vinyl-base{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.vinyl-cover{object-fit:cover;border:1px solid #0000007a;border-radius:50%;width:58%;height:58%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vinyl-stage.is-playing .vinyl-cover{animation:record-spin var(--spin-duration) linear infinite}@keyframes record-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.playback-panel{width:min(100%,650px);margin:0 auto}.progress-range{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.progress-range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--blue) 0 var(--progress), #ffffff29 var(--progress) 100%);height:4px}.progress-range::-webkit-slider-thumb{appearance:none;border:2px solid var(--blue);background:#fff;border-radius:50%;width:14px;height:14px;margin-top:-5px}.progress-range::-moz-range-track{background:#ffffff29;height:4px}.progress-range::-moz-range-progress{background:var(--blue);height:4px}.progress-range::-moz-range-thumb{border:2px solid var(--blue);background:#fff;border-radius:50%;width:12px;height:12px}.time-row{min-height:36px;color:var(--faint);font-variant-numeric:tabular-nums;justify-content:space-between;font-family:Outfit,monospace;font-size:12px}.time-row time{width:62px}.time-row time:last-child{text-align:right}.speed-button{border:1px solid var(--line);color:#ffffffc2;background:var(--panel-raised);cursor:pointer;border-radius:13px;min-width:61px;height:26px;padding:0 10px}.transport-row{justify-content:space-between;margin-top:12px}.transport-button svg{width:26px;height:26px}.mode-button{color:#ffffffbd}.play-button{color:#141616;cursor:pointer;background:#f7f7f5;border:0;border-radius:50%;place-items:center;width:66px;height:66px;padding:0;transition:transform .16s,background .16s;display:grid}.play-button:hover{background:var(--cyan);transform:scale(1.04)}.play-button:active{transform:scale(.94)}.play-button svg{width:26px;height:26px}.play-button .loading-ring{animation:.8s linear infinite control-spin}.library-pane{background:#1b1e1e;min-width:0;height:100dvh;overflow:hidden}.library-header{z-index:2;border-bottom:1px solid var(--line);background:#1b1e1ef5;padding:30px clamp(24px,3vw,48px) 0;position:relative}.library-title-row{min-height:44px}.library-title-row h2{margin:0;font-size:20px}.remote-badge{border:1px solid var(--line);height:30px;color:var(--faint);border-radius:3px;align-items:center;margin-left:auto;padding:0 10px;font-size:11px;display:flex}.tab-row{gap:28px;margin-top:34px}.tab-row>button:not(.more-button){height:48px;color:var(--faint);cursor:pointer;background:0 0;border:0;padding:0;font-size:17px;font-weight:600;position:relative}.tab-row>button:not(.more-button):after{background:var(--red);content:"";opacity:0;height:3px;transition:opacity .2s,transform .28s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(.2)}.tab-row>button.active{color:#fff;font-size:20px;font-weight:800}.tab-row>button.active:after{opacity:1;transform:scaleX(1)}.library-scroll{scrollbar-color:#ffffff2e transparent;height:calc(100dvh - 157px);padding:28px clamp(24px,3vw,48px) 56px;overflow-y:auto}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;display:grid}.album-card{min-width:0;position:relative}.album-main{text-align:left;cursor:pointer;background:0 0;border:0;width:100%;padding:0;display:block}.album-cover-frame{aspect-ratio:1;background:#282b2b;border:1px solid #ffffff80;width:100%;display:block;position:relative;overflow:hidden}.album-cover-frame:after{content:"";border:2px solid #0000;transition:border-color .18s;position:absolute;inset:0}.album-card.selected .album-cover-frame:after{border-color:var(--cyan)}.album-cover-frame img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.album-main:hover img{transform:scale(1.025)}.album-name{text-overflow:ellipsis;white-space:nowrap;margin-top:10px;font-size:13px;font-weight:700;display:block;overflow:hidden}.album-meta{color:var(--faint);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:11px;display:block;overflow:hidden}.favorite-button{color:#fff;filter:drop-shadow(0 2px 5px #000000b3);cursor:pointer;background:0 0;border:0;place-items:center;width:36px;height:36px;padding:0;display:grid;position:absolute;top:7px;right:7px}.favorite-button.active{color:var(--red)}.favorite-button svg{stroke-width:1.5px;width:23px;height:23px}.track-list{border-top:1px solid var(--line)}.track-list button{border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;background:0 0;grid-template-columns:38px minmax(0,1fr) 34px;align-items:center;width:100%;min-height:52px;padding:0 6px;display:grid}.track-list button:hover,.track-list button.current{background:#ffffff0b}.track-index{color:var(--faint);font-family:Outfit,sans-serif;font-size:12px}.track-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.track-list button.current .track-name{color:var(--cyan)}.track-action{color:var(--muted);place-items:center;display:grid}.track-action svg{width:14px}.sheet-backdrop{z-index:20;background:#0000009e;justify-content:center;align-items:flex-end;padding:24px 24px 0;animation:.18s ease-out both backdrop-in;display:flex;position:fixed;inset:0 0 0 max(480px,43vw)}.album-sheet{border:1px solid var(--line);background:#1d2020;border-bottom:0;border-radius:16px 16px 0 0;grid-template-rows:auto auto auto minmax(0,1fr);width:min(760px,100%);height:min(78dvh,760px);padding:10px 26px 0;animation:.26s cubic-bezier(.2,.8,.2,1) both sheet-in;display:grid;overflow:hidden;box-shadow:0 -24px 60px #0000006b}.sheet-handle{background:#ffffff3d;border-radius:2px;justify-self:center;width:44px;height:4px;margin-bottom:16px}.sheet-header{align-items:center;gap:14px;display:flex}.sheet-header>img{object-fit:cover;border-radius:10px;width:60px;height:60px}.sheet-header h2{margin:0;font-size:19px}.sheet-header p{color:var(--faint);margin:5px 0 0;font-size:12px}.sheet-close{color:#fff;cursor:pointer;background:#ffffff12;border:0;border-radius:50%;place-items:center;width:42px;height:42px;margin-left:auto;padding:0;display:grid}.sheet-close svg{width:19px}.sheet-search{border:1px solid var(--line);background:#ffffff0d;border-radius:6px;align-items:center;gap:10px;height:44px;margin:20px 0 14px;padding:0 14px;display:flex}.sheet-search svg{width:17px;color:var(--faint)}.sheet-search input{color:#fff;background:0 0;border:0;outline:0;width:100%;font-size:13px}.sheet-search input::placeholder{color:var(--faint)}.sheet-track-list{scrollbar-color:#ffffff2e transparent;overflow-y:auto}.virtual-track-list{min-height:0}.virtual-track-inner{width:100%;position:relative}.virtual-track-inner>button{position:absolute;top:0;left:0}.no-tracks{color:var(--faint);text-align:center;margin:36px 0;font-size:13px}.qr-backdrop{z-index:25;background:#000000ad;place-items:center;width:max(480px,43vw);padding:24px;animation:.18s ease-out both backdrop-in;display:grid;position:fixed;top:0;bottom:0;left:0}.qr-dialog{border:1px solid var(--line);background:#242727;border-radius:8px;flex-direction:column;align-items:center;width:min(360px,100%);padding:30px 30px 24px;display:flex;position:relative;box-shadow:0 24px 70px #0000007a}.qr-close{color:#fff;cursor:pointer;background:0 0;border:0;place-items:center;width:36px;height:36px;padding:0;display:grid;position:absolute;top:12px;right:12px}.qr-close svg{width:18px}.qr-app-logo{object-fit:cover;width:48px;height:48px}.qr-dialog h2{margin:14px 0 20px;font-size:18px}.qr-code{aspect-ratio:1;width:min(240px,100%);display:block}.qr-dialog>p{color:var(--faint);margin:14px 0 0;font-family:Outfit,sans-serif;font-size:12px}.qr-loading{aspect-ratio:1;place-items:center;width:240px;display:grid}.qr-loading svg{animation:.8s linear infinite control-spin}.qr-dialog .qr-error{aspect-ratio:1;color:#ffd5d6;place-items:center;width:240px;margin:0;font-size:13px;display:grid}@keyframes backdrop-in{0%{opacity:0}}@keyframes sheet-in{0%{transform:translateY(100%)}}.empty-state,.loading-state{min-height:280px;color:var(--faint);text-align:center;align-content:center;place-items:center;display:grid}.empty-state svg{width:42px;height:42px}.empty-state p{margin:14px 0 0}.empty-state button{border:1px solid var(--line);color:#fff;background:var(--panel-raised);cursor:pointer;border-radius:3px;margin-top:18px;padding:8px 14px}.loading-state p{margin:14px 0 0}.loading-disc{animation:2.4s linear infinite quiet-spin}.loading-disc svg{width:42px;height:42px}.library-warning,.audio-error{text-align:center;color:#ff8589;font-size:12px}.library-warning{margin:24px 0 0}.audio-error{z-index:30;color:#ffd5d6;pointer-events:none;background:#36191bf5;border:1px solid #ff676c52;border-radius:6px;width:max-content;max-width:calc(100% - 40px);margin:0;padding:10px 14px;animation:3s both toast-life;position:absolute;bottom:112px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #0000005c}@keyframes quiet-spin{to{transform:rotate(360deg)}}@keyframes control-spin{to{transform:rotate(360deg)}}@keyframes toast-life{0%{opacity:0;transform:translate(-50%,8px)}10%,84%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-4px)}}.mobile-only{display:none}.fatal-error{color:#fff;text-align:center;background:var(--background);place-content:center;justify-items:center;min-height:100dvh;padding:32px;display:grid}.fatal-error img{object-fit:cover;width:64px;height:64px}.fatal-error h1{margin:20px 0 8px;font-size:22px}.fatal-error p{max-width:420px;color:var(--muted);margin:0;font-size:14px}.fatal-error button{border:1px solid var(--line);color:#fff;background:var(--panel-raised);cursor:pointer;border-radius:4px;margin-top:24px;padding:10px 16px}@media (width<=960px){.app-shell{display:block}.player-pane{border-right:0;grid-template-rows:auto auto auto auto;width:100%;height:auto;min-height:100dvh;padding:18px clamp(20px,7vw,56px) 34px;position:relative}.brand-lockup{position:absolute;left:50%;transform:translate(-50%)}.brand-lockup .brand-logo{display:none}.mobile-only{display:grid}.track-heading{padding-top:14px}.vinyl-stage{--vinyl-size:min(46vh, 74vw, 430px);margin:18px 0 22px}.playback-panel{margin-top:auto}.library-pane{border-top:1px solid var(--line);height:auto;min-height:72dvh}.library-header{padding-top:20px;position:sticky;top:0}.library-scroll{height:auto;min-height:50vh;overflow:visible}.desktop-list-button{display:grid}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-backdrop{left:0}.qr-backdrop{width:100%}}@media (width<=540px){.player-pane{min-height:100svh;padding-left:20px;padding-right:20px}.track-heading h1{max-width:82vw;font-size:22px}.track-heading p{margin-top:5px}.vinyl-stage{--vinyl-size:min(40vh, 82vw, 340px);margin:10px 0 18px}.transport-row{margin-top:7px}.play-button{width:60px;height:60px}.library-title-row h2{font-size:18px}.library-header,.library-scroll{padding-left:20px;padding-right:20px}.album-grid{gap:18px 12px}.album-name{font-size:14px}.sheet-backdrop{padding:0}.album-sheet{border-left:0;border-right:0;border-radius:14px 14px 0 0;height:84dvh;padding-left:20px;padding-right:20px}}@media (width>=961px) and (height<=700px){.player-pane{grid-template-rows:auto auto minmax(150px,1fr) auto;padding-top:14px;padding-bottom:14px}.track-heading{padding-top:4px}.track-heading h1{font-size:22px}.track-heading p{margin-top:3px}.vinyl-stage{--vinyl-size:min(40vh, 320px)}.transport-row{margin-top:4px}.play-button{width:58px;height:58px}.library-header{padding-top:14px}.tab-row{margin-top:12px}.library-scroll{height:calc(100dvh - 119px);padding-top:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}