.studio-egg {
  --egg-ink: #191b1a;
  --egg-blue: #c4e4f8;
  --egg-line: #b6b9ae;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 2px;
  color: var(--egg-ink);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.studio-egg[hidden] { display: none; }
.studio-egg:focus-visible { outline: 2px solid var(--egg-ink); outline-offset: 3px; }
.studio-egg__track { position: relative; display: block; width: 44px; height: 24px; flex: none; }
.studio-egg__track::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; border-top: 1px solid var(--egg-line); }
.studio-egg__dot { position: absolute; left: 2px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--egg-blue); }
.studio-egg__label { min-width: 74px; }
.studio-egg__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .studio-egg__dot { transform: none !important; }
}