@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap";:root{--gold: #D4AF37;--gold-hover: #bda036;--black-nav: #141414;--black-text: #1a1a1a;--white-bg: #f8f9fa;--white-card: #ffffff;--gray-text: #6c757d}body{margin:0;background-color:var(--white-bg);color:var(--black-text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.navbar{background-color:var(--black-nav);border-bottom:3px solid var(--gold);padding:0 40px;height:75px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000;box-shadow:0 4px 20px #00000026}.brand-logo{font-size:1.5rem;font-weight:900;letter-spacing:1px;text-decoration:none;display:flex;align-items:center;gap:5px}.brand-white{color:#fff}.brand-gold{color:var(--gold)}.nav-links{display:flex;gap:35px;list-style:none;margin:0;padding:0}.mobile-nav-toggle{display:none;border:1px solid rgba(212,175,55,.4);background:#0f172a;color:#f8fafc;border-radius:10px;width:38px;height:38px;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer}.nav-item{color:#fff;text-decoration:none;font-weight:500;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;padding:10px 0;position:relative}.nav-item:after{content:"";position:absolute;width:0;height:2px;bottom:0;left:0;background-color:var(--gold);transition:width .3s ease}.nav-item:hover{color:var(--gold)}.nav-item:hover:after{width:100%}.btn-gold{background-color:var(--gold);color:var(--black-text);padding:10px 24px;border-radius:50px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #d4af374d}.btn-gold:hover{background-color:var(--gold-hover);transform:translateY(-2px);box-shadow:0 6px 20px #d4af3780}.btn-active-gold{background:var(--gold);color:#000;border:none;padding:8px 12px;border-radius:6px;font-weight:700;cursor:pointer;transition:.2s}.btn-active-dark{background:var(--black-nav);color:var(--gold);border:none;padding:6px 15px;border-radius:20px;font-weight:700;cursor:pointer;transition:.2s}.btn-outline{background:#fff;border:1px solid #ddd;padding:8px 12px;border-radius:6px;cursor:pointer;transition:.2s}.btn-outline:hover{border-color:var(--gold)}.btn-outline-pill{background:#fff;border:1px solid #ddd;padding:6px 15px;border-radius:20px;cursor:pointer;transition:.2s}.btn-outline-pill:hover{border-color:var(--black-nav)}.select-premium{padding:10px 15px;border-radius:8px;border:1px solid var(--gold);font-family:inherit;font-weight:700;outline:none;background:#fff;cursor:pointer}.premium-card{background:var(--white-card);border-radius:16px;padding:30px;box-shadow:0 8px 30px #0000000a;border:1px solid rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease}.premium-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000014;border-color:#d4af374d}.scale-chord-card{transition:all .3s ease;border:1px solid #eee}.scale-chord-card:hover{border-color:var(--gold)!important;transform:translateY(-3px);box-shadow:0 5px 15px #d4af3733}.at-cursor-bar{background:#d4af371a!important;z-index:50!important}.at-cursor-beat{background:#d4af3766!important;border-radius:6px;z-index:100!important;box-shadow:0 0 12px #d4af3766;transition:left .05s linear,top .05s linear,width .05s linear}.at-surface{position:relative}@media(max-width:900px){.navbar{flex-direction:row;height:auto;padding:12px 14px;gap:10px}.brand-logo{font-size:1.15rem!important;letter-spacing:.3px}.mobile-nav-toggle{display:inline-flex;margin-left:auto}.nav-links{display:none!important;width:100%;order:3;flex-direction:column;gap:8px;background:#0f172a;border-radius:12px;padding:10px;border:1px solid rgba(212,175,55,.2)}.nav-links.nav-links-open{display:flex!important}.nav-item{display:block;width:100%;box-sizing:border-box;padding:10px 12px!important;border-radius:8px;background:#ffffff0a;font-size:.84rem!important;letter-spacing:.2px}.nav-actions{display:none!important;width:100%;order:4;flex-direction:column;align-items:stretch!important;gap:8px!important;background:#0f172a;border-radius:12px;padding:10px;border:1px solid rgba(148,163,184,.25)}.nav-actions.nav-actions-open{display:flex!important}.nav-actions select,.nav-actions a,.nav-actions button{width:100%;box-sizing:border-box;justify-content:center}.nav-actions>div{width:100%;display:flex;flex-direction:column;gap:8px}.btn-gold{width:100%;text-align:center}.select-premium{width:100%;margin-bottom:10px}}.btn-gold{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem}.btn-gold:active{transform:scale(.95);box-shadow:0 0 20px #d4af3799}.lyric-line{font-family:Roboto Mono,monospace;font-size:var(--lyrics-size, 1.1rem);line-height:2.2;color:#2c3e50;margin-bottom:8px}.chord-btn{color:#d35400;font-weight:700;cursor:pointer;background:#fdf2e9;padding:2px 6px;border-radius:4px;border:1px solid #fad7a0;margin:0 2px;display:inline-block;transition:all .2s}.chord-btn:hover{background:#d35400;color:#fff}.control-bar{position:sticky;top:80px;z-index:100;background:#fff;padding:15px;border-radius:12px;box-shadow:0 4px 20px #00000014;display:flex;gap:15px;flex-wrap:wrap;margin-bottom:30px;border:1px solid #eee}