@layer components{.cs-editor{font-family:var(--gp-f-body);flex-direction:column;gap:14px;display:flex}.cs-lab{color:var(--gp-ink-3);font-size:12px;font-weight:650}.cs-window{align-items:center;gap:6px;display:flex}.cs-window .cs-lab{flex:1}.cs-window-at{font-variant-numeric:tabular-nums;text-align:center;min-width:40px;font-size:13px;font-weight:700}.cs-step{border-radius:var(--gp-r-s);background:var(--gp-well);width:32px;height:32px;color:var(--gp-ink-2);cursor:pointer;place-items:center;display:grid}.cs-step svg{width:16px;height:16px}.cs-step:not(:disabled):hover{color:var(--gp-ink);background:var(--gp-s2)}.cs-step:disabled{color:var(--gp-ink-mute);cursor:default}.cs-grid{border-radius:var(--gp-r-m);background:var(--gp-card);box-shadow:var(--gp-ring-c);grid-template-columns:24px repeat(6,minmax(26px,36px)) 48px;justify-content:center;align-items:center;row-gap:0;padding:10px 8px 12px;display:grid}.cs-string{color:var(--gp-ink-3);text-align:center;padding-bottom:2px;font-size:11.5px;font-weight:650}.cs-mark{border-radius:var(--gp-r-s);height:28px;color:var(--gp-ink-2);cursor:pointer;font-size:15px;font-weight:750}.cs-mark:hover{background:var(--gp-well)}.cs-fret{color:var(--gp-ink-3);font-variant-numeric:tabular-nums;text-align:center;font-size:11.5px;font-weight:700}.cs-cell{cursor:pointer;height:40px;position:relative}.cs-cell:before{background:var(--gp-ink-3);content:"";width:1.5px;margin-left:-.75px;position:absolute;top:0;bottom:0;left:50%}.cs-cell:after{background:var(--gp-edge);content:"";height:1.5px;position:absolute;bottom:0;left:0;right:0}.cs-cell[data-nut]{box-shadow:inset 0 4px 0 var(--gp-ink)}.cs-cell i{z-index:1;width:26px;height:26px;color:var(--gp-card);transition:transform var(--gp-d-pop) var(--gp-spring-pop), background-color var(--gp-d-state) linear;border-radius:50%;place-items:center;margin:7px auto;font-size:12px;font-style:normal;font-weight:750;display:grid;position:relative}.cs-cell:hover i{background:var(--gp-s2)}.cs-cell[aria-pressed=true] i{background:var(--gp-ink);transform:scale(1.04)}.cs-barre{height:26px;box-shadow:inset 0 0 0 1px var(--gp-edge);color:var(--gp-ink-2);cursor:pointer;border-radius:99px;justify-self:end;padding:0 7px;font-size:11px;font-weight:650}.cs-barre:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--gp-ink-3)}.cs-barre[aria-pressed=true]{background:var(--gp-ink-fill);box-shadow:none;color:var(--gp-on-ink)}.cs-barre:disabled{opacity:.35;cursor:default}.cs-fingers-lab{grid-column:1/-1;padding:10px 0 0 24px}.cs-finger{border-radius:var(--gp-r-s);background:var(--gp-well);height:28px;color:var(--gp-ink);cursor:pointer;margin:4px 3px 0;font-size:13px;font-weight:700}.cs-finger:not(:disabled):hover{background:var(--gp-s2)}.cs-finger:disabled{color:var(--gp-ink-mute);cursor:default;background:0 0}.cs-errors{color:var(--gp-bad);flex-direction:column;gap:2px;margin:0;padding:0;font-size:12.5px;list-style:none;display:flex}.cs-tab{font-variant-numeric:tabular-nums;letter-spacing:.08em}@media (prefers-reduced-motion:reduce){.cs-cell i{transition:none}}}