.filter-bar{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.filter-bar__row{flex-wrap:wrap;gap:6px;display:flex}.filter-pill{border:.5px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:20px;padding:4px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:background-color .15s,color .15s}.filter-pill:hover{border-color:var(--color-border-hover)}.filter-pill--active{background:var(--color-text-primary);color:var(--color-bg);border-color:#0000}.filter-pill--favorite{color:#e74c3c;border-color:#e74c3c40}.filter-pill--favorite.filter-pill--active{color:#fff;background:#e74c3c;border-color:#0000}.filter-bar__divider{background:var(--color-border);align-self:stretch;width:1px;margin:2px 4px}.chord-detail{border:.5px solid var(--color-border);background:var(--color-surface);border-radius:8px;margin-bottom:16px;padding:20px;position:relative}.chord-detail__close{color:var(--color-text-tertiary);cursor:pointer;background:0 0;border:none;padding:0;font-size:24px;line-height:1;position:absolute;top:8px;right:12px}.chord-detail__close:hover{color:var(--color-text-primary)}.chord-detail__content{gap:24px;display:flex}.chord-detail__canvas{flex-shrink:0}.chord-detail__info{flex:1;min-width:0}.chord-detail__header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.chord-detail__name{color:var(--color-text-primary);margin:0;font-size:28px;font-weight:600}.chord-detail__popularity{letter-spacing:1px;color:var(--color-text-secondary,#999);font-size:14px}.chord-detail__favorite{cursor:pointer;color:var(--color-text-tertiary,#bbb);background:0 0;border:none;padding:0 2px;font-size:20px;line-height:1;transition:color .15s}.chord-detail__favorite:hover,.chord-detail__favorite--active{color:#e74c3c}.chord-detail__notes{color:var(--color-text-secondary);margin-bottom:12px;font-size:14px}.chord-detail__label{color:var(--color-text-primary);margin-right:8px;font-weight:600}.chord-detail__table{border-collapse:collapse;width:100%;margin-bottom:12px;font-size:13px}.chord-detail__table th{text-align:left;border-bottom:.5px solid var(--color-border);color:var(--color-text-secondary);padding:4px 8px;font-weight:500}.chord-detail__table td{border-bottom:.5px solid var(--color-border);color:var(--color-text-primary);padding:4px 8px}.chord-detail__tip{background:var(--color-bg);color:var(--color-text-secondary);border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.6}.chord-detail__tip-label{color:var(--color-text-primary);margin-bottom:4px;font-weight:600}.chord-detail__tip p{margin:0}@media (width<=600px){.chord-detail__content{flex-direction:column;align-items:center}}.chord-card{border:.5px solid var(--color-border);background:var(--color-surface);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:8px;transition:border-color .15s,background-color .15s;display:flex;position:relative}.chord-card__favorite{cursor:pointer;color:var(--color-text-tertiary,#bbb);background:0 0;border:none;padding:2px;font-size:16px;line-height:1;transition:color .15s;position:absolute;top:4px;right:4px}.chord-card__favorite:hover,.chord-card__favorite--active{color:#e74c3c}.chord-card:hover{border-color:var(--color-border-hover)}.chord-card--selected{border-color:var(--color-text-primary);border-width:1.5px}.chord-card__name{color:var(--color-text-primary);font-size:18px;font-weight:600}.chord-card__popularity{letter-spacing:1px;color:var(--color-text-secondary,#999);font-size:10px}.chord-card__badge{border-radius:20px;padding:1px 8px;font-size:11px;font-weight:500;line-height:1.5;display:inline-block}.chord-card__badge--Major{background:var(--badge-major-bg);color:var(--badge-major-text)}.chord-card__badge--Minor{background:var(--badge-minor-bg);color:var(--badge-minor-text)}.chord-card__badge--7th{background:var(--badge-7th-bg);color:var(--badge-7th-text)}.chord-card__badge--maj7{background:var(--badge-maj7-bg);color:var(--badge-maj7-text)}.chord-card__badge--m7{background:var(--badge-m7-bg);color:var(--badge-m7-text)}.chord-card__badge--sus2{background:var(--badge-sus2-bg);color:var(--badge-sus2-text)}.chord-card__badge--sus4{background:var(--badge-sus4-bg);color:var(--badge-sus4-text)}.chord-card__badge--dim{background:var(--badge-dim-bg);color:var(--badge-dim-text)}.chord-card__badge--aug{background:var(--badge-aug-bg);color:var(--badge-aug-text)}.chord-card__badge--add9{background:var(--badge-add9-bg);color:var(--badge-add9-text)}.chord-card__badge--9th{background:var(--badge-9th-bg);color:var(--badge-9th-text)}.chord-card__badge--6th{background:var(--badge-6th-bg);color:var(--badge-6th-text)}.chord-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;display:grid}.language-switcher{border:.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text-primary);cursor:pointer;border-radius:6px;padding:4px 8px;font-family:inherit;font-size:13px}.language-switcher:hover{border-color:var(--color-border-hover)}.app__header{border-bottom:.5px solid var(--color-border);justify-content:space-between;align-items:center;margin-bottom:16px;padding:24px 0 16px;display:flex}.app__title{color:var(--color-text-primary);margin:0;font-size:24px;font-weight:600}.app__subtitle{color:var(--color-text-secondary);margin:4px 0 0;font-size:14px}.app__main{padding-bottom:32px}:root{--color-bg:#fff;--color-surface:#f5f4f0;--color-border:#0000001f;--color-border-hover:#0000004d;--color-text-primary:#1a1a18;--color-text-secondary:#6b6a65;--color-text-tertiary:#9c9a92;--badge-major-bg:#b5d4f4;--badge-major-text:#0c447c;--badge-minor-bg:#9fe1cb;--badge-minor-text:#085041;--badge-7th-bg:#fac775;--badge-7th-text:#633806;--badge-maj7-bg:#a8e0e0;--badge-maj7-text:#0a4f4f;--badge-m7-bg:#a8e0e0;--badge-m7-text:#0a4f4f;--badge-sus2-bg:#d4bff5;--badge-sus2-text:#3b1a6e;--badge-sus4-bg:#d4bff5;--badge-sus4-text:#3b1a6e;--badge-dim-bg:#f5b5b5;--badge-dim-text:#7c0c0c;--badge-aug-bg:#f5cfa8;--badge-aug-text:#6e3a0a;--badge-add9-bg:#b5bff5;--badge-add9-text:#1a2a6e;--badge-9th-bg:#b5bff5;--badge-9th-text:#1a2a6e;--badge-6th-bg:#f5b5d4;--badge-6th-text:#6e0a3b;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--color-text-primary);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#1a1a18;--color-surface:#242422;--color-border:#ffffff1f;--color-border-hover:#ffffff4d;--color-text-primary:#e0e0dc;--color-text-secondary:#9c9a92;--color-text-tertiary:#6b6a65;--badge-major-bg:#185fa5;--badge-major-text:#b5d4f4;--badge-minor-bg:#0f6e56;--badge-minor-text:#9fe1cb;--badge-7th-bg:#854f0b;--badge-7th-text:#fac775;--badge-maj7-bg:#0a4f4f;--badge-maj7-text:#a8e0e0;--badge-m7-bg:#0a4f4f;--badge-m7-text:#a8e0e0;--badge-sus2-bg:#3b1a6e;--badge-sus2-text:#d4bff5;--badge-sus4-bg:#3b1a6e;--badge-sus4-text:#d4bff5;--badge-dim-bg:#7c0c0c;--badge-dim-text:#f5b5b5;--badge-aug-bg:#6e3a0a;--badge-aug-text:#f5cfa8;--badge-add9-bg:#1a2a6e;--badge-add9-text:#b5bff5;--badge-9th-bg:#1a2a6e;--badge-9th-text:#b5bff5;--badge-6th-bg:#6e0a3b;--badge-6th-text:#f5b5d4}}*,:before,:after{box-sizing:border-box}body{background:var(--color-bg);margin:0}#root{max-width:960px;margin:0 auto;padding:0 16px}