:root{--color-bg-dark: #090d16;--color-bg-light: #0d1527;--color-card-bg: rgba(20, 27, 45, .7);--color-card-border: rgba(255, 255, 255, .07);--color-text-primary: #f8fafc;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-accent: #5ec8c0;--color-accent-glow: rgba(94, 200, 192, .3);--color-accent-ink: #08101a;--color-in-tune: #10b981;--color-in-tune-glow: rgba(16, 185, 129, .35);--color-flat: #f59e0b;--color-flat-glow: rgba(245, 158, 11, .3);--color-sharp: #ef4444;--color-sharp-glow: rgba(239, 68, 68, .3);--jw-intune: var(--color-in-tune);--jw-flat: var(--color-flat);--jw-sharp: var(--color-sharp);--jw-muted: var(--color-text-muted);--transition-fast: .15s ease;--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}.icon-svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle;transition:transform var(--transition-normal)}.btn-icon{display:flex;align-items:center;justify-content:center}.spinner-svg{width:1.1em;height:1.1em;stroke:currentColor;stroke-width:3;fill:none;animation:spin 1s linear infinite;display:inline-block;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}button,select,input,label,a,.control-btn,.action-btn,.string-btn,.timer-preset-btn{touch-action:manipulation}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--color-bg-dark);color:var(--color-text-primary);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:1rem;position:relative;box-sizing:border-box}.app-background-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:640px;height:640px;z-index:0;pointer-events:none;background:radial-gradient(circle,var(--color-accent-glow) 0%,rgba(0,0,0,0) 68%);opacity:.32}.app-container{width:100%;max-width:420px;height:calc(100vh - 2rem);height:calc(100dvh - 2rem);max-height:860px;display:flex;flex-direction:column;z-index:1}.app-card{background:var(--color-card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-card-border);border-radius:30px;box-shadow:0 24px 64px -12px #0009,inset 0 1px 1px #ffffff14;overflow:hidden;transition:box-shadow var(--transition-slow);display:flex;flex-direction:column;position:relative;flex:1 1 auto;height:100%;min-height:0}.app-card:hover{box-shadow:0 28px 72px -8px #000000b3,inset 0 1px 1px #ffffff1f}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 12px;border-bottom:none;flex-direction:row;gap:0}.header-top-row{display:flex;align-items:center;justify-content:space-between;width:100%}.app-logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.brand-parent{height:13px;width:auto;display:block;flex:0 0 auto;opacity:.92;margin-bottom:3px}.app-logo-text{font-family:Outfit,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.005em;line-height:1.08;white-space:nowrap;background:linear-gradient(100deg,#a78bfa,#8b7bfb 45%,#6d9bfc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.app-logo-icon{display:none}.app-logo-wrapper{width:220px;height:44px;overflow:hidden;position:relative;display:none}.app-logo-img{height:140px;width:auto;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 12px rgba(90,75,255,.15))}.gear-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;flex:0 0 auto}.gear-btn:hover{color:var(--color-text-primary);background:#ffffff14}.gear-btn svg{width:18px;height:18px}.gear-btn.open{color:var(--color-accent);border-color:var(--color-accent)}.settings-drawer{position:absolute;top:66px;right:18px;width:226px;z-index:30;background:#101625;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 16px 18px;box-shadow:0 20px 50px #0000008c;display:none;flex-direction:column;gap:14px;opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .16s ease,transform .16s ease}.settings-drawer.open{display:flex;opacity:1;transform:translateY(0) scale(1)}.settings-row{display:flex;flex-direction:column;gap:6px}.settings-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.settings-drawer select{width:100%;background:#00000040;border:1px solid rgba(255,255,255,.08);color:var(--color-text-primary);border-radius:12px;padding:9px 10px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}.settings-drawer select option{background-color:#101625;color:var(--color-text-primary)}.settings-drawer select optgroup{background-color:#000;color:var(--color-accent);font-weight:700;font-style:normal}.theme-switcher{display:flex;gap:8px;align-items:center;background:none;padding:0;border:none}.theme-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease;position:relative;box-sizing:border-box}.theme-swatch:hover{transform:scale(1.12)}.theme-swatch.active{border-color:#fff;box-shadow:0 0 8px currentColor;transform:scale(1.12)}.card-content{flex:1;display:flex;flex-direction:column;padding:6px 20px 4px;min-height:0;overflow-y:auto}.tab-panel{display:none;flex-direction:column;flex:1;gap:14px}.tab-panel.active{display:flex}.tuner-layout,.metronome-layout{position:relative;display:flex;flex-direction:column;flex:1;gap:14px}.jw-focus-card,.metronome-visual-card{position:relative;flex:1;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 20px 26px;border:1px solid rgba(255,255,255,.06);border-radius:24px;background:linear-gradient(175deg,#0d1220,#080b13);box-shadow:0 24px 54px #00000080,inset 0 1px #ffffff0a;overflow:hidden}.stage-pill-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}.corner-pill-left,.corner-pill-right{min-width:0}.corner-pill-right{max-width:55%}.corner-pill{display:flex;align-items:center;gap:3px;background:#00000052;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 6px 4px 9px}.corner-pill .corner-label{font-family:JetBrains Mono,monospace;font-size:8.5px;font-weight:700;letter-spacing:.04em;color:var(--color-text-muted);margin-right:1px}.corner-btn{width:17px;height:17px;border-radius:50%;border:none;background:#ffffff12;color:var(--color-text-primary);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.corner-btn:hover{background:#ffffff29}.corner-val{font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:700;min-width:21px;text-align:center}.corner-select{background:#00000052;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 12px;color:var(--color-text-primary);font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;outline:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.corner-select option{background-color:#101625;color:var(--color-text-primary)}.corner-select optgroup{background-color:#000;color:var(--color-accent);font-weight:700;font-style:normal}.corner-pill-right .custom-select-wrapper{position:relative;max-width:100%}.corner-pill-right .custom-select-trigger{display:flex;align-items:center;gap:4px;min-height:0;background:#00000052;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 10px;color:var(--color-text-primary);font-family:inherit;font-size:10.5px;font-weight:700;cursor:pointer}.corner-pill-right .custom-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.corner-pill-right .custom-select-trigger.native-selected{color:var(--color-accent)}.corner-pill-right .custom-select-arrow{width:10px;height:10px;flex:0 0 auto;stroke:var(--color-text-muted)}.corner-pill-right .custom-select-options{display:none;position:absolute;top:calc(100% + 6px);right:0;left:auto;min-width:192px;background:#101625;border:1px solid rgba(255,255,255,.08);border-radius:14px;max-height:220px;overflow-y:auto;z-index:50;padding:5px;box-shadow:0 20px 50px #0000008c}.corner-pill-right .custom-select-wrapper.open .custom-select-options{display:block}.corner-pill-right .custom-select-option{padding:7px 10px;font-size:11.5px;font-weight:600;color:var(--color-text-secondary);border-radius:9px;cursor:pointer}.corner-pill-right .custom-select-option:hover{background:#ffffff0f;color:var(--color-text-primary)}.corner-pill-right .custom-select-option.selected{background:#ffffff17;color:var(--color-text-primary)}.corner-pill-right .custom-select-option.native-sound{color:var(--color-accent);font-weight:700}.corner-pill-right .custom-select-option.native-sound:hover,.corner-pill-right .custom-select-option.native-sound.selected{background:var(--color-accent-glow);color:var(--color-text-primary)}#tuner-skin-mount{flex:1;display:flex;align-items:center;width:100%}#tuner-skin-mount>div{width:100%}.jw-focus-inner{--glow: 0;--cents: 0;--needle-cents: 0;--state-color: var(--jw-muted);position:relative;width:100%;display:flex;flex-direction:column;align-items:center}.jw-focus-glow{position:absolute;left:50%;top:-45%;width:130%;height:85%;transform:translate(-50%);pointer-events:none;background:radial-gradient(50% 60% at 50% 50%,rgba(16,185,129,.22),transparent 72%);opacity:var(--glow);transition:opacity .1s linear}.jw-note-row{position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;line-height:1;margin-top:8px}.jw-focus-inner .jw-note{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:clamp(58px,20vw,84px);letter-spacing:-3px;color:var(--color-text-primary)}.jw-focus-inner .jw-oct{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:22px;color:var(--color-text-muted)}.jw-state-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff08;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--state-color);transition:color .2s ease,border-color .2s ease}.jw-fine-bar{position:relative;z-index:1;width:84%;margin-top:6px}.jw-fine-track{position:relative;height:30px}.jw-fine-line{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;background:#ffffff14}.jw-fine-dot{position:absolute;left:calc(50% + var(--needle-cents) * .8%);top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:var(--state-color);box-shadow:0 0 calc(4px + var(--glow) * 10px) var(--state-color);transition:left .07s linear}.jw-fine-labels{display:flex;justify-content:space-between;margin-top:4px}.jw-fine-labels span{font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:600;letter-spacing:2px;color:var(--color-text-muted)}.tuner-stats-bar{display:flex;justify-content:space-between;padding:4px 6px 0;gap:8px}.tuner-stats-bar .info-card{display:inline-flex;align-items:baseline;gap:5px;background:none;border:none;padding:0}.info-label{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted)}.info-value{font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:700;color:var(--color-text-secondary)}.tuner-stats-bar .select-card,.tuner-stats-bar .a4-control-card{display:none}.mode-toggles{flex:1;display:flex;background:#00000040;border-radius:13px;padding:3px;border:1px solid rgba(255,255,255,.05);gap:0}.mode-toggles .control-btn{flex:1;padding:9px 0;border:none;background:none;color:var(--color-text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;border-radius:10px;cursor:pointer;transition:all .15s ease}.mode-toggles .control-btn.active{background:#ffffff17;color:var(--color-text-primary)}.tuner-controls{display:flex;flex-direction:column;gap:8px}.action-btn,#btn-tuner-toggle{width:100%;padding:16px;border:none;border-radius:17px;background:var(--color-accent);color:var(--color-accent-ink);font-family:inherit;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 10px 24px var(--color-accent-glow);transition:transform .15s ease,box-shadow .15s ease,background .2s ease}.action-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px var(--color-accent-glow)}.action-btn:active{transform:translateY(1px) scale(.99)}.action-btn.recording,#btn-tuner-toggle.recording{background:#ef4444;box-shadow:0 10px 24px #ef444447;color:#fff}.guitar-neck-container{display:flex;flex-direction:column;gap:6px}.neck-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);text-align:center}.guitar-strings{display:flex;gap:6px}.string-btn{flex:1;padding:10px 2px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:#ffffff08;color:var(--color-text-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:JetBrains Mono,monospace;transition:all .15s ease}.string-btn:hover{background:#ffffff0f}.string-wire{display:none}.string-note-name{font-size:13px;font-weight:800;color:var(--color-text-primary)}.string-freq{font-size:8.5px;font-weight:600;color:var(--color-text-muted)}.string-btn.active{border-color:var(--color-accent);background:var(--color-accent-glow);box-shadow:0 0 10px var(--color-accent-glow)}.string-btn.plucked{animation:pluck-pop .35s ease}@keyframes pluck-pop{30%{transform:scale(1.08)}to{transform:scale(1)}}.visualizer-container{width:100%;height:34px;border-radius:10px;background:#0003;border:1px solid rgba(255,255,255,.05);overflow:hidden}#tuner-canvas{width:100%;height:100%;display:block}.beat-bar-wrapper{position:relative;display:flex;justify-content:center}.beat-dots{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.beat-dot{width:13px;height:13px;border-radius:50%;background:#ffffff14;border:1.5px solid rgba(255,255,255,.05);transition:all .1s ease}.beat-dot.active{background:var(--color-accent);box-shadow:0 0 12px var(--color-accent-glow)}.beat-dot.accent.active{background:#ef4444;box-shadow:0 0 14px #ef44448c}.visual-flash-bar{display:none}.radial-wrap{position:relative;width:148px;height:148px;margin:0 auto}.radial-svg{width:100%;height:100%}.radial-svg path{transition:stroke .12s ease,filter .12s ease}.radial-svg path.active{stroke:var(--color-accent);filter:drop-shadow(0 0 6px var(--color-accent-glow))}.radial-svg path.active-accent{stroke:#fff;filter:drop-shadow(0 0 9px var(--color-accent-glow))}.pendulum-wrap{width:108px;height:128px;margin:0 auto}.pendulum-svg{width:100%;height:100%;overflow:visible}.pendulum-body{fill:#ffffff0d;stroke:#ffffff24;stroke-width:1.5}#pendulum-arm{transition:transform .3s ease-in-out}.bpm-display-section{display:flex;flex-direction:column;align-items:center;gap:6px}.bpm-text-wrapper{display:flex;align-items:baseline;gap:8px}.bpm-number{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:clamp(56px,19vw,78px);letter-spacing:-3px;color:var(--color-text-primary)}.bpm-unit{font-family:JetBrains Mono,monospace;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--color-text-muted)}.bpm-fine-adjust{display:flex;gap:8px}.adjust-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#ffffff0d;color:var(--color-text-primary);font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:700;cursor:pointer;transition:background .15s ease}.adjust-btn:hover{background:#ffffff1f}.slider-wrapper{width:100%}#metronome-bpm-slider{width:100%;accent-color:var(--color-accent)}.metro-more-btn{position:absolute;bottom:12px;right:14px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:all .15s ease}.metro-more-btn:hover{color:var(--color-text-primary);background:#ffffff1f}.metro-more-btn.open{color:var(--color-accent);border-color:var(--color-accent)}.metro-more-drawer{position:absolute;bottom:44px;right:14px;width:200px;z-index:10;background:#101625;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;box-shadow:0 20px 50px #0000008c;display:none;flex-direction:column;gap:10px}.metro-more-drawer.open{display:flex}.metro-more-drawer .setting-card{background:none;border:none;padding:0}.metro-more-drawer label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);display:block;margin-bottom:6px}.metro-more-drawer select{width:100%;background:#00000040;border:1px solid rgba(255,255,255,.08);color:var(--color-text-primary);border-radius:12px;padding:9px 10px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}.trainer-card{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:6px}.trainer-header{padding:5px 6px}.trainer-settings-grid{display:flex;gap:8px;padding:2px 6px 8px}.trainer-settings-grid .sub-setting{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.trainer-settings-grid label{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.trainer-settings-grid input{width:100%;background:#ffffff0a;border:1px solid rgba(255,255,255,.09);border-radius:10px;color:var(--color-text-primary);font-family:JetBrains Mono,monospace;font-size:12px;padding:7px 4px;text-align:center}.metronome-controls,.timer-action-controls,.chord-trainer-footer .timer-action-controls{display:flex;gap:8px}.control-btn.tap-btn,#btn-metro-tap,#btn-timer-reset,#btn-chord-trainer-mute,#btn-jam-mute-click{flex:1;padding:0 12px;height:46px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s ease}.control-btn.tap-btn:hover{background:#ffffff17}.control-btn.tap-btn.tapped,.control-btn.tap-btn.active{border-color:var(--color-accent)}.control-btn.play-btn,#btn-metro-toggle,#btn-timer-start,#btn-chord-trainer-start,#btn-jam-start{flex:1.6;padding:16px;border:none;border-radius:17px;background:var(--color-accent);color:var(--color-accent-ink);font-family:inherit;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 10px 24px var(--color-accent-glow);transition:transform .15s ease,box-shadow .15s ease}.control-btn.play-btn:hover{transform:translateY(-1px)}.control-btn.play-btn.recording,#btn-metro-toggle.recording{background:#ef4444;color:#fff}.checkbox-container{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 6px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--color-text-secondary);flex-direction:row-reverse}.checkbox-container input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.custom-checkbox{position:relative;display:inline-block;width:34px;height:19px;flex:0 0 auto;background:#ffffff24;border-radius:999px;transition:background .2s ease}.custom-checkbox:before{content:"";position:absolute;width:14px;height:14px;left:2.5px;top:2.5px;border-radius:50%;background:#fff;transition:transform .2s ease}.checkbox-container input:checked+.custom-checkbox{background:var(--color-accent)}.checkbox-container input:checked+.custom-checkbox:before{transform:translate(15px)}.practice-layout{display:flex;flex-direction:column;flex:1;gap:12px;min-height:0}.practice-sub-selectors{display:flex;background:#00000040;border-radius:14px;padding:3px;border:1px solid rgba(255,255,255,.05)}.sub-tab-btn{flex:1;padding:8px 4px;border:none;background:none;color:var(--color-text-secondary);font-family:inherit;font-size:11px;font-weight:600;border-radius:10px;cursor:pointer;transition:all .15s ease}.sub-tab-btn.active{background:#ffffff17;color:var(--color-text-primary)}.practice-sub-panel{display:none;flex-direction:column;flex:1;gap:12px;min-height:0}.practice-sub-panel.active{display:flex}.practice-timer-card,.chord-trainer-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 18px 20px;border:1px solid rgba(255,255,255,.06);border-radius:24px;background:linear-gradient(175deg,#0d1220,#080b13);box-shadow:0 24px 54px #00000080,inset 0 1px #ffffff0a}.timer-title{display:none}.timer-display-circle{position:relative;width:168px;height:168px}.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-circle-bg{fill:none;stroke:#ffffff14;stroke-width:8}.timer-circle-progress{fill:none;stroke:var(--color-accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}.timer-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:30px;font-weight:700;color:var(--color-text-primary)}.timer-presets{display:flex;gap:8px}.timer-preset-btn{padding:8px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-secondary);font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;transition:all .15s ease}.timer-preset-btn.active{border-color:var(--color-accent);background:var(--color-accent-glow);color:var(--color-text-primary)}.timer-action-controls{width:100%}#btn-timer-start{flex:1.6}.chord-trainer-card{position:relative}.chord-diagrams-container{display:flex;gap:12px;align-items:center;justify-content:center;width:100%}.chord-active-box,.chord-next-box{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.chord-next-box{opacity:.55}.chord-box-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.chord-name{font-family:Space Grotesk,sans-serif;font-size:26px;font-weight:700;color:var(--color-text-primary)}.chord-name.next{font-size:18px}.chord-svg{width:78px;height:auto}.chord-svg.mini{width:54px}.play-chord-btn{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.play-chord-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}.play-chord-btn svg{width:13px;height:13px}#custom-progression-builder{display:flex;flex-direction:column;gap:10px;width:100%}.custom-chord-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;padding:8px 10px;background:#0003;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.custom-chord-chip{padding:4px 10px;border-radius:8px;background:var(--color-accent-glow);color:var(--color-text-primary);font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;cursor:pointer}.chord-pool{display:flex;flex-wrap:wrap;gap:6px}.chord-pool-btn,.clear-custom-btn{padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:700;cursor:pointer}.clear-custom-btn{margin-left:auto;color:var(--color-text-muted);font-family:inherit;font-weight:600}.chord-beat-progress{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.chord-trainer-footer,.jam-trainer-config{display:flex;flex-direction:column;gap:10px;width:100%}.jam-trainer-config .setting-card{background:none;border:none;padding:0}.jam-trainer-config label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);display:block;margin-bottom:6px}#jam-track-select{width:100%;background:#00000040;border:1px solid rgba(255,255,255,.08);color:var(--color-text-primary);border-radius:12px;padding:9px 10px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}#jam-track-select option{background-color:#101625;color:var(--color-text-primary)}#jam-track-select optgroup{background-color:#000;color:var(--color-accent);font-weight:700;font-style:normal}.jam-instruments-card label{margin-bottom:8px}.jam-mixer-sliders{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:#0000002e}.mixer-row{display:flex;align-items:center;gap:10px}.mixer-label{flex:0 0 62px;font-size:11.5px;font-weight:600;color:var(--color-text-secondary);text-transform:none}.mixer-row input[type=range]{flex:1;accent-color:var(--color-accent)}.mixer-val{flex:0 0 36px;text-align:right;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--color-text-muted)}.jam-offline-card{display:flex;flex-direction:column;gap:8px;width:100%}.jam-preload-btn{width:100%;padding:10px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:inherit;font-weight:600;font-size:11.5px;cursor:pointer;transition:background .15s ease}.jam-preload-btn:hover{background:#ffffff17}.jam-preload-bar{width:100%;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}.jam-preload-fill{height:100%;width:0%;background:var(--color-accent);transition:width .2s ease}.jam-preload-status{font-size:10.5px;color:var(--color-text-muted);text-align:center}.looper-layout{display:flex;flex-direction:column;flex:1;gap:12px;min-height:0}.looper-header-bar{display:flex;flex-direction:column;gap:10px}.looper-transport-group{display:flex;gap:6px}.looper-transport-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#ffffff0d;color:var(--color-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.looper-transport-btn:hover{background:#ffffff1a}.looper-transport-btn.active{color:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 10px var(--color-accent-glow)}.setting-card.looper-locked-card{background:none;border:none;padding:0}.looper-toggle-grid{background:none;border:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}.looper-toggle-grid .checkbox-container{padding:4px;font-size:11px;line-height:1.15;gap:6px}.looper-toggle-grid .checkbox-container .custom-checkbox{flex-shrink:0}.looper-locked-opts{display:none;align-items:center;gap:8px;padding:0 6px 6px;flex-wrap:wrap}.looper-locked-opts[style*=flex]{display:flex}.looper-locked-label{font-size:10.5px;color:var(--color-text-muted);font-weight:600}#looper-locked-bars{background:#00000040;border:1px solid rgba(255,255,255,.08);color:var(--color-text-primary);border-radius:10px;padding:5px 8px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}.looper-locked-beats{font-size:10.5px;color:var(--color-text-muted);font-family:JetBrains Mono,monospace}#btn-looper-add-track,#btn-looper-clear-all{padding:8px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:inherit;font-weight:600;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s ease}#btn-looper-add-track:hover,#btn-looper-clear-all:hover{background:#ffffff17}.looper-tracks-container{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;margin-right:-2px}.looper-tracks-container::-webkit-scrollbar{width:5px}.looper-tracks-container::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.loop-track-card{border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:12px 14px 14px;background:linear-gradient(175deg,#0d1220,#080b13);box-shadow:0 14px 34px #0006,inset 0 1px #ffffff0a;display:flex;flex-direction:column;gap:8px;flex:0 0 auto;transition:border-color .2s ease}.loop-track-card.state-recording{border-color:#ef444466}.loop-track-card.state-playing,.loop-track-card.state-overdubbing{border-color:var(--color-accent-glow)}.track-info{display:flex;align-items:center;justify-content:space-between}.track-num{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:13px;color:var(--color-text-primary)}.track-state-badge{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff08}.state-recording .track-state-badge{color:#ef4444;border-color:#ef444466;background:#ef44441a}.state-playing .track-state-badge,.state-overdubbing .track-state-badge{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-glow)}.state-muted .track-state-badge{color:var(--color-text-muted)}.state-paused .track-state-badge{color:#f0a04b;border-color:#f0a04b66}.track-waveform-wrapper{width:100%;height:56px;border-radius:10px;background:#00000040;border:1px solid rgba(255,255,255,.05);overflow:hidden}.loop-track-canvas{width:100%;height:100%;display:block}.crop-panel,.fx-panel{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:#00000038;border:1px solid rgba(255,255,255,.06)}.crop-slider-row{display:flex;align-items:center;gap:8px}.crop-label{font-size:10px;font-weight:600;color:var(--color-text-muted);flex:0 0 34px}.crop-slider{flex:1;accent-color:var(--color-accent)}.crop-value{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--color-text-secondary);flex:0 0 20px;text-align:right}.crop-buttons,.fx-buttons{display:flex;gap:6px;flex-wrap:wrap}.crop-buttons button,.fx-buttons button{flex:1;padding:7px 4px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer;min-width:62px;transition:all .15s ease}.crop-buttons button:hover,.fx-buttons button:hover{background:#ffffff17}.fx-buttons button.fx-active{border-color:var(--color-accent);background:var(--color-accent-glow);color:var(--color-text-primary)}.track-controls{display:flex;gap:6px;flex-wrap:wrap}.track-controls button{padding:8px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-primary);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease;flex:0 0 auto}.track-controls button:hover:not(:disabled){background:#ffffff17}.track-controls button:disabled{opacity:.3;cursor:not-allowed}.loop-track-card button.btn-track-action{flex:1 1 auto;min-width:84px;width:auto;height:auto;padding:8px 10px;font-size:11px;border-radius:11px;box-shadow:none;background:var(--color-accent);color:var(--color-accent-ink);border:none;font-weight:700}.loop-track-card button.btn-track-action:hover{transform:none}.loop-track-card button.btn-track-action.recording{background:#ef4444;color:#fff}.btn-track-mute.active{border-color:var(--color-accent);color:var(--color-accent)}.btn-track-undo{color:#f0a04b;border-color:#f0a04b59}.btn-track-delete,.btn-track-clear{color:var(--color-text-muted)}.track-vol-row{display:flex;align-items:center;gap:8px}.track-vol-row .vol-icon{width:15px;height:15px;color:var(--color-text-muted);flex:0 0 auto}.track-vol-slider{flex:1;accent-color:var(--color-accent)}.bottom-nav{position:relative;display:flex;justify-content:space-between;align-items:stretch;gap:4px;border-radius:22px;padding:7px;margin:10px 20px 6px;flex:0 0 auto;background:#00000057;border:1px solid var(--color-accent-glow);background:color-mix(in srgb,var(--color-accent) 7%,rgba(0,0,0,.34));border:1px solid color-mix(in srgb,var(--color-accent) 34%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 7%,transparent),0 8px 26px -10px var(--color-accent-glow),inset 0 1px #ffffff0f;transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}@keyframes nav-attention{0%,to{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 7%,transparent),0 8px 26px -10px var(--color-accent-glow),inset 0 1px #ffffff0f}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent) 16%,transparent),0 10px 32px -8px var(--color-accent-glow),inset 0 1px #ffffff0f}}.bottom-nav.nav-attention{animation:nav-attention 1.5s ease-in-out 2}.tab-btn{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:7px 4px 6px;border-radius:16px;transition:color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast)}.tab-btn .tab-icon{display:block}.tab-btn svg{width:20px;height:20px;transition:transform var(--transition-fast)}.tab-btn span:not(.tab-icon){font-size:9.5px;font-weight:700;letter-spacing:.015em;display:block;margin-top:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-btn:hover:not(.active){color:var(--color-text-primary);background:#ffffff0d}.tab-btn:active{transform:scale(.95)}.tab-btn.active{color:var(--color-accent);background:#ffffff0f;background:color-mix(in srgb,var(--color-accent) 17%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent) 40%,transparent)}.tab-btn.active svg{transform:translateY(-1px)}.tab-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.bottom-nav.nav-attention{animation:none}.tab-btn,.tab-btn svg{transition:none}}@keyframes tab-beat-pulse{0%{background:var(--color-accent-glow);border-radius:12px;box-shadow:0 0 14px var(--color-accent-glow)}to{background:none;box-shadow:none}}@keyframes tab-beat-pulse-accent{0%{background:#f59e0b40;border-radius:12px;box-shadow:0 0 14px #f59e0b66}to{background:none;box-shadow:none}}.tab-btn.beat-flash{animation:tab-beat-pulse .22s cubic-bezier(.1,.8,.3,1) forwards}.tab-btn.beat-flash-accent{animation:tab-beat-pulse-accent .22s cubic-bezier(.1,.8,.3,1) forwards}.app-footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 0 12px;flex:0 0 auto;opacity:.55}.app-footer-logo{height:12px;width:auto}.app-footer-text{font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--color-text-muted)}.global-volume-bar{display:flex;align-items:center;gap:10px;padding:10px 20px 2px;flex:0 0 auto}.volume-icon{width:16px;height:16px;color:var(--color-text-muted);flex:0 0 auto}#global-master-volume{flex:1;accent-color:var(--color-accent)}.volume-value{font-family:JetBrains Mono,monospace;font-size:10.5px;color:var(--color-text-muted);flex:0 0 32px;text-align:right}