@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/music-lab/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/music-lab/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/music-lab/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--text:#5c564a;--text-h:#1b1915;--bg:#f4f0e7;--surface:#fbf8f2;--page-bg:#ebe6d9;--border:#d9d3c3;--rule:#1b1915;--code-bg:#ece7da;--accent:#c8341a;--accent-strong:#a42810;--accent-bg:#c8341a17;--accent-border:#c8341a73;--on-accent:#fff8f0;--shadow-sm:#1b19150f 0 1px 2px;--shadow-md:#1b19151a 0 6px 16px -6px;--shadow-lg:#1b191529 0 16px 32px -12px;--shadow:var(--shadow-lg);--cat-tuning:#2b6b86;--cat-tuning-bg:#2b6b861a;--cat-tuning-border:#2b6b8666;--cat-theory:#8a5a0b;--cat-theory-bg:#8a5a0b1a;--cat-theory-border:#8a5a0b66;--cat-create:#a3405a;--cat-create-bg:#a3405a1a;--cat-create-border:#a3405a66;--cat-practice:#2c7556;--cat-practice-bg:#2c75561a;--cat-practice-border:#2c755666;--sans:"Archivo Variable", system-ui, "Segoe UI", Roboto, sans-serif;--heading:var(--sans);--ui:var(--sans);--mono:ui-monospace, "SF Mono", Consolas, monospace;font:17px/1.5 var(--sans);--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:#aaa496;--text-h:#f1ede3;--bg:#151412;--surface:#1d1b18;--page-bg:#0e0d0b;--border:#2e2b26;--rule:#f1ede3;--code-bg:#100f0d;--accent:#ff6a45;--accent-strong:#ff8a68;--accent-bg:#ff6a451f;--accent-border:#ff6a4580;--on-accent:#1b0d08;--shadow-sm:#0000004d 0 1px 2px;--shadow-md:#0006 0 6px 16px -6px;--shadow-lg:#00000080 0 16px 32px -12px;--cat-tuning:#6fb3cf;--cat-tuning-bg:#6fb3cf21;--cat-tuning-border:#6fb3cf66;--cat-theory:#e0a53c;--cat-theory-bg:#e0a53c21;--cat-theory-border:#e0a53c66;--cat-create:#e07a93;--cat-create-bg:#e07a9321;--cat-create-border:#e07a9366;--cat-practice:#5fc298;--cat-practice-bg:#5fc29821;--cat-practice-border:#5fc29866}}#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:700}h1{letter-spacing:-.005em;text-transform:uppercase;margin:0;font-size:clamp(44px,7.5vw,88px);font-weight:800;font-stretch:72%;line-height:.92}h2{letter-spacing:-.01em;margin:0 0 8px;font-size:24px;line-height:1.15}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code{font-family:var(--mono);color:var(--text-h);background:var(--code-bg);border-radius:4px;padding:4px 8px;font-size:15px;line-height:1.35;display:inline-flex}.cat-tuning{--cat-color:var(--cat-tuning);--cat-color-bg:var(--cat-tuning-bg);--cat-color-border:var(--cat-tuning-border)}.cat-theory{--cat-color:var(--cat-theory);--cat-color-bg:var(--cat-theory-bg);--cat-color-border:var(--cat-theory-border)}.cat-create{--cat-color:var(--cat-create);--cat-color-bg:var(--cat-create-bg);--cat-color-border:var(--cat-create-border)}.cat-practice{--cat-color:var(--cat-practice);--cat-color-bg:var(--cat-practice-bg);--cat-color-border:var(--cat-practice-border)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app-header{border-bottom:1px solid var(--border);background:var(--bg);box-sizing:border-box;z-index:10;flex-shrink:0;justify-content:space-between;align-items:stretch;gap:16px;height:64px;padding:0 max(20px,50% - 600px);display:flex;position:sticky;top:0}.app-header-logo{color:var(--accent);align-items:center;gap:8px;display:flex}.app-header-logo-text{letter-spacing:-.02em;color:var(--text-h);font-size:19px;font-weight:800;font-stretch:112%}.app-header-nav{align-items:stretch;gap:4px;display:flex}.app-header-tab{min-width:44px;min-height:44px;color:var(--text);font-family:var(--ui);cursor:pointer;background:0 0;border:none;padding:0 12px;font-size:15px;font-weight:600;transition:color .15s;position:relative}.app-header-tab:hover,.app-header-tab-active{color:var(--text-h)}.app-header-tab-active:after{content:"";background:var(--accent);height:3px;position:absolute;bottom:-1px;left:12px;right:12px}@media (width<=480px){.app-header{gap:8px;padding:0 8px 0 16px}.app-header-logo-text{font-size:17px}.app-header-tab{padding:0 8px;font-size:14px}.app-header-tab-active:after{left:8px;right:8px}}.back-button{min-height:44px;color:var(--text);font-family:var(--ui);cursor:pointer;background:0 0;border:none;align-self:flex-start;align-items:center;gap:8px;padding:0;font-size:15px;font-weight:600;transition:color .15s;display:inline-flex}.back-button svg{transition:transform .15s}.back-button:hover{color:var(--accent)}.back-button:hover svg{transform:translate(-3px)}.exercise{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1400px;padding:24px;display:flex}.exercise-title{text-transform:uppercase;color:var(--text-h);margin:0;font-size:clamp(32px,6vw,48px);font-weight:800;font-stretch:72%;line-height:.95}.exercise-description{color:var(--text);text-align:center;margin:0;font-size:14px}.exercise-start,.exercise-stop{min-height:44px;font-family:var(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;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(--ui);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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;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(--ui);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(--ui);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}.index-hero{text-align:left;flex-direction:column;align-items:flex-start;gap:20px;padding:56px 0 8px;display:flex}.index-hero h1{max-width:11em}.index-hero-lead{max-width:34em;color:var(--text-h);font-size:20px;line-height:1.4}.index-hero-facts{color:var(--text);flex-wrap:wrap;gap:6px 0;margin:0;padding:0;font-size:14px;font-weight:600;list-style:none;display:flex}.index-hero-facts li+li:before{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;margin:0 12px 3px;display:inline-block}.index-list{margin:0;padding:0;list-style:none}.index-list li{border-bottom:1px solid var(--border)}.index-list li:first-child .index-row{margin-top:-4px}.index-row{width:100%;min-height:64px;color:inherit;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box;background:0 0;border:none;align-items:center;gap:20px;padding:18px 8px;transition:background-color .15s,padding .15s;display:flex}.index-row:hover,.index-row:focus-visible{background:var(--cat-color-bg);padding-left:16px;padding-right:0}.index-row:focus-visible{outline-offset:-2px}.index-row-lead{font-variant-numeric:tabular-nums;color:var(--cat-color);flex:0 0 28px;font-size:15px;font-weight:700;display:flex}.index-row-title{letter-spacing:-.01em;color:var(--text-h);flex:0 260px;font-size:19px;font-weight:700;line-height:1.2}.index-row-description{color:var(--text);flex:1;font-size:15px;line-height:1.4}.index-row-meta{flex-shrink:0}.index-row-arrow{color:var(--text-h);opacity:0;flex:0 0 24px;transition:opacity .15s,transform .15s;display:flex;transform:translate(-6px)}.index-row:hover .index-row-arrow,.index-row:focus-visible .index-row-arrow{opacity:1;transform:none}@media (width<=640px){.index-hero{padding-top:32px}.index-hero-lead{font-size:18px}.index-row{grid-template-columns:28px 1fr 24px;grid-template-areas:"lead title arrow""lead desc arrow""lead meta arrow";gap:2px 14px;padding:14px 4px;display:grid}.index-row-lead{grid-area:lead;align-self:start;padding-top:2px}.index-row-title{grid-area:title}.index-row-description{grid-area:desc;font-size:14px}.index-row-meta{grid-area:meta;justify-self:start;margin-top:6px}.index-row-arrow{opacity:.4;grid-area:arrow;transform:none}.index-row:hover,.index-row:focus-visible{padding-left:4px}}.classroom{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:24px;width:100%;max-width:1200px;display:flex}.classroom-instruments{flex-wrap:wrap;gap:8px;display:flex}.classroom-instrument{min-height:44px;font-family:var(--ui);border:1px solid var(--border);color:var(--text);cursor:pointer;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:8px 18px;font-size:15px;font-weight:600;transition:border-color .15s,color .15s;display:inline-flex}.classroom-instrument:hover{border-color:var(--text-h);color:var(--text-h)}.classroom-instrument-active{border-color:var(--text-h);background:var(--text-h);color:var(--bg)}.classroom-instrument-active:hover{color:var(--bg)}.classroom-difficulty{font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;border:1px solid;border-radius:3px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-block}.classroom-difficulty-easy{color:var(--cat-practice);border-color:var(--cat-practice-border);background:var(--cat-practice-bg)}.classroom-difficulty-medium{color:var(--cat-theory);border-color:var(--cat-theory-border);background:var(--cat-theory-bg)}.classroom-difficulty-hard{color:var(--cat-create);border-color:var(--cat-create-border);background:var(--cat-create-bg)}.tool-panel{border:1px solid var(--border);border-top:4px solid var(--cat-color);background:var(--surface);box-sizing:border-box;border-radius:4px;flex-direction:column;align-items:center;gap:20px;width:100%;padding:24px 16px;display:flex}.tool-readout{background:var(--code-bg);box-sizing:border-box;border-radius:3px;flex-direction:column;align-items:center;gap:12px;width:100%;padding:20px 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(--ui);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(--ui);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(--ui);letter-spacing:.5px;color:var(--text);opacity:.7;text-transform:uppercase;font-size:13px}.tuner-start{min-height:44px;font-family:var(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;display:inline-flex}.tuner-start:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.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{font-size:120px;font-weight:800;font-stretch:72%;line-height:.95}.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(--ui);letter-spacing:.5px;text-transform:uppercase;min-height:20px;font-size:14px;font-weight:600}.tuner-stop{min-height:44px;font-family:var(--ui);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(--ui);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);font-variant-numeric:tabular-nums;color:var(--text-h);font-size:96px;font-weight:800;font-stretch:72%;line-height:.95}.metronome-bpm-label{font-family:var(--ui);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(--ui);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(--ui);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(--ui);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);background:var(--accent);color:var(--on-accent);font-weight:700}.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(--ui);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(--bg);background:var(--text-h);color:var(--bg)}.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(--ui);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(--ui);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(--ui);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(--ui);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}.timbre-picker{flex-direction:column;align-items:center;gap:8px;display:flex}.waveform-picker{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.waveform-picker-option{min-width:56px;min-height:52px;font-family:var(--ui);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(--bg);background:var(--text-h);color:var(--bg)}.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(--ui);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(--ui);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(--ui);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(--ui);text-transform:uppercase;letter-spacing:.5px;color:var(--text);opacity:.7;font-size:12px}.chord-transposer-quality{font-family:var(--ui);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(--ui);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(--ui);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(--ui);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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;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(--ui);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(--ui);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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:10px 24px;font-size:14px;font-weight:700;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(--ui);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(--ui);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(--ui);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(--ui);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(--bg);background:var(--text-h);color:var(--bg)}.harmonizer-input{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.harmonizer-input-label{font-family:var(--ui);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(--ui);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(--ui);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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;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(--ui);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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:12px 28px;font-size:16px;font-weight:700;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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--ui);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(--bg);background:var(--text-h);color:var(--bg)}.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(--ui);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(--ui);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(--ui);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(--ui);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);background:var(--accent);color:var(--on-accent);font-weight:700}.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(--ui);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(--ui);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);background:var(--accent);color:var(--on-accent);font-weight:700}.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(--ui);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(--ui);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);background:var(--accent);color:var(--on-accent);font-weight:700}.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%;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(--ui);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-size:14px;font-weight:700;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(--ui);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(--ui);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:40px;width:100%;max-width:1200px;display:flex}.toolbox-category{border-top:2px solid var(--rule);grid-template-columns:240px 1fr;align-items:start;gap:0 32px;padding-top:16px;display:grid}.toolbox-category-head{text-align:left;flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:sticky;top:84px}.toolbox-category-index{font-variant-numeric:tabular-nums;color:var(--cat-color);font-size:15px;font-weight:700}.toolbox-category-label{text-transform:uppercase;margin:0;font-size:26px;font-weight:800;font-stretch:80%;line-height:1.05}.toolbox-active-header{border-bottom:2px solid var(--rule);text-align:left;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:20px;display:flex}.toolbox-active-eyebrow{letter-spacing:.04em;text-transform:uppercase;color:var(--cat-color);align-items:center;gap:8px;font-size:14px;font-weight:700;display:inline-flex}.toolbox-active-eyebrow svg{width:20px;height:20px}.toolbox-active-title{font-size:clamp(40px,6vw,68px)}.toolbox-active-description{color:var(--text);font-size:17px}@media (width<=860px){.toolbox-category{grid-template-columns:1fr;gap:12px}.toolbox-category-head{flex-direction:row;align-items:baseline;gap:12px;position:static}}@media (width<=640px){.toolbox{gap:32px}}.app-footer{border-top:1px solid var(--border);color:var(--text);box-sizing:border-box;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:4px 16px;padding:20px max(20px,50% - 600px);font-size:14px;display:flex}.app-footer-link{color:var(--text-h);text-decoration:underline;-webkit-text-decoration-color:var(--border);text-decoration-color:var(--border);text-underline-offset:3px;margin:-14px 0;padding:14px 0;font-weight:600;transition:text-decoration-color .15s;display:inline-block}.app-footer-link:hover{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.app-shell{flex-direction:column;flex-grow:1;min-height:0;display:flex}.app-content{text-align:center;box-sizing:border-box;flex-direction:column;flex-grow:1;align-items:center;min-width:0;padding:8px 20px 56px;display:flex}@media (width<=480px){.app-content{padding:4px 16px 40px}}