* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
      overflow: hidden;
      background:
        radial-gradient(circle at center, #111b3d 0%, #050817 35%, #010207 75%);
      color: #fff;
      font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    }

    .space {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .stars {
      position: absolute;
      inset: 0;
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #fff;
      opacity: .5;
      animation: twinkle 3s infinite ease-in-out;
    }

    @keyframes twinkle {
      0%, 100% {
        opacity: .15;
      }

      50% {
        opacity: 1;
      }
    }

    .nebula {
      position: absolute;
      width: 70vw;
      height: 70vw;
      max-width: 1000px;
      max-height: 1000px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      background:
        radial-gradient(
          circle,
          rgba(73, 111, 255, .16),
          rgba(121, 52, 255, .08) 35%,
          transparent 70%
        );

      filter: blur(30px);
    }

    /* FLASH TRANSITION */

    .flash {
      position: fixed;
      inset: 0;
      z-index: 200;

      background:
        radial-gradient(
          circle,
          #eef7ff 0%,
          #8fc8ff 45%,
          #3b5eff 100%
        );

      opacity: 0;
      pointer-events: none;

      transition: opacity .35s ease;
    }

    .flash.active {
      opacity: 1;
    }

    /* PORTAL */

    .portal-wrapper {
      position: absolute;

      z-index: -1;

      left: 50%;
      top: 50%;

      width: min(55vw, 620px);
      height: min(55vw, 620px);

      transform: translate(-50%, -50%);

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .portal-glow {
      position: absolute;

      width: 100%;
      height: 100%;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(72, 149, 255, .35),
          rgba(120, 65, 255, .18) 40%,
          transparent 70%
        );

      filter: blur(35px);

      animation: pulse 4s infinite ease-in-out;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(.95);
        opacity: .7;
      }

      50% {
        transform: scale(1.08);
        opacity: 1;
      }
    }

    .portal {
      position: relative;

      width: 65%;
      height: 65%;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          #000 0%,
          #02040d 48%,
          #071d43 70%,
          #142e79 100%
        );

      box-shadow:
        0 0 30px rgba(79, 139, 255, .9),
        0 0 80px rgba(94, 77, 255, .6),
        inset 0 0 50px rgba(50, 150, 255, .7);

      display: flex;
      justify-content: center;
      align-items: center;

      overflow: hidden;
    }

    .portal::before,
    .portal::after {
      content: "";

      position: absolute;

      width: 130%;
      height: 130%;

      border-radius: 50%;

      border: 2px solid rgba(80, 180, 255, .55);

      animation: rotate 12s linear infinite;
    }

    .portal::after {
      width: 115%;
      height: 115%;

      border-color: rgba(151, 91, 255, .5);

      animation-duration: 7s;
      animation-direction: reverse;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .portal-core {
      position: relative;
      z-index: 5;

      width: 45%;
      height: 45%;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          #05070e,
          #000
        );

      box-shadow:
        inset 0 0 40px rgba(71, 145, 255, .35);
    }

    /* HEADER */

    header {
      position: fixed;

      top: 0;
      left: 0;
      right: 0;

      z-index: 20;

      padding: 28px 40px;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 14px;

      letter-spacing: .35em;

      color: #b9d8ff;

      font-weight: 700;
    }

    .status {
      display: flex;
      align-items: center;
      gap: 10px;

      color: #9fb4d8;

      font-size: 12px;

      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .status-dot {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #45ffb1;

      box-shadow:
        0 0 12px #45ffb1;

      animation: statusPulse 2s infinite;

      transition: background .4s, box-shadow .4s;
    }

    @keyframes statusPulse {
      50% {
        opacity: .35;
      }
    }

    /* SCREENS (shared by home + arrival) */

    .screen {
      position: relative;

      z-index: 10;

      min-height: 100vh;
      min-height: 100dvh;

      display: flex;
      flex-direction: column;

      justify-content: center;
      align-items: center;

      text-align: center;

      padding: 30px;
    }

    .screen.is-hidden {
      display: none;
    }

    .eyebrow {
      margin-bottom: 18px;

      color: #7698c8;

      font-size: 11px;

      letter-spacing: .5em;

      text-transform: uppercase;
    }

    h1 {
      font-size:
        clamp(42px, 8vw, 100px);

      line-height: .9;

      letter-spacing: -.05em;

      font-weight: 900;

      background:
        linear-gradient(
          100deg,
          #8adfff,
          #ffffff,
          #b28cff
        );

      -webkit-background-clip: text;
      background-clip: text;

      color: transparent;

      margin-bottom: 22px;
    }

    .arrival h1 {
      font-size:
        clamp(32px, 6vw, 64px);
    }

    .description {
      max-width: 650px;

      color: #9aa9c3;

      line-height: 1.7;

      font-size:
        clamp(15px, 1.5vw, 18px);

      transition: opacity .3s ease;
    }

    /* BUTTONS */

    .enter,
    .secondary {
      position: relative;

      padding: 16px 32px;

      border-radius: 999px;

      font-size: 13px;

      font-weight: 700;

      letter-spacing: .25em;

      text-transform: uppercase;

      cursor: pointer;

      transition:
        transform .3s,
        background .3s,
        box-shadow .3s;
    }

    .enter {
      margin-top: 34px;

      border: 1px solid rgba(121, 187, 255, .5);

      background:
        rgba(68, 119, 255, .1);

      color: #d8ecff;

      backdrop-filter: blur(15px);
    }

    .enter:hover {
      transform: scale(1.05);

      background:
        rgba(68, 119, 255, .2);

      box-shadow:
        0 0 35px rgba(68, 119, 255, .3);
    }

    .secondary {
      border: 1px solid rgba(255, 255, 255, .18);

      background: rgba(255, 255, 255, .04);

      color: #c8d7ed;
    }

    .secondary:hover {
      transform: scale(1.05);

      background: rgba(255, 255, 255, .09);
    }

    .secondary:disabled {
      opacity: .5;

      cursor: default;

      transform: none;
    }

    .enter:focus-visible,
    .secondary:focus-visible,
    .close:focus-visible {
      outline: 2px solid #8adfff;
      outline-offset: 3px;
    }

    /* TELEMETRY */

    .telemetry {
      position: fixed;

      left: 40px;
      bottom: 32px;

      z-index: 20;

      display: flex;

      gap: 30px;

      color: #7184a4;

      font-size: 10px;

      letter-spacing: .18em;

      text-transform: uppercase;
    }

    .telemetry strong {
      display: block;

      margin-top: 6px;

      color: #c5d8f5;

      font-size: 12px;
    }

    /* ARRIVAL SCREEN */

    .planet-visual {
      position: relative;

      width: 160px;
      height: 160px;

      margin: 6px auto 28px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .planet-body {
      --planet-c1: #9fe8ff;
      --planet-c2: #4d7dff;

      width: 118px;
      height: 118px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle at 35% 30%,
          var(--planet-c1),
          var(--planet-c2) 70%
        );

      box-shadow:
        0 0 45px rgba(120, 180, 255, .45),
        inset -22px -12px 40px rgba(0, 0, 0, .45);

      transition: background .4s ease;
    }

    .planet-ring {
      position: absolute;

      top: 50%;
      left: 50%;

      width: 210px;
      height: 62px;

      border: 3px solid rgba(255, 255, 255, .35);
      border-radius: 50%;

      transform: translate(-50%, -50%) rotate(-18deg);

      pointer-events: none;
    }

    .planet-moon {
      position: absolute;

      top: 50%;
      left: 50%;

      width: 14px;
      height: 14px;

      margin: -7px;

      border-radius: 50%;

      background: #e8eefc;

      box-shadow: 0 0 10px rgba(255, 255, 255, .6);

      animation: orbit 6s linear infinite;
    }

    @keyframes orbit {
      from {
        transform: rotate(0deg) translateX(92px) rotate(0deg);
      }

      to {
        transform: rotate(360deg) translateX(92px) rotate(-360deg);
      }
    }

    .arrival-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(150px, 1fr));

      gap: 20px 44px;

      margin: 28px 0 34px;

      text-align: left;

      max-width: 480px;

      width: 100%;
    }

    .arrival-stats .label {
      display: block;

      color: #7698c8;

      font-size: 11px;

      letter-spacing: .2em;
      text-transform: uppercase;

      margin-bottom: 6px;
    }

    .arrival-stats strong {
      font-size: 16px;

      color: #e7f0ff;

      font-weight: 600;
    }

    .return-btn {
      margin-top: 0;
    }

    .arrival-actions {
      display: flex;

      gap: 16px;

      flex-wrap: wrap;

      justify-content: center;
    }

    /* MODAL */

    .overlay {
      position: fixed;

      inset: 0;

      z-index: 100;

      display: none;

      align-items: center;
      justify-content: center;

      background:
        rgba(0, 0, 0, .82);

      backdrop-filter: blur(15px);

      padding: 20px;
    }

    .overlay.active {
      display: flex;
    }

    .panel {
      width: 100%;
      max-width: 560px;

      padding: 35px;

      border-radius: 28px;

      background:
        rgba(8, 14, 31, .96);

      border:
        1px solid rgba(120, 170, 255, .18);

      box-shadow:
        0 0 80px rgba(60, 90, 255, .18);
    }

    .panel-label {
      color: #6d91c6;

      font-size: 11px;

      letter-spacing: .3em;

      text-transform: uppercase;

      margin-bottom: 15px;
    }

    .panel h2 {
      font-size: 32px;

      margin-bottom: 20px;
    }

    .panel p {
      color: #9baac2;

      line-height: 1.8;

      margin-bottom: 15px;
    }

    .progress {
      height: 4px;

      width: 100%;

      margin: 25px 0;

      overflow: hidden;

      border-radius: 10px;

      background: rgba(255,255,255,.08);
    }

    .progress-bar {
      width: 0%;
      height: 100%;

      background: #73c7ff;

      box-shadow:
        0 0 15px #73c7ff;

      transition: width .3s;
    }

    .close {
      width: 100%;

      padding: 13px;

      border: 0;

      border-radius: 14px;

      background:
        rgba(255,255,255,.07);

      color: #c8d7ed;

      cursor: pointer;
    }

    /* REDUCED MOTION */

    @media (prefers-reduced-motion: reduce) {
      .star,
      .portal-glow,
      .portal::before,
      .portal::after,
      .status-dot,
      .planet-moon {
        animation: none !important;
      }

      .portal-glow {
        opacity: .85;
      }

      .flash {
        transition: none;
      }

      .enter,
      .secondary,
      .progress-bar {
        transition: none;
      }
    }

    /* MOBILE */

    @media (max-width: 700px) {

      header {
        padding: 20px;
      }

      .logo {
        font-size: 10px;
      }

      .status {
        font-size: 9px;
      }

      .portal-wrapper {
        width: 105vw;
        height: 105vw;
        top: 52%;
      }

      .screen {
        justify-content: flex-start;
        padding-top: 130px;
      }

      h1 {
        font-size: 52px;
      }

      .arrival h1 {
        font-size: 38px;
      }

      .description {
        font-size: 15px;
        max-width: 360px;
      }

      .arrival-stats {
        grid-template-columns: 1fr 1fr;
      }

      .telemetry {
        position: relative;

        left: auto;
        bottom: auto;

        margin-top: 35px;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;
      }

      .enter,
      .secondary {
        padding: 15px 25px;
      }
    }