.key-cards.mode-cards{container:mode-cards/inline-size}@media (min-width:64rem){.key-cards.mode-cards{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.mode-cards>#mode-drills{grid-column:1/-1}}.mode-card-label{margin:1.25rem 0 .5rem}.mode-hear{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.625rem;margin:0;padding:0;list-style:none;display:grid}.mode-signature{border-block-start:1px solid var(--line);grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:1.125rem;margin-block-start:1.375rem;padding-block-start:1.125rem;display:grid}.mode-signature-shape{border:1px solid var(--line);background:var(--ground);border-radius:12px;justify-items:center;gap:.25rem;margin:0;padding:.5rem;display:grid}.mode-signature-shape svg{block-size:auto;inline-size:100%;max-inline-size:5rem}.mode-signature-shape figcaption{color:var(--ink);font-weight:700}.mode-signature .mode-card-label{margin-block-start:0}.mode-signature-text{color:var(--ink);margin:0 0 .75rem;line-height:1.5}.mode-cards .ladder-words{min-inline-size:0}.mode-cards .ladder-notes{flex-wrap:wrap}@container mode-cards not (min-inline-size:12rem){.mode-signature{grid-template-columns:minmax(0,1fr)}.mode-signature-shape{justify-self:start;inline-size:min(100%,6rem)}}
.ladder-end{color:var(--muted);font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;font-size:11px}.ladder-end--dark{margin:8px 0 0}.ladder-rows{margin:0;padding:0;list-style:none}.ladder-row{border:1px solid var(--line);background:var(--ground2);color:var(--ink);font-family:var(--sans);border-radius:10px;align-items:center;gap:12px;margin:0 0 6px;padding:8px 12px;display:flex}.ladder-row[aria-current=true]{border-color:var(--ink);background:var(--ink);color:var(--surface)}.ladder .ladder-play{border:1px solid var(--ink);background:var(--surface);cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.ladder .ladder-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ladder-play-mark{width:12px;height:12px;fill:var(--ink)}.ladder-words{flex:1}.ladder-name{color:var(--ink);font-weight:700}.ladder-row[aria-current=true] .ladder-name{color:var(--surface)}.ladder-notes{gap:4px;margin-top:4px;display:flex}.ladder-note{background:var(--surface);min-width:22px;color:var(--ink);text-align:center;border-radius:5px;padding:0 4px;font-size:12px;font-weight:600;line-height:20px}.ladder-note--altered{background:var(--warn);color:var(--ground)}.ladder-caption{color:var(--muted);margin-top:4px;font-size:12px;display:block}.ladder-row[aria-current=true] .ladder-caption{color:var(--surface)}.ladder-altered{color:var(--muted);font-family:var(--mono);flex:none;font-size:11px}.ladder-row[aria-current=true] .ladder-altered{color:var(--surface)}
