html, body { width: 100%; }
    body { padding: 0; }
    .dmHeader { width: 100%; margin: 0; }
    .dmHeader .dmContainer { width: 100%; max-width: none; margin: 0; }

    .content {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "controls controls" "scene scene" "status status" "overlay overlay" "uploads code" "panel panel" "editor editor" "export export" "recorder recorder" "note note" "seo seo";
    }

    .content > .control-row { grid-area: controls; }

    .content > .seo-content { grid-area: seo; }

    .control-row {
      display: flex;
      align-items: center;
      gap: 48px;
      width: 100%;
    }

    .control-row .top-actions {
      flex: 0 1 auto;
      gap: 20px;
      margin-top: 0;
    }

    .control-row .voice-row {
      flex: 1 1 auto;
      min-width: 0;
      margin-top: 0;
    }

    .page-heading {
      padding: 34px 18px 20px;
      text-align: center;
      background: #fff;
    }

    .page-heading h1 {
      margin: 0;
      color: #172236;
      font-size: clamp(44px, 6vw, 74px);
      font-weight: 300;
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .page-heading .tagline {
      max-width: 760px;
      margin: 11px auto 0;
      color: #7048bd;
      font-size: 15px;
      font-weight: 750;
      line-height: 1.55;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
    }

    .top-actions button {
      min-height: 48px;
      margin: 0;
      border: 1px solid transparent;
      border-radius: 14px;
      padding: 0 22px;
      font-size: 14px;
      font-weight: 850;
      line-height: 1;
      transition: transform .16s ease, filter .16s ease, background .16s ease;
    }

    .top-actions #play {
      color: #fff;
      background: linear-gradient(100deg, #8650ee, #12a9b4);
      box-shadow: 0 8px 18px #7650c538;
    }

    .top-actions #play:not(:disabled):hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
    }

    .top-actions #play:disabled {
      cursor: not-allowed;
      opacity: .58;
    }

    .top-actions #stop {
      color: #5c4a8e;
      background: #f5f1ff;
      border-color: #e4ddf4;
      box-shadow: none;
    }

    .top-actions #stop:hover {
      background: #eee7ff;
      transform: translateY(-1px);
    }

    .voice-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 14px;
      color: #3f3274;
      font-size: 14px;
      font-weight: 850;
    }

    .voice-row label {
      color: #3f3274;
      font-weight: 850;
    }

    .voice-row #voice {
      min-width: min(360px, 100%);
      min-height: 48px;
      border: 1px solid #d8cdf2;
      border-radius: 13px;
      padding: 0 14px;
      color: #30254d;
      background: #fff;
      font: inherit;
      font-size: 13px;
      outline: none;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .voice-row #voice:hover {
      border-color: #bda7ef;
    }

    .voice-row #voice:focus {
      border-color: #8650ee;
      box-shadow: 0 0 0 4px #8650ee1c;
    }

    .voice-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 210px);
      align-items: center;
      column-gap: 0;
      row-gap: 8px;
      flex-wrap: nowrap;
    }

    .voice-row label {
      margin-right: 8px;
      white-space: nowrap;
    }

    .voice-row label[for="highlight-mode"] { margin-left: 28px; }

    .voice-row #voice,
    .voice-row #highlight-mode {
      width: 100%;
      min-width: 0;
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .voice-row #highlight-mode {
      min-width: min(210px, 100%);
      min-height: 48px;
      border: 1px solid #d8cdf2;
      border-radius: 13px;
      padding: 0 14px;
      color: #30254d;
      background: #fff;
      font: inherit;
      font-size: 13px;
      outline: none;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .voice-row #highlight-mode:hover {
      border-color: #bda7ef;
    }

    .voice-row #highlight-mode:focus {
      border-color: #8650ee;
      box-shadow: 0 0 0 4px #8650ee1c;
    }

    .content > .overlay-row { grid-area: overlay; }

    .overlay-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      gap: 18px;
      min-width: 0;
      margin-top: 8px;
      color: #3f3274;
      font-size: 13px;
      font-weight: 850;
    }

    .overlay-control {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .overlay-control label { white-space: nowrap; }

    .overlay-row select {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      border: 1px solid #d8cdf2;
      border-radius: 12px;
      padding: 0 13px;
      color: #30254d;
      background: #fff;
      font: inherit;
      font-size: 13px;
      outline: none;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .overlay-row select:hover {
      border-color: #bda7ef;
    }

    .overlay-row select:focus {
      border-color: #8650ee;
      box-shadow: 0 0 0 4px #8650ee1c;
    }

    .image-viewport {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 18px;
      background: #fff;
    }

    .image-viewport #frame {
      position: relative;
      z-index: 1;
    }

    .image-overlay {
      position: absolute;
      z-index: 2;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .overlay-orb,
    .overlay-ring,
    .overlay-particle,
    .overlay-light,
    .overlay-bubble,
    .overlay-ribbon,
    .overlay-star,
    .overlay-blob,
    .overlay-prism,
    .overlay-comet,
    .overlay-holo-grid,
    .overlay-rainbow-ring,
    .overlay-confetti,
    .overlay-hexagon,
    .overlay-firefly,
    .overlay-crystal,
    .overlay-color-wave,
    .overlay-dust {
      position: absolute;
      display: none;
      pointer-events: none;
    }

    .image-overlay[data-style="floating-orbs"] .overlay-orb,
    .image-overlay[data-style="floating-orbs"] .overlay-ring {
      display: block;
    }

    .overlay-orb {
      border-radius: 50%;
      opacity: .78;
      filter: blur(.2px);
    }

    .overlay-orb--one {
      top: 9%;
      left: 8%;
      width: clamp(34px, 12%, 90px);
      aspect-ratio: 1;
      background: radial-gradient(circle at 35% 30%, #fff 0 8%, #c084fc 28%, #7c3aed 72%, transparent 73%);
      animation: overlay-orb-one 5.5s ease-in-out infinite;
    }

    .overlay-orb--two {
      top: 28%;
      left: 80%;
      width: clamp(24px, 8%, 64px);
      aspect-ratio: 1;
      background: radial-gradient(circle at 35% 30%, #fff 0 8%, #67e8f9 30%, #0891b2 72%, transparent 73%);
      animation: overlay-orb-two 4.8s ease-in-out infinite;
    }

    .overlay-ring {
      right: -8%;
      bottom: -22%;
      width: 46%;
      aspect-ratio: 1;
      border: clamp(8px, 1.8vw, 18px) solid rgba(103, 232, 249, .42);
      border-radius: 50%;
      animation: overlay-ring-drift 8s linear infinite;
    }

    .image-overlay[data-style="soft-particles"] .overlay-particle,
    .image-overlay[data-style="soft-particles"] .overlay-light {
      display: block;
    }

    .image-overlay[data-style="glowing-bubbles"] .overlay-bubble,
    .image-overlay[data-style="neon-ribbons"] .overlay-ribbon,
    .image-overlay[data-style="sparkle-stars"] .overlay-star,
    .image-overlay[data-style="aurora-glow"] .overlay-blob,
    .image-overlay[data-style="prism-shards"] .overlay-prism,
    .image-overlay[data-style="comet-streaks"] .overlay-comet,
    .image-overlay[data-style="holographic-grid"] .overlay-holo-grid,
    .image-overlay[data-style="rainbow-rings"] .overlay-rainbow-ring,
    .image-overlay[data-style="colorful-confetti"] .overlay-confetti,
    .image-overlay[data-style="floating-hexagons"] .overlay-hexagon,
    .image-overlay[data-style="firefly-lights"] .overlay-firefly,
    .image-overlay[data-style="crystal-sparkles"] .overlay-crystal,
    .image-overlay[data-style="color-wave"] .overlay-color-wave,
    .image-overlay[data-style="cosmic-dust"] .overlay-dust {
      display: block;
    }

    .overlay-bubble {
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, .62);
      border-radius: 50%;
      opacity: .76;
      filter: blur(.2px);
      mix-blend-mode: screen;
    }

    .overlay-bubble--one {
      top: 16%;
      left: 14%;
      width: clamp(28px, 10%, 86px);
      background: radial-gradient(circle at 30% 26%, #fff 0 8%, #f0abfc 24%, #a855f7 62%, transparent 73%);
      animation: overlay-bubble-one 7.5s ease-in-out infinite;
    }

    .overlay-bubble--two {
      top: 58%;
      left: 68%;
      width: clamp(22px, 7%, 62px);
      background: radial-gradient(circle at 30% 26%, #fff 0 8%, #99f6e4 24%, #14b8a6 62%, transparent 73%);
      animation: overlay-bubble-two 6.4s ease-in-out infinite;
    }

    .overlay-bubble--three {
      top: 72%;
      left: 28%;
      width: clamp(14px, 5%, 42px);
      background: radial-gradient(circle at 30% 26%, #fff 0 8%, #fde68a 24%, #f97316 62%, transparent 73%);
      animation: overlay-bubble-three 5.8s ease-in-out infinite;
    }

    .overlay-ribbon {
      left: -18%;
      width: 136%;
      height: 16%;
      border-top: clamp(3px, .55vw, 7px) solid rgba(255, 255, 255, .88);
      border-bottom: clamp(2px, .4vw, 5px) solid rgba(103, 232, 249, .72);
      border-radius: 50%;
      filter: blur(.7px);
      opacity: .62;
    }

    .overlay-ribbon--one {
      top: 22%;
      transform: rotate(-12deg);
      box-shadow: 0 0 18px rgba(103, 232, 249, .66);
      animation: overlay-ribbon-one 7s ease-in-out infinite;
    }

    .overlay-ribbon--two {
      top: 63%;
      transform: rotate(10deg);
      border-top-color: rgba(255, 255, 255, .74);
      border-bottom-color: rgba(216, 180, 254, .76);
      box-shadow: 0 0 18px rgba(192, 132, 252, .62);
      animation: overlay-ribbon-two 8.5s ease-in-out infinite;
    }

    .overlay-star {
      width: clamp(12px, 2.8vw, 30px);
      aspect-ratio: 1;
      background: conic-gradient(from 45deg, #fff, #67e8f9 20%, #c084fc 48%, #fef08a 72%, #fff);
      clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
      filter: drop-shadow(0 0 9px rgba(255, 255, 255, .9));
      opacity: .88;
    }

    .overlay-star--one { top: 16%; left: 18%; animation: overlay-star-one 4.8s ease-in-out infinite; }
    .overlay-star--two { top: 26%; left: 76%; animation: overlay-star-two 5.6s ease-in-out infinite; }
    .overlay-star--three { top: 72%; left: 62%; animation: overlay-star-three 4.2s ease-in-out infinite; }
    .overlay-star--four { top: 68%; left: 15%; animation: overlay-star-four 6.1s ease-in-out infinite; }

    .overlay-blob {
      width: 52%;
      height: 58%;
      border-radius: 48% 52% 60% 40%;
      filter: blur(22px);
      opacity: .36;
      mix-blend-mode: screen;
    }

    .overlay-blob--one {
      top: -18%;
      left: -8%;
      background: radial-gradient(circle, rgba(192, 132, 252, .95), rgba(124, 58, 237, .18) 62%, transparent 72%);
      animation: overlay-blob-one 9s ease-in-out infinite;
    }

    .overlay-blob--two {
      right: -10%;
      bottom: -20%;
      background: radial-gradient(circle, rgba(103, 232, 249, .92), rgba(20, 184, 166, .16) 62%, transparent 72%);
      animation: overlay-blob-two 10s ease-in-out infinite;
    }

    .overlay-prism {
      width: clamp(34px, 10%, 108px);
      height: clamp(22px, 8%, 76px);
      clip-path: polygon(0 24%, 72% 0, 100% 50%, 72% 100%, 0 76%, 25% 50%);
      background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(96, 165, 250, .3) 35%, rgba(217, 70, 239, .7) 72%, rgba(251, 191, 36, .4));
      filter: drop-shadow(0 0 12px rgba(192, 132, 252, .68));
      opacity: .7;
      mix-blend-mode: screen;
    }

    .overlay-prism--one { top: 14%; left: 8%; animation: overlay-prism-one 7.2s ease-in-out infinite; }
    .overlay-prism--two { top: 60%; left: 62%; transform: rotate(28deg); animation: overlay-prism-two 8.2s ease-in-out infinite; }
    .overlay-prism--three { top: 34%; left: 40%; width: clamp(24px, 7%, 72px); transform: rotate(-18deg); animation: overlay-prism-three 6.4s ease-in-out infinite; }

    .overlay-comet {
      width: clamp(100px, 30%, 300px);
      height: clamp(3px, .65vw, 8px);
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .12) 25%, #67e8f9 72%, #fff);
      box-shadow: 0 0 12px rgba(103, 232, 249, .9), 0 0 30px rgba(192, 132, 252, .58);
      filter: blur(.45px);
      opacity: .78;
      transform-origin: right center;
    }

    .overlay-comet--one { top: 24%; left: -28%; transform: rotate(23deg); animation: overlay-comet-one 6s ease-in-out infinite; }
    .overlay-comet--two { top: 72%; left: 36%; transform: rotate(-28deg); animation: overlay-comet-two 7.5s ease-in-out infinite; }

    .overlay-holo-grid {
      inset: -24%;
      background-image: linear-gradient(rgba(103, 232, 249, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(192, 132, 252, .3) 1px, transparent 1px);
      background-size: clamp(22px, 5vw, 56px) clamp(22px, 5vw, 56px);
      mask-image: radial-gradient(ellipse at center, #000 15%, transparent 76%);
      opacity: .42;
      transform: perspective(360px) rotateX(58deg) rotateZ(-12deg) scale(1.25);
      animation: overlay-holo-grid 8s linear infinite;
    }

    .overlay-rainbow-ring {
      aspect-ratio: 1;
      border: clamp(4px, .8vw, 10px) solid transparent;
      border-top-color: #f0abfc;
      border-right-color: #67e8f9;
      border-bottom-color: #fde68a;
      border-left-color: #a78bfa;
      border-radius: 50%;
      box-shadow: 0 0 16px rgba(192, 132, 252, .52), inset 0 0 14px rgba(103, 232, 249, .38);
      opacity: .64;
    }

    .overlay-rainbow-ring--one { top: 8%; left: 8%; width: clamp(76px, 25%, 250px); animation: overlay-rainbow-one 9s ease-in-out infinite; }
    .overlay-rainbow-ring--two { right: 6%; bottom: 8%; width: clamp(50px, 17%, 170px); animation: overlay-rainbow-two 7s ease-in-out infinite; }

    .overlay-confetti {
      width: clamp(4px, .8vw, 10px);
      height: clamp(14px, 2.5vw, 28px);
      border-radius: 3px;
      opacity: .82;
      box-shadow: 0 0 8px currentColor;
    }

    .overlay-confetti--one { top: 12%; left: 16%; color: #f0abfc; background: #f0abfc; animation: overlay-confetti-one 5.5s ease-in-out infinite; }
    .overlay-confetti--two { top: 18%; left: 66%; color: #67e8f9; background: #67e8f9; animation: overlay-confetti-two 6.2s ease-in-out infinite; }
    .overlay-confetti--three { top: 52%; left: 82%; color: #fde68a; background: #fde68a; animation: overlay-confetti-three 5.8s ease-in-out infinite; }
    .overlay-confetti--four { top: 76%; left: 58%; color: #fb7185; background: #fb7185; animation: overlay-confetti-four 6.8s ease-in-out infinite; }
    .overlay-confetti--five { top: 68%; left: 22%; color: #86efac; background: #86efac; animation: overlay-confetti-five 5.1s ease-in-out infinite; }
    .overlay-confetti--six { top: 36%; left: 42%; color: #c4b5fd; background: #c4b5fd; animation: overlay-confetti-six 7s ease-in-out infinite; }

    .overlay-hexagon {
      width: clamp(26px, 6%, 66px);
      aspect-ratio: 1;
      clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%);
      background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(34, 211, 238, .46) 42%, rgba(124, 58, 237, .76));
      filter: drop-shadow(0 0 10px rgba(103, 232, 249, .68));
      opacity: .7;
      mix-blend-mode: screen;
    }

    .overlay-hexagon--one { top: 14%; left: 22%; animation: overlay-hexagon-one 7.8s ease-in-out infinite; }
    .overlay-hexagon--two { top: 54%; left: 72%; animation: overlay-hexagon-two 6.6s ease-in-out infinite; }
    .overlay-hexagon--three { top: 72%; left: 34%; width: clamp(18px, 4%, 46px); animation: overlay-hexagon-three 8.6s ease-in-out infinite; }

    .overlay-firefly {
      width: clamp(5px, 1vw, 12px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 8px 3px #fef08a, 0 0 22px 6px rgba(251, 146, 60, .78);
      opacity: .2;
    }

    .overlay-firefly--one { top: 20%; left: 12%; animation: overlay-firefly-one 5.8s ease-in-out infinite; }
    .overlay-firefly--two { top: 32%; left: 76%; animation: overlay-firefly-two 7.2s ease-in-out infinite; }
    .overlay-firefly--three { top: 70%; left: 66%; animation: overlay-firefly-three 6.4s ease-in-out infinite; }
    .overlay-firefly--four { top: 76%; left: 18%; animation: overlay-firefly-four 5.2s ease-in-out infinite; }
    .overlay-firefly--five { top: 48%; left: 44%; animation: overlay-firefly-five 8s ease-in-out infinite; }

    .overlay-crystal {
      width: clamp(22px, 6%, 64px);
      aspect-ratio: .75;
      clip-path: polygon(50% 0, 92% 30%, 72% 100%, 28% 100%, 8% 30%);
      background: linear-gradient(120deg, rgba(255, 255, 255, .9), rgba(125, 211, 252, .42) 35%, rgba(167, 139, 250, .8) 70%, rgba(251, 191, 36, .52));
      filter: drop-shadow(0 0 12px rgba(165, 243, 252, .75));
      opacity: .66;
      mix-blend-mode: screen;
    }

    .overlay-crystal--one { top: 10%; left: 72%; animation: overlay-crystal-one 8s ease-in-out infinite; }
    .overlay-crystal--two { top: 52%; left: 10%; width: clamp(18px, 4%, 46px); animation: overlay-crystal-two 6.8s ease-in-out infinite; }
    .overlay-crystal--three { top: 70%; left: 76%; width: clamp(16px, 4.5%, 48px); animation: overlay-crystal-three 7.2s ease-in-out infinite; }
    .overlay-crystal--four { top: 30%; left: 38%; width: clamp(12px, 3%, 34px); animation: overlay-crystal-four 5.6s ease-in-out infinite; }

    .overlay-color-wave {
      left: -22%;
      width: 144%;
      height: 24%;
      border-radius: 50%;
      background: linear-gradient(90deg, transparent, rgba(236, 72, 153, .25), rgba(34, 211, 238, .36), rgba(250, 204, 21, .24), transparent);
      filter: blur(10px);
      opacity: .72;
      mix-blend-mode: screen;
    }

    .overlay-color-wave--one { top: 18%; transform: rotate(-9deg); animation: overlay-color-wave-one 7.5s ease-in-out infinite; }
    .overlay-color-wave--two { top: 58%; transform: rotate(11deg); opacity: .54; animation: overlay-color-wave-two 9s ease-in-out infinite; }

    .overlay-dust {
      width: clamp(3px, .65vw, 8px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 7px 2px currentColor;
      opacity: .65;
    }

    .overlay-dust--one { top: 14%; left: 20%; color: #67e8f9; animation: overlay-dust-one 5.1s ease-in-out infinite; }
    .overlay-dust--two { top: 22%; left: 58%; color: #f0abfc; animation: overlay-dust-two 6.3s ease-in-out infinite; }
    .overlay-dust--three { top: 42%; left: 82%; color: #fde68a; animation: overlay-dust-three 4.8s ease-in-out infinite; }
    .overlay-dust--four { top: 70%; left: 70%; color: #86efac; animation: overlay-dust-four 7.2s ease-in-out infinite; }
    .overlay-dust--five { top: 78%; left: 30%; color: #c4b5fd; animation: overlay-dust-five 5.7s ease-in-out infinite; }
    .overlay-dust--six { top: 52%; left: 12%; color: #fb7185; animation: overlay-dust-six 6.8s ease-in-out infinite; }

    .overlay-particle {
      width: clamp(4px, .8vw, 9px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 8px 2px rgba(255, 255, 255, .9), 0 0 18px 4px rgba(103, 232, 249, .58);
    }

    .overlay-particle--one { top: 18%; left: 16%; animation: overlay-particle-one 4.8s ease-in-out infinite; }
    .overlay-particle--two { top: 34%; right: 18%; animation: overlay-particle-two 5.6s ease-in-out infinite; }
    .overlay-particle--three { bottom: 25%; left: 26%; animation: overlay-particle-three 4.2s ease-in-out infinite; }
    .overlay-particle--four { bottom: 16%; right: 28%; animation: overlay-particle-four 5.2s ease-in-out infinite; }

    .overlay-light {
      left: -18%;
      width: 136%;
      height: 18%;
      border-top: 1px solid rgba(255, 255, 255, .78);
      border-bottom: 1px solid rgba(103, 232, 249, .52);
      filter: blur(.2px);
      opacity: .72;
      transform: rotate(-12deg);
    }

    .overlay-light--one { top: 28%; animation: overlay-light-one 7s ease-in-out infinite; }
    .overlay-light--two { top: 60%; animation: overlay-light-two 8s ease-in-out infinite; }

    .overlay-text {
      position: absolute;
      z-index: 5;
      left: 18%;
      top: 18%;
      width: min(68%, 560px);
      max-height: 38%;
      overflow: hidden;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: #fff;
      background: transparent;
      box-shadow: none;
      font-size: var(--overlay-text-size, 40px);
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
      text-shadow: 0 2px 8px rgba(10, 15, 35, .82), 0 0 18px rgba(255, 255, 255, .28);
      transform: translate(-50%, -50%);
      animation: overlay-text-float 8s ease-in-out infinite;
    }

    .image-overlay .overlay-text {
      display: none;
    }

    .image-overlay[data-text-style="floating-text"] .overlay-text,
    .image-overlay[data-text-style="drifting-text"] .overlay-text,
    .image-overlay[data-text-style="orbiting-text"] .overlay-text,
    .image-overlay[data-text-style="typewriter-text"] .overlay-text,
    .image-overlay[data-text-style="pulse-glow-text"] .overlay-text,
    .image-overlay[data-text-style="slide-text"] .overlay-text,
    .image-overlay[data-text-style="wave-text"] .overlay-text,
    .image-overlay[data-text-style="flip-text"] .overlay-text,
    .image-overlay[data-text-style="spiral-text"] .overlay-text,
    .image-overlay[data-text-style="zoom-text"] .overlay-text,
    .image-overlay[data-text-style="rainbow-text"] .overlay-text,
    .image-overlay[data-text-style="corner-drift-text"] .overlay-text,
    .image-overlay[data-text-style="bounce-text"] .overlay-text {
      display: block;
    }

    .image-overlay[data-text-style="drifting-text"] .overlay-text {
      color: #d9fbff;
      text-shadow: 0 2px 8px rgba(4, 61, 79, .88), 0 0 20px rgba(103, 232, 249, .72);
      animation-name: overlay-text-drift;
    }

    .image-overlay[data-text-style="orbiting-text"] .overlay-text {
      width: min(62%, 500px);
      padding: 8px 14px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 999px;
      background: rgba(52, 31, 105, .22);
      box-shadow: 0 0 22px rgba(192, 132, 252, .32), inset 0 0 18px rgba(255, 255, 255, .08);
      animation-name: overlay-text-orbit;
    }

    .image-overlay[data-text-style="typewriter-text"] .overlay-text {
      color: #fff;
      white-space: nowrap;
      clip-path: inset(0 100% 0 0);
      animation: overlay-text-typewriter 6s steps(28, end) infinite alternate;
    }

    .image-overlay[data-text-style="pulse-glow-text"] .overlay-text {
      color: #fef3c7;
      text-shadow: 0 0 8px #fbbf24, 0 0 22px #f97316, 0 2px 8px rgba(10, 15, 35, .78);
      animation-name: overlay-text-pulse;
    }

    .image-overlay[data-text-style="slide-text"] .overlay-text {
      color: #e0f2fe;
      text-shadow: 0 2px 8px rgba(3, 105, 161, .9), 0 0 18px rgba(34, 211, 238, .7);
      animation-name: overlay-text-slide;
    }

    .image-overlay[data-text-style="wave-text"] .overlay-text {
      color: #f5f3ff;
      letter-spacing: .04em;
      text-shadow: 0 0 12px rgba(167, 139, 250, .9), 0 2px 8px rgba(10, 15, 35, .82);
      animation-name: overlay-text-wave;
    }

    .image-overlay[data-text-style="flip-text"] .overlay-text {
      color: #ecfeff;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      text-shadow: 0 0 16px rgba(45, 212, 191, .9), 0 2px 8px rgba(10, 15, 35, .82);
      animation-name: overlay-text-flip;
    }

    .image-overlay[data-text-style="spiral-text"] .overlay-text {
      color: #fce7f3;
      text-shadow: 0 0 14px rgba(244, 114, 182, .9), 0 2px 8px rgba(10, 15, 35, .82);
      animation-name: overlay-text-spiral;
    }

    .image-overlay[data-text-style="zoom-text"] .overlay-text {
      color: #fff;
      text-shadow: 0 0 14px rgba(255, 255, 255, .84), 0 2px 8px rgba(10, 15, 35, .86);
      animation-name: overlay-text-zoom;
    }

    .image-overlay[data-text-style="rainbow-text"] .overlay-text {
      color: transparent;
      background: linear-gradient(90deg, #fb7185, #fbbf24, #34d399, #22d3ee, #a78bfa, #fb7185);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: none;
      animation-name: overlay-text-rainbow;
    }

    .image-overlay[data-text-style="corner-drift-text"] .overlay-text {
      color: #fff7ed;
      text-shadow: 0 0 12px rgba(251, 146, 60, .88), 0 2px 8px rgba(10, 15, 35, .82);
      animation-name: overlay-text-corner-drift;
    }

    .image-overlay[data-text-style="bounce-text"] .overlay-text {
      color: #f0fdf4;
      text-shadow: 0 0 14px rgba(74, 222, 128, .86), 0 2px 8px rgba(10, 15, 35, .82);
      animation-name: overlay-text-bounce;
    }

    @keyframes overlay-orb-one {
      0% { left: 8%; top: 9%; transform: scale(.8); }
      30% { left: 66%; top: 12%; transform: scale(1.1); }
      62% { left: 42%; top: 70%; transform: scale(.92); }
      84% { left: 12%; top: 52%; transform: scale(1.18); }
      100% { left: 8%; top: 9%; transform: scale(.8); }
    }
    @keyframes overlay-orb-two {
      0% { left: 80%; top: 28%; transform: scale(.8); }
      28% { left: 58%; top: 66%; transform: scale(1.15); }
      56% { left: 18%; top: 72%; transform: scale(.9); }
      80% { left: 22%; top: 20%; transform: scale(1.1); }
      100% { left: 80%; top: 28%; transform: scale(.8); }
    }
    @keyframes overlay-ring-drift {
      0% { right: -8%; bottom: -22%; transform: rotate(0deg); }
      35% { right: 28%; bottom: 12%; transform: rotate(120deg); }
      70% { right: 58%; bottom: -18%; transform: rotate(240deg); }
      100% { right: -8%; bottom: -22%; transform: rotate(360deg); }
    }
    @keyframes overlay-particle-one { 50% { transform: translate(28px, 22px) scale(1.35); opacity: .45; } }
    @keyframes overlay-particle-two { 50% { transform: translate(-24px, 24px) scale(.7); opacity: .55; } }
    @keyframes overlay-particle-three { 50% { transform: translate(20px, -25px) scale(1.3); opacity: .5; } }
    @keyframes overlay-particle-four { 50% { transform: translate(-18px, -18px) scale(.75); opacity: .5; } }
    @keyframes overlay-light-one { 50% { transform: translate(12%, 18px) rotate(-12deg); opacity: .35; } }
    @keyframes overlay-light-two { 50% { transform: translate(-10%, -14px) rotate(-12deg); opacity: .38; } }
    @keyframes overlay-bubble-one {
      0% { left: 14%; top: 16%; transform: scale(.78); }
      28% { left: 68%; top: 12%; transform: scale(1.08); }
      55% { left: 76%; top: 70%; transform: scale(.88); }
      80% { left: 22%; top: 78%; transform: scale(1.16); }
      100% { left: 14%; top: 16%; transform: scale(.78); }
    }
    @keyframes overlay-bubble-two {
      0% { left: 68%; top: 58%; transform: scale(.82); }
      30% { left: 32%; top: 18%; transform: scale(1.14); }
      62% { left: 10%; top: 62%; transform: scale(.9); }
      84% { left: 56%; top: 78%; transform: scale(1.04); }
      100% { left: 68%; top: 58%; transform: scale(.82); }
    }
    @keyframes overlay-bubble-three {
      0% { left: 28%; top: 72%; transform: scale(.75); }
      35% { left: 12%; top: 34%; transform: scale(1.12); }
      70% { left: 72%; top: 22%; transform: scale(.82); }
      100% { left: 28%; top: 72%; transform: scale(.75); }
    }
    @keyframes overlay-ribbon-one {
      0%, 100% { transform: translate(-8%, -10px) rotate(-12deg) scaleY(.9); }
      50% { transform: translate(10%, 18px) rotate(-5deg) scaleY(1.15); }
    }
    @keyframes overlay-ribbon-two {
      0%, 100% { transform: translate(8%, 10px) rotate(10deg) scaleY(.9); }
      50% { transform: translate(-10%, -18px) rotate(16deg) scaleY(1.18); }
    }
    @keyframes overlay-star-one {
      0%, 100% { transform: translate(0, 0) rotate(0deg) scale(.65); opacity: .3; }
      50% { transform: translate(44px, 52px) rotate(180deg) scale(1.18); opacity: 1; }
    }
    @keyframes overlay-star-two {
      0%, 100% { transform: translate(0, 0) rotate(0deg) scale(.8); opacity: .35; }
      50% { transform: translate(-58px, 72px) rotate(-180deg) scale(1.2); opacity: 1; }
    }
    @keyframes overlay-star-three {
      0%, 100% { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: .32; }
      50% { transform: translate(-48px, -60px) rotate(180deg) scale(1.25); opacity: 1; }
    }
    @keyframes overlay-star-four {
      0%, 100% { transform: translate(0, 0) rotate(0deg) scale(.75); opacity: .32; }
      50% { transform: translate(62px, -48px) rotate(-180deg) scale(1.14); opacity: 1; }
    }
    @keyframes overlay-blob-one {
      0%, 100% { left: -8%; top: -18%; transform: scale(.84) rotate(0deg); }
      50% { left: 54%; top: 38%; transform: scale(1.2) rotate(90deg); }
    }
    @keyframes overlay-blob-two {
      0%, 100% { right: -10%; bottom: -20%; transform: scale(.9) rotate(0deg); }
      50% { right: 48%; bottom: 34%; transform: scale(1.18) rotate(-90deg); }
    }
    @keyframes overlay-prism-one {
      0%, 100% { left: 8%; top: 14%; transform: rotate(-8deg) scale(.8); }
      32% { left: 68%; top: 12%; transform: rotate(32deg) scale(1.1); }
      66% { left: 74%; top: 68%; transform: rotate(78deg) scale(.92); }
      84% { left: 18%; top: 76%; transform: rotate(120deg) scale(1.14); }
    }
    @keyframes overlay-prism-two {
      0%, 100% { left: 62%; top: 60%; transform: rotate(28deg) scale(.8); }
      35% { left: 22%; top: 24%; transform: rotate(-28deg) scale(1.12); }
      70% { left: 8%; top: 70%; transform: rotate(-72deg) scale(.9); }
    }
    @keyframes overlay-prism-three {
      0%, 100% { left: 40%; top: 34%; transform: rotate(-18deg) scale(.7); }
      50% { left: 78%; top: 78%; transform: rotate(65deg) scale(1.18); }
    }
    @keyframes overlay-comet-one {
      0% { left: -30%; top: 24%; opacity: 0; transform: rotate(23deg) scale(.7); }
      18% { opacity: .82; }
      58% { left: 58%; top: 72%; opacity: .74; transform: rotate(23deg) scale(1); }
      100% { left: 116%; top: 38%; opacity: 0; transform: rotate(23deg) scale(.72); }
    }
    @keyframes overlay-comet-two {
      0% { left: 120%; top: 76%; opacity: 0; transform: rotate(-28deg) scale(.72); }
      18% { opacity: .78; }
      58% { left: 22%; top: 24%; opacity: .72; transform: rotate(-28deg) scale(1); }
      100% { left: -34%; top: 58%; opacity: 0; transform: rotate(-28deg) scale(.7); }
    }
    @keyframes overlay-holo-grid {
      0% { background-position: 0 0; transform: perspective(360px) rotateX(58deg) rotateZ(-12deg) scale(1.25); }
      50% { background-position: 42px 28px; transform: perspective(360px) rotateX(58deg) rotateZ(-5deg) scale(1.34); }
      100% { background-position: 84px 56px; transform: perspective(360px) rotateX(58deg) rotateZ(-12deg) scale(1.25); }
    }
    @keyframes overlay-rainbow-one {
      0%, 100% { left: 8%; top: 8%; transform: rotate(0deg) scale(.74); }
      35% { left: 62%; top: 22%; transform: rotate(110deg) scale(1.08); }
      70% { left: 30%; top: 68%; transform: rotate(220deg) scale(.86); }
    }
    @keyframes overlay-rainbow-two {
      0%, 100% { right: 6%; bottom: 8%; transform: rotate(0deg) scale(.8); }
      50% { right: 58%; bottom: 52%; transform: rotate(-180deg) scale(1.14); }
    }
    @keyframes overlay-confetti-one { 50% { transform: translate(62px, 68px) rotate(260deg); opacity: .32; } }
    @keyframes overlay-confetti-two { 50% { transform: translate(-48px, 72px) rotate(-220deg); opacity: .9; } }
    @keyframes overlay-confetti-three { 50% { transform: translate(-56px, -62px) rotate(240deg); opacity: .28; } }
    @keyframes overlay-confetti-four { 50% { transform: translate(-70px, -26px) rotate(-270deg); opacity: .9; } }
    @keyframes overlay-confetti-five { 50% { transform: translate(54px, -72px) rotate(230deg); opacity: .35; } }
    @keyframes overlay-confetti-six { 50% { transform: translate(48px, 54px) rotate(-240deg); opacity: .9; } }
    @keyframes overlay-hexagon-one {
      0%, 100% { left: 22%; top: 14%; transform: rotate(0deg) scale(.72); }
      35% { left: 76%; top: 32%; transform: rotate(120deg) scale(1.08); }
      70% { left: 46%; top: 78%; transform: rotate(245deg) scale(.88); }
    }
    @keyframes overlay-hexagon-two {
      0%, 100% { left: 72%; top: 54%; transform: rotate(0deg) scale(.82); }
      36% { left: 18%; top: 72%; transform: rotate(-140deg) scale(1.12); }
      72% { left: 12%; top: 20%; transform: rotate(-270deg) scale(.86); }
    }
    @keyframes overlay-hexagon-three {
      0%, 100% { left: 34%; top: 72%; transform: rotate(0deg) scale(.7); }
      50% { left: 72%; top: 12%; transform: rotate(180deg) scale(1.25); }
    }
    @keyframes overlay-firefly-one { 50% { transform: translate(70px, 52px) scale(1.7); opacity: 1; } }
    @keyframes overlay-firefly-two { 50% { transform: translate(-68px, 66px) scale(1.4); opacity: .92; } }
    @keyframes overlay-firefly-three { 50% { transform: translate(-62px, -68px) scale(1.8); opacity: 1; } }
    @keyframes overlay-firefly-four { 50% { transform: translate(72px, -54px) scale(1.5); opacity: .88; } }
    @keyframes overlay-firefly-five { 50% { transform: translate(34px, -72px) scale(1.7); opacity: 1; } }
    @keyframes overlay-crystal-one {
      0%, 100% { left: 72%; top: 10%; transform: rotate(0deg) scale(.72); }
      50% { left: 18%; top: 70%; transform: rotate(190deg) scale(1.14); }
    }
    @keyframes overlay-crystal-two {
      0%, 100% { left: 10%; top: 52%; transform: rotate(0deg) scale(.76); }
      50% { left: 70%; top: 18%; transform: rotate(-210deg) scale(1.2); }
    }
    @keyframes overlay-crystal-three {
      0%, 100% { left: 76%; top: 70%; transform: rotate(0deg) scale(.7); }
      50% { left: 26%; top: 22%; transform: rotate(180deg) scale(1.22); }
    }
    @keyframes overlay-crystal-four {
      0%, 100% { left: 38%; top: 30%; transform: rotate(0deg) scale(.7); }
      50% { left: 82%; top: 76%; transform: rotate(-180deg) scale(1.3); }
    }
    @keyframes overlay-color-wave-one {
      0%, 100% { transform: translate(-12%, -12px) rotate(-9deg) scaleY(.82); }
      50% { transform: translate(12%, 18px) rotate(-2deg) scaleY(1.18); }
    }
    @keyframes overlay-color-wave-two {
      0%, 100% { transform: translate(12%, 12px) rotate(11deg) scaleY(.88); }
      50% { transform: translate(-12%, -20px) rotate(18deg) scaleY(1.14); }
    }
    @keyframes overlay-dust-one { 50% { transform: translate(62px, 42px) scale(1.8); opacity: 1; } }
    @keyframes overlay-dust-two { 50% { transform: translate(-50px, 56px) scale(.55); opacity: .25; } }
    @keyframes overlay-dust-three { 50% { transform: translate(-64px, -48px) scale(1.6); opacity: 1; } }
    @keyframes overlay-dust-four { 50% { transform: translate(-46px, -62px) scale(.6); opacity: .22; } }
    @keyframes overlay-dust-five { 50% { transform: translate(64px, -44px) scale(1.75); opacity: 1; } }
    @keyframes overlay-dust-six { 50% { transform: translate(56px, 50px) scale(.55); opacity: .22; } }
    @keyframes overlay-text-typewriter {
      0% { left: 18%; top: 18%; clip-path: inset(0 100% 0 0); transform: translate(-50%, -50%); }
      72%, 100% { left: 50%; top: 50%; clip-path: inset(0 0 0 0); transform: translate(-50%, -50%); }
    }
    @keyframes overlay-text-pulse {
      0%, 100% { left: 50%; top: 50%; opacity: .58; transform: translate(-50%, -50%) scale(.82); }
      50% { left: 50%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    }
    @keyframes overlay-text-slide {
      0% { left: -34%; top: 22%; opacity: 0; transform: translate(-50%, -50%) rotate(-5deg); }
      18% { left: 24%; top: 22%; opacity: 1; }
      52% { left: 70%; top: 72%; opacity: .96; transform: translate(-50%, -50%) rotate(4deg); }
      82% { left: 112%; top: 42%; opacity: 0; transform: translate(-50%, -50%) rotate(-3deg); }
      100% { left: 112%; top: 42%; opacity: 0; }
    }
    @keyframes overlay-text-wave {
      0%, 100% { left: 18%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg) skewX(-4deg); }
      25% { left: 38%; top: 34%; transform: translate(-50%, -50%) rotate(4deg) skewX(4deg); }
      50% { left: 62%; top: 66%; transform: translate(-50%, -50%) rotate(-4deg) skewX(-4deg); }
      75% { left: 82%; top: 42%; transform: translate(-50%, -50%) rotate(5deg) skewX(4deg); }
    }
    @keyframes overlay-text-flip {
      0%, 20% { left: 18%; top: 22%; opacity: 0; transform: translate(-50%, -50%) rotateY(-90deg) scale(.8); }
      38%, 62% { left: 50%; top: 50%; opacity: 1; transform: translate(-50%, -50%) rotateY(0deg) scale(1); }
      80%, 100% { left: 82%; top: 78%; opacity: 0; transform: translate(-50%, -50%) rotateY(90deg) scale(.8); }
    }
    @keyframes overlay-text-spiral {
      0% { left: 50%; top: 10%; opacity: .35; transform: translate(-50%, -50%) rotate(0deg) scale(.72); }
      25% { left: 84%; top: 28%; opacity: 1; transform: translate(-50%, -50%) rotate(90deg) scale(1); }
      50% { left: 72%; top: 82%; opacity: .86; transform: translate(-50%, -50%) rotate(180deg) scale(.88); }
      75% { left: 16%; top: 68%; opacity: 1; transform: translate(-50%, -50%) rotate(270deg) scale(1.04); }
      100% { left: 50%; top: 10%; opacity: .35; transform: translate(-50%, -50%) rotate(360deg) scale(.72); }
    }
    @keyframes overlay-text-zoom {
      0%, 100% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.18); }
      28%, 62% { left: 50%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
      82% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
    }
    @keyframes overlay-text-rainbow {
      0%, 100% { left: 20%; top: 20%; background-position: 0% 50%; transform: translate(-50%, -50%) rotate(-4deg); }
      50% { left: 78%; top: 76%; background-position: 100% 50%; transform: translate(-50%, -50%) rotate(4deg); }
    }
    @keyframes overlay-text-corner-drift {
      0%, 100% { left: 16%; top: 18%; transform: translate(-50%, -50%) rotate(-6deg) scale(.9); }
      25% { left: 84%; top: 18%; transform: translate(-50%, -50%) rotate(5deg) scale(1); }
      50% { left: 84%; top: 82%; transform: translate(-50%, -50%) rotate(-4deg) scale(.94); }
      75% { left: 16%; top: 82%; transform: translate(-50%, -50%) rotate(5deg) scale(1.04); }
    }
    @keyframes overlay-text-bounce {
      0%, 100% { left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.86); }
      20% { left: 24%; top: 50%; transform: translate(-50%, -50%) scale(1.04); }
      40% { left: 50%; top: 78%; transform: translate(-50%, -50%) scale(.92); }
      60% { left: 76%; top: 50%; transform: translate(-50%, -50%) scale(1.06); }
      80% { left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.96); }
    }
    @keyframes overlay-text-float {
      0% { left: 18%; top: 18%; transform: translate(-50%, -50%) rotate(-4deg) scale(.9); }
      25% { left: 76%; top: 22%; transform: translate(-50%, -50%) rotate(3deg) scale(1); }
      50% { left: 70%; top: 78%; transform: translate(-50%, -50%) rotate(-2deg) scale(.94); }
      75% { left: 24%; top: 70%; transform: translate(-50%, -50%) rotate(4deg) scale(1.04); }
      100% { left: 18%; top: 18%; transform: translate(-50%, -50%) rotate(-4deg) scale(.9); }
    }
    @keyframes overlay-text-drift {
      0% { left: 50%; top: 12%; transform: translate(-50%, -50%) rotate(0deg); }
      25% { left: 84%; top: 42%; transform: translate(-50%, -50%) rotate(6deg); }
      50% { left: 56%; top: 86%; transform: translate(-50%, -50%) rotate(-3deg); }
      75% { left: 14%; top: 54%; transform: translate(-50%, -50%) rotate(5deg); }
      100% { left: 50%; top: 12%; transform: translate(-50%, -50%) rotate(0deg); }
    }
    @keyframes overlay-text-orbit {
      0% { left: 50%; top: 12%; transform: translate(-50%, -50%) rotate(-3deg) scale(.92); }
      25% { left: 86%; top: 50%; transform: translate(-50%, -50%) rotate(5deg) scale(1); }
      50% { left: 50%; top: 88%; transform: translate(-50%, -50%) rotate(-3deg) scale(.94); }
      75% { left: 14%; top: 50%; transform: translate(-50%, -50%) rotate(4deg) scale(1.02); }
      100% { left: 50%; top: 12%; transform: translate(-50%, -50%) rotate(-3deg) scale(.92); }
    }

    #transcript span.active {
      color: #fff;
      background: linear-gradient(100deg, #8650ee, #12a9b4);
      box-shadow: 0 3px 10px #7650c538;
    }

    #transcript.no-word-highlight span.active {
      color: inherit;
      background: transparent;
      box-shadow: none;
    }

    .editor {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .seo-content {
      width: 100%;
      box-sizing: border-box;
      margin-top: 28px;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid #e7def8;
      border-radius: 24px;
      color: #3f3274;
      background: linear-gradient(135deg, #fcfaff 0%, #f7fbff 52%, #f5fffd 100%);
    }

    .seo-intro {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

    .seo-kicker {
      margin: 0 0 8px;
      color: #8650ee;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .seo-content h2 {
      margin: 0;
      color: #172236;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .seo-lead {
      margin: 14px auto 0;
      color: #575b81;
      font-size: 16px;
      line-height: 1.7;
    }

    .seo-feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .seo-card {
      min-width: 0;
      padding: 20px 18px;
      border: 1px solid #e7def8;
      border-radius: 18px;
      background: rgba(255, 255, 255, .84);
    }

    .seo-card-icon {
      display: grid;
      width: auto;
      height: auto;
      place-items: center;
      margin-bottom: 12px;
      color: inherit;
      background: transparent;
      font-size: 26px;
      line-height: 1;
    }

    .seo-card h3 {
      margin: 0;
      color: #25304d;
      font-size: 17px;
      line-height: 1.3;
    }

    .seo-card p {
      margin: 8px 0 0;
      color: #575b81;
      font-size: 14px;
      line-height: 1.65;
    }

    .seo-steps {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #e7def8;
    }

    .seo-steps h3 {
      margin: 0;
      color: #25304d;
      font-size: 21px;
      text-align: center;
    }

    .seo-steps ol {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      counter-reset: creator-step;
    }

    .seo-steps li {
      position: relative;
      min-width: 0;
      padding: 16px 16px 16px 52px;
      border-radius: 14px;
      color: #575b81;
      background: rgba(255, 255, 255, .62);
      font-size: 14px;
      line-height: 1.55;
      counter-increment: creator-step;
    }

    .seo-steps li::before {
      position: absolute;
      top: 15px;
      left: 16px;
      display: grid;
      width: 25px;
      height: 25px;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, #8650ee, #12a9b4);
      content: counter(creator-step);
      font-size: 12px;
      font-weight: 900;
    }

    .seo-steps strong { color: #3f3274; }

    .seo-closing {
      max-width: 820px;
      margin: 24px auto 0;
      color: #575b81;
      font-size: 14px;
      line-height: 1.7;
      text-align: center;
    }

    @media (max-width: 1100px) {
      .control-row { gap: 28px; }
      .voice-row {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 180px);
        column-gap: 0;
        row-gap: 8px;
      }
      .voice-row label[for="highlight-mode"] { margin-left: 22px; }
      .editor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .seo-feature-grid,
      .seo-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 820px) {
      .content {
        grid-template-columns: 1fr;
        grid-template-areas: "controls" "scene" "status" "overlay" "uploads" "code" "panel" "editor" "export" "recorder" "note" "seo";
      }
      .control-row {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
      }
      .control-row .top-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
      }
      .control-row .top-actions button { width: 100%; }
      .voice-row {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
      }
      .voice-row label,
      .voice-row label[for="highlight-mode"] { margin-left: 0; margin-right: 0; }
      .voice-row #voice,
      .voice-row #highlight-mode { width: 100%; }
      .overlay-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .overlay-control {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .overlay-row select {
        width: 100%;
        min-width: 0;
      }
    }

    @media (max-width: 820px) {
      .editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 560px) {
      .editor {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .seo-feature-grid,
      .seo-steps ol { grid-template-columns: 1fr; }
    }

    .script-card textarea {
      display: block;
      width: 100%;
      min-height: 92px;
      height: 92px;
      resize: vertical;
      border: 1px solid #d8cdf2;
      border-radius: 14px;
      padding: 14px 15px;
      color: #30254d;
      background: #fff;
      font-size: 14px;
      line-height: 1.55;
      outline: none;
      transition: border-color .16s ease, background .16s ease;
    }

    .script-card textarea::placeholder {
      color: #8b82a2;
      opacity: 1;
    }

    .script-card textarea:hover {
      border-color: #bda7ef;
    }

    .script-card textarea:focus {
      border-color: #8650ee;
      background: #fefcff;
      box-shadow: 0 0 0 4px #8650ee1c;
    }

    .script-card .overlay-text-editor {
      min-height: 72px;
      height: 72px;
      background: #fbfaff;
      border-color: #cfc0ec;
    }

    .code-editor-card {
      padding: 18px;
      border: 1px solid #ddd6f3;
      border-radius: 18px;
      background: #fff;
    }

    .code-editor-card label {
      margin: 0 0 9px;
      color: #7048bd;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .code-editor-card textarea {
      display: block;
      width: 100%;
      resize: vertical;
      border: 1px solid #d8cdf2;
      border-radius: 14px;
      padding: 14px 15px;
      color: #30254d;
      background: #fff;
      font-size: 14px;
      line-height: 1.55;
      outline: none;
      transition: border-color .16s ease, background .16s ease;
    }

    .code-editor-card textarea::placeholder {
      color: #8b82a2;
      opacity: 1;
    }

    .code-editor-card textarea:hover {
      border-color: #bda7ef;
    }

    .code-editor-card textarea:focus {
      border-color: #8650ee;
      background: #fefcff;
      box-shadow: 0 0 0 4px #8650ee1c;
    }

    .code-editor-card #animation-code {
      min-height: 220px;
      height: 220px;
      color: #25304d;
      background: #fbfaff;
      font-family: Consolas, "Courier New", monospace;
      font-size: 13px;
      line-height: 1.6;
      tab-size: 2;
    }

    .code-editor-card #animation-text {
      min-height: 100px;
      height: 100px;
      margin-top: 2px;
    }

    @media (max-width: 480px) {
      .page-heading { padding: 28px 16px 16px; }
      .page-heading h1 { font-size: clamp(40px, 11vw, 54px); }
      .page-heading .tagline { font-size: 13px; }
      .voice-row #voice { min-width: 0; width: 100%; }
      .voice-row #highlight-mode { min-width: 0; width: 100%; }
    }

    @media (max-width: 560px) {
      .script-card textarea,
      .code-editor-card #animation-text { min-height: 100px; height: 100px; }
      .code-editor-card #animation-code { min-height: 190px; height: 190px; }
    }

    .voice-row .music-control {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 1.15fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      min-width: 0;
      margin-top: 4px;
      padding: 12px 14px;
      border: 1px solid #e1e8f0;
      border-radius: 14px;
      background: #f8fafc;
    }

    .voice-row .music-control label {
      margin: 0;
      color: #334155;
      font-size: 13px;
      font-weight: 750;
    }

    .voice-row .music-control select {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      border: 1px solid #d5dfeb;
      border-radius: 10px;
      padding: 0 11px;
      color: #243247;
      background: #fff;
      font-size: 13px;
    }

    .voice-row .music-control .music-preview-button {
      min-height: 42px;
      margin: 0;
      border: 1px solid #2563eb;
      border-radius: 10px;
      padding: 0 14px;
      color: #fff;
      background: #2563eb;
      box-shadow: 0 4px 10px #2563eb22;
      font-size: 13px;
      font-weight: 750;
      white-space: nowrap;
    }

    .voice-row .music-control .music-preview-button:hover:not(:disabled) {
      border-color: #1d4ed8;
      background: #1d4ed8;
    }

    .voice-row .music-control .music-preview-button:disabled {
      border-color: #d5dfeb;
      color: #607086;
      background: #e8eef6;
      box-shadow: none;
      opacity: 1;
    }

    .voice-row .music-control p {
      margin: 0;
      color: #64748b;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.4;
    }

    @media (max-width: 820px) {
      .voice-row .music-control {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
      }
      .voice-row .music-control .music-preview-button { width: 100%; }
    }

    /* Keep playback, voice settings, music, and volume in a predictable flow. */
    .content > .control-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "actions" "voice" "music" "volume";
      align-items: stretch;
      gap: 14px;
      width: 100%;
    }

    .content > .control-row > .top-actions {
      grid-area: actions;
      display: flex;
      flex: none;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: 100%;
      margin: 0;
    }

    .content > .control-row > .top-actions button { width: auto; }

    .content > .control-row > .voice-row {
      grid-area: voice;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: end;
      gap: 12px;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 14px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #f8fafc;
      box-sizing: border-box;
    }

    .content > .control-row > .voice-row > .voice-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: end;
      gap: 4px;
      min-width: 0;
    }

    .content > .control-row > .voice-row .voice-field label {
      display: block;
      margin: 0;
      overflow: hidden;
      color: #3f3274;
      font-size: 12px;
      font-weight: 850;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .content > .control-row > .voice-row #voice-language,
    .content > .control-row > .voice-row #voice,
    .content > .control-row > .voice-row #highlight-mode {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: none;
      height: 48px;
      min-height: 48px;
      margin: 0;
      border: 1px solid #d8cdf2;
      border-radius: 13px;
      padding: 0 14px;
      color: #30254d;
      background: #fff;
      font: inherit;
      font-size: 13px;
      box-sizing: border-box;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .content > .control-row > .voice-row #voice-language:hover,
    .content > .control-row > .voice-row #voice:hover,
    .content > .control-row > .voice-row #highlight-mode:hover {
      border-color: #bda7ef;
    }

    .content > .control-row > .voice-row #voice-language:focus,
    .content > .control-row > .voice-row #voice:focus,
    .content > .control-row > .voice-row #highlight-mode:focus {
      border-color: #8650ee;
      box-shadow: 0 0 0 4px #8650ee1c;
      outline: none;
    }

    .content > .control-row > .music-control {
      grid-area: music;
      display: grid;
      grid-template-columns: max-content minmax(220px, 340px) max-content minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 14px 16px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: #f1f7ff;
      box-sizing: border-box;
    }

    .content > .control-row > .music-control label {
      margin: 0;
      color: #1e3a8a;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .content > .control-row > .music-control select {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      border: 1px solid #cbdaf0;
      border-radius: 10px;
      padding: 0 12px;
      color: #172b4d;
      background: #fff;
      font: inherit;
      font-size: 13px;
    }

    .content > .control-row > .music-control .music-preview-button {
      min-height: 44px;
      margin: 0;
      border: 1px solid #2563eb;
      border-radius: 10px;
      padding: 0 15px;
      color: #fff;
      background: #2563eb;
      box-shadow: 0 4px 10px #2563eb22;
      font-size: 13px;
      font-weight: 750;
      white-space: nowrap;
    }

    .content > .control-row > .music-control .music-preview-button:hover:not(:disabled) {
      border-color: #1d4ed8;
      background: #1d4ed8;
    }

    .content > .control-row > .music-control .music-preview-button:disabled {
      border-color: #cbd5e1;
      color: #64748b;
      background: #e2e8f0;
      box-shadow: none;
      opacity: 1;
    }

    .content > .control-row > .music-control p {
      margin: 0;
      color: #53657f;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.45;
    }

    .content > .control-row > .narration-volume-row {
      grid-area: volume;
      flex: none;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    @media (max-width: 820px) {
      .content > .control-row > .voice-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .content > .control-row > .music-control {
        grid-template-columns: max-content minmax(0, 1fr) max-content;
      }

      .content > .control-row > .music-control p { grid-column: 1 / -1; }

      .content > .control-row > .music-control .music-preview-button { width: auto; }
    }

    @media (max-width: 560px) {
      .content > .control-row { gap: 10px; }

      .content > .control-row > .voice-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 12px;
      }

      .content > .control-row > .voice-row label { margin-top: 3px; }

      .content > .control-row > .music-control {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      .content > .control-row > .music-control p { grid-column: 1; }

      .content > .control-row > .music-control .music-preview-button,
      .content > .control-row > .top-actions button { width: 100%; }

      .content > .control-row > .top-actions { display: grid; grid-template-columns: 1fr 1fr; }
    }