@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f1a;color:#e0e0e0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;min-width:320px}#root{width:100%}.app{max-width:1400px;margin:0 auto;padding:4px 6px}.app-header{text-align:center;padding:10px 0 8px}.app-header h2{font-family:JetBrains Mono,monospace;font-size:1.6rem;color:#59f;letter-spacing:3px;text-transform:uppercase;font-weight:800}.subtitle{color:#888;font-size:.85rem;margin-top:3px;letter-spacing:.5px}.main-layout{display:flex;gap:8px;align-items:flex-start}.sidebar{flex-shrink:0;width:240px;max-height:calc(100vh - 80px);overflow-y:auto}.content-area{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.chord-info{background:#13131f;border:1px solid #222238;border-radius:8px;padding:10px 14px;text-align:center}.chord-name{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:800;color:#fff;margin-bottom:4px}.chord-details{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:.88rem;color:#777}.root-badge{color:#f55;font-weight:700}.pattern-hint{margin-top:6px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap;font-size:.78rem}.hint-label{color:#777;font-weight:600}.hint-note{font-family:JetBrains Mono,monospace;background:#181830;padding:2px 7px;border-radius:3px;color:#48f;font-size:.75rem}.hint-root{color:#f44;border:1px solid #ff4444}.chord-description{font-family:JetBrains Mono,monospace;color:#5ccc5c;font-size:.78rem;margin-top:3px}.chord-selector{background:#13131f;border:1px solid #222238;border-radius:8px;padding:10px}.selector-group{margin-bottom:12px}.selector-group:last-child{margin-bottom:0}.selector-group h3{font-family:JetBrains Mono,monospace;font-size:.72rem;text-transform:uppercase;color:#888;letter-spacing:1.5px;margin-bottom:6px}.button-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.note-btn{font-family:JetBrains Mono,monospace;background:#181830;border:1px solid #222238;color:#ccc;padding:10px 0;border-radius:6px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .12s}.note-btn:hover{background:#1e3a6e;border-color:#48f}.note-btn.active{background:#48f;color:#fff;border-color:#48f;box-shadow:0 0 10px #4488ff4d}.type-list{display:flex;flex-direction:column;gap:3px}.type-btn{background:#181830;border:1px solid #222238;color:#ccc;padding:8px 10px;border-radius:5px;font-size:.82rem;font-weight:500;cursor:pointer;text-align:left;transition:all .12s}.type-btn:hover{background:#1e3a6e;border-color:#48f}.type-btn.active{background:#48f;color:#fff;border-color:#48f;box-shadow:0 0 10px #4488ff4d}@media(max-width:768px){.main-layout{flex-direction:column}.sidebar{width:100%;max-height:none}.button-grid{grid-template-columns:repeat(7,1fr)}.type-list{flex-direction:row;flex-wrap:wrap}.type-btn{flex:1;min-width:100px;text-align:center}.chord-name{font-size:1.5rem}.app{padding:4px}}@media(max-width:480px){.button-grid{grid-template-columns:repeat(4,1fr)}.type-btn{min-width:70px;font-size:.72rem}}