#space{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
    .fx{position:fixed;inset:0;z-index:1;pointer-events:none;background:
      radial-gradient(1400px 900px at 50% 60%,transparent 40%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.65) 100%),
      repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 2px,transparent 6px);
      mix-blend-mode:overlay;opacity:.25}

    /* Droid (original, inspired sci-fi helper bot; not a copied asset) */
    .droid{width:180px;height:240px;position:relative;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));user-select:none;will-change:transform}
    .droid .head{width:140px;height:70px;position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:999px 999px 28px 28px;
      background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(210,230,255,.72));
      border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
    .droid .head::before{content:"";position:absolute;inset:-40% -40%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 55%);
      transform:translateX(-20%);animation:shimmer 3.6s ease-in-out infinite;opacity:.9}
    @keyframes shimmer{0%,100%{transform:translateX(-30%) translateY(25%)}50%{transform:translateX(35%) translateY(-10%)}}
    .droid .eye{width:20px;height:20px;position:absolute;left:58%;top:18px;border-radius:999px;
      background:radial-gradient(circle at 35% 35%,rgba(120,255,245,.9),rgba(0,0,0,.75) 55%,rgba(0,0,0,.95));
      box-shadow:0 0 18px rgba(102,255,240,.35);border:1px solid rgba(255,255,255,.18)}
    .droid .headBand{position:absolute;left:0;right:0;top:40px;height:16px;background:linear-gradient(90deg,rgba(102,255,240,0),rgba(102,255,240,.25),rgba(106,123,255,.25),rgba(102,255,240,0));opacity:.75}

    .droid .body{width:160px;height:150px;position:absolute;left:50%;top:70px;transform:translateX(-50%);
      border-radius:26px 26px 30px 30px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(210,230,255,.68));
      border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
    .droid .stripe{position:absolute;left:10px;right:10px;height:16px;background:linear-gradient(90deg,rgba(106,123,255,.65),rgba(102,255,240,.55));opacity:.65;border-radius:999px}
    .droid .stripe.s1{top:18px}
    .droid .stripe.s2{top:44px;opacity:.55}
    .droid .panel{position:absolute;left:18px;top:76px;width:64px;height:44px;border-radius:14px;border:1px solid rgba(0,0,0,.10);
      background:rgba(0,0,0,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
    .droid .panel::before{content:"";position:absolute;inset:9px 10px auto auto;width:14px;height:14px;border-radius:6px;
      background:rgba(102,255,240,.7);box-shadow:0 0 12px rgba(102,255,240,.35)}
    .droid .panel::after{content:"";position:absolute;left:10px;bottom:10px;width:40px;height:10px;border-radius:999px;background:rgba(106,123,255,.55);opacity:.8}
    .droid .vents{position:absolute;right:18px;top:76px;width:64px;height:44px;border-radius:14px;border:1px solid rgba(0,0,0,.10);
      background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14),rgba(0,0,0,.14) 3px,rgba(255,255,255,.08) 4px,rgba(255,255,255,.08) 7px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);opacity:.9}

    .droid .leg{position:absolute;bottom:0;width:46px;height:112px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(210,230,255,.62));
      border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
    .droid .leg.left{left:2px;transform:rotate(-2deg)}
    .droid .leg.right{right:2px;transform:rotate(2deg)}
    .droid .leg::after{content:"";position:absolute;left:10px;right:10px;top:18px;height:12px;border-radius:999px;background:rgba(106,123,255,.55);opacity:.75}

    .droid .foot{position:absolute;bottom:-6px;width:54px;height:20px;border-radius:999px;background:rgba(0,0,0,.20);opacity:.35}
    .droid .foot.left{left:-2px}
    .droid .foot.right{right:-2px}

    /* Rolling wheel (center) */
    .droid .wheel{
      position:absolute; left:50%; bottom: 6px; transform:translateX(-50%);
      width:56px; height:56px; border-radius:999px;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.25), transparent 45%),
        radial-gradient(circle at 55% 65%, rgba(0,0,0,.18), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(210,230,255,.25));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 10px 18px rgba(0,0,0,.25);
      overflow:hidden;
      will-change: transform;
    }
    .droid .wheel::before{
      content:"";
      position:absolute; inset:10px;
      border-radius:999px;
      border:1px dashed rgba(0,0,0,.25);
      opacity:.55;
    }
    .droid .wheel::after{
      content:"";
      position:absolute; left:50%; top:0; bottom:0; width:2px;
      transform:translateX(-50%);
      background: rgba(106,123,255,.45);
      opacity:.6;
    }

    /* Subtle idle bob */
    .bob{animation:bob 3.2s ease-in-out infinite;transform-origin:50% 100%}
    @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

    /* Rolling animation classes toggled by JS */
    .rolling{
      animation: roll 2.8s ease-in-out infinite;
    }
    @keyframes roll{
      0%,100%{ transform: translateX(0) rotate(0deg); }
      25%{ transform: translateX(-10px) rotate(-1.4deg); }
      50%{ transform: translateX(10px) rotate(1.2deg); }
      75%{ transform: translateX(-6px) rotate(-0.8deg); }
    }
    .wheelSpin{
      animation: wheelSpin 0.9s linear infinite;
    }
    @keyframes wheelSpin{ to{ transform: translateX(-50%) rotate(360deg); } }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .bob, .rolling, .wheelSpin, .droid .head::before { animation:none !important; }
    }