/* The submit card on the home page (public/submit-card.js). The form inside is /submit?card=1. */
html.sc-lock,html.sc-lock body{overflow:hidden}
.sc{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px}
.sc[hidden]{display:none}
.sc-dim{position:absolute;inset:0;background:rgba(20,18,12,.34);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9);opacity:0;transition:opacity .3s ease}
.sc.sc-in .sc-dim{opacity:1}
/* Only transform and opacity move. */
/* One steady size for every step and every choice: it never shrinks to fit a short step, and the form scrolls inside when it is long. */
.sc-card{position:relative;width:min(1180px,100%);height:min(900px,calc(100vh - 48px));height:min(900px,calc(100dvh - 48px));border:1.5px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:6px 6px 0 var(--ink),0 30px 80px rgba(0,0,0,.3);overflow:hidden;opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.05);will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .22s ease}
.sc.sc-in .sc-card{opacity:1;transform:none}
.sc-frame{display:block;width:100%;height:100%;border:0;background:var(--paper);color-scheme:normal}
.sc-rim{position:absolute;left:0;right:0;top:0;height:5px;z-index:2;background:var(--stripes);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.sc.sc-in .sc-rim{transform:scaleX(1);opacity:0;transition:transform .7s .3s cubic-bezier(.45,0,.2,1),opacity .4s 1.1s ease}
.sc-wait{position:absolute;inset:0;display:none;place-items:center;background:var(--paper)}
.sc-wait i{width:120px;height:6px;border:1.5px solid var(--ink);border-radius:4px;background:linear-gradient(90deg,var(--g),var(--y),var(--o),var(--r),var(--v),var(--b)) 0 0/200% 100%;animation:scwait 1.2s linear infinite}
.sc.sc-loading .sc-wait{display:grid}
.sc.sc-loading .sc-frame{opacity:0}
@keyframes scwait{to{background-position:-200% 0}}
.sc-toast{position:fixed;left:50%;bottom:22px;z-index:9001;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 24px);padding:10px 12px 10px 16px;transform:translateX(-50%);border-radius:10px;background:var(--ink);color:var(--paper);font:14px var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sc-toast[hidden]{display:none}
.sc-toast button{flex:none;padding:6px 10px;border:0;border-radius:7px;background:var(--g);color:#fff;font:inherit;cursor:pointer}
/* Confetti and sparkles over the whole window when it is sent. */
.sc-confetti{position:fixed;inset:0;z-index:9003;overflow:hidden;pointer-events:none}
.sc-confetti>i{position:absolute;top:-24px;will-change:transform,opacity;animation:scdrift var(--t,3.6s) cubic-bezier(.3,.2,.5,1) both}
.sc-confetti b{display:block;width:8px;height:13px;border:1px solid rgba(29,27,23,.55);border-radius:2px;background:var(--c);animation:scsway 1.3s ease-in-out infinite alternate}
.sc-confetti .sc-star b{width:20px;height:20px;border:0;border-radius:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:sctwinkle .9s ease-in-out infinite alternate}
@keyframes scdrift{0%{transform:translate(0,0) rotate(0deg);opacity:0}8%{opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),104vh) rotate(var(--r));opacity:0}}
@keyframes scsway{from{transform:translateX(-9px) rotate(-14deg)}to{transform:translateX(9px) rotate(14deg)}}
@keyframes sctwinkle{from{transform:scale(.55);opacity:.6}to{transform:scale(1.15);opacity:1}}
/* Phones: a full-screen sheet that slides up. */
@media (max-width:640px){
  .sc{padding:0;place-items:stretch}
  .sc-card{width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;opacity:1;transform:translateY(100%);transition:transform .42s cubic-bezier(.22,1,.36,1)}
  .sc.sc-in .sc-card{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sc-card,.sc.sc-in .sc-card{transform:none!important;transition:opacity .15s ease!important}
  .sc-card{opacity:0}
  .sc.sc-in .sc-card{opacity:1}
  .sc-rim,.sc-confetti{display:none!important}
  .sc-wait i{animation:none}
}