.keys-circle{width:min(100%,440px);height:auto;margin:16px auto 32px;display:block}.keys-circle.static{margin:0 auto}.keys-circle{--circle-label-floor:11px;aspect-ratio:1;container-type:inline-size}@container not (min-inline-size:400px){.keys-circle *{--circle-label-floor:14px}.circle-center-caption{display:none}}@container not (min-inline-size:320px){.keys-circle *{--circle-label-floor:16px}}@container not (min-inline-size:280px){.keys-circle *{--circle-label-floor:19px}}.circle-ring{fill:none;stroke:var(--panel-border);stroke-width:1px}.circle-key circle,.circle-key .circle-wedge{fill:var(--panel-fill);stroke:var(--panel-border);stroke-width:1px}.circle-key text{fill:var(--ink);font-family:var(--mono);font-size:max(12px, var(--circle-label-floor));pointer-events:none}.circle-key .circle-signature{font-size:max(9px, var(--circle-label-floor));font-weight:600}a.circle-key:hover circle,a.circle-key:hover .circle-wedge,a.circle-key:focus-visible circle,a.circle-key:focus-visible .circle-wedge,.circle-key.current circle,.circle-key.current .circle-wedge{fill:var(--accent);stroke:var(--accent)}a.circle-key:hover text,a.circle-key:focus-visible text,.circle-key.current text{fill:var(--accent-ink)}.circle-center{fill:var(--muted);font-family:var(--mono);font-size:max(9px, var(--circle-label-floor));letter-spacing:2px}.circle-center.minor{font-size:max(12px, var(--circle-label-floor));letter-spacing:0}.keys-circle--night .circle-ring{stroke:var(--ui-on-night);stroke-opacity:.3}.keys-circle--night .circle-key circle,.keys-circle--night .circle-key .circle-wedge{fill:var(--ui-on-night);fill-opacity:.12;stroke:var(--ui-night);stroke-width:2px}.keys-circle--night .circle-key text{fill:var(--ui-on-night)}.keys-circle--night .circle-center{fill:color-mix(in srgb, var(--ui-on-night) 72%, var(--ui-night))}.keys-circle--large .circle-key text{font-size:max(13px, var(--circle-label-floor))}.keys-circle--large .circle-wedge+text{font-family:var(--display);font-size:max(26px, var(--circle-label-floor));font-weight:700}.keys-circle--large .circle-key .circle-signature{font-size:max(11px, var(--circle-label-floor))}.keys-circle--highlight .circle-key.current .circle-wedge,.keys-circle--highlight .circle-key.current circle{fill:var(--highlight);fill-opacity:1;stroke:var(--highlight)}.keys-circle--highlight .circle-key.current text{fill:var(--ui-on-highlight)}.keys-circle--highlight .circle-key.relative circle{fill:var(--warn);fill-opacity:1;stroke:var(--warn)}.keys-circle--highlight .circle-key.relative text{fill:var(--ground)}.circle-center-disc{fill:var(--surface)}.keys-circle--night .circle-center-disc{fill:var(--ground)}.circle-center-title{fill:var(--ink);font-family:var(--display);font-size:max(44px, var(--circle-label-floor));font-weight:700}.circle-center-caption{fill:var(--muted);font-family:var(--mono);font-size:max(8px, var(--circle-label-floor));letter-spacing:0;text-transform:uppercase}.keys-circle--compact .circle-key text{font-size:max(32px, var(--circle-label-floor))}.keys-circle--compact .circle-key circle{r:23px}.keys-circle--compact .circle-center-title{font-size:max(44px, var(--circle-label-floor))}.keys-circle--compact .circle-center-caption{font-size:max(32px, var(--circle-label-floor));letter-spacing:0;display:block}
.keys-circle--window{--circle-label-floor:13px}@container not (min-inline-size:400px){.keys-circle--window *{--circle-label-floor:16px}}@container not (min-inline-size:320px){.keys-circle--window *{--circle-label-floor:18px}}@container not (min-inline-size:280px){.keys-circle--window *{--circle-label-floor:21px}}.keys-circle--large .circle-wedge--minor+text{font-family:var(--mono);font-size:max(14px, var(--circle-label-floor));font-weight:600}.keys-circle--wheel .circle-center-title{font-size:max(32px, var(--circle-label-floor))}.keys-circle--wheel.keys-circle--night .circle-center-disc{fill:var(--ui-night)}.keys-circle--wheel.keys-circle--night .circle-center-title{fill:var(--ui-on-night)}.keys-circle--wheel.keys-circle--night .circle-center-caption{fill:color-mix(in srgb, var(--ui-on-night) 72%, var(--ui-night))}.circle-key .circle-also-written{fill:var(--muted);font-size:max(9px, var(--circle-label-floor))}.keys-circle--large .circle-key .circle-also-written{font-size:max(12px, var(--circle-label-floor))}.keys-circle--wheel.keys-circle--night .circle-key .circle-wedge{fill:var(--ui-on-night);fill-opacity:.12}.keys-circle--wheel.keys-circle--night .circle-key text{fill:var(--ui-on-night)}.keys-circle--wheel.keys-circle--night a.circle-key:hover .circle-wedge{stroke:var(--highlight);stroke-width:3px}.keys-circle--wheel .circle-key.in-window .circle-wedge{fill:color-mix(in srgb, var(--highlight) 30%, var(--surface));fill-opacity:1}.keys-circle--wheel .circle-key.in-window text{fill:var(--ink)}.keys-circle--wheel.keys-circle--night .circle-key.in-window .circle-wedge{fill:color-mix(in srgb, var(--ui-on-night) 22%, var(--ui-night));fill-opacity:1}.keys-circle--wheel.keys-circle--night .circle-key.in-window text{fill:var(--ui-on-night)}.keys-circle--wheel .circle-key.lit .circle-wedge{fill:var(--accent);fill-opacity:1}.keys-circle--wheel .circle-key.lit text{fill:var(--accent-ink)}.keys-circle--wheel.keys-circle--night .circle-key.lit .circle-wedge{fill:var(--highlight);fill-opacity:1}.keys-circle--wheel.keys-circle--night .circle-key.lit text{fill:var(--ui-on-highlight)}.keys-circle--wheel .circle-key.current .circle-wedge{fill:var(--accent);fill-opacity:1}.keys-circle--wheel .circle-key.current text{fill:var(--accent-ink)}.keys-circle--wheel.keys-circle--night .circle-key.current .circle-wedge{fill:var(--ui-on-night);fill-opacity:1}.keys-circle--wheel.keys-circle--night .circle-key.current text{fill:var(--ui-night)}.keys-circle--wheel .circle-key.playing .circle-wedge,.keys-circle--wheel.keys-circle--night .circle-key.playing .circle-wedge{fill:var(--highlight);fill-opacity:1}.keys-circle--wheel .circle-key.playing text,.keys-circle--wheel.keys-circle--night .circle-key.playing text{fill:var(--ui-on-highlight)}.keys-circle--wheel a.circle-key:focus-visible{outline:none}.keys-circle--wheel a.circle-key:focus-visible .circle-wedge{stroke:var(--accent-ink);stroke-width:6px;stroke-linejoin:round}.keys-circle--wheel a.circle-key.in-window:focus-visible .circle-wedge{stroke:var(--ink)}.keys-circle--wheel a.circle-key.lit:focus-visible .circle-wedge,.keys-circle--wheel a.circle-key.current:focus-visible .circle-wedge{stroke:var(--accent-ink)}.keys-circle--wheel.keys-circle--night a.circle-key:focus-visible .circle-wedge,.keys-circle--wheel.keys-circle--night a.circle-key.in-window:focus-visible .circle-wedge{stroke:var(--ui-on-night);stroke-width:6px}.keys-circle--wheel.keys-circle--night a.circle-key.lit:focus-visible .circle-wedge{stroke:var(--ui-on-highlight)}.keys-circle--wheel.keys-circle--night a.circle-key.current:focus-visible .circle-wedge{stroke:var(--ui-night)}.keys-circle--wheel a.circle-key.playing:focus-visible .circle-wedge,.keys-circle--wheel.keys-circle--night a.circle-key.playing:focus-visible .circle-wedge{stroke:var(--ui-on-highlight)}.circle-window{pointer-events:none;transform-box:view-box;transform-origin:200px 200px;transition:transform .6s ease-in-out}.circle-window path{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linejoin:round}.keys-circle--night .circle-window path{stroke:var(--highlight)}@media (prefers-reduced-motion:reduce){.circle-window{transition:none}}.circle-tag{font-family:var(--mono);font-size:max(11px, var(--circle-label-floor));paint-order:stroke;pointer-events:none;stroke-linejoin:round;stroke-width:8px;font-weight:700}.circle-tag--outer{fill:var(--ui-on-highlight);stroke:var(--highlight)}.circle-tag--inner{fill:var(--accent-ink);stroke:var(--accent)}.keys-circle--night .circle-tag--inner{fill:var(--ui-on-night);stroke:color-mix(in srgb, var(--ui-on-night) 28%, var(--ui-night))}.circle-arrow{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:3px}.keys-circle--night .circle-arrow{stroke:var(--highlight)}