:root{color-scheme:dark;--ink:#f1f2ee;--base:#0b0c0e;--red:#b73136}
*{box-sizing:border-box}
html{background:var(--base);min-width:280px}
body{margin:0;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:var(--base)}
.earth{position:absolute;inset:0;background:url("earth-reference.png") center 46%/cover no-repeat;filter:saturate(.48) brightness(.58);opacity:.68}
.right-plane{position:absolute;inset:72% 0 0;background:linear-gradient(180deg,rgba(11,12,14,.16),rgba(11,12,14,.92) 34%,var(--base) 100%)}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0c0e 0%,rgba(11,12,14,.96) 18%,rgba(11,12,14,.9) 34%,rgba(11,12,14,.65) 55%,rgba(11,12,14,.26) 100%),linear-gradient(0deg,rgba(11,12,14,.58),transparent 58%)}
.seam{position:absolute;left:0;right:0;top:72%;height:1px;background:linear-gradient(90deg,rgba(183,49,54,.08),rgba(183,49,54,.72) 18%,#b73136 50%,rgba(183,49,54,.72) 82%,rgba(183,49,54,.08));box-shadow:0 0 12px rgba(183,49,54,.12)}
.grain{position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
main{min-height:100svh;position:relative;display:flex;align-items:center;padding:96px clamp(48px,8.333vw,160px)}
.entrance{width:360px;max-width:100%;transform:translateY(-17px)}
h1{font-size:44px;line-height:1.08;letter-spacing:-2.1px;font-weight:500;margin:0}
header p{font-size:14px;line-height:1.5;letter-spacing:.05px;color:#b0b2b5;margin:12px 0 0}
form{margin-top:48px}
label{display:block;font-size:11px;letter-spacing:.04em;color:#b0b2b5;margin-bottom:10px}
.input-row{height:56px;display:flex;border:1px solid #3a3c40;background:rgba(12,15,19,.78);transition:border-color .2s,background .2s}
.input-row:focus-within{border-color:#b7bac0;background:#101317}
input{width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:transparent;font:400 16px "Helvetica Neue",Helvetica,Arial,sans-serif;padding:0 17px;border-radius:0;letter-spacing:.02em}
input::placeholder{font-size:13px;color:#858990;letter-spacing:0}
button{width:56px;flex-shrink:0;border:0;border-left:1px solid #3a3c40;background:transparent;color:#c6c8cc;cursor:pointer;display:grid;place-items:center;transition:color .2s,background .2s}
button:hover{color:var(--ink);background:#171b20}
button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#status{font-size:12px;line-height:1.6;margin:12px 0 0;color:#c6c8cc;min-height:20px}
@media(min-width:1800px){main{padding-left:8.333vw}}
@media(max-width:680px){main{padding:80px 24px;align-items:center}.entrance{width:min(360px,100%);transform:translateY(-10px)}h1{font-size:32px;letter-spacing:-1.45px}header p{font-size:13px}.earth{background-position:63% center;opacity:.61}.right-plane{inset:78% 0 0;background:linear-gradient(180deg,rgba(11,12,14,.1),rgba(11,12,14,.94) 32%,var(--base) 100%)}.seam{top:78%;opacity:.86}.shade{background:linear-gradient(90deg,#0b0c0e 0%,rgba(11,12,14,.93) 24%,rgba(11,12,14,.78) 48%,rgba(11,12,14,.32) 100%),linear-gradient(0deg,rgba(11,12,14,.48),transparent 56%)}.entrance{position:relative}form{margin-top:48px}.input-row{background:#0d1013}}
@media(max-height:450px){main{padding-top:48px;padding-bottom:48px}.entrance{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}