/* Fetchly Tools Ring. Tile proportions from the Figma Logo cloud: 72px white
   squircle (radius 12%), 36px glyph (50%). The stage is a square that fills
   its container up to Max Size; every length is derived from the stage width
   through container query units so the ring scales with its slot. */

:host {
  display: block;
  width: 100%;
}

.REMYWqufLN9bxzc4SEGS {
  --_bg: var(--tr-bg, transparent);
  --_tile: var(--tr-tile, #ffffff);
  --_line: var(--tr-line, var(--_primitives---opacity--neutral-darkest-10, rgba(5, 11, 13, 0.1)));
  --_label: var(--tr-label, var(--_primitives---colors--neutral, #505455));
  --_ink: var(--_primitives---colors--neutral-darkest, #050b0d);
  --_font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--_bg);
  border-radius: var(--tr-radius, 12px);
}

.REMYWqufLN9bxzc4SEGS *,
.REMYWqufLN9bxzc4SEGS *::before,
.REMYWqufLN9bxzc4SEGS *::after {
  box-sizing: border-box;
}

.Z5dPKSUr_2ZV1hdGoqWZ {
  /* Size tokens live here because container units resolve against the
     nearest container, and the stage is that container. */
  --_tile-size: calc(clamp(40px, 16cqw, 72px) * var(--tr-tile-scale, 1));
  --_pad: calc(var(--_tile-size) * 0.1);
  --tr-r-outer: calc(50cqw - var(--_tile-size) / 2 - var(--_pad));
  --tr-r-inner: calc(var(--tr-r-outer) * 0.52);

  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--tr-max, 480px);
  aspect-ratio: 1;
  overflow: visible;
}

/* Optional 9px dot grid from the Figma card, brighter every 72px */
.aTWFC69nmh23eT2w6unZ .Z5dPKSUr_2ZV1hdGoqWZ {
  background-image:
    radial-gradient(circle, rgba(5, 11, 13, 0.14) 0.8px, transparent 0.9px),
    radial-gradient(circle, rgba(5, 11, 13, 0.06) 0.6px, transparent 0.7px);
  background-size: 72px 72px, 9px 9px;
  background-position: center;
  border-radius: var(--tr-radius, 12px);
}

.SH77CJXhryJp0oGIgyX3 {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed var(--_line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.T5jgWo5usEWEU1p3NXGK {
  width: calc(var(--tr-r-outer) * 2);
  height: calc(var(--tr-r-outer) * 2);
}

.adA9g13ranN4oxt4I8xt {
  width: calc(var(--tr-r-inner) * 2);
  height: calc(var(--tr-r-inner) * 2);
}

/* The ring turns; the tiles counter turn so glyphs stay upright */
@keyframes GW0jJooJYPnILuLIFOor {
  to {
    transform: rotate(calc(360deg * var(--tr-dir, 1)));
  }
}

@keyframes MbhEMH841HyOlbNZ2kec {
  to {
    transform: rotate(calc(-360deg * var(--tr-dir, 1)));
  }
}

.ERoT2hy5gZtU3mfptjyl {
  position: absolute;
  inset: 0;
  animation: GW0jJooJYPnILuLIFOor var(--tr-dur, 60s) linear infinite;
}

.X44nX9vVooSEE_Q3OuEl {
  animation-duration: var(--tr-dur, 60s);
}

.kvSy7AArzbEmqFxNmqV2 {
  animation-duration: calc(var(--tr-dur, 60s) * 0.72);
}

.B0d9JWqAxXva3xaScjrw {
  --tr-dir-ring: -1;
  animation-direction: reverse;
}

.miW1riRnXJ6VeIz1aVBN {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--_tile-size);
  height: var(--_tile-size);
  margin: calc(var(--_tile-size) / -2) 0 0 calc(var(--_tile-size) / -2);
  transform: rotate(var(--tr-angle, 0deg)) translateX(var(--tr-r)) rotate(calc(-1 * var(--tr-angle, 0deg)));
}

.flKdOE8XhbAVr17SuE_p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--_tile);
  border-radius: 12%;
  box-shadow:
    0 1px 2px rgba(5, 11, 13, 0.05),
    0 10px 24px rgba(5, 11, 13, 0.06);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}

.NnfX6bdC3RaxQIgnV1vX .flKdOE8XhbAVr17SuE_p {
  animation: MbhEMH841HyOlbNZ2kec var(--tr-dur, 60s) linear infinite;
}

.NnfX6bdC3RaxQIgnV1vX .kvSy7AArzbEmqFxNmqV2 .flKdOE8XhbAVr17SuE_p {
  animation-duration: calc(var(--tr-dur, 60s) * 0.72);
}

.NnfX6bdC3RaxQIgnV1vX .B0d9JWqAxXva3xaScjrw .flKdOE8XhbAVr17SuE_p {
  animation-direction: reverse;
}

.OIVGDEXs6_zhAOFBwcdf .flKdOE8XhbAVr17SuE_p {
  background: transparent;
  box-shadow: none;
}

.ookKtDQGMP91LFypbNuO {
  display: block;
  width: 50%;
  height: 50%;
}

.ookKtDQGMP91LFypbNuO svg {
  display: block;
  width: 100%;
  height: 100%;
}

.e3wWfVVsU21fIOX4162v .flKdOE8XhbAVr17SuE_p:hover {
  box-shadow:
    0 2px 4px rgba(5, 11, 13, 0.06),
    0 16px 32px rgba(5, 11, 13, 0.1);
}

.xrU_UxZJxXnmGGSjbYva .Z5dPKSUr_2ZV1hdGoqWZ:hover .ERoT2hy5gZtU3mfptjyl,
.xrU_UxZJxXnmGGSjbYva .Z5dPKSUr_2ZV1hdGoqWZ:hover .flKdOE8XhbAVr17SuE_p {
  animation-play-state: paused;
}

.AYeMTUPVpkIlPVa4wkLQ {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tr-r-inner) * 1.4);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.be7w3i3c5G9N5TR2qPzg {
  font-family: var(--_font-mono);
  font-size: clamp(0.625rem, 2.6cqw, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--_label);
}

.HbKcpO8_1UOuJHJAL8zG {
  display: block;
  width: 60%;
  color: var(--_ink);
}

.HbKcpO8_1UOuJHJAL8zG svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ERoT2hy5gZtU3mfptjyl,
  .flKdOE8XhbAVr17SuE_p {
    animation: none;
  }
}