:root {
  --bg: #f8f9ff;
  --surface: #f1f3fb;
  --surface-high: #e6e8f1;
  --ink: #191c22;
  --muted: #444752;
  --line: #c5c6d4;
  --accent: #1e5ac8;
  --accent-soft: #dae2ff;
  --cta: linear-gradient(135deg, #3b82f0 0%, #1e5ac8 55%, #1747b0 100%);
  --on-cta: #ffffff;
  --glow: rgba(59, 130, 240, 0.16);
  --dot: rgba(30, 90, 200, 0.22);
  --warn: #8c1d18;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111318;
    --surface: #1d2026;
    --surface-high: #282a30;
    --ink: #e1e2ea;
    --muted: #c5c6d4;
    --line: #444752;
    --accent: #b1c5ff;
    --accent-soft: #1a438f;
    --cta: linear-gradient(135deg, #c2d4ff 0%, #b1c5ff 55%, #8ab0ff 100%);
    --on-cta: #002b6b;
    --glow: rgba(59, 130, 240, 0.22);
    --dot: rgba(177, 197, 255, 0.18);
    --warn: #ffb4ab;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
/* A soft glow and a dot grid at the top of every page, fading downwards, as in the app. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 100% at 85% 0%, var(--glow), transparent 70%),
    radial-gradient(var(--dot) 1.2px, transparent 1.7px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
main, header, footer { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 40px; display: flex; align-items: center; gap: 16px; }
header img { width: 64px; height: 64px; border-radius: 16px; }
header .studio { color: var(--muted); font-size: 15px; }
h1 { font-size: 34px; line-height: 1.2; margin: 24px 0 8px; }
h2 { font-size: 22px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
p, li { color: var(--ink); }
.lede { font-size: 19px; color: var(--muted); }
a { color: var(--accent); }
.cta {
  display: inline-block; margin: 16px 0; padding: 12px 22px; border-radius: 999px;
  background: var(--cta); color: var(--on-cta); text-decoration: none; font-weight: 600;
  box-shadow: 0 6px 16px rgba(30, 90, 200, 0.22);
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.card { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-high) 100%); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.card h3 { margin-top: 0; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--surface); }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
footer { margin-top: 56px; padding-bottom: 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.todo { background: var(--accent-soft); padding: 0 4px; border-radius: 4px; }