.email-micrographic{position:fixed;z-index:18;height:96px;margin:0;padding:0;border:0;background:transparent;font:10px "Oxanium",monospace;color:#93a0aa;pointer-events:none;isolation:isolate;transition:left .22s ease,top .22s ease,width .22s ease}
.email-micrographic[data-keyboard=true]{transition:none}
.email-lines{position:absolute;inset:0;overflow:visible;pointer-events:none;width:100%;color:#9aaab6}
.email-lines path{fill:none;stroke:currentColor;stroke-width:.65;vector-effect:non-scaling-stroke}
.email-travel{stroke-dasharray:.7 4;opacity:0;animation:email-travel-in .36s ease-out forwards}
.email-solid{stroke-dasharray:1;stroke-dashoffset:1;animation:email-solid-in .24s .2s ease-out forwards}
.email-micrographic input{position:absolute;left:12px;right:var(--email-text-right,80px);top:5px;width:calc(100% - var(--email-text-right,80px) - 12px);height:27px;padding:0;border:0;border-radius:0;background:transparent;font:13.2px/27px "Oxanium",monospace;letter-spacing:.015em;color:#c9d2d7;outline:none;caret-color:#ffad6f;appearance:none;text-align:right;direction:ltr;opacity:0;pointer-events:none;transition:opacity .16s ease;color-scheme:dark}
/* Clip the browser's autofill paint to the letters, rather than covering the particle scene with a filled module. */
.email-micrographic input:autofill{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#c9d2d7;caret-color:#ffad6f;box-shadow:none}
.email-micrographic input:-webkit-autofill{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#c9d2d7;caret-color:#ffad6f;-webkit-box-shadow:none;box-shadow:none}
.email-micrographic input::placeholder{color:#76838d;opacity:.38;transition:opacity .12s ease}
.email-micrographic input:focus::placeholder{opacity:0}
.email-micrographic:is([data-state=editing],[data-state=submitting],[data-state=settling],[data-state=completing]) input{opacity:1;pointer-events:auto}
/* Its front face centers on the empty input's right-aligned native caret; the separate check retains its own clear slot. */
.email-neon-cursor{position:absolute;right:calc(var(--email-text-right,80px) - 9.9px);top:-.1px;width:18.6px;height:37.2px;opacity:0;pointer-events:none;transition:opacity .1s ease}
.email-neon-cursor svg{width:100%;height:100%;overflow:visible}
.email-cursor-depth,.email-cursor-outline{fill:none;stroke:#c9d6dc;stroke-width:.72;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.email-cursor-depth{opacity:.32}.email-cursor-outline{opacity:.62}
.email-cursor-vapor{opacity:.5;transform-origin:center;animation:email-warm-vapor 1.5s ease-in-out infinite}
.email-micrographic[data-state=editing]:not([data-typed=true]):not([data-focused=true]) .email-neon-cursor{opacity:.9}
.email-micrographic[data-focused=true] .email-neon-cursor,.email-micrographic[data-typed=true] .email-neon-cursor,.email-micrographic[data-state=submitting] .email-neon-cursor,.email-micrographic[data-state=completing] .email-neon-cursor{opacity:0}
.email-check{position:absolute;right:12px;top:-8px;width:var(--email-action-size,50px);height:var(--email-action-size,50px);border:0;padding:0;background:transparent;color:#b5c8d5;cursor:pointer;transition:transform .12s ease,opacity .2s ease;opacity:.88;z-index:2;pointer-events:auto}
.email-check[hidden]{display:none}
.email-check:disabled{opacity:.32;cursor:default}
.email-check:not(:disabled):hover{opacity:1}
.email-check:active{transform:scale(.9)}
.email-check:focus-visible,.email-cancel:focus-visible{outline:1px dotted #aabcc5;outline-offset:2px}
.email-check svg{width:100%;height:100%;overflow:visible}
.email-check-depth,.email-check-face{fill:none;stroke:#c9d6df;stroke-width:.7;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.email-check-depth{opacity:.34}.email-check-face{opacity:.8}
.email-check-glass{opacity:.85}
.email-check-highlight{fill:none;stroke:#f0fbff;stroke-width:.28;opacity:.62;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.email-check-hex{color:#b7c9d4;opacity:.22}
.email-vapor-wisp{fill:none;stroke-linecap:round;stroke-linejoin:round}
.email-vapor-grains{opacity:.66}
.email-check-glow{fill:none;stroke:#91ffb5;stroke-width:2.4;opacity:0;stroke-linejoin:round}
.email-micrographic[data-state=completing] .email-check-glow{animation:email-green-outline .7s ease-out forwards}
.email-check-vapor{opacity:0;transform-origin:50% 70%;transform:translateY(10px);}
.email-micrographic[data-state=completing] .email-check-vapor{animation:email-green-vapor .7s ease-out forwards}
.email-micrographic[data-state=completing] .email-check{opacity:1}
.email-status{position:absolute;left:12px;top:41px;right:var(--email-text-right,80px);margin:0;font:8px "Oxanium",monospace;color:#91aaa2;line-height:1.6;text-align:right;pointer-events:none}
.email-status[data-error=true]{color:#d6ac89}
.email-cancel{position:absolute;right:25px;top:57px;width:24px;height:24px;margin:0;padding:0;background:none;border:0;color:#73808b;font:15px "Oxanium",monospace;cursor:pointer;transition:transform .12s;pointer-events:auto}
.email-cancel:active{transform:scale(.9)}
.email-micrographic[data-state=retracting] input,.email-micrographic[data-state=retracting] .email-check,.email-micrographic[data-state=retracting] .email-neon-cursor,.email-micrographic[data-state=retracting] .email-status,.email-micrographic[data-state=retracting] .email-cancel{opacity:0;pointer-events:none;transition:opacity .12s}
.email-micrographic[data-state=retracting] .email-solid{animation:email-solid-out .23s .12s ease-in forwards}
.email-micrographic[data-state=retracting] .email-travel{animation:email-travel-out .22s .23s ease-in forwards}
@keyframes email-travel-in{0%{opacity:0;stroke-dashoffset:35}50%{opacity:.85}100%{opacity:.45;stroke-dashoffset:0}}
@keyframes email-solid-in{to{stroke-dashoffset:0}}
@keyframes email-solid-out{from{stroke-dashoffset:0}to{stroke-dashoffset:1;opacity:0}}
@keyframes email-travel-out{from{opacity:.45;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-35}}
@keyframes email-warm-vapor{0%,100%{opacity:.35;transform:translateY(2px)}50%{opacity:.8;transform:translateY(-2px)}}
@keyframes email-green-outline{0%{opacity:0}28%{opacity:.32}65%{opacity:.2}100%{opacity:.1}}
@keyframes email-green-vapor{0%{opacity:0;transform:translateY(12px)}28%{opacity:.95;transform:translateY(2px)}65%{opacity:1;transform:translateY(-2px)}100%{opacity:.95;transform:translateY(0)}}
/* Safari focuses a field smaller than 16px by zooming its page. Keep the real touch input at that minimum. */
@media(hover:none),(pointer:coarse){.email-micrographic input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.email-micrographic,.email-micrographic *, .email-micrographic *::before{animation:none!important;transition:none!important}.email-travel{opacity:.35}.email-solid{stroke-dashoffset:0}.email-cursor-vapor{opacity:.6;transform:none}.email-micrographic[data-state=completing] .email-check-vapor{opacity:1;transform:none}.email-micrographic[data-state=completing] .email-check-glow{opacity:.2}.email-micrographic[data-state=retracting] .email-lines{opacity:0}}
