.cord-switch {
  position: relative;
  width: 100%;
  height: 100%;
  color: rgba(248, 250, 255, 0.85);
  --cord-rope: rgba(255, 255, 255, 0.7);
  --cord-ball: rgba(255, 255, 255, 0.92);
  --cord-hint: rgba(248, 250, 255, 0.7);
  --cord-ceiling: rgba(255, 255, 255, 0.35);
  --cord-cap: rgba(255, 255, 255, 0.9);
  --color-drop-shadow: 0 1px 2px #000;
  font-family: "Gkktt851", system-ui, sans-serif;
  touch-action: none;           /* modern */
  -ms-touch-action: none;       /* legacy Edge */
  overscroll-behavior: contain; /* stop scroll chaining to parent */
}

.cord-switch__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(var(--color-drop-shadow) 0 2px 4px #ff0099);
  touch-action: none;           /* modern */
  -ms-touch-action: none;       /* legacy Edge */
}

/* Prevent the browser from hijacking touch (scroll/zoom) while dragging the cord */
.cord-switch,
.cord-switch__svg {
  touch-action: none;           /* modern */
  -ms-touch-action: none;       /* legacy Edge */
}
.cord-switch {
  overscroll-behavior: contain; /* stop scroll chaining to parent */
}
.cord-switch__ball {
  -webkit-tap-highlight-color: transparent;
}

.cord-switch__ceiling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cord-ceiling-height, 8px);
  background: var(--cord-ceiling);
  pointer-events: none;
}

[data-cord-rope] {
  stroke: var(--cord-rope);
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

.cord-switch__cap {
  fill: var(--cord-cap, currentColor);
  pointer-events: none;
}

.cord-switch__hit {
  /* iOS requires painted fill to hit-test reliably; nearly invisible */
  fill: rgba(0, 0, 0, 0.001);
  cursor: grab;
  touch-action: none;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}

.cord-switch__hit:active {
  cursor: grabbing;
}

.cord-switch__ball {
  fill: var(--cord-ball);
  cursor: grab;
  touch-action: none;
  transition: r 0.12s ease;
  pointer-events: auto;
}

.cord-switch__ball:active {
  cursor: grabbing;
}

.cord-switch__label {
  fill: var(--cord-hint);
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cord-switch__ball {
    transition: none;
  }

  .cord-switch__label {
    transition: none;
  }
}