:root{--accent:#f0a869;--bg:#040913;--text:#f6f2ea;--muted:#f6f2eaad;--font-body:"Avenir Next","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;--font-display:"Iowan Old Style","Palatino Linotype","Book Antiqua","Songti SC","STSong",Georgia,serif;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box}html,body,#app{min-height:100%;min-height:100svh;min-height:100dvh}body{min-height:100svh;min-height:100dvh;color:var(--text);font-family:var(--font-body);background:radial-gradient(circle at 22% 22%,color-mix(in srgb,var(--accent)18%,transparent),transparent 24%),radial-gradient(circle at 78% 18%,#ffffff14,transparent 16%),linear-gradient(180deg,#060b14 0%,#040913 46%,#02060f 100%);margin:0;overflow:hidden}body:before{content:"";pointer-events:none;opacity:.12;background-color:#0000;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:80px 80px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;top:0;bottom:0;left:0;right:0}.screen{width:100%;height:100dvh;min-height:100svh;position:relative;overflow:hidden}.visualizer,.visualizer-glow{position:absolute;top:0;bottom:0;left:0;right:0}.visualizer{width:100%;height:100%;display:block}.visualizer-glow{pointer-events:none;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent)18%,transparent),transparent 24%),linear-gradient(180deg,#0000002e,transparent 16%,transparent 84%,#00000038);mix-blend-mode:screen}.hud,.unlock-overlay{z-index:2;position:absolute}.hud{left:max(20px,calc(var(--safe-left) + 12px));right:max(20px,calc(var(--safe-right) + 12px));bottom:max(20px,calc(var(--safe-bottom) + 12px));grid-template-columns:1fr auto;align-items:end;gap:20px;display:grid}.volume-knob,.unlock-overlay{color:inherit;font:inherit;border:none}.track-strip{gap:6px;min-width:0;padding-bottom:8px;display:grid}.track-title{font-family:var(--font-display);font-size:max(2.2rem,min(5vw,4.8rem));font-weight:700;line-height:.96}.track-artist{color:var(--muted);font-size:.96rem}.custom-note{color:#f6f2ea7a;letter-spacing:.04em;opacity:0;pointer-events:none;min-height:1.1em;font-size:.74rem}.custom-note.is-visible{opacity:var(--note-opacity,1)}.knob-stack{justify-items:center;gap:10px;display:grid}.volume-knob{cursor:grab;touch-action:none;background:radial-gradient(circle at 35% 28%,#fff3,#0000 26%),linear-gradient(#ffffff17,#050b13c7);border:1px solid #ffffff1f;border-radius:999px;width:94px;height:94px;position:relative;box-shadow:inset 0 2px 14px #ffffff0f,0 16px 32px #00000047}.volume-knob.is-dragging{cursor:grabbing}.knob-core{border-radius:inherit;background:radial-gradient(circle at 36% 30%,#ffffff47,#0000 24%),linear-gradient(#0c1624e6,#050a12eb);position:absolute;top:12px;bottom:12px;left:12px;right:12px;box-shadow:inset 0 1px 8px #ffffff0f}.knob-indicator{--knob-angle:-12deg;background:linear-gradient(180deg,#fffffff2,var(--accent));transform-origin:50% 33px;width:4px;height:30px;transform:rotate(var(--knob-angle));box-shadow:0 0 14px color-mix(in srgb,var(--accent)38%,transparent);border-radius:999px;margin-left:-2px;position:absolute;top:14px;left:50%}.knob-readout{text-align:center;min-width:3ch;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.08em}.unlock-overlay{cursor:pointer;background:0 0;justify-items:center;gap:14px;padding:0;display:grid;top:50%;left:50%;transform:translate(-50%,-50%)}.unlock-ring{background:radial-gradient(circle,color-mix(in srgb,var(--accent)24%,transparent),transparent 62%),#080e1857;width:120px;height:120px;box-shadow:inset 0 0 26px color-mix(in srgb,var(--accent)12%,transparent),0 0 40px color-mix(in srgb,var(--accent)12%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #ffffff2e;border-radius:999px}.unlock-label{letter-spacing:.08em;background:#080e1875;border:1px solid #ffffff14;border-radius:999px;padding:10px 14px}.is-hidden{display:none}@media (max-width:720px){.hud{left:max(14px,calc(var(--safe-left) + 10px));right:max(14px,calc(var(--safe-right) + 10px));bottom:max(14px,calc(var(--safe-bottom) + 10px));grid-template-columns:1fr auto;align-items:end}.track-title{font-size:max(2rem,min(10vw,3.6rem))}.volume-knob{width:82px;height:82px}.knob-indicator{transform-origin:50% 29px;height:25px;top:12px}}