.scene {
      position: relative;
      width: 360px;
      height: 340px;
    }

    .floor {
      position: absolute;
      left: 50%;
      bottom: 42px;
      width: 250px;
      height: 24px;
      translate: -50% 0;
      border-radius: 50%;
      background: rgba(17, 17, 17, .07);
      filter: blur(5px);
      transition: width .5s var(--ease-out), opacity .5s;
    }

    .buddy {
      position: absolute;
      left: 50%;
      bottom: 55px;
      z-index: 3;
      width: 176px;
      aspect-ratio: 1;
      translate: -50% 0;
      border-radius: 50%;
      background: #151515;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: inset -12px -14px 30px rgba(0,0,0,.18), inset 8px 8px 20px rgba(255,255,255,.04), 0 0 0 10px rgba(82,109,255,.035), 0 24px 60px rgba(0,0,0,.42);
      transform-origin: 50% 100%;
      transition: transform .55s var(--ease-out), translate .55s var(--ease-out);
    }

    .eyes {
      position: absolute;
      left: 50%;
      top: 43%;
      width: 70px;
      height: 38px;
      translate: -50% -50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: translate .42s var(--ease-out), top .42s var(--ease-out);
    }

    .eye {
      width: 20px;
      height: 32px;
      border-radius: 50%;
      background: #fffefa;
      transform-origin: center;
      transition: transform .3s var(--ease-out), border-radius .3s, height .3s, translate .3s;
    }

    .thoughts {
      position: absolute;
      z-index: 5;
      left: 69%;
      top: 4%;
      width: 86px;
      height: 80px;
      opacity: 0;
      scale: .6;
      transition: opacity .3s, scale .45s var(--ease-out);
    }

    .thoughts span {
      position: absolute;
      display: block;
      border-radius: 50%;
      background: var(--blue);
      animation: float 1.4s ease-in-out infinite alternate;
    }

    .thoughts span:nth-child(1) { width: 12px; height: 12px; left: 5px; bottom: 8px; }
    .thoughts span:nth-child(2) { width: 18px; height: 18px; left: 29px; bottom: 29px; animation-delay: -.2s; }
    .thoughts span:nth-child(3) { width: 28px; height: 28px; right: 3px; top: 2px; animation-delay: -.4s; }

    .pocket {
      position: absolute;
      right: 18px;
      bottom: 54px;
      z-index: 2;
      width: 68px;
      height: 34px;
      overflow: hidden;
      opacity: 0;
      transform: scaleX(.2);
      transform-origin: center bottom;
      transition: opacity .18s, transform .38s var(--ease-out);
    }

    .pocket::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 6px solid #262626;
      border-bottom: 0;
      border-radius: 70px 70px 0 0;
      background: #0a0a0a;
    }

    .laptop {
      position: absolute;
      z-index: 6;
      left: 50%;
      bottom: 48px;
      width: 154px;
      height: 108px;
      opacity: 0;
      translate: -50% 0;
      transform: scale(.45) translate(180px, 80px) rotate(18deg);
      transition: opacity .14s, transform .46s var(--ease-out), translate .46s var(--ease-out);
    }

    .screen {
      position: absolute;
      left: 8px;
      top: 0;
      width: 138px;
      height: 88px;
      padding: 0;
      overflow: hidden;
      border: 4px solid #858995;
      border-radius: 10px 10px 5px 5px;
      background: linear-gradient(145deg, #3a3d47, #202229 68%);
      box-shadow: inset 0 1px rgba(255,255,255,.18), 0 15px 22px rgba(0,0,0,.16);
    }

    .code-line {
      position: absolute;
      right: 13px;
      bottom: 16px;
      display: block;
      width: 30px;
      height: 4px;
      border-radius: 99px;
      background: #aeb3bf;
      transform-origin: left;
    }

    .code-line:last-child { width: 20px; bottom: 9px; }

    .sticker-code {
      position: absolute;
      left: 10px;
      top: 11px;
      color: #91a4ff;
      font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: -2px;
      transform: rotate(-4deg);
    }

    .pear-mark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 17px;
      height: 21px;
      translate: -50% -42%;
      border-radius: 58% 58% 52% 52% / 66% 66% 44% 44%;
      background: #e6e7eb;
      box-shadow: 0 1px 4px rgba(0,0,0,.28);
    }

    .pear-mark::before {
      content: "";
      position: absolute;
      left: 7px;
      top: -4px;
      width: 4px;
      height: 7px;
      border-radius: 70% 15% 70% 20%;
      background: #e6e7eb;
      transform: rotate(21deg);
    }

    .pear-mark i {
      position: absolute;
      left: 11px;
      top: -7px;
      width: 8px;
      height: 5px;
      border-radius: 90% 10% 90% 10%;
      background: #e6e7eb;
      transform: rotate(-18deg);
    }

    .sticker-star {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 10px;
      height: 10px;
      background: #b9a1ff;
      clip-path: polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%);
    }

    .sticker-tile {
      position: absolute;
      left: 13px;
      bottom: 12px;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      background: linear-gradient(135deg, #6f8fff 0 48%, #7964e8 49% 100%);
      transform: rotate(8deg);
    }

    .base {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 154px;
      height: 15px;
      border-radius: 3px 3px 12px 12px;
      background: #d2d3d6;
      clip-path: polygon(7% 0, 93% 0, 100% 70%, 94% 100%, 6% 100%, 0 70%);
    }

    .hands { opacity: 0; transition: opacity .2s; }
    .hand {
      position: absolute;
      z-index: 7;
      bottom: 43px;
      width: 22px;
      height: 15px;
      border-radius: 50%;
      background: #151515;
    }
    .hand:first-child { left: 87px; }
    .hand:last-child { right: 87px; }

    .check {
      position: absolute;
      z-index: 8;
      left: 68%;
      top: 7%;
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      opacity: 0;
      scale: .2;
      rotate: -18deg;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 10px 25px rgba(44,191,88,.22);
      transition: opacity .15s, scale .55s cubic-bezier(.17,1.75,.4,1), rotate .55s var(--ease-out);
    }

    .check::after {
      content: "";
      width: 23px;
      height: 12px;
      border-left: 5px solid white;
      border-bottom: 5px solid white;
      transform: translateY(-2px) rotate(-45deg);
    }

    .impact {
      position: absolute;
      left: 73%;
      bottom: 64px;
      opacity: 0;
    }

    .impact::before,
    .impact::after { content: ""; position: absolute; inset: 0; margin: auto; width: 25px; height: 2px; border-radius: 9px; background: var(--blue); }
    .impact::after { transform: rotate(90deg); }

    /* State choreography */
    .scene[data-state="thinking"] .thoughts { opacity: 1; scale: 1; }
    .scene[data-state="thinking"] .eyes { translate: -42% -65%; }
    .scene[data-state="thinking"] .eye { transform: rotate(12deg); }
    .scene[data-state="pocket"] .pocket,
    .scene[data-state="launch"] .pocket { opacity: 1; transform: scaleX(1); }
    .scene[data-state="pocket"] .eyes,
    .scene[data-state="launch"] .eyes { translate: 0 -35%; }
    .scene[data-state="launch"] .laptop { opacity: 1; transform: scale(.78) translate(96px, -176px) rotate(-10deg); }
    .scene[data-state="land"] .laptop,
    .scene[data-state="working"] .laptop,
    .scene[data-state="correcting"] .laptop { opacity: 1; transform: scale(1) translate(0, 0) rotate(0); }
    .scene[data-state="land"] .impact { animation: impact .5s var(--ease-out); }
    .scene[data-state="working"] .buddy,
    .scene[data-state="correcting"] .buddy { transform: translateY(-35px); }
    .scene[data-state="working"] .hands,
    .scene[data-state="correcting"] .hands { opacity: 1; }
    .scene[data-state="working"] .hand,
    .scene[data-state="correcting"] .hand { animation: typing .28s ease-in-out infinite alternate; }
    .scene[data-state="working"] .hand:last-child,
    .scene[data-state="correcting"] .hand:last-child { animation-delay: -.2s; }
    .scene[data-state="working"] .code-line { animation: code 1.15s ease-in-out infinite alternate; }
    .scene[data-state="working"] .code-line:last-child { animation-delay: -.4s; }
    .scene[data-state="correcting"] .code-line { background: var(--blue); animation: correct .8s ease-in-out infinite alternate; }
    .scene[data-state="correcting"] .eye { height: 22px; border-radius: 50% 50% 44% 44%; }
    .scene[data-state="done"] .eye { height: 18px; background: transparent; border-top: 7px solid #fffefa; border-radius: 50%; }
    .scene[data-state="done"] .check { opacity: 1; scale: 1; rotate: 0deg; animation: pin 1.1s .4s ease-in-out both; }

    @keyframes float { to { transform: translateY(-5px); } }
    @keyframes typing { to { transform: translateY(5px) scaleY(.88); } }
    @keyframes code { to { transform: scaleX(.7); opacity: .66; } }
    @keyframes correct { to { transform: scaleX(.84); } }
    @keyframes impact { 0% { opacity: 0; scale: .3; } 35% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: 1.5; } }
    @keyframes pin { 0%, 100% { transform: translateY(0); } 18% { transform: translateY(-8px); } 34% { transform: translateY(0); } }