.circle-bench{border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:18px;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,1rem + 2vw,2.5rem);margin-block-start:clamp(1.25rem,1rem + 1.5vw,2rem);padding:clamp(.75rem,.5rem + 1.5vw,2rem);display:grid}@media (min-width:64rem){.circle-bench{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}.circle-wheel{justify-items:center;gap:1rem;min-inline-size:0;display:grid}.circle-bench .keys-circle{width:min(100%,32rem);margin:0 auto}.circle-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}@media (max-width:26rem){.circle-controls{gap:.25rem}}.circle-hint{text-align:center;color:var(--ui-muted);margin:0;font-size:.875rem}.circle-panel{gap:1.25rem;min-inline-size:0;display:grid;container:circle-panel/inline-size}.circle-panel-head>*{margin:0}.circle-eyebrow{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted);font-size:.75rem}.circle-panel-head h2{font-family:var(--display);letter-spacing:-.01em;text-transform:none;color:var(--ui-ink);margin-block:.25rem .5rem;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:700;line-height:1.1}.circle-panel-line{color:var(--ui-muted);font-size:1.0625rem}.circle-cards{gap:1rem;display:grid}.circle-card-row{gap:.5rem;display:grid}@media (min-width:40rem){.circle-card-row{grid-template-columns:4.5rem minmax(0,1fr);align-items:center;gap:1rem}}.circle-card-row-label{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted);margin:0;font-size:.75rem}.circle-card-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.375rem,.25rem + .75vw,.875rem);display:grid}.circle-card{border:3px solid var(--surface);background:var(--surface);min-inline-size:0;font:inherit;color:var(--ink);cursor:pointer;border-radius:12px;align-content:start;justify-items:center;gap:.125rem;padding:.625rem .25rem .5rem;display:grid}.circle-card:hover{border-color:var(--line)}.circle-card:focus-visible{outline:2px solid var(--ui-ink);outline-offset:3px}.circle-card[aria-disabled=true]{cursor:default}.circle-card-roman{font-family:var(--mono);color:var(--muted);font-size:.8125rem;font-weight:700}.circle-card-name{font-family:var(--display);color:var(--ink);font-size:clamp(1.125rem,.95rem + .8vw,1.5rem);font-weight:700;line-height:1.2}.circle-card svg{block-size:auto;inline-size:100%;max-inline-size:5.5rem}.circle-card-empty{aspect-ratio:1;border:1px dashed var(--line);border-radius:6px;inline-size:100%;max-inline-size:5.5rem}.circle-card--tonic .circle-card-roman{color:var(--warn)}.circle-card--playing,.circle-card--playing:hover{border-color:var(--highlight);box-shadow:0 0 0 3px color-mix(in srgb, var(--highlight) 35%, transparent)}.circle-left-out{color:var(--ui-muted);margin:0;font-size:.9375rem;line-height:1.5}.circle-progressions{grid-template-columns:minmax(0,1fr);gap:.75rem;margin:0;padding:0;list-style:none;display:grid}@media (min-width:64rem){.circle-progressions{grid-template-columns:repeat(2,minmax(0,1fr))}}.circle-progression{border:1px solid var(--ui-line);min-block-size:44px;inline-size:100%;font:inherit;text-align:start;color:var(--ui-ink);cursor:pointer;background:0 0;border-radius:12px;align-items:center;gap:.875rem;padding:.625rem .875rem;display:flex}.circle-progression:hover{border-color:var(--ui-ink)}.circle-progression:focus-visible{outline:2px solid var(--ui-ink);outline-offset:2px}.circle-progression--playing,.circle-progression--playing:hover{border-color:var(--highlight)}.circle-progression-icon{background:var(--ui-ink);block-size:2.25rem;inline-size:2.25rem;color:var(--ui-ground);border-radius:50%;flex:none;place-items:center;display:grid}.circle-progression-icon svg{block-size:.875rem;inline-size:.875rem}.circle-progression--playing .circle-progression-icon{background:var(--highlight);color:var(--ui-on-highlight)}.circle-progression-words{gap:.125rem;min-inline-size:0;display:grid}.circle-progression-name{color:var(--ui-ink);font-weight:600}.circle-progression-line{font-family:var(--mono);color:var(--ui-muted);font-size:.8125rem}.circle-open-row{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0;display:flex}.circle-open-note{color:var(--ui-muted);font-size:.9375rem}@container circle-panel not (min-inline-size:12rem){.circle-card-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,3.125rem),1fr))}.circle-progression{flex-direction:column;align-items:stretch;padding-inline:.25rem}.circle-progression-icon{align-self:center}.circle-progression-words{grid-template-columns:minmax(0,1fr)}}