:root {
  color-scheme: light;
  --paper: #eee7d7;
  --ink: #293d34;
  --muted: #626557;
  --line: #cfc7b5;
  --green: #304c40;
  --rust: #a54931;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Courier New", monospace;
}
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 30%, #fff8e6 0, transparent 62%),
    var(--paper);
  color: var(--ink);
  font:
    17px/1.6 Arial,
    Helvetica,
    sans-serif;
}
.login-card {
  width: min(100%, 520px);
  min-width: 0;
  padding: clamp(28px, 7vw, 56px);
  border: 1px solid #c8bda6;
  border-radius: 6px;
  background: #f7f1e4;
  box-shadow: 0 18px 55px #3a30221a;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 36px;
  color: var(--ink);
  font: bold 32px var(--serif);
  letter-spacing: -1.5px;
  text-decoration: none;
}
.wordmark > span:first-child {
  color: var(--rust);
  font-size: 34px;
}
.wordmark > span:last-child {
  color: var(--rust);
  margin-left: -9px;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 1.4px;
}
h1 {
  margin: 0 0 14px;
  font: normal clamp(32px, 7vw, 46px)/1.1 var(--serif);
}
.intro {
  margin: 0 0 26px;
  color: #4b5148;
}
.google-login {
  display: flex;
  justify-content: center;
  min-height: 40px;
}
.status,
.setup-help,
.login-error {
  margin: 18px 0 0;
  font: 14px/1.7 var(--mono);
}
.setup-help {
  padding: 15px;
  border-left: 3px solid var(--rust);
  background: #eee6d5;
}
.setup-help h2 {
  margin: 0 0 7px;
  font: 19px var(--serif);
}
.setup-help p {
  margin: 8px 0 0;
}
code {
  color: #563d2e;
  overflow-wrap: anywhere;
}
.login-error {
  color: #8d352b;
}
.fine-print {
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 12px var(--mono);
  text-align: center;
}
[hidden] {
  display: none !important;
}