/* CONFIRM YOUR EMAIL (crank W20, 4 Oct 2026): the card. House grammar: Moonshots glass (gold top edge, gradient rim,
   pointer glow, outline numeral bleeding off the corner), Jost display, IBM Plex text, Plex Mono kicker. One accent:
   gold; green only for "confirmed". Non-modal: it floats, the page stays usable behind it. */
.ec{
  --ec-gold:227,200,120; --ec-ink:#F2EFE6; --ec-mut:#C9D3E2;
  --ec-disp:"Jost",Futura,"Century Gothic",sans-serif; --ec-sans:"IBM Plex Sans",-apple-system,system-ui,sans-serif; --ec-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  position:fixed; z-index:950; right:24px; bottom:24px; width:min(400px, calc(100vw - 32px));
  box-sizing:border-box; padding:26px 26px 20px; border-radius:22px; overflow:hidden; overflow:clip; isolation:isolate;   /* clip: a focused field can never scroll the card's insides */
  color:var(--ec-ink); font:15px/1.5 var(--ec-sans);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--ec-gold),.16), transparent 55%),
    radial-gradient(240px circle at var(--mx,70%) var(--my,10%), rgba(var(--ec-gold),.10), transparent 70%),
    linear-gradient(165deg, rgba(20,22,74,.92), rgba(6,7,34,.96));
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(var(--ec-gold),.28), 0 30px 80px -24px rgba(0,0,0,.85), 0 0 60px -30px rgba(var(--ec-gold),.55);
}
.ec[hidden]{display:none}
.ec::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--ec-gold),1) 30%,#fff3c8 50%,rgba(var(--ec-gold),1) 70%,transparent);box-shadow:0 0 18px rgba(var(--ec-gold),.9);z-index:2}
.ec-rim{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(140deg,rgba(var(--ec-gold),.7),rgba(255,255,255,.06) 40%,rgba(var(--ec-gold),.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ec-n{position:absolute;right:-14px;bottom:-34px;z-index:-1;font:700 150px/1 var(--ec-disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px rgba(var(--ec-gold),.16);pointer-events:none;user-select:none}
.ec[data-view="done"] .ec-n,.ec[data-view="away"] .ec-n{-webkit-text-stroke-color:rgba(var(--ec-gold),.26)}
.ec-x{all:unset;position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--ec-mut);cursor:pointer;transition:background .2s,color .2s}
.ec-x:hover{background:rgba(255,255,255,.08);color:#fff}.ec-x:focus-visible{outline:2px solid rgba(var(--ec-gold),1);outline-offset:1px}.ec-x svg{width:18px;height:18px}
.ec-in{position:relative;z-index:2}
.ec-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;margin:0 0 14px;color:rgb(var(--ec-gold));
  background:radial-gradient(circle at 30% 25%,rgba(var(--ec-gold),.28),rgba(var(--ec-gold),.06) 70%);box-shadow:inset 0 0 0 1px rgba(var(--ec-gold),.4),0 8px 24px -10px rgba(var(--ec-gold),.6)}
.ec-ic svg{width:24px;height:24px}
.ec-k{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:500 11px/1 var(--ec-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ec-mut)}
.ec-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:999px;color:#1a1405;font-weight:600;letter-spacing:.08em;
  background:linear-gradient(180deg,#f6e2a2,#d6b05a);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 18px -4px rgba(var(--ec-gold),.8)}
.ec-pill svg{width:12px;height:12px}
.ec-h{margin:0 40px 8px 0;font:600 26px/1.15 var(--ec-disp);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.ec-p{margin:0 0 18px;color:var(--ec-mut);max-width:42ch}.ec-p b{color:#fff;font-weight:600}.ec-p i{font-style:normal;color:rgb(var(--ec-gold))}
.ec-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ec-go{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;
  font:600 15px/1 var(--ec-sans);color:#1a1405;background:linear-gradient(180deg,#f6e2a2,#d9b45c 60%,#c99a41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 28px -12px rgba(var(--ec-gold),.9);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.ec-go:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 34px -12px rgba(var(--ec-gold),1)}
.ec-go:focus-visible{outline:2px solid #fff;outline-offset:3px}.ec-go[disabled]{opacity:.6;cursor:default;transform:none}
.ec-go[aria-busy="true"]{color:transparent;position:relative}.ec-go[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #1a1405;border-right-color:transparent;animation:ec-spin .7s linear infinite}
.ec-alt{all:unset;cursor:pointer;font:500 13.5px/1.2 var(--ec-sans);color:var(--ec-mut);text-decoration:underline;text-decoration-color:rgba(201,211,226,.35);text-underline-offset:3px}
.ec-alt:hover{color:#fff;text-decoration-color:rgba(var(--ec-gold),.9)}.ec-alt:focus-visible{outline:2px solid rgba(var(--ec-gold),1);outline-offset:2px;border-radius:3px}.ec-alt[disabled]{opacity:.5;cursor:default;text-decoration:none}
.ec-fine{margin:14px 0 0;font:12px/1.4 var(--ec-sans);color:var(--ec-mut);opacity:.7}
.ec-back{display:block;margin-top:12px}
.ec-form{display:flex;gap:8px;margin:0}
.ec-in-mail{flex:1;min-width:0;box-sizing:border-box;height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(var(--ec-gold),.35);background:rgba(0,0,0,.28);color:#fff;font:15px var(--ec-sans);outline:none}
.ec-in-mail:focus{border-color:rgba(var(--ec-gold),.9);box-shadow:0 0 0 3px rgba(var(--ec-gold),.18)}
/* the code: one real input (autofill, paste, one-time-code) over six cells */
.ec-code{position:relative;display:block;margin:4px 0 14px;cursor:text}
.ec-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent;z-index:1}
.ec-cells{display:grid;grid-template-columns:repeat(3,1fr) 2px repeat(3,1fr);gap:8px}.ec-cells i:nth-child(1){grid-area:1/1}.ec-cells i:nth-child(2){grid-area:1/2}.ec-cells i:nth-child(3){grid-area:1/3}.ec-cells i:nth-child(4){grid-area:1/5}.ec-cells i:nth-child(5){grid-area:1/6}.ec-cells i:nth-child(6){grid-area:1/7}
.ec-cells i{display:grid;place-items:center;height:56px;border-radius:12px;font:600 26px/1 var(--ec-mono);font-style:normal;color:#fff;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(201,211,226,.18);transition:box-shadow .2s,background .2s,transform .2s}
.ec-cells i.full{background:rgba(var(--ec-gold),.08);box-shadow:inset 0 0 0 1px rgba(var(--ec-gold),.45)}
.ec-cells i.on{box-shadow:inset 0 0 0 2px rgba(var(--ec-gold),1),0 0 18px -4px rgba(var(--ec-gold),.8)}
.ec-cells i.on:empty::after{content:"";width:2px;height:24px;background:rgb(var(--ec-gold));animation:ec-blink 1s steps(2) infinite}
.ec-code.shake .ec-cells{animation:ec-shake .4s cubic-bezier(.36,.07,.19,.97)}
.ec-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;font:12.5px/1.3 var(--ec-sans);color:var(--ec-mut)}
.ec-ttl{flex:1 1 100%;margin-bottom:2px;font-family:var(--ec-mono);font-size:12px;letter-spacing:.04em}.ec-ttl.late{color:#ffb38a}
.ec-st{position:relative;z-index:2;min-height:1.4em;margin:12px 0 0;font:13px/1.4 var(--ec-sans);color:var(--ec-mut)}
.ec-st:empty{min-height:0;margin:0}
.ec[data-view="done"] .ec-st.ok,.ec[data-view="away"] .ec-st.ok{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}   /* the big +150 says it; screen readers still hear it */.ec-st.err{color:#ffb38a}.ec-st.ok{color:#9df0bd}
/* the win */
.ec-won{position:relative;width:64px;height:64px;margin:0 0 14px}
.ec-medal{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;color:#0b2a17;background:radial-gradient(circle at 35% 30%,#d6ffe5,#57d68b 55%,#2a9c5c);
  box-shadow:0 0 0 4px rgba(76,201,127,.18),0 0 40px -6px rgba(76,201,127,.9);animation:ec-pop .7s cubic-bezier(.2,1.4,.3,1) both}
.ec-medal svg{width:30px;height:30px;stroke-dasharray:30;stroke-dashoffset:30;animation:ec-draw .5s .35s ease-out forwards}
.ec-burst{position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(var(--ec-gold),.9);opacity:0;animation:ec-ring 1.1s .2s cubic-bezier(.2,.8,.2,1)}
.ec-hc{font-size:30px}
.ec-big{display:flex;align-items:baseline;gap:8px;margin:2px 0 6px;font:700 52px/1 var(--ec-disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ec-plus{background:linear-gradient(180deg,#fff7d6,#E3C878 55%,#c99a41);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(var(--ec-gold),.55));animation:ec-glow 1.6s .4s ease-out}
.ec-big small{font:600 14px/1 var(--ec-mono);letter-spacing:.16em;color:rgb(var(--ec-gold))}
.ec-cp{margin-bottom:14px}
.ec-ok{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;margin:0 0 18px;padding:14px 0 0;border-top:1px solid rgba(201,211,226,.14);cursor:pointer;font:14px/1.45 var(--ec-sans);color:#E8ECF4}
.ec-ok input{position:absolute;opacity:0;width:1px;height:1px}
.ec-box{width:22px;height:22px;box-sizing:border-box;display:grid;place-items:center;border-radius:6px;border:1.5px solid rgba(var(--ec-gold),.65);background:rgba(0,0,0,.25);color:transparent;transition:background .2s,border-color .2s,color .2s}
.ec-box svg{width:14px;height:14px}
.ec-ok input:checked + .ec-box{background:rgb(var(--ec-gold));border-color:rgb(var(--ec-gold));color:#1a1405}
.ec-ok input:focus-visible + .ec-box{outline:2px solid #fff;outline-offset:2px}
.ec-okt small{display:block;margin-top:3px;font-size:12px;color:var(--ec-mut);opacity:.75}
.ec-saved{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#9df0bd}
/* motion: arrive, swap, leave */
.ec.in{animation:ec-in .55s cubic-bezier(.2,.8,.2,1) both}
.ec.in .ec-in > *{animation:ec-rise .5s cubic-bezier(.2,.8,.2,1) both}
.ec.in .ec-in > *:nth-child(2){animation-delay:.06s}.ec.in .ec-in > *:nth-child(3){animation-delay:.12s}.ec.in .ec-in > *:nth-child(4){animation-delay:.18s}.ec.in .ec-in > *:nth-child(n+5){animation-delay:.24s}
.ec-in.swap > *{animation:ec-rise .45s cubic-bezier(.2,.8,.2,1) both}
.ec-in.swap > *:nth-child(2){animation-delay:.05s}.ec-in.swap > *:nth-child(3){animation-delay:.1s}.ec-in.swap > *:nth-child(n+4){animation-delay:.15s}
.ec.out{animation:ec-out .26s ease-in both}
@keyframes ec-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ec-out{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes ec-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ec-spin{to{transform:rotate(360deg)}}
@keyframes ec-blink{50%{opacity:0}}
@keyframes ec-shake{20%,80%{transform:translateX(-4px)}40%{transform:translateX(6px)}60%{transform:translateX(-6px)}}
@keyframes ec-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes ec-draw{to{stroke-dashoffset:0}}
@keyframes ec-ring{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}
@keyframes ec-glow{0%{filter:drop-shadow(0 0 0 rgba(227,200,120,0))}40%{filter:drop-shadow(0 0 34px rgba(227,200,120,1))}100%{filter:drop-shadow(0 0 22px rgba(227,200,120,.55))}}
@media (max-width:520px){
  .ec{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;padding:22px 20px 18px;border-radius:20px}
  .ec-h{font-size:23px}.ec-cells{gap:6px}.ec-cells i{height:52px;font-size:24px}
  .ec-go{flex:1 1 auto}.ec-row .ec-alt{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ec.in,.ec.in .ec-in > *,.ec-in.swap > *,.ec.out,.ec-medal,.ec-burst,.ec-plus,.ec-code.shake .ec-cells{animation:none}
  .ec-medal svg{stroke-dashoffset:0;animation:none}.ec-cells i.on:empty::after{animation:none}
}