.ca-tabs{display:flex;gap:8px;margin:20px 0}.ca-tabs button,.ca-controls button,.ca-controls select{padding:12px 16px;border:1px solid #66756b;border-radius:8px;background:#17221d;color:#f4f8f5;font:inherit;font-size:14px;cursor:pointer}.ca-tabs button[aria-pressed=true]{background:#bcf35c;color:#14200e;border-color:#bcf35c}.ca-panel{padding:24px;background:#121b17;border:1px solid #43594a;border-radius:16px;color:#eef5ef}.ca-panel[hidden],#chordDictionaryPanel[hidden]{display:none!important}.ca-panel p{font-size:16px;line-height:1.6}.ca-panel h2{font-size:28px}.ca-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:20px 0}.ca-controls label{display:grid;gap:7px;font-size:14px}.ca-board{overflow-x:auto;padding:12px 0}.ca-row{display:grid;grid-template-columns:65px repeat(8,minmax(42px,1fr));min-width:445px;gap:3px;margin-bottom:4px}.ca-row>strong{font-size:16px;align-self:center}.ca-row small{display:block;font-size:12px}.ca-row button{min-height:50px;border:1px solid #3e7250;background:linear-gradient(#15271c 48%,#82958a 50%,#15271c 52%);color:#f0fff5;border-radius:5px;font-size:16px;cursor:pointer}.ca-row button.selected{background:#39de79;color:#082b15;border-color:#6bff9e;font-weight:700}.ca-row button.sounding{outline:3px solid #fff;outline-offset:-4px}.ca-frets{text-align:center;font-size:14px;color:#c4d2c8}.ca-result{padding:20px;background:#1e2c24;border-radius:12px;margin:20px 0}.ca-result h3{font-size:32px;margin:8px 0}.ca-result summary{cursor:pointer;padding:10px 0}.ca-tab{max-width:500px;background:#fff;border-radius:10px;padding:12px}.ca-tab svg{display:block;width:100%;fill:#13261a;font:16px monospace}.ca-tab line{stroke:#243e2c}.ca-tab rect{fill:white}.ca-controls button:disabled{opacity:.5;cursor:default}.ca-panel button:focus-visible,.ca-tabs button:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:600px){.ca-panel{padding:14px}.ca-controls{gap:8px}.ca-controls button{flex:1}.ca-tabs button{flex:1}}
/* Continuous strings and frets: the controls are the guitar neck itself. */
.ca-board{padding:8px 0 0}.ca-neck{display:block;width:100%;min-width:580px;max-height:430px}.ca-wood{fill:#153b28;stroke:#50725e;stroke-width:2}.ca-fret{stroke:#9faea5;stroke-width:3}.ca-fret.ca-nut{stroke:#f1eee1;stroke-width:8}.ca-string{stroke:#d1d8d3;pointer-events:none}.ca-inlay{fill:#839689;opacity:.55}.ca-hit{cursor:pointer;outline:none}.ca-target{fill:transparent;stroke:transparent}.ca-hit:hover .ca-target,.ca-hit:focus-visible .ca-target{fill:#76ffa229;stroke:#80eea4;stroke-width:2}.ca-note{fill:#39ed7a;stroke:#b1ffca;stroke-width:1.5}.ca-note-label,.ca-interval,.ca-fret-number{text-anchor:middle;font-family:inherit;pointer-events:none}.ca-note-label{fill:#dfece3;font-size:20px;font-weight:650}.ca-hit.selected .ca-note-label{fill:#082c16}.ca-hit[data-fret="-1"].selected .ca-note-label{fill:#9affb9}.ca-interval{fill:#082c16;font-size:13px;font-weight:600}.ca-fret-number,.ca-string-name{fill:#e6eee9;font-size:17px}.ca-hit.sounding .ca-note{fill:#efff68;stroke:white;stroke-width:4}.ca-position-summary{color:#c4d6ca;font-size:14px!important;margin:4px 0 12px}.ca-board:focus-within{scroll-behavior:smooth}
/* Bright green neck and sound-driven motion, without moving the hit targets. */
.ca-wood{fill:#075c2b;stroke:#3dff8c}.ca-fret{stroke:#94d7ae}.ca-string{stroke:#d8ffe7}.ca-inlay{fill:#71dca0}.ca-note{fill:#24ff76;stroke:#b4ffd0}.ca-hit.sounding .ca-note{fill:#62ff9d;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 9px #28ff76);animation:ca-note-pulse .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.ca-string.sounding{stroke:#43ff91;filter:drop-shadow(0 0 4px #29ff79);animation:ca-string-vibrate .09s linear infinite alternate}.ca-controls button[aria-pressed=true]{border-color:#32ff82;box-shadow:0 0 0 2px #32ff8233}.ca-neck .ca-note-label{font-size:18px}
@keyframes ca-note-pulse{from{transform:scale(1)}to{transform:scale(1.14)}}@keyframes ca-string-vibrate{from{transform:translateY(-.6px)}to{transform:translateY(.6px)}}@media(prefers-reduced-motion:reduce){.ca-hit.sounding .ca-note,.ca-string.sounding{animation:none;transform:none}}