:root {
  color-scheme: dark;
  --bg: #212121;
  --text: #ececec;
  --muted: #a6a6a6;
  --button: #ececec;
  --button-text: #171717;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 14px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a, button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #ececec; outline-offset: 5px; }
.screen { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 210px 1fr auto; }
.header { display: flex; justify-content: center; align-items: flex-start; padding: 94px 24px 0; }
.brand { display: inline-flex; gap: 18px; align-items: center; color: var(--text); text-decoration: none; font-size: 41px; line-height: 1; letter-spacing: -1.7px; font-weight: 750; }
.brand svg { width: 67px; height: 67px; flex: none; }
.main { text-align: center; padding: 50px 20px 42px; width: min(100%, 960px); margin: 0 auto; }
.eyebrow { font-size: 14px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; color: #bdbdbd; margin: 0 0 28px; }
h1 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -2.4px; margin: 0; }
.subtitle { color: var(--muted); font-size: clamp(17px, 2vw, 25px); line-height: 1.55; margin: 22px auto 0; }
.google-button { margin: 54px auto 0; background: var(--button); color: var(--button-text); border: 1px solid #eeeeee; border-radius: 17px; min-height: 72px; width: min(100%, 570px); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 26px; font-size: clamp(17px, 2vw, 25px); font-weight: 700; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background .16s, transform .16s; }
.google-button:hover { background: #fff; transform: translateY(-1px); }
.google-button[disabled] { cursor: default; opacity: 1; }
.google-button[disabled]:hover { background: var(--button); transform: none; }
.google-icon { width: 31px; height: 31px; flex: none; }
.access-note { color: #bdbdbd; font-size: clamp(14px, 1.6vw, 21px); line-height: 1.5; margin: 32px auto 0; }
.preview-note { color: #8c8c8c; font-size: 12px; margin: 15px auto 0; }
.footer { margin: 0 auto; text-align: center; width: min(100% - 36px, 980px); padding: 27px 0 58px; color: #a6a6a6; font-size: 14px; line-height: 1.8; }
.footer a { color: #dcdcdc; text-decoration: underline; text-underline-offset: 4px; }
.logout-button { background: var(--button); color: var(--button-text); padding: 16px 24px; border: none; border-radius: 12px; min-height: 58px; font-weight: 700; cursor: pointer; }
.logout-form { margin: 46px auto 0; }
@media (max-width: 750px) {
  .screen { grid-template-rows: 150px 1fr auto; }
  .header { padding-top: 49px; }
  .brand { font-size: 30px; gap: 10px; letter-spacing: -.9px; }
  .brand svg { width: 45px; height: 45px; }
  .main { padding: 33px 20px 52px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 22px; }
  h1 { font-size: clamp(34px, 8.8vw, 50px); letter-spacing: -1.3px; }
  .subtitle { margin-top: 18px; font-size: 16px; }
  .google-button { margin-top: 45px; min-height: 62px; font-size: 17px; border-radius: 13px; gap: 12px; }
  .google-icon { height: 24px; width: 24px; }
  .access-note { font-size: 14px; margin-top: 24px; }
  .footer { font-size: 12px; padding-bottom: 29px; }
}
@media (max-width: 370px) {
  .brand { font-size: 27px; } .brand svg { width: 41px; height: 41px; }
  .google-button { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }