:root { --bg: #f5f3ee; --ink: #1b1a17; --muted: #7a756b; --accent: #c8501c; --line: #e4dfd4; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #121110; --ink: #ede9e0; --muted: #9a958a; --accent: #ec7a45; --line: #2b2926; color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font: 15px/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%),
    radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 40%);
}
.wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; text-align: center; }
.mark { width: 52px; height: 52px; border-radius: 15px; background: var(--ink); position: relative; margin-bottom: 26px; }
.mark::after { content: ""; position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
h1 { font: 500 44px/1 "Fraunces", Georgia, serif; letter-spacing: -0.025em; margin: 0 0 10px; }
.lead { color: var(--muted); margin: 0 0 32px; max-width: 340px; }
.g_id_signin { min-height: 44px; }
.msg { min-height: 22px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.msg.err { color: #c0392b; }
.fine { color: var(--muted); font-size: 12.5px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }