.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px}
a.card{display:block;text-decoration:none;color:var(--fg);transition:border-color var(--t)}
a.card:hover{border-color:var(--ac)}
a.card b{color:var(--ac);display:block;margin-bottom:2px}
a.card span{color:var(--mut);font-size:.88rem}
.btn{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:9px 14px;cursor:pointer;transition:border-color var(--t)}
.btn:hover{border-color:var(--ac)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-fg);font-weight:650}
.btn.on{border-color:var(--ac);color:var(--ac)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg .btn{padding:7px 11px;font-size:.9rem}
.chords{display:flex;flex-wrap:wrap;gap:8px;margin:.4em 0}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 12px;font-weight:650;font-size:1.15rem;cursor:pointer}
.chip.easy{border-color:var(--ac);color:var(--ac)}
.chip small{display:block;color:var(--mut);font-weight:400;font-size:.7rem}
.sug{display:flex;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:baseline}
.sug b{color:var(--ac);min-width:5.6em}.sug span{flex:1}.sug em{color:var(--mut);font-style:normal;font-size:.85rem}
.chk{display:flex;align-items:center;gap:8px;margin:1.2em 0 0}.chk label{margin:0}
.tag{display:inline-block;font-size:.72rem;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-right:4px}
.legend{display:flex;gap:14px;font-size:.82rem;color:var(--mut);margin:.4em 0;flex-wrap:wrap}
.legend i{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:5px;vertical-align:-1px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.diagrams{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px;text-align:center;cursor:pointer}
.diagram:hover{border-color:var(--ac)}
.diagram small{display:block;color:var(--mut);font-size:.75rem}
.sug{flex-wrap:wrap}.sug b{min-width:0;flex:0 0 100%}.sug span{flex:1 1 70%}