:root { color-scheme: dark; --bg: #000; --white: #f7f7f7; --muted: #97999c; --cyan: #00c9ef; --rule: #60646a; font-family: "Courier New", Courier, monospace; font-synthesis: none; }
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--bg); }
body { margin: 0; color: var(--white); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
::selection { color: #000; background: var(--cyan); }
.prelaunch { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: clip; }
.masthead { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; color: var(--muted); font-size: .75rem; letter-spacing: .055em; z-index: 1; }
.slash { color: var(--cyan); padding: 0 8px; }
.edition { white-space: nowrap; }
.identity { display: grid; place-items: center; width: 100%; flex: 1 0 auto; min-height: 0; }
/* A fixed crop ratio keeps the logo and claim inside the unfaded image area.
   The height budget leaves room for the form on wide, shorter displays. */
.brand-art { position: relative; isolation: isolate; width: min(1040px, 100%, max(560px, calc((100svh - 400px) * 1.6))); aspect-ratio: 8 / 5; overflow: hidden; background-image: url('./assets/drct-background-clean.png'); background-repeat: no-repeat; background-size: 100% auto; background-position: center; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent), linear-gradient(to bottom, transparent, black 14%, black 94%, transparent); mask-composite: intersect; }
/* Display lettering directly from the reference, at its original coordinates.
   Screen blending removes the source's black backdrop without covering strands.
   Only the separate cyan line's transform and glow animate. */
.brand-scene { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1373 / 2048; transform: translateY(-50%); mix-blend-mode: screen; pointer-events: none; }
.brand-original { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 2; mix-blend-mode: screen; }
.cyan-line { position: absolute; z-index: 1; left: .8%; top: 49.68%; width: 98.4%; height: .64%; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 10px #00c9ef, 0 0 26px rgb(0 201 239 / .65); transform: scaleX(1); transform-origin: center; }
.cyan-line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #8bf6ff; box-shadow: 0 0 12px #00d9ff, 0 0 32px #00c9ef; opacity: 0; }
.intro-pending .cyan-line { transform: scaleX(0); }
.intro-ready .cyan-line { will-change: transform; animation: cyan-launch-spread 1.25s cubic-bezier(.42,0,.24,1) .08s both; }
.intro-ready .cyan-line::after { will-change: opacity; animation: cyan-launch-flash 1.8s ease-in-out .08s both; }
@keyframes cyan-launch-spread { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cyan-launch-flash { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: .8; } 100% { opacity: 0; } }
.signup { width: min(600px, calc(100% - 48px)); margin: 16px auto 26px; text-align: center; z-index: 1; }
.signup-title { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; font-weight: 400; letter-spacing: .025em; color: #b5b7b9; }
.email-row { display: flex; align-items: stretch; gap: 20px; border-bottom: 1px solid var(--rule); transition: border-color .2s, box-shadow .2s; }
.email-row:focus-within { border-color: var(--cyan); box-shadow: 0 5px 12px -11px var(--cyan); }
.email-row:has([aria-invalid="true"]) { border-color: #e3a3a3; }
#email { width: 100%; min-width: 0; min-height: 56px; padding: 9px 0 15px; border: 0; outline: none; border-radius: 0; color: var(--white); background: transparent; font-size: clamp(1.125rem, 1.85vw, 1.5rem); }
#email::placeholder { color: #a1a1a5; opacity: 1; }
#email:-webkit-autofill { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 1000px #000 inset; caret-color: var(--cyan); }
.submit-button { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 12px; padding: 9px 0 15px 5px; border: 0; color: var(--cyan); background: transparent; font-size: 1rem; line-height: 1.5; white-space: nowrap; }
.submit-button svg { flex-shrink: 0; transition: transform .2s; }
.submit-button:hover { color: #7ceaff; }
.submit-button:hover svg { transform: translateX(4px); }
.submit-button:disabled { opacity: .6; cursor: wait; }
.signup-note { margin: 18px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.form-status { margin: 14px 0 0; color: #c4c9cd; font-size: .875rem; line-height: 1.6; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #edb2b2; }
.consent-note { max-width: 480px; margin: 18px auto 0; color: #85878c; font-size: .75rem; line-height: 1.6; text-wrap: pretty; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 40px 20px; color: #85878c; font-size: .75rem; line-height: 1.5; }
.legal-links { display: flex; align-items: center; gap: 14px; }
.legal-links button { min-height: 32px; padding: 5px 0; background: none; border: 0; color: inherit; }
.legal-links button:hover { color: var(--white); }
.legal-links > span { color: #4b5055; }
.domain { text-align: right; }
.visually-hidden, .honeypot { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
dialog { width: min(680px, calc(100% - 32px)); max-height: 85svh; padding: 28px; background: #0d0f10; color: #c4c9cd; border: 1px solid #363c40; border-radius: 2px; font-size: .875rem; line-height: 1.75; }
dialog::backdrop { background: rgb(0 0 0 / .82); backdrop-filter: blur(8px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.dialog-header h2 { color: var(--white); font-size: 1.25rem; font-weight: 400; margin: 0; }
.close-dialog { width: 44px; min-height: 44px; padding: 0; border: 0; color: var(--cyan); background: transparent; font: 32px/1 Arial, sans-serif; }
#dialog-content { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
#dialog-content p { margin: 12px 0; white-space: pre-line; }
#dialog-content section + section { margin-top: 28px; }
#dialog-content h3 { color: var(--white); font-size: 1.0625rem; line-height: 1.4; margin: 24px 0 12px; }
#dialog-content a { color: var(--cyan); text-underline-offset: 3px; }
.noscript-note { color: #edb2b2; font-size: .875rem; line-height: 1.5; }
@media (max-width: 700px) {
  .masthead { padding: 24px; font-size: .75rem; }
  .edition { display: none; }
  .brand-art { width: min(100%, 470px); aspect-ratio: 1; }
  .signup { margin: 16px auto 28px; }
  .signup-title { margin-bottom: 22px; font-size: .875rem; }
  .email-row { gap: 10px; }
  .submit-button { gap: 8px; font-size: .875rem; }
  .submit-button svg { width: 19px; height: 19px; }
  .consent-note { max-width: 350px; margin-top: 24px; }
  .footer { padding: 20px 24px 24px; gap: 20px; flex-wrap: wrap; }
  .domain { display: none; }
  .legal-links { gap: 10px; }
}
@media (max-width: 359px) {
  .signup { width: calc(100% - 36px); }
  .email-row { flex-wrap: wrap; gap: 0; }
  #email { flex-basis: 100%; }
  .submit-button { width: 100%; justify-content: space-between; min-height: 44px; }
  .footer { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .cyan-line { transform: scaleX(1) !important; } .cyan-line::after { opacity: 0 !important; } }

.social { margin: 30px 0 0; display: flex; justify-content: center; }
.social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; border: 1px solid rgb(247 247 247 / .22); border-radius: 999px; color: var(--white); background: transparent; text-decoration: none; font-size: .8125rem; letter-spacing: .02em; transition: border-color .2s ease, color .2s ease; }
.social-link:hover, .social-link:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.social-link svg { flex: none; }
@media (max-width: 700px) { .social { margin-top: 24px; } .social-link { font-size: .78125rem; padding: 10px 18px; } }