:root {
      --bg: #0a0f0a;
      --accent: #7FFD9E;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: #e6f5ea;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
        Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    /* Soft accent glow behind the fold, matching the original's look. */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(60% 40% at 50% 0%, rgba(127, 253, 158, 0.10), transparent 70%),
        radial-gradient(40% 30% at 80% 90%, rgba(127, 253, 158, 0.05), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .wrap {
      position: relative;
      z-index: 1;
      max-width: 880px;
      margin: 0 auto;
      padding: 40px 20px 64px;
    }
    header { text-align: center; margin-bottom: 28px; }
    .badge {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid rgba(127, 253, 158, 0.3);
      background: rgba(127, 253, 158, 0.06);
      border-radius: 999px;
      padding: 6px 14px;
      margin-bottom: 18px;
    }
    h1 {
      font-size: clamp(26px, 5vw, 40px);
      line-height: 1.15;
      margin: 0 0 14px;
      font-weight: 700;
    }
    h1 .hl { color: var(--accent); }
    .sub {
      color: #9fb3a5;
      font-size: clamp(14px, 2.4vw, 17px);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.55;
    }
    .steps {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin: 26px 0 8px;
    }
    .step {
      font-size: 12.5px;
      color: #cfe6d7;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(127, 253, 158, 0.14);
      border-radius: 10px;
      padding: 8px 12px;
    }
    .step b { color: var(--accent); font-weight: 600; }
    .cal-label {
      text-align: center;
      margin: 30px 0 10px;
      font-size: 13px;
      letter-spacing: 0.04em;
      color: #8fa898;
    }
    .cal {
      position: relative;
      background: rgba(0, 0, 0, 0.40);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(127, 253, 158, 0.20);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 18px;
    }
    .cal iframe { display: block; width: 100%; height: 1200px; border: none; }
    .fine {
      text-align: center;
      color: #6d7f73;
      font-size: 12px;
      line-height: 1.5;
    }
    .reminder { text-align: center; color: #9fb3a5; font-size: 14px; margin-bottom: 22px; }
    @media (max-width: 640px) {
      .wrap { padding: 28px 14px 48px; }
      .cal iframe { height: 1150px; }
    }