/* The original quote-centered diagram, with fixed labels above decorative rings. */
.foodfarm-ui .stocks-platform-orbit.yield-orbit {
  position: relative;
  z-index: 1;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  min-height: 0;
  margin: 0;
  border: 1px solid #ffffff17;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 24% 0%, #ffffff07, transparent 55%),
    linear-gradient(155deg, #ffffff02, #00000030), var(--ff-void);
  box-shadow: 0 3px 5px #00000060, 0 30px 65px -25px #000000d0,
    inset 0 1px 0 #ffffff10, inset 0 -1px 0 #000000a0;
}
.foodfarm-ui .yield-orbit::before,
.foodfarm-ui .yield-orbit::after { content: none; animation: none; }
.orbit-stage {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--lime) 9%, transparent), transparent 57%);
}
.orbit-stage::before {
  content: '';
  position: absolute;
  inset: 15.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff02 30%, #00000040 75%);
  box-shadow: inset 0 12px 22px #00000090, inset 0 -1px 0 #ffffff08, 0 1px 0 #ffffff06;
}
.orbit-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.orbit-ring-shadow { stroke: #00000070; stroke-width: 7; }
.orbit-ring-edge { stroke: #ffffff06; stroke-width: 1; }
.orbit-ring-track { stroke: color-mix(in srgb, var(--lime) 25%, transparent); stroke-width: 1; }
.orbit-ring-inner { stroke: color-mix(in srgb, var(--lime) 14%, transparent); stroke-width: 1; stroke-dasharray: 2 7; }
.orbit-current { transform-origin: 50% 50%; transform-box: view-box; }
.orbit-current-outer { animation: yield-orbit-turn 24s linear infinite; }
.orbit-current-inner { opacity: .6; animation: yield-orbit-turn 38s linear infinite reverse; }
.orbit-light-trail { stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; opacity: .35; }
.orbit-light { fill: #e9ffd7; }
.orbit-light-halo { fill: var(--lime); opacity: .7; }
.orbit-light-distant { opacity: .4; }
@keyframes yield-orbit-turn { to { transform: rotate(360deg); } }

.foodfarm-ui .yield-orbit .orbit-core {
  top: 50%;
  left: 50%;
  width: 32%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--lime) 35%, var(--panel));
  background:
    radial-gradient(circle at 28% 12%, #ffffff19, transparent 58%),
    linear-gradient(155deg, color-mix(in srgb, var(--lime) 9%, var(--panel)), var(--ff-void));
  box-shadow: 0 7px 0 color-mix(in srgb, var(--panel) 65%, #000),
    0 9px 0 #000000d0, 0 23px 35px -6px #000000c0,
    0 0 42px color-mix(in srgb, var(--lime) 9%, transparent),
    inset 0 2px 2px #ffffff1a, inset 0 -7px 11px #00000080;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.yield-orbit .orbit-core::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid #ffffff0b;
  border-bottom-color: #00000060;
  border-radius: 50%;
  pointer-events: none;
}
.foodfarm-ui .yield-orbit .orbit-core b { color: var(--lime); font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.foodfarm-ui .yield-orbit :is(.orbit-core, .orbit-node) small { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .12em; }
.foodfarm-ui .yield-orbit :is(.orbit-core, .orbit-node) em { color: var(--muted); font-size: 11px; line-height: 1.35; }
.foodfarm-ui .yield-orbit .orbit-node {
  width: 26%;
  min-height: 82px;
  padding: 12px 8px;
  border: 1px solid #ffffff1c;
  border-radius: 12px;
  background: linear-gradient(155deg, #ffffff0a, #ffffff00 65%), var(--panel);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--panel) 65%, #000),
    0 15px 22px -7px #000000c0, inset 0 1px 0 #ffffff12;
  transform: translate(-50%, -50%);
  transition: border-color 200ms ease;
}
.foodfarm-ui .yield-orbit .orbit-node b { color: var(--text); font-size: 17px; font-weight: 500; }
.foodfarm-ui .yield-orbit .orbit-create { top: 16%; left: 50%; right: auto; bottom: auto; }
.foodfarm-ui .yield-orbit .orbit-trade { top: 50%; left: 84%; right: auto; bottom: auto; }
.foodfarm-ui .yield-orbit .orbit-earn { top: 84%; left: 50%; right: auto; bottom: auto; }
.foodfarm-ui .yield-orbit .orbit-harvest { top: 50%; left: 16%; right: auto; bottom: auto; }
.yield-orbit figcaption {
  position: relative;
  margin: 0 22px;
  padding: 16px 0 20px;
  border-top: 1px solid #ffffff0c;
  text-align: center;
}
.yield-orbit figcaption b { display: block; font-size: 13px; font-weight: 500; color: var(--text); }
.yield-orbit figcaption span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .foodfarm-ui .yield-orbit:hover .orbit-core { border-color: color-mix(in srgb, var(--lime) 65%, var(--panel)); }
  .foodfarm-ui .yield-orbit .orbit-node:hover { border-color: color-mix(in srgb, var(--lime) 45%, var(--panel)); }
}
@media (max-width: 1000px) and (min-width: 851px), (max-width: 480px) {
  .foodfarm-ui .yield-orbit .orbit-node { min-height: 66px; padding: 9px 5px; border-radius: 10px; }
  .foodfarm-ui .yield-orbit .orbit-node b { font-size: 13px; }
  .foodfarm-ui .yield-orbit .orbit-core b { font-size: 20px; }
  .foodfarm-ui .yield-orbit :is(.orbit-core, .orbit-node) em { font-size: 10px; }
  .foodfarm-ui .yield-orbit .orbit-core small { font-size: 8px; letter-spacing: .06em; }
  .yield-orbit figcaption { margin-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .yield-orbit .orbit-current { animation: none; }
}