.chord-pill{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:9999px;font-size:.875rem;line-height:1;cursor:pointer;color:var(--color-muted);transition:border-color .15s,color .15s,background-color .15s}.chord-pill:hover{border-color:var(--color-accent);color:var(--color-foreground)}.chord-pill:has(input:checked){background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-background);font-weight:600}.chord-pill:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}.chord-play-btn{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;flex-shrink:0;background-color:var(--color-foreground);color:var(--color-background);border:none;border-radius:50%;cursor:pointer;transition:opacity .15s,transform .1s}.chord-play-btn:hover:not(:disabled){opacity:.85}.chord-play-btn:active:not(:disabled){transform:scale(.95)}.chord-play-btn:disabled{opacity:.5;cursor:not-allowed}.chord-play-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}figure{margin:0}.action-pill{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:9999px;font-size:.875rem;line-height:1;cursor:pointer;color:var(--color-muted);background:transparent;transition:border-color .15s,color .15s,background-color .15s}.action-pill:hover{border-color:var(--color-accent);color:var(--color-foreground)}.action-pill.is-active{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-background);font-weight:600}.action-pill:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.progression-slot-wrap{position:relative;display:inline-flex}.progression-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.5rem;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.75rem;cursor:grab;background:transparent;color:var(--color-foreground);transition:border-color .15s;touch-action:pan-y}.progression-slot-wrap.is-dragging .progression-slot{opacity:.4;cursor:grabbing}.progression-slot-wrap.is-drop-target .progression-slot{border-color:var(--color-accent);border-style:dashed}.progression-slot .slot-chord{font-weight:600;font-size:1rem}.progression-slot .slot-degree{font-size:.7rem;color:var(--color-muted);margin-top:.15rem}.progression-slot:hover{border-color:var(--color-accent)}.progression-slot.is-selected{border-color:var(--color-accent);border-width:2px}.progression-slot:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.progression-slot-remove{position:absolute;top:-.55rem;right:-.55rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--color-border);color:var(--color-background);font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}@media(hover:hover){.progression-slot-remove{opacity:0;transition:opacity .15s}.progression-slot-wrap:hover .progression-slot-remove,.progression-slot-remove:focus-visible{opacity:1}}.progression-slot-remove:hover:not(:disabled){background:var(--color-accent)}.progression-slot-remove:disabled{opacity:.3;cursor:not-allowed}.progression-add-btn{display:flex;align-items:center;justify-content:center;min-width:3.5rem;padding:.5rem .75rem;border:1px dashed var(--color-border);border-radius:.75rem;color:var(--color-muted);cursor:pointer;background:transparent;font-size:1.25rem;line-height:1}.progression-add-btn:hover{border-color:var(--color-accent);color:var(--color-foreground)}.preset-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;padding:.4rem .8rem;min-height:2.9rem;border:1px solid var(--color-border);border-radius:.75rem;background:transparent;color:var(--color-muted);cursor:pointer;text-align:left;transition:border-color .15s,color .15s,background-color .15s}.preset-card:hover{border-color:var(--color-accent);color:var(--color-foreground)}.preset-card .preset-name{font-size:.8rem;font-weight:600;color:var(--color-foreground);line-height:1.15}.preset-card .preset-numerals{font-size:.72rem;line-height:1.15}.preset-card.is-active{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-background)}.preset-card.is-active .preset-name{color:var(--color-background)}.preset-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.chord-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--color-border)}.chord-tab{padding:.6rem 1rem;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--color-muted);font-size:.95rem;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}.chord-tab:hover{color:var(--color-foreground)}.chord-tab.is-active{color:var(--color-foreground);border-bottom-color:var(--color-accent)}.chord-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.tab-chord:not(:empty){margin-left:.45rem;padding:.1rem .4rem;border-radius:.35rem;background:var(--color-accent);color:var(--color-background);font-size:.75rem;font-weight:600}.voicing-arrow{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:50%;background:transparent;color:var(--color-foreground);font-size:1rem;line-height:1;cursor:pointer}.voicing-arrow:hover:not(:disabled){border-color:var(--color-accent)}.voicing-arrow:disabled{opacity:.3;cursor:not-allowed}.voicing-arrow:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.slot-tones{font-size:.65rem;color:var(--color-muted);margin-top:.3rem;letter-spacing:.04em}.editor-tones{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline}.editor-tone .tone-name{font-size:1rem;font-weight:600}.editor-tone .tone-degree{font-size:.65rem;color:var(--color-accent);vertical-align:super;margin-left:.1rem}.progression-card{padding:.6rem .9rem;border:1px solid var(--color-border);border-radius:.5rem;min-width:5rem;text-align:center}.progression-card .card-name{font-weight:600}.progression-card .card-tones{font-size:.8rem;color:var(--color-muted);margin-top:.2rem}.tempo-input{width:4.5rem;padding:.3rem .5rem;border:1px solid var(--color-border);border-radius:.4rem;background:transparent;color:var(--color-foreground);font-size:.875rem;color-scheme:dark}.tempo-slider{width:7rem;accent-color:var(--color-accent)}.tempo-slider:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.tempo-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.chord-play-btn .icon-stop,.chord-play-btn.is-playing .icon-play{display:none}.chord-play-btn.is-playing .icon-stop{display:block}.progression-slot-wrap.is-playing .progression-slot{border-color:var(--color-accent);background-color:color-mix(in srgb,var(--color-accent) 18%,transparent)}@media(min-width:1024px){.viz-panel{position:sticky;top:2rem;align-self:start;max-height:calc(100vh - 4rem);overflow-y:auto}}.section-details>summary{cursor:pointer;list-style:none;user-select:none}.section-details>summary::-webkit-details-marker{display:none}.section-details>summary .chevron{display:inline-block;transition:transform .15s}.section-details[open]>summary .chevron{transform:rotate(90deg)}.section-details>summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.jam-list{list-style:none;counter-reset:jam;margin:0;padding:0;border-top:1px solid var(--color-border)}.jam-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:.85rem .25rem .85rem 2.1rem;position:relative;border-bottom:1px solid var(--color-border)}.jam-row:before{counter-increment:jam;content:counter(jam);position:absolute;left:.25rem;top:.95rem;width:1.5rem;color:var(--color-muted);font-size:.8rem;font-variant-numeric:tabular-nums}.jam-song{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 16rem}.jam-title{font-weight:500}.jam-artist,.jam-note{color:var(--color-muted);font-size:.85rem}.jam-note{font-size:.8rem;opacity:.85}.jam-links{display:flex;flex-wrap:wrap;gap:.4rem}.jam-link{padding:.35rem .7rem;border:1px solid var(--color-border);border-radius:.4rem;color:var(--color-muted);font-size:.8rem;white-space:nowrap;transition:color .15s,border-color .15s,background-color .15s}.jam-link:hover{color:var(--color-foreground);border-color:var(--color-accent)}.jam-link.is-primary{color:var(--color-background);background:var(--color-accent);border-color:var(--color-accent)}.jam-link.is-primary:hover{color:var(--color-background);opacity:.85}.jam-link.is-quiet{border-color:transparent}.jam-toolbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}.jam-filter{flex:1 1 14rem;max-width:22rem;padding:.45rem .7rem;border:1px solid var(--color-border);border-radius:.4rem;background:transparent;color:var(--color-foreground);font-size:.9rem}.jam-filter::placeholder{color:var(--color-muted)}.jam-filter:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}.jam-meta{display:flex;flex-wrap:wrap;gap:.15rem .6rem;margin:0;color:var(--color-muted);font-size:.8rem}.jam-asof{opacity:.75}.fret-legend{display:grid;gap:.4rem 1rem;margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--color-border)}.fret-legend>div{display:flex;align-items:flex-start;gap:.6rem}.fret-legend dt{flex:none;margin-top:.1rem;line-height:0}.fret-legend dd{margin:0;color:var(--color-muted);font-size:.8rem;line-height:1.45}.jam-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;margin-top:.1rem;border:1px solid var(--color-border);border-radius:50%;background:transparent;color:var(--color-muted);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}.jam-play svg{margin-left:2px}.jam-play:hover{color:var(--color-foreground);border-color:var(--color-accent)}.jam-play:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.jam-play.is-playing{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-background)}.jam-play.is-empty{border-color:transparent;cursor:default}.jam-video{flex:1 0 100%;width:100%;max-width:34rem;aspect-ratio:16 / 9;margin-top:.75rem;border:0;border-radius:.5rem;background:#000}.jam-facts{font-variant-numeric:tabular-nums}.jam-sep{margin:0 .4rem;opacity:.5}.jam-playlist-link{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1.25rem;color:var(--color-muted);font-size:.85rem;transition:color .15s}.jam-playlist-link:hover{color:var(--color-accent)}.jam-playlist-link svg{opacity:.7}