/* Live usage objects shared by Orb for Codex and Bloom for Claude. */

.live-usage-object {
  position: relative;
  width: clamp(300px, 36vw, 420px);
  max-width: 100%;
  margin-bottom: clamp(38px, 5vw, 54px);
  aspect-ratio: 36 / 25;
  contain: layout paint;
  isolation: isolate;
}

.live-usage-object-svg,
.live-usage-object-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.live-usage-object-svg {
  overflow: visible;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.live-usage-object-fallback {
  width: 154px;
  height: 154px;
  margin: auto;
  object-fit: contain;
  transition: opacity 220ms ease;
}

.live-usage-object.is-ready .live-usage-object-svg {
  opacity: 1;
}

.live-usage-object.is-ready .live-usage-object-fallback {
  opacity: 0;
}

.live-usage-shape {
  vector-effect: non-scaling-stroke;
}

.live-usage-label {
  fill: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.04em;
  pointer-events: none;
  text-anchor: middle;
}

@media (max-width: 620px) {
  .live-usage-object {
    width: min(100%, 340px);
    margin-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-usage-object-svg,
  .live-usage-object-fallback {
    transition: none;
  }
}