:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  color: #f1eee7;
  background: #080b10;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 18px; min-height: 100dvh; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { color: #0b0e14; background: var(--gold); }
.observatory { min-height: calc(100dvh - 36px); display: flex; flex-direction: column; border: 1px solid #e8dcc018; border-radius: 25px; overflow: hidden; background: #0b0e14; box-shadow: 0 20px 80px #0005; }
.topbar { height: 78px; padding: 0 30px; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #f0e5ca12; background: #0c1016; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 500; letter-spacing: 2.4px; white-space: nowrap; }
.brand > span { color: #ffe5ac; font-size: 36px; line-height: 1; }
.private-label { border: 1px solid #e5ddbd21; border-radius: 30px; padding: 7px 11px; color: #959da9; font-size: 9px; letter-spacing: 1.7px; white-space: nowrap; }
.login-sky { flex: 1; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: clamp(30px, 7vw, 110px); width: 100%; padding: 32px clamp(40px, 8vw, 140px); background: radial-gradient(ellipse at 36% 91%, #1e2b4238, transparent 57%), radial-gradient(ellipse at 92% 13%, #b7975310, transparent 28%); }
.sky-art { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.distant-stars { width: 100%; height: 100%; }
.moon { position: absolute; right: 28px; top: 24px; width: 66px; height: 66px; border-radius: 50%; background: #ffeba4; box-shadow: 0 0 38px #ffe2a014; }
.welcome { max-width: 500px; padding-top: 7px; }
.eyebrow { margin: 0; font-size: 10px; letter-spacing: 2.8px; color: #939caa; line-height: 1.6; }
.welcome h2 { font-size: clamp(30px, 3.5vw, 46px); font-weight: 300; letter-spacing: -1.3px; line-height: 1.4; margin: 20px 0 18px; color: #eee9dc; }
.welcome-caption { color: #939dac; font-size: 13px; line-height: 1.9; margin: 0; }
.constellation { display: block; width: 100%; max-width: 460px; height: auto; margin: 15px 0 -15px; overflow: visible; }
.connections { fill: none; stroke: #a3b0c2; stroke-width: 1; stroke-opacity: .32; }
.stars { fill: #ffe0a0; stroke: #ffedc5; stroke-width: .6; stroke-linejoin: round; filter: drop-shadow(0 0 5px #ffd18063); }
.login-card { position: relative; width: 100%; padding: 35px 32px 29px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(160deg, #171c24f5, #11161ef2); box-shadow: 0 15px 55px #0002; }
.card-star { display: block; color: var(--gold); font-size: 25px; margin-bottom: 22px; line-height: 1; }
.login-card .eyebrow { font-size: 8px; letter-spacing: 2.1px; color: #b5aa91; }
h1 { font-size: 24px; line-height: 1.4; letter-spacing: -.8px; font-weight: 400; margin: 12px 0; }
#intro { font-size: 13px; line-height: 1.85; color: var(--muted); margin: 0; }
form { margin-top: 28px; }
label { display: block; color: #cccdd1; font-size: 12px; line-height: 1.6; }
input { display: block; width: 100%; min-height: 48px; margin: 9px 0 0; padding: 12px 14px; border: 1px solid #d7ddeb26; border-radius: 9px; color: #f3eee2; background: #080c145c; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
input::placeholder { font-size: 12px; color: #8791a1; }
input:focus { border-color: #ead09caa; box-shadow: 0 0 0 3px #ffe2a00a; }
#confirm-label { margin-top: 18px; }
#error { margin: 9px 0 12px; min-height: 20px; color: #ffb9bc; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; min-height: 47px; padding: 12px 16px; border: 1px solid #ffe9b8; border-radius: 9px; background: #f5dfa9; color: #282722; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s; }
button:hover { background: #ffebbb; box-shadow: 0 0 22px #ffe2a00b; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#result { font-size: 13px; line-height: 1.85; color: #bfdecf; overflow-wrap: anywhere; }
#result:empty { display: none; }
.privacy-note { display: flex; justify-content: center; align-items: center; gap: 6px; color: #949ead; font-size: 10px; line-height: 1.8; border-top: 1px solid #e4ddc710; padding-top: 20px; margin-top: 25px; }
.privacy-note svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #b6b09e; stroke-width: 1.2; stroke-linecap: round; }
.bottom-bar { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 15px; min-height: 45px; padding: 12px 30px; border-top: 1px solid #ece3cb12; background: #0c1016; color: #9da4b0; font-size: 10px; }
.bottom-bar > span:first-child > span { color: var(--gold); margin-right: 8px; }
.bottom-bar > span:last-child { color: #747f90; font-size: 8px; letter-spacing: 2px; }
@media (min-width: 1500px) { .login-sky { grid-template-columns: minmax(0, 500px) 420px; justify-content: center; gap: 140px; } }
@media (max-width: 950px) { .login-sky { padding: 95px 35px 55px; grid-template-columns: minmax(0, 1fr) 350px; gap: 30px; } .login-card { padding: 30px 25px 25px; } .welcome h2 { font-size: 32px; } .moon { width: 62px; height: 62px; top: 22px; right: 28px; } }
@media (max-width: 700px) {
  body { padding: 0; }
  .observatory { min-height: 100dvh; border: 0; border-radius: 0; }
  .topbar { height: 70px; padding: 0 22px; gap: 12px; }
  .brand { font-size: 11px; letter-spacing: 1.2px; gap: 8px; }
  .brand > span { font-size: 29px; }
  .private-label { padding: 6px 8px; font-size: 7px; letter-spacing: 1px; }
  .login-sky { display: flex; justify-content: center; padding: 112px 24px 44px; }
  .welcome { display: none; }
  .moon { width: 59px; height: 59px; top: 26px; right: 30px; }
  .login-card { max-width: 400px; padding: 29px 25px 25px; }
  h1 { font-size: 23px; }
  .card-star { margin-bottom: 18px; }
  .bottom-bar { padding: 14px 24px; font-size: 10px; }
  .bottom-bar > span:last-child { display: none; }
}
@media (max-width: 360px) { .topbar { padding-inline: 17px; } .private-label { display: none; } .login-sky { padding-inline: 17px; } .login-card { padding-inline: 22px; } h1 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* Figma v2.1 login and OAuth share the same private night sky. */
:root{font-family:var(--sans);background:#05070d;color:var(--ink)}body{padding:0}.observatory{min-height:100dvh;border:0;border-radius:0;background:radial-gradient(45% 40% at 90% 0%,#6c5ce733,transparent),radial-gradient(65% 60% at 45% 50%,#1b2b5e80,transparent),radial-gradient(40% 35% at 10% 100%,#2bb5a51a,transparent),#05070d;box-shadow:none}.topbar{height:110px;padding:0 clamp(32px,7vw,100px);background:none;border:0}.brand{font:500 14px var(--mono);letter-spacing:.14em}.brand>span{color:var(--gold);font-size:36px}.private-label{font:9px var(--mono);border-color:var(--border);color:var(--faint);padding:8px 12px}.login-sky{max-width:1440px;margin:auto;grid-template-columns:minmax(0,1fr) 440px;padding:65px clamp(40px,7vw,100px) 80px;gap:clamp(50px,9vw,150px);background:none}.welcome{position:relative;max-width:610px}.welcome>.eyebrow{font:10px/1.6 var(--mono);letter-spacing:.17em;color:var(--gold)}.welcome h2{font:300 clamp(40px,4.5vw,64px)/1.2 var(--serif);letter-spacing:-.02em;margin:24px 0}.welcome-caption{font:400 15px/1.9 var(--sans);color:var(--muted)}.constellation{max-width:540px;margin:40px 0 -20px;opacity:.9}.connections{stroke:#f3d08a;stroke-opacity:.3}.stars{fill:#f3d08a;stroke:#ffebc2;filter:drop-shadow(0 0 7px #f3d08a66)}.sky-art .moon{width:74px;height:74px;right:38px;top:0;background:radial-gradient(circle at 30% 25%,#fff6df,#f3d08a 65%,#b8914a);box-shadow:0 0 45px #f3d08a26;opacity:.85}.login-card{padding:40px;width:440px;max-width:100%;border-radius:28px;border:1px solid #3a476699;background:#10172ab3;box-shadow:0 40px 90px -20px #0009,inset 0 1px #ffffff12;backdrop-filter:blur(15px)}.card-star{display:grid;place-items:center;width:52px;height:52px;border:1px solid #f3d08a4d;background:#f3d08a1a;border-radius:16px;font-size:26px;color:var(--gold);margin-bottom:25px}.login-card>.eyebrow{font:500 10px var(--mono);letter-spacing:.14em;color:var(--gold)}h1{font:300 29px/1.45 var(--serif);letter-spacing:-.02em;margin:16px 0}#intro{font-size:13px;line-height:1.85;color:var(--muted)}form{margin-top:30px}label{font-size:12px;color:var(--muted)}input{background:#0a0f1c99;border:1px solid var(--border);border-radius:10px;min-height:50px;color:var(--ink)}input:focus{border-color:#f3d08a99;box-shadow:0 0 0 3px #f3d08a0a}button{background:var(--gold);border:0;box-shadow:0 6px 24px -6px #f2cc8047,inset 0 1px #ffffff73;color:#1a1408;border-radius:10px;font-size:13px;min-height:44px}button:hover{background:#ffebc2}#error{color:var(--error);font-size:12px;min-height:18px;margin:10px 0}.privacy-note{border-color:var(--border);color:var(--faint);margin-top:25px;padding-top:22px;font-size:10px}.bottom-bar{background:none;border:0;padding:28px clamp(32px,7vw,100px);font:10px var(--sans);color:var(--faint)}.bottom-bar>span:last-child{font-family:var(--mono);font-size:9px;letter-spacing:.12em}.password-tools{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:15px}.password-tools #show-password{display:inline;padding:2px;min-height:24px;width:auto;background:none;border:0;box-shadow:none;font-size:10px;color:var(--muted);font-weight:400}.password-tools #show-password:hover{color:var(--gold)}#caps-status{font:10px var(--mono);color:var(--gold)}
@media(min-width:1500px){.login-sky{grid-template-columns:minmax(0,600px) 440px;gap:130px}}
@media(max-width:1000px){.login-sky{grid-template-columns:minmax(0,1fr) 380px;padding:60px 40px;gap:40px}.login-card{width:380px;padding:32px}.welcome h2{font-size:43px}.sky-art .moon{right:25px;top:-25px;width:55px;height:55px}.topbar{height:90px;padding:0 40px}.brand{font-size:12px}}
@media(max-width:760px){.topbar{height:82px;padding:0 24px}.brand{font-size:11px}.brand>span{font-size:29px}.private-label{font-size:7px;padding:6px 8px;letter-spacing:.07em}.login-sky{display:flex;flex-direction:column;padding:36px 24px 35px;gap:30px;max-width:480px}.welcome{display:block;align-self:flex-start}.welcome>.eyebrow{font-size:8px}.welcome h2{font-size:32px;margin:15px 0}.welcome h2 br{display:none}.welcome-caption,.constellation{display:none}.sky-art .moon{width:42px;height:42px;right:28px;top:10px}.login-card{width:100%;padding:29px;border-radius:24px}.login-card h1{font-size:25px}.card-star{width:44px;height:44px;font-size:23px;margin-bottom:20px}form{margin-top:25px}.bottom-bar{justify-content:center;padding:25px 20px}.bottom-bar>span:last-child{display:none}}
/* Supplied v2.1 / 07 login geometry and shared design tokens. */
@media(min-width:1001px){.observatory{background:radial-gradient(45% 55% at 23% 31%,#443ba350,transparent),radial-gradient(30% 35% at 88% 0%,#6c5ce724,transparent),radial-gradient(40% 35% at 12% 100%,#2bb5a516,transparent),#05070d}.topbar{height:110px;padding:0 80px}.login-sky{position:relative;max-width:1440px;min-height:810px;grid-template-columns:minmax(0,1fr) 440px;gap:80px;padding:152px 100px 55px 80px;align-items:start}.login-card{min-height:635px;padding:40px;border-radius:28px}.welcome{position:static;max-width:680px;padding-top:345px}.welcome>.eyebrow{font-size:11px}.welcome h2{font-size:76px;line-height:1.25;margin:20px 0}.welcome-caption{font-size:14px}.constellation{position:absolute;left:80px;top:25px;width:700px;height:450px;margin:0;max-width:700px}.sky-art .moon{width:130px;height:130px;top:-110px;right:100px}.bottom-bar{padding:24px 80px}.private-label{border:0;font-size:9px}}
.login-card h1{font:500 27px/1.5 var(--sans);margin:12px 0}.login-card>.eyebrow{margin:0}.login-card .card-star{height:48px;width:48px;margin-bottom:22px}.login-method{display:flex;gap:12px;margin-top:28px;padding:4px;border-radius:9px;background:#0a0f1c;border:1px solid var(--border);font-size:11px}.login-method>span{flex:1;border-radius:6px;padding:9px 10px;text-align:center;color:var(--gold);background:#f3d08a1a}.login-method>a{flex:1;padding:9px 10px;text-align:center;color:var(--faint)}.login-method>a:hover{color:var(--gold)}.login-card form{margin-top:24px}.login-card #submit{height:48px;border-radius:12px}.login-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:20px;font:10px var(--mono);color:var(--muted)}.login-facts span{text-align:center;border-right:1px solid var(--border)}.login-facts span:last-child{border:0}.login-facts small{display:block;margin-top:8px;font:9px var(--sans);color:var(--faint)}.privacy-note{font-size:10px;line-height:1.8;margin-top:24px;padding-top:18px}
@media(max-width:760px){.login-method{margin-top:20px}.login-facts{font-size:9px}.login-card h1{font-size:23px}.login-sky{padding-top:25px}.login-card{padding:28px}.topbar{height:84px}}
@media(min-width:1001px){.sky-art{overflow:visible}.sky-art .moon{top:-116px}}
.admin-dialog>.dialog-top h2:before{content:none}
@media(min-width:1001px){.login-sky{min-height:calc(100dvh - 110px);padding-bottom:40px}.bottom-bar{display:none}}
.login-card form{position:relative;margin-top:20px}.password-tools{height:0;min-height:0;margin:0}.password-tools #show-password{position:absolute;right:14px;top:43px;min-height:24px;height:24px;width:24px;font-size:0}.password-tools #show-password:after{content:'◉';font-size:15px}.password-tools #caps-status{position:absolute;right:0;top:0;font-size:9px}.login-facts{display:flex;justify-content:space-between;gap:8px;margin-top:22px;padding:13px 10px;border-radius:10px;background:#0a0f1c80;font-size:9px}.login-facts span{border:0}.login-facts small{font-size:8px;margin-top:4px}
.constellation .stars{filter:none;stroke:none;opacity:.85}