@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

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

:root{
  --bg:#161616;
  --txt:#f5f5f5;
  --txt-muted:rgba(245,245,245,.45);
  --border:rgba(255,255,255,.28);
  --border-hover:rgba(255,255,255,.5);
  --fill-hover:rgba(255,255,255,.06);
  --danger:#f16d6d;
  --ease:260ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --txt:#161616;
    --txt-muted:rgba(22,22,22,.42);
    --border:rgba(0,0,0,.22);
    --border-hover:rgba(0,0,0,.4);
    --fill-hover:rgba(0,0,0,.045);
  }
}

html,body{min-height:100vh}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg) url('../img/background.png') center/cover no-repeat fixed;
  color:var(--txt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  position:relative;
  overflow-x:hidden;
}
@media (prefers-color-scheme: light){
  body{background-image:url('../img/backgroundw.png')}
}

.glow{
  position:fixed;
  top:50%;left:50%;
  width:720px;height:720px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 68%);
  pointer-events:none;
  animation:glowPulse 6s ease-in-out infinite;
}
@media (prefers-color-scheme: light){
  .glow{background:radial-gradient(circle, rgba(0,0,0,.055) 0%, rgba(0,0,0,0) 68%)}
}
@keyframes glowPulse{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}

.content{
  display:flex;flex-direction:column;align-items:center;gap:36px;
  position:relative;z-index:1;
  animation:contentIn 560ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes contentIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.brand-logo{
  width:56px;height:56px;
  object-fit:contain;
  opacity:.92;
  animation:logoIn 700ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes logoIn{
  from{opacity:0;transform:scale(.85)}
  to{opacity:.92;transform:scale(1)}
}

.heading{display:flex;flex-direction:column;align-items:center;gap:14px}

.title{
  font-family:'Lora',serif;font-weight:700;
  font-size:clamp(28px,4.4vw,48px);
  line-height:1.2;text-align:center;max-width:820px;letter-spacing:-.01em;
}

.subtitle{
  font-size:15px;
  color:var(--txt-muted);
  text-align:center;
}

.pill-btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:16px;color:var(--txt);
  background:transparent;border:1.5px solid var(--border);border-radius:999px;
  padding:16px 38px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  transition:border-color var(--ease),background var(--ease),transform var(--ease),opacity var(--ease);
  text-decoration:none;
}
.pill-btn:hover{border-color:var(--border-hover);background:var(--fill-hover)}
.pill-btn:active{transform:scale(.97)}
.pill-btn:disabled{opacity:.45;cursor:default;pointer-events:none}
.pill-btn svg{width:20px;height:20px;flex-shrink:0}

.back-link{position:absolute;top:40px;left:40px}
.back-link svg{width:16px;height:16px}

.req-note{font-size:12.5px;color:var(--txt-muted);text-align:center;padding:7px 16px;border:1px solid var(--border);border-radius:999px}
.req-note a{color:var(--txt-muted);text-decoration:underline;text-underline-offset:3px}
.req-note a:hover{color:var(--txt)}

.hint{font-size:14px;color:var(--txt-muted);text-align:center;line-height:1.6}
.hint a{color:var(--txt-muted);text-decoration:underline;text-underline-offset:3px}
.hint a:hover{color:var(--txt)}
.hint-bottom{position:fixed;bottom:40px;left:0;right:0}

.error-banner{
  position:fixed;
  top:24px;left:50%;
  transform:translate(-50%,-140%);
  z-index:20;
  display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 40px);
  padding:12px 20px;
  border-radius:999px;
  background:rgba(241,109,109,.12);
  border:1px solid rgba(241,109,109,.35);
  color:var(--danger);
  font-size:13.5px;
  font-weight:500;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:0;
  transition:transform 360ms cubic-bezier(.16,1,.3,1),opacity 260ms ease;
  pointer-events:none;
}
.error-banner.show{transform:translate(-50%,0);opacity:1}
.error-banner svg{width:17px;height:17px;flex-shrink:0}
.error-banner span{white-space:normal;line-height:1.4}

.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--txt);animation:spin .7s linear infinite;display:none}
@media (prefers-color-scheme: light){.spinner{border-color:rgba(0,0,0,.2);border-top-color:var(--txt)}}
.pill-btn.loading .spinner{display:inline-block}
.pill-btn.loading .btn-label{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

.code-boxes{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.code-box-static{
  width:52px;height:64px;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:28px;font-weight:700;
  border-bottom:2px solid var(--border-hover);
}
.countdown{font-size:13px;color:var(--txt-muted);letter-spacing:.05em;font-variant-numeric:tabular-nums}