*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;margin:0;padding:20px;color:#fff}h1{text-align:center;margin-bottom:30px;font-size:2rem;text-shadow:0 2px 10px rgba(0,0,0,.3)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;max-width:900px;margin:0 auto}.chord-btn{padding:20px 15px;font-size:1.1rem;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .15s ease;background:linear-gradient(145deg,#3a4a6b,#2a3a5b);color:#fff;box-shadow:0 4px 15px #0000004d}.chord-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006;background:linear-gradient(145deg,#4a5a7b,#3a4a6b)}.chord-btn:active,.chord-btn.playing{transform:translateY(0);background:linear-gradient(145deg,#e94560,#c73e54);box-shadow:0 2px 10px #e9456080}.controls{max-width:900px;margin:30px auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:center}.control-group{display:flex;align-items:center;gap:10px;background:#ffffff1a;padding:10px 20px;border-radius:10px}label{font-size:.9rem}select,input[type=range]{padding:5px 10px;border-radius:5px;border:none;background:#2a3a5b;color:#fff}input[type=range]{width:100px}.info{text-align:center;margin-top:20px;opacity:.7;font-size:.9rem}.chord-info{max-width:900px;margin:30px auto;background:#ffffff1a;border-radius:12px;padding:20px;text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center}.chord-info h2{margin:0 0 10px;font-size:1.5rem;color:#e94560}.chord-info .notes{font-size:1.2rem;margin-bottom:8px}.chord-info .intervals{font-size:.9rem;opacity:.8}.chord-info .description{font-size:.85rem;opacity:.7;margin-top:8px}