.fretboard{gap:var(--space-2xl);flex-direction:column;display:flex}@media (min-width:1280px){.fretboard{gap:var(--space-3xl);grid-template-columns:minmax(0,19rem) 1fr;align-items:start;display:grid}}.fretboard__wheel{width:100%;max-width:19rem;position:sticky;inset-block-start:calc(var(--height-navbar) + var(--space-lg))}.fretboard__wheel-fab{z-index:90;width:var(--size-14);height:var(--size-14);border-radius:var(--radius-full);background:var(--surface-brand);border:1px solid var(--border-brand);box-shadow:var(--shadow-lg);color:var(--text-on-brand);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;display:flex;position:fixed;inset-block-start:50%;inset-inline-end:var(--space-lg);transform:translateY(-50%)}.fretboard__wheel-fab:hover{background:var(--surface-brand-muted)}.fretboard__wheel-fab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__wheel-fab-mark{font-family:var(--font-serif);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:1}.fretboard__wheel-overlay{z-index:200;padding:var(--gutter);background:var(--surface-scrim);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fretboard__wheel-sheet{gap:var(--space-md);width:100%;max-width:22rem;padding:var(--space-lg);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;display:flex}.fretboard__wheel-sheet-head{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.fretboard__wheel-sheet-title{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-widest);text-transform:uppercase;color:var(--text-tertiary)}.fretboard__wheel-close{padding:var(--space-2xs) var(--space-sm);border:1px solid var(--border-default);border-radius:var(--radius-button);font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-secondary);cursor:pointer;background:0 0}.fretboard__wheel-close:hover{border-color:var(--border-accent);color:var(--text-accent)}.fretboard__wheel-close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__main{gap:var(--space-lg);flex-direction:column;min-width:0;display:flex}.fretboard__switch{justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.fretboard__sections{gap:var(--space-2xs);padding:var(--space-2xs);border:1px solid var(--border-default);border-radius:var(--radius-button);background:var(--surface-sunken);flex-wrap:wrap;min-width:0;margin:0;display:flex}.fretboard__section{padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-button);font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-secondary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);background:0 0;border:0}.fretboard__section:hover{color:var(--text-accent)}.fretboard__section.is-active{background:var(--surface-brand);color:var(--text-on-brand)}.fretboard__section:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__section-tagline{font-family:var(--font-serif);font-style:italic;font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.fretboard__panel{gap:var(--space-md);padding:var(--space-lg);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);flex-direction:column;display:flex}.fretboard__settings-row{align-items:center;gap:var(--space-sm) var(--space-md);border:0;flex-wrap:wrap;min-width:0;margin:0;padding:0;display:flex}.fretboard__subsettings{gap:var(--space-sm);border-block-start:1px solid var(--border-subtle);flex-direction:column;padding-block-start:var(--space-md);display:flex}.fretboard__drills-row{gap:var(--space-xs);flex-wrap:wrap;display:flex}.fretboard__group-label{min-width:var(--size-14);font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-tertiary);align-self:center}.fretboard__variants{gap:var(--space-xs);flex-wrap:wrap;min-width:0;display:flex}.fretboard__variant{padding:var(--space-xs) var(--space-md);border:1px solid var(--border-default);border-radius:var(--radius-button);font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-secondary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);background:0 0}.fretboard__variant:hover{border-color:var(--border-accent);color:var(--text-accent)}.fretboard__variant:disabled{opacity:.4;cursor:not-allowed}.fretboard__variant:disabled:hover{border-color:var(--border-default);color:var(--text-secondary)}.fretboard__variant.is-active{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--text-on-brand)}.fretboard__drills-row .fretboard__variant{background:var(--surface-sunken);border-color:var(--border-strong);color:var(--text-primary)}.fretboard__drills-row .fretboard__variant:hover{background:var(--surface-page);border-color:var(--text-accent);color:var(--text-accent)}.fretboard__drills-row .fretboard__variant.is-active{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--text-on-brand)}.fretboard__variant:focus-visible,.fretboard__root-select:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__root{align-items:center;gap:var(--space-sm);display:inline-flex}.fretboard__root-label{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-tertiary)}.fretboard__root-select{padding:var(--space-xs) var(--space-md);font-family:var(--font-sans);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-button);cursor:pointer}.fretboard__board{gap:var(--space-md);padding:var(--space-lg);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;display:flex}@media (min-width:768px){.fretboard__board{padding:var(--space-xl)}}.fretboard__summary{align-items:center;gap:var(--space-2xs);padding:var(--space-md) var(--space-lg);background:var(--surface-accent);border:1px solid var(--border-accent);border-radius:var(--radius-lg);text-align:center;flex-direction:column;display:flex}.fretboard__summary-title{font-family:var(--font-serif);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--text-primary)}.fretboard__summary-lines{justify-content:center;column-gap:var(--space-lg);row-gap:var(--space-2xs);flex-wrap:wrap;display:flex}.fretboard__summary-notes{font-family:var(--font-sans);font-size:var(--font-size-sm);color:var(--text-secondary)}.fretboard__summary-notes-label{font-weight:var(--font-weight-semibold);color:var(--text-accent);margin-inline-end:var(--space-2xs)}.fretboard__target{justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--surface-brand);border-radius:var(--radius-lg);display:flex}.fretboard__target-disc{min-width:var(--size-12);height:var(--size-12);padding-inline:var(--space-xs);border-radius:var(--radius-full);background:var(--success-text);font-family:var(--font-sans);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-on-brand);flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}.fretboard__target-copy{align-items:center;gap:var(--space-2xs);text-align:center;flex-direction:column;min-width:0;display:flex}.fretboard__target-kicker{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-widest);text-transform:uppercase;color:var(--text-on-brand-subtle)}.fretboard__target-rest{font-family:var(--font-sans);font-size:var(--font-size-sm);color:var(--text-on-brand-muted)}.fretboard__legend{justify-content:center;column-gap:var(--space-lg);row-gap:var(--space-2xs);flex-wrap:wrap;display:flex}.fretboard__legend-item{align-items:center;gap:var(--space-2xs);font-family:var(--font-sans);font-size:var(--font-size-xs);color:var(--text-secondary);display:inline-flex}.fretboard__legend-swatch{width:var(--size-3);height:var(--size-3);border-radius:var(--radius-full);flex-shrink:0}.fretboard__legend-swatch--root{background:var(--action)}.fretboard__legend-swatch--tone{background:var(--surface-brand)}.fretboard__legend-swatch--wrong{background:var(--danger-text)}.fretboard__scroller{border-radius:var(--radius-sm);overflow-x:auto}.fretboard__svg{width:100%;min-width:42rem;height:auto;display:block}.fretboard__svg--vertical{min-width:0;max-width:16rem;margin-inline:auto}.fretboard__string,.fretboard__fret{stroke:var(--border-default);stroke-width:1px}.fretboard__nut{stroke:var(--text-brand);stroke-width:5px;stroke-linecap:round}.fretboard__marker{fill:var(--surface-sunken)}.fretboard__fret-number{font-family:var(--font-sans);font-size:var(--font-size-xs);fill:var(--text-tertiary)}.fretboard__dot circle{fill:var(--surface-brand)}.fretboard__dot text{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);fill:var(--text-on-brand)}.fretboard__dot--root circle{fill:var(--action)}.fretboard__dot--root text{fill:var(--text-on-action)}.fretboard__dot--wrong circle{fill:var(--danger-text)}.fretboard__dot--wrong text{fill:var(--text-on-brand)}@media (prefers-reduced-motion:no-preference){.fretboard__dot{animation:fretboard-dot-in var(--duration-normal) var(--ease-out) both}@keyframes fretboard-dot-in{0%{opacity:0}to{opacity:1}}}.fretboard__dot.is-live{cursor:pointer}.fretboard__actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.fretboard__action{padding:var(--space-sm) var(--space-lg);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-button);font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)}.fretboard__action:hover{background:var(--surface-page);border-color:var(--text-accent)}.fretboard__action:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__setup{gap:var(--space-md);flex-direction:column;display:flex}.fretboard__drills-row+.fretboard__setup,.fretboard__settings-row+.fretboard__setup{border-block-start:1px solid var(--border-subtle);padding-block-start:var(--space-lg)}.fretboard__setup-note{align-items:center;gap:var(--space-sm);display:inline-flex}.fretboard__setup-group{align-items:center;gap:var(--space-sm) var(--space-md);border:0;flex-wrap:wrap;min-width:0;margin:0;padding:0;display:flex}.fretboard__setup-group>.fretboard__group-label{float:none;padding:0}.fretboard__strings{gap:var(--space-2xs);flex-wrap:wrap;display:flex}.fretboard__frets{align-items:center;gap:var(--space-xs);display:flex}.fretboard__fret-input input{width:var(--size-14);padding:var(--space-2xs) var(--space-xs);font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:center;color:var(--text-primary);background:var(--surface-page);border:1px solid var(--border-default);border-radius:var(--radius-button)}.fretboard__fret-input input:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__fret-dash{color:var(--text-tertiary)}.fretboard__best{font-family:var(--font-sans);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--text-tertiary)}.fretboard__best strong{font-weight:var(--font-weight-semibold);color:var(--text-secondary)}.fretboard__caption{font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--text-secondary);text-wrap:pretty}.fretboard__muted{font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);fill:var(--text-tertiary)}.fretboard__hotspot{fill:#0000;cursor:pointer}.fretboard__hotspot:hover{fill:color-mix(in oklch, var(--action) 14%, transparent)}.fretboard__hotspot:focus-visible{stroke:var(--focus-ring);stroke-width:2px;outline:none}.fretboard__hotspot.is-wrong{fill:var(--danger-surface);stroke:var(--danger-text);stroke-width:2px}@media (prefers-reduced-motion:no-preference){.fretboard__hotspot{transition:fill var(--duration-normal) var(--ease-out)}}.fretboard__choices{gap:var(--space-sm);border:0;flex-wrap:wrap;min-width:0;margin:0;padding:0;display:flex}.fretboard__choice{min-width:var(--size-16);padding:var(--space-sm) var(--space-lg);background:var(--surface-page);border:1px solid var(--border-default);border-radius:var(--radius-button);font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)}.fretboard__choice:hover{border-color:var(--border-accent)}.fretboard__choice:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.fretboard__choice.is-correct{background:var(--success-surface);border-color:var(--success-text);color:var(--success-text)}.fretboard__choice.is-wrong{background:var(--danger-surface);border-color:var(--danger-text);color:var(--danger-text)}.circle-fifths{width:100%;height:auto;display:block}.circle-fifths__segment{fill:var(--surface-raised);stroke:var(--border-default);stroke-width:1px;cursor:pointer;transition:fill var(--duration-fast) var(--ease-out)}.circle-fifths__segment:hover{fill:var(--surface-accent)}.circle-fifths__segment:focus-visible{stroke:var(--focus-ring);stroke-width:2px;outline:none}.circle-fifths__segment.is-active{fill:var(--action);stroke:var(--action)}.circle-fifths__label{font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);fill:var(--text-primary);pointer-events:none}.circle-fifths__label.is-active{fill:var(--text-on-action)}.circle-fifths__hub{fill:var(--surface-page);stroke:var(--border-subtle)}.circle-fifths__hub-root{font-family:var(--font-serif);font-size:var(--font-size-3xl);fill:var(--text-brand)}.circle-fifths__hub-caption{font-family:var(--font-sans);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;fill:var(--text-tertiary)}.fretboard__range{fill:var(--surface-accent);stroke:var(--border-accent);stroke-width:1px}