:root{--bg-main:#0c0f17;--bg-surface:#141824;--bg-surface-elevated:#1a2030;--bg-surface-hover:#22293d;--border-subtle:#ffffff14;--border-accent:#6366f159;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-brand:#6366f1;--accent-brand-glow:#6366f166;--accent-root:#f59e0b;--accent-root-glow:#f59e0b8c;--accent-tone:#3b82f6;--accent-tone-glow:#3b82f666;--accent-success:#10b981;--accent-pulse:#ec4899;--guitar-neck-bg:linear-gradient(180deg, #201915 0%, #2a201b 50%, #1f1814 100%);--guitar-fret-wire:linear-gradient(180deg, #c0c6d0 0%, #838a96 50%, #4b5563 100%);--guitar-nut:#d6d3d1;--guitar-inlay:#e2e8f0;--piano-white-key:linear-gradient(180deg, #fff 0%, #f1f5f9 85%, #cbd5e1 100%);--piano-white-active:linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);--piano-black-key:linear-gradient(180deg, #262933 0%, #11141c 70%, #08090d 100%);--piano-black-active:linear-gradient(180deg, #11141c 0%, #000 100%);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-card:0 8px 32px 0 #0000005e;--font-main:-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#6366f11f 0,#0000 50%),radial-gradient(at 100% 100%,#f59e0b14 0,#0000 50%);background-attachment:fixed;min-height:100vh;line-height:1.5}.glass-panel{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#141824bf}.app-layout{flex-direction:column;min-height:100vh;display:flex}.site-header{z-index:50;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);background:#0c0f17e0;position:sticky;top:0}.header-container{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1440px;margin:0 auto;padding:.75rem 1.5rem;display:flex}.brand-badge{align-items:center;gap:.75rem;display:flex}.logo-icon-wrap{width:40px;height:40px;box-shadow:0 0 16px var(--accent-brand-glow);color:#fff;background:linear-gradient(135deg,#6366f1 0%,#ec4899 100%);border-radius:10px;justify-content:center;align-items:center;display:flex}.brand-title{letter-spacing:-.02em;background:linear-gradient(90deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:800}.brand-tagline{color:var(--text-muted);font-size:.75rem;display:block}.view-selector-group{background:var(--bg-surface);border-radius:var(--radius-full);border:1px solid var(--border-subtle);gap:.25rem;padding:.25rem;display:flex}.view-btn{color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;padding:.4rem .9rem;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.view-btn:hover{color:var(--text-primary);background:var(--bg-surface-hover)}.view-btn.active{background:var(--accent-brand);color:#fff;box-shadow:0 0 14px var(--accent-brand-glow)}.audio-controls-panel{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.sound-toggle-group{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:2px;display:flex}.sound-chip{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.35rem .65rem;font-size:.75rem;font-weight:600;transition:all .2s}.sound-chip.active{background:var(--bg-surface-elevated);color:#38bdf8;border:1px solid #38bdf84d}.playback-actions{align-items:center;gap:.5rem;display:flex}.btn-action{border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:.4rem;padding:.45rem .9rem;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn-play{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 0 12px #10b98159}.btn-play:hover{transform:translateY(-1px);box-shadow:0 0 16px #10b98180}.btn-strum{color:#fff;background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);box-shadow:0 0 12px #8b5cf659}.btn-strum:hover{transform:translateY(-1px);box-shadow:0 0 16px #8b5cf680}.btn-stop{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 0 12px #ef444459}.bpm-control{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);align-items:center;gap:.4rem;padding:.35rem .65rem;display:flex}.bpm-label{color:var(--text-secondary);min-width:58px;font-size:.75rem;font-weight:700}.bpm-slider{width:65px;accent-color:var(--accent-brand);cursor:pointer}.volume-control{align-items:center;gap:.4rem;display:flex}.vol-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.vol-btn:hover{color:var(--text-primary)}.volume-slider{width:60px;accent-color:var(--accent-brand);cursor:pointer}.main-content{flex-direction:column;gap:1.5rem;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem;display:flex}.controls-card{flex-direction:column;gap:1.25rem;padding:1.25rem;display:flex}.controls-top-row{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1rem;display:flex}.category-pill-tabs{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:3px;display:flex}.cat-tab{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;padding:.45rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.cat-tab.active{background:var(--accent-brand);color:#fff;box-shadow:0 0 12px var(--accent-brand-glow)}.quick-modifiers-bar{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.accidental-toggle{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:2px;display:flex}.acc-btn{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.35rem .65rem;font-size:.75rem;font-weight:700;transition:all .2s}.acc-btn.active{background:var(--bg-surface-hover);color:#38bdf8}.transpose-group{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);align-items:center;gap:.4rem;padding:.3rem .5rem;display:flex}.transpose-label{color:var(--text-muted);font-size:.75rem;font-weight:600}.transpose-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:2px;padding:.25rem .45rem;font-size:.75rem;font-weight:700;transition:all .2s;display:flex}.transpose-btn:hover{background:var(--accent-brand);color:#fff}.display-mode-selector{align-items:center;gap:.5rem;display:flex}.display-label{color:var(--text-muted);align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;display:flex}.display-options{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:2px;display:flex}.disp-btn{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.35rem .65rem;font-size:.75rem;font-weight:600;transition:all .2s}.disp-btn.active{background:var(--accent-tone);color:#fff;box-shadow:0 0 10px var(--accent-tone-glow)}.root-key-row{flex-direction:column;gap:.5rem;display:flex}.root-keys-grid{grid-template-columns:repeat(12,1fr);gap:.4rem;display:grid}.root-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-md);text-align:center;cursor:pointer;padding:.6rem .2rem;font-size:.95rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1)}.root-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:#f59e0b4d;transform:translateY(-2px)}.root-btn.active{color:#fff;box-shadow:0 0 16px var(--accent-root-glow);background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-color:#f59e0b;transform:translateY(-2px)}.pattern-selection-row{flex-direction:column;gap:.75rem;display:flex}.selector-header{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.8rem;font-weight:700}.category-scroll-container{flex-direction:column;gap:.75rem;display:flex}.category-block{flex-direction:column;gap:.35rem;display:flex}.cat-group-title{color:#94a3b8;margin-bottom:.1rem;font-size:.75rem;font-weight:700}.pill-chips-grid{flex-wrap:wrap;gap:.4rem;display:flex}.pill-chip{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:.3rem;padding:.35rem .8rem;font-size:.8rem;font-weight:500;transition:all .15s;display:flex}.pill-chip:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:#6366f166}.pill-chip.active{color:#fff;box-shadow:0 0 12px var(--accent-brand-glow);background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border-color:#6366f1;font-weight:700}.chip-symbol{opacity:.75;font-size:.75rem}.visualizers-stack{flex-direction:column;gap:1.5rem;display:flex}.fretboard-section,.piano-section{flex-direction:column;gap:.75rem;display:flex}.fretboard-header-bar,.piano-header-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.title-and-tuning{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.section-badge{align-items:center;gap:.5rem;display:flex}.inst-icon{font-size:1.25rem}.section-title{color:var(--text-primary);font-size:1.1rem;font-weight:700}.tuning-selector{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);align-items:center;gap:.4rem;padding:.3rem .6rem;display:flex}.control-icon{color:var(--text-muted)}.control-title{color:var(--text-muted);font-size:.75rem;font-weight:600}.select-dropdown{color:var(--text-primary);cursor:pointer;background:0 0;border:none;outline:none;font-size:.8rem;font-weight:600}.select-dropdown option{background:var(--bg-surface-elevated);color:var(--text-primary)}.fretboard-quick-toggles,.piano-range-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.fret-count-toggle,.octave-count-pills{align-items:center;gap:.3rem;display:flex}.mini-chip{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.mini-chip.active{background:var(--accent-brand);color:#fff;border-color:var(--accent-brand)}.toggle-handedness-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:.35rem;padding:.3rem .6rem;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.toggle-handedness-btn.active{color:#38bdf8;border-color:#38bdf8}.fretboard-viewport{scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent;padding:1rem .5rem;overflow-x:auto}.fretboard-viewport::-webkit-scrollbar{height:8px}.fretboard-viewport::-webkit-scrollbar-thumb{background:var(--bg-surface-hover);border-radius:4px}.fretboard-neck{-webkit-user-select:none;user-select:none;flex-direction:column;min-width:100%;display:inline-flex}.fretboard-fret-numbers-row{margin-bottom:4px;display:flex}.fret-number-cell{text-align:center}.fret-num-text{color:var(--text-muted);font-size:.7rem;font-weight:700}.nut-cell .fret-num-text{color:#38bdf8}.fretboard-strings-matrix{background:var(--guitar-neck-bg);border-top:2px solid #3e322a;border-bottom:2px solid #3e322a;flex-direction:column;display:flex;position:relative;box-shadow:inset 0 2px 8px #0009,0 4px 16px #00000080}.fretboard-string-row{align-items:center;height:38px;display:flex;position:relative}.string-wire{z-index:2;pointer-events:none;background:linear-gradient(#d8dee9 0%,#8892b0 50%,#4c566a 100%);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 2px 4px #000000b3}.string-fret-cells{z-index:5;height:100%;display:flex;position:relative}.fret-cell{border-right:2px solid;border-image:var(--guitar-fret-wire) 1;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.fret-cell.is-nut{border-right:6px solid var(--guitar-nut);background:#0006}.fret-inlay{pointer-events:none;z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.single-dot{opacity:.65;background:radial-gradient(circle,#f1f5f9 0%,#94a3b8 100%);border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #fff3}.double-dots{flex-direction:column;gap:22px;display:flex}.double-dots .dot{opacity:.65;background:radial-gradient(circle,#f1f5f9 0%,#94a3b8 100%);border-radius:50%;width:11px;height:11px;box-shadow:0 0 6px #fff3}.note-badge{z-index:10;cursor:pointer;border:1px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.note-badge:hover{z-index:20;transform:scale(1.22)}.note-badge.is-root{color:#fff;box-shadow:0 0 14px var(--accent-root-glow);background:linear-gradient(135deg,#f59e0b 0%,#b45309 100%);border-color:#fde68a}.note-badge.is-tone{color:#fff;box-shadow:0 0 10px var(--accent-tone-glow);background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border-color:#93c5fd}.note-badge.is-playing{background:linear-gradient(135deg,#ec4899 0%,#be185d 100%)!important;border-color:#fbcfe8!important;transform:scale(1.35)!important;box-shadow:0 0 24px #ec4899!important}.badge-text{text-shadow:0 1px 2px #0009;font-size:.72rem;font-weight:800;line-height:1}.note-badge.mode-dot{width:14px;height:14px}.fretboard-inlay-indicators-row{margin-top:4px;display:flex}.inlay-indicator-cell{text-align:center;height:14px}.fret-marker-pill{color:var(--text-muted);opacity:.5;font-size:.6rem}.octave-shift-group{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);align-items:center;gap:.4rem;padding:.25rem .5rem;display:flex}.octave-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:2px;padding:.2rem .45rem;font-size:.75rem;font-weight:700;display:flex}.octave-btn:disabled{opacity:.3;cursor:not-allowed}.range-indicator{color:var(--text-primary);padding:0 .25rem;font-size:.75rem;font-weight:700}.piano-keyboard-viewport{scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent;padding:1.25rem 1rem;overflow-x:auto}.piano-keys-wrapper{-webkit-user-select:none;user-select:none;background:#000;border-radius:8px;height:180px;padding:4px 6px;display:inline-flex;position:relative;box-shadow:0 10px 30px #000c,inset 0 2px 4px #ffffff1a}.piano-key{cursor:pointer;transition:transform 80ms,background .15s;position:relative}.piano-key.white-key{background:var(--piano-white-key);z-index:1;border:1px solid #94a3b8;border-radius:0 0 5px 5px;flex-direction:column;justify-content:flex-end;align-items:center;width:44px;height:172px;padding-bottom:8px;display:flex;box-shadow:inset 0 -4px 6px #00000026,1px 0 2px #0003}.piano-key.white-key:hover{background:#f8fafc}.piano-key.white-key.key-pressed{background:var(--piano-white-active);transform:translateY(3px);box-shadow:inset 0 -1px 3px #0000004d}.piano-key.black-key{background:var(--piano-black-key);z-index:10;border:1px solid #000;border-radius:0 0 4px 4px;flex-direction:column;justify-content:flex-end;align-items:center;width:28px;height:108px;margin-left:-14px;margin-right:-14px;padding-bottom:8px;display:flex;box-shadow:2px 4px 8px #0009,inset 0 -2px 3px #ffffff26}.piano-key.black-key:hover{background:#334155}.piano-key.black-key.key-pressed{background:var(--piano-black-active);transform:translateY(2px);box-shadow:1px 2px 4px #000c}.white-key-subtext{color:#94a3b8;font-size:.65rem;font-weight:600}.key-badge{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-bottom:6px;display:flex;box-shadow:0 2px 6px #0006}.key-badge.badge-root{color:#fff;box-shadow:0 0 12px var(--accent-root-glow);background:linear-gradient(135deg,#f59e0b 0%,#b45309 100%);border:1px solid #fef08a}.key-badge.badge-tone{color:#fff;box-shadow:0 0 8px var(--accent-tone-glow);background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border:1px solid #bfdbfe}.key-badge.mode-dot{width:12px;height:12px}.theory-card-container{flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.theory-header{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding-bottom:1.25rem;display:flex}.theory-main-meta{flex-direction:column;gap:.4rem;display:flex}.title-row{align-items:center;gap:.75rem;display:flex}.theory-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.6rem;font-weight:800}.chord-symbol-badge{border:1px solid var(--accent-brand);color:#a5b4fc;border-radius:var(--radius-sm);background:#6366f133;padding:.2rem .6rem;font-size:.85rem;font-weight:800}.theory-description{color:var(--text-secondary);max-width:700px;font-size:.9rem}.formula-box{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);flex-direction:column;align-items:flex-end;gap:.25rem;padding:.5rem .9rem;display:flex}.formula-tag{text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:700}.formula-code{color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1.05rem;font-weight:700}.notes-breakdown-panel,.diatonic-chords-panel{flex-direction:column;gap:.75rem;display:flex}.breakdown-header{align-items:center;gap:.5rem;display:flex}.panel-icon{color:var(--accent-brand)}.panel-label{color:var(--text-secondary);font-size:.85rem;font-weight:700}.panel-hint{color:var(--text-muted);font-size:.75rem}.note-pills-row{flex-wrap:wrap;gap:.6rem;display:flex}.note-pill-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:.75rem;padding:.6rem .9rem;transition:all .2s;display:flex}.note-pill-card:hover{background:var(--bg-surface-hover);border-color:#6366f166;transform:translateY(-2px)}.note-pill-card.is-root{background:#f59e0b14;border-color:#f59e0b80}.pill-name{color:var(--text-primary);font-size:1.15rem;font-weight:800}.note-pill-card.is-root .pill-name{color:#fbbf24}.pill-meta{flex-direction:column;align-items:flex-start;line-height:1.2;display:flex}.pill-degree{color:#38bdf8;font-size:.75rem;font-weight:700}.pill-interval{color:var(--text-muted);font-size:.7rem}.diatonic-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;display:grid}.diatonic-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-direction:column;gap:.5rem;padding:.75rem;display:flex}.diatonic-degree{color:#a5b4fc;font-size:.85rem;font-weight:800}.diatonic-names{flex-direction:column;gap:.35rem;display:flex}.chord-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;justify-content:space-between;align-items:center;padding:.35rem .55rem;font-size:.85rem;font-weight:700;transition:all .15s;display:flex}.chord-btn:hover{background:var(--accent-brand);border-color:var(--accent-brand);color:#fff}.diatonic-notes-list{color:var(--text-muted);letter-spacing:.02em;font-size:.72rem}.site-footer{border-top:1px solid var(--border-subtle);background:#0c0f1799;margin-top:auto;padding:1rem 1.5rem}.footer-content{max-width:1440px;color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin:0 auto;font-size:.8rem;display:flex}.footer-deploy-hint{color:#38bdf8;font-weight:600}.btn-metronome-toggle{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary)}.btn-metronome-toggle:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.btn-metronome-toggle.active{border-color:var(--accent-brand);color:#a5b4fc;box-shadow:0 0 12px var(--accent-brand-glow);background:#6366f133}.metronome-container{border-radius:var(--radius-lg);border:1px solid var(--border-subtle);padding:1rem 1.25rem;transition:all .3s;position:relative;overflow:hidden}.metronome-container.is-active{border-color:#10b98180;box-shadow:0 0 20px #10b98126}.metronome-layout{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.metronome-left{align-items:center;gap:1.25rem;display:flex}.metro-play-btn{border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:.5rem;padding:.55rem 1.25rem;font-size:.95rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.metro-play-btn.btn-active-start{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 0 14px #10b98166}.metro-play-btn.btn-active-start:hover{transform:translateY(-1px);box-shadow:0 0 20px #10b98199}.metro-play-btn.btn-active-stop{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 0 14px #ef444466}.metro-play-btn.btn-active-stop:hover{transform:translateY(-1px)}.metro-beats-display{align-items:center;gap:.5rem;display:flex}.metro-beat-dot{background:var(--bg-surface);border:1px solid var(--border-subtle);width:32px;height:32px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;font-weight:800;transition:all 80ms;display:flex}.metro-beat-dot.active-beat{color:#fff;background:linear-gradient(135deg,#06b6d4 0%,#0891b2 100%);border-color:#67e8f9;transform:scale(1.25);box-shadow:0 0 16px #06b6d4cc}.metro-beat-dot.accent-beat.active-beat{color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-color:#fde68a;transform:scale(1.35);box-shadow:0 0 22px #f59e0be6}.metronome-center{flex-direction:column;flex:1;align-items:center;gap:.4rem;max-width:380px;display:flex}.bpm-stepper-group{align-items:center;gap:.4rem;display:flex}.bpm-step-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;padding:.35rem .6rem;font-size:.8rem;font-weight:700;transition:all .15s;display:flex}.bpm-step-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:#6366f166}.bpm-display-badge{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);justify-content:center;align-items:baseline;gap:.25rem;min-width:100px;padding:.3rem .9rem;display:flex}.bpm-value-large{color:#f8fafc;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:1.4rem;font-weight:900}.bpm-unit{color:#94a3b8;font-size:.75rem;font-weight:700}.metro-bpm-slider{width:100%;accent-color:var(--accent-brand);cursor:pointer}.metronome-right{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.time-signature-group{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);align-items:center;gap:.3rem;padding:.25rem .5rem;display:flex}.metro-label{color:var(--text-muted);font-size:.75rem;font-weight:700}.meter-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:.8rem;font-weight:700;transition:all .15s}.meter-btn.active{background:var(--accent-brand);color:#fff;box-shadow:0 0 10px var(--accent-brand-glow)}.accent-toggle-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:.35rem;padding:.45rem .75rem;font-size:.8rem;font-weight:700;transition:all .2s;display:flex}.accent-toggle-btn.active{color:#f59e0b;background:#f59e0b1a;border-color:#f59e0b66}.tap-tempo-btn{color:#fff;border-radius:var(--radius-md);letter-spacing:.03em;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);border:none;align-items:center;gap:.4rem;padding:.45rem .85rem;font-size:.8rem;font-weight:800;transition:all .15s;display:flex;box-shadow:0 0 12px #4f46e559}.tap-tempo-btn:hover{transform:translateY(-1px);box-shadow:0 0 16px #4f46e580}.tap-tempo-btn:active{background:#3730a3;transform:scale(.96)}@media (width<=960px){.root-keys-grid{grid-template-columns:repeat(6,1fr)}.metronome-layout{flex-direction:column;align-items:stretch}.metronome-center{max-width:100%}}@media (width<=640px){.header-container{flex-direction:column;align-items:flex-start}.audio-controls-panel{justify-content:space-between;width:100%}.root-keys-grid{grid-template-columns:repeat(4,1fr)}.formula-box{align-items:flex-start}.metronome-right{justify-content:space-between}}