@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap";*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}:root{--primary: #c084fc;--primary-glow: rgba(192, 132, 252, .5);--bg-dark: #09090b;--glass: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .08)}body{margin:0;padding:0;background-color:var(--bg-dark);background-image:radial-gradient(circle at 20% 20%,rgba(192,132,252,.15) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(79,70,229,.15) 0%,transparent 40%);color:#fff;font-family:Plus Jakarta Sans,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.rb-container{width:100%;max-width:900px;padding:20px;display:flex;flex-direction:column;gap:20px}.glass-panel{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:32px;padding:40px;box-shadow:0 25px 50px -12px #00000080;position:relative;overflow:hidden}.header{text-align:center;margin-bottom:40px}.badge{background:var(--glass-border);padding:6px 16px;border-radius:100px;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--primary);display:inline-block;margin-bottom:16px}.title{font-size:3.5rem;font-weight:800;margin:0;text-transform:uppercase;letter-spacing:-.02em;background:linear-gradient(to bottom,#fff 30%,#ffffff80);-webkit-background-clip:text;-webkit-fill-color:transparent}.chord-display{display:flex;align-items:center;justify-content:center;gap:12px;font-size:1.5rem;font-weight:600;color:var(--primary);margin-top:8px}.icon-pulse{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.8}}.visualizer-container{position:relative;margin:60px 0}.progress-track{width:100%;height:4px;background:var(--glass-border);border-radius:2px;margin-bottom:40px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);box-shadow:0 0 20px var(--primary-glow);transition:width .1s linear}.piano-container{display:flex;justify-content:center;perspective:1000px}.piano{display:flex;position:relative;height:200px;background:#000;padding:10px;border-radius:12px;box-shadow:0 20px 40px #0006}.key{position:relative;border:1px solid #ddd;border-radius:0 0 6px 6px;cursor:pointer;transition:all .1s ease}.key.white{width:32px;height:180px;background:linear-gradient(to bottom,#fff,#ebebeb);z-index:1}.key.black{width:20px;height:110px;background:linear-gradient(to bottom,#333,#000);margin-left:-10px;margin-right:-10px;z-index:2;border:1px solid #000}.key.active.white{background:var(--primary);transform:translateY(2px);box-shadow:inset 0 0 20px #ffffff80}.key.active.black{background:var(--primary);transform:translateY(2px);box-shadow:0 0 15px var(--primary-glow)}.key-glow{position:absolute;inset:0;background:var(--primary-glow);filter:blur(10px);z-index:-1}.key-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:8px;color:#999;font-weight:700}.controls{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:40px}.control-btn{background:#fff;color:#000;border:none;padding:16px 32px;border-radius:16px;font-weight:800;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.control-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ffffff1a}.control-btn.active{background:var(--primary);color:#fff;box-shadow:0 0 30px var(--primary-glow)}.info{display:flex;align-items:center;gap:8px;color:#666;font-size:.875rem;font-weight:600}.vibe-circles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.circle{position:absolute;border-radius:50%;border:1px solid var(--glass-border);transform:translate(-50%,-50%);opacity:0}.circle-1{width:300px;height:300px}.circle-2{width:500px;height:500px}.circle.animate{animation:ripple 4s cubic-bezier(0,.2,.8,1) infinite}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.5);opacity:.5}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.glass-panel.loading{opacity:.5;pointer-events:none;filter:blur(5px)}.loader-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000c;z-index:10000;gap:20px}.loader{width:48px;height:48px;border:5px solid #FFF;border-bottom-color:var(--primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer-notes{text-align:center;color:#444;font-size:.75rem;letter-spacing:.2em}@media(max-width:768px){.title{font-size:2.5rem}.key.white{width:20px}.key.black{width:14px;margin-left:-7px;margin-right:-7px}}