:root{--bg: #1b1512;--panel: #241c18;--card: #2c221c;--card-border: #3a2d24;--gold: #d9a94f;--gold-bright: #f0c477;--text: #f2e9dd;--text-dim2: #b9a893}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Work Sans,system-ui,sans-serif}#root{min-height:100vh}.app{max-width:760px;margin:0 auto;padding:48px 24px 64px;display:flex;flex-direction:column;align-items:center;text-align:center}.app-header h1{font-family:Fraunces,serif;font-weight:700;font-size:2.4rem;margin:0 0 8px;color:var(--gold-bright);letter-spacing:.01em}.tagline{margin:0 0 40px;color:var(--text-dim2);font-size:.95rem}.progression{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:36px;width:100%}.chord-card{font-family:Fraunces,serif;font-size:1.3rem;font-weight:500;background:var(--card);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:18px 20px;min-width:84px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.chord-card:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}.chord-card:disabled{cursor:default;opacity:.85}.chord-card.is-active{border-color:var(--gold-bright);box-shadow:0 0 0 2px #f0c47759,0 6px 20px #f0c47726;color:var(--gold-bright)}.controls{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-bottom:32px;width:100%}.control{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text-dim2);min-width:160px}.control select,.control input[type=range]{accent-color:var(--gold)}.control select{background:var(--panel);color:var(--text);border:1px solid var(--card-border);border-radius:6px;padding:8px 10px;font-family:inherit;font-size:.9rem}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}.btn{font-family:Work Sans,sans-serif;font-weight:600;font-size:.95rem;padding:12px 22px;border-radius:8px;border:1px solid var(--card-border);background:var(--panel);color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease}.btn:hover{border-color:var(--gold)}.btn-primary{background:var(--gold);border-color:var(--gold);color:#1b1512}.btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright)}.hint{color:var(--text-dim2);font-size:.8rem;opacity:.8}@media (max-width: 480px){.app{padding:32px 16px 48px}.app-header h1{font-size:1.9rem}.chord-card{min-width:72px;padding:14px;font-size:1.1rem}}