/* breakoutit.com. Tokens follow the Breakout brand (Paper theme, Night via prefers-color-scheme). */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Inter-Bold.woff") format("woff"); }

:root {
  --surface: #f7f4ef;
  --ink: #15222c;
  --ink-muted: #4b5964;
  --copper: #9c4e26;
  --copper-strong: #7e3d1c;
  --font-sans: Inter, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #10181e;
    --ink: #eee8df;
    --ink-muted: #a9b4bc;
    --copper: #e0915f;
    --copper-strong: #f2b48c;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--copper); text-underline-offset: 3px; }
a:hover { color: var(--copper-strong); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.landing { flex: 1; display: grid; place-items: center; padding: 48px 16px; }
.landing h1 { margin: 0; line-height: 0; }
.landing img { display: block; width: min(280px, 70vw); height: auto; }
footer { padding: 24px 16px 32px; text-align: center; color: var(--ink-muted); font-size: 13px; }
.landing > div { text-align: center; color: var(--ink-muted); }
.landing > div img { width: 160px; margin: 0 auto 24px; }