:root{--plum:#2b1330;--plum-deep:#210e26;--plum-card-top:#3d1c45;--plum-card-bottom:#2f1436;--gold:#e8b451;--cream:#f5ead8;--rose:#e0708a;--cb-anim:.2s}*{box-sizing:border-box}html,body,#root{height:100%}html,body{margin:0;padding:0}body{background:radial-gradient(120% 80% at 50% -10%, #45204d 0%, var(--plum) 60%, var(--plum-deep) 100%);color:var(--cream);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:inherit}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.app{height:100vh;height:100dvh;padding:10px 16px max(24px, env(safe-area-inset-bottom)) 16px;flex-direction:column;display:flex;overflow:hidden}.masthead{flex:none;align-items:center;height:40px;display:flex}.wordmark{letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-size:14px;font-weight:700;line-height:1.4}.card{background:linear-gradient(180deg, var(--plum-card-top), var(--plum-card-bottom));transition-property:box-shadow,border-color;transition-duration:var(--cb-anim);border:1px solid #e8b45138;border-radius:22px;flex:none;padding:14px 12px;transition-timing-function:ease-out;box-shadow:0 18px 42px #0c030f73,inset 0 1px #f5ead812}.card[data-playing=true]{border-color:#e0708a80;box-shadow:0 18px 42px #0c030f73,0 0 0 1px #e0708a47,inset 0 1px #f5ead812}.card-tap{width:100%;color:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:0;padding:0;display:flex}.chord-name{letter-spacing:-.01em;color:var(--cream);font-size:40px;font-weight:700;line-height:1.2}.chord-caption{letter-spacing:.16em;text-transform:uppercase;color:#e8b451d9;font-size:11px;font-weight:600;line-height:1.7}.diagram-holder{justify-content:center;width:100%;margin-top:6px;display:flex}.fretboard{width:100%;max-width:274px;height:auto;transition-property:transform;transition-duration:var(--cb-anim);transition-timing-function:ease-out;display:block}.card-tap:active .fretboard{transform:scale(.982)}.board{stroke:#e8b45129;stroke-width:1px}.fret{stroke:#e8b4516b;stroke-width:1.6px;stroke-linecap:round}.nut{fill:#f0e0c2}.string{stroke:#f5ead899;stroke-linecap:round;transition-property:stroke;transition-duration:var(--cb-anim);transition-timing-function:ease-out}.string[data-lit=true]{stroke:var(--rose)}.marker-open{fill:none;stroke:#f5ead8d1;stroke-width:2px;transition-property:stroke;transition-duration:var(--cb-anim);transition-timing-function:ease-out}.marker-open[data-lit=true]{stroke:var(--rose)}.marker-mute line{stroke:#f5ead875;stroke-width:2.2px;stroke-linecap:round}.dot{fill:var(--gold);transition-property:fill;transition-duration:var(--cb-anim);transition-timing-function:ease-out}.dot-halo{fill:var(--rose);opacity:0;transition-property:opacity;transition-duration:var(--cb-anim);transition-timing-function:ease-out}.dot-group[data-lit=true] .dot{fill:var(--rose)}.dot-group[data-lit=true] .dot-halo{opacity:.38}.barre rect{fill:var(--gold);transition-property:fill;transition-duration:var(--cb-anim);transition-timing-function:ease-out}.barre[data-lit=true] rect{fill:var(--rose)}.finger{fill:var(--plum);font-size:15px;font-weight:700}.fret-label{fill:#e8b451eb;font-size:13px;font-weight:600}.string-strip{gap:6px;margin-top:10px;display:flex}.string-key{min-width:0;height:50px;color:var(--cream);transition-property:background-color,border-color,color;transition-duration:var(--cb-anim);background:#f5ead80f;border:1px solid #e8b45142;border-radius:12px;flex:1 1 0;justify-content:center;align-items:center;font-size:13px;font-weight:600;line-height:1.4;transition-timing-function:ease-out;display:flex}.string-key.is-muted{color:#f5ead84d;background:0 0;border-style:dashed;border-color:#f5ead829}.string-key[data-lit=true]{border-color:var(--rose);color:#fff;background:#e0708a4d}.string-key:active{background:#e8b4514d}.hint{text-align:center;color:#f5ead89e;flex:none;min-height:20px;margin:8px 0 0;font-size:13px;line-height:1.6}.control-row{flex:none;gap:8px;margin-top:6px;display:flex}.switch-group{background:#f5ead812;border-radius:16px;flex:auto;gap:4px;padding:4px;display:flex}.switch-group.is-wide{flex:none;margin-top:6px}.switch-option{color:#f5ead8b8;min-width:0;height:48px;transition-property:background-color,color;transition-duration:var(--cb-anim);background:0 0;border:0;border-radius:12px;flex:1 1 0;font-size:14px;font-weight:600;line-height:1.4;transition-timing-function:ease-out}.switch-option.is-on{background:var(--gold);color:var(--plum)}.switch-option:active{background:#e8b4514d}.switch-option.is-on:active{background:#f3ca80}.mute{background:#f5ead812;border:1px solid #e8b45142;border-radius:16px;flex:none;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.mute:active{background:#e8b45147}.icon{fill:none;width:24px;height:24px;stroke:var(--cream);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.icon-body{fill:var(--cream);stroke:var(--cream);stroke-width:1.6px}.mute.is-muted .icon{stroke:#f5ead86b}.mute.is-muted .icon-body{fill:#f5ead86b;stroke:#f5ead86b}.tabs{flex:none;gap:8px;margin-top:8px;display:flex}.tab{color:#f5ead8b3;height:46px;transition-property:background-color,border-color,color;transition-duration:var(--cb-anim);background:0 0;border:1px solid #e8b45133;border-radius:14px;flex:1 1 0;font-size:15px;font-weight:600;line-height:1.4;transition-timing-function:ease-out}.tab.is-on{color:var(--cream);background:#e8b45129;border-color:#e8b45199}.tab:active{background:#e8b45147}.browser{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:auto;min-height:96px;margin-top:8px;overflow:hidden auto;-webkit-mask-image:linear-gradient(#000 93%,#0000 100%);mask-image:linear-gradient(#000 93%,#0000 100%)}.group+.group{margin-top:16px}.group-title{letter-spacing:.16em;text-transform:uppercase;color:#e8b451d1;margin:0 0 8px;font-size:11px;font-weight:700;line-height:1.6}.degree-grid+.group-title,.chip-row+.group-title{margin-top:16px}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{min-width:62px;height:48px;color:var(--cream);transition-property:background-color,border-color,color;transition-duration:var(--cb-anim);background:#f5ead817;border:1px solid #f5ead833;border-radius:13px;padding:0 12px;font-size:15px;font-weight:600;line-height:1.4;transition-timing-function:ease-out}.chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--plum)}.chip:active{background:#e8b4514d}.chip.is-on:active{background:#f3ca80}.degree-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.degree{height:58px;color:var(--cream);transition-property:background-color,border-color,color;transition-duration:var(--cb-anim);background:#f5ead817;border:1px solid #f5ead833;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition-timing-function:ease-out;display:flex}.degree-numeral{letter-spacing:.12em;color:#e8b451e6;font-size:11px;font-weight:600;line-height:1.6}.degree-chord{font-size:19px;font-weight:700;line-height:1.35}.degree.is-on{background:var(--gold);border-color:var(--gold);color:var(--plum)}.degree.is-on .degree-numeral{color:#2b1330b3}.degree:active{background:#e8b4514d}.degree.is-on:active{background:#f3ca80}.progression{background:#e0708a1f;border:1px solid #e0708a52;border-radius:15px;flex-direction:column;gap:2px;margin:10px 0 0;padding:10px 14px;display:flex}.progression-label{letter-spacing:.18em;text-transform:uppercase;color:#e0708af2;font-size:10px;font-weight:700;line-height:1.7}.progression-degrees{letter-spacing:.1em;color:#f5ead8a8;font-size:13px;line-height:1.6}.progression-chords{letter-spacing:.05em;color:var(--cream);font-size:19px;font-weight:700;line-height:1.5}.footnote{text-align:center;color:#f5ead866;flex:none;margin:8px 0 0;font-size:11px;line-height:1.5}@media (max-height:720px){.fretboard{max-width:226px}.chord-name{font-size:34px}}@media (prefers-reduced-motion:reduce){:root{--cb-anim:.01ms}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.card-tap:active .fretboard{transform:none}}