:root{--color-bg: #0d0d0d;--color-fg: #e8e8e8;--color-1: #c0392b;--color-2: #2980b9;--color-3: #27ae60;--font-mono: "Courier New", Courier, monospace;--font-sans: system-ui, -apple-system, sans-serif;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--spacing-xl: 4rem;--muted: color-mix(in srgb, var(--color-fg) 65%, var(--color-bg));--faint: color-mix(in srgb, var(--color-fg) 35%, var(--color-bg));--hairline: color-mix(in srgb, var(--color-fg) 20%, var(--color-bg));--fill: color-mix(in srgb, var(--color-fg) 6%, var(--color-bg))}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background-color:var(--color-bg);color:var(--color-fg);font-family:var(--font-mono);line-height:1.6;min-height:100vh}a{color:var(--color-2);text-decoration:none}a:hover{text-decoration:underline}button{background:var(--color-1);border:2px solid var(--color-1);color:var(--color-fg);cursor:pointer;font-family:var(--font-mono);font-size:1rem;padding:var(--spacing-xs) var(--spacing-sm)}button:hover:not(:disabled){background:var(--color-bg);color:var(--color-1)}button:disabled{border-color:var(--faint);background:var(--color-bg);color:var(--faint);cursor:default}button.ghost{background:var(--color-bg);border-color:var(--hairline);color:var(--color-fg)}button.ghost:hover:not(:disabled){border-color:var(--color-1);color:var(--color-1)}button.ghost[aria-pressed=true]{border-color:var(--color-2);color:var(--color-2)}input,textarea,select{background:var(--color-bg);border:1px solid var(--color-fg);color:var(--color-fg);font-family:var(--font-mono);font-size:1rem;padding:var(--spacing-xs) var(--spacing-sm);width:100%}input[type=checkbox],input[type=range]{accent-color:var(--color-2);background:none;border:none;padding:0;width:auto}input:focus,textarea:focus,select:focus{border-color:var(--color-2);outline:none}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}p{margin-bottom:var(--spacing-sm)}code,pre{font-family:var(--font-mono)}pre{background:var(--fill);border:1px solid var(--hairline);border-left:3px solid var(--color-1);margin:var(--spacing-sm) 0;overflow-x:auto;padding:var(--spacing-sm) var(--spacing-md)}#root{display:flex;flex-direction:column;min-height:100vh}.shell{display:flex;flex-direction:column;flex:1;margin:0 auto;max-width:1200px;padding:var(--spacing-md);width:100%}.masthead{align-items:baseline;border-bottom:2px solid var(--color-fg);display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm)}.masthead h1{font-size:1.5rem;letter-spacing:-.03em;margin:0}.masthead h1 a{color:var(--color-1)}.masthead h1 a:hover{text-decoration:none;color:var(--color-fg)}.masthead .tagline{color:var(--muted);font-size:.85rem}.masthead .spacer{flex:1}footer.colophon{border-top:1px solid var(--hairline);color:var(--muted);font-size:.8rem;margin-top:var(--spacing-lg);padding-top:var(--spacing-sm)}.panel{border:2px solid var(--color-fg);margin-bottom:var(--spacing-md)}.panel>h2{border-bottom:2px solid var(--color-fg);font-size:.9rem;letter-spacing:.08em;margin:0;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase}.panel>.body{padding:var(--spacing-sm)}.empty{border:1px dashed var(--faint);color:var(--muted);padding:var(--spacing-sm);text-align:center}.layout{display:grid;gap:var(--spacing-md);grid-template-columns:15rem 1fr}@media(max-width:800px){.layout{grid-template-columns:1fr}}.facet{margin-bottom:var(--spacing-md)}.facet h3{color:var(--muted);font-size:.7rem;letter-spacing:.1em;margin-bottom:var(--spacing-xs);text-transform:uppercase}.chips{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.chips button{font-size:.8rem;padding:0 var(--spacing-xs)}.scale-row{align-items:baseline;background:none;border:none;border-bottom:1px solid var(--hairline);color:var(--color-fg);display:grid;gap:var(--spacing-sm);grid-template-columns:1fr auto;padding:var(--spacing-xs) var(--spacing-sm);text-align:left;width:100%}.scale-row:hover{background:var(--color-fg);color:var(--color-bg)}.scale-row .name{font-weight:700}.scale-row .aka,.scale-row .fam{color:inherit;font-size:.8rem;opacity:.65}.pattern{letter-spacing:.15em;white-space:nowrap}.count{color:var(--muted);font-size:.8rem;margin-bottom:var(--spacing-xs)}table.degrees{border-collapse:collapse;width:100%}table.degrees th,table.degrees td{border-bottom:1px solid var(--hairline);padding:2px var(--spacing-xs);text-align:right}table.degrees th:first-child,table.degrees td:first-child,table.degrees th:nth-child(2),table.degrees td:nth-child(2){text-align:left}table.degrees th{color:var(--muted);font-size:.7rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase}table.degrees tr.quarter td{color:var(--color-2)}.roots{display:grid;gap:2px;grid-template-columns:repeat(12,1fr)}@media(max-width:700px){.roots{grid-template-columns:repeat(6,1fr)}}.roots button{font-size:.8rem;padding:var(--spacing-xs) 0}.fretboard-scroll{overflow-x:auto;scroll-snap-type:x proximity}.fretboard{display:grid;gap:1px;min-width:max-content}.fret-cell,.fret-head,.nut{font-size:.7rem;line-height:1.4;padding:2px 0;text-align:center}.nut{background:var(--color-bg);border-right:2px solid var(--color-fg);left:0;padding-right:var(--spacing-sm);position:sticky;text-align:right;z-index:1}.fret-head{border-bottom:1px solid var(--hairline);color:var(--muted)}.fret-head.quarter{color:var(--faint)}.fret-head.octave{color:var(--color-2)}.fret-cell{background:none;border:1px solid transparent;color:var(--faint);font-family:var(--font-mono);cursor:default}.fret-cell.in-scale{border-color:var(--color-fg);color:var(--color-fg);cursor:pointer}.fret-cell.in-scale.quarter{border-style:dashed;color:var(--color-2)}.fret-cell.root{background:var(--color-1);border-color:var(--color-1);color:var(--color-fg)}.fret-cell.in-scale:hover{background:var(--color-fg);color:var(--color-bg)}.fret-cell.octave-line{border-left:2px solid var(--hairline)}.row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.row>label{align-items:center;color:var(--muted);display:flex;font-size:.8rem;gap:var(--spacing-xs)}.row input[type=text],.row input[type=number],.row select{width:auto}.chord-grid{display:grid;gap:var(--spacing-xs);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.chord-card{border:1px solid var(--hairline);padding:var(--spacing-xs)}.chord-card .offsets{color:var(--muted);font-size:.75rem}.chord-card .chord-name{color:var(--color-3);font-size:.75rem}.playing{border-color:var(--color-3)!important;color:var(--color-3)!important}