.visualizer-wrap[data-astro-cid-jpgwkmql]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}body.light-mode .visualizer-wrap[data-astro-cid-jpgwkmql]{background:#f8f8f8;border-color:#e0e0e0}.viz-controls[data-astro-cid-jpgwkmql]{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}.viz-control-group[data-astro-cid-jpgwkmql]{display:flex;flex-direction:column;gap:.375rem}.viz-control-group--btns[data-astro-cid-jpgwkmql]{flex-direction:row;align-items:center;gap:.5rem;margin-left:auto}.viz-label[data-astro-cid-jpgwkmql]{font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.viz-select[data-astro-cid-jpgwkmql]{padding:.5rem 2rem .5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:.875rem;font-family:var(--font-sans);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;transition:border-color .15s;min-width:160px}.viz-select[data-astro-cid-jpgwkmql]:focus{outline:none;border-color:var(--color-accent)}body.light-mode .viz-select[data-astro-cid-jpgwkmql]{background-color:#fff;border-color:#ccc;color:#000}.piano-scroll-wrap[data-astro-cid-jpgwkmql]{overflow-x:auto;padding-bottom:.5rem}.piano[data-astro-cid-jpgwkmql]{position:relative;display:flex;height:160px;min-width:500px;user-select:none}.piano-key-white{position:relative;flex:1;height:100%;background:#f0f0f0;border:1px solid #aaa;border-top:none;border-radius:0 0 6px 6px;cursor:pointer;transition:background .12s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;min-width:36px;z-index:1}.piano-key-white:hover{background:#e0e0e0}.piano-key-white.active{background:var(--mode-active-color, #0070f3)!important;border-color:var(--mode-active-color, #0070f3)}.piano-key-white.root{background:var(--mode-root-color, #0050d0)!important;border-color:var(--mode-root-color, #0050d0)}.piano-key-white.playing{background:#fff!important;box-shadow:0 0 12px #0070f399}.key-label{font-size:.625rem;font-family:var(--font-mono);font-weight:500;color:#555;pointer-events:none;transition:color .12s}.piano-key-white.active .key-label,.piano-key-white.root .key-label{color:#fff}.piano-key-black{position:absolute;top:0;width:24px;height:95px;background:#1a1a1a;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;transition:background .12s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.375rem}.piano-key-black:hover{background:#2a2a2a}.piano-key-black.active{background:var(--mode-active-color, #0070f3)!important}.piano-key-black.root{background:var(--mode-root-color, #0050d0)!important}.piano-key-black.playing{background:#fff!important;box-shadow:0 0 10px #0070f399}.piano-key-black .key-label{color:#fff9;font-size:.5rem}.piano-key-black.active .key-label,.piano-key-black.root .key-label{color:#ffffffe6}.viz-info[data-astro-cid-jpgwkmql]{display:flex;flex-direction:column;gap:.875rem;padding-top:1rem;border-top:1px solid var(--color-border)}body.light-mode .viz-info[data-astro-cid-jpgwkmql]{border-top-color:#e0e0e0}.viz-info-row[data-astro-cid-jpgwkmql]{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.viz-info-row--notes[data-astro-cid-jpgwkmql]{align-items:flex-start;flex-direction:column;gap:.5rem}.viz-info-block[data-astro-cid-jpgwkmql]{display:flex;flex-direction:column;gap:.25rem}.viz-info-label[data-astro-cid-jpgwkmql]{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle)}.viz-info-value[data-astro-cid-jpgwkmql]{font-size:1rem;font-weight:600;color:var(--color-text)}body.light-mode .viz-info-value[data-astro-cid-jpgwkmql]{color:#000}.viz-notes-list[data-astro-cid-jpgwkmql]{display:flex;flex-wrap:wrap;gap:.375rem}.note-chip{display:inline-flex;align-items:center;padding:.25rem .625rem;border-radius:var(--radius-full);font-size:.8125rem;font-family:var(--font-mono);font-weight:500;background:var(--color-surface-3);color:var(--color-text-muted);border:1px solid var(--color-border);transition:all .2s ease}.note-chip.root-chip{background:var(--mode-active-color, #0070f3);color:#fff;border-color:transparent}.viz-intervals[data-astro-cid-jpgwkmql]{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.interval-step{font-size:.8125rem;font-family:var(--font-mono);padding:.2rem .5rem;border-radius:var(--radius-sm);font-weight:500}.interval-W{background:#0070f326;color:#338ef7}.interval-H{background:#f9731626;color:#fb923c}.interval-WH{background:#a855f726;color:#c084fc}.interval-arrow{color:var(--color-text-subtle);font-size:.75rem}