/* Degen Prop public Coming Soon — B — Signal Relay. Port of Codex's measured reference
   design/public-coming-soon-waitlist-signal-relay-production-v1/preview/styles.css (same values, same layout); app changes:
   real font family names, WebP delivery copies with PNG fallback, server-rendered states, honeypot, disabled controls in
   the sent state, aria-invalid on the checkbox, founder preview note, privacy page.
   Hotfix 2026-10-04 (fit): the package placed the console at bottom:-2.5vh, which cut 8-36 px of the drawn console off
   every desktop viewport and let it cover the copy in short windows. Now the drawn console (5.08 %-94.92 % of its box,
   measured from the alpha) always ends a small gap above the viewport edge, and its width is capped by the height left
   under the copy block; the headline shrinks only in short windows. Below 600 px of height and on phones the blocks
   join the document flow, so the page scrolls instead of hiding the form or the consent. Scene, layers, proportions and
   zone percentages are the package's. */
@font-face{font-family:'Saira Semi Condensed';src:url('fonts/SairaSemiCondensed-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Saira Semi Condensed';src:url('fonts/SairaSemiCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:dark;--blue:#087cff;--mineral:#f2eee4;--ink:#05070a;--muted:#acb7c5;--error:#ff665f;--success:#5bf2b2;--saira:'Saira Semi Condensed','Arial Narrow',sans-serif;--plex:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030507;color:var(--mineral)}
body{font-family:var(--plex);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.signal-page{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#030507;
  /* headline size (package: clamp(96px,8.7vw,168px)), capped by height in short windows only */
  --f1:clamp(64px,min(8.7vw,16vh),168px);
  /* bottom of the copy block (top 14.5vh + measured height ~ 1.52 x headline + 95px + 3.2vw), the gap under the console art,
     and the console width that fits between them: art height = 0.8984 x 787/1998 x width = 0.3539 x width */
  --copy-bottom:calc(14.5vh + 1.52 * var(--f1) + 95px + 3.2vw);
  --console-gap:max(10px,1.6vh);
  --console-w:min(64vw,1120px,calc((100vh - var(--console-gap) - var(--copy-bottom) - 16px) / .3539))}
.environment{position:absolute;z-index:-4;inset:0;background-image:url('art/desktop/signal-relay-environment.png');background-image:image-set(url('art/desktop/signal-relay-environment.webp') 1x,url('art/desktop/signal-relay-environment@2x.webp') 2x);background-size:cover;background-position:center center;transform:scale(1.025);animation:environment-breathe 16s ease-in-out infinite alternate}
.vignette{position:absolute;z-index:-3;inset:0;background:linear-gradient(90deg,rgba(2,4,6,.91) 0%,rgba(2,4,6,.63) 31%,rgba(2,4,6,.08) 60%,rgba(2,4,6,.44) 100%),linear-gradient(0deg,rgba(2,4,6,.78),transparent 36%)}
.brand-bar{position:absolute;z-index:5;top:max(34px,4.4vh);left:4.4vw;right:4.4vw;display:flex;align-items:flex-start}
.brand-lockup{display:block;width:clamp(250px,19vw,372px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.release-label{display:inline-block;margin-top:18px;border:1px solid rgba(238,242,248,.52);background:rgba(4,8,12,.62);padding:10px 16px;font:600 12px/1 var(--plex);letter-spacing:.18em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.message{position:absolute;z-index:3;left:4.5vw;top:14.5vh;width:min(650px,45vw);text-shadow:0 5px 28px #000}
.eyebrow{margin:18px 0 8px;color:#dfe8f1;font:600 clamp(11px,.78vw,14px)/1.2 var(--plex);letter-spacing:.15em}
h1{margin:0;font:900 var(--f1)/.76 var(--saira);letter-spacing:-.055em;color:var(--mineral)}
.product-line{margin:0 0 5px;font:900 clamp(21px,1.72vw,33px)/1.02 var(--saira);letter-spacing:.01em}
.support-line{margin:0;color:#dce5ef;font:600 clamp(12px,.95vw,18px)/1.3 var(--plex);letter-spacing:.07em}
.operator{position:absolute;z-index:-1;right:58vw;bottom:-13vh;height:69vh;max-height:780px;filter:drop-shadow(0 18px 35px rgba(0,0,0,.8));opacity:.92}
.console{position:absolute;z-index:4;right:14vw;bottom:calc(var(--console-gap) - .0508 * .3939 * var(--console-w));width:var(--console-w);aspect-ratio:1998/787}
.console-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 26px 45px rgba(0,0,0,.8))}
.console-shell--mobile{display:none}
.waitlist-form{position:absolute;inset:0;display:block;container-type:inline-size}
/* each control on its drawn place, measured on the console artwork (percent of the 1998x787 layer; ±0.5 %):
   email = inner area of the input slot, button = face of the blue plate inside its tilt, consent = dark band of the
   screen below the plate (above the bezel line at 57.4 % and left of the screw at 71.2 %), status = flat dark band of the
   console body between the lit lip (64.9 % on the right) and the lamp glow (68.9 %), left of the crate divider: one
   line only, so every status message is 36 characters at most. The package's single grid box put the status on a lamp.
   The button covers the whole tilted blue plate, screws included; its face (::before) follows the plate's chamfered
   outline (--plate), so the drawn plate never shows around a flat rectangle. */
.waitlist-form input[type=email]{position:absolute;left:35.39%;top:18.17%;width:35.44%;height:11.94%}
.waitlist-form button{position:absolute;left:32.18%;top:32.40%;width:39.09%;height:14.99%;--plate:polygon(4.99% 0%,98.21% 10.17%,100% 22.88%,98.85% 86.44%,96.41% 100%,1.54% 85.59%,0% 72.88%,2.69% 11.02%)}
.waitlist-form .consent{position:absolute;left:30.78%;top:49.56%;width:39.79%;height:7.62%;align-items:center}
/* a long consent wording uses the dark band between the plate and the bezel line, leaving room for the 3 px press travel */
.waitlist-form .consent.consent-long{top:49.6%;height:7.6%;font:500 clamp(9.5px,1.04cqw,12px)/1.15 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:0;align-items:center}
.waitlist-form .form-status{position:absolute;left:32.28%;top:65.31%;width:26.78%;height:3.56%;display:flex;align-items:center;overflow:hidden}
.waitlist-form input[type=email]{min-width:0;border:0;border-radius:2px;outline:0;background:rgba(3,9,16,.83);box-shadow:inset 0 0 0 1px rgba(163,200,235,.2);color:#f8fbff;padding:0 5.2%;font:600 clamp(14px,1vw,18px)/1 var(--plex);letter-spacing:.08em;caret-color:#4fb1ff;appearance:none;-webkit-appearance:none}
.waitlist-form input[type=email]::placeholder{color:#aeb9c4;opacity:1}
/* typed addresses: no extra tracking (the placeholder keeps the package's), ellipsis when the field is not focused */
.waitlist-form input[type=email]:not(:placeholder-shown){letter-spacing:0;text-overflow:ellipsis}
.signal-page[data-state=pending] .form-status{color:#cfe3ff}
.signal-page[data-state=pending] .waitlist-form button{filter:saturate(.6) brightness(.9);cursor:progress;color:#dbe8ff}
.signal-page[data-state=pending] .waitlist-form button [aria-hidden]{display:none}
/* one checkbox look in every engine: square, cobalt border, white check */
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1.5px solid #8fb8ff;border-radius:2px;background:rgba(3,9,16,.85);display:grid;place-content:center;cursor:pointer}
.consent input[type=checkbox]::before{content:"";width:9px;height:9px;transform:scale(0);background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.consent input[type=checkbox]:checked{background:#087cff;border-color:#087cff}
.consent input[type=checkbox]:checked::before{transform:scale(1)}
.waitlist-form input[type=email]::selection{color:#fff;background:#086fd6}
.waitlist-form input[type=email]:focus{box-shadow:inset 0 0 0 2px #6bc0ff,0 0 22px rgba(0,128,255,.42)}
.waitlist-form input[type=email]:-webkit-autofill{-webkit-text-fill-color:#f8fbff;caret-color:#4fb1ff;-webkit-box-shadow:0 0 0 1000px #07111c inset;transition:background-color 9999s ease-out 0s}
.waitlist-form button{display:flex;align-items:center;justify-content:center;gap:1.2em;border:0;border-radius:0;background:none;padding:0;isolation:isolate;color:#02060b;font:900 clamp(15px,1.22vw,23px)/1 var(--saira);letter-spacing:.075em;cursor:pointer;text-transform:uppercase;filter:drop-shadow(0 0 9px rgba(0,122,255,.3));transition:filter .18s ease,transform .18s ease}
.waitlist-form button::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--plate);background:linear-gradient(180deg,rgba(255,255,255,.42) 0,rgba(255,255,255,0) 7%),linear-gradient(180deg,#158dff,#056be2)}
.waitlist-form button:hover{filter:brightness(1.14) drop-shadow(0 0 13px rgba(0,135,255,.5))}
/* mechanical press: the plate travels ~3 px into its housing (fast, accelerating), the face darkens from the top like a
   recessed key and the glow tightens; on release it springs back with a small overshoot. Held while sending, latched
   once sent. The input slot answers the bottom-out with a short flash. */
.waitlist-form button{transition:filter .18s ease,transform .26s cubic-bezier(.22,1.7,.42,1)}
.waitlist-form button::before{transition:background .1s ease}
.waitlist-form button:active,.waitlist-form button.is-pressed,.waitlist-form button.is-held{transform:translateY(3px) scale(.986);transition:filter .06s ease,transform .07s cubic-bezier(.55,0,.8,.2);filter:brightness(.9) drop-shadow(0 0 3px rgba(0,122,255,.22))}
.waitlist-form button:active::before,.waitlist-form button.is-pressed::before,.waitlist-form button.is-held::before{background:linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 26%),linear-gradient(0deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 8%),linear-gradient(180deg,#0559c0,#0a74ea)}
.waitlist-form:has(button.is-pressed) input[type=email],.waitlist-form:has(button.is-held) input[type=email]{animation:slot-thud .32s ease-out 1}
@keyframes slot-thud{0%{box-shadow:inset 0 0 0 1px rgba(163,200,235,.2)}25%{box-shadow:inset 0 0 0 2px rgba(107,192,255,.85),0 0 24px rgba(0,128,255,.5)}100%{box-shadow:inset 0 0 0 1px rgba(163,200,235,.2)}}
.waitlist-form button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.consent{display:flex;align-items:flex-start;gap:9px;color:#dbe3ec;font:400 clamp(10px,.66vw,12.5px)/1.25 var(--plex);letter-spacing:0;cursor:pointer}
.consent input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--blue)}
.consent input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.consent input[aria-invalid=true]{outline:2px solid var(--error);outline-offset:2px}
.consent a{color:var(--mineral)}
.form-status{margin:0;color:#c3cfdc;font:600 clamp(8.5px,1.22cqw,13px)/1.1 var(--plex);letter-spacing:.02em;white-space:nowrap}
/* closed console: the same measured places as the open form. The heading is a one-line readout in the input slot
   (sized on the console width, cqw), the private-access line sits in the status band; the plate stays drawn art. */
.closed-panel{display:none;position:absolute;inset:0;container-type:inline-size}
.closed-panel p{position:absolute;left:35.39%;top:18.17%;width:35.44%;height:11.94%;margin:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;color:var(--mineral);font:900 2.3cqw/1 var(--saira);letter-spacing:.02em}
.closed-panel span{position:absolute;left:32.28%;top:65.31%;width:26.78%;height:3.56%;display:flex;align-items:center;white-space:nowrap;color:#c3cfdc;font:600 clamp(8.5px,1.22cqw,13px)/1.1 var(--plex);letter-spacing:0}
.signal-page[data-state=error] .waitlist-form input[type=email][aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--error),0 0 18px rgba(255,71,66,.32)}
.signal-page[data-state=error] .form-status{color:#ff9d97}
.signal-page[data-state=sent] .waitlist-form input[type=email],.signal-page[data-state=sent] .consent{pointer-events:none;opacity:.5}
.signal-page[data-state=sent] .waitlist-form button{pointer-events:none}
.signal-page[data-state=sent] .waitlist-form button{transform:translateY(3px) scale(.986);opacity:1;filter:saturate(.6) brightness(.8);color:#dbe8ff}
.signal-page[data-state=sent] .waitlist-form button::before{background:linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 26%),linear-gradient(180deg,#0559c0,#0a74ea)}
.signal-page[data-state=sent] .waitlist-form button [aria-hidden]{display:none}
/* confirmation screen: lights up above the console once the server saved the request */
.sent-pop{position:absolute;z-index:6;left:50%;bottom:calc(100% + 14px);min-width:min(38%,420px);padding:14px 26px 15px;display:none;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,18,34,.95),rgba(3,9,17,.95));border:1px solid #2f8dff;box-shadow:0 0 0 1px rgba(47,141,255,.22),0 0 30px rgba(8,124,255,.45),inset 0 0 26px rgba(8,124,255,.2);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);transform:translate(-50%,10px);opacity:0}
.sent-pop::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.sent-pop b{font:900 clamp(18px,1.5vw,26px)/1 var(--saira);letter-spacing:.08em;color:#fff}
.sent-pop span{font:600 clamp(11px,.8vw,13px)/1.2 var(--plex);letter-spacing:.12em;color:#9fd0ff}
.sent-pop-led{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:pop-led 1.6s ease-in-out infinite}
@keyframes pop-led{50%{opacity:.45}}
@keyframes pop-in{0%{opacity:0;transform:translate(-50%,10px) scaleY(.2)}55%{opacity:1;transform:translate(-50%,-2px) scaleY(1.04)}100%{opacity:1;transform:translate(-50%,0) scaleY(1)}}
.signal-page[data-state=sent] .sent-pop{display:flex;opacity:1;transform:translate(-50%,0);animation:pop-in .42s cubic-bezier(.2,1,.3,1) 1}
.signal-page[data-state=sent] .form-status{color:var(--success)}
.signal-page[data-state=closed] .waitlist-form{display:none}
.signal-page[data-state=closed] .closed-panel{display:block}
.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}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.preview-note{position:relative;z-index:10;margin:0;padding:8px 16px;background:#1b2a10;color:#d7f5b0;font-size:13px;text-align:center}
@keyframes environment-breathe{from{transform:scale(1.025) translate3d(0,0,0);filter:saturate(.96) brightness(.96)}to{transform:scale(1.04) translate3d(-.18%,.12%,0);filter:saturate(1.05) brightness(1.02)}}
/* landscape tablet widths (768-1023 px; the package leaves them to integration): a wider console so the consent keeps
   two lines. Portrait tablets use the portrait (phone) console below. */
@media(min-width:768px) and (max-width:1023px) and (orientation:landscape){
  .signal-page{--console-w:min(78vw,calc((100vh - var(--console-gap) - var(--copy-bottom) - 16px) / .3539))}
  .console{right:6vw}
}
@media(min-width:768px) and (max-height:599px){
  html,body{overflow-x:hidden}
  .signal-page{overflow:visible;display:flex;flex-direction:column;--f1:clamp(64px,min(8.7vw,16vh),168px)}
  .environment,.vignette{position:fixed}
  .message{position:relative;left:auto;top:auto;margin:max(96px,14.5vh) 0 auto 4.5vw}
  .console{position:relative;right:auto;bottom:auto;align-self:flex-end;margin:16px 14vw 10px 0;width:min(64vw,1120px)}
}
@media(max-width:767px),(max-width:1023px) and (orientation:portrait){
  .environment{background-image:url('art/mobile/signal-relay-environment.png');background-image:image-set(url('art/mobile/signal-relay-environment.webp') 1x,url('art/mobile/signal-relay-environment@2x.webp') 2x);background-position:center 48%;transform:scale(1.015)}
  .vignette{background:linear-gradient(180deg,rgba(2,4,6,.84) 0%,rgba(2,4,6,.48) 28%,rgba(2,4,6,.05) 56%,rgba(2,4,6,.86) 86%,#020406 100%)}
  .brand-bar{top:max(18px,env(safe-area-inset-top));left:20px;right:20px;align-items:center}.brand-lockup{width:176px}.release-label{margin-top:9px;padding:7px 9px;font-size:8px;letter-spacing:.13em}
  html,body{overflow-x:hidden}
  .signal-page{overflow:visible;display:flex;flex-direction:column}
  .environment,.vignette{position:fixed}
  .message{position:relative;left:auto;right:auto;top:auto;margin:11.5svh 20px auto;width:auto;text-align:left}.eyebrow{font-size:9px;margin:10px 0 6px}h1{font-size:clamp(62px,19.5vw,78px);line-height:.78}
  .product-line{margin-top:0;font-size:17px;line-height:1.03;max-width:345px}.support-line{font-size:9px;line-height:1.35;letter-spacing:.04em}
  .operator{right:-7vw;bottom:28svh;height:38svh;opacity:.8}
  /* in the flow at the bottom of the screen (or below the copy when there is no room); its transparent top 27 % may sit
     behind the copy's last lines, as in the package; the drawn bottom (90.2 %) stays on screen: no negative offset */
  .console{--mcw:min(116vw,520px);position:relative;left:50%;right:auto;bottom:auto;margin:calc(8px - .3018 * var(--mcw)) 0 max(0px,calc(env(safe-area-inset-bottom) - 20px));width:var(--mcw);aspect-ratio:1183/1329;transform:translateX(-50%);flex:none}
  .console-shell--desktop{display:none}.console-shell--mobile{display:block}
  /* measured on the 1183x1329 layer: email = inner input slot, button = whole plate (chamfered face), consent = dark band
     of the screen (above the bezel line at 72.4 %, clear of the bottom-left screw), status = the crate face between the
     two lamp rows (one line, inside the console, so Safari's bottom toolbar never hides it) */
  .waitlist-form{left:0;top:0;width:100%;height:100%}
  .waitlist-form input[type=email]{left:22.82%;top:45.52%;width:54.44%;height:7.83%}
  .waitlist-form button{left:19.61%;top:55.76%;width:60.19%;height:9.56%;--plate:polygon(4.35% 0%,96.21% 0%,98.74% 20.47%,100% 86.61%,97.61% 100%,2.25% 100%,0% 86.61%,1.83% 13.39%)}
  .waitlist-form .consent{left:19.44%;top:66.67%;width:61.28%;height:5.42%}
  .waitlist-form .consent.consent-long{top:66.7%;height:5.6%;font-size:9.5px;line-height:1.04;gap:8px}
  .waitlist-form .form-status{left:28.74%;top:78.25%;width:42.10%;height:3.76%;justify-content:center;text-align:center}
  .waitlist-form input[type=email]{font-size:16px;padding:0 8px;letter-spacing:0}.waitlist-form button{font-size:17px;letter-spacing:.05em}
  .consent{font-size:9.5px;line-height:1.2;gap:6px}.consent input{width:16px;height:16px}.form-status{font-size:10px;line-height:1.1;letter-spacing:.02em}
  .closed-panel p{left:22.82%;top:45.52%;width:54.44%;height:7.83%;font-size:3.7cqw}
  .sent-pop{bottom:auto;top:25%;min-width:0;width:78%;padding:12px 16px}.sent-pop b{font-size:19px}.sent-pop span{font-size:11px}
  .closed-panel span{left:28.74%;top:78.25%;width:42.10%;height:3.76%;justify-content:center;font-size:9.5px;letter-spacing:0}
}
/* portrait tablets use the phone layout; its smallest copy gets a tablet floor */
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){.eyebrow{font-size:11px}.support-line{font-size:11px}.release-label{font-size:10px}}
@media(max-width:370px){.closed-panel span,.waitlist-form .form-status{font-size:9px;letter-spacing:0}.brand-lockup{width:155px}.message{margin-top:10.5svh}.product-line{font-size:15px}.console{--mcw:122vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.environment{transform:scale(1.025)}}
/* privacy notice page */
.doc-page{max-width:760px;margin:0 auto;padding:40px 20px;line-height:1.6}.doc-page a{color:var(--mineral)}