/* =========================================================
   CREATION OF ART — Hero + Spark gallery + Flash transitions
   Appended to the page via <link>. Scoped with unique classes.
   ========================================================= */

/* ===== HERO: The Creation ===== */
.hero-creation {
  position: relative;
  min-height: 100vh;
  padding: 80px 0 160px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, #e9e3cd 0%, #d9c99e 45%, #b79a6a 100%),
    #b79a6a;
}

/* Fresco plaster layer + cracks */
.hero-plaster {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-plaster .hero-cracks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-clouds {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(255,240,210,.45), transparent 70%),
    radial-gradient(ellipse 45% 28% at 85% 18%, rgba(255,225,190,.35), transparent 70%),
    radial-gradient(ellipse 35% 22% at 50% 80%, rgba(140,80,40,.2), transparent 70%),
    radial-gradient(ellipse 30% 20% at 20% 85%, rgba(70,100,140,.15), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: .9;
}

/* ===== The two hands ===== */
.hero-hands {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-hands .hand {
  position: absolute;
  top: 38%;
  width: clamp(280px, 38vw, 560px);
  filter: drop-shadow(0 12px 24px rgba(40,20,10,.3));
  transform-origin: center;
  will-change: transform;
}
.hero-hands .hand-human {
  left: 0;
  /* Human hand is flush with left edge */
  transform: translateX(var(--hand-offset-l, -2%)) rotate(-6deg);
  transition: transform 0.1s linear;
}
.hero-hands .hand-ai {
  right: 0;
  transform: translateX(var(--hand-offset-r, 2%)) rotate(4deg) scaleX(-1) scaleX(-1);
  /* (the scaleX cancels; keeping it for clarity. We mirrored the SVG content already) */
  transition: transform 0.1s linear;
}
/* Gentle idle breathing before the spark */
@keyframes breathe-l { 0%,100% { transform: translateX(-2%) rotate(-6deg);} 50% { transform: translateX(-4%) rotate(-7deg);} }
@keyframes breathe-r { 0%,100% { transform: translateX(2%) rotate(4deg);} 50% { transform: translateX(4%) rotate(5deg);} }
.hero-hands.idle .hand-human { animation: breathe-l 5s ease-in-out infinite; }
.hero-hands.idle .hand-ai { animation: breathe-r 5s ease-in-out infinite; }

/* The spark between fingertips */
.spark {
  position: absolute;
  left: 50%;
  top: 38%;
  /* Shift roughly to finger-meeting point */
  transform: translate(-50%, 80%) scale(var(--spark-s, 0.3));
  opacity: var(--spark-o, 0.35);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
  width: 220px; height: 220px;
}
.spark-core {
  position: absolute; inset: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff9dc 40%, rgba(255,225,150,.5) 70%, transparent 100%);
  box-shadow: 0 0 60px 10px #fff2c4, 0 0 120px 40px rgba(255,220,150,.6);
}
.spark-glow {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,220,.5), transparent 70%);
  animation: spark-pulse 1.8s ease-in-out infinite;
}
@keyframes spark-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.2); opacity: 1; } }
.spark-rays {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,245,200,.5) 5deg, transparent 20deg,
      transparent 30deg, rgba(255,245,200,.3) 35deg, transparent 50deg,
      transparent 60deg, rgba(255,245,200,.5) 65deg, transparent 80deg,
      transparent 90deg, rgba(255,245,200,.3) 95deg, transparent 110deg,
      transparent 120deg, rgba(255,245,200,.5) 125deg, transparent 140deg,
      transparent 150deg, rgba(255,245,200,.3) 155deg, transparent 170deg,
      transparent 180deg, rgba(255,245,200,.5) 185deg, transparent 200deg,
      transparent 210deg, rgba(255,245,200,.3) 215deg, transparent 230deg,
      transparent 240deg, rgba(255,245,200,.5) 245deg, transparent 260deg,
      transparent 270deg, rgba(255,245,200,.3) 275deg, transparent 290deg,
      transparent 300deg, rgba(255,245,200,.5) 305deg, transparent 320deg,
      transparent 330deg, rgba(255,245,200,.3) 335deg, transparent 360deg);
  mix-blend-mode: screen;
  animation: spark-spin 14s linear infinite;
  opacity: .9;
}
@keyframes spark-spin { to { transform: rotate(360deg); } }

/* ===== Hero copy overlay ===== */
.hero-copy-creation {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  color: #2a1a0c;
}
.eyebrow-creation {
  display: inline-flex;
  align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #6a4420;
  padding: 9px 18px;
  border: 1px solid rgba(106,68,32,.35);
  border-radius: 999px;
  background: rgba(255,245,220,.45);
  backdrop-filter: blur(4px);
  margin-bottom: 42px;
}
.dot-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #b25f2e;
  box-shadow: 0 0 0 0 rgba(178,95,46,.7);
  animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(178,95,46,.6); }
  70% { box-shadow: 0 0 0 14px rgba(178,95,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(178,95,46,0); }
}
.hero-title-creation {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(68px, 11vw, 178px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
  color: #2a1a0c;
  text-shadow: 0 2px 0 rgba(255,245,220,.5);
}
.hero-title-creation em {
  font-style: italic;
  font-weight: 400;
  color: #8a2e14;
}
.hero-sub-creation {
  margin: 40px auto 0;
  max-width: 640px;
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: #4a2f1a;
  text-wrap: balance;
}
.hero-sub-creation .muted {
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(74,47,26,.7);
  letter-spacing: .02em;
}
.hero-cta-creation {
  margin-top: 44px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-creation {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  background: #2a1a0c;
  color: #f4ead5;
  border: 1px solid #2a1a0c;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 0 rgba(42,26,12,.35);
}
.btn-creation:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(42,26,12,.4); }
.btn-creation svg { width: 14px; height: 14px; }
.btn-creation.ghost {
  background: transparent;
  color: #2a1a0c;
  box-shadow: none;
  border-color: rgba(42,26,12,.3);
}
.btn-creation.ghost:hover { background: rgba(42,26,12,.06); }
.hero-scroll-hint {
  margin-top: 72px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(42,26,12,.55);
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
.hero-scroll-hint svg { width: 16px; color: rgba(42,26,12,.55); }
@keyframes scroll-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ====================================================
   SPARK CHAPTER — gallery with flash-transition painter swap
   ==================================================== */
.spark-chapter {
  position: relative;
  padding: 140px 0 120px;
  background: var(--cream, #f4ead5);
  overflow: hidden;
}
.spark-stage {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 36px;
  align-items: center;
}
.spark-slot { margin: 0; }
.spark-slot figcaption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(42,26,12,.6);
  margin-bottom: 12px;
  text-align: center;
}
.spark-slot figcaption span {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: #2a1a0c;
  text-transform: none;
}

.spark-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: #2a1a0c;
  box-shadow: 0 30px 60px rgba(42,26,12,.3), 0 0 0 12px #fff, 0 0 0 13px rgba(42,26,12,.15);
  transform: rotate(-1.2deg);
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.spark-slot.spark-after .spark-frame { transform: rotate(1.5deg); }
.spark-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .8s, filter .8s, background-image .6s;
}
/* The "after" painting receives a filter determined by body[data-painter=X] */
.spark-painting { }
.spark-after-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 3;
  background: #2a1a0c;
}
.spark-after-video.is-active {
  opacity: 1;
}
.spark-after-video.emerging {
  animation: painting-emerge 1s cubic-bezier(.2,.9,.2,1) forwards;
}
/* Painter texture overlay sits above the still — hide it when video plays */
.spark-frame.has-video::after {
  opacity: 0 !important;
}
.spark-frame.has-video #sparkAfterImg.is-hidden-by-video {
  opacity: 0 !important;
  animation: none !important;
}
.spark-signature {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 4;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255,245,220,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  letter-spacing: .01em;
}

/* Arrow between slots */
.spark-arrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-width: 120px;
}
.spark-arrow-line {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, rgba(42,26,12,.2), rgba(138,46,20,.8), rgba(42,26,12,.2));
  position: relative;
}
.spark-arrow-line::after {
  content: "";
  position: absolute; right: -2px; top: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid #8a2e14;
  border-right: 2px solid #8a2e14;
  transform: translate(-2px, -50%) rotate(45deg);
}
.spark-arrow-icon {
  font-size: 28px;
  color: #b25f2e;
  animation: arrow-spin 3s ease-in-out infinite;
}
@keyframes arrow-spin { 0%,100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.15); } }
.spark-arrow-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(42,26,12,.55);
  text-align: center;
}

/* Painter picker */
.spark-picker {
  margin: 56px auto 0;
  display: flex;
  gap: 8px 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 720px;
}
.spark-picker-group {
  flex: 0 0 100%;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,234,213,.55);
  text-align: center;
  margin: 8px 0 2px;
}
.spark-picker-group:first-child { margin-top: 0; }
.spark-picker button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(42,26,12,.15);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  color: #2a1a0c;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s;
  box-shadow: 0 2px 4px rgba(42,26,12,.05);
}
.spark-picker button:hover { transform: translateY(-1px); border-color: #8a2e14; }
.spark-picker button.active {
  background: #2a1a0c;
  color: #f4ead5;
  border-color: #2a1a0c;
}
.spark-picker .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.spark-foot {
  margin-top: 28px;
  text-align: center;
}
.spark-foot .mono {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(42,26,12,.5);
}

/* ─── Prompt card: shows the exact prompt for the active painter ──────── */
.spark-prompt {
  --prompt-accent: #8a2e14;
  position: relative;
  margin: 32px auto 0;
  max-width: 640px;
  padding: 22px 28px 24px;
  background: #fbf3df;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(42,26,12,.06),
    0 14px 30px rgba(42,26,12,.10);
  border-left: 4px solid var(--prompt-accent);
  text-align: left;
  transition: border-color .5s ease, background .5s ease;
}
.spark-prompt::before {
  /* tiny strip of "tape" at the top-left to feel like a clipped note */
  content: "";
  position: absolute;
  top: -10px;
  left: 22px;
  width: 56px;
  height: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(42,26,12,.08);
  transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgba(42,26,12,.08);
}
.spark-prompt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(42,26,12,.55);
  margin-bottom: 12px;
}
.spark-prompt-pin {
  color: var(--prompt-accent);
  font-size: 12px;
  transition: color .5s ease;
}
.spark-prompt-text {
  margin: 0;
  font-family: var(--ff-display, Georgia, serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: #2a1a0c;
  transition: opacity .35s ease;
}
.spark-prompt-text.is-swapping { opacity: 0; }

/* Painter-specific accent — the left edge + pin pick up the painter's color */
body[data-painter="vangogh"] .spark-prompt { --prompt-accent: #f4b731; }
body[data-painter="monet"]   .spark-prompt { --prompt-accent: #6f9bd0; }
body[data-painter="picasso"] .spark-prompt { --prompt-accent: #d87a3c; }
body[data-painter="warhol"]  .spark-prompt { --prompt-accent: #ff2d88; }
body[data-painter="hokusai"] .spark-prompt { --prompt-accent: #1e5aa8; }


/* Painter filters applied to the AFTER image */
body[data-painter="vangogh"] .spark-painting { filter: saturate(2.2) contrast(1.2) brightness(1.05) hue-rotate(-12deg); }
body[data-painter="monet"] .spark-painting { filter: blur(.4px) saturate(1.3) brightness(1.12) contrast(.95) hue-rotate(15deg); }
body[data-painter="picasso"] .spark-painting { filter: saturate(1.1) contrast(1.55) brightness(1.02) hue-rotate(-20deg) grayscale(.15); }
body[data-painter="warhol"] .spark-painting { filter: saturate(3) contrast(1.6) brightness(1.1) hue-rotate(-40deg); }
body[data-painter="hokusai"] .spark-painting { filter: saturate(.75) contrast(1.3) brightness(1.02) hue-rotate(190deg) sepia(.2); }

/* Painting overlay textures — applied to the spark-frame directly */
.spark-slot.spark-after .spark-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .6s, background .6s;
  z-index: 2;
}
body[data-painter="vangogh"] .spark-after .spark-frame::after {
  background:
    repeating-conic-gradient(from 0deg at 30% 30%, rgba(30,60,160,.3) 0deg 12deg, rgba(244,183,49,.3) 12deg 24deg, transparent 24deg 36deg),
    repeating-conic-gradient(from 45deg at 70% 70%, rgba(244,183,49,.25) 0deg 15deg, rgba(30,60,160,.2) 15deg 30deg, transparent 30deg 45deg),
    linear-gradient(160deg, rgba(20,40,120,.25), rgba(244,183,49,.25));
  opacity: .75;
  mix-blend-mode: overlay;
}
body[data-painter="monet"] .spark-after .spark-frame::after {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(255,200,230,.5), transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(167,200,232,.5), transparent 55%),
    linear-gradient(180deg, rgba(255,240,250,.2), rgba(180,200,240,.25));
  opacity: .7;
  mix-blend-mode: screen;
}
body[data-painter="picasso"] .spark-after .spark-frame::after {
  background:
    linear-gradient(30deg, rgba(216,122,60,.32) 0 40%, transparent 40% 60%, rgba(60,60,80,.32) 60%),
    linear-gradient(-20deg, transparent 0 35%, rgba(220,200,160,.28) 35% 65%, transparent 65%);
  opacity: .8;
  mix-blend-mode: multiply;
}
body[data-painter="warhol"] .spark-after .spark-frame::after {
  background:
    linear-gradient(135deg, rgba(255,45,136,.45) 0 50%, transparent 50%),
    linear-gradient(-135deg, rgba(0,200,220,.4) 0 50%, transparent 50%),
    linear-gradient(45deg, transparent 0 50%, rgba(255,220,0,.45) 50%);
  opacity: .7;
  mix-blend-mode: hard-light;
}
body[data-painter="hokusai"] .spark-after .spark-frame::after {
  background:
    repeating-linear-gradient(100deg, rgba(30,90,168,.18) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(10deg, rgba(30,90,168,.1) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(240,230,200,.3), rgba(30,90,168,.2));
  opacity: .8;
  mix-blend-mode: multiply;
}

/* ============================================
   CINEMATIC FLASH OVERLAY
   ============================================ */
.flash-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.flash-overlay.firing { visibility: visible; }
.flash-bloom {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,230,.9) 18%, rgba(255,240,180,.6) 35%, rgba(255,220,140,0) 60%);
  opacity: 0;
}
.flash-rays {
  position: absolute; top: 50%; left: 50%;
  width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.flash-rays span {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 50%;
  background: linear-gradient(to top, transparent, rgba(255,245,210,.9), transparent);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--a));
}
.flash-rays span:nth-child(1){--a:0deg}.flash-rays span:nth-child(2){--a:22.5deg}.flash-rays span:nth-child(3){--a:45deg}
.flash-rays span:nth-child(4){--a:67.5deg}.flash-rays span:nth-child(5){--a:90deg}.flash-rays span:nth-child(6){--a:112.5deg}
.flash-rays span:nth-child(7){--a:135deg}.flash-rays span:nth-child(8){--a:157.5deg}.flash-rays span:nth-child(9){--a:180deg}
.flash-rays span:nth-child(10){--a:202.5deg}.flash-rays span:nth-child(11){--a:225deg}.flash-rays span:nth-child(12){--a:247.5deg}
.flash-rays span:nth-child(13){--a:270deg}.flash-rays span:nth-child(14){--a:292.5deg}.flash-rays span:nth-child(15){--a:315deg}
.flash-rays span:nth-child(16){--a:337.5deg}

.flash-aberration {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 48% 48%, rgba(255,80,80,.0) 0%, rgba(255,80,80,.15) 50%, transparent 70%),
    radial-gradient(circle at 52% 52%, rgba(80,200,255,.0) 0%, rgba(80,200,255,.15) 50%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* Firing keyframes */
@keyframes flash-bloom {
  0% { opacity: 0; transform: scale(.5); }
  15% { opacity: 1; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.1); }
}
@keyframes flash-rays {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(20deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(60deg); }
}
@keyframes flash-ab {
  0% { opacity: 0; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes flash-shake {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-3px,2px); }
  20% { transform: translate(4px,-2px); }
  30% { transform: translate(-2px,3px); }
  40% { transform: translate(3px,1px); }
  50% { transform: translate(-4px,-1px); }
  60% { transform: translate(2px,2px); }
  70% { transform: translate(-1px,-3px); }
  80% { transform: translate(3px,-1px); }
}
.flash-overlay.firing .flash-bloom { animation: flash-bloom 1s cubic-bezier(.2,.9,.2,1) forwards; }
.flash-overlay.firing .flash-rays { animation: flash-rays 1s cubic-bezier(.2,.9,.3,1) forwards; }
.flash-overlay.firing .flash-aberration { animation: flash-ab 1s ease-out forwards; }
body.flash-shake > * { animation: flash-shake .5s cubic-bezier(.36,.07,.19,.97); }

/* Painting emerges after flash */
@keyframes painting-emerge {
  0% { filter: brightness(3) saturate(0) blur(20px); transform: scale(1.05); opacity: 0; }
  20% { opacity: 1; }
  100% { filter: none; transform: scale(1); opacity: 1; }
}
.spark-painting.emerging { animation: painting-emerge 1s cubic-bezier(.2,.9,.2,1) forwards; }

/* Mobile */
@media (max-width: 860px) {
  .spark-chapter { padding: 96px 0 82px; }
  .spark-stage {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
    max-width: 340px;
    margin-inline: auto;
  }
  .spark-slot { width: 100%; }
  .spark-frame { max-width: 250px; margin-inline: auto; }
  .spark-arrow { flex-direction: row; transform: none; min-width: 0; gap: 10px; }
  .spark-arrow-line { width: 60px; }
  .spark-arrow-icon { font-size: 22px; }
  .spark-arrow-label { letter-spacing: .16em; font-size: 9px; }
  .spark-picker { margin-top: 34px; gap: 8px; }
  .spark-picker button { padding: 8px 12px; font-size: 12px; }
  .spark-prompt { padding: 20px 20px 22px; margin-top: 26px; }
  .spark-prompt-text { font-size: 16px; }
  .hero-hands .hand { top: 52%; width: 56vw; }
  .hero-title-creation { font-size: clamp(56px, 15vw, 88px); }
}