@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/fredoka-6438e7de.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-f11d729b.woff2) format('woff2')}
:root{
  --bg:#12102A; --card:#221E52; --card2:#2A2560; --ink:#F5F2FF; --dim:#A9A2D8; --line:#37306E;
  --violet:#9B7BFF; --pink:#FF5CA8; --cyan:#3DDCFF; --bad:#FF6B6B; --yellow:#FFC84A;
  --chip-bg:#2A2560; --chip-fg:#B4A0FF;
  --disp:'Fredoka',ui-rounded,system-ui,sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;
  grid-template-columns:minmax(0,1fr);   /* the column is the screen, whatever the input would like */
  font:16px/1.55 var(--ui);color:var(--ink);background-color:var(--bg);
  background-image:
    radial-gradient(38rem 26rem at 12% 8%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 70%),
    radial-gradient(30rem 24rem at 92% 92%,color-mix(in srgb,var(--pink) 18%,transparent),transparent 70%),
    radial-gradient(22rem 18rem at 88% 10%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 70%);
}
.card{
  width:100%;max-width:440px;padding:34px 30px 30px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
}
.logo{display:block;width:60px;height:60px;margin:0 auto 14px;border-radius:16px}
.kick{
  display:inline-block;padding:4px 12px;border-radius:999px;font:600 .8rem/1.4 var(--ui);
  letter-spacing:.04em;text-transform:uppercase;background:var(--chip-bg);color:var(--chip-fg);
}
h1{font:600 clamp(1.7rem,6vw,2.1rem)/1.15 var(--disp);margin:14px 0 8px;letter-spacing:-.01em}
.lede{margin:0 auto 22px;color:var(--dim);max-width:34ch}
form{text-align:left}
label{display:block;font-weight:600;font-size:.9rem;margin:0 0 6px;color:var(--dim)}
.row{display:flex;gap:10px}
input{
  flex:1 1 auto;width:100%;min-width:0;height:52px;padding:0 16px;border-radius:14px;
  border:2px solid var(--line);background:var(--card2);color:var(--ink);
  font:600 1.15rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
}
input::placeholder{color:#9A93CC;letter-spacing:.08em;font-weight:500}
input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 30%,transparent)}
input[aria-invalid="true"]{border-color:var(--bad)}
button{
  flex:none;height:52px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;
  font:600 1.05rem/1 var(--disp);background:var(--violet);color:#12102A;
}
button:hover{background:#AE93FF}
button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
input,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.msg{margin:10px 2px 0;font-weight:600;font-size:.95rem;color:var(--bad)}
.note{margin:18px 0 0;font-size:.85rem;color:var(--dim);text-align:center}
.clock{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:10px 16px;border-radius:14px;
  background:var(--card2);border:1px solid var(--line);font:600 1rem/1.2 var(--disp);color:var(--yellow);
}
@media(max-width:400px){
  .card{padding:28px 20px 24px}
  .row{flex-direction:column}
  button{width:100%}
}