@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{
  --primary-accent:hsl(210 80% 55%);
  --secondary-accent:hsl(260 80% 60%);
  --text-primary:#ffffff;
  --text-secondary:#8e8e93;
  --bg:#000000;
  --glass:bg:rgba(28,28,30,.85);backdrop-filter:blur(30px);
  --vh:1vh;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh;overflow-x:hidden;}
.stage{height:calc(var(--vh)*100);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;}
#heroCanvas{width:60vmin;height:60vmin;opacity:0;animation:fadeIn 1.2s .2s forwards;}
.brand{text-align:center;margin-top:2rem;opacity:0;animation:fadeUp 1s .8s forwards;}
.brand__name{font-size:clamp(2.8rem,8vmin,4.5rem);font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--primary-accent),var(--secondary-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.brand__slogan-cn,.brand__slogan-en{font-size:clamp(1rem,2.5vmin,1.3rem);color:var(--text-secondary);margin:.2rem 0;}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(20px)}}

.controlBar{position:fixed;bottom:0;left:0;right:0;height:64px;var(--glass);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 12px;transform:translateY(100%);transition:transform .4s;z-index:10;}
.controlBar.show{transform:translateY(0);}
.controlBar__left{display:flex;align-items:center;flex:1;min-width:0;}
.coverDrop{width:48px;height:48px;border-radius:12px;overflow:hidden;position:relative;margin-right:12px;background:#2c2c2e;}
.coverDrop input{position:absolute;inset:0;opacity:0;cursor:pointer;}
#miniVis{width:100%;height:100%;}
.coverDrop__hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#8e8e93;pointer-events:none;}
.trackInfo{flex:1;min-width:0;}#trackTitle{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}#trackArtist{font-size:12px;color:var(--text-secondary);}
.controlBar__center{display:flex;gap:16px;}
.ctrl{background:none;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.ctrl:active{background:rgba(255,255,255,.15);}
.ctrl--play{font-size:24px;background:var(--primary-accent);}
@media (orientation:landscape) and (max-height:480px){
  .controlBar{position:absolute;bottom:8px;left:8px;right:8px;border-radius:16px;height:56px;}
}
.vizBox{padding:16px;display:flex;justify-content:center;}
#visualizerCanvas{width:100%;max-width:800px;height:60vmin;border-radius:16px;background:radial-gradient(circle at center,rgba(0,122,255,.1),transparent);}