:root {
  color-scheme: dark;
  --paper: #121914;
  --ink: #edf1e9;
  --muted: #adb8a7;
  --line: #38473b;
  --accent: #d4ed89;
  --field: #1a241d;
  font-family: "Inter", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
::selection { color: #182416; background: var(--accent); }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.login-layout { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 46% 54%; }
.intro { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #1e2b23; color: var(--ink); padding: 46px 10.8% 36px; display: flex; flex-direction: column; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; align-self: flex-start; font-size: 32px; font-weight: 650; letter-spacing: -1.5px; line-height: 1; text-decoration: none; position: relative; z-index: 1; }
.brand-mark { display: inline-block; width: 25px; height: 26px; background: var(--accent); margin-right: 13px; clip-path: polygon(0 0, 100% 0, 100% 29%, 64% 29%, 64% 100%, 35% 100%, 35% 29%, 0 29%); }
.brand-dot { color: var(--accent); }
.intro-copy { margin: 100px 0 155px; position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 10px; font-weight: 600; }
.intro-eyebrow { color: #c1cbbf; display: flex; align-items: center; gap: 10px; margin: 0 0 31px; }
.intro-eyebrow span { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.intro-title { font-size: clamp(36px, 4.7vw, 76px); font-weight: 440; line-height: 1.12; letter-spacing: -2.9px; margin: 0; }
.intro-title > span { color: var(--accent); }
.intro-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #b5c1b7; font-size: 11px; position: relative; z-index: 1; }
.intro-number { font-family: ui-monospace, monospace; font-size: 10px; white-space: nowrap; letter-spacing: 1px; }
.orbit { position: absolute; border: 1px solid #516247; border-radius: 50%; width: 610px; height: 610px; bottom: -455px; right: -200px; pointer-events: none; }
.orbit-two { width: 760px; height: 760px; bottom: -530px; right: -275px; border-color: #3f5140; }
.login-panel { display: flex; flex-direction: column; padding: 47px 9.2% 35px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; }
.panel-label { font-size: 11px; color: var(--muted); }
.small-mark { font-size: 21px; font-weight: 300; }
.login-content { width: min(100%, 370px); margin: auto; padding: 72px 0; }
.section-marker { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, monospace; font-size: 9px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 24px; }
.section-marker span { height: 1px; width: 25px; background: #7a906b; }
h1 { font-size: clamp(36px, 3.3vw, 52px); font-weight: 530; letter-spacing: -2px; line-height: 1.12; margin: 0 0 19px; }
.title-dot { color: var(--accent); }
.description { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.login-form { margin-top: 39px; }
.field + .field { margin-top: 21px; }
.field label { display: block; font-weight: 550; font-size: 12px; margin-bottom: 9px; }
.field input { display: block; width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 15px 16px; height: 51px; color: var(--ink); caret-color: var(--accent); background: var(--field); font-size: 13px; transition: border-color 120ms ease, box-shadow 120ms ease; }
.field input::placeholder { color: #99a792; opacity: 1; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #d4ed8926; }
.field input:autofill { color: var(--ink); background: var(--field); }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--field) inset; caret-color: var(--accent); }
.password-field { position: relative; }
.password-field input { padding-right: 55px; }
.password-toggle { position: absolute; top: 4px; bottom: 4px; right: 4px; width: 44px; display: grid; place-items: center; color: #b0bea7; background: transparent; border: 0; border-radius: 3px; }
.password-toggle:hover { color: var(--accent); background: #2c3b2d; }
.submit-button { margin-top: 28px; padding: 15px 18px; border: 1px solid var(--accent); border-radius: 5px; width: 100%; min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #182416; background: var(--accent); font-size: 13px; font-weight: 650; text-decoration: none; transition: background 150ms ease, border-color 150ms ease; }
.submit-button:hover { background: #e2f5b1; border-color: #e2f5b1; }
.submit-button:active { background: #bdd875; border-color: #bdd875; }
.access-note { margin: 24px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 10px; }
.panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); font-size: 10px; }
.panel-footer > span:first-child { color: var(--ink); font-size: 13px; font-weight: 650; letter-spacing: -.4px; }
.error-message { display: flex; align-items: flex-start; gap: 10px; background: #36251f; color: #ffc1aa; border: 1px solid #765041; border-radius: 5px; padding: 12px 13px; font-size: 12px; line-height: 1.6; margin-top: 24px; }
.error-message p { margin: 0; }
.error-symbol { flex: none; border: 1px solid currentColor; border-radius: 50%; width: 16px; height: 16px; margin-top: 2px; display: grid; place-items: center; font-size: 10px; font-weight: 650; line-height: 1; }
.error-message + .login-form { margin-top: 22px; }
.utility-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; }
.utility-content { width: min(100%, 430px); }
.utility-brand { margin-bottom: 68px; }
.utility-brand .brand-mark { background: var(--accent); }
.utility-brand .brand-dot { color: var(--accent); }
.utility-content h1 { font-size: 38px; }
.back-link { display: inline-block; margin-top: 22px; color: var(--muted); font-size: 12px; text-underline-offset: 4px; }
@media (min-width: 1500px) {
  .login-panel { padding-left: 13%; padding-right: 13%; }
  .login-content { width: min(100%, 420px); }
}
@media (max-width: 900px) {
  .intro { padding: 38px 9% 30px; }
  .intro-title { font-size: 40px; letter-spacing: -1.8px; }
  .intro-bottom { display: block; }
  .intro-number { display: none; }
  .login-panel { padding: 40px 10% 30px; }
  .panel-top { margin-bottom: 20px; }
}
@media (max-width: 650px) {
  .login-layout { grid-template-columns: 1fr; }
  .intro { min-height: auto; padding: 27px 28px; }
  .brand { font-size: 28px; }
  .brand-mark { width: 22px; height: 23px; margin-right: 10px; }
  .intro-copy, .intro-bottom, .orbit { display: none; }
  .login-panel { padding: 29px 28px 25px; min-height: calc(100svh - 82px); }
  .panel-top { margin: 0; }
  .panel-label { font-size: 10px; }
  .login-content { padding: 52px 0; max-width: 370px; }
  h1 { font-size: 43px; }
  .login-form { margin-top: 31px; }
  .field input { font-size: 16px; }
  .section-marker { margin-bottom: 21px; }
  .panel-footer { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}