#g212-explorer{--paper:light-dark(#fcfcfa,#191a1a);--ink:light-dark(#282b2a,#eceeea);--quiet:light-dark(#656a66,#aeb5ae);--rule:light-dark(#cdd1cb,#505650);--fret:light-dark(#e0e3dc,#353b35);--error:light-dark(#c03232,#ff8d8d);--wood-edge:light-dark(#765037,#513725);--wood-center:light-dark(#ae7d53,#89603f);--wood-grain:light-dark(#573922,#39281b);--metal-dark:light-dark(#777c7b,#626966);--metal-light:light-dark(#f3f2e8,#d8d9ce);--note-dark:light-dark(#292b27,#20251f);--note-light:light-dark(#fff9e9,#f4ecd9);color:var(--ink);background:transparent;padding:24px;font:400 14px/1.45 ui-sans-serif,system-ui,sans-serif;max-width:100%;color-scheme:light dark}
#g212-explorer *{box-sizing:border-box}#g212-explorer h2{font-size:21px;line-height:1.2;font-weight:500;margin:0 0 28px;letter-spacing:-.5px}
#g212-explorer .toolbar{display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr);align-items:end;gap:16px 20px}#g212-explorer .parameters{display:flex;align-items:flex-end;justify-content:center;gap:24px;min-width:0}#g212-explorer .toolbar>.action{justify-self:start}#g212-explorer label,#g212-explorer .field{display:flex;flex-direction:column;gap:5px;min-width:0}#g212-explorer .label{font-size:12px;color:var(--quiet)}
#g212-explorer button,#g212-explorer input,#g212-explorer select{font:inherit;color:var(--ink)}#g212-explorer button{border:0;background:transparent;padding:8px 0;min-height:40px}#g212-explorer button:hover{color:var(--quiet)}#g212-explorer .action{font-weight:500;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}#g212-explorer .generate{justify-self:end;font-weight:500;white-space:nowrap}
#g212-explorer input[type=text],#g212-explorer input[type=number],#g212-explorer select{border:0;border-radius:0;background:transparent;min-height:40px;padding:6px 2px;font-size:16px}#g212-explorer select{appearance:auto;padding-right:6px;max-width:100%}#g212-explorer input[aria-invalid=true]{outline:2px solid var(--error);outline-offset:2px}
#g212-explorer .key-field{width:62px}#g212-explorer .key-field input{width:100%}#g212-explorer .scale-field{flex:1 1 195px;max-width:260px}#g212-explorer .position-field{width:67px}#g212-explorer .position-field input{width:100%}#g212-explorer input[type=number]{appearance:textfield;-moz-appearance:textfield}#g212-explorer input[type=number]::-webkit-inner-spin-button,#g212-explorer input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#g212-explorer .choices{display:flex;align-items:center;gap:18px;flex-wrap:wrap}#g212-explorer .choices button{border-bottom:2px solid transparent;color:var(--quiet);white-space:nowrap}#g212-explorer .choices button[aria-pressed=true]{border-bottom-color:var(--ink);color:var(--ink)}#g212-explorer .architecture{gap:15px}#g212-explorer .architecture button{font-variant-numeric:tabular-nums;letter-spacing:1px}
#g212-explorer .settings{margin-top:16px;color:var(--quiet);font-size:12px}#g212-explorer summary{width:fit-content;padding:5px 0}#g212-explorer .settings-fields{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:8px}#g212-explorer .settings select{font-size:14px}
#g212-explorer .board-tools{margin:24px 0 14px;display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap}#g212-explorer .board-tools .choices{gap:20px}#g212-explorer .board{width:100%;min-width:0}#g212-explorer .board-panel{display:flex;gap:18px;width:100%;min-width:0}#g212-explorer .neck{display:block;flex:1 1 auto;min-width:0}#g212-explorer .neck text{font:400 12px ui-sans-serif,system-ui,sans-serif;fill:var(--quiet)}#g212-explorer .neck .note-text{fill:var(--note-light);font-weight:500}#g212-explorer .neck .tonic-text{fill:var(--note-dark);font-weight:500}
#g212-explorer .fits{margin-top:20px;padding-top:20px;border-top:1px solid var(--fret)}#g212-explorer .fits-head{display:flex;gap:12px;align-items:baseline;margin-bottom:8px}#g212-explorer .fits-head h3{font:500 14px/1.5 ui-sans-serif,system-ui,sans-serif;margin:0}#g212-explorer .quiet{color:var(--quiet);font-size:12px}#g212-explorer .chords{display:flex;flex-wrap:wrap;gap:2px 24px;align-items:baseline}#g212-explorer .chord{font-size:17px;min-height:38px;padding:5px 0;white-space:nowrap}#g212-explorer .chord[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px}#g212-explorer .chord-detail{font-size:12px;color:var(--quiet);margin-top:10px}#g212-explorer .error{color:var(--error);font-size:12px;margin-top:10px}#g212-explorer .live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#g212-explorer [hidden]{display:none!important}
@media(max-width:800px){#g212-explorer .toolbar{grid-template-columns:1fr 1fr}#g212-explorer .parameters{grid-row:2;grid-column:1/-1;justify-self:center;flex-wrap:wrap;max-width:100%}#g212-explorer .generate{grid-column:2;grid-row:1}}
@media(max-width:650px){#g212-explorer{padding:16px}#g212-explorer h2{margin-bottom:22px}#g212-explorer .toolbar{gap:12px 18px}#g212-explorer .parameters{gap:12px 18px}#g212-explorer .scale-field{max-width:220px;flex-basis:165px}#g212-explorer .board-panel{gap:10px}#g212-explorer .sliders{flex-basis:64px}#g212-explorer .board-tools{justify-content:flex-start}#g212-explorer .board-tools .choices{gap:16px}}
@media(pointer:coarse){#g212-explorer button,#g212-explorer input,#g212-explorer select{min-height:44px}}

/* Website integration: inherit the site's light palette and keep the surround clear. */
#g212-explorer{color-scheme:light;--ink:#171918;--quiet:#4e514f;padding:0;font-family:Arial,Helvetica,sans-serif;container-type:inline-size}
#g212-explorer button{cursor:pointer}
#g212-explorer .board-reference{margin-right:auto;font-weight:500;overflow-wrap:anywhere}
#g212-explorer .board{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
#g212-explorer .board-panel{display:block;position:relative;height:294px;max-width:none}
#g212-explorer .neck{display:block;max-width:none;pointer-events:none}
#g212-explorer .fret-note{position:absolute;width:44px;height:44px;min-height:44px;padding:0;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
#g212-explorer .note-face{display:grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--note-light);border-radius:50%;background:var(--note-dark);color:var(--note-light);font:500 12px/1 Arial,Helvetica,sans-serif;pointer-events:none}
#g212-explorer .tonic .note-face{background:var(--note-light);color:var(--note-dark);border-color:var(--note-dark)}
#g212-explorer .fret-note:focus-visible{outline:2px solid var(--note-light);outline-offset:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--note-dark)}
#g212-explorer.is-dragging,#g212-explorer .is-dragging .fret-note{cursor:grabbing}
@container(max-width:740px){#g212-explorer .toolbar{grid-template-columns:1fr 1fr}#g212-explorer .parameters{grid-row:2;grid-column:1/-1;justify-self:center;flex-wrap:wrap;max-width:100%}#g212-explorer .generate{grid-column:2;grid-row:1}}