:root{color-scheme:light;--paper:#eee8dc;--ink:#2e3933;--muted:#747c70;--accent:#b86c84;--panel:rgba(250,247,238,.94);--line:rgba(51,72,55,.2);--size:1}
:root[data-theme=night]{color-scheme:dark;--paper:#17272a;--ink:#ebe6da;--muted:#b0bcb2;--accent:#e49ab2;--panel:rgba(26,44,46,.95);--line:rgba(230,240,228,.22)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:10px 18px;min-height:46px;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button[aria-pressed=true],button.primary{background:var(--ink);color:var(--paper)}[hidden]{display:none!important}button:disabled{opacity:.45;cursor:wait}
#stage{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:var(--paper) url('assets/day.webp') center/cover no-repeat;overflow:hidden;isolation:isolate}html[data-theme=night] #stage{background-image:url('assets/night.webp')}#stage::after{position:absolute;inset:0;content:"";z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(242,237,224,.26),transparent 75%)}html[data-theme=night] #stage::after{background:linear-gradient(90deg,rgba(14,32,35,.28),transparent 75%)}::backdrop{background:var(--paper)}
#audio{position:absolute;width:1px;height:1px;left:0;top:0;opacity:0;pointer-events:none}#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#stage[data-video=true]{background:#050908!important;color:#f8f5ed;--ink:#f8f5ed;--paper:#14201d;--muted:#d0d8cf;--panel:rgba(20,31,28,.91);--line:#eeeeee44}#stage[data-video=true]::after{display:none}#stage[data-video=true] .lyrics,#stage[data-video=true] .decoration{display:none}#stage[data-video=true] .track-card{top:16%;right:10%;pointer-events:none;text-shadow:0 2px 8px #000}#stage[data-video=true] .track-card img,#stage[data-video=true] .track-card small{display:none}#stage[data-video=true] .track-card h1{font-size:clamp(20px,2.3vw,36px)}#stage[data-video=true] .track-card{transition:opacity .2s}#stage[data-video=true][data-playing=true] .track-card{opacity:0}#stage[data-hide-controls=true] .transport,#stage[data-hide-controls=true] .top-actions,#stage[data-hide-controls=true] .brand{opacity:0;pointer-events:none}
.brand{position:absolute;left:max(5%,env(safe-area-inset-left));top:max(22px,calc(env(safe-area-inset-top) + 12px));display:flex;align-items:center;gap:16px}.brand>span{font:clamp(23px,2vw,40px)/1.2 "Kaiti SC","STKaiti",serif;letter-spacing:.15em}.brand small{color:var(--muted);font-size:12px;letter-spacing:.1em}.top-actions{position:absolute;right:max(3%,env(safe-area-inset-right));top:max(14px,calc(env(safe-area-inset-top) + 10px));display:flex;gap:8px}
.track-card{position:absolute;top:20%;left:8%;right:30%;display:flex;align-items:center;gap:20px;min-width:0}.track-card img{width:clamp(58px,6vw,100px);height:auto;border-radius:50%;aspect-ratio:1;object-fit:cover;box-shadow:0 6px 25px #0002}.track-card div{min-width:0}.track-card h1{font:500 clamp(25px,3vw,60px)/1.3 "Kaiti SC","STKaiti","Songti SC",serif;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0}.track-card small{font-size:13px;letter-spacing:.2em;color:var(--muted)}.track-card p{margin:0;color:var(--muted);font-size:clamp(14px,1.3vw,24px)}
.lyrics{position:absolute;top:43%;left:8%;right:29%;max-height:30%;overflow:hidden;font-family:"Kaiti SC","STKaiti","Songti SC",serif}.lyrics p{margin:0;overflow-wrap:anywhere}#current-lyric{font-size:calc(clamp(28px,3.3vw,76px) * var(--size));line-height:1.65;letter-spacing:.08em;color:var(--muted)}#current-lyric .sung{color:var(--accent)}#next-lyric{margin-top:16px;font-size:calc(clamp(17px,1.7vw,35px) * var(--size));line-height:1.5;color:var(--muted);opacity:.7}.decoration{position:absolute;bottom:24%;left:8%;width:42%;opacity:.55}.decoration svg{height:50px;width:100%;fill:none;stroke:var(--accent);stroke-width:1.2}.decoration span{display:block;font-size:12px;letter-spacing:.3em;color:var(--muted)}
.transport{position:absolute;left:2%;right:2%;bottom:max(16px,env(safe-area-inset-bottom));padding:16px 20px;display:flex;align-items:center;gap:24px;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 6px 32px #0001}.play-controls,.levels{display:flex;align-items:center;gap:8px;flex-shrink:0}.play-controls button{padding:10px 14px;white-space:nowrap}.play-controls #play{min-width:72px}.levels button{display:flex;align-items:center;gap:7px;white-space:nowrap}.levels small{font-size:12px}.timeline{min-width:0;flex:1}.timeline>div{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.timeline #status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline input{width:100%;margin:0;accent-color:var(--accent);height:32px;cursor:pointer}.notice{position:absolute;bottom:calc(130px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90%;background:var(--ink);color:var(--paper);border-radius:18px;box-shadow:0 10px 50px #0003;z-index:5;font-size:16px}
.overlay{position:fixed;inset:0;z-index:20}.backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#14202166}.drawer{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));bottom:max(16px,env(safe-area-inset-bottom));width:min(480px,calc(100% - 32px));border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:24px;overflow:auto;overscroll-behavior:contain;box-shadow:0 16px 80px #0004}.drawer header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px}.drawer h2{margin:4px 0;font-size:26px;font-weight:500}.drawer small{color:var(--muted)}#tracks{display:grid;gap:12px}.track-option{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;text-align:left;width:100%}.track-option img{width:54px;height:54px;border-radius:12px;object-fit:cover}.track-option div{min-width:0}.track-option strong,.track-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-option strong{font-weight:500;font-size:20px}.track-option small{font-size:13px;margin-top:5px}.track-option[aria-current=true]{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.note{font-size:13px;color:var(--muted);line-height:1.9;margin-top:24px}.drawer label{display:grid;gap:12px;margin:25px 0}.drawer select{width:100%;min-height:46px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}.drawer input{min-height:32px;width:100%;accent-color:var(--accent)}
@media(max-width:1000px){.transport{gap:14px;padding:14px}.levels button{padding:10px 12px}.levels small{display:none}.brand small{display:none}.track-card{left:6%;right:27%}.lyrics{left:6%;right:27%}}
@media(max-width:650px),(max-height:500px){.top-actions button{padding:9px 13px;font-size:14px}.transport{display:grid;grid-template-columns:1fr auto;gap:4px 12px;border-radius:20px;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom))}.timeline{grid-column:1/-1;grid-row:2}.play-controls{gap:4px}.play-controls button{font-size:14px;padding:8px 10px}.levels{gap:4px}.levels button{padding:8px 13px;min-height:44px}.notice{bottom:calc(155px + env(safe-area-inset-bottom));width:max-content;max-width:90%}.decoration{display:none}}
@media(orientation:portrait){#stage{background-position:66% center}#stage::after{background:linear-gradient(90deg,rgba(245,240,228,.75),rgba(245,240,228,.2))}html[data-theme=night] #stage::after{background:linear-gradient(90deg,rgba(15,32,34,.7),rgba(15,32,34,.2))}.brand{left:6%;top:max(24px,calc(env(safe-area-inset-top) + 12px))}.track-card{top:21%;left:7%;right:7%;gap:14px}.track-card h1{font-size:clamp(26px,6vw,48px)}.lyrics{top:43%;left:7%;right:7%;max-height:28%}#current-lyric{font-size:calc(clamp(30px,6.6vw,56px) * var(--size))}#next-lyric{font-size:calc(clamp(18px,3.8vw,28px) * var(--size))}}
@media(max-height:500px) and (orientation:landscape){.brand{top:14px}.track-card{top:22%;left:5%;gap:12px}.track-card img{width:48px}.track-card small{display:none}.track-card h1{font-size:25px;margin:0}.track-card p{font-size:13px}.lyrics{top:44%;left:5%;right:15%;max-height:22%}#current-lyric{font-size:calc(27px * var(--size));line-height:1.2}#next-lyric{display:none}.transport{grid-template-columns:auto minmax(100px,1fr) auto;padding:8px 12px}.timeline{grid-column:2;grid-row:1}.levels{grid-column:3;grid-row:1}.notice{bottom:90px}}
.levels #level-2 small{display:block}.demo-promotion{position:absolute;left:2%;right:2%;bottom:calc(118px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2px 10px;padding:8px 12px;border-radius:12px;background:var(--panel);color:var(--ink);font-size:clamp(13px,1.05vw,19px);line-height:1.6;text-align:center;border:1px solid var(--line)}.demo-promotion strong{white-space:nowrap;font-weight:600;color:var(--accent)}.demo-promotion strong span{user-select:all;font-variant-numeric:tabular-nums;letter-spacing:.04em}#stage[data-hide-controls=true] .demo-promotion{opacity:0;pointer-events:none}
@media(max-width:650px){.demo-promotion{left:12px;right:12px;bottom:calc(151px + env(safe-area-inset-bottom));font-size:12px;gap:2px 5px;padding:7px 10px}.levels #level-2{gap:3px;padding:7px 9px}.levels #level-2 small{display:block;font-size:10px}.lyrics{max-height:23%}}
@media(max-height:500px) and (orientation:landscape){.demo-promotion{bottom:calc(86px + env(safe-area-inset-bottom));font-size:12px;padding:4px 10px;gap:0 8px}.lyrics{max-height:19%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}