/*! Card Battle Lab. Copyright (c) 2026 Dave Skilton. All rights reserved. See /LICENSE. https://cardbattlelab.com/ */
:root {
  --gcg-control-height: 28px;
  --gcg-control-height-sm: 22px;
  --gcg-control-height-touch: 34px;
  --gcg-control-gap: 4px;
  --gcg-control-radius: 4px;
  --gcg-control-pad-y: 5px;
  --gcg-control-pad-x: 6px;
  --gcg-field-label-width: 112px;
  --gcg-field-column-gap: 8px;
  --gcg-field-row-gap: 6px;
  --gcg-modal-head-pad-x: var(--modal-pad, 16px);
  --gcg-modal-head-pad-y: calc(var(--modal-pad, 16px) - 1px);
  --gcg-ui-density: 1;
  --gcg-ui-density-min: .78;
  --gcg-ui-density-ref-w: 440;
  --gcg-ui-density-ref-h: 720;
  --gcg-ui-fs-body: 1;
  --gcg-ui-fs-display: 1;
  --gcg-ui-fs-mono: 1;
  --gcg-ui-btn-fs: 12px;
  --gcg-ui-modal-pad: 16px;
  --gcg-message-density: 1;
  --gcg-message-density-min: .78;
  --gcg-message-density-ref-w: 440;
  --gcg-message-density-ref-h: 720;
  --gcg-message-x: 50vw;
  --gcg-message-y: 50vh;
  --gcg-message-fs-body: 1;
  --gcg-message-fs-display: 1;
  --gcg-message-btn-fs: 12px;
  --gcg-resize-divider-line: var(--c-border-strong);
  --gcg-resize-divider-handle: var(--c-text-faint);
  --gcg-resize-divider-active: var(--c-accent);
  --gcg-resize-divider-fade: 20%;
  --gcg-resize-divider-handle-length: 34px;
  --gcg-resize-divider-handle-thickness: 3px;
  --gcg-tab-slant: 9px;
  --gcg-tab-radius: 6px;
  --gcg-tab-trail: 320px;
  --gcg-tab-fill: var(--c-panel-2);
  --gcg-tab-ink-rest: color-mix(in srgb, var(--c-text) 42%, transparent);
  --gcg-tab-ink-on: var(--c-accent);
  --gcg-tab-label: color-mix(in srgb, var(--c-text) 82%, transparent);
  --gcg-tab-disabled-opacity: .2;
  --gcg-tier-lock-gap: 5px;
  --gcg-tier-lock-icon-size: 15px;
  --gcg-tier-lock-surface-base: var(--c-ctrl);
  --gcg-tier-lock-tint: 18%;
  --gcg-tier-lock-border-tint: 55%;
  --gcg-tier-lock-glow-near: 1px;
  --gcg-tier-lock-glow-far: 2px;
}
.ui-dialog-overlay {
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  right: auto;
  box-sizing: border-box;
  padding: 20px;
}
.ui-dialog-overlay.over-menu {
  z-index: var(--z-menu-dialog);
}
.ui-dialog-box {
  padding: calc(18px * var(--gcg-message-density, 1)) calc(20px * var(--gcg-message-density, 1));
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--gcg-message-density, 1));
}
.ui-dialog-overlay .ui-dialog-box {
  width: 100%;
  min-width: 300px;
  max-width: 440px;
}
.ui-dialog-box .ui-dialog-title.gcg-dlg-t {
  margin: 0;
}
.ui-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ui-dialog-head .gcg-modal-title {
  margin: 0;
}
.ui-dialog-msg {
  font-size: calc(13px * var(--fs-body, 1));
  line-height: 1.5;
  color: var(--c-text-dim);
  white-space: pre-wrap;
}
.ui-dialog-input {
  width: 100%;
  box-sizing: border-box;
}
.ui-dialog-count {
  margin-top: 4px;
  text-align: right;
  font-size: calc(11px * var(--fs-body, 1));
  letter-spacing: .02em;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}
.ui-dialog-count.at-max {
  color: var(--c-warn);
}
.ui-dialog-msg a.ui-dialog-link {
  color: var(--c-game-activate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ui-dialog-msg a.ui-dialog-link:hover,
.ui-dialog-msg a.ui-dialog-link:focus-visible {
  filter: brightness(1.18);
}
.ui-dialog-row {
  display: flex;
  gap: calc(10px * var(--gcg-message-density, 1));
  justify-content: flex-end;
  margin-top: calc(2px * var(--gcg-message-density, 1));
}
a.ui-dialog-btn {
  text-decoration: none;
}
body > .screen:not(#playScreen),
.gcg-modal:not(.gcg-message-modal),
#uiSettingsPanel,
#bottomBar,
.bb-menu-stack,
#mobileLogOverlay,
#mobileResultsOverlay,
#mobileTimelineDock,
#inspector,
.ui-toast-host,
.ui-drop-host,
.pvp-chip-tip {
  --fs-body: var(--gcg-ui-fs-body);
  --fs-display: var(--gcg-ui-fs-display);
  --fs-mono: var(--gcg-ui-fs-mono);
  --btn-fs: var(--gcg-ui-btn-fs);
  --modal-pad: var(--gcg-ui-modal-pad);
  --gcg-control-height: max(26px, calc(28px * var(--gcg-ui-density)));
  --gcg-control-height-sm: max(21px, calc(22px * var(--gcg-ui-density)));
  --gcg-control-height-touch: max(30px, calc(34px * var(--gcg-ui-density)));
  --gcg-control-gap: calc(4px * var(--gcg-ui-density));
  --gcg-control-pad-y: max(3px, calc(5px * var(--gcg-ui-density)));
  --gcg-control-pad-x: max(5px, calc(6px * var(--gcg-ui-density)));
  --gcg-field-label-width: calc(112px * var(--gcg-ui-density));
  --gcg-field-column-gap: calc(8px * var(--gcg-ui-density));
  --gcg-field-row-gap: calc(6px * var(--gcg-ui-density));
  --gcg-modal-head-pad-x: var(--gcg-ui-modal-pad);
  --gcg-modal-head-pad-y: calc(var(--gcg-ui-modal-pad) - 1px);
}
.gcg-message-modal {
  position: fixed;
  left: var(--gcg-message-modal-x, var(--gcg-message-x, 50vw));
  top: var(--gcg-message-modal-y, var(--gcg-message-y, 50vh));
  transform: translate(-50%, -50%);
  --fs-body: var(--gcg-message-fs-body);
  --fs-display: var(--gcg-message-fs-display);
  --btn-fs: var(--gcg-message-btn-fs);
  --gcg-control-height: max(26px, calc(28px * var(--gcg-message-density)));
  --gcg-control-height-sm: max(21px, calc(22px * var(--gcg-message-density)));
  --gcg-control-height-touch: max(30px, calc(34px * var(--gcg-message-density)));
  --gcg-control-gap: calc(4px * var(--gcg-message-density));
  --gcg-control-pad-y: max(3px, calc(5px * var(--gcg-message-density)));
  --gcg-control-pad-x: max(5px, calc(6px * var(--gcg-message-density)));
}
.gcg-resize-divider {
  --gcg-resize-divider-center-gap: 0px;
}
.gcg-resize-divider::before,
.gcg-resize-divider::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.gcg-resize-divider--h::before {
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gcg-resize-divider-line) var(--gcg-resize-divider-fade),
      var(--gcg-resize-divider-line) calc(100% - var(--gcg-resize-divider-fade)),
      transparent);
}
.gcg-resize-divider--v::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--gcg-resize-divider-line) var(--gcg-resize-divider-fade),
      var(--gcg-resize-divider-line) calc(50% - var(--gcg-resize-divider-center-gap)),
      transparent calc(50% - var(--gcg-resize-divider-center-gap)),
      transparent calc(50% + var(--gcg-resize-divider-center-gap)),
      var(--gcg-resize-divider-line) calc(50% + var(--gcg-resize-divider-center-gap)),
      var(--gcg-resize-divider-line) calc(100% - var(--gcg-resize-divider-fade)),
      transparent);
}
.gcg-resize-divider::after {
  left: 50%;
  top: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: var(--gcg-resize-divider-handle);
  transition: background .12s;
}
.gcg-resize-divider--h::after {
  width: var(--gcg-resize-divider-handle-length);
  height: var(--gcg-resize-divider-handle-thickness);
}
.gcg-resize-divider--v::after {
  width: var(--gcg-resize-divider-handle-thickness);
  height: var(--gcg-resize-divider-handle-length);
}
.gcg-resize-divider:hover::after,
.gcg-resize-divider:focus-visible::after,
.gcg-resize-divider.dragging::after {
  background: var(--gcg-resize-divider-active);
}
.gcg-resize-divider:focus-visible {
  outline: 1px solid var(--gcg-resize-divider-active);
  outline-offset: -1px;
}
.gcg-field-row {
  display: grid;
  grid-template-columns: var(--gcg-field-label-width) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--gcg-field-column-gap);
  row-gap: var(--gcg-field-row-gap);
  min-height: var(--gcg-control-height);
  margin: 0;
}
.gcg-field-label {
  margin: 0;
  color: var(--c-text-faint);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.gcg-field-help {
  grid-column: 2;
  margin: 2px 0 0;
  color: var(--c-text-faint);
  font-size: calc(11.5px * var(--fs-body, 1));
  line-height: 1.35;
}
.gcg-field-help a {
  color: var(--c-game-activate);
  text-decoration: underline;
}
.gcg-field-help a:hover,
.gcg-field-help a:focus-visible {
  filter: brightness(1.18);
}
.gcg-field-help:empty {
  display: none;
}
.gcg-field-under {
  grid-column: 2;
}
.gcg-field-help--error {
  color: var(--c-danger-2);
}
.gcg-input[aria-invalid=true] {
  border-color: var(--c-danger);
}
.gcg-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcg-control-gap);
  min-width: 0;
}
.gcg-segmented {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  padding: 2px;
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--r-loz) + 3px);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .5);
}
.gcg-segmented--v {
  flex-direction: column;
}
.gcg-segmented--v > button {
  text-align: center;
}
.gcg-segmented > button {
  --c: var(--c-toggle-on);
  min-width: 0;
  min-height: 22px;
  padding: 4px 7px 2px;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-loz);
  cursor: pointer;
  font: 600 11px/1.15 var(--font-body);
  font-size: calc(var(--btn-fs, 12px) - 1px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background .1s ease,
    color .1s ease,
    border-color .1s ease,
    box-shadow .12s ease;
}
.gcg-segmented > button:hover:not(:disabled):not([aria-pressed=true]):not(.on) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-text-hi);
  background: var(--c-ctrl-2);
}
.gcg-segmented > button[aria-pressed=true],
.gcg-segmented > button.on,
.gcg-segmented > button[aria-pressed=true]:not(:disabled),
.gcg-segmented > button.on:not(:disabled),
.gcg-menu-pressed .gcg-menu-row.on {
  color: var(--c-on-accent);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .38), 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-segmented > button[aria-pressed=true]:hover:not(:disabled),
.gcg-segmented > button.on:hover:not(:disabled),
.gcg-menu-pressed .gcg-menu-row.on:hover {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .5), 0 0 13px color-mix(in srgb, var(--c) 48%, transparent);
}
.gcg-segmented > button[aria-pressed=true].p1,
.gcg-segmented > button.on.p1 {
  --c: var(--p1, var(--c-accent));
}
.gcg-segmented > button[aria-pressed=true].p2,
.gcg-segmented > button.on.p2 {
  --c: var(--p2, var(--c-toggle-on));
  color: var(--c-on-danger);
}
.gcg-segmented > button:disabled {
  opacity: 0.35;
}
.gcg-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  min-width: 0;
}
.gcg-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-ctrl);
  color: var(--c-text-dim);
  cursor: pointer;
}
.gcg-thumb > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gcg-thumb-label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gcg-thumb:hover {
  border-color: var(--c-border-strong);
  background: var(--c-ctrl-2);
  color: var(--c-text);
}
.gcg-thumb[aria-pressed=true] {
  border-color: var(--c-accent);
  background: var(--c-ctrl-hi);
  color: var(--c-text-hi);
}
.gcg-thumb[aria-pressed=true]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--c-accent);
  pointer-events: none;
}
.gcg-btn,
.gcg-action {
  --c: hsl(0 0% 46%);
  --ink: var(--c-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--gcg-control-height);
  padding: calc(var(--gcg-control-pad-y) + 1px) 8px calc(var(--gcg-control-pad-y) - 1px);
  font: 600 var(--btn-fs, 12px)/1.15 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background-image: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: var(--gcg-control-radius);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .11),
    inset 0 -1px 0 hsl(0 0% 0% / .40),
    0 1px 2px hsl(0 0% 0% / .45);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-image .11s ease,
    border-color .11s ease,
    color .11s ease,
    box-shadow .13s ease,
    translate .08s ease;
}
.gcg-btn:hover:not(:disabled),
.gcg-action:hover:not(:disabled) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-text-hi);
  background-image: var(--ctrl-face-hover);
  border-color: var(--c-border-strong);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .17),
    inset 0 -1px 0 hsl(0 0% 0% / .40),
    0 1px 2px hsl(0 0% 0% / .45),
    0 0 13px color-mix(in srgb, var(--c) 34%, transparent);
}
.gcg-btn:active:not(:disabled),
.gcg-action:active:not(:disabled) {
  filter: none;
  translate: 0 1px;
  color: var(--c-text-hi);
  background-image: var(--ctrl-face-active);
  border-color: var(--c-border-strong);
  box-shadow:
    inset 0 2px 3px hsl(0 0% 0% / .5),
    inset 0 -1px 0 hsl(0 0% 100% / .07),
    0 0 9px color-mix(in srgb, var(--c) 26%, transparent);
}
.gcg-btn:disabled,
.gcg-action:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .07);
}
.gcg-btn--fill {
  color: var(--ink);
  font-weight: 700;
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .40),
    inset 0 -1px 0 hsl(0 0% 0% / .28),
    0 1px 2px hsl(0 0% 0% / .5);
}
.gcg-btn--fill:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .55),
    inset 0 -1px 0 hsl(0 0% 0% / .22),
    0 1px 2px hsl(0 0% 0% / .5),
    0 0 16px color-mix(in srgb, var(--c) 55%, transparent);
}
.gcg-btn--fill:active:not(:disabled) {
  translate: 0 1px;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-active-top, 90%), #000) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-active-mid, 68%), #fff) 60%,
      color-mix(in srgb, var(--c) var(--mix-fill-active-bottom, 58%), #fff) 100%);
  box-shadow:
    inset 0 2px 4px hsl(0 0% 0% / .38),
    inset 0 -1px 0 hsl(0 0% 100% / .28),
    0 0 11px color-mix(in srgb, var(--c) 42%, transparent);
}
.gcg-btn--quiet {
  color: var(--c);
  border-color: color-mix(in srgb, var(--c) 52%, var(--c-border));
  background-image: var(--ctrl-lift), linear-gradient(color-mix(in srgb, var(--c) 15%, var(--c-ctrl-2)), color-mix(in srgb, var(--c) 15%, var(--c-ctrl-2)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c) 22%, transparent),
    inset 0 -1px 0 hsl(0 0% 0% / .35),
    0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-btn--quiet:hover:not(:disabled) {
  color: color-mix(in srgb, var(--c) 62%, #fff);
  border-color: var(--c);
  background-image: var(--ctrl-lift), linear-gradient(color-mix(in srgb, var(--c) 28%, var(--c-ctrl-2)), color-mix(in srgb, var(--c) 28%, var(--c-ctrl-2)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c) 34%, transparent),
    inset 0 -1px 0 hsl(0 0% 0% / .35),
    0 1px 2px hsl(0 0% 0% / .45),
    0 0 14px color-mix(in srgb, var(--c) 34%, transparent);
}
.gcg-btn--quiet:active:not(:disabled) {
  translate: 0 1px;
  box-shadow: inset 0 2px 4px hsl(0 0% 0% / .42), 0 0 10px color-mix(in srgb, var(--c) 26%, transparent);
}
.gcg-btn--ghost {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
}
.gcg-btn--ghost:hover:not(:disabled) {
  color: var(--c-text-hi);
  background-image: var(--ctrl-face);
  border-color: var(--c-border-subtle);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .09), 0 1px 2px hsl(0 0% 0% / .4);
}
.gcg-btn--ghost:active:not(:disabled) {
  translate: 0 1px;
  background-image: var(--ctrl-face-active);
  box-shadow: inset 0 2px 3px hsl(0 0% 0% / .45);
}
.gcg-btn.gcg-disclosure {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--gcg-control-gap);
  height: var(--gcg-tier-lock-icon-size);
  min-height: 0;
  padding: 0;
  border: 0;
  line-height: 1;
}
.gcg-disclosure::before,
.gcg-disclosure::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--c-border);
}
.gcg-disclosure svg {
  width: var(--gcg-tier-lock-icon-size);
  height: var(--gcg-tier-lock-icon-size);
}
.gcg-disclosure[aria-expanded=true] svg {
  rotate: 180deg;
}
.gcg-btn--ok {
  --c: var(--c-commit);
  --ink: var(--c-on-commit);
}
.gcg-btn--pri {
  --c: var(--c-accent);
  --ink: var(--c-on-accent);
}
.gcg-btn--dgr {
  --c: var(--c-danger);
  --ink: var(--c-on-danger);
}
.gcg-btn--warn {
  --c: var(--c-warn);
  --ink: var(--c-on-warn);
}
.gcg-btn--block,
.gcg-action--block {
  width: 100%;
}
.gcg-btn--sm {
  min-height: var(--gcg-control-height-sm);
  padding: 3px 7px 1px;
  font-size: calc(var(--btn-fs, 12px) - 1.5px);
}
.gcg-btn--touch {
  min-height: var(--gcg-control-height-touch);
  padding: 8px 12px 6px;
  font-size: calc(var(--btn-fs, 12px) + 1px);
}
.gcg-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.gcg-back-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 480px) {
  .gcg-back {
    width: var(--gcg-control-height-touch);
    min-width: var(--gcg-control-height-touch);
    min-height: var(--gcg-control-height-touch);
    padding-inline: 0;
  }
  .gcg-back-label {
    display: none;
  }
}
.gcg-btn--load {
  position: relative;
  overflow: hidden;
  cursor: progress;
}
.gcg-btn--load::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220%;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      transparent 35%,
      color-mix(in srgb, var(--c-white, #fff) 22%, transparent) 50%,
      transparent 65%);
  animation: gcg-btn-sheen 1.5s linear infinite;
}
@keyframes gcg-btn-sheen {
  from {
    transform: translateX(-70.909%);
  }
  to {
    transform: translateX(70.909%);
  }
}
.gcg-segmented.is-disabled,
.gcg-number-row.is-disabled {
  opacity: 0.45;
}
.gcg-segmented > button:disabled,
.gcg-checkbox input:disabled,
.gcg-number-stepper input:disabled,
.gcg-number-field input:disabled {
  cursor: default;
}
.gcg-segmented > button:focus-visible,
.gcg-thumb:focus-visible,
.gcg-btn:focus-visible,
.gcg-action:focus-visible,
.gcg-ico:focus-visible,
.gcg-tab:focus-visible,
.gcg-input:focus-visible,
.gcg-select:focus-visible,
.gcg-checkbox:has(input:focus-visible),
.gcg-number-stepper:has(:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.gcg-check-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: var(--gcg-control-gap);
  min-width: 0;
}
.gcg-check-group > .gcg-checkbox {
  justify-content: center;
  text-align: center;
}
.gcg-check-group > .gcg-checkbox > .gcg-tbi {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-left: 3px;
}
.gcg-checkbox {
  --c: var(--c-toggle-on);
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: var(--gcg-control-height);
  padding: calc(var(--gcg-control-pad-y) + 1px) 12px calc(var(--gcg-control-pad-y) - 1px);
  color: var(--c-text-dim);
  background-image: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--gcg-control-height) / 2);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .11), 0 1px 2px hsl(0 0% 0% / .4);
  cursor: pointer;
  font: 600 12px/1.15 var(--font-body);
  font-size: var(--btn-fs, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
  transition:
    background-image .11s ease,
    border-color .11s ease,
    color .11s ease,
    box-shadow .12s ease;
}
.gcg-checkbox:hover:has(input:not(:disabled)) {
  color: var(--c-text-hi);
  background-image: var(--ctrl-face-hover);
  border-color: color-mix(in srgb, var(--c) 60%, #fff);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .11),
    inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent),
    0 0 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.gcg-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.gcg-checkbox--swatch {
  gap: 7px;
}
.gcg-checkbox--swatch input {
  width: 9px;
  height: 9px;
  background: var(--c-field);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--c-border-strong));
  border-radius: 50%;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .5);
  cursor: pointer;
  translate: 0 -1px;
  transition:
    background .1s ease,
    border-color .1s ease,
    box-shadow .12s ease;
}
.gcg-checkbox--swatch input:checked {
  background: var(--c);
  border-color: var(--c);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .35), 0 0 6px color-mix(in srgb, var(--c) 65%, transparent);
}
.gcg-checkbox:not(.gcg-checkbox--swatch):has(input:checked) {
  color: var(--c-on-accent);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .38), 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-checkbox:not(.gcg-checkbox--swatch):has(input:checked):hover {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-on-accent);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .5),
    inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, #fff),
    0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
}
.gcg-checkbox--swatch:has(input:checked) {
  color: var(--c-text-hi);
  border-color: color-mix(in srgb, var(--c) 42%, var(--c-border));
  background-image: var(--ctrl-lift), linear-gradient(color-mix(in srgb, var(--c) 16%, var(--c-ctrl-3)), color-mix(in srgb, var(--c) 16%, var(--c-ctrl-3)));
}
.gcg-checkbox--swatch:has(input:checked):hover {
  border-color: color-mix(in srgb, var(--c) 62%, var(--c-border));
  background-image: var(--ctrl-lift), linear-gradient(color-mix(in srgb, var(--c) 26%, var(--c-ctrl-3)), color-mix(in srgb, var(--c) 26%, var(--c-ctrl-3)));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .14), 0 0 13px color-mix(in srgb, var(--c) 30%, transparent);
}
.gcg-checkbox:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}
.gcg-checkbox--indicator {
  gap: 7px;
}
.gcg-checkbox--indicator input {
  margin-right: -7px;
}
.gcg-checkbox-indicator {
  display: grid;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  place-items: center;
  translate: 0 -1px;
}
.gcg-checkbox-indicator svg {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}
.gcg-checkbox-indicator-on {
  display: none;
}
.gcg-checkbox--indicator:has(input:checked) .gcg-checkbox-indicator-off {
  display: none;
}
.gcg-checkbox--indicator:has(input:checked) .gcg-checkbox-indicator-on {
  display: block;
  scale: 1.1;
}
.gcg-checkbox--touch {
  min-height: var(--gcg-control-height-touch);
  border-radius: calc(var(--gcg-control-height-touch) / 2);
  padding: 8px 10px 6px;
  font-size: calc(var(--btn-fs, 12px) + 1px);
}
.gcg-checkbox--swatch.gcg-checkbox--touch input {
  width: 17px;
  height: 17px;
}
.gcg-number-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.gcg-number-field {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--c-text-faint);
  font-size: calc(10px * var(--fs-body, 1));
}
.gcg-number-label {
  white-space: nowrap;
}
.gcg-number-stepper {
  display: grid;
  grid-template-columns: 18px 30px 18px;
  min-width: 66px;
  min-height: var(--gcg-control-height);
  overflow: hidden;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--gcg-control-radius);
  box-shadow: 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-number-stepper .gcg-number-step,
.gcg-slider .gcg-number-step {
  min-width: 0;
  min-height: calc(var(--gcg-control-height) - 2px);
  padding: 0;
  color: var(--c-text-dim);
  background-image:
    linear-gradient(
      180deg,
      var(--c-ctrl-3),
      var(--c-panel-3));
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .09);
  cursor: pointer;
  font: 700 13px/1 var(--font-body);
  font-size: calc(var(--btn-fs, 12px) + 1px);
}
.gcg-number-stepper .gcg-number-step:hover:not(:disabled),
.gcg-slider .gcg-number-step:hover:not(:disabled) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-text-hi);
  background-image:
    linear-gradient(
      180deg,
      var(--c-ctrl-hi),
      var(--c-ctrl-2));
}
.gcg-number-stepper .gcg-number-step:disabled,
.gcg-slider .gcg-number-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.gcg-slider {
  display: grid;
  grid-template-columns: 18px minmax(80px, 1fr) auto 18px;
  align-items: stretch;
  min-width: 160px;
  min-height: var(--gcg-control-height);
  overflow: hidden;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--gcg-control-radius);
  box-shadow: 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-slider.is-disabled {
  opacity: var(--gcg-disabled-opacity, .45);
}
.gcg-slider:has(:focus-visible) {
  outline: 1px solid var(--c-accent);
  outline-offset: 1px;
}
.gcg-slider-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 8px;
  background: var(--c-field);
  border-left: 1px solid var(--c-border);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  outline: 0;
  cursor: pointer;
}
.gcg-slider-track::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      var(--c-text-dim) var(--gcg-slider-fill, 0%),
      var(--c-border) var(--gcg-slider-fill, 0%));
}
.gcg-slider-track::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--c-border);
}
.gcg-slider-track::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--c-text-dim);
}
.gcg-slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--c-text-hi);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-slider-track::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-text-hi);
  border: 1px solid var(--c-border);
}
.gcg-slider-track:hover::-webkit-slider-thumb {
  filter: brightness(1.15);
}
.gcg-slider-track:disabled {
  cursor: default;
}
.gcg-slider-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 6px;
  color: var(--c-text);
  background: var(--c-field);
  border-inline: 1px solid var(--c-border);
  font: 400 11.5px/1 var(--mono);
  font-size: calc(11.5px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
}
.gcg-slider-input {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 38px;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-inline: 1px solid var(--c-border);
  border-radius: 0;
  outline: 0;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  text-align: center;
}
.gcg-slider-input::-webkit-inner-spin-button,
.gcg-slider-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.gcg-slider-input:disabled {
  cursor: default;
}
.gcg-slider--touch {
  grid-template-columns: 24px minmax(100px, 1fr) auto 24px;
  min-height: var(--gcg-control-height-touch);
}
.gcg-slider--touch .gcg-number-step {
  min-height: calc(var(--gcg-control-height-touch) - 2px);
  font-size: calc(var(--btn-fs, 12px) + 3px);
}
.gcg-slider--touch .gcg-slider-track::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
}
.gcg-number-stepper input,
.gcg-number-field input {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 30px;
  min-width: 0;
  min-height: calc(var(--gcg-control-height) - 2px);
  padding: 0 2px;
  color: var(--c-text);
  background: var(--c-field);
  border: 0;
  border-inline: 1px solid var(--c-border);
  border-radius: 0;
  outline: 0;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  font: 400 11.5px/1 var(--mono);
  font-size: calc(11.5px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gcg-number-stepper input::-webkit-inner-spin-button,
.gcg-number-stepper input::-webkit-outer-spin-button,
.gcg-number-field input::-webkit-inner-spin-button,
.gcg-number-field input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.gcg-number-stepper--formatted {
  grid-template-columns: 18px auto 18px;
}
.gcg-number-stepper--formatted input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.gcg-number-stepper--formatted .gcg-number-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 8px;
  color: var(--c-text);
  background: var(--c-field);
  border-inline: 1px solid var(--c-border);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  font: 400 11.5px/1 var(--mono);
  font-size: calc(11.5px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gcg-number-stepper--formatted.gcg-number-stepper--touch {
  grid-template-columns: 24px auto 24px;
}
.gcg-number-stepper .gcg-number-step:has(.gcg-number-step-icon) {
  display: grid;
  place-items: center;
}
.gcg-number-stepper--touch {
  grid-template-columns: 24px 34px 24px;
  min-width: 84px;
  min-height: var(--gcg-control-height-touch);
}
.gcg-number-stepper--touch .gcg-number-step {
  min-height: calc(var(--gcg-control-height-touch) - 2px);
  font-size: calc(var(--btn-fs, 12px) + 3px);
}
.gcg-number-stepper--touch input {
  width: 34px;
  min-height: calc(var(--gcg-control-height-touch) - 2px);
  font-size: calc(13px * var(--fs-mono, 1));
}
.gcg-ico {
  --c: hsl(0 0% 46%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--gcg-control-height);
  height: var(--gcg-control-height);
  padding: 0;
  color: var(--c-text-dim);
  background-image: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: var(--r-s);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .11),
    inset 0 -1px 0 hsl(0 0% 0% / .40),
    0 1px 2px hsl(0 0% 0% / .45);
  cursor: pointer;
  transition:
    background-image .11s ease,
    border-color .11s ease,
    color .11s ease,
    box-shadow .13s ease,
    translate .08s ease;
}
.gcg-ico svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gcg-ico:hover:not(:disabled) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-text-hi);
  background-image: var(--ctrl-face-hover);
  border-color: var(--c-border-strong);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .17),
    inset 0 -1px 0 hsl(0 0% 0% / .40),
    0 1px 2px hsl(0 0% 0% / .45),
    0 0 13px color-mix(in srgb, var(--c) 34%, transparent);
}
.gcg-ico:active:not(:disabled) {
  filter: none;
  translate: 0 1px;
  box-shadow: inset 0 2px 3px hsl(0 0% 0% / .5);
}
.gcg-ico:disabled {
  opacity: 0.4;
  cursor: default;
}
.gcg-ico--wide {
  width: auto;
  padding: 1px 10px 0 8px;
  font: 600 11px/1 var(--font-body);
  font-size: calc(var(--btn-fs, 12px) - 1px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gcg-ico--on {
  --c: var(--c-toggle-on);
  color: var(--c-on-accent);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .38), 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-ico--on:hover:not(:disabled) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-on-accent);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 55%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .5), 0 0 13px color-mix(in srgb, var(--c) 48%, transparent);
}
.gcg-ico--close {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
}
.gcg-ico--close:hover:not(:disabled) {
  filter: brightness(calc(var(--hover-brightness, 1.18) / 1.18));
  color: var(--c-text-hi);
  background-image: var(--ctrl-face);
  border-color: var(--c-border-subtle);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .09);
}
.gcg-ico--close:active:not(:disabled) {
  translate: 0 1px;
  background-image: var(--ctrl-face-active);
  box-shadow: inset 0 2px 3px hsl(0 0% 0% / .45);
}
.gcg-ico--touch {
  width: var(--gcg-control-height-touch);
  height: var(--gcg-control-height-touch);
}
.gcg-ico--touch svg {
  width: 17px;
  height: 17px;
}
.gcg-tabs {
  display: flex;
  gap: 0;
  padding: 7px 9px 0;
  border-bottom: 1px solid var(--c-border-subtle);
}
.gcg-tab {
  --gcg-tab-ink: var(--gcg-tab-ink-rest);
  --gcg-tab-arc: calc(var(--gcg-tab-radius) - .5px);
  --gcg-tab-xc: calc(var(--gcg-tab-slant) + 1.031 * var(--gcg-tab-arc) - .25 * var(--gcg-tab-radius));
  --gcg-tab-xr: round(up, var(--gcg-tab-xc), 1px);
  --gcg-tab-yb: round(down, calc(var(--gcg-tab-radius) - .243 * var(--gcg-tab-arc)), 1px);
  --gcg-tab-bw: round(nearest, calc(var(--gcg-tab-slant) - .25 * var(--gcg-tab-yb)), 1px);
  --gcg-tab-al: calc(var(--gcg-tab-bw) - 1px);
  --gcg-tab-aw: calc(var(--gcg-tab-xr) - var(--gcg-tab-al));
  --gcg-tab-ax: calc(var(--gcg-tab-xc) - var(--gcg-tab-al));
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex: 1 1 0;
  padding: 6px calc(var(--gcg-tab-slant) + 4px) 10px;
  margin-bottom: -1px;
  color: var(--gcg-tab-label);
  border: 0;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--gcg-tab-cr, 0px)) 100%, var(--gcg-tab-cl, 0px) 100%);
  cursor: pointer;
  font: 600 13px/1.15 var(--font-body);
  font-size: calc(13px * var(--fs-body, 1));
  letter-spacing: 0.02em;
  text-align: center;
  user-select: none;
  transition: color .1s ease;
}
.gcg-tab + .gcg-tab {
  margin-left: calc(-1 * var(--gcg-tab-slant));
}
.gcg-tab:nth-child(1) {
  z-index: 8;
}
.gcg-tab:nth-child(2) {
  z-index: 7;
}
.gcg-tab:nth-child(3) {
  z-index: 6;
}
.gcg-tab:nth-child(4) {
  z-index: 5;
}
.gcg-tab:nth-child(5) {
  z-index: 4;
}
.gcg-tab:nth-child(6) {
  z-index: 3;
}
.gcg-tab:nth-child(7) {
  z-index: 2;
}
.gcg-tab:not(:is(:disabled, [aria-disabled=true])) + .gcg-tab:not(:is(.on, [aria-selected=true])),
.gcg-tab + .gcg-tab:is(:disabled, [aria-disabled=true]) {
  --gcg-tab-cl: var(--gcg-tab-slant);
}
.gcg-tab:not(:is(.on, [aria-selected=true])):has(+ .gcg-tab:is(.on, [aria-selected=true])),
.gcg-tab:is(:disabled, [aria-disabled=true]):has(+ .gcg-tab:not(:is(:disabled, [aria-disabled=true]))) {
  --gcg-tab-cr: var(--gcg-tab-slant);
}
.gcg-tab::before,
.gcg-tab::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.gcg-tab::after {
  z-index: -1;
  inset: 0;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--gcg-tab-ink), var(--gcg-tab-ink)),
    radial-gradient(
      circle at var(--gcg-tab-ax) var(--gcg-tab-radius),
      transparent calc(var(--gcg-tab-arc) - .75px),
      var(--gcg-tab-ink) calc(var(--gcg-tab-arc) - .25px),
      var(--gcg-tab-ink) calc(var(--gcg-tab-arc) + .25px),
      transparent calc(var(--gcg-tab-arc) + .75px)),
    radial-gradient(
      circle at calc(100% - var(--gcg-tab-ax)) var(--gcg-tab-radius),
      transparent calc(var(--gcg-tab-arc) - .75px),
      var(--gcg-tab-ink) calc(var(--gcg-tab-arc) - .25px),
      var(--gcg-tab-ink) calc(var(--gcg-tab-arc) + .25px),
      transparent calc(var(--gcg-tab-arc) + .75px)),
    linear-gradient(
      to bottom right,
      transparent calc(50% - .75px),
      var(--gcg-tab-ink) calc(50% - .25px),
      var(--gcg-tab-ink) calc(50% + .25px),
      transparent calc(50% + .75px)),
    linear-gradient(
      to top right,
      transparent calc(50% - .75px),
      var(--gcg-tab-ink) calc(50% - .25px),
      var(--gcg-tab-ink) calc(50% + .25px),
      transparent calc(50% + .75px));
  background-size:
    calc(100% - 2 * var(--gcg-tab-xr)) 1px,
    var(--gcg-tab-aw) var(--gcg-tab-yb),
    var(--gcg-tab-aw) var(--gcg-tab-yb),
    var(--gcg-tab-bw) calc(100% - var(--gcg-tab-yb)),
    var(--gcg-tab-bw) calc(100% - var(--gcg-tab-yb));
  background-position:
    var(--gcg-tab-xr) 0,
    var(--gcg-tab-al) 0,
    right var(--gcg-tab-al) top 0,
    left 0 top var(--gcg-tab-yb),
    right 0 top var(--gcg-tab-yb);
}
.gcg-tab:hover:not(.on):not([aria-selected=true]) {
  --gcg-tab-ink: var(--c-text-hi);
  color: var(--c-text-hi);
}
.gcg-tab.gcg-tab:disabled,
.gcg-tab.gcg-tab[aria-disabled=true] {
  z-index: 0;
  opacity: var(--gcg-tab-disabled-opacity);
  cursor: not-allowed;
}
.gcg-tab:disabled:hover:not(.on),
.gcg-tab[aria-disabled=true]:hover:not(.on) {
  --gcg-tab-ink: var(--gcg-tab-ink-rest);
  color: var(--gcg-tab-label);
}
.gcg-tab.gcg-tab.on,
.gcg-tab.gcg-tab[aria-selected=true] {
  --gcg-tab-ink: var(--gcg-tab-ink-on);
  z-index: 10;
  clip-path: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--gcg-tab-fill), var(--gcg-tab-fill)),
    linear-gradient(var(--gcg-tab-fill), var(--gcg-tab-fill)),
    radial-gradient(
      circle at var(--gcg-tab-ax) var(--gcg-tab-radius),
      var(--gcg-tab-fill) calc(var(--gcg-tab-arc) - .5px),
      transparent calc(var(--gcg-tab-arc) + .5px)),
    radial-gradient(
      circle at calc(100% - var(--gcg-tab-ax)) var(--gcg-tab-radius),
      var(--gcg-tab-fill) calc(var(--gcg-tab-arc) - .5px),
      transparent calc(var(--gcg-tab-arc) + .5px)),
    linear-gradient(
      to bottom right,
      transparent calc(50% - .5px),
      var(--gcg-tab-fill) calc(50% + .5px)),
    linear-gradient(
      to bottom left,
      transparent calc(50% - .5px),
      var(--gcg-tab-fill) calc(50% + .5px));
  background-size:
    calc(100% - 2 * var(--gcg-tab-xr)) var(--gcg-tab-yb),
    calc(100% - 2 * var(--gcg-tab-bw)) calc(100% - var(--gcg-tab-yb)),
    var(--gcg-tab-aw) var(--gcg-tab-yb),
    var(--gcg-tab-aw) var(--gcg-tab-yb),
    var(--gcg-tab-bw) calc(100% - var(--gcg-tab-yb)),
    var(--gcg-tab-bw) calc(100% - var(--gcg-tab-yb));
  background-position:
    var(--gcg-tab-xr) 0,
    var(--gcg-tab-bw) var(--gcg-tab-yb),
    var(--gcg-tab-al) 0,
    right var(--gcg-tab-al) top 0,
    left 0 top var(--gcg-tab-yb),
    right 0 top var(--gcg-tab-yb);
  color: var(--c-text-hi);
  text-shadow: 0 0 6px color-mix(in srgb, var(--gcg-tab-ink-on) 70%, transparent), 0 0 14px color-mix(in srgb, var(--gcg-tab-ink-on) 35%, transparent);
}
.gcg-tab.on::after,
.gcg-tab[aria-selected=true]::after {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gcg-tab-ink-on) 80%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--gcg-tab-ink-on) 40%, transparent));
}
.gcg-tab.on::before,
.gcg-tab[aria-selected=true]::before {
  left: calc(-1 * var(--gcg-tab-trail));
  right: calc(-1 * var(--gcg-tab-trail));
  bottom: -4px;
  height: 9px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(
      to left,
      var(--gcg-tab-ink-on),
      transparent),
    linear-gradient(
      to right,
      var(--gcg-tab-ink-on),
      transparent);
  background-size: var(--gcg-tab-trail) 1px, var(--gcg-tab-trail) 1px;
  background-position: left center, right center;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gcg-tab-ink-on) 80%, transparent));
  -webkit-mask:
    linear-gradient(
      to right,
      #000 var(--gcg-tab-trail),
      transparent var(--gcg-tab-trail),
      transparent calc(100% - var(--gcg-tab-trail)),
      #000 calc(100% - var(--gcg-tab-trail)));
  mask:
    linear-gradient(
      to right,
      #000 var(--gcg-tab-trail),
      transparent var(--gcg-tab-trail),
      transparent calc(100% - var(--gcg-tab-trail)),
      #000 calc(100% - var(--gcg-tab-trail)));
}
.gcg-tabs--glass {
  border-bottom-color: transparent;
}
.gcg-tabs--glass .gcg-tab {
  --gcg-tab-fill: transparent;
}
.gcg-tabs--glass .gcg-tab.on::before,
.gcg-tabs--glass .gcg-tab[aria-selected=true]::before {
  background-image:
    linear-gradient(
      to left,
      var(--gcg-tab-ink-on),
      transparent),
    linear-gradient(
      to right,
      var(--gcg-tab-ink-on),
      transparent),
    linear-gradient(var(--c-border-subtle), var(--c-border-subtle)),
    linear-gradient(var(--c-border-subtle), var(--c-border-subtle));
  background-size:
    var(--gcg-tab-trail) 1px,
    var(--gcg-tab-trail) 1px,
    var(--gcg-tab-trail) 1px,
    var(--gcg-tab-trail) 1px;
  background-position:
    left center,
    right center,
    left center,
    right center;
}
.gcg-tab-n {
  display: inline-block;
  margin-left: 5px;
  color: var(--c-text-faint);
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.gcg-tab.on .gcg-tab-n,
.gcg-tab[aria-selected=true] .gcg-tab-n {
  color: var(--c-accent);
}
.gcg-input {
  min-height: var(--gcg-control-height);
  padding: 0 8px;
  color: var(--c-text);
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: var(--r-s);
  outline: 0;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  font: 400 13.5px/1.2 var(--font-body);
  font-size: calc(13.5px * var(--fs-body, 1));
  transition: border-color .1s ease, box-shadow .1s ease;
}
.gcg-input::placeholder {
  color: var(--c-text-faint);
}
.gcg-input:hover:not(:disabled):not(:focus) {
  border-color: var(--c-border-strong);
}
.gcg-input:focus {
  border-color: var(--c-accent);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45), 0 0 0 2px color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.gcg-input:disabled {
  opacity: 0.42;
  cursor: default;
}
.gcg-input--mono {
  font-family: var(--mono);
  font-size: calc(12px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
}
.gcg-input--touch {
  min-height: var(--gcg-control-height-touch);
  font-size: calc(14.5px * var(--fs-body, 1));
}
textarea.gcg-input {
  min-height: 66px;
  padding: 6px 8px;
  resize: vertical;
  font-family: var(--mono);
  font-size: calc(11.5px * var(--fs-mono, 1));
  line-height: 1.45;
}
.gcg-search {
  position: relative;
  display: inline-flex;
}
.gcg-search > svg {
  position: absolute;
  left: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 13px;
  height: 13px;
  color: var(--c-text-faint);
  stroke-linecap: round;
  pointer-events: none;
}
.gcg-search .gcg-input {
  padding-left: 26px;
}
.gcg-search--clearable .gcg-input {
  padding-right: calc(var(--gcg-control-height) + var(--gcg-control-gap));
}
.gcg-search .gcg-search-clear {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--gcg-control-height);
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
}
.gcg-search .gcg-search-clear[hidden] {
  display: none;
}
.gcg-search-clear svg {
  width: var(--gcg-tier-lock-icon-size);
  height: var(--gcg-tier-lock-icon-size);
}
.gcg-selwrap {
  position: relative;
  display: inline-flex;
}
.gcg-selwrap > svg {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 13px;
  height: 13px;
  color: var(--c-text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.gcg-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--gcg-control-height);
  align-items: center;
  padding: 0 26px 0 8px;
  color: var(--c-text);
  background-color: var(--c-field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-s);
  outline: 0;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
  cursor: pointer;
  font: 500 13.5px/1.2 var(--font-body);
  font-size: calc(13.5px * var(--fs-body, 1));
  transition: border-color .1s ease, box-shadow .1s ease;
}
.gcg-selwrap:has(> svg) > .gcg-select,
.gcg-selwrap > svg + .gcg-select {
  background-image: none;
}
.gcg-select:hover:not(:disabled) {
  border-color: var(--c-border-strong);
}
.gcg-select:focus {
  border-color: var(--c-accent);
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45), 0 0 0 2px color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.gcg-select:disabled {
  opacity: 0.42;
  cursor: default;
}
.gcg-select option {
  background: var(--c-panel);
  color: var(--c-text);
}
.gcg-select,
.gcg-select::picker(select) {
  appearance: base-select;
}
.gcg-select::picker-icon {
  display: none;
}
.gcg-select::picker(select) {
  margin-top: 4px;
  padding: 3px;
  background: var(--c-panel);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-m);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.gcg-select option {
  padding: 5px 9px;
  border-radius: var(--r-s);
  cursor: pointer;
}
.gcg-select option:hover,
.gcg-select option:focus {
  background: var(--c-panel-3);
  color: var(--c-text-hi);
}
.gcg-select option:checked {
  color: var(--c-text-hi);
  font-weight: 600;
}
.gcg-select option::checkmark {
  color: var(--c-toggle-on);
}
.gcg-menu {
  margin-top: 4px;
  padding: 3px;
  background: var(--c-panel);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-m);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.gcg-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  color: var(--c-text-dim);
  border-radius: var(--r-s);
  cursor: pointer;
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 500;
}
.gcg-menu-row:hover {
  background: var(--c-ctrl-2);
  color: var(--c-text-hi);
}
.gcg-menu-row.on {
  color: var(--c-accent);
}
.gcg-menu-row.on:hover {
  color: color-mix(in srgb, var(--c-accent) 62%, #fff);
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-ctrl-2));
}
.gcg-menu-pressed .gcg-menu-row {
  border: 1px solid transparent;
}
.gcg-menu-pressed .gcg-menu-row.on {
  --c: var(--c-toggle-on);
}
.gcg-menu-row .tick {
  font-family: var(--mono);
  font-size: calc(11px * var(--fs-mono, 1));
}
.gcg-soon {
  display: inline-block;
  padding: 2px 5px;
  color: var(--c-text-bright);
  background: color-mix(in srgb, var(--c-ink-dark) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-text-faint) 65%, var(--c-ink-dark));
  border-radius: 8px;
  font: 800 8px/normal var(--font-body);
  font-size: calc(8px * var(--fs-body, 1));
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.gcg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  color: var(--c-text-dim);
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font: 700 11.5px/1.55 var(--font-body);
  font-size: calc(11.5px * var(--fs-body, 1));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gcg-badge--sq {
  border-radius: var(--r-s);
}
.gcg-badge--tier {
  color: var(--c-warn);
  border-color: color-mix(in srgb, var(--c-warn) 50%, var(--c-border));
  background: color-mix(in srgb, var(--c-warn) 12%, var(--c-panel-2));
}
.gcg-badge--set {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.gcg-badge--wr {
  color: var(--c-ctx);
  border-color: color-mix(in srgb, var(--c-ctx) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-ctx) 10%, var(--c-panel-2));
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.gcg-badge--wr.lo {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-panel-2));
}
.gcg-badge--p1 {
  color: var(--c-on-accent);
  background: var(--p1, var(--c-accent));
  border-color: var(--p1, var(--c-accent));
}
.gcg-badge--p2 {
  color: var(--c-on-danger);
  background: var(--p2, var(--c-danger));
  border-color: var(--p2, var(--c-danger));
}
.gcg-badge--turn {
  color: var(--c-text-hi);
  background: var(--c-panel-3);
  border-color: var(--c-border-strong);
  font-family: var(--font-display);
  font-size: calc(10px * var(--fs-display, 1));
  font-weight: 900;
  letter-spacing: 0.6px;
}
.gcg-badge--count {
  padding: 1px 6px;
  color: var(--c-text-muted);
  border-radius: var(--r-s);
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
a.gcg-badge,
button.gcg-badge {
  cursor: pointer;
}
.gcg-account-tier-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.acct-badge {
  margin-left: 6px;
  background: color-mix(in srgb, var(--c-tier, var(--c-text-dim)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-tier, var(--c-border)) 55%, transparent);
}
.gcg-account-tier-mark .acct-badge {
  margin-left: 0;
}
.acct-badge.tier-1 {
  --c-tier: var(--c-tier-1);
}
.acct-badge.tier-2 {
  --c-tier: var(--c-tier-2);
}
.acct-badge.tier-3 {
  --c-tier: var(--c-tier-3);
}
.acct-rank {
  width: auto;
  height: 1.35em;
  margin-right: 5px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--c-app-bg) 60%, transparent));
}
.gcg-account-tier-mark .acct-rank {
  margin-right: 0;
}
.gcg-account-tier-mark--stacked {
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.gcg-account-tier-mark--stacked .acct-rank {
  height: 1.25em;
}
.acct-tier-word {
  font-family: var(--font-display);
  font-size: 0.55em;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
}
.acct-tier-word[data-tier="1"] {
  color: var(--c-tier-1);
}
.acct-tier-word[data-tier="2"] {
  color: var(--c-tier-2);
}
.acct-tier-word[data-tier="3"] {
  color: var(--c-tier-3);
}
.gcg-tier-lock {
  --c-tier: var(--c-tier-2);
  --gcg-tier-lock-surface: color-mix(in srgb, var(--c-tier) var(--gcg-tier-lock-tint), var(--gcg-tier-lock-surface-base));
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--gcg-tier-lock-gap);
  white-space: nowrap;
}
.gcg-tier-lock[data-tier="0"] {
  --c-tier: var(--c-tier-0);
}
.gcg-tier-lock[data-tier="1"] {
  --c-tier: var(--c-tier-1);
}
.gcg-tier-lock[data-tier="2"] {
  --c-tier: var(--c-tier-2);
}
.gcg-tier-lock[data-tier="3"] {
  --c-tier: var(--c-tier-3);
}
.gcg-tier-lock-icon.gcg-tbi {
  width: var(--gcg-tier-lock-icon-size);
  height: var(--gcg-tier-lock-icon-size);
  color: var(--c-tier);
  overflow: visible;
  filter: drop-shadow(0 0 var(--gcg-tier-lock-glow-near) var(--gcg-tier-lock-surface)) drop-shadow(0 0 var(--gcg-tier-lock-glow-far) var(--gcg-tier-lock-surface));
}
.acct-badge,
.gcg-tier-lock-lozenge {
  display: inline-block;
  vertical-align: baseline;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(8px * var(--fs-display, 1));
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--r-loz);
  white-space: nowrap;
  color: var(--c-tier, var(--c-text-hi));
  text-shadow: none;
}
.gcg-tier-lock-lozenge {
  background: var(--gcg-tier-lock-surface);
  border: 1px solid color-mix(in srgb, var(--c-tier) var(--gcg-tier-lock-border-tint), var(--gcg-tier-lock-surface-base));
}
.gcg-scrim {
  position: fixed;
  inset: 0;
  top: var(--gcg-viewport-top, 0px);
  left: var(--gcg-viewport-left, 0px);
  right: calc(100vw - var(--gcg-viewport-left, 0px) - var(--gcg-viewport-width, 100vw));
  bottom: calc(100dvh - var(--gcg-viewport-top, 0px) - var(--gcg-viewport-height, 100dvh));
  background: var(--scrim);
}
#optsBackdrop,
.sel-overlay {
  top: var(--gcg-viewport-top, 0px);
  left: var(--gcg-viewport-left, 0px);
  right: calc(100vw - var(--gcg-viewport-left, 0px) - var(--gcg-viewport-width, 100vw));
  bottom: calc(100dvh - var(--gcg-viewport-top, 0px) - var(--gcg-viewport-height, 100dvh));
}
.ui-dialog-overlay.gcg-scrim {
  width: var(--gcg-viewport-width, 100vw);
}
@supports (color: rgb(from red r g b / calc(alpha * 1))) {
  :root {
    --glass-modal-bg: rgb(from var(--glass-modal-tint) r g b / calc(1 - (1 - alpha) * var(--glass-t)));
    --glass-bg: rgb(from var(--glass-tint) r g b / calc(1 - (1 - alpha) * var(--glass-t)));
    --glass-bg-raised: rgb(from var(--glass-raised-tint) r g b / calc(1 - (1 - alpha) * var(--glass-t)));
    --surface-haze: rgb(from var(--surface-haze-tint) r g b / calc(1 - (1 - alpha) * var(--glass-t)));
  }
  html.glass-dark {
    --glass-t: 0.5;
  }
  html.glass-solid {
    --glass-t: 0;
  }
  html.glass-solid *,
  html.glass-solid *::before,
  html.glass-solid *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.glass-solid #seismoHost.stream-blur::after {
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
  }
}
.gcg-modal {
  background: var(--glass-modal-bg);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid hsl(0 0% 30% / .8);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .62);
  overflow: hidden;
}
.gcg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--gcg-modal-head-pad-y) var(--gcg-modal-head-pad-x);
  border-bottom: 1px solid hsl(0 0% 100% / .07);
}
.gcg-modal-title {
  color: var(--c-text-hi);
  font-family: var(--font-display);
  font-size: calc(12px * var(--fs-display, 1));
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.gcg-modal-body {
  padding: 13px 16px 15px;
  color: var(--c-text-dim);
  font-size: calc(13.5px * var(--fs-body, 1));
  font-weight: 400;
  line-height: 1.5;
}
.gcg-modal-body p {
  margin: 0 0 9px;
}
.gcg-modal-body p:last-child {
  margin: 0;
}
.gcg-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 14px 13px;
  border-top: 1px solid hsl(0 0% 100% / .07);
}
.gcg-modal--dlg {
  width: min(310px, 90vw);
}
.gcg-modal--dlg .gcg-dlg-t {
  margin: 0 0 6px;
  color: var(--c-text-hi);
  font: 700 16px/1.3 var(--font-body);
  font-size: calc(16px * var(--fs-body, 1));
}
.gcg-modal--dlg .gcg-modal-body {
  padding: 15px 16px 12px;
}
.gcg-tip-text {
  position: relative;
  display: grid;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1.4;
}
.gcg-tip-line {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--t-fade-fast, .4s) ease;
}
.gcg-tip-line.on {
  opacity: 1;
}
.gcg-tip-measure {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gcg-tip-line {
    transition: none;
  }
}
.gcg-tips {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  min-width: 0;
}
.gcg-tips > .gcg-modal-head {
  position: absolute;
  top: 5px;
  left: 9px;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.gcg-tips > .gcg-modal-head .gcg-modal-title {
  color: var(--c-text-faint);
  font-size: calc(9px * var(--fs-display, 1));
  letter-spacing: .12em;
}
.gcg-tips > .gcg-tip-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 4px 4px;
  text-align: center;
}
.gcg-tip-step {
  flex: none;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 6px;
  background: none;
  border: 0;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color .15s ease;
}
.gcg-tip-step:is(:hover, :focus-visible) {
  color: var(--c-text-hi);
  outline: none;
}
.gcg-tip-step .g {
  display: inline-flex;
}
.gcg-tip-step svg {
  width: 20px;
  height: 20px;
  display: block;
}
.gcg-grp {
  padding: var(--group-pad, 11px);
  background: var(--surface-haze, rgba(255, 255, 255, 0.025));
  border: 1px solid var(--c-border);
  border-radius: var(--r-l);
}
.gcg-grp-t {
  margin: 0 0 10px;
  color: var(--c-text-muted);
  font-family: var(--font-display);
  font-size: calc(10px * var(--fs-display, 1));
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.gcg-field-row > .gcg-checkbox,
.gcg-field-row > .gcg-number-stepper {
  justify-self: start;
}
.gcg-field-row > .gcg-segmented {
  display: flex;
}
.gcg-field-row > .gcg-segmented--dev-account {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gcg-field-row > .gcg-segmented--dev-account > button {
  grid-column: span 2;
  min-width: 0;
}
.gcg-field-row > .gcg-segmented--dev-account > button:nth-child(n+4) {
  grid-column: span 3;
}
.gcg-field-row > .gcg-segmented > button {
  flex: 1 1 0;
  min-width: max-content;
}
.gcg-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: var(--r-l);
}
.gcg-list > .gcg-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background .1s ease;
}
.gcg-list > .gcg-row:hover {
  background: var(--c-panel-3);
}
.gcg-list > .gcg-row.sel {
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-panel-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.gcg-list > .gcg-row.sel:hover {
  background: color-mix(in srgb, var(--c-accent) 22%, var(--c-panel-3));
}
.gcg-list > .gcg-row.gcg-row--empty,
.gcg-list > .gcg-row.gcg-row--empty:hover {
  cursor: default;
  background: transparent;
  border: var(--slot-empty-border, 1px dotted color-mix(in srgb, var(--c-border) 55%, transparent));
  box-sizing: border-box;
}
.gcg-list .gcg-row-main {
  min-width: 0;
}
.gcg-list .gcg-row-n {
  color: var(--c-text);
  font-size: calc(14px * var(--fs-body, 1));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcg-list > .gcg-row.sel .gcg-row-n {
  color: var(--c-text-hi);
  font-weight: 700;
}
.gcg-list .gcg-row-m {
  color: var(--c-text-faint);
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.gcg-list .gcg-row-act {
  width: 22px;
  height: 22px;
  opacity: 0.32;
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
.gcg-list > .gcg-row:hover .gcg-row-act {
  opacity: 1;
}
.gcg-list .gcg-row-act svg {
  width: 12px;
  height: 12px;
}
.gcg-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.gcg-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-danger);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
  z-index: 3;
}
.gcg-notif-dot[hidden] {
  display: none;
}
.gcg-bar {
  height: 6px;
  overflow: hidden;
  background: var(--c-panel-3);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .5);
}
.gcg-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-accent) 70%, #fff),
      var(--c-accent));
}
.gcg-bar--ok > i {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-ctx) 70%, #fff),
      var(--c-ctx));
}
.gcg-bar--warn > i {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-warn) 70%, #fff),
      var(--c-warn));
}
.gcg-ratio {
  display: flex;
  height: 8px;
  overflow: hidden;
  background: var(--p2, var(--c-danger));
  border-radius: 4px;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / .45);
}
.gcg-ratio > i {
  display: block;
  height: 100%;
  background: var(--p1, var(--c-accent));
}
.gcg-ratio-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font: 700 11px/1 var(--mono);
  font-size: calc(11px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
}
.gcg-ratio-cap .p1 {
  color: var(--p1, var(--c-accent));
}
.gcg-ratio-cap .p2 {
  color: var(--p2, var(--c-danger));
}
@media (max-width: 420px) {
  :root {
    --gcg-field-label-width: 104px;
  }
}