@font-face{font-family:Nunito;src:url('/assets/nunito-latin.woff2') format('woff2');font-style:normal;font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;src:url('/assets/nunito-vietnamese.woff2') format('woff2');font-style:normal;font-weight:200 1000;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{--ink:#040a1a;--panel:#0c1c3e;--ivory:#f6f4ef;--soft:#c3cbdb;--gold:#cf9545;--gold-light:#f0cd97;--field:#2c3a5c;--danger:#ffb4bd;--ease:cubic-bezier(.2,.8,.2,1);color-scheme:dark;font-family:Nunito,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-width:320px;background:var(--ink);color:var(--ivory);font-family:inherit}
a{color:inherit}
button,input{font:inherit;color:inherit}

.auth-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,31vw,500px);min-height:100dvh}

/* The logo at the scale of the room: two arrows circling the name. */
.auth-mark{position:relative;display:grid;place-items:center;min-width:0;min-height:100dvh;overflow:hidden}
.auth-ring{position:absolute;top:50%;left:50%;width:min(112dvh,76vw);height:min(112dvh,76vw);transform:translate(-50%,-50%);overflow:visible;animation:ring-drift 18s ease-in-out infinite alternate}
.arc-gold{fill:var(--gold)}
.arc-ivory{fill:var(--ivory)}
.reach{fill:none;stroke:#fff;stroke-width:130;stroke-dasharray:.42 1;transition:stroke-dasharray .6s var(--ease);animation:reach-in 1.3s var(--ease) both}
.auth-words{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(10px,1.4vw,22px);padding:0 16px;text-align:center}
.auth-words h1{display:flex;margin:0;font-size:clamp(84px,min(14.4vw,24dvh),280px);font-weight:900;line-height:.95;letter-spacing:-.05em;animation:rise .9s var(--ease) both}
.auth-words h1 span:first-child{color:var(--ivory)}
.auth-words h1 span:last-child{color:var(--gold)}
.auth-words p{margin:0;color:var(--ivory);font-size:clamp(18px,1.75vw,28px);font-weight:600;letter-spacing:-.01em;animation:rise .9s .12s var(--ease) both}

/* Sign-in */
.auth-panel{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100dvh;padding:28px clamp(28px,3.4vw,56px);background:var(--panel)}
.auth-panel-top{display:flex;justify-content:flex-end}
.locale-switcher{min-width:44px;height:36px;padding:0 10px;border:0;background:none;color:var(--ivory);font-size:14px;font-weight:800;cursor:pointer;transition:color .2s var(--ease)}
.locale-switcher:hover{color:var(--gold-light)}
.auth-panel-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.auth-panel-body>*{animation:rise .8s var(--ease) both}
.auth-panel-body>p{animation-delay:.08s}
.auth-panel-body>form{animation-delay:.16s}
h2{margin:0;font-size:clamp(40px,3.9vw,60px);font-weight:900;line-height:1;letter-spacing:-.035em}
.auth-subtitle{margin:14px 0 40px;color:var(--soft);font-size:17px;line-height:1.5}
form{display:grid}
label{font-size:14px;font-weight:700}
input[type=email],input[type=password],input[type=text]{display:block;width:100%;height:50px;padding:0;border:0;border-bottom:2px solid var(--field);border-radius:0;outline:0;background:none;color:var(--ivory);font-size:18px;font-weight:600;transition:border-color .25s var(--ease)}
input::placeholder{color:#8e9ab3;font-weight:500}
input:hover{border-bottom-color:#55658a}
input:focus{border-bottom-color:var(--gold)}
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ivory);caret-color:var(--ivory);transition:background-color 99999s}
#email{margin-bottom:26px}
.password-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.text-button{padding:2px 0;border:0;background:none;color:var(--gold-light);font-size:14px;font-weight:700;cursor:pointer}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}
.password-field{position:relative}
.password-field input{padding-right:44px}
#toggle-password{position:absolute;top:5px;right:0;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--soft);cursor:pointer;transition:color .2s var(--ease)}
#toggle-password:hover,#toggle-password[aria-pressed=true]{color:var(--gold-light)}
#toggle-password svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.sign-in-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:62px;margin-top:34px;padding:0 22px;border:0;background:var(--gold);color:var(--ink);font-size:18px;font-weight:900;cursor:pointer;transition:background-color .2s var(--ease),transform .15s var(--ease)}
.sign-in-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.sign-in-button:hover{background:var(--gold-light)}
.sign-in-button:hover svg{transform:translateX(5px)}
.sign-in-button:active{transform:scale(.99)}
.sign-in-button[aria-busy=true]{cursor:progress;opacity:.8}
.login-status{margin-top:16px;color:var(--danger);font-size:15px;font-weight:600;line-height:1.45}
.login-status[hidden]{display:none}
:is(a,button):focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.auth-footer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--soft);font-size:14px}
.auth-footer p{margin:0}
.auth-footer a{color:var(--ivory);font-weight:700;text-underline-offset:3px}
.auth-footer a:hover{color:var(--gold-light)}
.auth-footer small{font-size:13px}

/* Signed in: the two arrows spin the way they point until the next page opens. */
.is-entering .auth-ring{animation-play-state:paused}
.is-entering .ring-spin{animation:spin-start .6s ease-in,spin-loop .8s linear .6s infinite}

@keyframes spin-start{to{transform:rotate(-180deg)}}
@keyframes spin-loop{from{transform:rotate(-180deg)}to{transform:rotate(-540deg)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes reach-in{from{stroke-dasharray:0 1}}
@keyframes ring-drift{from{transform:translate(-50%,-50%) rotate(-3deg)}to{transform:translate(-50%,-50%) rotate(3deg)}}

/* Phones and tablets fit one screen: --u is one design pixel of a 375x690 layout, and the logo frame takes whatever height is left. */
@media(max-width:900px),(max-width:950px) and (max-height:520px){
  .auth-stage{--u:min(calc(100vw/375),calc(100dvh/690),1.25px);display:flex;flex-direction:column;gap:calc(var(--u)*10);width:min(100%,560px);height:100dvh;min-height:0;margin-inline:auto;padding:calc(var(--u)*10)}
  .auth-mark{flex:1 1 0;min-height:0;container-type:size;border-radius:calc(var(--u)*22);background:#081430}
  .auth-ring{width:96cqmin;height:96cqmin}
  .auth-words{gap:1.5cqmin}
  .auth-words h1{font-size:20cqmin}
  .auth-words p{max-width:52cqmin;font-size:max(12px,4.6cqmin);line-height:1.25;text-wrap:balance}
  .auth-panel{flex:none;min-height:0;padding:calc(var(--u)*18) calc(var(--u)*20) calc(var(--u)*14);border-radius:calc(var(--u)*22)}
  .auth-panel-top{position:absolute;top:calc(var(--u)*13);right:calc(var(--u)*10)}
  .locale-switcher{height:calc(var(--u)*36);font-size:max(13px,calc(var(--u)*14))}
  .auth-panel-body{flex:none;padding:0 0 calc(var(--u)*14)}
  h2{font-size:calc(var(--u)*32)}
  .auth-subtitle{margin:calc(var(--u)*6) 0 calc(var(--u)*14);font-size:max(13px,calc(var(--u)*15));line-height:1.35}
  label,.text-button{font-size:max(12px,calc(var(--u)*13))}
  input[type=email],input[type=password],input[type=text]{height:calc(var(--u)*42);font-size:max(16px,calc(var(--u)*17))}
  #email{margin-bottom:calc(var(--u)*12)}
  #toggle-password{top:0;width:calc(var(--u)*40);height:calc(var(--u)*42)}
  .sign-in-button{height:calc(var(--u)*52);margin-top:calc(var(--u)*16);padding:0 calc(var(--u)*20);border-radius:calc(var(--u)*14);font-size:max(15px,calc(var(--u)*17))}
  .login-status{margin-top:calc(var(--u)*8);font-size:max(12.5px,calc(var(--u)*14));line-height:1.35}
  .auth-footer{gap:calc(var(--u)*2) calc(var(--u)*12);font-size:max(12px,calc(var(--u)*13))}
  .auth-footer small{font-size:max(11.5px,calc(var(--u)*12))}
}
/* Phones turned sideways: the two frames sit side by side. */
@media(max-width:950px) and (max-height:520px){
  .auth-stage{--u:min(calc(100dvh/440),1.25px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
  .auth-mark{height:100%}
  .auth-panel{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}