.guitar-app{--gtr-ink:#2b1e15;--gtr-ink-soft:#4a3629;--gtr-muted:#8a7465;--gtr-panel:#fffcf8b8;--gtr-panel-strong:#fffcf8eb;--gtr-border:#4b34221f;--gtr-surface:#4b34220d;--gtr-accent:#c2703d;--gtr-accent-strong:#9c5427;--gtr-accent-soft:#c2703d29;--gtr-string:#4b342280;--gtr-fret:#4b34223d;--gtr-fret-dot:#4b342224;--gtr-note-dim:#4b34224d;--gtr-frost:#fffcf8b8;color:var(--gtr-ink);font-family:var(--font-geist-sans), "PingFang SC", "Noto Sans SC", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:radial-gradient(1100px 560px at 12% -10%,#c2703d24,#0000 55%),radial-gradient(900px 500px at 95% 0,#d9a55a1a,#0000 50%),linear-gradient(170deg,#fdf9f4 0%,#f7efe6 48%,#faf3ea 100%)}.dark .guitar-app{--gtr-ink:#f0e7dd;--gtr-ink-soft:#d6c7b8;--gtr-muted:#a08a77;--gtr-panel:#1e1610b8;--gtr-panel-strong:#1e1610eb;--gtr-border:#f0e7dd24;--gtr-surface:#00000047;--gtr-accent:#d9904f;--gtr-accent-strong:#ecb176;--gtr-accent-soft:#d9904f2e;--gtr-string:#f0e7dd8c;--gtr-fret:#f0e7dd47;--gtr-fret-dot:#f0e7dd29;--gtr-note-dim:#f0e7dd52;--gtr-frost:#1e1610b8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:radial-gradient(1100px 560px at 12% -10%,#d9904f24,#0000 55%),radial-gradient(900px 500px at 95% 0,#d9a55a0f,#0000 50%),linear-gradient(170deg,#17110c 0%,#201812 48%,#1a130d 100%)}.guitar-app h1,.guitar-app h2{letter-spacing:.01em}.guitar-app-header{border-bottom:1px solid var(--gtr-border);background:color-mix(in srgb, var(--gtr-panel-strong) 72%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;gap:12px;max-width:1152px;margin:0 auto;padding:10px 20px;display:flex}.guitar-app-back{border:1px solid var(--gtr-border);background:var(--gtr-panel);width:32px;height:32px;color:var(--gtr-muted);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;line-height:1;text-decoration:none;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.guitar-app-back:hover{color:var(--gtr-ink);border-color:var(--gtr-accent);background:var(--gtr-accent-soft)}.guitar-brand-name{color:var(--gtr-ink);letter-spacing:.01em;font-size:15px;font-weight:700}.guitar-app-header .guitar-current-badge{margin-left:auto}@media (max-width:640px){.guitar-app-header{gap:8px;padding:8px 12px}.guitar-brand-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:13px;overflow:hidden}.guitar-current-badge{padding:3px 8px}}.guitar-current-badge{border:1px solid var(--gtr-border);background:var(--gtr-panel-strong);border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;display:inline-flex;box-shadow:0 1px 3px #4b342214}.guitar-current-badge-label{color:var(--gtr-muted);font-size:11px}.guitar-current-badge-name{color:var(--gtr-accent-strong);font-size:15px;font-weight:700}.dark .guitar-current-badge-name{color:var(--gtr-accent)}.guitar-panel{border:1px solid var(--gtr-border);background:var(--gtr-panel);border-radius:16px;padding:16px;box-shadow:0 1px 2px #0f172a0a}.dark .guitar-panel{box-shadow:0 1px 2px #0006}.guitar-panel-fretboard{border-color:color-mix(in srgb, var(--gtr-accent) 30%, var(--gtr-border));padding:14px;box-shadow:0 10px 30px -18px #00000040}.dark .guitar-panel-fretboard{box-shadow:0 10px 30px -18px #0009}.guitar-panel-fretboard .guitar-fretboard-scroll{background:linear-gradient(180deg, color-mix(in srgb, var(--gtr-panel-strong) 82%, transparent), color-mix(in srgb, var(--gtr-panel-strong) 62%, transparent));border:1px solid var(--gtr-border);padding:4px 0}.dark .guitar-panel-fretboard .guitar-fretboard-scroll{background:linear-gradient(180deg, color-mix(in srgb, var(--gtr-panel-strong) 60%, transparent), color-mix(in srgb, var(--gtr-panel-strong) 40%, transparent))}.guitar-panel-controls{padding:12px 14px}.guitar-label{color:var(--gtr-muted);font-size:13px;font-weight:500}.guitar-select{border:1px solid var(--gtr-border);background:var(--gtr-panel);color:var(--gtr-ink);border-radius:8px;padding:6px 10px;font-size:15px}.guitar-input{border:1px solid var(--gtr-border);background:var(--gtr-panel);color:var(--gtr-ink);width:min(220px,100%);font-size:15px;font-family:var(--font-geist-mono), monospace;border-radius:8px;padding:8px 10px}.guitar-input:focus{border-color:var(--gtr-accent);outline:none}.guitar-input::placeholder{color:var(--gtr-muted)}.guitar-fingering-result strong{color:var(--gtr-accent-strong)}.dark .guitar-fingering-result strong{color:var(--gtr-accent)}.guitar-fingering-code{border:1px solid var(--gtr-border);background:var(--gtr-surface);font-family:var(--font-geist-mono), monospace;color:var(--gtr-ink);border-radius:6px;margin-left:8px;padding:1px 8px;font-size:13px}.guitar-swatch-root{background:var(--gtr-accent);border-radius:9999px;display:inline-block}.guitar-btn{border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500}.guitar-btn-ghost{border:1px solid var(--gtr-border);color:var(--gtr-muted);background:var(--gtr-surface)}.guitar-btn-ghost:hover{color:var(--gtr-ink);border-color:var(--gtr-accent)}.guitar-btn-primary{border:1px solid var(--gtr-accent);color:#fff;background:var(--gtr-accent)}.guitar-btn-primary:hover{background:var(--gtr-accent-strong);border-color:var(--gtr-accent-strong)}.guitar-btn-primary:active{transform:translateY(1px)}.guitar-fretboard-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;border-radius:12px;max-width:100%;overflow-x:auto}.guitar-fretboard-scroll::-webkit-scrollbar{display:none}.guitar-fretboard-wrap{position:relative}.guitar-minimap{cursor:grab;touch-action:none;background:var(--gtr-surface);border-radius:6px;height:18px;margin-bottom:6px;position:relative;overflow:hidden}.guitar-minimap:active{cursor:grabbing}.guitar-minimap-svg{display:block}.guitar-minimap-nut{stroke:var(--gtr-ink)}.guitar-minimap-fret{stroke:var(--gtr-fret)}.guitar-minimap-dot{fill:var(--gtr-fret-dot)}.guitar-minimap-root{fill:var(--gtr-accent-strong);stroke:var(--gtr-panel);stroke-width:1px}.dark .guitar-minimap-root{fill:var(--gtr-accent)}.guitar-minimap-viewport{border:1px solid var(--gtr-accent);background:color-mix(in srgb, var(--gtr-accent) 22%, transparent);pointer-events:none;border-radius:4px;position:absolute;top:0;bottom:0}.guitar-fretboard-scroll .guitar-fretboard{scroll-snap-align:start;touch-action:pan-x pan-y;display:block}.guitar-fretboard{border-radius:12px}.guitar-string-label{fill:var(--gtr-muted);font-size:11px;font-weight:600}.guitar-string-line{stroke:var(--gtr-string)}.guitar-fret-line{stroke:var(--gtr-fret)}.guitar-fret-nut{stroke:var(--gtr-ink)}.guitar-fret-open{fill:var(--gtr-panel);stroke:var(--gtr-muted);stroke-width:1.5px;pointer-events:none}.guitar-fret-open-fingered{stroke:var(--gtr-accent);stroke-width:2px}.guitar-fretnum-label{fill:var(--gtr-muted);pointer-events:none;font-size:12px;font-weight:600}.guitar-fret-dot{fill:var(--gtr-fret-dot)}.guitar-fret-hit{cursor:pointer}.guitar-fret-note{pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:600}.guitar-fret-dim{fill:var(--gtr-note-dim)}.guitar-fret-root{fill:var(--gtr-accent-strong)}.dark .guitar-fret-root{fill:var(--gtr-accent)}.guitar-fret-fingered{fill:color-mix(in srgb, var(--gtr-accent) 30%, transparent);stroke:var(--gtr-accent);stroke-width:2px;pointer-events:none}.guitar-fret-note:not(.guitar-fret-dim):not(.guitar-fret-root){fill:var(--gtr-ink)}.guitar-tabs{border:1px solid var(--gtr-border);background:var(--gtr-surface);border-radius:10px;gap:3px;padding:3px;display:inline-flex}.guitar-autoplay{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:inline-flex}.guitar-autoplay input{opacity:0;width:0;height:0;position:absolute}.guitar-autoplay-track{background:var(--gtr-surface);border:1px solid var(--gtr-border);border-radius:9999px;flex-shrink:0;width:40px;height:22px;transition:background .2s,border-color .2s;position:relative}.guitar-autoplay-track:after{content:"";background:var(--gtr-muted);border-radius:9999px;width:16px;height:16px;transition:transform .2s,background .2s;position:absolute;top:2px;left:2px}.guitar-autoplay input:checked+.guitar-autoplay-track{background:var(--gtr-accent);border-color:var(--gtr-accent)}.guitar-autoplay input:checked+.guitar-autoplay-track:after{background:#fff;transform:translate(18px)}.guitar-autoplay-label{color:var(--gtr-muted);font-size:13px;font-weight:500}.guitar-autoplay:hover .guitar-autoplay-label{color:var(--gtr-ink)}.guitar-tab{color:var(--gtr-muted);border-radius:7px;padding:5px 14px;font-size:13px;font-weight:500}.guitar-tab:hover{color:var(--gtr-ink)}.guitar-tab-active{background:var(--gtr-accent-soft);color:var(--gtr-accent-strong);box-shadow:0 0 0 1px color-mix(in srgb, var(--gtr-accent) 25%, transparent)}.dark .guitar-tab-active{color:var(--gtr-accent)}.guitar-panel-head{flex-wrap:wrap}.guitar-panel-title{color:var(--gtr-ink);font-size:15px;font-weight:600}.guitar-panel-hint{color:var(--gtr-muted);font-size:12px}.guitar-quality-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.guitar-scale-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.guitar-chip{border:1px solid var(--gtr-border);text-align:center;color:var(--gtr-ink);background:var(--gtr-panel);white-space:nowrap;border-radius:8px;padding:8px 10px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}.guitar-chip:hover{border-color:var(--gtr-accent)}.guitar-chip:active{transform:translateY(1px)}.guitar-chip-active{border-color:var(--gtr-accent);background:color-mix(in srgb, var(--gtr-accent) 18%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--gtr-accent) 25%, transparent)}.guitar-shape{border:1px solid var(--gtr-border);background:var(--gtr-panel-strong);border-radius:12px;padding:14px;box-shadow:inset 0 1px #fff6}.dark .guitar-shape{box-shadow:inset 0 1px #ffffff0a}.guitar-shape-head{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.guitar-shape-name{color:var(--gtr-ink);font-size:20px;font-weight:700}.guitar-badge{border-radius:6px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}.guitar-badge-open{border:1px solid color-mix(in srgb, var(--gtr-accent) 50%, transparent);background:color-mix(in srgb, var(--gtr-accent) 14%, transparent);color:var(--gtr-accent-strong)}.dark .guitar-badge-open{color:var(--gtr-accent)}.guitar-badge-closed{border:1px solid color-mix(in srgb, var(--gtr-ink) 40%, transparent);background:var(--gtr-surface);color:var(--gtr-muted)}.guitar-shape-desc{color:var(--gtr-muted);font-size:12px}.guitar-shape-grid{flex-wrap:wrap;gap:10px;display:flex}.guitar-note{border:1px solid var(--gtr-border);background:var(--gtr-panel);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;min-width:56px;padding:8px 10px;transition:border-color .15s,transform .1s;display:flex}.guitar-note:hover{border-color:var(--gtr-accent)}.guitar-note:active{transform:translateY(1px)}.guitar-note-root{border-color:var(--gtr-accent);background:color-mix(in srgb, var(--gtr-accent) 18%, transparent)}.guitar-note-degree{color:var(--gtr-ink);font-size:15px;font-weight:700}.guitar-note-fret{color:var(--gtr-muted);margin-top:2px;font-size:11px}.guitar-empty{border:1px dashed var(--gtr-border);border-radius:12px;padding:14px}.guitar-cd-layout{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.guitar-chord-diagram{flex-shrink:0;width:200px;max-width:100%;height:auto}.guitar-cd-string-label{fill:var(--gtr-muted);font-size:10px;font-weight:600}.guitar-cd-marker{font-size:12px;font-weight:700}.guitar-cd-open{fill:var(--gtr-accent-strong)}.dark .guitar-cd-open{fill:var(--gtr-accent)}.guitar-cd-muted{fill:var(--gtr-muted)}.guitar-cd-nut{fill:var(--gtr-ink)}.guitar-cd-line{stroke:var(--gtr-fret);stroke-width:1px}.guitar-cd-fretnum{fill:var(--gtr-muted);font-size:10px;font-weight:600}.guitar-cd-barre{fill:color-mix(in srgb, var(--gtr-accent) 55%, transparent);stroke:var(--gtr-accent);stroke-width:1px}.guitar-cd-note{cursor:pointer}.guitar-cd-note circle{fill:var(--gtr-ink);stroke:var(--gtr-border)}.guitar-cd-note-root circle{fill:var(--gtr-accent-strong);stroke:var(--gtr-accent-strong)}.dark .guitar-cd-note-root circle{fill:var(--gtr-accent);stroke:var(--gtr-accent)}.guitar-cd-note-label{fill:#fff;pointer-events:none;font-size:11px;font-weight:700}@media (max-width:640px){.guitar-cd-layout{flex-flow:row;align-items:flex-start;gap:10px}.guitar-shape-grid{display:none}.guitar-chord-diagram{width:100%;max-width:220px}.guitar-shape-desc{display:none}.guitar-shape{padding:10px}.guitar-shape-head{gap:6px}.guitar-shape-name{font-size:15px}.guitar-cd-layout{margin-top:6px}.guitar-btn{min-height:34px;padding:6px 10px}.guitar-chip{min-height:36px;padding:7px 9px;font-size:13px}.guitar-tab{min-height:34px;padding:6px 14px}.guitar-select{min-height:38px}.guitar-note{min-width:48px;min-height:40px;padding:6px 8px}.guitar-panel{padding:10px}.guitar-panel-controls{padding:8px 10px}.guitar-quality-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:5px}.guitar-shape-grid{gap:6px}.guitar-rootbtn{border-radius:6px;min-width:38px;min-height:36px;font-size:13px}.guitar-tools-toggle{min-height:30px;padding:5px 10px;font-size:13px}section.guitar-panel-controls:has(.guitar-tools-toggle){padding:6px 10px}main .guitar-panel+.guitar-panel,main .guitar-panel+section{margin-top:10px}}.guitar-rootbtn{border:1px solid var(--gtr-border);background:var(--gtr-panel);min-width:44px;min-height:40px;color:var(--gtr-ink);border-radius:8px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s,transform .1s}.guitar-root-scroll .guitar-rootbtn{border-radius:7px;min-width:40px;min-height:34px;padding:0 4px;font-size:13px}.guitar-root-scroll .guitar-chip{min-height:34px;padding:6px 10px;font-size:13px}.guitar-picker-row{align-items:center;gap:8px;min-width:0;display:flex}.guitar-picker-label{color:var(--gtr-muted);flex-shrink:0;font-size:13px;font-weight:500}.guitar-picker-row .guitar-root-scroll{flex:1;min-width:0}.guitar-root-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;align-items:center;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.guitar-root-scroll::-webkit-scrollbar{display:none}.guitar-rootbtn:hover{border-color:var(--gtr-accent)}.guitar-rootbtn:active{transform:translateY(1px)}.guitar-rootbtn-active{border-color:var(--gtr-accent);background:var(--gtr-accent-soft);color:var(--gtr-accent-strong);box-shadow:0 0 0 1px color-mix(in srgb, var(--gtr-accent) 25%, transparent)}.dark .guitar-rootbtn-active{color:var(--gtr-accent-strong)}.guitar-tools-toggle{border:1px solid var(--gtr-border);background:var(--gtr-surface);width:100%;color:var(--gtr-muted);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s;display:flex}.guitar-tools-toggle:hover{color:var(--gtr-ink);border-color:var(--gtr-accent)}.guitar-tools-caret{font-size:12px}.guitar-keybtn{border:1px solid var(--gtr-border);background:var(--gtr-panel);min-width:40px;min-height:34px;color:var(--gtr-ink);border-radius:7px;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}.guitar-keybtn:hover{border-color:var(--gtr-accent)}.guitar-keybtn-active{border-color:var(--gtr-accent);background:var(--gtr-accent);color:#fff}.guitar-root-scroll .guitar-degree{border:1px solid var(--gtr-border);background:var(--gtr-panel);cursor:pointer;white-space:nowrap;border-radius:7px;flex-direction:row;align-items:center;gap:5px;padding:5px 10px;transition:border-color .15s,transform .1s;display:flex}.guitar-root-scroll .guitar-degree:hover{border-color:var(--gtr-accent)}.guitar-root-scroll .guitar-degree:active{transform:translateY(1px)}.guitar-degree-numeral{color:var(--gtr-accent-strong);font-size:12px;font-weight:700}.dark .guitar-degree-numeral{color:var(--gtr-accent)}.guitar-degree-name{color:var(--gtr-ink);font-size:12px;font-weight:600}@media (max-width:640px){.guitar-keybtn{min-width:36px;min-height:34px;font-size:12px}.guitar-rootbtn{min-width:40px;min-height:40px;font-size:14px}}