:root{
  --bg:#0b1120;--ground:#0b1120;
  --surface:#111a2e;--inset:#16213a;--deep:#070c17;--lit:#121c33;
  --line:#22304a;--line-strong:#2f3f5c;--control:#2f3f5c;
  --ink:#e6ecf5;--body:#c3cddc;--muted:#8e9fb8;
  --accent:#818cf8;--accent-strong:#a5b4fc;--accent-deep:#4f46e5;--accent-soft:rgba(129,140,248,.14);
  --high:#f87171;--high-soft:rgba(248,113,113,.14);
  --medium:#fbbf24;--medium-soft:rgba(251,191,36,.14);
  --ok:#4ade80;--ok-soft:rgba(74,222,128,.12);
  --info:#8e9fb8;--info-soft:rgba(142,159,184,.14);
  --danger:#f87171;
  --radius:12px;--radius-control:8px;--radius-pill:999px;
  --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400.b5ad7bd3.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500.b5610af0.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600.fff0ab3a.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.e8993d94.woff2) format("woff2")}

  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);
       font-family:var(--font);color:var(--body);
       -webkit-font-smoothing:antialiased}
  a{color:var(--accent-strong);text-decoration:none}
  .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 40px}
  .top{border-bottom:1px solid var(--line)}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
  .top .brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
  .top .crumb{font:400 13px/1 var(--mono);color:var(--muted)}
  .top nav{display:flex;gap:22px;font-size:14px;font-weight:500}
  .top nav a{color:var(--body)}
  .split{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:80px;align-items:center;padding-top:64px;padding-bottom:64px}
  .intro{display:flex;flex-direction:column;gap:24px;max-width:520px}
  .kicker{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .kicker.warn{color:var(--medium)}
  .intro h1{margin:0;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
  .intro .lede{margin:0;font-size:17px;line-height:1.6}
  .trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15px}
  .trust li{display:flex;gap:12px;align-items:flex-start}
  /* The tick is CSS, not a data: image: the app's policy is img-src 'self'
     and refused the first version on production. A circle, and a rotated
     corner for the check. */
  .trust li{position:relative}
  .trust li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;border:1px solid var(--line-strong)}
  .trust li::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:4px;border-left:1.8px solid var(--ok);border-bottom:1.8px solid var(--ok);transform:rotate(-45deg)}
  .trust strong{color:var(--ink);font-weight:500}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:20px;
        margin:auto;max-width:440px;width:calc(100% - 32px)}
  .split>.card{margin:0;max-width:none;width:auto}
  .card.warn{border-color:rgba(251,191,36,.45)}
  h1{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
  .card h2{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
  p{margin:0;font-size:15px;line-height:1.6}
  .muted,.note{font-size:13.5px;line-height:1.5;color:var(--muted)}
  .who{margin:0;color:var(--ink);font-weight:500}
  .field{display:flex;flex-direction:column;gap:6px}
  form{display:flex;flex-direction:column;gap:16px}
  label{font-size:13px;font-weight:500;color:var(--muted)}
  input{width:100%;min-height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--deep);
        color:var(--ink);font-size:15px;font-family:inherit}
  input::placeholder{color:#5b6b85}
  input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(129,140,248,.25)}
  button,.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 20px;border:0;border-radius:8px;
         background:var(--accent-deep);color:#fff;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit}
  button.secondary,.btn.secondary{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
  .row{display:flex;gap:10px}
  .row>*{flex:1 1 0}
  .btn.google{gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:500}
  .btn.google svg{width:18px;height:18px;flex:none}
  .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
  .or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
  .steps{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--inset);border-radius:8px;font-size:14px}
  .steps div{display:flex;gap:10px}
  .steps span:first-child{font-family:var(--mono);color:var(--accent)}
  .mail{width:56px;height:56px}
  .ok{margin:0;font-size:13.5px;line-height:1.6;color:var(--ok)}
  .err{margin:0;font-size:13.5px;line-height:1.6;color:var(--high)}
  .divider{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:8px}
  .divider strong{color:var(--body);font-weight:500}
  /* The honeypot. Hidden HERE and not with a style attribute, because the app's
     CSP has no unsafe-inline and the browser would refuse an inline rule --
     leaving a visible field that humans fill in and get silently dropped for. */
  .trap{display:none}
  .cf-turnstile{margin:0}
  /* The OAuth consent screen (0017) shares this sheet: one card, no navigation,
     a decision to make. NOTE: no backticks anywhere in this comment; they end
     the template literal this CSS lives in. */
  .scopes{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--body)}
  .scopes li{margin:0 0 8px}
  .foot{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
  .foot .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
  .foot a{color:var(--muted)}
  .foot .links{display:flex;gap:18px}
  .card .foot{margin:0;padding-top:14px}
  @media (max-width: 640px){
    .wrap{padding:0 20px}
    .top .wrap{height:60px}
    .top nav a:not(:first-child){display:none}
    .split{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px;padding-bottom:28px}
    .intro h1{font-size:26px}
    .intro .lede{font-size:15px}
    .trust{font-size:14px}
    .card{padding:20px}
    .foot .wrap{flex-direction:column;gap:10px}
    input,button,.btn{min-height:44px}
  }