:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--page-bg:#eceaf0;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow-sm:#170f270d 0 1px 2px, #170f270a 0 1px 1px;--shadow-md:#170f2714 0 8px 20px -6px, #170f270d 0 2px 6px -2px;--shadow-lg:#170f271f 0 20px 40px -12px, #170f270f 0 8px 16px -6px;--shadow:var(--shadow-lg);--cat-tuning:#2563eb;--cat-tuning-bg:#2563eb1a;--cat-tuning-border:#2563eb73;--cat-theory:#b45309;--cat-theory-bg:#b453091a;--cat-theory-border:#b4530966;--cat-create:#db2777;--cat-create-bg:#db27771a;--cat-create-border:#db277766;--cat-practice:#0d9488;--cat-practice-bg:#0d94881a;--cat-practice-border:#0d948866;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--page-bg:#0c0d11;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow-sm:#0000004d 0 1px 2px, #0003 0 1px 1px;--shadow-md:#0006 0 8px 20px -6px, #00000040 0 2px 6px -2px;--shadow-lg:#00000080 0 20px 40px -12px, #0000004d 0 8px 16px -6px;--shadow:var(--shadow-lg);--cat-tuning:#60a5fa;--cat-tuning-bg:#60a5fa26;--cat-tuning-border:#60a5fa73;--cat-theory:#fbbf24;--cat-theory-bg:#fbbf2426;--cat-theory-border:#fbbf2466;--cat-create:#f472b6;--cat-create-bg:#f472b626;--cat-create-border:#f472b666;--cat-practice:#2dd4bf;--cat-practice-bg:#2dd4bf26;--cat-practice-border:#2dd4bf66}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;background:var(--bg);box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;display:flex}body{background:var(--page-bg);margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:12px 0 24px;font-size:56px;line-height:118%}@media (width<=1024px){h1{margin:8px 0 16px;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app-header{border-bottom:1px solid var(--border);background:var(--bg);height:60px;box-shadow:var(--shadow-sm);box-sizing:border-box;z-index:10;flex-shrink:0;align-items:center;padding:0 20px;display:flex;position:sticky;top:0}.app-header-logo{align-items:center;gap:10px;display:flex}.app-header-logo-mark{background:var(--accent-bg);width:32px;height:32px;color:var(--accent);border-radius:9px;justify-content:center;align-items:center;display:flex}.app-header-logo-text{font-family:var(--heading);letter-spacing:-.2px;color:var(--text-h);font-size:17px;font-weight:600}.app-sidebar{border-right:1px solid var(--border);box-sizing:border-box;flex-direction:column;flex-shrink:0;gap:4px;width:200px;padding:20px 12px;display:flex}.app-sidebar-item{min-height:44px;color:var(--text);font-family:var(--mono);cursor:pointer;box-sizing:border-box;text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:14px;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s;display:flex}.app-sidebar-item:hover{background:var(--code-bg);transform:translate(2px)}.app-sidebar-item-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h);box-shadow:var(--shadow-sm);transform:none}.app-sidebar-item-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}@media (width<=767px){.app-sidebar{z-index:10;width:100%;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:none;border-top:1px solid var(--border);background:var(--bg);flex-direction:row;justify-content:space-around;gap:0;position:fixed;bottom:0;left:0;right:0}.app-sidebar-item{border-radius:10px;flex-direction:column;flex:1;gap:2px;padding:6px 4px;font-size:11px}}.back-button{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;align-self:flex-start;align-items:center;padding:6px 16px;font-size:13px;transition:border-color .15s,color .15s,box-shadow .15s;display:inline-flex}.back-button:hover{border-color:var(--accent-border);color:var(--text-h);box-shadow:var(--shadow-sm)}.exercise{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1400px;padding:24px;display:flex}.exercise-title{font-family:var(--heading);color:var(--text-h);margin:0;font-size:24px;font-weight:600}.exercise-description{color:var(--text);text-align:center;margin:0;font-size:14px}.exercise-start,.exercise-stop{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.exercise-stop{border:1px solid var(--border);color:var(--text);background:0 0;padding:6px 16px;font-size:13px}.exercise-hint{color:var(--text);opacity:.8;font-size:14px}.exercise-error{color:#e5484d;font-size:14px}.exercise-countdown{font-family:var(--heading);color:var(--text-h);font-size:96px;font-weight:600}.exercise-play{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.exercise-score{font-family:var(--heading);color:var(--text-h);font-size:28px;font-weight:600}.exercise-canvas{border:1px solid var(--border);background:var(--code-bg);border-radius:8px;width:100%;height:160px}.exercise-labels{font-family:var(--mono);text-align:center;color:var(--text);font-size:18px;line-height:160%}.exercise-label-active{color:var(--accent);font-weight:700}.exercise-finished{flex-direction:column;align-items:center;gap:8px;display:flex}.exercise-final-score{font-family:var(--heading);color:var(--text-h);font-size:56px;font-weight:600}.exercise-grade{color:var(--text);margin-bottom:12px;font-size:16px}.ear-trainer{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.ear-trainer-score{font-family:var(--mono);color:var(--text);opacity:.8;font-size:14px}.ear-trainer-play{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.ear-trainer-error{color:#e5484d;font-size:14px}.ear-trainer-answers{flex-wrap:wrap;justify-content:center;gap:8px;max-width:480px;display:flex}.ear-trainer-answer{min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:8px 14px;font-size:13px;display:inline-flex}.ear-trainer-answer:disabled{cursor:not-allowed}.ear-trainer-answer-correct{color:var(--text-h);background:#30a46c26;border-color:#30a46c}.ear-trainer-answer-incorrect{color:var(--text-h);background:#e5484d26;border-color:#e5484d}.ear-trainer-next{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.classroom{box-sizing:border-box;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:1400px;padding:24px;display:flex}.classroom-instruments{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.classroom-instrument{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:8px 20px;font-size:14px;display:inline-flex}.classroom-instrument-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.classroom-exercises{flex-direction:column;gap:12px;width:100%;display:flex}.classroom-exercise-card{border:1px solid var(--border);background:var(--bg);cursor:pointer;box-sizing:border-box;text-align:left;border-radius:10px;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:14px 18px;display:flex}.classroom-exercise-card:hover{border-color:var(--accent-border);background:var(--accent-bg)}.classroom-exercise-header{align-items:center;gap:10px;width:100%;display:flex}.classroom-exercise-title{font-family:var(--heading);color:var(--text-h);font-size:17px;font-weight:600}.classroom-exercise-description{color:var(--text);opacity:.8;font-size:13px}.classroom-difficulty{font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;border:1px solid;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600}.classroom-difficulty-easy{color:#0d9488;background:#0d94881a;border-color:#0d948866}.classroom-difficulty-medium{color:#b45309;background:#b453091a;border-color:#b4530966}.classroom-difficulty-hard{color:#e5484d;background:#e5484d1a;border-color:#e5484d66}.tool-panel{border:1px solid var(--cat-color-border,var(--cat-create-border));background:linear-gradient(180deg, var(--cat-color-bg,var(--cat-create-bg)), transparent 60%);width:100%;box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff0a;box-sizing:border-box;border-radius:16px;flex-direction:column;align-items:center;gap:20px;padding:20px 16px;display:flex}.tool-readout{background:var(--code-bg);box-sizing:border-box;border-radius:10px;flex-direction:column;align-items:center;gap:12px;width:100%;padding:16px;display:flex}.tuner{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.tuner-controls{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.tuner-instrument{font-family:var(--mono);color:var(--text);flex-direction:column;align-items:center;gap:6px;font-size:13px;display:flex}.tuner-instrument select,.tuner-reference-input{min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:6px;padding:8px 12px;font-size:14px}.tuner-reference-input{text-align:center;width:110px}.tuner-string-label{font-family:var(--mono);letter-spacing:.5px;color:var(--text);opacity:.7;text-transform:uppercase;font-size:13px}.tuner-start{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.tuner-start:hover{background:var(--accent-border)}.tuner-error{color:#e5484d;font-size:14px}.tuner-display{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;display:flex}.tuner-note{font-family:var(--heading);align-items:baseline;gap:4px;transition:color .15s;display:flex}.tuner-note-name{letter-spacing:-2px;font-size:88px;font-weight:600;line-height:1}.tuner-note-octave{opacity:.6;font-size:32px}.tuner-frequency{font-family:var(--mono);color:var(--text);font-size:15px}.tuner-gauge{width:100%;max-width:280px;height:auto}.tuner-gauge-track{fill:none;stroke:var(--border);stroke-width:3px;stroke-linecap:round}.tuner-gauge-sweet-spot{fill:none;stroke:#30a46c;stroke-width:5px;stroke-linecap:round;opacity:.55}.tuner-gauge-tick{stroke:var(--text);opacity:.4;stroke-width:2px}.tuner-gauge-needle{transition:transform 80ms linear,stroke .15s}.tuner-gauge-hub{transition:fill .15s}.tuner-status{font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase;min-height:20px;font-size:14px;font-weight:600}.tuner-stop{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:6px;justify-content:center;align-items:center;padding:6px 16px;font-size:13px;display:inline-flex}.tuner-listening-hint{color:var(--text);opacity:.7;font-size:13px}.knob-wrap{flex-direction:column;align-items:center;gap:6px;min-width:64px;display:flex}.knob{cursor:ns-resize;touch-action:none;border-radius:50%;width:52px;height:52px;position:relative}.knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.knob-ring{background:conic-gradient(from -135deg, var(--accent) 0deg, var(--accent) var(--fill-deg), var(--border) var(--fill-deg), var(--border) 270deg, transparent 270deg 360deg);border-radius:50%;position:absolute;inset:0}.knob-body{background:radial-gradient(circle at 35% 30%, var(--bg), var(--code-bg));border:1px solid var(--border);border-radius:50%;position:absolute;inset:7px;box-shadow:0 1px 3px #0003}.knob-indicator{transform-origin:50%;position:absolute;inset:0}.knob-indicator:after{content:"";background:var(--accent);border-radius:2px;width:3px;height:10px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.knob-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;color:var(--text);opacity:.75;text-align:center;font-size:10px}.knob-value{font-family:var(--mono);color:var(--text-h);min-height:14px;font-size:11px}.metronome{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.metronome-bpm-display{flex-direction:column;align-items:center;display:flex}.metronome-bpm-value{font-family:var(--heading);color:var(--text-h);font-size:56px;font-weight:600;line-height:1}.metronome-bpm-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.metronome-beats{align-items:center;gap:12px;display:flex}.metronome-beat{background:var(--bg);border:1px solid var(--border);box-sizing:border-box;border-radius:50%;width:20px;height:20px;transition:transform .1s,background-color .1s,border-color .1s,box-shadow .1s;transform:scale(1)}.metronome-beat-downbeat{border-width:2px;width:24px;height:24px}.metronome-beat-active{background:var(--accent);border-color:var(--accent-border);box-shadow:0 0 12px var(--accent-bg);transform:scale(1.25)}.metronome-controls{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;display:flex}.metronome-time-signature{flex-direction:column;align-items:center;gap:6px;display:flex}.metronome-time-signature-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.metronome-time-signature select{min-width:64px;min-height:44px;font-family:var(--mono);text-align:center;text-align-last:center;border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.metronome-tap,.metronome-play{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.metronome-play{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.metronome-play-active{color:#e5484d;background:0 0;border-color:#e5484d}.chord-diagram-fretboard{width:100%;max-width:220px}.chord-diagram-string{stroke:var(--text);opacity:.5;stroke-width:1.5px}.chord-diagram-fret-line{stroke:var(--border);stroke-width:1.5px}.chord-diagram-nut{stroke:var(--text-h);stroke-width:4px}.chord-diagram-dot{fill:var(--cat-theory)}.chord-diagram-marker{font-family:var(--mono);fill:var(--text);text-anchor:middle;font-size:13px}.chord-diagram-fret-label{font-family:var(--mono);fill:var(--text);text-anchor:end;dominant-baseline:middle;font-size:12px}.reference-table{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.reference-table-roots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.reference-table-root{min-width:44px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.reference-table-root-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.reference-table-list{flex-direction:column;gap:8px;width:100%;display:flex}.reference-table-row-wrap{align-items:center;gap:8px;display:flex}.reference-table-item{flex-direction:column;width:100%;display:flex}.reference-table-row{border:1px solid var(--border);background:var(--bg);box-sizing:border-box;text-align:left;border-radius:8px;flex:1;grid-template-columns:70px 140px 1fr;align-items:center;gap:12px;min-width:0;padding:10px 14px;display:grid}.reference-table-row-toggle{width:100%;font:inherit;cursor:pointer;padding-right:32px;position:relative}.reference-table-chevron{color:var(--text);opacity:.6;font-size:12px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.reference-table-diagrams{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;padding:12px 0 4px;display:flex}.reference-table-row-action{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:6px 14px;font-size:12px;display:inline-flex}.reference-table-name{font-family:var(--heading);color:var(--text-h);font-size:18px;font-weight:600}.reference-table-label{color:var(--text);opacity:.8;font-size:13px}.reference-table-values{font-family:var(--mono);color:var(--text);font-size:13px}@media (width<=480px){.reference-table-row{grid-template-columns:60px 1fr}.reference-table-values{grid-column:1/-1}.reference-table-row-wrap{flex-direction:column;align-items:stretch}}.octave-stepper{font-family:var(--mono);color:var(--text);align-items:center;gap:16px;font-size:14px;display:flex}.octave-stepper button{min-width:44px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text-h);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;font-size:18px;display:inline-flex}.octave-stepper button:disabled{opacity:.4;cursor:not-allowed}.capo-calculator{flex-direction:column;gap:20px;width:100%;display:flex}.capo-card{border:1px solid var(--border);background:var(--bg);box-sizing:border-box;text-align:left;border-radius:10px;flex-direction:column;gap:10px;padding:18px;display:flex}.capo-card h3{color:var(--text-h);margin:0;font-size:17px}.capo-hint{color:var(--text);opacity:.8;font-size:13px}.capo-inputs{flex-wrap:wrap;gap:16px;display:flex}.capo-inputs label{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.capo-inputs select,.capo-inputs input{min-width:80px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.capo-result{color:var(--text-h);font-size:15px}.capo-neck{width:100%;max-width:420px}.capo-neck-empty{font-family:var(--mono);color:var(--text);opacity:.7;font-size:12px}.capo-neck-string{stroke:var(--text);opacity:.5;stroke-width:1.5px}.capo-neck-fret-line{stroke:var(--border);stroke-width:1.5px}.capo-neck-nut{stroke:var(--text-h);stroke-width:3px}.capo-neck-bar{fill:var(--cat-theory);opacity:.85}.capo-neck-fret-label{font-family:var(--mono);fill:var(--text);opacity:.7;text-anchor:middle;font-size:10px}.waveform-picker{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.waveform-picker-option{min-width:56px;min-height:52px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;box-sizing:border-box;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:8px 12px;transition:border-color .15s,background-color .15s,color .15s;display:inline-flex}.waveform-picker-option-label{text-transform:uppercase;letter-spacing:.4px;font-size:10px}.waveform-picker-option-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.synth{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.synth-section{flex-direction:column;align-items:center;gap:8px;display:flex}.synth-section-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.synth-envelope{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}.synth-keyboard{touch-action:none;box-sizing:border-box;background:var(--code-bg);border-radius:10px;width:100%;height:140px;position:relative}.synth-key{box-sizing:border-box;cursor:pointer;padding:0;position:absolute;top:0}.synth-key-white{border:1px solid var(--border);background:var(--bg);border-radius:0 0 6px 6px;height:140px}.synth-key-mapped{border-bottom:4px solid var(--accent-border)}.synth-key-black{border:1px solid var(--border);background:var(--text-h);z-index:1;border-radius:0 0 4px 4px;height:88px}.synth-key-active.synth-key-white{background:var(--accent-bg);border-color:var(--accent-border)}.synth-key-active.synth-key-black{background:var(--accent);border-color:var(--accent-border)}.synth-hint{color:var(--text);opacity:.7;text-align:center;max-width:360px;font-size:13px}.chord-transposer{flex-direction:column;gap:20px;width:100%;display:flex}.chord-transposer-keys{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.chord-transposer-keys label{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.chord-transposer-keys select{min-width:80px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.chord-transposer-builder{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.chord-transposer-builder-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.chord-transposer-quality{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.chord-transposer-quality select{min-width:160px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.chord-transposer-builder-actions{gap:8px;display:flex}.chord-transposer-builder-actions button{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:6px 16px;font-size:13px;display:inline-flex}.chord-transposer-builder-actions button:disabled{opacity:.4;cursor:not-allowed}.chord-transposer-panes{flex-wrap:wrap;gap:16px;display:flex}.chord-transposer-pane{min-width:0;font-family:var(--mono);color:var(--text);text-align:left;flex-direction:column;flex:260px;gap:6px;font-size:12px;display:flex}.chord-transposer-pane textarea{width:100%;min-width:0;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);resize:vertical;box-sizing:border-box;white-space:pre;border-radius:8px;padding:12px;font-size:14px}.chord-transposer-output-label{justify-content:space-between;align-items:center;display:flex}.chord-transposer-output-label button{min-height:32px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:4px 12px;font-size:12px;display:inline-flex}.reference-tone{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.reference-tone-note{font-family:var(--heading);color:var(--text-h);font-size:48px;font-weight:600;line-height:1}.reference-tone-freq{font-family:var(--mono);color:var(--text);opacity:.7;font-size:13px}.reference-tone-play{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.reference-tone-play-active{color:#e5484d;background:0 0;border-color:#e5484d}.progression-generator{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.progression-generator-controls{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:16px;display:flex}.progression-generator-controls label{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.progression-generator-controls select{min-width:90px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.progression-generator-generate{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:10px 24px;font-size:14px;display:inline-flex}.progression-generator-result{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.progression-generator-chords{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.progression-generator-chord{border:1px solid var(--border);background:var(--bg);border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:8px 14px;display:flex}.progression-generator-chord-name{font-family:var(--heading);color:var(--text-h);font-size:18px;font-weight:600}.progression-generator-chord-degree{font-family:var(--mono);color:var(--text);opacity:.6;font-size:11px}.progression-generator-melody-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.progression-generator-melody-notes{font-family:var(--mono);color:var(--text-h);font-size:14px}.progression-generator-result button{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.harmonizer{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.harmonizer-controls{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.harmonizer-controls label{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.harmonizer-controls select{min-width:80px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.harmonizer-intervals{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.harmonizer-interval{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:8px 16px;font-size:13px;display:inline-flex}.harmonizer-interval-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.harmonizer-input{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.harmonizer-input-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.harmonizer-input-actions{gap:8px;display:flex}.harmonizer-input-actions button{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:6px 16px;font-size:13px;display:inline-flex}.harmonizer-input-actions button:disabled{opacity:.4;cursor:not-allowed}.harmonizer-result{flex-direction:column;gap:8px;width:100%;max-width:420px;display:flex}.harmonizer-voice{border:1px solid var(--border);background:var(--bg);box-sizing:border-box;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.harmonizer-voice-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.harmonizer-voice-notes{font-family:var(--mono);color:var(--text-h);font-size:14px}.harmonizer-play{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.harmonizer-play:disabled{opacity:.4;cursor:not-allowed}.circle-of-fifths{box-sizing:border-box;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:640px;margin:0 auto;padding:24px;display:flex}.circle-of-fifths-wheel{aspect-ratio:1;width:100%;max-width:380px}.cof-wedge{outline:none}.cof-button{fill:hsl(var(--hue) 75% 92%);stroke:hsl(var(--hue) 55% 62%);stroke-width:1.5px;cursor:pointer;transition:fill .15s,stroke .15s,filter .15s}.cof-button-minor{fill:hsl(var(--hue) 45% 94%);stroke:hsl(var(--hue) 40% 70%)}.cof-button:hover{stroke:hsl(var(--hue) 65% 45%)}.cof-wedge:focus-visible .cof-button{filter:drop-shadow(0 0 4px hsl(var(--hue) 70% 55%)) drop-shadow(0 0 1px hsl(var(--hue) 70% 55%))}.cof-button-active{fill:hsl(var(--hue) 75% 78%);stroke:hsl(var(--hue) 70% 42%);stroke-width:2.5px;filter:drop-shadow(0 0 5px hsl(var(--hue) 75% 55%)) drop-shadow(0 0 2px hsl(var(--hue) 75% 55%))}.cof-button-minor.cof-button-active{fill:hsl(var(--hue) 55% 83%);stroke:hsl(var(--hue) 55% 50%)}@media (prefers-color-scheme:dark){.cof-button{fill:hsl(var(--hue) 35% 20%);stroke:hsl(var(--hue) 45% 45%)}.cof-button-minor{fill:hsl(var(--hue) 20% 18%);stroke:hsl(var(--hue) 30% 40%)}.cof-button:hover{stroke:hsl(var(--hue) 60% 60%)}.cof-wedge:focus-visible .cof-button{filter:drop-shadow(0 0 5px hsl(var(--hue) 70% 60%)) drop-shadow(0 0 2px hsl(var(--hue) 70% 60%))}.cof-button-active{fill:hsl(var(--hue) 45% 30%);stroke:hsl(var(--hue) 70% 65%);filter:drop-shadow(0 0 6px hsl(var(--hue) 75% 60%)) drop-shadow(0 0 2px hsl(var(--hue) 75% 60%))}.cof-button-minor.cof-button-active{fill:hsl(var(--hue) 30% 26%);stroke:hsl(var(--hue) 55% 58%)}}.cof-label{font-family:var(--mono);fill:var(--text-h);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:13px}.cof-label-minor{fill:var(--text);font-size:10px}.cof-label-minor-split{font-size:8.5px}.circle-of-fifths-details{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.cof-selected-name{margin:0}.cof-selected-meta{font-family:var(--mono);color:var(--text);opacity:.8;font-size:13px}.cof-chords{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.cof-chord{border:1px solid var(--border);background:var(--bg);border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:8px 14px;display:flex}.cof-chord-name{font-family:var(--heading);color:var(--text-h);font-size:18px;font-weight:600}.cof-chord-degree{font-family:var(--mono);color:var(--text);opacity:.6;font-size:11px}.chord-detector{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:480px;margin:0 auto;padding:24px;display:flex}.chord-detector-start,.chord-detector-stop{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;display:inline-flex}.chord-detector-stop{border:1px solid var(--border);color:var(--text);background:0 0;padding:6px 16px;font-size:13px}.chord-detector-hint{color:var(--text);opacity:.8;font-size:14px}.chord-detector-error{color:#e5484d;font-size:14px}.chord-detector-name{font-family:var(--heading);color:var(--text-h);min-height:58px;margin:0;font-size:48px;font-weight:600}.chord-detector-confidence{font-family:var(--mono);color:var(--text);opacity:.7;margin:0;font-size:13px}.chord-detector-bars{justify-content:center;align-items:flex-end;gap:6px;width:100%;height:120px;display:flex}.chord-detector-bar-track{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.chord-detector-bar{background:var(--border);border-radius:3px 3px 0 0;width:100%;max-width:20px;transition:height .1s,background-color .15s}.chord-detector-bar-chordtone{background:var(--cat-tuning-border)}.chord-detector-bar-root{background:var(--cat-tuning)}.chord-detector-bar-label{font-family:var(--mono);color:var(--text);opacity:.7;font-size:10px}.fretboard{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;min-width:0;max-width:720px;margin:0 auto;padding:24px;display:flex}.fretboard-controls{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.fretboard-controls label{font-family:var(--mono);color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.fretboard-controls select{min-width:140px;min-height:44px;font-family:var(--mono);border:1px solid var(--border);background:var(--bg);color:var(--text-h);box-sizing:border-box;border-radius:8px;padding:4px 8px;font-size:14px}.fretboard-controls .fretboard-toggle{cursor:pointer;flex-direction:row;justify-content:center;align-self:flex-end;align-items:center;gap:8px;min-height:44px}.fretboard-toggle input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.fretboard-scroll{width:100%;min-width:0;overflow-x:auto}.fretboard-diagram{width:100%;min-width:480px;display:block}.fretboard-string{stroke:var(--text);opacity:.5;stroke-width:1.5px}.fretboard-fret-line{stroke:var(--border);stroke-width:1.5px}.fretboard-nut{stroke:var(--text-h);stroke-width:4px}.fretboard-marker{fill:var(--border)}.fretboard-fret-label{font-family:var(--mono);fill:var(--text);opacity:.7;text-anchor:middle;font-size:11px}.fretboard-note{fill:var(--cat-theory)}.fretboard-note-root{fill:var(--cat-theory);stroke:var(--text-h);stroke-width:1.5px}.fretboard-note-label{font-family:var(--mono);fill:var(--bg);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:8px;font-weight:600}.fretboard-caption{font-family:var(--mono);color:var(--text);opacity:.8;text-align:center;font-size:13px}.beatmaker{flex-direction:column;align-items:center;width:100%;display:flex}.beatmaker-knobs{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:32px;display:flex}.beatmaker-grid-wrap{width:100%}.beatmaker-grid{flex-direction:column;gap:4px;width:100%;max-width:840px;margin:0 auto;display:flex}.beatmaker-row{border-bottom:1px solid var(--border);box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding-bottom:14px;display:flex}.beatmaker-row:last-child{border-bottom:none;padding-bottom:0}.beatmaker-row-header{flex-wrap:wrap;align-items:center;gap:14px;width:100%;display:flex}.beatmaker-row-name{font-family:var(--mono);color:var(--text);opacity:.85;min-width:76px;font-size:12px}.beatmaker-row-toggles{gap:6px;display:flex}.beatmaker-toggle{border:1px solid var(--border);background:var(--bg);width:40px;height:40px;color:var(--text);font-family:var(--mono);box-sizing:border-box;cursor:pointer;border-radius:8px;padding:0;font-size:12px;font-weight:600}.beatmaker-toggle-mute-active{color:#e5484d;background:#e5484d26;border-color:#e5484d}.beatmaker-toggle-solo-active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}.beatmaker-row-sliders{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.beatmaker-slider-wrap{align-items:center;gap:6px;display:flex}.beatmaker-slider-label{font-family:var(--mono);color:var(--text);opacity:.6;flex:none;width:26px;font-size:10px}.beatmaker-slider{width:84px;height:32px;accent-color:var(--accent);cursor:pointer;margin:0}.beatmaker-help{max-width:560px;font-family:var(--mono);color:var(--text);opacity:.65;text-align:center;margin:0;font-size:12px;line-height:1.5}.beatmaker-banks{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.beatmaker-banks-label{font-family:var(--mono);color:var(--text);opacity:.7;font-size:12px}.beatmaker-bank{border:1px solid var(--border);background:var(--bg);width:44px;height:44px;color:var(--text);font-family:var(--mono);cursor:pointer;box-sizing:border-box;border-radius:8px;font-size:14px;font-weight:600}.beatmaker-bank-active{background:var(--cat-create);border-color:var(--cat-create-border)}.beatmaker-bank-playing{box-shadow:inset 0 0 0 2px var(--accent)}.beatmaker-song{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:560px;display:flex}.beatmaker-song-toggle{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:8px 16px;font-size:13px;display:inline-flex}.beatmaker-song-toggle-active{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.beatmaker-song-sequence{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:28px;display:flex}.beatmaker-song-empty{font-family:var(--mono);color:var(--text);opacity:.5;font-size:12px}.beatmaker-song-chip{background:var(--accent-bg);border:1px solid var(--accent-border);width:28px;height:28px;color:var(--text-h);font-family:var(--mono);border-radius:6px;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:inline-flex}.beatmaker-song-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.beatmaker-song-add,.beatmaker-song-remove{min-height:36px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:6px;justify-content:center;align-items:center;padding:6px 10px;font-size:12px;display:inline-flex}.beatmaker-song-remove:disabled{opacity:.4;cursor:not-allowed}.beatmaker-steps{flex-wrap:wrap;gap:8px 6px;transition:opacity .15s;display:flex}.beatmaker-steps-dimmed{opacity:.35}.beatmaker-step{border:1px solid var(--border);background:var(--bg);box-sizing:border-box;cursor:pointer;border-radius:8px;width:44px;height:44px;padding:0;transition:background-color .1s,border-color .1s,transform .1s}.beatmaker-step-group-start{margin-left:8px}.beatmaker-step-active{background:var(--cat-create);border-color:var(--cat-create-border)}.beatmaker-step-current{box-shadow:inset 0 0 0 2px var(--accent);transform:scale(.94)}.beatmaker-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.beatmaker-clear,.beatmaker-randomize,.beatmaker-play{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.beatmaker-play{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.beatmaker-play-active{color:#e5484d;background:0 0;border-color:#e5484d}@media (width<=480px){.beatmaker-step{width:38px;height:38px}.beatmaker-slider{width:70px}}.pianoroll{flex-direction:column;align-items:center;width:100%;display:flex}.pianoroll-knobs{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;display:flex}.pianoroll-section{flex-direction:column;align-items:center;gap:8px;display:flex}.pianoroll-section-label{font-family:var(--mono);color:var(--text);opacity:.7;font-size:12px}.pianoroll-grid-wrap{width:100%;overflow-x:auto}.pianoroll-grid{flex-direction:column;gap:2px;width:fit-content;margin:0 auto;display:flex}.pianoroll-row{align-items:center;gap:8px;display:flex}.pianoroll-row-black .pianoroll-steps{background:var(--code-bg);border-radius:6px}.pianoroll-row-label{font-family:var(--mono);color:var(--text);opacity:.7;text-align:right;box-sizing:border-box;flex:0 0 40px;font-size:11px}.pianoroll-steps{box-sizing:border-box;gap:3px;padding:2px;display:flex}.pianoroll-step{border:1px solid var(--border);background:var(--bg);box-sizing:border-box;cursor:pointer;border-radius:4px;width:32px;height:20px;padding:0;transition:background-color .1s,border-color .1s,transform .1s}.pianoroll-step-group-start{margin-left:6px}.pianoroll-step-active{background:var(--cat-create);border-color:var(--cat-create-border)}.pianoroll-step-current{box-shadow:inset 0 0 0 2px var(--accent);transform:scale(.92)}.pianoroll-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.pianoroll-clear,.pianoroll-randomize,.pianoroll-play{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.pianoroll-play{border-color:var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.pianoroll-play-active{color:#e5484d;background:0 0;border-color:#e5484d}.loop-practice{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.loop-practice-canvas-wrap{border:1px solid var(--border);background:var(--code-bg);touch-action:none;cursor:crosshair;border-radius:8px;width:100%;height:140px;position:relative}.loop-practice-canvas{width:100%;height:100%;position:absolute;inset:0}.loop-practice-canvas-overlay{pointer-events:none}.loop-practice-hint,.loop-practice-region-label{font-family:var(--mono);color:var(--text);opacity:.7;text-align:center;font-size:13px}.loop-practice-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.loop-practice-play,.loop-practice-toggle,.loop-practice-clear{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.loop-practice-play{border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.loop-practice-toggle-active{border-color:var(--accent-border);color:var(--accent)}.analyzer{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:1400px;margin:0 auto;padding:24px;display:flex}.analyzer-controls{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.analyzer-dropzone{border:2px dashed var(--border);background:var(--code-bg);box-sizing:border-box;border-radius:16px;flex-direction:column;align-items:center;gap:16px;width:100%;padding:40px 24px;transition:border-color .15s,background-color .15s;display:flex}.analyzer-dropzone-active{border-color:var(--accent-border);background:var(--accent-bg)}.analyzer-dropzone-icon{background:var(--accent-bg);width:56px;height:56px;color:var(--accent);border-radius:14px;justify-content:center;align-items:center;display:flex}.analyzer-dropzone-hint{color:var(--text);opacity:.8;font-size:14px}.analyzer-upload,.analyzer-record{min-height:44px;font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.analyzer-upload input{display:none}.analyzer-record{border:1px solid var(--border);background:0 0}.analyzer-record:disabled{opacity:.5;cursor:not-allowed}.analyzer-reset{min-height:44px;font-family:var(--mono);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;display:inline-flex}.analyzer-record-active{color:#e5484d;border-color:#e5484d}.analyzer-hint{color:var(--text);opacity:.8;font-size:14px}.analyzer-error{color:#e5484d;font-size:14px}.analyzer-results{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.analyzer-waveform{border:1px solid var(--border);background:var(--code-bg);border-radius:8px;width:100%;height:140px}.analyzer-stats{gap:32px;display:flex}.analyzer-stat{flex-direction:column;align-items:center;gap:4px;display:flex}.analyzer-stat-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.analyzer-stat-value{font-family:var(--heading);color:var(--text-h);font-size:32px;font-weight:600}.analyzer-chords{flex-direction:column;align-items:center;gap:10px;display:flex}.analyzer-chords-list{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.analyzer-chord{border:1px solid var(--border);background:var(--bg);border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:8px 14px;display:flex}.analyzer-chord-name{font-family:var(--heading);color:var(--text-h);font-size:18px;font-weight:600}.analyzer-chord-degree{font-family:var(--mono);color:var(--text);opacity:.6;font-size:11px}.toolbox{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:28px;width:100%;max-width:1400px;padding:14px;display:flex}.toolbox-cat-tuning{--cat-color:var(--cat-tuning);--cat-color-bg:var(--cat-tuning-bg);--cat-color-border:var(--cat-tuning-border)}.toolbox-cat-theory{--cat-color:var(--cat-theory);--cat-color-bg:var(--cat-theory-bg);--cat-color-border:var(--cat-theory-border)}.toolbox-cat-create{--cat-color:var(--cat-create);--cat-color-bg:var(--cat-create-bg);--cat-color-border:var(--cat-create-border)}.toolbox-cat-practice{--cat-color:var(--cat-practice);--cat-color-bg:var(--cat-practice-bg);--cat-color-border:var(--cat-practice-border)}.toolbox-header{text-align:left}.toolbox-header h1{margin-bottom:0}.toolbox-header-accent{background:var(--accent);border-radius:2px;width:48px;height:4px;margin:10px 0 14px;display:block}.toolbox-header p{text-align:left}.toolbox-category{flex-direction:column;gap:14px;display:flex}.toolbox-category-label{font-family:var(--mono);color:var(--cat-color);text-align:left;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;display:flex}.toolbox-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.toolbox-card{border:1px solid var(--border);background:var(--code-bg);cursor:pointer;box-sizing:border-box;box-shadow:var(--shadow-sm);text-align:left;border-radius:14px;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;transition:border-color .15s,background-color .15s,box-shadow .15s,transform .15s;display:flex}.toolbox-card:hover,.toolbox-card:focus-visible{border-color:var(--cat-color-border);background:var(--cat-color-bg);box-shadow:var(--shadow-md);transform:translateY(-2px)}.toolbox-card-icon{background:var(--cat-color-bg);width:40px;height:40px;color:var(--cat-color);box-shadow:var(--shadow-sm);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.toolbox-card-title{font-family:var(--mono);color:var(--text-h);font-size:14px;font-weight:600;line-height:1.3}.toolbox-card-description{color:var(--text);opacity:.8;font-size:13px;line-height:1.4}.toolbox-active-header{border:1px solid var(--cat-color-border);background:var(--cat-color-bg);width:100%;box-shadow:var(--shadow-sm);box-sizing:border-box;text-align:left;border-radius:14px;align-items:center;gap:14px;padding:14px 16px;display:flex}.toolbox-active-icon{background:var(--bg);width:44px;height:44px;color:var(--cat-color);box-shadow:var(--shadow-sm);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.toolbox-active-title{margin:0;font-size:18px}.toolbox-active-description{color:var(--text);opacity:.85;margin:2px 0 0;font-size:13px}@media (width<=480px){.toolbox{gap:24px;padding:16px}.toolbox-grid{grid-template-columns:1fr;gap:8px}.toolbox-card{padding:12px}}.app-footer{border-top:1px solid var(--border);font-family:var(--mono);color:var(--text);opacity:.8;box-sizing:border-box;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:6px;padding:16px 20px;font-size:13px;display:flex}.app-footer svg{color:var(--accent)}.app-footer-link{color:var(--text-h);text-decoration:none}.app-footer-link:hover{color:var(--accent);text-decoration:underline}@media (width<=767px){.app-footer{padding-bottom:calc(16px + 76px + env(safe-area-inset-bottom))}}.app-shell{flex-direction:column;flex-grow:1;min-height:0;display:flex}.app-body{flex-direction:row;flex-grow:1;align-items:stretch;display:flex}.app-content{text-align:center;box-sizing:border-box;flex-direction:column;flex-grow:1;align-items:center;gap:12px;min-width:0;padding:20px 12px 32px;display:flex}@media (width<=767px){.app-content{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}