:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#7c3aed;--accent-bg:#7c3aed1a;--accent-border:#7c3aed66;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:16px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#0f0f12;--border:#2e303a;--code-bg:#1a1a20;--accent:#a78bfa;--accent-bg:#a78bfa26;--accent-border:#a78bfa66;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}#root{min-height:100vh}h1,h2,h3{font-family:var(--heading);color:var(--text-h);margin:0;font-weight:600}h1{letter-spacing:-.5px;font-size:28px}@media (width<=768px){h1{font-size:24px}}h2{font-size:20px}button{font-family:inherit}.string-note-badge{border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text-h);background:linear-gradient(#fffffff2,#f4f3ecf2);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.string-note-badge__open-note{color:var(--text);opacity:.9;font-size:.68rem;line-height:1;position:absolute;top:8px;left:10px}.string-note-badge__current-note{font-family:var(--mono);letter-spacing:-.03em;font-weight:700;line-height:1}.string-note-badge__string-name{color:var(--text);text-transform:uppercase;opacity:.85;font-size:.68rem;line-height:1;position:absolute;bottom:8px;right:10px}.string-note-badge--large{min-width:84px;min-height:84px;padding:14px 16px}.string-note-badge--large .string-note-badge__current-note{font-size:2rem}.string-note-badge--compact{width:56px;min-height:56px;box-shadow:none;background:#ffffff14;border-radius:12px;padding:10px 8px}.string-note-badge--compact .string-note-badge__open-note,.string-note-badge--compact .string-note-badge__string-name{font-size:.56rem}.string-note-badge--compact .string-note-badge__open-note{top:6px;left:7px}.string-note-badge--compact .string-note-badge__string-name{bottom:6px;right:7px}.string-note-badge--compact .string-note-badge__current-note{font-size:1.2rem}.string-note-badge.is-muted{background:linear-gradient(#e0505029,#7f1d1d29);border-color:#e050508c}@media (prefers-color-scheme:dark){.string-note-badge{background:linear-gradient(#1f2028f2,#16171df2)}.string-note-badge--compact{background:#ffffff14}}.fretboard{background:linear-gradient(#1a1a1a 0%,#2d2d2d 100%);border-radius:18px;gap:.75rem;width:fit-content;margin:0 auto;padding:1rem 1.25rem 1rem 1rem;display:flex;position:relative}.string-column{flex-direction:column;flex:1;align-items:center;min-width:60px;display:flex}.string-badge-wrap{margin-bottom:.45rem}.mute-toggle{color:#888;cursor:pointer;background:#333;border:2px solid #555;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;margin-bottom:.5rem;font-size:.75rem;font-weight:700;transition:all .15s;display:flex}.mute-toggle:hover{background:#444;border-color:#777}.mute-toggle:focus-visible{outline-offset:2px;outline:2px solid #6a9ff0}.mute-toggle.muted{color:#fff;background:#c04040;border-color:#e05050}.fret-positions{flex-direction:column;gap:2px;display:flex;position:relative}.fret-positions:before{content:"";z-index:0;background:linear-gradient(#d4a84b 0%,#a67c3d 100%);border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.fret-button{cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;width:52px;height:36px;transition:all .1s;display:flex;position:relative}.fret-button:focus-visible{outline-offset:-2px;border-radius:6px;outline:2px solid #6a9ff0}.fret-button:active:not(:disabled) .fret-dot{background:linear-gradient(135deg,#5a9cf0 0%,#3a7cd0 100%);border-color:#7ab8ff;transform:scale(1.15);box-shadow:0 0 12px #5a9cf099}.fret-number{color:#666;font-size:.65rem;font-weight:500;position:absolute;left:4px}.fret-dot{background:#444;border:2px solid #555;border-radius:50%;width:24px;height:24px;transition:all .15s}.fret-button:hover:not(:disabled) .fret-dot{background:#555;border-color:#777;transform:scale(1.1)}.fret-button.selected .fret-dot{background:linear-gradient(135deg,#5a9cf0 0%,#3a7cd0 100%);border-color:#7ab8ff;transform:scale(1.15);box-shadow:0 0 12px #5a9cf099}.fret-button.open-fret{border-bottom:3px solid #555;margin-bottom:4px}.fret-button.open-fret .fret-dot{background:#3a3a3a;border-style:dashed}.fret-button.open-fret.selected .fret-dot{background:linear-gradient(135deg,#5a9cf0 0%,#3a7cd0 100%);border-style:solid}.fret-button.disabled-fret{cursor:not-allowed;opacity:.4}.fret-button.disabled-fret .fret-dot{background:#333;border-color:#444}.fret-markers{pointer-events:none;width:16px;position:absolute;top:0;bottom:0;right:-24px}.fret-marker{width:8px;height:8px;right:4px;top:calc(96px + (var(--fret-pos) * 38px) + 18px);background:#4a4a4a;border-radius:50%;position:absolute}.fret-marker.double:after{content:"";background:#4a4a4a;border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:-12px}@media (width<=540px){.fretboard{gap:.35rem;padding:.75rem}.string-column{min-width:50px}.mute-toggle{width:24px;height:24px;font-size:.65rem}.fret-button{width:44px;height:32px}.fret-dot{width:20px;height:20px}.fret-number{font-size:.6rem}.fret-markers{display:none}}@media (pointer:coarse){.fret-button{min-height:44px}.mute-toggle{min-width:44px;min-height:44px}}.app{flex-direction:column;min-height:100vh;padding:24px;display:flex}.app-header{width:100%;max-width:1200px;margin:0 auto 28px}.title-row{justify-content:center;align-items:center;gap:12px;display:flex}.info-button{border:1px solid var(--accent-border);background:var(--accent-bg);width:32px;height:32px;color:var(--accent);cursor:pointer;border-radius:999px;font-weight:700;transition:transform .12s,background .12s}.info-button:hover{background:var(--accent);color:var(--bg)}.info-button:focus-visible,.reset-btn:focus-visible,.preset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.description{max-width:760px;color:var(--text);text-align:center;margin:14px auto 0}.status-shell{border:1px solid var(--border);background:var(--code-bg);border-radius:20px;gap:18px;margin-top:22px;padding:20px;display:grid}.chord-badge{flex-direction:column;align-items:center;gap:8px;display:flex}.status-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-size:.78rem}.chord-name{min-height:48px;color:var(--accent);flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px;display:flex}.chord-name__main{font-family:var(--mono);letter-spacing:-.05em;font-size:clamp(2rem,4vw,3rem);font-weight:700}.chord-name__bass{font-family:var(--mono);opacity:.9;font-size:clamp(1.2rem,2vw,1.7rem);font-weight:600}.note-badges{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.app-main{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;width:100%;max-width:1200px;margin:0 auto;display:grid}.fretboard-panel,.controls-panel{border:1px solid var(--border);box-shadow:var(--shadow);background:#ffffff05;border-radius:22px}.fretboard-panel{padding:22px 20px}.controls-panel{padding:18px;position:sticky;top:18px}.reset-btn{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text-h);cursor:pointer;border-radius:10px;padding:10px 16px;font-size:.95rem;transition:background .2s,border-color .2s}.reset-btn:hover{background:var(--code-bg);border-color:var(--accent-border)}.preset-groups{flex-direction:column;gap:18px;margin-top:18px;display:flex}.preset-group{flex-direction:column;gap:10px;display:flex}.preset-group__header h2{letter-spacing:.04em;text-transform:uppercase;color:var(--text);font-size:.94rem}.preset-buttons{flex-wrap:wrap;gap:8px;display:flex}.preset-btn{font-family:var(--mono);border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--accent);cursor:pointer;border-radius:999px;padding:7px 11px;font-size:.86rem;transition:background .15s,color .15s,transform .1s}.preset-btn:hover{background:var(--accent);color:var(--bg)}.preset-btn:active{transform:scale(.97)}@media (width<=960px){.app-main{grid-template-columns:1fr}.controls-panel{position:static}}@media (width<=720px){.app,.status-shell{padding:16px}.note-badges{grid-template-columns:repeat(2,minmax(0,1fr))}.fretboard-panel,.controls-panel{border-radius:18px}}