*, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
      background: var(--deep);
      color: #fff;
      -webkit-font-smoothing: antialiased;
      touch-action: manipulation;
      overscroll-behavior: none;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    input,
    textarea,
    [contenteditable='true'] {
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      -webkit-touch-callout: default;
    }

    ::selection {
      background: transparent;
      color: inherit;
    }

    ::-moz-selection {
      background: transparent;
      color: inherit;
    }

    img,
    svg,
    canvas,
    video {
      -webkit-user-drag: none;
      user-drag: none;
    }

    body.is-playing {
      touch-action: none;
    }

    :root {
      --pink: #ff6eb4;
      --pink-glow: #ff9ed2;
      --green: #5effa8;
      --green-glow: #a8ffd4;
      --deep: #0a0618;
      --glass: rgba(22, 14, 40, 0.62);
      --glass-border: rgba(255, 255, 255, 0.14);
      --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .bg-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      contain: strict;
      pointer-events: none;
    }

    canvas#stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .cartoon-fx {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 50;
      contain: strict;
      isolation: isolate;
    }
    .paper-layer {
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.018) 3px 6px),
        repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,0.022) 4px 8px),
        repeating-linear-gradient(45deg, rgba(210,185,155,0.025) 0 2px, transparent 2px 6px);
      mix-blend-mode: soft-light;
      opacity: 0.55;
    }
    .grain-layer {
      position: absolute;
      inset: -30%;
      width: 160%;
      height: 160%;
      background-image: var(--grain-svg);
      background-size: 280px 280px;
      mix-blend-mode: overlay;
      opacity: 0.42;
      animation: grain-shift 0.9s steps(8) infinite;
      will-change: transform;
    }
    @keyframes grain-shift {
      0%   { transform: translate3d(0, 0, 0); }
      12%  { transform: translate3d(-2%, -4%, 0); }
      25%  { transform: translate3d(3%, 1%, 0); }
      37%  { transform: translate3d(-1%, 5%, 0); }
      50%  { transform: translate3d(4%, -2%, 0); }
      62%  { transform: translate3d(-3%, 3%, 0); }
      75%  { transform: translate3d(2%, -5%, 0); }
      87%  { transform: translate3d(-4%, 2%, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }
    .halftone {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(0,0,0,0.18) 0.6px, transparent 0.6px);
      background-size: 5px 5px;
      mix-blend-mode: multiply;
      opacity: 0.22;
    }
    .cardboard-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(10,6,24,0.35) 100%);
      mix-blend-mode: multiply;
    }
    .flicker {
      position: absolute;
      inset: 0;
      background: rgba(255, 230, 200, 0.02);
      animation: cardboard-flicker 0.12s steps(2) infinite;
    }
    @keyframes cardboard-flicker {
      0% { opacity: 0.4; }
      50% { opacity: 0.7; }
      100% { opacity: 0.5; }
    }

    .cartoon-world {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      animation: stop-motion-jitter 0.1s steps(3) infinite;
      will-change: transform;
      contain: layout style;
    }
    @keyframes stop-motion-jitter {
      0%   { transform: translate3d(0, 0, 0); }
      33%  { transform: translate3d(0.4px, -0.3px, 0); }
      66%  { transform: translate3d(-0.3px, 0.4px, 0); }
      100% { transform: translate3d(0.2px, 0.2px, 0); }
    }

    .nebula {
      position: absolute;
      border-radius: 50%;
      opacity: 0.55;
      will-change: transform;
    }
    .nebula-1 {
      width: 60vw; height: 60vw; top: -20%; left: -10%;
      background: radial-gradient(circle, rgba(255,110,180,0.5) 0%, rgba(255,110,180,0.15) 40%, transparent 68%);
      animation: nebula-drift 20s ease-in-out infinite alternate;
    }
    .nebula-2 {
      width: 50vw; height: 50vw; bottom: -15%; right: -10%;
      background: radial-gradient(circle, rgba(94,255,168,0.45) 0%, rgba(94,255,168,0.12) 40%, transparent 68%);
      animation: nebula-drift 20s ease-in-out infinite alternate;
      animation-delay: -8s;
    }
    .nebula-3 {
      width: 35vw; height: 35vw; top: 40%; left: 30%;
      background: radial-gradient(circle, rgba(176,110,255,0.3) 0%, rgba(176,110,255,0.08) 40%, transparent 68%);
      animation: nebula-drift 20s ease-in-out infinite alternate;
      animation-delay: -4s;
      opacity: 0.35;
    }

    @keyframes nebula-drift {
      0% { transform: translate3d(0, 0, 0) scale(1); }
      100% { transform: translate3d(40px, -30px, 0) scale(1.1); }
    }

    .scene {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      perspective: 1200px;
    }

    .hero-text {
      text-align: center;
      margin-bottom: 2rem;
      animation: fade-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      transform: translateY(30px);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 100px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--green-glow);
      margin-bottom: 1.2rem;
    }
    .badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    h1 {
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      background: linear-gradient(135deg, #fff 30%, var(--pink-glow) 60%, var(--green-glow) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      paint-order: stroke fill;
      -webkit-text-stroke: 0.4px rgba(255,255,255,0.08);
    }

    .subtitle {
      margin-top: 1rem;
      font-size: clamp(1rem, 2.5vw, 1.35rem);
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.01em;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    @keyframes fade-up {
      to { opacity: 1; transform: translateY(0); }
    }

    .aliens-stage {
      position: relative;
      width: min(94vw, 720px);
      overflow: visible;
      animation: fade-up 1.4s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      transform: translateY(40px);
      will-change: transform;
    }

    .planet {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(180deg, #1a0f30 0%, #2d1a50 100%);
      box-shadow: 0 -20px 60px rgba(94, 255, 168, 0.15), inset 0 10px 30px rgba(255, 110, 180, 0.1);
    }
    .planet::before {
      content: '';
      position: absolute;
      top: -30px;
      left: 10%;
      width: 80%;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(94,255,168,0.08), transparent);
    }

    .alien {
      position: absolute;
      bottom: 50px;
      animation: float 4s ease-in-out infinite;
      will-change: transform;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .alien::after {
      content: '';
      position: absolute;
      inset: -16px -10px -8px;
      z-index: -1;
    }
    .alien:nth-of-type(1) { left: 6%;  animation-delay: 0s; }
    .alien:nth-of-type(2) { left: 30%; animation-delay: -1.2s; transform: scale(1.15); }
    .alien:nth-of-type(3) { left: 53%; animation-delay: -2.5s; }
    .alien:nth-of-type(4) { left: 76%; animation-delay: -0.8s; transform: scale(0.85); }

    @keyframes float {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
      50% { transform: translate3d(0, -18px, 0) rotate(2deg); }
    }
    .alien:nth-of-type(2) { animation-name: float-big; }
    @keyframes float-big {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1.15) rotate(1deg); }
      50% { transform: translate3d(0, -22px, 0) scale(1.15) rotate(-1deg); }
    }
    .alien:nth-of-type(4) { animation-name: float-small; }
    @keyframes float-small {
      0%, 100% { transform: translate3d(0, 0, 0) scale(0.85) rotate(3deg); }
      50% { transform: translate3d(0, -14px, 0) scale(0.85) rotate(-3deg); }
    }

    .alien-body {
      width: 70px;
      height: 90px;
      border-radius: 50% 50% 45% 45%;
      position: relative;
    }
    @media (hover: hover) and (pointer: fine) {
      .alien:hover .alien-body { filter: brightness(1.12); }
    }
    .alien:active .alien-body { filter: brightness(1.15) saturate(1.1); }

    .alien.pink .alien-body {
      background: linear-gradient(160deg, var(--pink-glow), var(--pink) 60%, #d44a8a);
      box-shadow:
        0 8px 30px rgba(255, 110, 180, 0.4),
        inset 0 -8px 16px rgba(0,0,0,0.12),
        2px 3px 0 rgba(0,0,0,0.25);
      outline: 1px solid rgba(0,0,0,0.14);
    }
    .alien.green .alien-body {
      background: linear-gradient(160deg, var(--green-glow), var(--green) 60%, #2ec97a);
      box-shadow:
        0 8px 30px rgba(94, 255, 168, 0.4),
        inset 0 -8px 16px rgba(0,0,0,0.12),
        2px 3px 0 rgba(0,0,0,0.25);
      outline: 1px solid rgba(0,0,0,0.14);
    }

    .alien-head {
      --eye-w: 22px;
      --eye-h: 28px;
      --mouth-w: 18px;
      --mouth-h: 10px;
      width: 80px;
      height: 70px;
      border-radius: 50%;
      position: absolute;
      top: -55px;
      left: 0;
      right: 0;
      margin-inline: auto;
      transform: none;
      transform-style: flat;
    }
    .alien.pink .alien-head {
      background: linear-gradient(160deg, #ffc0dd, var(--pink));
      box-shadow:
        0 4px 20px rgba(255, 110, 180, 0.5),
        inset 0 4px 8px rgba(255,255,255,0.2),
        2px 3px 0 rgba(0,0,0,0.28);
      outline: 1px solid rgba(0,0,0,0.12);
    }
    .alien.green .alien-head {
      background: linear-gradient(160deg, #c0ffe0, var(--green));
      box-shadow:
        0 4px 20px rgba(94, 255, 168, 0.5),
        inset 0 4px 8px rgba(255,255,255,0.2),
        2px 3px 0 rgba(0,0,0,0.28);
      outline: 1px solid rgba(0,0,0,0.12);
    }

    .eyes {
      position: absolute;
      top: 36%;
      left: 0;
      right: 0;
      display: flex;
      gap: 18%;
      justify-content: center;
      transform: none;
    }
    .eye {
      width: var(--eye-w);
      height: var(--eye-h);
      background: #fff;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      animation: blink 5s ease-in-out infinite;
    }
    .pupil {
      position: absolute;
      width: 55%;
      height: 50%;
      background: #1a0a2e;
      border-radius: 50%;
      top: 30%;
      left: 22%;
      animation: look-around 6s ease-in-out infinite;
    }
    .pupil::after {
      content: '';
      position: absolute;
      width: 35%;
      height: 35%;
      background: #fff;
      border-radius: 50%;
      top: 8%;
      right: 12%;
    }

    @keyframes blink {
      0%, 48%, 52%, 100% { clip-path: inset(0 0 0 0); }
      50% { clip-path: inset(42% 0 42% 0); }
    }
    @keyframes look-around {
      0%, 100% { margin-top: 0; margin-left: 0; }
      25% { margin-top: -2px; margin-left: 2px; }
      50% { margin-top: 1px; margin-left: -2px; }
      75% { margin-top: 2px; margin-left: 1px; }
    }

    .antenna {
      position: absolute;
      top: -18px;
      width: 3px;
      height: 22px;
      background: inherit;
      border-radius: 2px;
    }
    .antenna.left { left: 22px; transform: rotate(-15deg); }
    .antenna.right { right: 22px; transform: rotate(15deg); }
    .antenna::after {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      animation: antenna-glow 2s ease-in-out infinite alternate;
    }
    .alien.pink .antenna::after { background: var(--green); box-shadow: 0 0 12px var(--green); }
    .alien.green .antenna::after { background: var(--pink); box-shadow: 0 0 12px var(--pink); }

    @keyframes antenna-glow {
      0% { opacity: 0.6; transform: translateX(-50%) scale(0.8); }
      100% { opacity: 1; transform: translateX(-50%) scale(1.2); }
    }

    .mouth {
      position: absolute;
      bottom: 16%;
      left: 0;
      right: 0;
      margin-inline: auto;
      width: var(--mouth-w);
      height: var(--mouth-h);
      border: 2px solid rgba(0,0,0,0.2);
      border-top: none;
      border-radius: 0 0 50% 50%;
      transform: none;
      animation: smile 3s ease-in-out infinite;
    }
    @keyframes smile {
      0%, 100% { transform: scaleX(1); }
      50% { transform: scaleX(1.3); }
    }

    .arm {
      position: absolute;
      width: 12px;
      height: 40px;
      border-radius: 6px;
      top: 20px;
      animation: wave 2s ease-in-out infinite;
      box-shadow: 1px 2px 0 rgba(0,0,0,0.22);
    }
    .alien.pink .arm { background: linear-gradient(180deg, var(--pink-glow), var(--pink)); }
    .alien.green .arm { background: linear-gradient(180deg, var(--green-glow), var(--green)); }
    .arm.left { left: -8px; transform-origin: top center; transform: rotate(25deg); animation-delay: 0s; }
    .arm.right { right: -8px; transform-origin: top center; transform: rotate(-25deg); animation-delay: -1s; }

    @keyframes wave {
      0%, 100% { transform: rotate(25deg); }
      50% { transform: rotate(45deg); }
    }
    .arm.right { animation-name: wave-right; }
    @keyframes wave-right {
      0%, 100% { transform: rotate(-25deg); }
      50% { transform: rotate(-50deg); }
    }

    .ufo {
      position: absolute;
      top: 0;
      right: 8%;
      animation: ufo-fly 12s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes ufo-fly {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
      25% { transform: translate3d(-60px, 20px, 0) rotate(3deg); }
      50% { transform: translate3d(-120px, -10px, 0) rotate(-2deg); }
      75% { transform: translate3d(-40px, 15px, 0) rotate(5deg); }
    }
    .ufo-dome {
      width: 40px; height: 28px;
      background: linear-gradient(180deg, rgba(200,255,230,0.6), rgba(94,255,168,0.3));
      border-radius: 50% 50% 20% 20%;
      margin: 0 auto;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .ufo-body {
      width: 70px; height: 16px;
      background: linear-gradient(180deg, #c0c0d0, #8080a0);
      border-radius: 50%;
      position: relative;
      box-shadow: 0 4px 20px rgba(200,200,255,0.3);
    }
    .ufo-light {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 40px;
      background: linear-gradient(180deg, rgba(94,255,168,0.4), transparent);
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
      animation: beam 2s ease-in-out infinite alternate;
    }
    @keyframes beam {
      0% { opacity: 0.3; height: 30px; }
      100% { opacity: 0.7; height: 50px; }
    }
    .ufo-lights {
      display: flex;
      justify-content: center;
      gap: 8px;
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
    }
    .ufo-lights span {
      width: 6px; height: 6px;
      border-radius: 50%;
      animation: ufo-blink 1s ease-in-out infinite;
    }
    .ufo-lights span:nth-child(1) { background: var(--pink); animation-delay: 0s; }
    .ufo-lights span:nth-child(2) { background: var(--green); animation-delay: 0.3s; }
    .ufo-lights span:nth-child(3) { background: #fff; animation-delay: 0.6s; }
    @keyframes ufo-blink {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; box-shadow: 0 0 6px currentColor; }
    }

    .cards {
      animation: fade-up 1.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      transform: translateY(30px);
    }

    .glass-card {
      border-radius: 20px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      text-align: center;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
      cursor: default;
    }
    @media (hover: hover) and (pointer: fine) {
      .glass-card:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(255,110,180,0.1);
      }
    }
    .card-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
    .card-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); }
    .card-value { font-size: 1.5rem; font-weight: 600; margin-top: 0.2rem; }
    .glass-card:nth-child(1) .card-value { color: var(--pink-glow); }
    .glass-card:nth-child(2) .card-value { color: var(--green-glow); }
    .glass-card:nth-child(3) .card-value { color: #c8a0ff; }

    .shooting-star {
      position: absolute;
      width: 100px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #fff, transparent);
      opacity: 0;
      animation: shoot 6s ease-in-out infinite;
    }
    .shooting-star:nth-of-type(1) { top: 15%; left: 60%; animation-delay: 0s; }
    .shooting-star:nth-of-type(2) { top: 30%; left: 20%; animation-delay: 3s; }

    @keyframes shoot {
      0%, 95%, 100% { opacity: 0; transform: translate3d(0,0,0) rotate(-35deg); }
      96% { opacity: 1; }
      99% { opacity: 0; transform: translate3d(-300px, 200px, 0) rotate(-35deg); }
    }

    .footer {
      width: min(92vw, 520px);
      margin: 0.75rem 0 0;
      padding: 0 0.5rem;
      text-align: center;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.03em;
      line-height: 1.45;
      z-index: 3;
      animation: fade-up 1.4s 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      white-space: normal;
      flex-shrink: 0;
    }

    /* Touch / mobile: lighter compositing, same motion */
    @media (hover: none), (max-width: 768px) {
      .scene { perspective: none; }
      .grain-layer { animation: none; will-change: auto; }
      .flicker { animation: none; opacity: 0.5; }
      .cartoon-world { animation: none; will-change: auto; }
      .paper-layer, .grain-layer, .halftone, .cardboard-vignette {
        mix-blend-mode: normal;
      }
      .paper-layer { opacity: 0.18; }
      .grain-layer { opacity: 0.14; }
      .halftone { opacity: 0.1; }
      .nebula-3, .shooting-star:nth-of-type(2) { display: none; }
      .subtitle { padding: 0 1rem; }
    }

    @media (max-width: 600px) {
      .alien-body { width: 50px; height: 65px; }
      .alien-head {
        width: 58px;
        height: 50px;
        top: -42px;
        --eye-w: 14px;
        --eye-h: 18px;
        --mouth-w: 14px;
        --mouth-h: 8px;
      }
      .eyes { gap: 10px; top: 34%; }
      .mouth { bottom: 14%; }
      .planet { width: 220px; height: 64px; }
      h1 { font-size: clamp(2rem, 11vw, 3rem); }
      .ufo { transform: scale(0.85); transform-origin: top right; right: 4%; }
      .alien:nth-of-type(1) { left: 2%; }
      .alien:nth-of-type(2) { left: 26%; }
      .alien:nth-of-type(3) { left: 50%; }
      .alien:nth-of-type(4) { left: 74%; }
    }

    @media (max-width: 380px) {
      .alien:nth-of-type(1) { left: 0%; }
      .alien:nth-of-type(4) { left: 72%; }
    }

    html.quality-low .grain-layer,
    html.quality-low .flicker,
    html.quality-low .halftone { display: none; }
    html.quality-low .paper-layer { opacity: 0.12; }
    html.quality-low .nebula-2 { display: none; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .grain-layer, .flicker, .cartoon-world { animation: none !important; }
      canvas#stars { display: none; }
    }