:root{--cc-primary:var(--main-primary);--cc-primary-rgb:99, 102, 241;--cc-text:#1e293b;--cc-text-secondary:#475569;--cc-text-muted:#64748b;--cc-bg:#fff;--cc-bg-hover:#f1f5f9;--cc-border:#e2e8f0;--cc-border-strong:#cbd5e1;--cc-string:#94a3b8;--cc-fret:#d1d5db;--cc-dot:var(--main-primary);--cc-dot-text:#fff;--cc-open:#10b981;--cc-mute:#ef4444;--cc-barre:var(--main-primary);--cc-piano-white:#fff;--cc-piano-black:#1e293b;--cc-piano-active:var(--main-primary);--cc-piano-root:#6366f1;--cc-piano-border:#d1d5db;--cc-radius:var(--main-radius);--cc-radius-lg:var(--main-radius-lg)}._cc-container{max-width:720px;margin:0 auto}._cc-display{margin-top:var(--main-space-5)}._cc-chord-name{text-align:center;color:var(--cc-text);margin-bottom:var(--main-space-1);font-size:1.75rem;font-weight:700}._cc-chord-formula{text-align:center;color:var(--cc-text-muted);font-size:.875rem;font-family:var(--main-font-mono);margin-bottom:var(--main-space-5)}._cc-diagrams{gap:var(--main-space-4);grid-template-columns:1fr 1fr;display:grid}._cc-play-wrap{margin-top:var(--main-space-5);justify-content:center;display:flex}._cc-play-btn{align-items:center;gap:var(--main-space-2);background:var(--cc-primary);color:#fff;border-radius:var(--cc-radius);cursor:pointer;box-shadow:0 2px 8px rgba(var(--cc-primary-rgb), .25);border-style:none;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;display:inline-flex}._cc-play-btn:hover{opacity:.9}._cc-play-btn._cc-playing{background:var(--main-error);box-shadow:0 2px 8px #ef444440}@media (max-width:768px){._cc-container{padding-left:1rem;padding-right:1rem}._cc-diagrams{grid-template-columns:1fr}._cc-chord-name{font-size:1.5rem}}._cc-selector{gap:var(--main-space-3);flex-direction:column;display:flex}._cc-selector-row{justify-content:center;display:flex}._cc-root-notes{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}._cc-root-btn{border-style:solid;border-width:1.5px;border-color:var(--cc-border);border-radius:var(--cc-radius);background:var(--cc-bg);min-width:40px;height:36px;color:var(--cc-text);cursor:pointer;padding:0 .5rem;font-size:.8125rem;font-weight:600;box-shadow:0 1px 3px #00000014}._cc-root-btn:hover{border-color:var(--cc-primary);color:var(--cc-primary)}._cc-root-btn._cc-active{background:var(--cc-primary);color:#fff;border-color:var(--cc-primary);box-shadow:0 2px 8px rgba(var(--cc-primary-rgb), .3)}._cc-chord-types{flex-wrap:wrap;justify-content:center;gap:6px;max-width:600px;display:flex}._cc-type-btn{border-style:solid;border-width:1px;border-color:var(--cc-border);border-radius:var(--main-radius-full);background:var(--cc-bg);height:32px;color:var(--cc-text-secondary);cursor:pointer;padding:0 .75rem;font-size:.75rem;font-weight:500}._cc-type-btn:hover{border-color:var(--cc-primary);color:var(--cc-primary)}._cc-type-btn._cc-active{background:rgba(var(--cc-primary-rgb), .1);color:var(--cc-primary);border-color:var(--cc-primary);font-weight:600}@media (max-width:480px){._cc-root-btn{min-width:36px;height:34px;font-size:.75rem}._cc-type-btn{height:30px;padding:0 .625rem;font-size:.6875rem}}._cc-card{background:var(--cc-bg);border-radius:var(--cc-radius-lg);padding:var(--main-space-4);box-shadow:var(--main-shadow-sm);border-style:solid;border-width:1px;border-color:var(--cc-border)}._cc-card-header{margin-bottom:var(--main-space-3);padding-bottom:var(--main-space-2);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cc-border);justify-content:space-between;align-items:center;display:flex}._cc-card-label{align-items:center;gap:var(--main-space-2);color:var(--cc-text);text-transform:uppercase;letter-spacing:.05em;font-size:.8125rem;font-weight:600;display:inline-flex}._cc-card-label svg{color:var(--cc-primary)}._cc-voicing-nav{align-items:center;gap:var(--main-space-1);display:flex}._cc-nav-btn{border-radius:var(--cc-radius);background:var(--cc-bg-hover);width:28px;height:28px;color:var(--cc-text-secondary);cursor:pointer;border-style:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._cc-nav-btn:hover:not(:disabled){color:var(--cc-primary)}._cc-nav-btn:disabled{opacity:.35;cursor:not-allowed}._cc-voicing-info{color:var(--cc-text-muted);text-align:center;min-width:30px;font-size:.75rem;font-weight:500}._cc-inversion-btns{gap:4px;display:flex}._cc-inv-btn{border-radius:var(--cc-radius);background:var(--cc-bg-hover);height:28px;color:var(--cc-text-secondary);cursor:pointer;border-style:none;padding:0 .625rem;font-size:.6875rem;font-weight:500}._cc-inv-btn:hover{color:var(--cc-primary)}._cc-inv-btn._cc-inv-btn-active{background:rgba(var(--cc-primary-rgb), .1);color:var(--cc-primary);font-weight:600}._cc-guitar-diagram{justify-content:center;align-items:center;display:flex}._cc-guitar-diagram svg{max-width:100%;height:auto}._cc-guitar-diagram .cc-string-line{stroke:var(--cc-string);stroke-width:1.5px}._cc-guitar-diagram .cc-fret-line{stroke:var(--cc-fret);stroke-width:1px}._cc-guitar-diagram .cc-nut{stroke:var(--cc-text);stroke-width:3px}._cc-guitar-diagram .cc-dot{fill:var(--cc-dot)}._cc-guitar-diagram .cc-dot-text{fill:var(--cc-dot-text);text-anchor:middle;dominant-baseline:central;font-size:11px;font-weight:600}._cc-guitar-diagram .cc-open-circle{fill:none;stroke:var(--cc-open);stroke-width:2px}._cc-guitar-diagram .cc-mute-text{fill:var(--cc-mute);text-anchor:middle;font-size:14px;font-weight:700}._cc-guitar-diagram .cc-barre{fill:var(--cc-barre);rx:8;ry:8}._cc-guitar-diagram .cc-fret-number{fill:var(--cc-text-muted);text-anchor:end;font-size:11px;font-weight:500}._cc-guitar-diagram .cc-string-label{fill:var(--cc-text-muted);text-anchor:middle;font-size:10px;font-weight:500}._cc-piano-diagram{padding:var(--main-space-2) 0;justify-content:center;align-items:center;display:flex}._cc-piano-diagram svg{max-width:100%;height:auto}._cc-piano-diagram .cc-white-key{fill:var(--cc-piano-white);stroke:var(--cc-piano-border);stroke-width:1px;rx:0;ry:4}._cc-piano-diagram .cc-white-key.cc-key-active{fill:rgba(var(--cc-primary-rgb), .2);stroke:var(--cc-primary);stroke-width:1.5px}._cc-piano-diagram .cc-white-key.cc-key-root{fill:rgba(var(--cc-primary-rgb), .35);stroke:var(--cc-piano-root);stroke-width:2px}._cc-piano-diagram .cc-black-key{fill:var(--cc-piano-black);rx:0;ry:3}._cc-piano-diagram .cc-black-key.cc-key-active{fill:var(--cc-primary)}._cc-piano-diagram .cc-black-key.cc-key-root{fill:var(--cc-piano-root)}._cc-piano-diagram .cc-key-label{text-anchor:middle;pointer-events:none;font-size:9px;font-weight:600}._cc-piano-diagram .cc-key-label-white{fill:var(--cc-primary)}._cc-piano-diagram .cc-key-label-black{fill:#fff}._cc-search-wrap{width:100%;max-width:320px;position:relative}._cc-search-icon{color:var(--cc-text-muted);pointer-events:none;margin-top:-7px;line-height:1;position:absolute;top:50%;left:.75rem}._cc-search{border-style:solid;border-width:1.5px;border-color:var(--cc-border);border-radius:var(--cc-radius-lg);background:var(--cc-bg);width:100%;height:40px;color:var(--cc-text);outline:none;padding:0 2.25rem 0 2.5rem;font-size:.875rem}._cc-search:focus{border-color:var(--cc-primary);box-shadow:0 0 0 3px rgba(var(--cc-primary-rgb), .1)}._cc-search::placeholder{color:var(--cc-text-muted)}._cc-search-clear{background:var(--cc-bg-hover);border-radius:var(--main-radius-full);width:24px;height:24px;color:var(--cc-text-muted);cursor:pointer;border-style:none;justify-content:center;align-items:center;margin-top:-12px;padding:0;display:flex;position:absolute;top:50%;right:.5rem}._cc-search-clear:hover{color:var(--cc-text)}._cc-search-results{background:var(--cc-bg);border-style:solid;border-width:1px;border-color:var(--cc-border);border-radius:var(--cc-radius);box-shadow:var(--main-shadow-lg);z-index:20;max-height:240px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}._cc-search-item{color:var(--cc-text);cursor:pointer;justify-content:space-between;align-items:center;padding:.5rem .75rem;font-size:.8125rem;display:flex}._cc-search-item:hover{background:var(--cc-bg-hover)}._cc-search-item-name{font-weight:600}._cc-search-item-notes{color:var(--cc-text-muted);font-size:.6875rem;font-family:var(--main-font-mono)}@media (max-width:480px){._cc-search-wrap{max-width:100%}}