@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/9766a7e9e2e0ad5a-s.woff2") format("woff2");
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/22a5144ee8d83bca-s.p.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/b9408752a0c24fb9-s.woff2") format("woff2");
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/7d4881bb7e1bf84d-s.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/8715d2ed531152f4-s.woff2") format("woff2");
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/7b89a4fd5e90ede0-s.p.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eeeef2;
  background: #111318;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
.page { max-width: 760px; margin: 0 auto; padding: 64px 24px; }
.lab-label { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; color: #b8bcc9; font-size: 14px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #555c79; border-radius: 9px; color: #c3c9fa; }
.connection-card { padding: 36px; border: 1px solid #30333e; border-radius: 22px; background: #1b1e26; }
.eyebrow { margin: 0 0 14px; color: #b6bce7; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(26px, 5vw, 34px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
.intro { margin: 0; max-width: 510px; color: #aeb4c2; font-size: 16px; line-height: 1.65; }
.connection-path { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0; }
.connection-path li { padding: 8px 11px; border: 1px solid #393d4b; border-radius: 7px; color: #c4c9d8; font-size: 12px; }
.result { min-height: 196px; padding: 22px; margin-bottom: 24px; border: 1px solid #333744; border-radius: 12px; background: #151820; }
.status-heading { display: flex; align-items: center; gap: 10px; }
h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; }
.status-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.loading { background: #b8bfea; }
.connected { background: #90d5b0; }
.failed { background: #f0b3a4; }
.status-description { margin: 11px 0 0; color: #aeb4c2; font-size: 14px; line-height: 1.65; }
.database-time { margin: 18px 0 0; }
.database-time dt { color: #aeb4c2; font-size: 12px; }
.database-time dd { margin: 6px 0 0; color: #d3dacd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 9px; color: #161824; background: #c4caff; cursor: pointer; font-size: 14px; font-weight: 600; }
button:hover:not(:disabled) { background: #d4d8ff; }
button:focus-visible { outline: 3px solid #eeeef2; outline-offset: 4px; }
button:disabled { opacity: .55; cursor: wait; }
.footnote { margin: 22px 0 0; color: #9bA2b3; font-size: 12px; line-height: 1.65; }
noscript { display: block; padding: 32px; }

@media (max-width: 520px) {
  .page { padding: 28px 16px; }
  .lab-label { margin-bottom: 24px; }
  .connection-card { padding: 24px 20px; border-radius: 16px; }
  .connection-path { gap: 8px; }
  .result { min-height: 214px; padding: 18px; }
  button { width: 100%; }
}

.account-page {
  --account-fg: #f2f2f3;
  --account-muted: #a5a6ac;
  min-height: 100svh;
  padding: 64px 24px 48px;
  background: radial-gradient(ellipse 55% 48% at 51% -14%, rgb(190 191 198 / .085), transparent 76%), #08090b;
  color: var(--account-fg);
}
.account-brand { display: block; width: fit-content; margin: 0 auto 36px; color: var(--account-fg); text-decoration: none; font: 500 26px "Cormorant Garamond", Georgia, serif; }
.account-panel { max-width: 448px; margin: 0 auto; padding: 28px; border-radius: 20px; background: linear-gradient(145deg, rgb(42 43 49 / .985), rgb(23 24 29 / .99)); box-shadow: inset 0 1px rgb(255 255 255 / .12), 0 28px 80px rgb(0 0 0 / .5); }
.account-panel h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 400; line-height: 1.25; letter-spacing: .01em; margin: 0 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field label { display: block; margin: 0 0 6px; color: var(--account-muted); font-size: 12px; font-weight: 500; }
.auth-field input { width: 100%; min-height: 48px; border: 0; border-radius: 6px; padding: 12px 16px; color: var(--account-fg); background: rgb(255 255 255 / .055); font: inherit; font-size: 16px; outline: none; }
.auth-field input::placeholder { color: #a0a1a6; }
.auth-field input:focus-visible { box-shadow: 0 0 0 2px rgb(155 174 197 / .54); }
.auth-field input:disabled { opacity: .6; }
.password-field { position: relative; }
.password-field input { padding-right: 92px; }
.account-page .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--account-muted); font-size: 12px; font-weight: 400; }
.account-page .password-toggle:hover:not(:disabled) { background: transparent; color: var(--account-fg); }
.account-page button:focus-visible, .account-page a:focus-visible { outline: 2px solid rgb(155 174 197 / .54); outline-offset: 3px; }
.account-page .account-submit { width: 100%; min-height: 44px; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 6px; background: #dfe0e3; color: #17181b; font-size: 14px; font-weight: 600; }
.account-page .account-submit:hover:not(:disabled) { background: #f0f0f2; }
.account-page .account-secondary { background: rgb(255 255 255 / .085); color: var(--account-fg); border: 0; border-radius: 6px; }
.account-page .account-secondary:hover:not(:disabled) { background: rgb(255 255 255 / .13); }
.auth-error { margin: 0; padding: 12px 16px; border: 1px solid rgb(184 80 60 / .2); border-radius: 8px; background: rgb(184 80 60 / .12); color: #e08070; font-size: 14px; line-height: 1.5; }
.auth-switch { margin: 24px 0 0; text-align: center; color: var(--account-muted); font-size: 14px; }
.auth-switch a { color: var(--account-fg); text-underline-offset: 2px; }
.account-meta { margin: 0; color: var(--account-muted); line-height: 1.65; overflow-wrap: anywhere; }
.account-overline { margin: 0 0 12px; color: var(--account-muted); font-size: 12px; }
.account-stage-note { margin: 24px 0; font-size: 14px; }
.account-confirmation .auth-error { margin-bottom: 16px; }
@media (max-width: 520px) {
  .account-page { padding: 40px 16px 28px; }
  .account-brand { margin-bottom: 24px; font-size: 24px; }
  .account-panel { padding: 24px; }
  .account-panel h1 { font-size: 30px; }
  .account-page .password-toggle { width: auto; }
}