:root{--bg-color: #0f0c29;--text-color: #ffffff;--accent-color: #ff0080}body{margin:0;padding:0;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e);color:var(--text-color);font-family:Inter,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center}.rb-container{text-align:center;max-width:600px;width:100%;position:relative}.song-progress-bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(to right,#ff0080,#7928ca);box-shadow:0 0 10px #ff0080;transition:width .3s ease;z-index:1000}.midi-badge{position:absolute;top:-60px;left:50%;transform:translate(-50%);background:#ffffff1a;padding:5px 15px;border-radius:20px;font-size:.8rem;border:1px solid rgba(255,255,255,.2);color:#4ecdc4}.vinyl-record{width:250px;height:250px;background:#111;border-radius:50%;margin:0 auto 40px;position:relative;border:10px solid #222;box-shadow:0 0 50px #00000080,0 0 20px #ffffff1a;background-image:repeating-radial-gradient(circle,#222,#111 2px,#222 4px);animation:rotate 4s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;background:#ff0080;border-radius:50%;display:flex;justify-content:center;align-items:center;border:4px solid #fff}.label-text{font-size:12px;font-weight:700;color:#fff}.title{font-size:3rem;margin-bottom:0;text-transform:uppercase;letter-spacing:4px;background:linear-gradient(to right,#ff0080,#7928ca);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:1rem;opacity:.7;margin-bottom:40px}.chord-display{display:flex;justify-content:center;gap:15px;margin-bottom:40px}.chord-box{width:80px;height:80px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;display:flex;justify-content:center;align-items:center;font-weight:700;transition:all .3s ease}.chord-box.active{background:var(--chord-color);border-color:#fff;box-shadow:0 0 30px var(--chord-color);transform:scale(1.1)}.play-btn{background:transparent;border:2px solid #fff;color:#fff;padding:15px 40px;font-size:1.2rem;border-radius:50px;cursor:pointer;transition:all .3s;letter-spacing:2px;font-weight:700}.play-btn:hover{background:#fff;color:#000}.play-btn.playing{background:#ff0080;border-color:#ff0080;box-shadow:0 0 20px #ff0080}.visualizer{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:50px;margin-top:40px}.bar{width:6px;height:10px;background:#fff;border-radius:3px;opacity:.3}.bar.anim{animation:bounce .5s ease-in-out infinite alternate}@keyframes bounce{0%{height:10px}to{height:40px}}