/* Motion only: resting controls continue to use the site's existing styles. */
/* Remove the decorative diagonal arrow; retain directional carousel controls. */
svg.icon:has(> use[href$="#arrow-up-right"]) { display: none; }
[data-jelly-active] {
  will-change: scale, rotate;
  /* The physics drives each frame; CSS transitions would lag behind it. */
  transition: none !important;
}
[data-jelly-position] { position: relative; }
[data-jelly-surface] {
  isolation: isolate;
  background-color: transparent !important;
  border-color: transparent !important;
}
.jelly-surface {
  position: absolute;
  z-index: -1;
  max-width: none;
  pointer-events: none;
}

/* Retain the existing segmented control's colors, 4px corners and dimensions. */
.intake-tabs[data-jelly-tabs] { position: relative; isolation: isolate; }
.intake-tabs[data-jelly-tabs]::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  top: var(--jelly-tab-top);
  width: var(--jelly-tab-width);
  height: var(--jelly-tab-height);
  box-sizing: border-box;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--bg-2);
  transform: translateX(var(--jelly-tab-x)) scale(var(--jelly-tab-stretch, 1), var(--jelly-tab-squash, 1));
}
.intake-tabs[data-jelly-tabs] button[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-jelly-active] { will-change: auto; }
}