*{box-sizing:border-box}
:root{
  --bg:#fafafa;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --accent:#2563eb;
  --ring:rgba(37,99,235,.35);
  --good:#16a34a;
  --bad:#ef4444;
}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background: radial-gradient(1200px 1200px at 10% 10%, #ffffff, var(--bg)) no-repeat fixed;
  color:var(--ink);
}
.wrap{max-width:880px;margin:0 auto;padding:24px}
.site-header{padding:32px 0 8px}
h1{font-size:clamp(28px,6vw,44px);margin:0 0 6px;font-weight:700;letter-spacing:0.3px}
.subtitle{margin:0;color:var(--muted)}
.intro{margin:28px 0 14px;font-size:18px;line-height:1.6}
.code-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:12px}
.code-form label{width:100%;font-size:14px;color:var(--muted)}
.code-form input{
  flex:1 1 220px;padding:12px 14px;border-radius:14px;border:1.5px solid #e5e7eb;background:var(--card);
  outline:none;transition:.2s border-color,.2s box-shadow,.2s transform;font-size:16px
}
.code-form input:focus{border-color:var(--accent);box-shadow:0 0 0 6px var(--ring)}
.btn{
  padding:12px 16px;border-radius:14px;border:1.5px solid #e5e7eb;background:#fff;cursor:pointer;
  font-weight:600;transition:.2s transform,.2s box-shadow,.2s background,.2s border-color;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.error{min-height:22px;margin:6px 0 0;color:var(--bad);font-weight:500}
.reveal[hidden]{display:none}
.card{
  background:var(--card);border:1px solid #e5e7eb;border-radius:22px;padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);margin:18px 0 40px;
}
.card h2{margin:0 0 6px;font-size:clamp(22px,5vw,28px)}
.date-line{margin:0 0 10px;color:var(--muted)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.site-footer{padding:20px 0 44px;color:var(--muted);text-align:center}

/* fun micro-animations */
.shake{animation:shake .28s linear 1}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}
.confetti{
  position:fixed;inset:0;pointer-events:none;overflow:hidden;
}
.confetti > i{
  position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;opacity:.9;
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translateY(110vh) rotate(720deg)}
}