:root{color-scheme:dark;--ink:#f7fbff;--muted:rgba(225,235,244,.68);--line:rgba(255,255,255,.18);--line-bright:rgba(255,255,255,.34);--cyan:#79e7ff;--shadow:0 24px 70px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;color:var(--ink);background:#07101e;font-family:"Noto Sans TC","Noto Sans JP",system-ui,sans-serif}body{overflow:hidden}button,input{font:inherit}button{color:inherit}
.liquid-gradient{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(125deg,#07152d 0%,#17103b 42%,#082b42 72%,#10142f 100%);background-size:220% 220%;animation:ambientBackground 18s ease-in-out infinite;pointer-events:none}
.liquid-gradient:before{content:"";position:absolute;inset:-35%;z-index:0;background:conic-gradient(from 0deg at 50% 50%,rgba(22,104,255,.52),rgba(194,55,255,.48),rgba(255,66,130,.38),rgba(47,222,255,.52),rgba(22,104,255,.52));filter:blur(90px);animation:colorRoll 22s linear infinite!important;will-change:transform}.liquid-gradient:after{content:"";position:absolute;inset:0;z-index:3;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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.liquid-gradient svg{position:absolute;width:0;height:0}.liquid-gradient-container{width:100%;height:100%;filter:url(#liquidGoo) blur(42px)}
.gradient-orb,.interactive-gradient{position:absolute;width:80vmax;height:80vmax;top:calc(50% - 40vmax);left:calc(50% - 40vmax);background:radial-gradient(circle at center,rgba(18,113,255,.84) 0,rgba(18,113,255,0) 52%) no-repeat;mix-blend-mode:hard-light;transform-origin:center;will-change:transform}
.gradient-orb-1{animation:liquidVertical 18s ease-in-out infinite!important}.gradient-orb-2{background-image:radial-gradient(circle at center,rgba(171,74,255,.84) 0,rgba(171,74,255,0) 52%);transform-origin:calc(50% - 22vw);animation:liquidOrbitTwo 20s ease-in-out infinite!important}.gradient-orb-3{top:20%;left:-28%;background-image:radial-gradient(circle at center,rgba(66,225,255,.76) 0,rgba(66,225,255,0) 52%);transform-origin:calc(50% + 28vw);animation:liquidOrbitThree 26s linear infinite!important}.gradient-orb-4{background-image:radial-gradient(circle at center,rgba(240,62,132,.68) 0,rgba(240,62,132,0) 52%);animation:liquidHorizontal 22s ease-in-out infinite!important}.gradient-orb-5{width:150vmax;height:150vmax;top:-75vmax;left:-35vmax;transform-origin:42% 65%;background-image:radial-gradient(circle at center,rgba(255,186,71,.54) 0,rgba(255,186,71,0) 50%);animation:liquidOrbitFive 24s ease-in-out infinite!important}.interactive-gradient{width:100vmax;height:100vmax;top:-50vmax;left:-50vmax;opacity:.62;background-image:radial-gradient(circle at center,rgba(94,229,255,.78) 0,rgba(94,229,255,0) 48%);animation:none!important;will-change:transform}.is-playing .gradient-orb{filter:saturate(1.08)}
@keyframes colorRoll{0%{transform:translate3d(-8%,-6%,0) rotate(0deg) scale(1)}50%{transform:translate3d(8%,6%,0) rotate(180deg) scale(1.14)}100%{transform:translate3d(-8%,-6%,0) rotate(360deg) scale(1)}}@keyframes ambientBackground{0%{background-position:0% 20%}25%{background-position:70% 0%}50%{background-position:100% 80%}75%{background-position:30% 100%}100%{background-position:0% 20%}}@keyframes liquidVertical{0%,100%{transform:translate3d(-12vw,-32vh,0) scale(.92)}50%{transform:translate3d(16vw,30vh,0) scale(1.12)}}@keyframes liquidOrbitTwo{0%{transform:translate3d(-28vw,-10vh,0) rotate(0deg)}25%{transform:translate3d(8vw,-30vh,0) rotate(90deg)}50%{transform:translate3d(30vw,12vh,0) rotate(180deg)}75%{transform:translate3d(-6vw,28vh,0) rotate(270deg)}100%{transform:translate3d(-28vw,-10vh,0) rotate(360deg)}}@keyframes liquidOrbitThree{0%{transform:translate3d(0,0,0) scale(.9)}33%{transform:translate3d(55vw,-24vh,0) scale(1.16)}66%{transform:translate3d(30vw,42vh,0) scale(.96)}100%{transform:translate3d(0,0,0) scale(.9)}}@keyframes liquidHorizontal{0%,100%{transform:translate3d(-38vw,-14vh,0) scale(.9)}50%{transform:translate3d(38vw,18vh,0) scale(1.15)}}@keyframes liquidOrbitFive{0%{transform:translate3d(-18vw,-20vh,0) rotate(0deg) scale(.9)}50%{transform:translate3d(36vw,30vh,0) rotate(180deg) scale(1.12)}100%{transform:translate3d(-18vw,-20vh,0) rotate(360deg) scale(.9)}}
.app{position:relative;z-index:2;width:100vw;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);gap:16px;padding:16px}.stage,.playlist-wrap,.lyrics-panel,.info-player{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.13);-webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%)}
.stage{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:30px}.stage:before,.playlist-wrap:before,.lyrics-panel:before,.info-player:before{content:"";position:absolute;z-index:2;top:0;left:8%;width:84%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);opacity:.55;pointer-events:none}.stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 55%,rgba(0,0,0,.22));pointer-events:none}
.stage-footer{position:absolute;left:50%;bottom:clamp(16px,3vw,34px);z-index:4;width:min(780px,calc(100% - 48px));transform:translateX(-50%)}.info-player{position:relative;overflow:hidden;border-radius:24px}.story-card{padding:20px 24px 16px}.story-title{margin:0 0 6px;font-family:"Noto Serif TC","Noto Serif JP",serif;font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em}.story-intent{margin:0;color:var(--muted);font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.transport{border-top:1px solid rgba(255,255,255,.12);padding:15px 20px;display:grid;grid-template-columns:auto 1fr 44px;align-items:center;gap:16px;background:rgba(3,8,16,.18)}.play{width:52px;height:52px;border:1px solid var(--line-bright);border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.22);cursor:pointer;font-size:18px;transition:transform .2s ease,background .2s ease}.play:hover{transform:scale(1.05);background:rgba(121,231,255,.24)}.transport-center{min-width:0}.now-label{display:block;margin-bottom:7px;overflow:hidden;font-weight:700;white-space:nowrap;text-overflow:ellipsis}.seek{width:100%;accent-color:var(--cyan)}.time{margin-top:3px;color:var(--muted);font:11px ui-monospace,monospace}.volume-control{height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font:8px/1 ui-monospace,monospace;letter-spacing:.14em}.volume{width:22px;height:60px;margin:0;accent-color:var(--cyan);cursor:ns-resize;writing-mode:vertical-lr;direction:rtl}audio{display:none}
.sidebar{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(190px,35vh) minmax(0,1fr);gap:16px}.playlist-wrap,.lyrics-panel{position:relative;overflow:hidden;border-radius:24px}.playlist-wrap{padding:0;overflow:hidden}.playlist-head{position:relative;z-index:3;margin:0;padding:17px 18px 14px;border-radius:23px 23px 0 0;border-bottom:1px solid rgba(255,255,255,.12);background:#687795;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:11px;font-weight:700;letter-spacing:.18em}
.track-button{position:relative;width:100%;display:block;margin:7px 0;padding:11px 14px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.track-button:hover{transform:translateX(-2px);border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.12)}.track-button.active{border-color:rgba(121,231,255,.58);background:linear-gradient(100deg,rgba(121,231,255,.22),rgba(188,167,255,.15));box-shadow:0 0 26px rgba(87,199,255,.12),inset 0 1px 0 rgba(255,255,255,.2)}.track-button.active:before{content:"•";position:absolute;left:5px;color:#c8f7ff}.track-name{display:block;overflow:hidden;font-family:"Noto Sans TC","Noto Sans JP",system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.lyrics-panel{min-height:0;display:grid;grid-template-rows:auto 1fr}.lyrics-head{padding:17px 18px 14px;border-radius:23px 23px 0 0;border-bottom:1px solid rgba(255,255,255,.12);background:#687795}.lyrics-head h2{margin:0;font-size:11px;letter-spacing:.18em}.lyrics-scroll{min-width:0;margin:0;overflow:auto;padding:20px 20px 64px;color:rgba(240,247,251,.82);white-space:pre-wrap;font:13px/1.8 "Noto Sans TC","Noto Sans JP",system-ui,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.25)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent}*::-webkit-scrollbar{width:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-button{display:none;width:0;height:0}*::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:rgba(255,255,255,.24);background-clip:padding-box}
@media(max-width:980px){body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-columns:1fr}.stage{height:64vh;min-height:540px}.sidebar{min-height:720px;grid-template-rows:280px 440px}}
@media(max-width:600px){.app{gap:10px;padding:10px}.stage{height:58vh;min-height:500px;border-radius:22px}.stage-footer{bottom:10px;width:calc(100% - 20px)}.info-player{border-radius:18px}.story-card{padding:14px 16px 12px}.story-intent{-webkit-line-clamp:1}.transport{grid-template-columns:auto 1fr;gap:12px;padding:12px 14px}.play{width:46px;height:46px}.volume-control{display:none}.sidebar{min-height:680px;grid-template-rows:260px 410px;gap:10px}.playlist-wrap,.lyrics-panel{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.play,.track-button{transition:none}}

/* Full-screen glass stage: content floats over one continuous animated canvas. */
.app{display:block;padding:0;overflow:hidden}
.stage{position:absolute;inset:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.stage:before{display:none}
.stage-footer{position:absolute;left:calc((100% - 430px)/2);bottom:24px;z-index:5;width:min(860px,calc(100% - 478px));transform:translateX(-50%)}
.sidebar{position:absolute;z-index:3;top:3vh;right:20px;bottom:3vh;width:min(390px,calc(100% - 40px));display:grid;grid-template-rows:minmax(0,3fr) minmax(0,7fr);gap:16px;pointer-events:none}
.playlist-wrap,.lyrics-panel{pointer-events:auto}
.playlist-wrap{display:grid;grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:0}.playlist-scroll{min-height:0;overflow-y:auto;padding:10px 12px 12px}
.playlist-head{grid-row:1}
.lyrics-panel{width:min(760px,100%);justify-self:center}
@media(max-width:980px){body{overflow:hidden}.app{height:100vh;min-height:0}.stage{height:auto;min-height:0}.sidebar{top:20px;bottom:210px;min-height:0;grid-template-rows:minmax(0,3fr) minmax(0,7fr)}.stage-footer{left:50%;width:min(860px,calc(100% - 48px));transform:translateX(-50%)}}
@media(max-width:600px){.app{padding:0}.stage{height:auto;min-height:0;border-radius:0}.sidebar{top:10px;right:10px;bottom:188px;width:calc(100% - 20px);grid-template-rows:170px minmax(0,1fr);gap:10px}.playlist-wrap{display:grid}.stage-footer{bottom:10px;width:calc(100% - 20px)}}