:root {
  --ink: #07111f;
  --foam: #f4faff;
  --sun: #ffc857;
  --sea: #4db3ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  color: rgba(244, 250, 255, 0.86);
  font: 500 17px/1.6 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 68ch;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 64px);
}
.home {
  display: inline-block;
  padding: 8px 0;
  color: var(--sun);
  font-weight: 800;
  text-decoration: none;
}
.home:hover, .home:focus-visible { text-decoration: underline; }
h1 { color: var(--foam); font-size: 40px; line-height: 1.1; margin: 16px 0 8px; }
h2 { color: var(--foam); font-size: 21px; line-height: 1.3; margin: 40px 0 8px; }
p { margin: 0 0 16px; }
.updated { color: rgba(244, 250, 255, 0.6); font-size: 15px; }
a { color: var(--sea); }
a:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }