.lf-creative {
  --lf-bg: var(--background, var(--obsidian, #0d0a09));
  --lf-panel: var(--card, var(--design-panel, #171310));
  --lf-ink: var(--foreground, var(--ash, #f7efe7));
  --lf-soft: var(--muted-foreground, var(--slate, #a99d95));
  --lf-line: var(--border, var(--hairline, rgba(247,239,231,.12)));
  --lf-hot: var(--viz-series-1, var(--design-orange, var(--magma, #ff733d)));
  --lf-warm: var(--viz-series-2, var(--ember, #ffa53e));
  --lf-cool: var(--viz-series-3, var(--design-teal, #3fc2c9));
  --lf-bad: var(--destructive, var(--magma-2, #ff2f6d));
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  min-height: 440px;
  overflow: hidden;
  color: var(--lf-ink);
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--lf-hot) 15%, transparent), transparent 28%),
    radial-gradient(circle at 19% 78%, color-mix(in srgb, var(--lf-cool) 7%, transparent), transparent 25%),
    var(--lf-bg);
  border: 1px solid var(--lf-line);
  border-radius: 24px;
}

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

.lf-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .34;
  background-image:
    linear-gradient(color-mix(in srgb, var(--lf-hot) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--lf-hot) 13%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
  animation: lf-grid-drift 12s linear infinite;
}

.lf-no {
  position: absolute;
  left: 4%;
  bottom: -10%;
  z-index: -1;
  color: color-mix(in srgb, var(--lf-ink) 5%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--font-size-base, 1rem) * 13);
  font-weight: 500;
  letter-spacing: -.12em;
  user-select: none;
}

.lf-dust {
  position: absolute;
  z-index: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: var(--lf-hot);
  background: currentColor;
  box-shadow:
    72px 32px 0 -1px currentColor,
    184px 94px 0 -1px color-mix(in srgb, var(--lf-warm) 75%, transparent),
    310px 18px 0 -1px currentColor,
    448px 112px 0 -1px color-mix(in srgb, var(--lf-cool) 70%, transparent),
    615px 44px 0 -1px currentColor,
    702px 178px 0 -1px color-mix(in srgb, var(--lf-warm) 75%, transparent),
    521px 321px 0 -1px currentColor,
    243px 347px 0 -1px color-mix(in srgb, var(--lf-cool) 65%, transparent),
    102px 272px 0 -1px currentColor;
  opacity: .7;
  animation: lf-dust-drift 7s ease-in-out infinite alternate;
}

.lf-replay { position: absolute; top: 16px; right: 16px; z-index: 20; }
.lf-scene { position: absolute; inset: 42px 28px 28px; }
.lf-cut {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.lf-panel {
  background: linear-gradient(145deg, color-mix(in srgb, var(--lf-panel) 88%, transparent), color-mix(in srgb, var(--lf-bg) 82%, transparent));
  border: 1px solid var(--lf-line);
  backdrop-filter: blur(12px);
}
.lf-node {
  display: grid;
  place-content: center;
  gap: 5px;
  min-width: 90px;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--lf-ink);
  background: color-mix(in srgb, var(--lf-panel) 84%, transparent);
  border: 1px solid var(--lf-line);
  text-align: center;
}
.lf-node b,
.lf-label,
.lf-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--font-size-base, 1rem) * .72);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lf-node small,
.lf-note {
  color: var(--lf-soft);
  font-size: calc(var(--font-size-base, 1rem) * .72);
}
.lf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--lf-line);
  border-radius: 4px;
  color: var(--lf-soft);
  background: color-mix(in srgb, var(--lf-panel) 76%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--font-size-base, 1rem) * .68);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lf-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-hot);
  box-shadow: 0 0 12px var(--lf-hot);
}
.lf-orb {
  border: 1px solid color-mix(in srgb, var(--lf-hot) 42%, var(--lf-line));
  border-radius: 50%;
}
.lf-orb::before,
.lf-orb::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--lf-hot) 22%, transparent);
}
.lf-signal {
  position: absolute;
  height: 2px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, var(--lf-hot), transparent);
  transform-origin: left center;
}
.lf-signal::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lf-hot);
  box-shadow: 0 0 16px var(--lf-hot);
  animation: lf-signal-run 3.6s ease-in-out infinite;
}
.lf-status {
  color: var(--lf-hot);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--font-size-base, 1rem) * .68);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lf-creative.is-running .lf-pop { animation: lf-pop 5.8s ease both; }
.lf-creative.is-running .lf-scan { animation: lf-scan 5.8s ease both; }
.lf-creative.is-running .lf-trace { animation: lf-trace 5.8s ease both; }
.lf-creative.is-running .lf-glow { animation: lf-glow 5.8s ease both; }

@keyframes lf-grid-drift { to { background-position: 48px 48px; } }
@keyframes lf-dust-drift { to { transform: translate3d(18px,-12px,0); opacity: 1; } }
@keyframes lf-signal-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes lf-pop { 0% { opacity: .28; transform: translateY(10px) scale(.97); } 18%,62% { opacity: 1; transform: none; } 100% { opacity: .78; transform: none; } }
@keyframes lf-scan { 0% { transform: translateX(-110%); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
@keyframes lf-trace { 0% { stroke-dashoffset: 220; opacity: .2; } 25%,75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -220; opacity: .65; } }
@keyframes lf-glow { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 32%,68% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lf-hot) 75%, transparent)); } }
@keyframes lf-spin { to { transform: rotate(360deg); } }
@keyframes lf-ring { 0%,100% { transform: scale(.94); opacity: .38; } 50% { transform: scale(1.05); opacity: .9; } }

@media (max-width: 640px) {
  .lf-creative { min-height: 590px; border-radius: 18px; }
  .lf-scene { inset: 54px 16px 18px; }
  .lf-no { font-size: calc(var(--font-size-base, 1rem) * 8); bottom: -3%; }
  .lf-dust { opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-creative *,
  .lf-creative *::before,
  .lf-creative *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}