:root {
  color-scheme: dark light;
  --ink: #071a33;
  --blue: #3b6cff;
  --cyan: #20d8d2;
  --paper: #f7f3ea;
  --slate: #667085;
  --coral: #ff6b5e;
  --surface: color-mix(in srgb, Canvas 94%, var(--blue) 6%);
  --border: color-mix(in srgb, CanvasText 14%, transparent);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: CanvasText;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 34rem),
    Canvas;
}
a { color: var(--blue); }
.shell { width: min(880px, calc(100% - 32px)); margin: 0 auto; }
header { padding: 42px 0 22px; border-bottom: 1px solid var(--border); }
.brand { display: flex; gap: 16px; align-items: center; }
.brand img { width: 72px; height: 72px; border-radius: 18px; }
h1, h2 { line-height: 1.2; }
h1 { margin: 0 0 4px; font-size: clamp(2rem, 7vw, 3.4rem); }
h2 { margin-top: 2rem; }
.tagline, .muted { color: color-mix(in srgb, CanvasText 66%, transparent); }
nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
main { padding: 30px 0 60px; }
.card, .notice {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.button { display: inline-block; padding: 9px 14px; border-radius: 10px; color: white; background: var(--blue); text-decoration: none; font-weight: 650; }
.notice { border-color: color-mix(in srgb, var(--coral) 46%, transparent); }
footer { padding: 24px 0 40px; border-top: 1px solid var(--border); color: color-mix(in srgb, CanvasText 60%, transparent); }
code { overflow-wrap: anywhere; }
ul { padding-left: 1.3rem; }
@media (prefers-color-scheme: dark) {
  :root { --surface: color-mix(in srgb, var(--ink) 76%, var(--blue) 24%); }
}