:root{
  --fg:#e9f6fb;--dim:#9fb3ba;--faint:#7d8f96;--line:#2c3a40;--cy:#7fe3f5;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#000;color:var(--fg);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--mono);font-weight:300;font-size:15px;line-height:1.6;letter-spacing:.04em;text-transform:lowercase;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
::selection{background:var(--cy);color:#000}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#world{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0}
#track{position:relative;height:1000vh;z-index:-1}
html.static #track{display:none}

.lines{position:fixed;inset:0;pointer-events:none;z-index:2}
.t{position:absolute;left:0;right:0;bottom:22vh;text-align:center;opacity:0;padding:0 24px;will-change:opacity,transform}
.t p{margin:0 0 6px;font-size:14px;letter-spacing:.16em;color:var(--fg);text-shadow:0 0 14px #000,0 0 4px #000}
.t .mark{font-size:20px;letter-spacing:.5em;padding-left:.5em;margin-bottom:12px}
.t-open{bottom:19vh;opacity:1}
.t-open p:last-child{color:var(--dim)}
.t .big{font-size:22px;letter-spacing:.42em;padding-left:.42em}
.t-core{bottom:13vh}
.t-core p{font-size:15px}
.t-core p+p{color:var(--cy)}
.hint{position:fixed;left:0;right:0;bottom:5vh;margin:0;text-align:center;font-size:10px;letter-spacing:.4em;padding-left:.4em;color:var(--faint);z-index:2;pointer-events:none;transition:opacity 1.2s}
.hint::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--faint),transparent)}

.end{position:fixed;left:50%;bottom:12vh;transform:translate(-50%,12px);width:min(400px,calc(100vw - 48px));text-align:center;opacity:0;visibility:hidden;z-index:3;transition:opacity 1.6s ease,transform 1.6s ease,visibility 0s linear 1.6s}
.end.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity 1.6s ease,transform 1.6s ease,visibility 0s}
.end h2{margin:0;font-size:13px;font-weight:400;letter-spacing:.3em;padding-left:.3em}
.sub{margin:8px 0 20px;color:var(--dim);font-size:12px}
.field{display:flex;border-bottom:1px solid var(--line);transition:border-color .4s}
.field:focus-within{border-color:var(--cy)}
input[type=email]{flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:var(--fg);font:inherit;font-size:16px;letter-spacing:.04em;text-transform:none;padding:12px 4px;outline:none}
input[type=email]::placeholder{color:#5f6f75;opacity:1}
button{background:transparent;border:0;color:var(--dim);font:inherit;font-size:12px;letter-spacing:.24em;padding:12px 4px 12px 16px;cursor:pointer;text-transform:lowercase;transition:color .3s}
button:hover,button:focus-visible{color:var(--cy)}
button:disabled{cursor:default;color:var(--faint)}
:focus-visible{outline:1px solid var(--cy);outline-offset:4px}
input[type=email]:focus-visible{outline:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.status{min-height:1.6em;margin:14px 0 0;font-size:12px;color:var(--dim);letter-spacing:.06em}
.status.ok{color:var(--cy)}
form.done .field{display:none}
.received-static{display:none;margin:14px 0 0;font-size:12px;color:var(--cy)}
.received-static:target{display:block}
.end:has(.received-static:target){opacity:1;visibility:visible}
.end:has(.received-static:target) form{display:none}
.foot{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;letter-spacing:.14em;color:var(--faint)}
.foot p{margin:0}
.x{display:inline-flex;align-items:center;gap:8px;color:var(--faint);text-decoration:none;padding:6px;transition:color .3s}
.x:hover,.x:focus-visible{color:var(--fg)}

/* no webgl / reduced motion: everything still readable, no world */
html.static .lines{position:static;padding:14vh 0 0}
html.static .t{position:static;opacity:1;margin:0 0 44px}
html.static .hint{display:none}
html.static .end{position:static;transform:none;opacity:1;visibility:visible;margin:40px auto 60px}

@media (max-width:600px){
  .t{bottom:20vh}
  .t p{font-size:13px;letter-spacing:.12em}
  .t .mark{font-size:17px;letter-spacing:.42em}
  .t-core{bottom:12vh}
  .t-core p{font-size:13px}
  .end{bottom:9vh}
}