/* ============================================================ the door — sign-in.
   One night, one moon, one column: the .rise scene's own vocabulary shrunk to
   what the screen asks of a person. The night is flat — no halo, no glow; the
   only light on the page is the moon's own face. The moon sinks low behind the
   ridge; the column floats in the dark above it; and where any of the lit face
   does reach behind the words, a feathered veil of the same night dims it, so
   every word and field sits on dark sky and reads at AA. The moon's lit part
   is the same fill = how-much-is-done language as every moon on the floor:
   empty on the email step, full at six digits. */

.xlg{position:relative;height:calc(100vh - 68px);min-height:600px;overflow:hidden;background:var(--deep)}
.xlg::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 82% 12%,#fff6,transparent),radial-gradient(1px 1px at 67% 31%,#fff5,transparent),radial-gradient(1px 1px at 24% 40%,#fff4,transparent),radial-gradient(1px 1px at 91% 44%,#fff5,transparent),radial-gradient(1.4px 1.4px at 7% 52%,#fff6,transparent),radial-gradient(1px 1px at 41% 9%,#fff5,transparent),radial-gradient(1px 1px at 56% 22%,#fff3,transparent),radial-gradient(1px 1px at 33% 27%,#fff3,transparent),radial-gradient(1px 1px at 75% 50%,#fff4,transparent)}
.xlg-moon{position:absolute;left:50%;top:57%;width:660px;height:660px;transform:translateX(-50%);pointer-events:none}
.xlg-ridge{position:absolute;left:50%;top:60%;width:2400px;transform:translateX(-50%);filter:brightness(.82) contrast(1.05);pointer-events:none}
.xlg-night{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgb(7 8 10/0),rgb(7 8 10/.55) 55%,#07080A 96%)}

/* the column — everything the screen asks, in one centred stack, raised into
   the dark. The veil behind it is a blurred slab of the same night: it dims
   whatever of the moon strays behind the words without drawing an edge. */
.xlg-col{position:absolute;left:50%;top:19%;transform:translateX(-50%);width:432px;max-width:calc(100vw - 40px);text-align:center;z-index:5}
.xlg-col::before{content:"";position:absolute;inset:-64px -84px -52px;border-radius:96px;background:rgb(7 8 10/.86);filter:blur(44px);z-index:-1;pointer-events:none}
.xlg-eyebrow{font:400 11px/1 JBM;letter-spacing:.24em;text-transform:uppercase;color:var(--c2)}
.xlg-h{font:500 54px/1.04 Satoshi;letter-spacing:-.045em;margin-top:18px}
.xlg-sub{font:400 16.5px/1.5 Satoshi;color:var(--c2);margin:14px auto 0;max-width:340px}
.xlg-eyebrow,.xlg-h,.xlg-sub,.xlg-meta,.xlg-err{text-shadow:0 1px 18px rgb(7 8 10/.85),0 0 6px rgb(7 8 10/.5)}
.xlg-link{background:none;border:0;padding:0;font:inherit;color:var(--pink);cursor:pointer}
.xlg-link:hover{color:var(--c1)}
.xlg-link:focus-visible{outline:1px solid var(--pink);outline-offset:3px;border-radius:2px}
.xlg-step{margin-top:30px}
.xlg-h,.xlg-sub{animation:xlg-in .8s var(--ease) both}
.xlg-sub{animation-delay:.1s}

/* step 1 — the email pill: input and go share one frosted lozenge */
.xlg-pill{display:flex;align-items:center;gap:6px;height:60px;padding:0 7px 0 24px;border-radius:99px;background:rgb(11 13 16/.9);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--h2),0 30px 60px -24px #000;transition:box-shadow .2s}
.xlg-pill:focus-within{box-shadow:inset 0 0 0 1px rgb(169 212 245/.5),0 30px 60px -24px #000}
.xlg-pill input{flex:1;min-width:0;background:none;border:0;outline:0;font:400 17px/1 Satoshi;color:var(--c1)}
.xlg-pill input::placeholder{color:var(--c2)}
.xlg-pill .xlg-pill-val{flex:1;min-width:0;font:400 17px/1 Satoshi;color:var(--c1);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xlg-pill .xlg-go{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--cream);color:#0B0D10;display:grid;place-items:center;cursor:pointer;transition:transform .15s,opacity .15s}
.xlg-pill .xlg-go:hover{transform:scale(1.06)}
.xlg-pill .xlg-go:disabled{opacity:.45;cursor:default;transform:none}
.xlg-pill .xlg-go svg{display:block}

/* step 2 — six boxes under a small phase moon that fills as digits land. The
   mark rides on its own disc of night so the moon behind can never swallow it. */
.xlg-phase{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;border-radius:50%;background:rgb(7 8 10/.92);box-shadow:inset 0 0 0 1px var(--h3)}
.xlg-boxes{display:flex;justify-content:center;gap:10px}
.xlg-box{width:54px;height:66px;padding:0;border:0;border-radius:16px;background:rgb(11 13 16/.9);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--h2);font:500 27px/1 JBM;color:var(--c1);text-align:center;caret-color:var(--pink);outline:0;transition:box-shadow .15s,opacity .15s}
.xlg-box:focus{box-shadow:inset 0 0 0 1px rgb(169 212 245/.6),0 0 0 4px rgb(169 212 245/.12)}
.xlg-box::placeholder{color:var(--c2)}
.xlg-boxes.err .xlg-box{box-shadow:inset 0 0 0 1px rgb(229 83 61/.55)}
.xlg-boxes.busy .xlg-box{opacity:.5}
.xlg-boxes.shake{animation:xlg-shake .42s}
@keyframes xlg-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.xlg-err{margin-top:16px;min-height:20px;font:400 14px/1.45 Satoshi;color:var(--signal)}
.xlg-meta{margin-top:14px;font:400 13.5px/1.5 Satoshi;color:var(--c2)}
.xlg-meta .xlg-link{color:var(--c1);text-decoration:underline;text-underline-offset:3px}
.xlg-meta .xlg-link:hover{color:var(--pink)}
.xlg-meta .m{color:var(--c1)}

/* the step's own motion: the new panel slides up in, the old one lifts out */
@keyframes xlg-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes xlg-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
.xlg-in{animation:xlg-in .55s var(--ease) both}
.xlg-out{animation:xlg-out .26s cubic-bezier(.5,0,.75,0) both;pointer-events:none}

/* the quiet line over the terrain: "New here?" opens the agent prompt box upward */
.xlg-foot{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;width:432px;max-width:calc(100vw - 40px)}
.xlg-new{position:relative;text-align:center}
.xlg-new summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font:400 13.5px/1 Satoshi;color:var(--c2);cursor:pointer;transition:color .2s}
.xlg-new summary::-webkit-details-marker{display:none}
.xlg-new summary::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s}
.xlg-new[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.xlg-new summary:hover{color:var(--c1)}
.xlg-new .cp{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);width:432px;max-width:calc(100vw - 40px);text-align:left;background:rgb(9 11 14/.9);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--h2),0 30px 70px -10px #000}

@media (max-width:640px){
  .xlg{min-height:520px}
  .xlg-moon{top:58%;width:390px;height:390px}
  .xlg-ridge{top:66%;width:1500px}
  .xlg-col{top:15%;width:calc(100vw - 36px)}
  .xlg-col::before{inset:-52px -46px -42px}
  .xlg-h{font-size:36px;margin-top:14px}
  .xlg-sub{font-size:15px;margin-top:12px}
  .xlg-step{margin-top:24px}
  .xlg-pill{height:56px;padding-left:18px}
  .xlg-pill .xlg-go{width:42px;height:42px}
  .xlg-boxes{gap:8px}
  .xlg-box{width:46px;height:56px;font-size:23px;border-radius:13px}
  .xlg-foot{bottom:18px}
  .xlg-new .cp p{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.xlg,.xlg *{animation:none!important;transition:none!important}}