@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";:root,:root[data-theme=dark]{--bg-main:#0a0c10;--bg-surface:#12151d;--bg-surface-elevated:#1a1e29;--bg-card:#151923;--bg-card-hover:#1e2332;--bg-input:#0e1118;--border-subtle:#242b3d;--border-focus:#3b82f6;--border-highlight:#f59e0b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-amber:#f59e0b;--accent-amber-glow:#f59e0b40;--accent-cyan:#06b6d4;--accent-cyan-glow:#06b6d433;--accent-emerald:#10b981;--accent-rose:#f43f5e;--accent-purple:#8b5cf6;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--shadow-card:0 4px 20px -2px #00000080;--shadow-glow:0 0 20px -3px #f59e0b59}:root[data-theme=light]{--bg-main:#f8fafc;--bg-surface:#fff;--bg-surface-elevated:#f1f5f9;--bg-card:#fff;--bg-card-hover:#f8fafc;--bg-input:#fff;--border-subtle:#e2e8f0;--border-focus:#2563eb;--border-highlight:#d97706;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--accent-amber:#d97706;--accent-amber-glow:#d9770626;--accent-cyan:#0284c7;--accent-cyan-glow:#0284c726;--accent-emerald:#059669;--accent-rose:#e11d48;--accent-purple:#7c3aed;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--shadow-card:0 4px 20px -2px #00000012;--shadow-glow:0 0 20px -3px #d9770633}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}.app-layout{background:radial-gradient(circle at 50% 0,#151a28 0%,#0a0c10 70%);flex-direction:column;min-height:100vh;display:flex}[data-theme=light] .app-layout{background:radial-gradient(circle at 50% 0,#f1f5f9 0%,#fff 80%)}.app-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);z-index:50;background-color:#12151dd9;justify-content:space-between;align-items:center;padding:.85rem 2rem;display:flex;position:sticky;top:0}[data-theme=light] .app-header{background-color:#ffffffd9}.header-left{align-items:center;gap:.85rem;display:flex}.logo-badge{border-radius:var(--radius-md);color:#000;background:linear-gradient(135deg,#f59e0b,#d97706);justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:0 2px 10px #f59e0b4d}.logo-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.2rem;font-weight:800}.logo-accent{color:var(--accent-amber)}.logo-subtitle{color:var(--text-secondary);font-size:.72rem;font-weight:500}.btn-theme-toggle{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:.45rem;margin-left:.5rem;padding:.35rem .75rem;font-size:.76rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 1px 3px #0000001a}.btn-theme-toggle:hover{border-color:var(--accent-amber);background:var(--bg-card-hover);transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.btn-theme-toggle .theme-icon-moon{color:#fbbf24}.btn-theme-toggle .theme-icon-sun{color:#f59e0b}.header-center{align-items:center;gap:.6rem;display:flex}.header-stat-pill{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);align-items:center;gap:.5rem;padding:.35rem .75rem;font-size:.76rem;display:flex}.header-stat-pill.pill-active{border-color:var(--accent-amber);color:var(--accent-amber);background:#f59e0b26}.stat-label{color:var(--text-muted);letter-spacing:.05em;font-size:.65rem;font-weight:800}.stat-value{font-family:var(--font-mono);color:var(--text-primary);font-weight:700}.stat-unit{color:var(--accent-amber);font-size:.65rem}.header-right{align-items:center;gap:.6rem;display:flex}.btn-header-action{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;align-items:center;gap:.45rem;padding:.45rem .85rem;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-header-action:hover{background:var(--bg-card-hover);border-color:var(--accent-amber);color:var(--text-primary);transform:translateY(-1px)}.btn-header-icon{border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn-header-icon:hover{color:var(--text-primary);border-color:var(--accent-amber);background:var(--bg-card-hover)}.app-main-content{flex-direction:column;flex:1;gap:1.5rem;width:100%;max-width:1100px;margin:0 auto;padding:2rem 1.5rem 3.5rem;display:flex}.control-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1.5rem}.card-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.card-title-group{align-items:center;gap:.75rem;display:flex}.card-icon{color:var(--accent-amber)}.card-title{color:var(--text-primary);font-size:1rem;font-weight:700}.card-subtitle{color:var(--text-secondary);font-size:.75rem}.btn-toggle-switch{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:.5rem;padding:.3rem .65rem;transition:all .15s;display:flex}.btn-toggle-switch.switch-on{border-color:var(--accent-amber);background:#f59e0b33}.switch-knob{background:var(--text-muted);border-radius:50%;width:12px;height:12px;transition:all .15s}.switch-on .switch-knob{background:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber)}.switch-text{color:var(--text-primary);letter-spacing:.04em;font-size:.72rem;font-weight:800}.bpm-hero-card{text-align:center;padding:2.25rem 2rem;position:relative;overflow:hidden}.bpm-hero-card:before{content:"";pointer-events:none;background:radial-gradient(at top,#f59e0b1f,#0000 70%);width:500px;height:200px;position:absolute;top:0;left:50%;transform:translate(-50%)}.bpm-readout-container{flex-direction:column;justify-content:center;align-items:center;margin-bottom:.75rem;display:flex}.bpm-digits-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:baseline;gap:.4rem;display:inline-flex}.bpm-digits{font-family:var(--font-mono);color:var(--accent-amber);text-shadow:0 0 35px var(--accent-amber-glow);letter-spacing:-.04em;font-size:7rem;font-weight:800;line-height:1}.bpm-label{color:var(--text-secondary);letter-spacing:.05em;font-size:1.5rem;font-weight:800}.bpm-inline-input{font-family:var(--font-mono);color:var(--accent-amber);background:var(--bg-input);border:2px solid var(--accent-amber);border-radius:var(--radius-md);text-align:center;width:280px;box-shadow:0 0 20px var(--accent-amber-glow);outline:none;font-size:6.5rem;font-weight:800}.tempo-term-badge{border-radius:var(--radius-full);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);cursor:pointer;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.35rem 1.1rem;transition:all .2s;display:inline-flex}.tempo-term-badge:hover{border-color:var(--accent-amber);background:var(--bg-card-hover);transform:translateY(-1px)}.tempo-italian{color:var(--text-primary);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;font-weight:800}.tempo-badge-divider{color:var(--text-muted)}.tempo-english{color:var(--text-secondary);font-size:.8rem;font-weight:500}.bpm-controls-bar{justify-content:center;align-items:center;gap:1rem;width:100%;max-width:720px;margin:0 auto;display:flex}.btn-stepper{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:52px;height:52px;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;transition:all .12s;display:flex;box-shadow:0 2px 6px #0003}.btn-stepper:hover{background:var(--bg-card-hover);border-color:var(--accent-amber);color:var(--accent-amber);transform:scale(1.05)}.btn-stepper:active{background:#f59e0b26;transform:scale(.95)}.btn-stepper-small{width:40px;height:40px;font-size:.82rem;font-family:var(--font-mono);border-radius:var(--radius-md)}.bpm-slider-container{flex-direction:column;flex:1;gap:.5rem;display:flex}.bpm-slider{-webkit-appearance:none;background:var(--border-subtle);cursor:pointer;border-radius:4px;outline:none;width:100%;height:8px;transition:background .15s}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-amber);width:24px;height:24px;box-shadow:0 0 12px var(--accent-amber);cursor:pointer;border-radius:50%;transition:transform .1s}.bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.bpm-slider::-moz-range-thumb{background:var(--accent-amber);width:24px;height:24px;box-shadow:0 0 12px var(--accent-amber);cursor:pointer;border:none;border-radius:50%}.slider-labels{color:var(--text-muted);font-size:.72rem;font-family:var(--font-mono);justify-content:space-between;display:flex}.visualizer-card{flex-direction:column;gap:1.25rem;display:flex}.visualizer-beats-grid{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.5rem;display:flex}.metro-beat-box{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:60px;max-width:120px;padding:.75rem .5rem;transition:all 80ms cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.metro-beat-number{font-family:var(--font-mono);color:var(--text-muted);font-size:1.25rem;font-weight:800;transition:color 80ms}.metro-beat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.65rem;font-weight:700}.metro-beat-box.metro-beat-active{background:var(--accent-cyan);box-shadow:0 0 20px var(--accent-cyan-glow);border-color:#fff;transform:translateY(-2px)}.metro-beat-box.metro-beat-active .metro-beat-number,.metro-beat-box.metro-beat-active .metro-beat-label{color:#000;font-weight:900}.metro-beat-box.metro-beat-downbeat{background:var(--accent-amber);box-shadow:0 0 24px var(--accent-amber-glow);border-color:#fff;transform:translateY(-3px)scale(1.03)}.metro-beat-box.metro-beat-downbeat .metro-beat-number,.metro-beat-box.metro-beat-downbeat .metro-beat-label{color:#000;font-weight:900}.pendulum-container{flex-direction:column;align-items:center;padding:1rem 0;display:flex}.pendulum-stand{justify-content:center;width:220px;height:120px;display:flex;position:relative}.pendulum-arm{background:linear-gradient(to bottom, #94a3b8, var(--accent-amber));transform-origin:top;border-radius:2px;width:4px;height:100px;transition:transform 50ms linear;position:absolute;top:0}.pendulum-bob{background:var(--accent-amber);width:22px;height:22px;box-shadow:0 0 12px var(--accent-amber);border-radius:50%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.transport-main-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;padding:.5rem 0;display:flex}.btn-play-master{background:var(--bg-surface-elevated);border:2px solid var(--accent-amber);width:90px;height:90px;color:var(--accent-amber);cursor:pointer;box-shadow:0 0 20px var(--accent-amber-glow);border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn-play-master:hover{box-shadow:0 0 28px var(--accent-amber-glow);background:#f59e0b26;transform:scale(1.05)}.btn-play-master.is-playing{background:var(--accent-amber);color:#000;box-shadow:0 0 30px var(--accent-amber)}.btn-play-master:active{transform:scale(.96)}.tap-zone{text-align:center;cursor:pointer;background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);width:140px;height:80px;color:var(--accent-cyan);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;font-size:1.5rem;font-weight:800;transition:all .1s;display:flex}.tap-zone:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover);transform:translateY(-1px)}.tap-zone:active,.tap-zone.tap-active{box-shadow:0 0 18px var(--accent-cyan-glow);border-color:var(--accent-cyan);background:#06b6d426;transform:scale(1.04)}.tap-subtext{color:var(--text-muted);text-transform:uppercase;font-size:.65rem;font-weight:600}.audio-settings-grid{border-top:1px solid var(--border-subtle);grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.25rem;padding-top:1.25rem;display:grid}.volume-control-box{flex-direction:column;gap:.5rem;display:flex}.volume-header{justify-content:space-between;align-items:center;display:flex}.volume-slider-row{align-items:center;gap:.75rem;display:flex}.custom-volume-slider{-webkit-appearance:none;background:var(--border-subtle);cursor:pointer;border-radius:3px;outline:none;flex:1;height:6px}.custom-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-amber);width:18px;height:18px;box-shadow:0 0 8px var(--accent-amber);cursor:pointer;border-radius:50%}.sound-presets-box{flex-direction:column;gap:.5rem;display:flex}.sound-buttons-grid{grid-template-columns:repeat(2,1fr);gap:.4rem;display:grid}.btn-sound-select{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:.35rem;padding:.45rem .6rem;font-size:.76rem;font-weight:600;transition:all .12s;display:flex}.btn-sound-select:hover{background:var(--bg-card-hover);color:var(--text-primary)}.btn-sound-select.sound-active{border-color:var(--accent-amber);color:var(--accent-amber);background:#f59e0b26}.rhythm-settings-container{flex-direction:column;gap:1.5rem;display:flex}.rhythm-top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.beats-stepper-group{align-items:center;gap:.6rem;display:flex}.beats-value-box{font-family:var(--font-mono);color:var(--text-primary);text-align:center;min-width:48px;font-size:1.35rem;font-weight:800}.subdivisions-group{flex-direction:column;gap:.6rem;display:flex}.subdivisions-buttons-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.btn-subdivision{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:90px;height:64px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;transition:all .15s;display:flex}.btn-subdivision:hover{background:var(--bg-card-hover);border-color:var(--text-muted);color:var(--text-primary)}.btn-subdivision.sub-active{border-color:var(--accent-amber);color:var(--accent-amber);box-shadow:0 0 15px var(--accent-amber-glow);background:#f59e0b26}.sub-note-icon{justify-content:center;align-items:center;width:28px;height:28px;display:flex}.sub-name{text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;font-weight:700}.timer-card{flex-direction:column;gap:1.25rem;display:flex}.timer-display-row{justify-content:center;align-items:center;gap:1.5rem;display:flex}.timer-digits{font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.35rem 1.25rem;font-size:3rem;font-weight:800}.timer-digits.timer-running{color:var(--accent-amber);border-color:var(--accent-amber);box-shadow:0 0 15px var(--accent-amber-glow)}.timer-presets-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.btn-timer-chip{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;padding:.35rem .8rem;font-size:.76rem;font-weight:600;transition:all .12s}.btn-timer-chip:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent-amber)}.btn-timer-chip.chip-active{background:var(--accent-amber);color:#000;border-color:var(--accent-amber);font-weight:800}.trainer-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.trainer-field{flex-direction:column;gap:.4rem;display:flex}.trainer-select,.trainer-input{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);outline:none;padding:.5rem .75rem;font-size:.82rem}.trainer-select:focus,.trainer-input:focus{border-color:var(--accent-amber)}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-container{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;width:100%;max-width:680px;max-height:85vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title{color:var(--text-primary);align-items:center;gap:.6rem;font-size:1.15rem;font-weight:800;display:flex}.btn-modal-close{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:.35rem;display:flex}.btn-modal-close:hover{color:var(--text-primary);background:var(--bg-surface-elevated)}.modal-body{flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex;overflow-y:auto}.tempo-table{border-collapse:collapse;width:100%;font-size:.85rem}.tempo-table th{text-align:left;border-bottom:2px solid var(--border-subtle);color:var(--text-secondary);text-transform:uppercase;padding:.65rem .75rem;font-size:.75rem;font-weight:700}.tempo-table td{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);padding:.65rem .75rem}.tempo-table-row{cursor:pointer;transition:background .12s}.tempo-table-row:hover{background:var(--bg-surface-elevated)}.tempo-table-row.active-row{background:#f59e0b26;font-weight:700}.tempo-table-row.active-row td:first-child{color:var(--accent-amber)}.shortcuts-list{flex-direction:column;gap:.75rem;display:flex}.shortcut-item{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.shortcut-key{font-family:var(--font-mono);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--accent-amber);padding:.2rem .5rem;font-size:.75rem;font-weight:700}.app-studio-footer{background-color:var(--bg-surface);border-top:1px solid var(--border-subtle);margin-top:auto;padding:1.5rem 2rem}.footer-container{flex-direction:column;gap:1rem;max-width:1100px;margin:0 auto;display:flex}.footer-main-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.footer-brand{align-items:center;gap:.6rem;display:flex}.footer-logo-badge{border-radius:var(--radius-sm);color:#000;background:linear-gradient(135deg,#f59e0b,#d97706);justify-content:center;align-items:center;width:26px;height:26px;display:flex}.footer-brand-name{color:var(--text-primary);font-size:.82rem;font-weight:700}.footer-brand-divider{color:var(--text-muted);margin:0 .25rem}.footer-copyright{color:var(--text-secondary);font-size:.75rem}.text-accent-gold{color:var(--accent-amber)}.footer-links-group{align-items:center;gap:.6rem;display:flex}.footer-nav-link{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.35rem;font-size:.78rem;transition:color .12s;display:inline-flex}.footer-nav-link:hover{color:var(--accent-amber)}.footer-links-divider{color:var(--border-subtle)}.footer-disclaimer-row{border-top:1px solid var(--border-subtle);padding-top:.75rem}.footer-disclaimer-text{color:var(--text-muted);font-size:.72rem;line-height:1.4}@media (width<=768px){.app-header{padding:.75rem 1rem}.header-stat-pill,.header-action-label{display:none}.bpm-digits{font-size:5rem}.audio-settings-grid,.trainer-grid{grid-template-columns:1fr}}