:root {
      --bg-0: #030407;
      --bg-1: #070a12;
      --bg-2: #0d1322;

      --glass: rgba(255, 255, 255, 0.045);
      --glass-border: rgba(255, 255, 255, 0.10);

      --text: #ffffff;
      --muted: rgba(255, 255, 255, 0.48);

      --glow-1: rgba(205, 228, 255, 0.85);
      --glow-2: rgba(112, 168, 255, 0.48);
      --glow-3: rgba(80, 120, 255, 0.18);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      min-height: 100%;
      background: var(--bg-0);
    }

    body {
      min-height: 100vh;
      overflow: hidden;
      color: var(--text);
      font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

      background:
        radial-gradient(
          circle at 20% 10%,
          rgba(90, 135, 255, 0.17),
          transparent 32%
        ),
        radial-gradient(
          circle at 82% 85%,
          rgba(80, 160, 255, 0.10),
          transparent 34%
        ),
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.035),
          transparent 35%
        ),
        linear-gradient(
          145deg,
          var(--bg-0) 0%,
          var(--bg-1) 45%,
          var(--bg-2) 100%
        );
    }

    [hidden] {
      display: none !important;
    }

    #stars,
    #particles {
      position: fixed;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #stars {
      z-index: 0;
    }

    #particles {
      z-index: 1;
    }

    .aurora {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .aurora::before,
    .aurora::after {
      content: "";
      position: absolute;
      width: 48vw;
      height: 48vw;
      min-width: 420px;
      min-height: 420px;
      border-radius: 50%;
      filter: blur(110px);
      opacity: 0.16;
      animation: auroraMove 18s ease-in-out infinite alternate;
    }

    .aurora::before {
      left: -8vw;
      top: -12vw;
      background: rgba(85, 145, 255, 0.85);
    }

    .aurora::after {
      right: -12vw;
      bottom: -16vw;
      background: rgba(155, 205, 255, 0.55);
      animation-duration: 24s;
    }

    @keyframes auroraMove {
      from {
        transform: translate3d(0, 0, 0) scale(1);
      }

      to {
        transform: translate3d(45px, -30px, 0) scale(1.10);
      }
    }

    .page {
      position: relative;
      z-index: 3;

      min-height: 100vh;

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

      padding: 28px;
    }

    .countdown {
      width: min(1240px, 100%);

      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(12px, 1.8vw, 24px);
    }

    .unit {
      position: relative;
      min-width: 0;

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

      min-height: clamp(190px, 25vw, 310px);

      padding: 28px 12px 24px;

      overflow: hidden;

      border: 1px solid var(--glass-border);
      border-radius: 30px;

      background:
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.075),
          rgba(255, 255, 255, 0.025)
        );

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);

      box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }

    .unit::before {
      content: "";

      position: absolute;
      left: 12%;
      right: 12%;
      top: -40px;

      height: 100px;

      border-radius: 50%;

      background: rgba(150, 200, 255, 0.18);
      filter: blur(40px);
    }

    .unit::after {
      content: "";

      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          118deg,
          transparent 18%,
          rgba(255, 255, 255, 0.075) 42%,
          transparent 62%
        );

      transform: translateX(-130%);
      animation: glassSweep 8s ease-in-out infinite;
    }

    @keyframes glassSweep {
      0%,
      65% {
        transform: translateX(-130%);
        opacity: 0;
      }

      72% {
        opacity: 1;
      }

      86% {
        transform: translateX(130%);
        opacity: 0;
      }

      100% {
        transform: translateX(130%);
        opacity: 0;
      }
    }

    .number {
      position: relative;
      z-index: 2;

      max-width: 100%;

      font-size: clamp(58px, 9.3vw, 144px);
      font-weight: 950;
      line-height: 0.9;

      letter-spacing: -0.065em;
      font-variant-numeric: tabular-nums;

      color: #fff;

      text-shadow:
        0 0 8px rgba(255, 255, 255, 0.45),
        0 0 24px var(--glow-1),
        0 0 52px var(--glow-2),
        0 0 90px var(--glow-3);

      animation: numberGlow 2.5s ease-in-out infinite;
    }

    @keyframes numberGlow {
      0%,
      100% {
        filter: brightness(0.94);
        transform: scale(1);
      }

      50% {
        filter: brightness(1.13);
        transform: scale(1.012);
      }
    }

    .label {
      position: relative;
      z-index: 2;

      margin-top: 24px;

      font-size: clamp(11px, 1.25vw, 17px);
      font-weight: 700;

      letter-spacing: 0.28em;
      text-transform: uppercase;

      color: var(--muted);
    }

    .birthday {
      width: min(1200px, 100%);
      text-align: center;

      padding: 60px 24px;
    }

    .birthday-text {
      margin: 0;

      font-size: clamp(54px, 9vw, 148px);
      font-weight: 950;
      line-height: 0.96;

      letter-spacing: -0.055em;

      color: #fff;

      text-shadow:
        0 0 10px rgba(255, 255, 255, 0.52),
        0 0 28px rgba(205, 232, 255, 0.90),
        0 0 65px rgba(110, 175, 255, 0.60),
        0 0 130px rgba(80, 120, 255, 0.32);

      animation: birthdayGlow 2.15s ease-in-out infinite;
    }

    @keyframes birthdayGlow {
      0%,
      100% {
        transform: scale(0.99);
        filter: brightness(0.95);
      }

      50% {
        transform: scale(1.025);
        filter: brightness(1.17);
      }
    }

    @media (max-width: 900px) {
      .page {
        padding: 18px;
      }

      .countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .unit {
        min-height: 190px;
      }
    }

    @media (max-width: 480px) {
      .page {
        padding: 12px;
      }

      .countdown {
        gap: 10px;
      }

      .unit {
        min-height: 155px;
        padding: 20px 8px 18px;
        border-radius: 22px;
      }

      .number {
        font-size: clamp(48px, 18vw, 82px);
      }

      .label {
        margin-top: 17px;
        letter-spacing: 0.18em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
      }
    }