.hero-creation {
  min-width: 0;
  width: 100%;
}
.hero-creation > svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.hero-creation svg {
  stroke: #c1b2ee;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.creation-outline {
  stroke: url(#creation-gradient);
  stroke-width: 2;
}
.creation-site,
.creation-shop,
.creation-app {
  fill: none;
  opacity: 0;
}
.creation-shell {
  opacity: 0;
}
.hero-creation text {
  fill: #c1b2ee;
  stroke: none;
  font:
    11px Arial,
    sans-serif;
  letter-spacing: 1.6px;
}
.creation-title-line {
  stroke: #eeeaf6;
  stroke-width: 7;
}
.creation-copy-line {
  stroke: #8e829e;
  stroke-width: 3;
}
.creation-button {
  fill: #a212da;
  stroke: none;
}
.creation-picture,
.creation-product > rect {
  fill: #251d32;
  stroke: #675378;
}
.creation-landscape {
  fill: #49345e;
  stroke: none;
}
.creation-site circle {
  fill: #ec039f;
  stroke: none;
}
.creation-product path {
  stroke: #c1b2ee;
}
.creation-app > rect {
  fill: #211a2b;
  stroke: #68537b;
}
.creation-app-node rect {
  fill: #302440;
  stroke: #b198d1;
}
.creation-link {
  stroke: #3b4ef4;
  stroke-width: 3;
}
.creation-brand {
  stroke: none;
}
.creation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  color: #a8a2b0;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.creation-pause {
  background: transparent;
  color: #c1b2ee;
  border: 1px solid #554463;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
}
.creation-pause:focus-visible {
  outline: 2px solid #c1b2ee;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .hero-creation {
    align-self: stretch;
  }
  .creation-footer {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .creation-pause {
    display: none;
  }
}

.hero-creation .creation-brand-name {
  fill: #f1eff4;
  font:
    500 48px Arial,
    sans-serif;
  letter-spacing: -2px;
}
.hero-creation .creation-brand-tagline {
  fill: #c1b2ee;
  font:
    12px Arial,
    sans-serif;
  letter-spacing: 1.8px;
}
.creation-brand-rule {
  stroke: url(#creation-gradient);
  stroke-width: 2;
  transform-origin: 215px 206px;
}