@font-face {
  font-family: Manrope;
  src: url('fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #19161e;
  --ink: #f6eff7;
  --pink: #f3c6d8;
  --button-ink: #292331;
  --button-hover: #eab0ca;
  --line: rgba(246, 239, 247, .2);
  font-family: Manrope, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

:root[data-server-theme="light"] {
  color-scheme: light;
  --paper: #fafafc;
  --ink: #292331;
  --line: rgba(41, 35, 49, .2);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
.page-controls { display: flex; justify-content: flex-end; padding: 28px clamp(24px, 5vw, 72px); min-height: 100px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dark-icon, :root[data-server-theme="light"] .light-icon { display: none; }
:root[data-server-theme="light"] .dark-icon { display: block; }
main { align-self: center; justify-self: center; width: 100%; padding: 40px 24px 128px; text-align: center; }
.wordmark { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 40px; font-size: clamp(28px, 3vw, 38px); font-weight: 750; letter-spacing: -.05em; }
.wordmark img { flex: 0 0 auto; }
h1 { max-width: 950px; margin: 0 auto 40px; font-size: clamp(1.9rem, 5.2vw + .9rem, 4.5rem); font-weight: 600; line-height: 1.14; letter-spacing: -.055em; }
.login-button { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; min-height: 48px; padding: 13px 32px; border: 1px solid transparent; border-radius: 7px; background: var(--pink); color: var(--button-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.login-button:hover { background: var(--button-hover); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 5px; }
:root[data-server-theme="light"] :focus-visible { outline-color: var(--button-ink); }
[hidden] { display: none !important; }

@media (max-width: 600px) {
  .page-controls { padding: 20px 24px; min-height: 84px; }
  main { padding-bottom: 100px; }
  .wordmark { gap: 12px; margin-bottom: 32px; }
  .wordmark img { width: 52px; height: 52px; }
  h1 { margin-bottom: 32px; }
}