:root{--text:#fff;--muted:#ffffff9e;--accent:#fff;--gutter:clamp(20px, 6vw, 28px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;background:#050b1a;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Inter,system-ui,sans-serif}main{place-items:start center;min-height:100dvh;display:grid;position:relative;overflow:hidden}.bg{z-index:0;background:radial-gradient(75% 50% at 18% 0,#0c68e99e,#0000 70%) 0 0/140% 140%,radial-gradient(65% 45% at 100% 42%,#1458b861,#0000 70%) 0 0/140% 140%,radial-gradient(85% 50% at 0 100%,#1343868c,#0000 70%) 0 0/140% 140%,linear-gradient(#0000 50%,#040916b3 100%) 0 0/100% 100%,#050b1a 0 0/100% 100%;animation:30s ease-in-out infinite alternate drift;position:fixed;inset:0}.bg:after{content:"";opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}@keyframes drift{0%{background-position:0 0,100% 30%,0 100%,0 0,0 0}to{background-position:30% 20%,70% 60%,25% 70%,0 0,0 0}}.glass{-webkit-backdrop-filter:blur(28px)saturate(200%)brightness(1.08);background:linear-gradient(135deg,#ffffff29,#ffffff0a 60%,#ffffff1a);border:1px solid #ffffff24;position:relative;box-shadow:inset 2px 2px 1px -1px #ffffffbf,inset -1px -1px 1px -.5px #ffffff59,inset 0 0 22px #ffffff12,0 18px 44px -8px #00000073}.glass:before{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(110% 55% at 18% 0,#ffffff38,#0000 55%);position:absolute;inset:0}.glass>*{position:relative}.player{z-index:1;flex-direction:column;width:min(100%,440px);min-height:100dvh;display:flex;position:relative;overflow:hidden}.art.cover{aspect-ratio:auto;z-index:0;padding-bottom:62%;transition:filter .5s;position:absolute;inset:0}.cover:after{content:"";pointer-events:none;background:linear-gradient(#0000 38%,#0409168c 100%);position:absolute;inset:0}.art.cover.has-img{padding:max(28px, calc(env(safe-area-inset-top) + 12px)) var(--gutter) 62%;background:#050b1a;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.cover-bg{object-fit:cover;filter:blur(36px)grayscale()brightness(.8)contrast(1.15);z-index:0;width:124%;height:124%;position:absolute;inset:-12%}.art.cover.has-img:before{content:"";z-index:1;mix-blend-mode:color;pointer-events:none;background:#1265d9;position:absolute;inset:0}.cover-art{z-index:2;border-radius:20px;place-self:center;max-width:100%;max-height:100%;animation:.4s fadein;position:relative;box-shadow:0 24px 60px #0000008c,0 0 0 1px #ffffff1f}@keyframes fadein{0%{opacity:0}}.art.cover.has-img:after{z-index:3;background:linear-gradient(#0000 30%,#04091680 60%,#040916d9 100%)}.panel{z-index:1;padding:0 var(--gutter) max(18px, env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);gap:clamp(10px,2dvh,18px);margin-top:auto;display:grid;position:relative}.actions{border-radius:99px;justify-content:space-around;padding:4px 10px;display:flex}.actions .icon-btn{border-radius:99px;width:56px;height:44px;font-size:22px}.volume{border-radius:99px;padding:4px 20px}.volume .slider{padding:10px 0}.player>.error{z-index:1;padding:0 var(--gutter) 12px;position:relative}.art{--tone:24%;--ang:145deg;--gap:7px;--cx:50%;--cy:50%;aspect-ratio:1;background:radial-gradient(90% 70% at 22% 10%, #fff3, transparent 60%), repeating-radial-gradient(circle at var(--cx) var(--cy), #ffffff12 0 1px, transparent 1px var(--gap)), linear-gradient(var(--ang), hsl(215 55% calc(var(--tone) + 14%)), hsl(215 62% var(--tone)));place-items:center;display:grid;position:relative;overflow:hidden}.art .disc{aspect-ratio:1;color:#ffffffeb;-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,#ffffff47,#ffffff0f);border:1px solid #ffffff4d;border-radius:50%;place-items:center;width:34%;font-size:clamp(22px,7vw,38px);display:grid;box-shadow:inset 0 1px #ffffff80,0 10px 28px #00000059}.art.mini{--gap:4px;border-radius:10px;flex:none;width:44px}.art.mini .disc{-webkit-backdrop-filter:none;backdrop-filter:none;width:30%;box-shadow:none}.player.paused .cover{filter:saturate(.7)brightness(.85)}.meta{text-shadow:0 2px 18px #0000008c}.meta h1{letter-spacing:-.025em;text-wrap:balance;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:clamp(26px,7.8vw,34px);font-weight:750;line-height:1.12;display:-webkit-box;overflow:hidden}.meta h1[data-len=l]{font-size:clamp(22px,6.4vw,28px)}.meta h1[data-len=xl]{-webkit-line-clamp:5;font-size:clamp(19px,5.3vw,23px)}.meta p{color:#ffffffb8;margin:6px 0 0;font-size:clamp(15px,4.2vw,18px);font-weight:500}.times{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;display:flex}.controls{justify-content:center;align-items:center;gap:clamp(16px,6vw,28px);padding:4px 0;display:flex}.icon-btn{width:44px;height:44px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;font-size:22px;transition:transform .15s,background .2s,opacity .2s;display:grid;position:relative}@media (hover:hover){.icon-btn:not(.glass):hover{background:#ffffff1a}}.icon-btn:active{transform:scale(.88)}.icon-btn:focus-visible,.tracks button:focus-visible{outline-offset:2px;outline:2px solid #fff}.icon-btn.big{width:62px;height:62px;font-size:26px}.icon-btn.active{background:#fff3}.icon-btn.play{width:86px;height:86px;font-size:38px}.icon-btn.dim{opacity:.55}.toast{z-index:2;white-space:nowrap;pointer-events:none;border-radius:99px;padding:8px 16px;font-size:13px;animation:.25s cubic-bezier(.3,1.3,.5,1) pop;position:absolute;top:14px;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.9)}}.badge{font-size:10px;position:absolute;bottom:5px;right:5px}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:26px;height:26px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.slider{align-items:center;gap:10px;padding:8px 0;display:flex}.slider-icon{color:var(--muted);font-size:18px;display:grid}.slider input{appearance:none;cursor:pointer;background:linear-gradient(to right, #fff var(--pct), #ffffff40 var(--pct));border-radius:99px;outline:none;flex:1;height:6px;margin:0;transition:height .15s}.slider input:hover,.slider input:active,.slider input:focus-visible{height:10px}.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0}.slider input:hover::-webkit-slider-thumb{background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 8px #0006}.slider input:active::-webkit-slider-thumb{background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 8px #0006}.slider input::-moz-range-thumb{border:0;width:0;height:0}.slider input:hover::-moz-range-thumb{background:#fff;border-radius:50%;width:16px;height:16px}.slider input:active::-moz-range-thumb{background:#fff;border-radius:50%;width:16px;height:16px}.sheet-backdrop{z-index:10;opacity:0;pointer-events:none;background:#0006;justify-content:center;align-items:flex-end;transition:opacity .25s;display:flex;position:fixed;inset:0}.sheet-backdrop.open{opacity:1;pointer-events:auto}.sheet{width:min(100%,520px);max-height:78dvh;padding:20px 20px max(20px, env(safe-area-inset-bottom));background:linear-gradient(135deg,#1c3664b8,#0a16329e);border-radius:32px 32px 0 0;flex-direction:column;gap:12px;transition:transform .4s cubic-bezier(.2,.9,.2,1);display:flex;transform:translateY(100%)}.sheet-backdrop.open .sheet{transform:none}.sheet header{justify-content:space-between;align-items:center;display:flex}.sheet h2{margin:0;font-size:18px}.sheet-body{gap:12px;display:grid;overflow-y:auto}.tracks li{align-items:center;gap:4px;display:flex}.tracks li>button:first-child{flex:1;min-width:0}.tracks .remove{opacity:.7;flex:none;justify-content:center;width:40px;height:40px;padding:0}.add-file{cursor:pointer;background:#ffffff1f;border:1px solid #ffffff1f;border-radius:99px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:14px;display:flex}.add-file:active{transform:scale(.97)}.tracks{gap:4px;margin:0;padding:0;list-style:none;display:grid}.tracks button{width:100%;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:18px;align-items:center;gap:12px;padding:10px 12px;display:flex}.tracks button:active{background:#ffffff1a}.tracks button.current{background:#ffffff29}.tracks .t{flex:1;min-width:0;display:grid}.tracks b{text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:600;display:-webkit-box;overflow:hidden}.tracks small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bg-toggle{width:100%;color:var(--text);font:inherit;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff24;border-radius:99px;justify-content:center;align-items:center;gap:8px;padding:13px 16px;font-size:15px;font-weight:600;transition:transform .15s,background .2s;display:flex}.bg-toggle:active{transform:scale(.98)}.bg-toggle.on{background:#fff3}.bg-toggle:disabled{opacity:.5}.bg-controls{align-items:center;gap:4px;display:flex}.bg-repeat{color:var(--text);font:inherit;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff40;border-radius:99px;align-items:center;gap:8px;margin-left:auto;padding:10px 14px;font-size:14px;display:inline-flex}.bg-repeat.dim{opacity:.6}.refresh{align-items:center;gap:12px;display:flex}.refresh button{color:var(--text);font:inherit;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff1f;border-radius:99px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;display:inline-flex}.refresh button:disabled{opacity:.6}.refresh small{color:var(--muted)}.refresh .spin{animation:.9s linear infinite spin;display:grid}.unlock{z-index:1;border-radius:32px;grid-template-columns:minmax(0,1fr);align-self:center;gap:14px;width:min(100% - 32px,420px);margin:16px;padding:clamp(20px,6vw,28px);display:grid;position:relative}.unlock h1{letter-spacing:-.02em;margin:0}.unlock p{color:var(--muted);margin:0}.unlock input{width:100%;font:inherit;color:var(--text);-webkit-user-select:text;user-select:text;background:#ffffff14;border:1px solid #ffffff38;border-radius:16px;outline:none;padding:14px 16px;font-size:16px}.unlock input:focus{border-color:#fff}.primary{font:inherit;color:#050b1a;cursor:pointer;background:#fff;border:0;border-radius:16px;padding:14px;font-weight:600}.primary:disabled{opacity:.6}.link{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:8px;font-size:14px}.error{margin:0;font-size:14px;color:#ffb3c0!important}@media (height<=700px){.icon-btn.play{width:70px;height:70px;font-size:32px}.icon-btn.big{width:52px;height:52px;font-size:22px}.panel{gap:8px}.meta h1{font-size:24px}.meta h1[data-len=l]{font-size:20px}.meta h1[data-len=xl]{font-size:17px}.actions .icon-btn{height:40px}.art.cover{padding-bottom:70%}}@media (orientation:landscape) and (height<=520px){.player{width:min(100%,980px)}.art.cover{padding:0 52% 0 0}.art.cover.has-img{padding:16px 52% 16px 20px}.art.cover:after{background:linear-gradient(90deg,#0000 40%,#0409168c 100%)}.panel{align-content:center;gap:6px;width:52%;margin:0 0 0 auto;padding-top:12px}.meta h1,.meta h1[data-len]{font-size:22px}.meta h1[data-len=l]{font-size:19px}.meta h1[data-len=xl]{font-size:17px}.icon-btn.play{width:64px;height:64px;font-size:28px}.icon-btn.big{width:48px;height:48px;font-size:20px}}@media (width>=700px) and (height>=700px){.player{border-radius:36px;min-height:calc(100dvh - 40px);margin:20px 0;box-shadow:0 30px 80px -20px #0009}}@media (prefers-reduced-motion:reduce){.bg,.spinner{animation:none}main,.cover,.sheet,.sheet-backdrop{transition:none}}@media (prefers-reduced-transparency:reduce){.glass,.sheet{-webkit-backdrop-filter:none;background:#102246f2}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
