:root{--bg:#eef4f8;--text:#15172a;--muted:#565b78;--accent:#1d6fd8;--accent-2:#0b93a6;--cta-1:#2563eb;--cta-2:#0891b2;--accent-contrast:#fff;--good:#0f8a52;--warn:#b45309;--glass:#ffffff80;--glass-strong:#ffffffb8;--glass-soft:#ffffff59;--glass-border:#ffffffbf;--glass-edge:#15172a14;--glass-shine:#ffffffe6;--glass-shadow:0 10px 40px -12px #14325a47;--blur:blur(14px) saturate(190%);--glass-fill:linear-gradient(160deg, #ffffff57, #ffffff0f);--glass-rim:linear-gradient(135deg, #fff 0%, #ffffff8c 22%, #ffffff40 60%, #fff 100%);--glass-glow:inset 2px 2px 5px -2px #fff, inset -2px -2px 6px -3px #ffffffe6, inset 0 0 22px #ffffff1a;--glass-sheen:#ffffffd9;--glass-touch:#ffffffbf;--blob-1:#93c5fd;--blob-2:#67e8f9;--blob-3:#a5b4fc;--blob-4:#99f6e4;--blob-5:#c4b5fd;--blob-opacity:1;--surface:var(--glass-strong);--surface-2:var(--glass-soft);--border:var(--glass-edge);--spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.2, .7, .2, 1);--board:#ecdcbc;--board-edge:#cdb486;--grain:#825a2829;--fret-wire:#9ca3af;--nut-color:#3f3226;--string-plain:#6b7280;--string-wound:#9a6b2f;--inlay:#5a3c1938;--dot-bg:#fff;--finger-1:#2563eb;--finger-2:#059669;--finger-3:#d97706;--finger-4:#db2777;--radius:26px;--max:860px;color-scheme:light dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#060b14;--text:#f1f2fb;--muted:#a3a7c6;--accent:#7cc4ff;--accent-2:#5eead4;--cta-1:#2563eb;--cta-2:#0e7490;--accent-contrast:#12122a;--good:#4ade80;--warn:#fbbf24;--glass:#ffffff12;--glass-strong:#ffffff1c;--glass-soft:#ffffff0d;--glass-border:#ffffff29;--glass-edge:#ffffff1a;--glass-shine:#ffffff47;--glass-shadow:0 12px 44px -12px #000000b3;--glass-fill:linear-gradient(160deg, #ffffff12, #fff0);--glass-rim:linear-gradient(135deg, #ffffffe6 0%, #ffffff2e 22%, #ffffff0f 60%, #ffffff8c 100%);--glass-glow:inset 2px 2px 5px -2px #ffffff73, inset -2px -2px 6px -3px #ffffff38, inset 0 0 22px #ffffff08;--glass-sheen:#fff3;--glass-touch:#ffffff29;--blob-1:#1e3a8a;--blob-2:#155e75;--blob-3:#172554;--blob-4:#134e4a;--blob-5:#4c1d95;--blob-opacity:.7;--board:#2e2018;--board-edge:#4a352a;--grain:#ffdcb412;--fret-wire:#b8bec8;--nut-color:#ece3cf;--string-plain:#d9dde3;--string-wound:#cfa76a;--inlay:#fff8eb80;--dot-bg:#f8fafc}}:root[data-theme=dark]{--bg:#060b14;--text:#f1f2fb;--muted:#a3a7c6;--accent:#7cc4ff;--accent-2:#5eead4;--cta-1:#2563eb;--cta-2:#0e7490;--accent-contrast:#12122a;--good:#4ade80;--warn:#fbbf24;--glass:#ffffff12;--glass-strong:#ffffff1c;--glass-soft:#ffffff0d;--glass-border:#ffffff29;--glass-edge:#ffffff1a;--glass-shine:#ffffff47;--glass-shadow:0 12px 44px -12px #000000b3;--glass-fill:linear-gradient(160deg, #ffffff12, #fff0);--glass-rim:linear-gradient(135deg, #ffffffe6 0%, #ffffff2e 22%, #ffffff0f 60%, #ffffff8c 100%);--glass-glow:inset 2px 2px 5px -2px #ffffff73, inset -2px -2px 6px -3px #ffffff38, inset 0 0 22px #ffffff08;--glass-sheen:#fff3;--glass-touch:#ffffff29;--blob-1:#1e3a8a;--blob-2:#155e75;--blob-3:#172554;--blob-4:#134e4a;--blob-5:#4c1d95;--blob-opacity:.7;--board:#2e2018;--board-edge:#4a352a;--grain:#ffdcb412;--fret-wire:#b8bec8;--nut-color:#ece3cf;--string-plain:#d9dde3;--string-wound:#cfa76a;--inlay:#fff8eb80;--dot-bg:#f8fafc}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg)}body{background:var(--bg);isolation:isolate;min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.6 system-ui,-apple-system,SF Pro Text,Segoe UI,Roboto,sans-serif;display:flow-root;position:relative}.runway{--runway:calc(max(env(safe-area-inset-top), 20px) + 8px)}.runway body{padding-top:calc(env(safe-area-inset-top) + var(--runway));min-height:calc(100vh + var(--runway))}.backdrop{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.blobs{background:radial-gradient(38vmax 38vmax at 12% 8%, var(--blob-1), transparent 70%), radial-gradient(34vmax 34vmax at 92% 18%, var(--blob-2), transparent 70%), radial-gradient(40vmax 40vmax at 78% 92%, var(--blob-3), transparent 70%), radial-gradient(30vmax 30vmax at 8% 85%, var(--blob-4), transparent 70%), radial-gradient(34vmax 26vmax at 34% 52%, var(--blob-5), transparent 70%);height:calc(100lvh + 20vmax);opacity:var(--blob-opacity);will-change:transform;position:absolute;top:-10vmax;left:-10vmax;right:-10vmax}@supports (animation-timeline:scroll()){.blobs{animation:linear both pin-blobs}.backdrop .blobs{animation-timeline:scroll(root)}}@keyframes pin-blobs{0%{transform:translate(0,0)}to{transform:translate3d(0, var(--max-scroll,0px), 0)}}a{color:var(--accent)}h1,h2,h3{letter-spacing:-.02em;line-height:1.15}h1{margin:.6em 0 .3em;font-size:clamp(1.7rem,5.5vw,2.5rem)}h2{margin-top:2em;font-size:1.3rem}.container{max-width:var(--max);margin:0 auto;padding:0 16px}.lead{color:var(--muted);font-size:1.05rem}button,select,input{font:inherit;color:inherit}@media (hover:hover) and (pointer:fine){:root{--blur:blur(8px) saturate(170%)}}.glass,.panel{background:var(--glass-fill);box-shadow:var(--glass-shadow), var(--glass-glow);border:1px solid #0000;position:relative}.panel:before{content:"";border-radius:inherit;background:var(--glass-rim);-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.panel:after{content:"";border-radius:inherit;background:radial-gradient(38% 26% at 14% 0%, var(--glass-sheen), transparent 70%), linear-gradient(175deg, color-mix(in srgb, var(--glass-sheen) 30%, transparent) 0%, transparent 38%);pointer-events:none;position:absolute;inset:0}a.panel{transition:transform .45s var(--spring)}a.panel .icon{transition:transform .5s var(--spring)}@media (hover:hover){a.panel:hover{box-shadow:0 18px 40px -16px #14325a73, var(--glass-glow);transform:translateY(-4px)}a.panel:hover .icon{transform:scale(1.14)rotate(-6deg)}a.panel:hover:after{background:radial-gradient(circle at var(--px,50%) var(--py,50%), color-mix(in srgb, var(--glass-touch) 55%, transparent), transparent 60%), radial-gradient(38% 26% at 14% 0%, var(--glass-sheen), transparent 70%), linear-gradient(175deg, color-mix(in srgb, var(--glass-sheen) 30%, transparent) 0%, transparent 38%)}}a.panel:active{transition-duration:.12s;transform:scale(.96)}a.panel:active:after{background:radial-gradient(circle at var(--px,50%) var(--py,50%), var(--glass-touch), transparent 55%), radial-gradient(38% 26% at 14% 0%, var(--glass-sheen), transparent 70%), linear-gradient(175deg, color-mix(in srgb, var(--glass-sheen) 30%, transparent) 0%, transparent 38%)}.panel{border-radius:var(--radius);padding:22px 16px}.panel>*{position:relative}@supports not (backdrop-filter:blur(1px)){:root{--glass:#ffffffdb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--glass:#1e1f34eb}}:root[data-theme=dark]{--glass:#1e1f34eb}}@media (prefers-reduced-transparency:reduce){:root{--glass:var(--bg);--glass-strong:var(--bg)}.backdrop{display:none}}.btn{border:1px solid var(--glass-border);background:var(--glass-strong);min-height:44px;box-shadow:0 4px 14px -6px #14325a4d, inset 0 1px 0 var(--glass-shine);cursor:pointer;touch-action:manipulation;transition:transform .45s var(--spring), background .2s ease;border-radius:999px;justify-content:center;align-items:center;gap:.4em;padding:.5em 1.2em;display:inline-flex}.btn svg{transition:transform .45s var(--spring)}@media (hover:hover){.btn:hover{box-shadow:0 10px 22px -10px #14325a73, inset 0 1px 0 var(--glass-shine);transform:translateY(-2px)}.btn:hover svg{transform:scale(1.15)}.btn-primary:hover{filter:brightness(1.08)saturate(1.1);box-shadow:0 14px 30px -10px color-mix(in srgb, var(--cta-1) 80%, transparent), inset 0 1px 0 #ffffff73}}.btn:active{transition-duration:.1s;transform:scale(.95)}.btn-primary{background:linear-gradient(135deg, var(--cta-1), var(--cta-2));color:#fff;box-shadow:0 8px 24px -8px color-mix(in srgb, var(--cta-1) 70%, transparent), inset 0 1px 0 #ffffff73;border-color:#ffffff59;font-weight:600}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}select,input[type=number]{border:1px solid var(--glass-border);background:var(--glass-strong);min-height:44px;box-shadow:inset 0 1px 0 var(--glass-shine);border-radius:14px;padding:.3em .7em;transition:border-color .2s,box-shadow .2s}select:hover,input[type=number]:hover,select:focus,input[type=number]:focus{border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px 0 var(--glass-shine)}select option{background:var(--bg);color:var(--text)}.table-wrap{border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:18px;overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--glass-edge);padding:10px 14px}tr:last-child td{border-bottom:0}th{color:var(--muted);font-size:.85rem;font-weight:600}.muted{color:var(--muted)}.chips{flex-wrap:wrap;gap:6px;padding:0;list-style:none;display:flex}.chips a{border:1px solid var(--glass-border);background:var(--glass-strong);min-width:44px;color:var(--text);text-align:center;transition:transform .4s var(--spring), border-color .2s ease, color .2s ease, background .2s ease;border-radius:999px;padding:6px 12px;font-weight:600;text-decoration:none;display:inline-block}.chips a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--glass-strong))}@media (hover:hover){.chips a:hover{box-shadow:0 8px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent);transform:translateY(-2px)}}.chips a:active{transition-duration:.1s;transform:scale(.94)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{inset-inline-start:16px;position:absolute;top:8px;transform:translateY(-200%)}.skip-link:focus{z-index:10;background:var(--bg);padding:8px 12px;transform:none}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}main>*{animation:.45s cubic-bezier(.2,.7,.2,1) both rise}main>:nth-child(2){animation-delay:40ms}main>:nth-child(3){animation-delay:80ms}main>:nth-child(n+4){animation-delay:.12s}.reveal{opacity:0;transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);animation:none;transform:translateY(18px)scale(.98)}.reveal.in{opacity:1;transform:none}@media print{.reveal{opacity:1!important;transform:none!important}}@media (prefers-reduced-motion:reduce){main>*{animation:none}@view-transition{navigation:none}}:is(.chord-diagram,.fretboard,.neck) .board{fill:var(--board);stroke:var(--board-edge);stroke-width:1px}:is(.chord-diagram,.fretboard,.neck) .grain{stroke:var(--grain);stroke-width:1.2px;stroke-linecap:round}.chord-diagram .nut{fill:var(--nut-color)}:is(.fretboard,.neck) .nut{stroke:var(--nut-color);stroke-width:5px}.chord-diagram .fret,:is(.fretboard,.neck) .wire{stroke:var(--fret-wire);stroke-width:1.8px}:is(.chord-diagram,.fretboard,.neck) .string{stroke:var(--string-plain)}:is(.chord-diagram,.fretboard,.neck) .string.wound{stroke:var(--string-wound)}.neck .string.open{opacity:.45;stroke-dasharray:3 3}:is(.fretboard,.neck) .inlay{fill:var(--inlay)}.chord-diagram :is(.dot,.barre){fill:var(--accent);stroke:#ffffffbf;stroke-width:1px}.chord-diagram .f1 :is(.dot,.barre){fill:var(--finger-1)}.chord-diagram .f2 :is(.dot,.barre){fill:var(--finger-2)}.chord-diagram .f3 :is(.dot,.barre){fill:var(--finger-3)}.chord-diagram .f4 :is(.dot,.barre){fill:var(--finger-4)}.fretboard .dot{fill:var(--dot-bg);stroke:var(--accent);stroke-width:1.5px}.fretboard .dot.root{fill:var(--accent);stroke:var(--dot-bg)}.fretboard .note{fill:#0f172a;font-weight:700}.fretboard .note.root{fill:var(--accent-contrast)}.lefty :is(.chord-diagram,.fretboard,.neck svg){transform:scaleX(-1)}.lefty :is(.chord-diagram,.fretboard,.neck svg) text{transform-box:fill-box;transform-origin:50%;transform:scaleX(-1)}svg{direction:ltr}@media print{:root,:root[data-theme=dark]{--bg:#fff;--text:#000;--muted:#444;--accent:#1f5fbf;--accent-contrast:#fff;--glass:#fff;--glass-strong:#fff;--glass-soft:#fff;--glass-border:#bbb;--glass-shadow:none;--board:#fff;--board-edge:#888;--grain:transparent;--fret-wire:#777;--nut-color:#000;--string-plain:#333;--string-wound:#333;--inlay:#ccc;--dot-bg:#fff;color-scheme:light}html,body{background:#fff!important;height:auto!important;min-height:0!important}section:has(>.chips),main:has(.sheet-tool)>:not(.sheet-tool),.backdrop,.site-header,.site-footer,.menu-anchor,.skip-link,.no-print,button,.btn,.crumbs,.breadcrumb{display:none!important}.panel{box-shadow:none!important;backdrop-filter:none!important;background:#fff!important}main>*{animation:none!important}h2,h3{break-after:avoid}svg,li,.panel{break-inside:avoid}a{color:inherit;text-decoration:none}}.neck svg{touch-action:manipulation;direction:ltr;width:100%;margin:0 auto;display:block}.neck .vertical{max-width:300px}.neck .label{fill:var(--muted);font-size:10px}.neck .cell{fill:#0000;cursor:pointer}.neck .cell:hover{fill:color-mix(in srgb, var(--accent) 15%, transparent)}.neck .target,.neck .good,.neck .bad{stroke:#fff;stroke-width:1.5px}.neck .target{fill:var(--accent)}.neck .good{fill:var(--good)}.neck .bad{fill:var(--warn)}.neck .mark-text{fill:#fff;pointer-events:none;font-size:9px;font-weight:700}.neck .muted-string{fill:var(--warn);font-weight:700}