.suaveforge-logo-motion {
  --ink: #101214;
  --light-ink: #f7f8f4;
  --paper: #fffaf2;
  --mist: #eef1ef;
  --metal: #2a2f35;
  --spark: #ff6b35;
  --aqua: #46d9f2;
  --gold: #ffbd35;
  --muted: #6b7075;
  color: var(--light-ink);
  font-family: Inter, Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

    .suaveforge-logo-motion .stage {
      width: min(680px, 92vw);
      display: grid;
      justify-items: center;
      gap: 18px;
    }

    .suaveforge-logo-motion .logo-shell {
      width: min(440px, 78vw);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 3px;
      background:
        radial-gradient(circle at 52% 48%, #263031 0 24%, #14191a 54%, #050607 100%);
      box-shadow:
        inset 0 0 58px rgba(255, 255, 255, 0.04),
        0 28px 36px rgba(0, 0, 0, 0.36);
    }

    .suaveforge-logo-motion .motion-logo {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .suaveforge-logo-motion .ghost-mark {
      opacity: 0;
      transform-origin: 512px 512px;
      fill: var(--light-ink);
    }

    .suaveforge-logo-motion .draw-ring,
    .suaveforge-logo-motion .inner-arc,
    .suaveforge-logo-motion .broken-s {
      fill: none;
      stroke: var(--light-ink);
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .suaveforge-logo-motion .draw-ring {
      stroke-width: 42;
    }

    .suaveforge-logo-motion .inner-arc {
      stroke-width: 16;
      opacity: 0.85;
      stroke: var(--aqua);
    }

    .suaveforge-logo-motion .broken-s {
      stroke-width: 52;
      filter: url(#rough);
    }

    .suaveforge-logo-motion .s-cut {
      fill: none;
      stroke: var(--spark);
      stroke-width: 8;
      stroke-linecap: round;
      opacity: 0;
    }

    .suaveforge-logo-motion .arrow-head,
    .suaveforge-logo-motion .f-tool,
    .suaveforge-logo-motion .final-f {
      fill: var(--light-ink);
      transform-box: fill-box;
      transform-origin: center;
    }

    .suaveforge-logo-motion .f-tool {
      fill: var(--light-ink);
      filter: drop-shadow(0 18px 16px rgba(16, 18, 20, 0.28));
    }

    .suaveforge-logo-motion .final-f {
      opacity: 0;
      filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.04));
    }

    .suaveforge-logo-motion .f-highlight {
      fill: none;
      stroke: var(--light-ink);
      stroke-width: 18;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.34));
    }

    .suaveforge-logo-motion .exact-final {
      opacity: 0;
      fill: var(--light-ink);
      transform-origin: 512px 512px;
    }

    .suaveforge-logo-motion .impact-ring {
      fill: none;
      stroke: var(--spark);
      stroke-width: 7;
      opacity: 0;
      transform-origin: 512px 512px;
    }

    .suaveforge-logo-motion .spark {
      fill: var(--gold);
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
    }

    .suaveforge-logo-motion .spark.hot {
      fill: var(--spark);
    }

    .suaveforge-logo-motion .wordmark {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .suaveforge-logo-motion .status {
      min-height: 19px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .suaveforge-logo-motion .controls {
      display: flex;
      gap: 10px;
    }

    .suaveforge-logo-motion button {
      appearance: none;
      border: 1px solid rgba(16, 18, 20, 0.17);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.78);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      padding: 10px 15px;
      box-shadow: 0 10px 24px rgba(16, 18, 20, 0.08);
    }

    .suaveforge-logo-motion button:hover {
      background: #fff;
    }