@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
/* Hallmark · established Terminal tokens · P5 H5 E4 S5 R5 V4 */
* { box-sizing:border-box; }
html, body { overflow-x:clip; }
body.login-page { margin:0; min-height:100dvh; display:flex; flex-direction:column; background:var(--color-paper); color:var(--color-ink); font:15px/1.6 var(--font-body); }
.login-page a { color:inherit; text-decoration:none; }
.login-page a:hover { color:var(--color-accent); }
.login-page :is(a,input,button):focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; }
.login-header { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1200px, 100%); margin:0 auto; padding:32px 40px; }
.login-brand { font:500 15px var(--font-mono); letter-spacing:-.5px; white-space:nowrap; }
.login-brand span { color:var(--color-accent); margin-right:5px; }
.login-demo { font-size:13px; color:var(--color-ink-2); white-space:nowrap; }
.login-demo span { margin-left:8px; }
.login-main { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); gap:80px; align-items:center; width:min(1080px, 100%); padding:48px 40px 64px; margin:auto; }
.login-eyebrow, .login-step { font:400 10px/1.6 var(--font-mono); letter-spacing:1.5px; }
.login-eyebrow { color:var(--color-ink-2); margin:0 0 24px; }
.login-intro h1 { font:500 clamp(42px, 5vw, 66px)/1.08 var(--font-display); letter-spacing:-3px; margin:0 0 24px; font-style:normal; overflow-wrap:anywhere; min-width:0; }
.login-intro h1 span { color:var(--color-accent); }
.login-description { font-size:16px; color:var(--color-ink-2); line-height:1.8; margin:0; }
.login-context { display:flex; align-items:flex-start; gap:16px; border-top:1px solid var(--color-rule); margin-top:48px; padding-top:24px; max-width:300px; }
.login-marker { color:var(--color-accent); font:14px var(--font-mono); padding-top:4px; }
.login-context p { font-size:12px; line-height:1.7; color:var(--color-ink-2); margin:0; }
.login-panel { padding:32px; background:var(--color-paper-2); border:1px solid var(--color-rule); border-top:2px solid var(--color-accent); }
.login-step { color:var(--color-accent); }
.login-panel h2 { font:500 28px/1.2 var(--font-display); letter-spacing:-.8px; margin:18px 0 12px; font-style:normal; }
.login-panel-heading > p { color:var(--color-ink-2); margin:0 0 28px; font-size:13px; }
.login-page label { display:block; font-size:12px; font-weight:500; margin-bottom:8px; }
.login-page input { width:100%; min-height:48px; border:1px solid var(--color-rule); border-radius:var(--radius-sm); background:var(--color-paper); color:var(--color-ink); padding:12px; font:14px var(--font-body); transition:border-color var(--dur-fast); }
.login-page input::placeholder { color:var(--color-ink-2); }
.login-page input:hover { border-color:var(--color-ink-2); }
.login-page input:focus-visible { border-color:var(--color-accent); }
.login-hint { font-size:11px; color:var(--color-ink-2); margin:9px 0 22px; }
.login-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 16px; border:1px solid var(--color-accent); border-radius:var(--radius-sm); background:var(--color-accent); color:var(--color-accent-ink); font:600 13px var(--font-body); cursor:pointer; transition:background var(--dur-fast), transform var(--dur-fast); white-space:nowrap; }
.login-submit:hover { background:color-mix(in oklch, var(--color-accent), var(--color-ink) 15%); }
.login-submit:active { transform:translateY(1px); }
.login-submit:disabled { opacity:.65; cursor:wait; transform:none; }
.login-status { font-size:12px; line-height:1.7; overflow-wrap:anywhere; margin:16px 0 0; }
.login-status:empty { display:none; }
.login-status.success { color:var(--color-long); }
.login-status.bad { color:var(--color-short); }
.login-link-note { border-top:1px solid var(--color-rule); margin-top:26px; padding-top:20px; display:flex; gap:10px; color:var(--color-ink-2); }
.login-link-note svg { width:17px; height:20px; flex-shrink:0; margin-top:3px; }
.login-link-note p { font-size:11px; line-height:1.8; margin:0; }
.login-help { margin:20px 0 0; color:var(--color-ink-2); font-size:11px; }
.login-help a { color:var(--color-ink); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.login-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; width:min(1200px, 100%); margin:0 auto; padding:24px 40px; color:var(--color-ink-2); }
.login-footer > span { font:9px var(--font-mono); letter-spacing:1px; }
.login-footer nav { display:flex; gap:24px; font-size:11px; }
.login-footer a { white-space:nowrap; }
@media(max-width:850px) {
  .login-main { gap:40px; }
  .login-intro h1 { font-size:48px; letter-spacing:-2px; }
  .login-panel { padding:26px; }
}
@media(max-width:700px) {
  .login-header { padding:24px; }
  .login-main { grid-template-columns:minmax(0,1fr); gap:28px; padding:24px 24px 40px; width:min(480px,100%); }
  .login-eyebrow { margin-bottom:14px; font-size:9px; }
  .login-intro h1 { font-size:40px; letter-spacing:-1.8px; margin-bottom:12px; }
  .login-intro h1 br { display:none; }
  .login-intro h1 br::after { content:' '; }
  .login-intro h1 span::before { content:' '; }
  .login-description { font-size:13px; }
  .login-description br { display:initial; }
  .login-context { display:none; }
  .login-panel { padding:24px; }
  .login-panel h2 { margin-top:12px; }
  .login-footer { padding:20px 24px; flex-wrap:wrap; gap:16px; }
  .login-footer nav { gap:20px; }
}
@media(prefers-reduced-motion:reduce) { .login-page * { transition:none; } }