.key-bench{border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:18px;grid-template-columns:minmax(0,1fr);gap:1rem;margin-block-start:clamp(1.25rem,1rem + 1.5vw,2rem);padding:clamp(.75rem,.5rem + 1vw,1.25rem);display:grid}.key-bench-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;display:flex}.key-bench .fretboard-scroll{margin:0}.key-map-corner{margin:0;line-height:1.45}.key-map-corner strong,.key-map-corner span{display:block}.key-map-corner strong{color:var(--ink);font-weight:600}.key-light{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.key-bench-play{flex-wrap:wrap;align-items:center;gap:.5rem;min-inline-size:0;max-inline-size:100%;display:flex}
.jam{flex-wrap:wrap;align-items:center;gap:.5rem;min-inline-size:0;max-inline-size:100%;display:inline-flex}.jam-toggle{border:1px solid var(--highlight);min-block-size:2.75rem;max-inline-size:100%;color:var(--highlight);font-family:var(--sans);cursor:pointer;background:0 0;border-radius:999px;padding:.5rem 1.125rem;font-size:.9375rem;font-weight:600}.jam-toggle:hover{background:var(--highlight);color:var(--ui-on-highlight)}.jam-tempo{box-sizing:border-box;border:1px solid var(--ui-line,var(--line));border-radius:999px;flex-wrap:wrap;justify-content:space-between;align-items:center;inline-size:calc(10rem + 2px);min-inline-size:0;max-inline-size:100%;display:inline-flex;container:jam-tempo/inline-size}.jam-tempo button{block-size:2.75rem;inline-size:2.75rem;color:var(--ui-ink,var(--ink));font-family:var(--sans);cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0;font-size:1.125rem;font-weight:600}.jam-tempo button:disabled{color:var(--ui-muted,var(--muted));cursor:default}.jam-bpm{min-inline-size:4.5rem;font-family:var(--mono);text-align:center;color:var(--ui-ink,var(--ink));font-size:.8125rem}.jam-toggle:focus-visible,.jam-tempo button:focus-visible{outline:2px solid var(--ui-ink,var(--ink));outline-offset:2px}.jam--quiet .jam-toggle{border:1px solid var(--ink);min-block-size:2.75rem;color:var(--ink);font-family:var(--sans);cursor:pointer;background:0 0;border-radius:999px;padding:.5rem 1.125rem;font-size:.9375rem;font-weight:600}.jam--quiet .jam-toggle:hover{background:var(--ink);color:var(--surface)}.jam--quiet .jam-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@container jam-tempo not (min-inline-size:10rem){.jam-bpm{flex-basis:100%;order:-1;min-inline-size:0}}
