*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#f5f5f3;background:#111112;color-scheme:dark;--ease:cubic-bezier(.2,.8,.2,1);--error:#f2a594}body{margin:0;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}main{margin:auto;text-align:center;width:100%;padding:64px 24px}.eyebrow{font-size:12px;color:#858589;margin-bottom:30px}h1{font-size:clamp(44px,6.8vw,86px);letter-spacing:-.065em;line-height:1.06;font-weight:500;margin:0}h1 span{color:#858589}.intro{font-size:17px;color:#a5a5a8;line-height:1.6;margin:28px 0 34px}button{font:inherit;cursor:pointer}.sr-only,.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}

/* Field */
form{max-width:440px;margin:auto}
.input-row{position:relative;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;background:linear-gradient(180deg,#1d1d20,#18181a);border:1px solid #2e2e31;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px -12px rgba(0,0,0,.6);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.input-row:hover{border-color:#3d3d41}
.input-row:focus-within{border-color:#5c5c61;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 4px rgba(255,255,255,.05),0 10px 30px -12px rgba(0,0,0,.6)}
.input-icon{flex:none;color:#5f5f64;transition:color .25s var(--ease)}
.input-row:focus-within .input-icon{color:#a5a5a8}
input{flex:1;min-width:0;height:44px;padding:0 4px;background:transparent;border:0;outline:0;color:inherit;font:inherit;font-size:15px;letter-spacing:-.005em}
input::placeholder{color:#5f5f64}
input:-webkit-autofill{-webkit-text-fill-color:#f5f5f3;transition:background-color 9999s}

/* Button */
button[type=submit]{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px 0 18px;border:0;border-radius:10px;background:linear-gradient(180deg,#fafaf7,#e6e6e1);color:#141415;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.4);transition:transform .2s var(--ease),filter .2s var(--ease)}
button[type=submit]:hover{filter:brightness(1.04)}
button[type=submit]:active{transform:scale(.97)}
.button-arrow{flex:none;transition:transform .25s var(--ease)}
button[type=submit]:hover .button-arrow{transform:translateX(2px)}
button:focus-visible{outline:2px solid #f5f5f3;outline-offset:3px}
.spinner{position:absolute;inset:0;margin:auto;width:16px;height:16px;border:1.8px solid rgba(20,20,21,.2);border-top-color:#141415;border-radius:50%;opacity:0;animation:spin .7s linear infinite}
form.is-loading button[type=submit]{cursor:wait}
form.is-loading .button-label,form.is-loading .button-arrow{opacity:0}
form.is-loading .spinner{opacity:1}

/* Feedback: note and error share one line so the layout never jumps */
.feedback{display:grid;margin-top:14px;min-height:20px}
.feedback>*{grid-area:1/1;margin:0;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.note{color:#717176;font-size:12px}
#message{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--error);font-size:13px;line-height:1.5;opacity:0;transform:translateY(-4px);pointer-events:none}
#message svg{flex:none}
form.is-error .note{opacity:0;transform:translateY(4px)}
form.is-error #message{opacity:1;transform:none}
form.is-error .input-row{border-color:rgba(242,165,148,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 4px rgba(242,165,148,.08)}
form.is-error .input-icon{color:var(--error)}
form.shake .input-row{animation:shake .4s var(--ease)}

/* Success */
.success{max-width:440px;margin:auto;padding:4px 0;outline:0;animation:rise .5s var(--ease) both}
.check{color:#f5f5f3}
.check-ring{stroke-dasharray:129;stroke-dashoffset:129;opacity:.35;animation:draw .7s var(--ease) forwards}
.check-mark{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .4s .45s var(--ease) forwards}
.success h2{font-weight:500;letter-spacing:-.03em;font-size:26px;margin:16px 0 8px}
.success p{color:#a5a5a8;font-size:14px;line-height:1.6;margin:0}
.success strong{color:#f5f5f3;font-weight:500;overflow-wrap:anywhere}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

@media(max-width:600px){main{padding:64px 22px}h1{font-size:46px}.eyebrow{font-size:11px}.intro{font-size:15px}.desktop{display:none}input{font-size:16px}.input-icon{display:none}.input-row{padding-left:10px}}
@media(max-width:380px){.button-arrow{display:none}button[type=submit]{padding:0 14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important}.spinner{animation:spin 1.4s linear infinite!important}}