:root {
  color-scheme: light;
  --ink: #111111;
  --muted: #68625c;
  --paper: #fbfaf8;
  --line: #dedad5;
  --lime: #c7ff4a;
  --cyan: #56ddee;
  --violet: #9c78ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }

nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; }
.mark { position: relative; width: 40px; height: 40px; border-radius: 11px; background: #050505; }
.mark i { position: absolute; display: block; border-radius: 50%; }
.mark i:nth-child(1) { width: 10px; height: 10px; left: 9px; top: 10px; background: var(--lime); }
.mark i:nth-child(2) { width: 8px; height: 8px; right: 8px; top: 9px; background: var(--cyan); }
.mark i:nth-child(3) { width: 13px; height: 13px; left: 14px; bottom: 7px; background: var(--violet); }
nav a, footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }

main { padding: 76px 0 120px; }
h1 { margin: 0 0 22px; max-width: 680px; font-size: clamp(48px, 9vw, 92px); line-height: .94; letter-spacing: -.065em; }
.lead { max-width: 590px; margin: 0; color: var(--muted); font-size: 22px; line-height: 1.55; }
.orbits { position: relative; height: 280px; margin-top: 62px; }
.orb { position: absolute; border-radius: 50%; animation: float 5s ease-in-out infinite; }
.orb.one { width: 124px; height: 124px; left: 6%; top: 24px; background: var(--lime); }
.orb.two { width: 88px; height: 88px; left: 43%; top: 124px; background: var(--cyan); animation-delay: -1.3s; }
.orb.three { width: 156px; height: 156px; right: 7%; top: 34px; background: var(--violet); animation-delay: -2.7s; }
@keyframes float { 50% { transform: translateY(-13px); } }

.document { padding-top: 34px; }
.document h1 { font-size: clamp(44px, 7vw, 70px); }
.document h2 { margin-top: 48px; font-size: 24px; letter-spacing: -.03em; }
.document p, .document li { color: #413d39; font-size: 17px; line-height: 1.7; }
.document ul { padding-left: 22px; }
.updated { color: var(--muted); font-size: 15px; }
.card { margin-top: 36px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.button { display: inline-block; margin-top: 14px; padding: 14px 20px; border: 0; border-radius: 999px; background: var(--ink); color: white; text-decoration: none; font-weight: 700; }

footer { padding: 28px 0 42px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 600px) {
  main { padding-top: 48px; }
  .lead { font-size: 19px; }
  .orbits { height: 230px; }
  .orb.one { width: 94px; height: 94px; }
  .orb.two { width: 70px; height: 70px; }
  .orb.three { width: 124px; height: 124px; }
}