body{min-height:100vh;min-height:100svh;overflow-x:hidden;background:
  linear-gradient(rgba(127,178,229,.035) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(127,178,229,.035) 1px,transparent 1px) 0 0/44px 44px,var(--bg)}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 18% 50%,rgba(10,14,20,.86) 0,rgba(10,14,20,.55) 34%,transparent 66%)}
.wrap{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:24px clamp(20px,8vw,120px)}
.card{position:relative;width:100%;max-width:420px;padding:36px 32px 32px;background:rgba(13,19,27,.72);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:rise .9s var(--ease) both .25s}
.tick{position:absolute;width:11px;height:11px;border:0 solid var(--accent)}
.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.card h1{margin:26px 0 8px;font-size:clamp(1.7rem,5vw,2.05rem);line-height:1.12;letter-spacing:-.035em;font-weight:600}
.lead{margin:0 0 26px;color:var(--muted);font-size:.97rem}
label{display:block;margin-bottom:8px;font:500 .74rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field{position:relative}
.field input{width:100%;height:50px;padding:0 50px 0 14px;background:rgba(5,8,12,.6);border:1px solid var(--line-2);border-radius:0;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.2)}
.eye{position:absolute;top:0;right:0;width:50px;height:50px;background:none;border:0;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.eye:hover,.eye[aria-pressed=true]{color:var(--text)}
.eye svg,.submit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.error{min-height:1.5em;margin:10px 0 12px;font-size:.9rem;color:var(--accent-2)}
.submit{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;padding:0 18px;background:var(--accent);color:#160701;border:0;font-weight:600;cursor:pointer;overflow:hidden;transition:background .2s}
.submit:hover{background:#ff7e47}
.submit svg{transition:transform .3s var(--ease)}
.submit:hover svg{transform:translateX(4px)}
.submit:disabled{cursor:wait;background:#b4562c}
.card[data-state=error]{animation:rise .9s var(--ease) both .25s,shake .46s var(--ease) 1.1s}
.card.shake{animation:shake .46s var(--ease)}
.card.shake .field input{border-color:var(--accent)}
.card.sending .submit svg{animation:nudge .8s ease-in-out infinite}
.card.done{animation:out .55s var(--ease) forwards}
.stamp{position:fixed;right:24px;bottom:22px;display:flex;border:1px solid var(--line-2);background:rgba(10,14,20,.7);font:400 .7rem/1.35 var(--mono);color:var(--muted)}
.stamp div{padding:8px 13px;border-left:1px solid var(--line-2)}.stamp div:first-child{border:0}
.stamp b{display:block;font-weight:500;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.stamp i{display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--accent);border-radius:50%;vertical-align:1px;animation:blink 2.4s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes out{to{opacity:0;transform:translateY(-16px) scale(.98)}}
@keyframes shake{0%,100%{transform:none}18%{transform:translateX(-9px)}38%{transform:translateX(8px)}58%{transform:translateX(-5px)}78%{transform:translateX(3px)}}
@keyframes nudge{50%{transform:translateX(5px)}}
@keyframes blink{50%{opacity:.3}}
@media (max-width:860px){
  #scene{opacity:.5}
  .vignette{background:linear-gradient(rgba(10,14,20,.25),rgba(10,14,20,.7))}
  .wrap{justify-content:center}.stamp{display:none}
}
@media (max-width:420px){.card{padding:28px 22px 24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}