:root{--black:#050505;--white:#fff;--cyan:#4FC2CC;--pink:#ED5FA1;--yellow:#F5E50C}
*{box-sizing:border-box}html,body{margin:0;background:var(--black);color:var(--white);min-height:100%;font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}
button{font-family:"Press Start 2P",monospace}.hidden{display:none!important}.app{min-height:100vh;background:#050505}
.intro{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:5vw;padding:clamp(24px,5vw,70px);position:relative;overflow:hidden}
.intro-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(79,194,204,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(79,194,204,.08) 1px,transparent 1px);background-size:32px 32px}
.intro-inner,.intro-preview{position:relative;z-index:2}.logo{width:min(520px,86vw);display:block;margin-bottom:28px}
.kicker{font:10px/1.6 "Press Start 2P",monospace;color:var(--cyan);margin:0 0 20px}
h1{font:900 clamp(54px,8.8vw,132px)/.9 "Press Start 2P",monospace;letter-spacing:-.06em;margin:0}h1 span{color:var(--yellow)}
.lead{max-width:760px;font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:#d0d0d0;margin:30px 0 26px}
.intro-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{min-height:56px;padding:0 18px;border:3px solid #fff;background:#050505;color:#fff;cursor:pointer;font-size:10px;box-shadow:6px 6px 0 #fff}
.btn-yellow{background:var(--yellow);color:#050505;border-color:var(--yellow);box-shadow:6px 6px 0 var(--pink)}
.btn-ghost{border-color:var(--cyan);box-shadow:6px 6px 0 var(--cyan)}
.small{font-size:12px;color:#777;margin-top:20px;max-width:620px;line-height:1.5}
.intro-preview{display:grid;place-items:center}.preview-card{width:min(520px,80vw);aspect-ratio:4/5;border:12px solid var(--yellow);background:#050505;position:relative;display:grid;place-items:center;overflow:hidden}
.preview-card img{width:52%;filter:drop-shadow(14px 14px 0 var(--pink));z-index:2}.preview-card>span{position:absolute;left:18px;bottom:18px;font:11px/1.4 "Press Start 2P",monospace;color:var(--cyan)}
.preview-bars{position:absolute;left:18px;right:18px;bottom:60px;top:18px;display:flex;gap:10px;align-items:end}
.preview-bars i{flex:1;background:var(--cyan);height:20%;animation:bars .8s steps(4,end) infinite alternate}.preview-bars i:nth-child(2n){background:var(--pink);animation-delay:-.3s}.preview-bars i:nth-child(3n){background:var(--yellow);animation-delay:-.5s}
@keyframes bars{from{height:12%}to{height:88%}}
.visualizer{position:fixed;inset:0;background:#050505}#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#050505}
.hud{position:absolute;left:16px;right:16px;top:14px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:"Press Start 2P",monospace;pointer-events:none}
.hud-left{display:flex;align-items:flex-end;gap:14px}.hud-left img{width:180px}.hud-left span{font-size:8px;color:var(--cyan)}
.hud-right{display:flex;align-items:center;gap:12px;font-size:7px;color:#aaa;pointer-events:auto}.hud-right button{background:#0d0d0d;color:#fff;border:1px solid #333;padding:10px;font-size:7px;cursor:pointer}
.meter-strip{position:absolute;left:18px;bottom:18px;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(540px,48vw)}
.meter-strip div{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:8px}.meter-strip span{font:6px/1 "Press Start 2P",monospace;color:#777}
.meter-strip div:after{content:"";grid-column:2;height:8px;background:#151515;border:1px solid #333}.meter-strip i{grid-column:2;grid-row:1/3;height:8px;width:0;background:var(--cyan);z-index:2}
.meter-strip div:nth-child(2) i{background:var(--pink)}.meter-strip div:nth-child(3) i{background:var(--yellow)}.meter-strip div:nth-child(4) i{background:#fff}
.scene-indicator{position:absolute;right:18px;bottom:18px;z-index:10;text-align:right;font-family:"Press Start 2P",monospace}.scene-indicator span{display:block;font-size:34px;color:var(--yellow)}.scene-indicator b{display:block;font-size:8px;color:#fff;margin-top:8px}
.hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:9;font:6px/1 "Press Start 2P",monospace;color:#555}
.visualizer.hide-hud .hud,.visualizer.hide-hud .meter-strip,.visualizer.hide-hud .scene-indicator,.visualizer.hide-hud .hint{display:none}
@media(max-width:800px){.intro{grid-template-columns:1fr}.intro-preview{order:-1}.preview-card{width:min(320px,70vw)}.hud-left img{width:130px}.hud-right{gap:6px}.hud-right span{display:none}.meter-strip{width:62vw;grid-template-columns:1fr 1fr}.scene-indicator span{font-size:24px}}
@media(prefers-reduced-motion:reduce){.preview-bars i{animation:none}}

.dance-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;top:-9999px}