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

    body {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:24px;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
      position:relative;
      overflow:hidden;
      transition:background 0.8s ease;
    }

    body::before,
    body::after {
      content:'';
      position:fixed;
      border-radius:50%;
      filter:blur(90px);
      opacity:0.55;
      pointer-events:none;
      animation:floatOrb 8s ease-in-out infinite alternate;
    }

    body::before {
      width:440px;
      height:440px;
      top:-120px;
      left:-120px;
      animation-delay:0s;
    }

    body::after {
      width:400px;
      height:400px;
      bottom:-120px;
      right:-120px;
      animation-delay:-4s;
    }

    @keyframes floatOrb {
      from {
        transform:translate(0,0) scale(1);
      }
      to {
        transform:translate(40px,30px) scale(1.15);
      }
    }

    /* Card */
    .card {
      backdrop-filter:blur(32px) saturate(180%);
      -webkit-backdrop-filter:blur(32px) saturate(180%);
      background:rgba(255,255,255,0.10);
      border:1px solid rgba(255,255,255,0.22);
      border-radius:36px;
      padding:40px 28px 32px;
      max-width:390px;
      width:100%;
      text-align:center;
      position:relative;
      z-index:1;
      animation:cardIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
      transition:box-shadow 0.8s ease;
    }

    @keyframes cardIn {
      from {
        opacity:0;
        transform:translateY(40px) scale(0.94);
      }
      to {
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }

    /* Avatar */
    .avatar-wrap {
      display:inline-block;
      margin-bottom:22px;
      position:relative;
    }

    .avatar-ring {
      width:148px;
      height:148px;
      border-radius:50%;
      padding:4px;
      display:inline-block;
      transition:background 0.8s ease,box-shadow 0.8s ease;
      animation:ringPulse 3s ease-in-out infinite;
    }

    @keyframes ringPulse {
      0%,100% {
        filter:brightness(1);
      }

      50% {
        filter:brightness(1.2) drop-shadow(0 0 12px rgba(255,255,255,0.3));
      }
    }

    .avatar-ring img {
      width:140px;
      height:140px;
      border-radius:50%;
      object-fit:cover;
      display:block;
      border:3px solid rgba(255,255,255,0.18);
    }

    .live-badge {
      position:absolute;
      bottom:6px;
      right:6px;
      color:#fff;
      font-size:10px;
      font-weight:800;
      letter-spacing:1px;
      padding:3px 9px;
      border-radius:20px;
      border:2px solid rgba(255,255,255,0.30);
      transition:background 0.8s ease;
    }

    /* Title */
    .title {
      font-size:25px;
      font-weight:900;
      letter-spacing:1.5px;
      margin-bottom:6px;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      transition:background-image 0.8s ease;
    }

    .subtitle {
      font-size:13px;
      color:rgba(255,255,255,0.55);
      font-weight:500;
      margin-bottom:24px;
      letter-spacing:0.4px;
    }

    /* Button */
    .btn {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:#fff;
      font-size:17px;
      font-weight:700;
      letter-spacing:0.3px;
      border-radius:18px;
      padding:17px 0;
      text-decoration:none;
      margin-bottom:28px;
      cursor:pointer;
      border:none;
      width:100%;
      position:relative;
      overflow:hidden;
      animation:popPulse 2s ease-in-out infinite;
      transition:background 0.8s ease,box-shadow 0.8s ease;
    }

    .btn::before {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(
        180deg,
        rgba(255,255,255,0.18) 0%,
        transparent 60%
      );
      border-radius:inherit;
      pointer-events:none;
    }

    @keyframes popPulse {
      0% {
        transform:scale(1);
      }

      30% {
        transform:scale(1.05);
      }

      60% {
        transform:scale(0.98);
      }

      80% {
        transform:scale(1.02);
      }

      100% {
        transform:scale(1);
      }
    }

    .btn:active {
      transform:scale(0.95)!important;
      animation:none;
    }

    .btn-icon {
      font-size:20px;
    }

    .btn .ripple {
      position:absolute;
      border-radius:50%;
      background:rgba(255,255,255,0.40);
      transform:scale(0);
      animation:rippleAnim 0.65s linear forwards;
      pointer-events:none;
    }

    @keyframes rippleAnim {
      to {
        transform:scale(5);
        opacity:0;
      }
    }

    /* Divider */
    .divider {
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:14px;
    }

    .divider-line {
      flex:1;
      height:1px;
      background:rgba(255,255,255,0.12);
    }

    .divider-text {
      font-size:11px;
      color:rgba(255,255,255,0.40);
      font-weight:700;
      letter-spacing:1.5px;
    }

    /* Countdown */
    .countdown {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:6px;
      margin-bottom:24px;
    }

    .cd-block {
      display:flex;
      flex-direction:column;
      align-items:center;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.14);
      border-radius:14px;
      padding:10px 14px 8px;
      min-width:66px;
      backdrop-filter:blur(10px);
    }

    .cd-num {
      font-size:34px;
      font-weight:900;
      line-height:1;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      transition:background-image 0.8s ease;
    }

    .cd-label {
      font-size:9px;
      font-weight:700;
      color:rgba(255,255,255,0.45);
      letter-spacing:1.2px;
      margin-top:4px;
    }

    .cd-sep {
      font-size:28px;
      font-weight:900;
      padding-bottom:16px;
      opacity:0.8;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      transition:background-image 0.8s ease;
    }

    /* Disclaimer */
    .disclaimer {
      margin:18px 0 12px;
      font-size:10px;
      line-height:1.5;
      color:rgba(255,255,255,0.42);
    }

    .disclaimer strong {
      color:rgba(255,255,255,0.58);
    }

    /* Footer */
    .footer {
      font-size:12px;
      color:rgba(255,255,255,0.40);
      font-weight:500;
    }

    .footer .brand {
      font-weight:700;
      text-decoration:none;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      transition:background-image 0.8s ease;
    }

    .footer .brand:hover {
      opacity:0.8;
    }

    .footer-links {
      margin-top:10px;
      font-size:10px;
    }

    .footer-links a {
      color:rgba(255,255,255,0.45);
      text-decoration:none;
    }
}

/* Final animated gradient background and button effects */
body { background-size:300% 300%; animation:gradientDrift 12s ease infinite; transition:background 1.2s ease,background-position 1.2s ease; }
@keyframes gradientDrift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.btn { background-size:200% 200%; animation:popPulse 2s ease-in-out infinite,buttonGradient 4s ease infinite; }
@keyframes buttonGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn:hover { transform:translateY(-2px) scale(1.03); filter:brightness(1.08); }
.btn:focus-visible { outline:3px solid rgba(255,255,255,.75); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){body,body::before,body::after,.btn,.card,.avatar-ring{animation:none!important;transition:none!important}}