.comb{touch-action:none;-webkit-user-select:none;user-select:none}.comb-viewport{margin:0 auto;position:relative;overflow:visible}.comb{transition:transform .5s cubic-bezier(.33,.02,.2,1);position:absolute;inset:0 auto auto 0}.hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);opacity:0;background:0 0;transition:opacity .1s ease-out,transform .12s cubic-bezier(.2,.8,.3,1);position:absolute}.hex.shown{opacity:1}.hex-face{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--cell);transition:background-color .3s;position:absolute;inset:0}.hex.accidental .hex-face{background:var(--cell-alt)}.hex.out .hex-face{background:color-mix(in srgb, var(--cell) 32%, transparent)}.hex.shown.aside{opacity:.16}.hex.shown.aside.tinted,.hex.shown.aside.live,.hex.shown.aside.sounding{opacity:1}.hex-label{z-index:2;color:var(--ink);text-shadow:0 1px 3px #0000008c;place-content:center;justify-items:center;gap:.12em;line-height:1;display:grid;position:absolute;inset:0}.hex-label b{font-style:normal;font-weight:600}.hex-label sup{vertical-align:super;opacity:.7;margin-left:.05em;font-size:.58em;font-weight:500;line-height:0}.hex-cents{font-variant-numeric:tabular-nums;opacity:.85;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.58em;font-style:normal}.hex.no-cents .hex-cents{display:none}.hex-degree{font-family:var(--mono);letter-spacing:.06em;color:var(--brass);font-size:.52em;font-style:normal;font-weight:600}.hex.tinted .hex-degree{color:#12151c8c}.hex.tonic{background:var(--brass)}.hex.tonic .hex-face{inset:2px}.hex.out .hex-label{opacity:.3}.hex.tinted .hex-label{color:#f8f9fa}.hex.tinted.pale .hex-label{color:#12151c;text-shadow:none}.hex.beyond{background:#b8c0cf}.hex.beyond .hex-face{inset:3px}.hex-tip{pointer-events:none;display:none;position:absolute;inset:0}.hex.beyond-sharp .hex-tip{clip-path:polygon(50% 0%,86% 18%,14% 18%);display:block}.hex.beyond-flat .hex-tip{clip-path:polygon(50% 100%,86% 82%,14% 82%);display:block}.hex.live .hex-tip{display:none}.hex.live{z-index:3;background:#fff;transform:scale(1.65)}.hex.live .hex-face{transition:none;inset:3px}.hex.sounding{background:var(--brass);z-index:4}.hex.sounding .hex-face{inset:3px}.hex-centre,.hex-needle{opacity:0;pointer-events:none;position:absolute;left:0;right:0;transform:translateY(-50%)}.hex-centre{background:linear-gradient(90deg,#ffffff8c 0 16%,#0000 16% 84%,#ffffff8c 84% 100%);height:1px;top:50%}.hex-needle{background:#fff;border-radius:2px;height:3px;transition:top 70ms linear,opacity .15s;box-shadow:0 0 4px #0000008c}.hex.live .hex-centre,.hex.live .hex-needle{opacity:1}@media (prefers-reduced-motion:reduce){.comb,.hex,.hex-needle{transition:none}}.comb.sweeping .hex.shown{animation:sweep-rim 1.5s ease-out var(--sweep-delay,0s) backwards, sweep-hide var(--sweep-delay,0s) linear}.comb.sweeping .hex.shown .hex-face{animation:sweep-face 1.5s ease-out var(--sweep-delay,0s) backwards}@keyframes sweep-hide{0%,to{opacity:0}}@keyframes sweep-rim{0%{opacity:1;background:var(--brass)}}@keyframes sweep-face{0%{inset:3px}}.hex.chosen{background:var(--picked)}.hex.chosen .hex-face{background:var(--picked-dim);inset:2px}.hex.chosen .hex-degree{color:var(--picked)}.hex.chosen .hex-name{color:var(--ink)}.hex.above{visibility:hidden}.comb-ring{z-index:3;pointer-events:none;position:absolute;inset:0 auto auto 0;overflow:visible}.comb-ring .ring-wide polygon{fill:#fff;stroke:#fff;stroke-width:5px}.comb-ring .ring-body polygon{fill:#000}.comb-ring .ring-ink{fill:var(--signal)}.hex.locked{opacity:.22;pointer-events:none}