x-dc{display:none!important}
html,body{margin:0;height:100%;background:#050608}

/* Scene */
#auth{position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;background:#020304;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
#auth::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 95% 85% at 50% 48%,transparent 55%,rgba(0,0,0,.55) 100%)}
.a-room{position:absolute;left:0;top:0;z-index:0;pointer-events:none;transform-origin:50% 50%}
.a-room.a-lit{animation:a-dolly 50s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes a-dolly{to{transform:scale(1.06)}}

.a-stage{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(28px,10vh,110px);padding:16vh 20px 5vh;box-sizing:border-box;overflow:auto}

/* Title: dark gunmetal against the lit ceiling */
.a-title{position:relative;display:flex;flex-direction:column;align-items:center;text-transform:uppercase;user-select:none;
  filter:drop-shadow(0 14px 30px rgba(10,20,30,.28))}
.a-kicker{font-size:13px;font-weight:700;letter-spacing:.55em;margin-right:-.55em;color:#2c3339;
  opacity:0;filter:blur(10px);animation:a-kick 1.3s cubic-bezier(.2,.7,.2,1) 2s forwards}
.a-big{margin-top:6px;font-size:clamp(58px,10.5vw,112px);line-height:.95;font-weight:800;letter-spacing:.16em;margin-right:-.16em;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%),linear-gradient(180deg,#3a434b 0%,#1a1f24 55%,#0a0c0e 100%);
  background-size:300% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat;
  opacity:0;filter:blur(18px);transform:scale(1.07);
  animation:a-in 1.6s cubic-bezier(.16,.8,.2,1) 2.25s forwards,a-sheen 1.4s ease-in-out 3.7s forwards}
@keyframes a-kick{to{opacity:1;filter:blur(0);letter-spacing:.42em;margin-right:-.42em}}
@keyframes a-in{0%{opacity:0;filter:blur(18px);transform:scale(1.07);letter-spacing:.42em}100%{opacity:1;filter:blur(0);transform:scale(1);letter-spacing:.16em}}
@keyframes a-sheen{to{background-position:-30% 0,0 0}}

/* Liquid glass panel */
.a-panel{position:relative;width:min(380px,100%);box-sizing:border-box;padding:30px 28px 26px;border-radius:34px;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 45%,rgba(255,255,255,.035) 100%),rgba(8,10,12,.42);
  -webkit-backdrop-filter:blur(8px) saturate(1.1) brightness(.6);backdrop-filter:blur(8px) saturate(1.1) brightness(.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.32),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 44px rgba(0,0,0,.38),
    0 40px 80px -30px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.3);
  opacity:0;transform:translateY(18px) scale(.97);animation:a-up 1s cubic-bezier(.2,.8,.2,1) 2.85s forwards}
.a-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 28%,rgba(255,255,255,0) 52%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.a-panel::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(130% 55% at 18% -5%,rgba(255,255,255,.08),transparent 60%)}
@keyframes a-up{to{opacity:1;transform:none}}

.a-view{display:none;flex-direction:column;gap:14px}
#auth[data-state="loading"] [data-for="loading"],#auth[data-state="login"] [data-for="login"],#auth[data-state="forgot"] [data-for="forgot"],
#auth[data-state="reset"] [data-for="reset"],#auth[data-state="denied"] [data-for="denied"],#auth[data-state="setup"] [data-for="setup"],
#auth[data-state="error"] [data-for="error"]{display:flex}
#auth[data-state="loading"] [data-for="loading"]{align-items:center;padding:24px 0}
.a-panel h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.a-sub{margin:-6px 0 4px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.78)}
.a-sub strong{color:#fff;font-weight:600}
.a-sub code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:6px;color:#fff}
.a-panel label{display:flex;flex-direction:column;gap:7px;padding-left:4px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-shadow:0 1px 6px rgba(0,0,0,.25)}
.a-panel input{height:48px;margin-left:-4px;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.07);
  font:inherit;font-size:15.5px;font-weight:400;color:#fff;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.a-panel input:focus{border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.36);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.07)}
.a-panel input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px rgba(22,26,29,1) inset;caret-color:#fff}
.a-primary,.a-secondary{height:50px;border-radius:999px;font:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;transition:transform .15s,box-shadow .25s,filter .2s}
.a-primary{margin-top:8px;border:0;color:#fff;background:linear-gradient(180deg,#ff8d60 0%,#FF6B35 52%,#ec5a24 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 5px rgba(120,30,0,.28),0 12px 26px -10px rgba(255,107,53,.75)}
.a-primary:hover{filter:brightness(1.06);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 5px rgba(120,30,0,.28),0 16px 32px -10px rgba(255,107,53,.9)}
.a-primary:active{transform:scale(.985)}
.a-primary:disabled{opacity:.7;cursor:default}
.a-secondary{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(0,0,0,.25);box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.a-secondary:hover{background:rgba(255,255,255,.16)}
.a-link{align-self:center;border:0;background:none;padding:4px 8px;font:inherit;font-size:13.5px;color:rgba(255,255,255,.75);cursor:pointer;border-radius:8px;transition:color .2s;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.a-link:hover{color:#fff}
.a-panel button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.a-msg{margin:16px 0 0;padding:11px 16px;border-radius:18px;background:rgba(255,107,53,.16);border:1px solid rgba(255,150,110,.4);font-size:13.5px;line-height:1.45;color:#fff}
.a-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:a-spin .9s linear infinite}
@keyframes a-spin{to{transform:rotate(360deg)}}

/* Sign-in transition */
.a-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#f6f8f9 0%,#e3e6e9 60%,#cfd3d7 100%)}
.a-leaving .a-panel{animation:a-out .45s cubic-bezier(.4,0,.2,1) forwards}
.a-leaving .a-title{animation:a-tout .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes a-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.9)}}
@keyframes a-tout{to{opacity:0;transform:translateY(-40px) scale(1.04)}}

@media (max-width:640px){.a-stage{padding-top:12vh;gap:7vh}.a-panel{padding:26px 22px 22px;border-radius:30px}}
@media (max-height:700px){.a-stage{padding-top:8vh;gap:5vh}}
@media (prefers-reduced-motion:reduce){
  .a-kicker,.a-big,.a-panel{animation:none;opacity:1;filter:none;transform:none}
  .a-kicker{letter-spacing:.42em;margin-right:-.42em}
  .a-big{background-position:-30% 0,0 0}
  .a-room.a-lit{animation:none}
  .a-spin{animation-duration:2.4s}
}