:root {
  --bg:#07080c; --bg-2:#0c0e14; --card:#10131a;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --fg:#f4f4f5; --mute:#a1a1aa; --dim:#71717a;
  --mint:#7cf5c8; --rose:#fb7185;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); }
body { font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:inherit; text-decoration:none; }
:where(a,button,input):focus-visible { outline:2px solid var(--mint); outline-offset:2px; border-radius:8px; }
.serif { font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; color:var(--mint); }

.logo { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:-.02em; }
.logo svg { width:28px; height:28px; }
.logo .dot { color:var(--mint); }

.btn { display:inline-flex; align-items:center; justify-content:center; width:100%; border:0; border-radius:999px; padding:13px 20px; background:var(--mint); color:#04130d; font-family:inherit; font-weight:600; font-size:15px; line-height:1; cursor:pointer; transition:background .15s; }
.btn:hover { background:#a6f9d9; }
.btn.ghost { width:auto; background:transparent; color:var(--fg); border:1px solid var(--line-2); padding:9px 16px; font-weight:500; font-size:14px; }
.btn.ghost:hover { border-color:rgba(255,255,255,.35); }

/* login */
.auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; position:relative; overflow:hidden; }
.glow { position:absolute; left:50%; top:50%; width:900px; height:900px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(124,245,200,.12), transparent 60%); pointer-events:none; }
.card { position:relative; width:100%; max-width:400px; background:var(--card); border:1px solid var(--line-2); border-radius:24px; padding:32px 28px 26px; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); }
.card h1 { font-size:28px; letter-spacing:-.03em; margin:28px 0 4px; font-weight:600; }
.card .sub { color:var(--mute); margin:0 0 22px; font-size:15px; }
.card label { display:block; font-size:13px; color:var(--mute); margin:0 0 6px; }
.card input { width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; color:var(--fg); font:inherit; font-size:15px; margin-bottom:16px; }
.card input:focus { outline:none; border-color:rgba(124,245,200,.55); }
.card .btn { margin-top:6px; }
.alert { background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.3); color:#fecdd3; border-radius:12px; padding:10px 12px; font-size:14px; margin:0 0 18px; }
.foot { margin:20px 0 0; text-align:center; font-size:13.5px; color:var(--dim); }
.foot a, .by a { color:var(--mute); text-decoration:underline; text-underline-offset:3px; }
.by { position:relative; margin-top:22px; font-size:12.5px; color:var(--dim); }

/* signed-in */
.top { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); }
.top form { display:flex; align-items:center; gap:12px; margin:0; }
.who { font-size:13.5px; color:var(--mute); }
.home { max-width:900px; margin:0 auto; padding:110px 24px; }
.eyebrow { font:500 12px/1 ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--mint); margin:0 0 18px; }
.home h1 { font-size:clamp(34px, 5vw, 56px); line-height:1.05; letter-spacing:-.035em; font-weight:600; margin:0 0 18px; }
.home .sub { color:var(--mute); font-size:18px; margin:0; }
@media (max-width: 480px) { .top { padding:14px 16px; } .who { display:none; } }