html,body,#root{width:100%;height:100%;margin:0}body{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#050504;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:clamp(14px,1.1vw + .5rem,16px);overflow:hidden}body::selection{color:#090806;background:#e8ca90}*,:before,:after{box-sizing:border-box}button,input,textarea,select{font:inherit}img,picture,canvas,svg,video{max-width:100%;display:block}canvas{display:block}@media (width<=480px){body{font-size:14px;overflow:hidden}}.lyrics{height:min(var(--panel-height,720px), clamp(480px, 58dvh, 560px));isolation:isolate;background:linear-gradient(150deg,#0f0f0df5,#070706f0);border:1px solid #ffffff16;border-radius:30px;grid-template-rows:auto 1fr auto;min-height:0;display:grid;position:relative;overflow:hidden;box-shadow:0 34px 100px #00000057,inset 0 1px #ffffff0e}.lyrics:before{content:"";z-index:0;aspect-ratio:1;opacity:1;pointer-events:none;background:radial-gradient(circle,#d6b16e0e,#0000 68%);border-radius:50%;width:60%;position:absolute;top:-13%;right:-8%}.lyrics:after{content:"";z-index:1;pointer-events:none;background:radial-gradient(#d6b16e0b,#0000 68%);border-radius:50%;width:82%;height:190px;position:absolute;top:52%;left:6%;transform:translateY(-50%)}.lyrics-header{z-index:3;background:linear-gradient(#0b0b09fa 48%,#0b0b099e 76%,#0000);justify-content:space-between;align-items:start;gap:20px;padding:30px 34px 23px;display:flex;position:relative}.section-kicker{align-items:center;gap:7px;display:flex}.lyrics-header h2{letter-spacing:-.05em;margin:8px 0 0;font-size:clamp(1.4rem,2.5vw,1.92rem)}.lyrics-index{color:#ffffff45;font-variant-numeric:tabular-nums;letter-spacing:.08em;align-items:baseline;gap:5px;padding-top:5px;font-size:.63rem;display:flex}.lyrics-index strong{color:var(--accent-bright);letter-spacing:-.02em;font-size:1.08rem;font-weight:650}.lyrics-scroll{z-index:2;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;overscroll-behavior:contain;touch-action:pan-y;padding:0 34px;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 14% 86%,#0000);mask-image:linear-gradient(#0000,#000 14% 86%,#0000)}.lyrics-scroll::-webkit-scrollbar{width:3px}.lyrics-scroll::-webkit-scrollbar-track{background:0 0}.lyrics-scroll::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:4px}.lyrics-spacer:first-child{height:22%}.lyrics-spacer:last-child{height:42%}.lyrics-line{color:#ffffff5c;text-align:left;letter-spacing:-.025em;cursor:pointer;background:0 0;border:0;width:100%;margin:0;padding:12px 0;font-size:clamp(1.06rem,2.1vw,1.58rem);font-weight:560;line-height:1.38;transition:color .36s,opacity .36s,transform .48s cubic-bezier(.16,1,.3,1),padding .36s;display:block;position:relative}.lyrics-line:hover{color:#ffffffb8}.lyrics-line.past{opacity:.38;transform:none}.lyrics-line.future{opacity:.74;transform:translate(0)}.lyrics-line.active{z-index:2;color:#fff;opacity:1;transform-origin:0;text-shadow:0 3px 30px #d6b16e1f;box-shadow:none;background:0 0;margin-block:3px;padding:16px 0;font-size:clamp(1.06rem,2.1vw,1.58rem);font-weight:680;animation:.56s cubic-bezier(.16,1,.3,1) both activeLineIn;transform:none}.lyrics-line.active:before{content:"";background:linear-gradient(to bottom, transparent, var(--accent-bright), transparent);border-radius:2px;width:2px;position:absolute;top:28%;bottom:28%;left:-16px;box-shadow:0 0 16px #d6b16eb8}.karaoke-word{display:inline-block;position:relative}.karaoke-content{z-index:1;position:relative}.karaoke-word-base{color:#ffffff30}.karaoke-word-fill{color:#0000;background:linear-gradient(108deg, #fff 20%, #f7ecd4 68%, var(--accent-bright));width:max-content;clip-path:inset(0 calc(100% - (var(--fill,0) * 100%)) 0 0);text-shadow:0 0 16px #f0d49a1f;-webkit-background-clip:text;background-clip:text;transition:clip-path 34ms linear;position:absolute;inset:0}.lyric-progress{background:linear-gradient(to right, var(--accent-bright), #d6b16e2e);opacity:.72;width:min(190px,42%);height:1px;transform:scaleX(var(--line-fill,0));transform-origin:0;border-radius:1px;transition:transform 34ms linear;position:absolute;bottom:3px;left:0}.lyrics-footer{z-index:3;color:#ffffff47;letter-spacing:.065em;background:linear-gradient(#0000,#0a0a08fa 42%);justify-content:space-between;padding:20px 34px 24px;font-size:.59rem;display:flex;position:relative}.lyrics-footer-mark{color:#d6b16e78;letter-spacing:.13em;font-weight:700}@keyframes activeLineIn{0%{opacity:0;letter-spacing:.005em;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media (width<=900px){.lyrics{height:clamp(480px,68dvh,600px)}}@media (width<=520px){.lyrics{background:linear-gradient(150deg,#0f0f0de0,#070706db);border-radius:22px;height:clamp(270px,32dvh,300px)}.lyrics-header{padding:19px 18px 14px}.lyrics-header h2{margin-top:6px;font-size:1.24rem}.lyrics-index{padding-top:2px}.lyrics-scroll{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:0 18px}.lyrics-spacer:first-child{height:4%}.lyrics-spacer:last-child{height:28%}.lyrics-line{padding:8px 0;font-size:.96rem;line-height:1.34}.lyrics-line.active{margin-block:1px;padding:12px 0;font-size:.98rem;transform:none}.lyrics-footer{display:none}.lyric-progress{width:min(150px,48%)}}@media (width>=901px) and (height<=800px){.lyrics{height:clamp(460px,68dvh,540px)}.lyrics-header{padding:24px 28px 16px}.lyrics-scroll{padding-inline:28px}.lyrics-footer{padding:14px 28px 18px}.lyrics-line{padding-block:8px}.lyrics-line.active{margin-block:2px;padding-block:13px}}:root{--ink:#070706;--panel:#0f0f0db8;--line:#ffffff1a;--muted:#ffffff7a;--soft:#ffffffb3;--accent:#d6b16e;--accent-bright:#f0d49a}.scene-fallback{background:#050504;position:fixed;inset:0}.app-shell{z-index:10;scrollbar-width:none;pointer-events:none;padding:96px clamp(24px,5vw,72px) 44px;position:fixed;inset:0;overflow:auto}.app-shell::-webkit-scrollbar{display:none}.app-vignette{pointer-events:none;background:radial-gradient(circle at 24% 48%,#d6b16e1a,#0000 30%),radial-gradient(circle at 76% 28%,#717e9414,#0000 28%),linear-gradient(115deg,#0000001a,#000000b8);position:fixed;inset:0}.app-vignette:after{content:"";opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E");position:absolute;inset:0}.topbar{z-index:20;pointer-events:auto;background:linear-gradient(#050504bd,#05050400);border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;width:100%;height:78px;padding:0 clamp(24px,5vw,72px);display:flex;position:fixed;top:0;left:0}.brand{color:#fff;letter-spacing:.22em;align-items:center;gap:11px;font-size:.76rem;font-weight:800;text-decoration:none;display:inline-flex}.brand-mark{width:34px;height:34px;color:var(--accent-bright);background:#ffffff0a;border:1px solid #ffffff24;border-radius:50%;place-items:center;display:grid}.hud{--panel-height:clamp(590px, calc(100dvh - 150px), 720px);z-index:2;grid-template-columns:minmax(310px,clamp(340px,31vw,420px)) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,80px);width:min(1240px,100%);min-height:calc(100dvh - 140px);margin:0 auto;display:grid;position:relative}.player-wrap,.lyrics-wrap{pointer-events:auto;min-width:0}.player-card{width:100%;height:var(--panel-height);border:1px solid var(--line);background:linear-gradient(145deg,#181815f5,#0a0a09f0);border-radius:28px;flex-direction:column;padding:18px;display:flex;box-shadow:0 34px 100px #0000007a,inset 0 1px #ffffff12}.artwork-stage{isolation:isolate;width:min(100%, calc(var(--panel-height) - 350px));flex:none;margin-inline:auto;position:relative}.artwork{z-index:2;aspect-ratio:1;background:#080808;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 24px 54px #00000070}.cover{object-fit:cover;width:100%;height:100%;transition:filter .7s}.artwork.is-playing .cover{filter:brightness(1.035)contrast(1.035)}.artwork-shine{pointer-events:none;background:linear-gradient(120deg,#ffffff17,#0000 24% 70%,#d6b16e0f);position:absolute;inset:0}.track-heading{justify-content:space-between;align-items:end;gap:18px;padding:24px 5px 3px;display:flex}.eyebrow,.section-kicker{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;font-size:.63rem;font-weight:750}.track-heading h1{letter-spacing:-.045em;margin:6px 0 5px;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.05}.track-heading p{color:var(--muted);margin:0;font-size:.82rem}.track-heading p span{color:#ffffff40;margin:0 5px}button{-webkit-tap-highlight-color:transparent}.icon-btn,.volume-icon{color:#ffffff8a;cursor:pointer;background:0 0;border:0;transition:color .18s,background .18s,transform .18s}.icon-btn:hover,.volume-icon:hover{color:#fff}.icon-btn:active{transform:scale(.92)}.like-btn{background:#ffffff06;border:1px solid #ffffff17;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid}.like-btn.is-active{color:var(--accent-bright);border-color:#d6b16e4d}.spectrum{opacity:.78;width:calc(100% - 10px);height:24px;min-height:24px;margin:10px 5px 0;display:block;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000)}.progress-container{padding:10px 5px 0}.progress-time{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:9px;font-size:.66rem;display:flex}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent-bright) var(--progress,var(--volume,0%)), #ffffff21 0);border-radius:3px;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;opacity:0;background:#fff;border:0;border-radius:50%;width:11px;height:11px;margin-top:-4px;transition:opacity .16s,transform .16s;box-shadow:0 0 0 4px #ffffff14}input[type=range]:hover::-webkit-slider-thumb{opacity:1}input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}input[type=range]::-moz-range-track{background:#ffffff21;border-radius:3px;height:3px}input[type=range]::-moz-range-progress{background:var(--accent-bright);border-radius:3px;height:3px}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:11px;height:11px}.transport{justify-content:center;align-items:center;gap:26px;padding-top:16px;display:flex}.play-btn{color:#0b0a08;cursor:pointer;background:#fff;border:0;border-radius:50%;place-items:center;width:58px;height:58px;padding:0;transition:transform .18s,box-shadow .18s;display:grid;box-shadow:0 12px 34px #ffffff21}.play-btn svg{margin-left:2px}.play-btn:hover{transform:scale(1.06);box-shadow:0 14px 42px #fff3}.play-btn:active{transform:scale(.96)}.skip-btn{place-items:center;width:38px;height:38px;display:grid;position:relative}.skip-btn span{font-size:.46rem;font-weight:800;position:absolute}.volume-row{color:var(--muted);font-variant-numeric:tabular-nums;border-top:1px solid #ffffff12;grid-template-columns:20px 1fr 24px;align-items:center;gap:9px;margin:14px 5px 2px;padding-top:14px;font-size:.59rem;display:grid}.volume-icon{place-items:center;padding:0;display:grid}.volume-row input{height:12px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}@media (width<=900px){.app-shell{padding:90px 18px 32px}.topbar{height:68px;padding:0 20px}.hud{grid-template-columns:1fr;gap:clamp(20px,4vw,28px);width:min(620px,100%);min-height:auto}.player-card{width:min(430px,100%);height:auto;margin:0 auto}.artwork-stage{width:min(100%,390px)}}@media (width<=520px){.app-shell{padding:82px 12px calc(32px + env(safe-area-inset-bottom));pointer-events:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overflow:hidden auto}.brand{letter-spacing:.16em;font-size:.65rem}.hud{gap:16px;width:100%}.player-card{background:linear-gradient(145deg,#181815e0,#0a0a09db);border-radius:22px;flex-direction:column;width:min(360px,100%);padding:12px;display:flex}.artwork-stage{align-self:center;width:180px;margin-inline:auto}.artwork{border-radius:15px}.track-heading{align-items:end;width:100%;min-width:0;padding:16px 4px 2px}.track-heading>div{min-width:0}.track-heading h1{text-overflow:ellipsis;white-space:nowrap;margin-top:5px;font-size:1.38rem;overflow:hidden}.track-heading p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.eyebrow{letter-spacing:.13em;font-size:.54rem}.like-btn{width:38px;height:38px}.spectrum{height:14px;min-height:14px;margin:8px 4px 0}.progress-container{padding:5px 4px 0}.progress-time{margin-bottom:5px}.transport{gap:28px;padding-top:8px}.play-btn{width:52px;height:52px}.volume-row{display:none}}@media (width<=370px){.artwork-stage{width:150px}.track-heading h1{font-size:1.14rem}}@media (width>=901px) and (height<=800px){.app-shell{padding-top:82px;padding-bottom:20px}.topbar{height:66px}.hud{--panel-height:clamp(560px, calc(100dvh - 110px), 650px);grid-template-columns:330px minmax(0,1fr);min-height:calc(100dvh - 105px)}.player-card{padding:13px}.track-heading{padding-top:16px}.progress-container{padding-top:13px}.transport{padding-top:10px}.play-btn{width:50px;height:50px}.volume-row{margin-top:11px;padding-top:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}