/* The soon page (/soon): what everyone outside the closed beta sees before the launch. From the "Pixelican
   Soon Page" design, direction C: the accounts pages' frame, words and the beta form on the left, the sea on
   the right, a band on top on a phone. Every file it loads is under /soon/, which the beta's redirect rule
   leaves open (homeRule, apps/accounts/worker/invites.js). */
@font-face{font-family:'Geist';src:url(/soon/fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/soon/fonts/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Pixel';src:url(/soon/fonts/GeistPixel-Square.woff2) format('woff2');font-display:swap}
:root{
  color-scheme:dark;
  --bg:#0c0b0e; --line:#2a2830; --line2:#3a3742;
  --ink:#f6f1e9; --soft:#cfc8bd; --muted:#8f897f;
  --beak:#ff6b2c; --beak-ink:#1c0c03; --beak-soft:#ffb36b; --dusk:#3b1f33; --bad:#ffb0a8;
  --sans:'Geist',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --pixel:'Geist Pixel','Geist Mono',ui-monospace,monospace;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
p,h1{margin:0}
:focus-visible{outline:2px solid var(--beak);outline-offset:3px}
.px{font-family:var(--pixel);font-weight:400;letter-spacing:-.01em;color:var(--beak)}
.hide{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.soon{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.words{display:flex;flex-direction:column;gap:40px;padding-block:max(28px,env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-bottom,0px));padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:40px;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:-.03em}
.brand svg{width:28px;height:28px}
.in{display:flex;flex-direction:column;gap:20px;margin-block:auto;max-width:420px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{width:7px;height:7px;background:var(--beak);display:inline-block}
h1{font-weight:500;font-size:clamp(34px,4.2vw,46px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.lead{color:var(--soft)}
.join{display:flex;flex-wrap:wrap;gap:8px}
.join input{flex:1 1 200px;min-width:0;background:var(--bg);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font:16px var(--sans);padding:12px 14px;min-height:48px}
.join input:focus{outline:none;border-color:var(--beak);box-shadow:0 0 0 3px rgba(255,107,44,.18)}
.join input[aria-invalid="true"]{border-color:#ff5d5d}
.join button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--beak);color:var(--beak-ink);font:500 15px/1 var(--sans);padding:0 22px;min-height:48px;cursor:pointer}
.join button:hover{background:#ff8048}
.join button:disabled{opacity:.6;cursor:default}
.said{font:13px/1.4 var(--mono);color:var(--beak-soft)}
.said.bad{color:var(--bad)}
.said:empty{display:none}
.note{color:var(--soft);font-size:14px}
.note b{font-weight:500;color:var(--ink)}
.foot{font:12px var(--mono);color:var(--soft);display:flex;flex-wrap:wrap;gap:6px 10px}
.foot span+span::before{content:"·";margin-right:10px;color:var(--muted)}

.sky{position:relative;overflow:hidden;background:var(--dusk)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.sky .cap{position:absolute;left:24px;right:max(24px,env(safe-area-inset-right,0px));bottom:max(22px,env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:16px;font:12px/1.4 var(--mono);color:rgba(246,241,233,.8)}
.sky .cap b{font-weight:400;color:var(--ink)}

@media (max-width:860px){
  .soon{grid-template-columns:1fr;grid-template-rows:170px auto}
  .sky{order:-1}
  .sky .cap{display:none}
  .words{border-right:none;gap:32px;padding-block:24px max(24px,env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
}
@media (max-width:420px){.join button{flex:1 1 100%}.foot{flex-direction:column}.foot span+span::before{content:none}}