.key-band,.key-dial,.key-neck,.key-band-chord-cards{--key-space-1:.5rem;--key-space-2:.75rem;--key-space-3:1rem;--key-space-4:1.5rem;--key-space-5:2rem;--key-space-6:3rem;--key-text-lede:clamp(1.125rem, 1rem + .5vw, 1.25rem);--key-text-body:clamp(1rem, .9rem + .4vw, 1.0625rem);--key-text-small:.9375rem;--key-text-caption:.8125rem;--key-text-label:.75rem;--key-duration-quick:.16s;--key-duration-base:.26s;--key-duration-slow:.5s;--key-ease-out:cubic-bezier(.2, .7, .2, 1);--key-ease-in-out:cubic-bezier(.65, 0, .35, 1);--key-spring:cubic-bezier(.34, 1.56, .64, 1);--key-dial-inset:var(--key-space-3);--key-band-radius:.875rem;--key-dial-letter-size:clamp(var(--key-text-label), .4375rem + 1.5625vw, 1.625rem);--key-band-chord-size:1.5rem}.key-band{--key-dial-inset:var(--key-space-3);--key-band-tuned-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);--key-band-chord-size:1.5rem;--key-dial-letter-size:clamp(var(--key-text-label), .4375rem + 1.5625vw, 1.625rem);--key-band-radius:.875rem;gap:var(--key-space-5);display:grid}.key-dial{padding:var(--key-space-5) var(--key-dial-inset) var(--key-space-2);border:1px solid var(--ui-line);border-radius:var(--key-band-radius);background:linear-gradient(to bottom, var(--ui-ground), var(--ui-surface) 55%, var(--ui-ground));position:relative}.key-dial:before{content:"";inset-block-start:var(--key-space-3);inset-inline:var(--key-dial-inset);block-size:var(--key-space-3);background:repeating-linear-gradient(to right, color-mix(in srgb, var(--ui-muted) 60%, transparent) 0 1px, transparent 1px calc(100% / 48));position:absolute}.key-dial-keys{z-index:1;grid-template-columns:repeat(12,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;position:relative}.key-dial-keys a{border-radius:var(--key-space-1);min-block-size:2.75rem;font-family:var(--display);font-size:var(--key-dial-letter-size);color:var(--ui-muted);white-space:nowrap;transition:color var(--key-duration-quick) var(--key-ease-out), transform var(--key-duration-base) var(--key-ease-out);justify-content:center;align-items:center;font-weight:700;line-height:1;text-decoration:none;display:flex}.key-dial-keys a:hover{color:var(--ui-ink)}.key-dial-keys a:focus-visible{outline:2px solid var(--ui-ink);outline-offset:-2px}.key-dial-keys a[data-near]{color:var(--ui-ink);text-underline-offset:.45em;-webkit-text-decoration:underline dashed;text-decoration:underline dashed;text-decoration-thickness:1px}.key-dial-keys a[aria-current=true]{color:var(--highlight);transform:scale(1.15)}.key-dial-needle{inset-block:var(--key-space-1);background:var(--warn);inline-size:3px;box-shadow:0 0 var(--key-space-2) color-mix(in srgb, var(--warn) 70%, transparent);pointer-events:none;transition:inset-inline-start var(--key-duration-slow) var(--key-spring);border-radius:2px;margin-inline-start:-1.5px;position:absolute;inset-inline-start:calc(var(--key-dial-inset) + (var(--dial-index,0) + .5) * (100% - 2 * var(--key-dial-inset)) / 12)}.key-dial-needle:after{content:"";background:var(--warn);border-radius:50%;block-size:.6875rem;inline-size:.6875rem;position:absolute;inset-block-start:-2px;inset-inline-start:50%;translate:-50%}@media (max-width:30rem){.key-band{--key-dial-inset:calc(var(--key-space-1) - 1px)}.key-dial{margin-inline:calc(var(--key-space-1) - var(--ui-section-gutter))}}.key-band-now{align-items:center;gap:var(--key-space-3) var(--key-space-4);flex-wrap:wrap;display:flex}.key-band-tuned{align-items:baseline;gap:var(--key-space-2);font-family:var(--display);font-size:var(--key-band-tuned-size);color:var(--ui-ink);flex-wrap:wrap;margin:0;font-weight:700;line-height:1.1;display:flex}@media (min-width:48rem){.key-band-open{margin-inline-start:auto}}.key-band-change{margin:0}.key-band-change span{padding:var(--key-space-1) var(--key-space-3);border-radius:var(--key-band-radius);background:color-mix(in srgb, var(--highlight) 18%, transparent);font-family:var(--mono);font-size:var(--key-text-label);color:var(--ui-ink);animation:key-band-change-in var(--key-duration-base) var(--key-ease-out);display:inline-block}@keyframes key-band-change-in{0%{opacity:0;transform:translateY(var(--key-space-1))}}.key-neck{gap:var(--key-space-4);min-inline-size:0;display:grid;container:key-neck/inline-size}.key-neck .fretboard-scroll{margin:0}.key-neck-controls{justify-content:space-between;align-items:center;gap:var(--key-space-3);flex-wrap:wrap;display:flex}.key-neck-play-icon{inline-size:var(--key-space-5);block-size:var(--key-space-5);margin-inline:calc(-1 * var(--key-space-2)) var(--key-space-2);background:var(--ground);vertical-align:middle;border-radius:50%;flex:none;place-items:center;display:inline-grid}.key-neck-play-icon:before{content:"";background:var(--warn);clip-path:polygon(0 0,100% 50%,0 100%);block-size:40%;inline-size:40%;margin-inline-start:8%}@container key-neck (max-width:12rem){.key-neck-play-icon{margin-inline:0}}.key-neck-play[data-playing] .key-neck-play-icon:before{clip-path:none;margin-inline-start:0}.key-neck-play{border-radius:999px;display:inline-block}.key-neck-play[data-cued=true]{box-shadow:0 0 0 3px var(--highlight);animation:key-neck-cue var(--key-duration-slow) var(--key-ease-in-out) 6 alternate}@keyframes key-neck-cue{to{transform:scale(1.08)}}@media (max-width:30rem){.key-neck-controls{flex-direction:column;align-items:stretch}.key-neck-play{display:grid}}.key-neck .fretboard-mark{transition:opacity var(--key-duration-quick) var(--key-ease-out)}.key-neck .fretboard-mark[data-state=now] circle{animation:key-neck-ring var(--key-duration-slow) var(--key-ease-out)}@keyframes key-neck-ring{0%{stroke-width:10px}}.key-band-notes li[data-state=now] .key-band-note{color:var(--highlight)}.key-neck-key{align-items:center;gap:var(--key-space-2) var(--key-space-5);font-size:var(--key-text-small);color:var(--ui-muted);flex-wrap:wrap;display:flex}.key-neck-legend{gap:var(--key-space-2) var(--key-space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.key-neck-legend li{align-items:center;gap:var(--key-space-1);display:flex}.key-neck-legend svg{block-size:.75rem;inline-size:.75rem}.key-neck-hint{margin:0}.key-neck-hint-touch{display:none}@media (hover:none){.key-neck-hint-pointer{display:none}.key-neck-hint-touch{display:inline}}.key-band-notes{grid-template-columns:repeat(7, minmax(0, var(--key-space-6)));gap:var(--key-space-2) var(--key-space-3);margin:0;padding:0;list-style:none;display:grid}.key-band-notes li{justify-items:center;gap:var(--key-space-1);display:grid}.key-band-note{font-family:var(--display);font-size:var(--key-text-lede);color:var(--ui-ink);font-weight:700;line-height:1}.key-band-notes li:first-child .key-band-note{color:var(--highlight)}.key-band-degree{font-family:var(--mono);font-size:var(--key-text-caption);color:var(--ui-muted)}.key-band-chord-cards{min-inline-size:0}.key-band-chords{gap:var(--key-space-2);scroll-snap-type:x mandatory;grid-auto-columns:minmax(7rem,1fr);grid-auto-flow:column;margin:0;padding:0;list-style:none;display:grid;overflow-x:auto}.key-band-chords li{scroll-snap-align:start;align-content:start;gap:var(--key-space-1);padding:var(--key-space-3);border:1px solid var(--ui-line);border-radius:var(--key-space-2);background:var(--ui-surface);display:grid}.key-band-chords li:has(>button){padding:0}.key-band-chords button{align-content:start;gap:var(--key-space-1);block-size:100%;inline-size:100%;padding:var(--key-space-3);border-radius:inherit;color:inherit;text-align:start;cursor:pointer;transition:background-color var(--key-duration-quick) var(--key-ease-out);background:0 0;border:0;font-family:inherit;display:grid}.key-band-chords button:hover,.key-band-chords button:focus-visible{outline:1px solid var(--ui-ink);outline-offset:-2px}.key-band-chords button[aria-pressed=true]{background:var(--ui-ink)}.key-band-chords button[aria-pressed=true] *{color:var(--ui-ground)}.key-band-chord-link{font-size:var(--key-text-small);color:var(--ui-ink);text-underline-offset:.2em;margin-block-start:var(--key-space-2);display:inline-block}.key-band-roman{font-family:var(--mono);font-size:var(--key-text-label);color:color-mix(in srgb, var(--warn) 45%, var(--ui-ink))}.key-band-chord{font-family:var(--display);font-size:var(--key-band-chord-size);color:var(--ui-ink);font-weight:700;line-height:1.1}.key-band-chord-notes{font-family:var(--mono);font-size:var(--key-text-label);color:var(--ui-muted)}.key-band-foot{justify-content:space-between;align-items:baseline;gap:var(--key-space-3) var(--key-space-5);border-block-start:1px solid var(--ui-line);flex-wrap:wrap;padding-block-start:var(--key-space-4);display:flex}.key-band-facts{gap:var(--key-space-2) var(--key-space-5);flex-wrap:wrap;margin:0;display:flex}.key-band-facts div{align-items:baseline;gap:var(--key-space-1);display:flex}.key-band-facts dt{font-family:var(--mono);font-size:var(--key-text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ui-muted)}.key-band-facts dd{font-size:var(--key-text-body);color:var(--ui-ink);margin:0;font-weight:600}.key-band-full{font-size:var(--key-text-small);color:var(--ui-ink);text-underline-offset:.2em}.key-band-full:hover{color:var(--highlight)}@media (prefers-reduced-motion:reduce){:is(.key-band,.key-dial,.key-neck,.key-band-chord-cards),:is(.key-band,.key-dial,.key-neck,.key-band-chord-cards) *,:is(.key-band,.key-dial,.key-neck,.key-band-chord-cards) :before,:is(.key-band,.key-dial,.key-neck,.key-band-chord-cards) :after{transition:none!important;animation:none!important}}