[data-logic-armor] {
      --clean-sky: light-dark(#e8f2ff, #0a1024);
      --clean-horizon: light-dark(#bdd4fa, #17264d);
      --clean-ground: light-dark(#c2cad9, #242b40);
      --clean-city: light-dark(#7286ac, #2c395e);
      --clean-panel: light-dark(#ffffff, #20263d);
      --clean-ink: light-dark(#15182a, #f6f7ff);
      --clean-muted: light-dark(#525b72, #c2c9da);
      --clean-cyan: light-dark(#3be6fa, #79f4ff);
      --clean-fire: light-dark(#ffad2e, #ffd166);
      --clean-green: light-dark(#12aa6d, #36ef9b);
      --clean-red: light-dark(#e52b45, #ff4e67);
      color: var(--clean-ink);
    }

    [data-logic-armor] .clean-stage {
      position: relative;
      min-height: 680px;
      overflow: hidden;
      border-radius: 24px;
      background:
        radial-gradient(circle at 79% 15%, color-mix(in srgb, var(--clean-fire) 42%, transparent), transparent 14%),
        linear-gradient(180deg, var(--clean-sky), var(--clean-horizon));
    }

    [data-logic-armor] .clean-heading {
      position: absolute;
      z-index: 30;
      top: 22px;
      left: 24px;
      max-width: 310px;
    }

    [data-logic-armor] .clean-heading h2,
    [data-logic-armor] .clean-heading p { margin: 0; }
    [data-logic-armor] .clean-heading p { margin-top: 6px; color: var(--clean-muted); }

    [data-logic-armor] .clean-city {
      position: absolute;
      inset: auto 0 80px;
      height: 125px;
      background: var(--clean-city);
      opacity: .72;
      clip-path: polygon(0 55%,5% 55%,5% 20%,13% 20%,13% 42%,17% 42%,17% 5%,27% 5%,27% 54%,32% 54%,32% 29%,42% 29%,42% 50%,47% 50%,47% 13%,58% 13%,58% 53%,63% 53%,63% 0,72% 0,72% 39%,77% 39%,77% 17%,89% 17%,89% 48%,93% 48%,93% 26%,100% 26%,100% 100%,0 100%);
    }

    [data-logic-armor] .clean-ground {
      position: absolute;
      inset: auto 0 0;
      height: 84px;
      background: linear-gradient(180deg, var(--clean-ground), color-mix(in srgb, var(--clean-ground) 66%, var(--clean-ink)));
    }

    [data-logic-armor] .clean-shadow {
      position: absolute;
      z-index: 4;
      left: 50%;
      bottom: 72px;
      width: 158px;
      height: 24px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--clean-ink) 30%, transparent);
      filter: blur(7px);
      transform: translateX(-50%);
      transition: opacity 240ms ease, scale 240ms ease;
    }

    [data-logic-armor] .clean-bubble {
      position: absolute;
      z-index: 35;
      top: 124px;
      left: calc(50% + 110px);
      max-width: 178px;
      padding: 11px 14px;
      border-radius: 16px 16px 16px 4px;
      background: var(--clean-panel);
      color: var(--clean-ink);
      box-shadow: 0 7px 0 color-mix(in srgb, var(--clean-ink) 16%, transparent);
      font-weight: 500;
    }

    [data-logic-armor] .clean-actor {
      position: absolute;
      z-index: 10;
      left: 50%;
      bottom: 79px;
      width: 230px;
      height: 472px;
      transform: translateX(-50%);
      transform-origin: 50% 88%;
    }

    [data-logic-armor] .clean-actor img {
      display: block;
      width: 230px;
      height: 472px;
      object-fit: contain;
      filter: drop-shadow(0 17px 13px rgb(0 0 0 / 30%));
      user-select: none;
      pointer-events: none;
    }

    [data-logic-armor] .clean-reactor {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 105px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--clean-cyan) 76%, transparent);
      box-shadow: 0 0 10px var(--clean-cyan), 0 0 26px var(--clean-cyan);
      transform: translateX(-50%);
      transition: background 180ms ease, box-shadow 180ms ease, scale 180ms ease;
      animation: clean-reactor-pulse 1.3s ease-in-out infinite;
    }

    [data-logic-armor] .clean-thruster {
      position: absolute;
      z-index: 8;
      width: 23px;
      height: 67px;
      opacity: 0;
      background: linear-gradient(180deg, var(--clean-cyan), var(--clean-fire) 52%, transparent);
      clip-path: polygon(33% 0,67% 0,100% 56%,54% 100%,0 56%);
      filter: drop-shadow(0 9px 6px var(--clean-fire));
      transform-origin: top center;
      transition: opacity 450ms ease;
    }

    [data-logic-armor] .clean-boot-left { left: 35px; bottom: -41px; transform: rotate(-2deg); }
    [data-logic-armor] .clean-boot-right { right: 53px; bottom: -41px; transform: rotate(2deg); }
    [data-logic-armor] .clean-palm-left { left: 19px; top: 236px; transform: rotate(7deg); }
    [data-logic-armor] .clean-palm-right { right: 19px; top: 236px; transform: rotate(-7deg); }

    [data-logic-armor] .clean-speed {
      position: absolute;
      z-index: 2;
      top: 155px;
      left: 50%;
      width: 3px;
      height: 130px;
      border-radius: 4px;
      background: linear-gradient(180deg, transparent, var(--clean-cyan), transparent);
      opacity: 0;
    }

    [data-logic-armor] .speed-a { margin-left: -145px; }
    [data-logic-armor] .speed-b { margin-left: 138px; top: 230px; height: 170px; }
    [data-logic-armor] .speed-c { margin-left: -88px; top: 330px; height: 90px; }

    [data-logic-armor] .clean-impact {
      position: absolute;
      z-index: 7;
      left: 50%;
      bottom: 76px;
      width: 58px;
      height: 19px;
      border: 5px solid var(--clean-fire);
      border-radius: 50%;
      opacity: 0;
      transform: translateX(-50%) scale(.2);
    }

    [data-logic-armor] .dust,
    [data-logic-armor] .dust::before,
    [data-logic-armor] .dust::after {
      position: absolute;
      z-index: 6;
      width: 35px;
      height: 20px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--clean-ground) 75%, transparent);
      content: "";
      opacity: 0;
    }

    [data-logic-armor] .dust { left: calc(50% - 15px); bottom: 76px; }
    [data-logic-armor] .dust::before { left: -52px; top: 3px; }
    [data-logic-armor] .dust::after { left: 50px; top: -1px; }

    [data-logic-armor] .clean-controls {
      position: absolute;
      z-index: 40;
      left: 18px;
      right: 18px;
      bottom: 17px;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    [data-logic-armor] .clean-button {
      min-height: 42px;
      padding: 8px 14px;
      border: 1px solid color-mix(in srgb, var(--clean-ink) 20%, transparent);
      border-radius: 12px;
      background: var(--clean-panel);
      color: var(--clean-ink);
      font: inherit;
      font-weight: 500;
      cursor: pointer;
    }

    [data-logic-armor] .clean-button[aria-pressed="true"] {
      background: var(--clean-ink);
      color: var(--clean-panel);
    }

    [data-logic-armor] .clean-idle .clean-actor {
      animation: clean-idle 2.8s ease-in-out infinite;
    }

    [data-logic-armor] .clean-launch .clean-actor,
    [data-logic-armor] .clean-fly .clean-actor {
      animation: none;
    }

    [data-logic-armor] .clean-launch .clean-thruster,
    [data-logic-armor] .clean-fly .clean-thruster {
      opacity: .96;
      animation: clean-flame 150ms ease-in-out infinite alternate;
    }

    [data-logic-armor] .clean-launch .clean-speed,
    [data-logic-armor] .clean-fly .clean-speed {
      opacity: .62;
      animation: clean-speed-drop 850ms linear infinite;
    }

    [data-logic-armor] .clean-launch .clean-shadow,
    [data-logic-armor] .clean-fly .clean-shadow {
      opacity: .18;
      scale: .56;
    }

    [data-logic-armor] .clean-land .clean-actor {
      animation: clean-land 1.55s cubic-bezier(.16,.76,.26,1) both;
    }

    [data-logic-armor] .clean-land .clean-impact {
      animation: clean-impact 1.55s ease-out both;
    }

    [data-logic-armor] .clean-land .dust {
      animation: clean-dust 1.55s ease-out both;
    }

    [data-logic-armor] .clean-success .clean-actor {
      animation: clean-success 720ms ease both;
    }

    [data-logic-armor] .clean-success .clean-reactor {
      background: var(--clean-green);
      box-shadow: 0 0 12px var(--clean-green), 0 0 38px var(--clean-green);
      scale: 1.34;
    }

    [data-logic-armor] .clean-fail .clean-actor {
      animation: clean-fail 620ms ease both;
    }

    [data-logic-armor] .clean-fail .clean-reactor {
      background: var(--clean-red);
      box-shadow: 0 0 12px var(--clean-red), 0 0 38px var(--clean-red);
    }

    @keyframes clean-idle {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(-7px); }
    }

    @keyframes clean-reactor-pulse {
      50% { filter: brightness(1.28); }
    }

    @keyframes clean-takeoff {
      0% { transform: translate(-50%, 0) rotate(0deg); }
      18% { transform: translate(-50%, 5px) scaleY(.985); }
      48% { transform: translate(-50%, -34px) rotate(-.4deg); }
      76% { transform: translate(-50%, -82px) rotate(-1deg); }
      100% { transform: translate(-50%, -110px) rotate(-1.5deg); }
    }

    @keyframes clean-hover {
      0%,100% { transform: translate(-50%, -110px) rotate(-1.5deg); }
      50% { transform: translate(-50%, -118px) rotate(1deg); }
    }

    @keyframes clean-flame {
      from { scale: 1 .72; }
      to { scale: 1 1.2; }
    }

    @keyframes clean-speed-drop {
      from { transform: translateY(-110px); }
      to { transform: translateY(190px); }
    }

    @keyframes clean-land {
      0% { transform: translate(-50%, -370px) scale(.84); }
      64% { transform: translate(-50%, 0) scale(1); }
      73% { transform: translate(-50%, 15px) scaleX(1.035) scaleY(.94); }
      84% { transform: translate(-50%, -7px) scaleX(.99) scaleY(1.015); }
      100% { transform: translate(-50%, 0); }
    }

    @keyframes clean-impact {
      0%,62% { opacity: 0; transform: translateX(-50%) scale(.2); }
      68% { opacity: .92; }
      100% { opacity: 0; transform: translateX(-50%) scale(6); }
    }

    @keyframes clean-dust {
      0%,62% { opacity: 0; transform: translateY(8px) scale(.3); }
      70% { opacity: .78; }
      100% { opacity: 0; transform: translateY(-17px) scale(2.2); }
    }

    @keyframes clean-success {
      0%,100% { transform: translateX(-50%); }
      45% { transform: translate(-50%, -24px) scale(1.05); }
    }

    @keyframes clean-fail {
      0%,100% { transform: translateX(-50%); }
      20% { transform: translateX(calc(-50% - 8px)); }
      40% { transform: translateX(calc(-50% + 8px)); }
      60% { transform: translateX(calc(-50% - 5px)); }
    }

    @media (max-width: 560px) {
      [data-logic-armor] .clean-stage { min-height: 700px; }
      [data-logic-armor] .clean-heading { left: 18px; right: 18px; max-width: none; }
      [data-logic-armor] .clean-actor { bottom: 95px; scale: .9; }
      [data-logic-armor] .clean-bubble { left: calc(50% + 74px); top: 128px; max-width: 138px; }
      [data-logic-armor] .clean-button { min-height: 44px; padding-inline: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      [data-logic-armor] *,
      [data-logic-armor] *::before,
      [data-logic-armor] *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
      }
    }