@font-face { font-family: Atkinson; src: url('/precon-fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Atkinson; src: url('/precon-fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('/precon-fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root { color-scheme: dark; --ground: #0b0c0e; --surface: #15171a; --line: #2a2e33; --text: #f2efe8; --dim: #a9adb3; scroll-padding-top: 24px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.6 Atkinson, system-ui, sans-serif; overflow-wrap: anywhere; }
a { color: var(--text); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; border-radius: 4px; }
.skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--text); color: var(--ground); z-index: 1; }
.skip:focus { top: 12px; }
.site-head, main, .site-foot { max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.brand { font: 700 36px/1 'Big Shoulders', sans-serif; text-decoration: none; }
nav, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
nav a, .actions a { display: inline-flex; min-height: 44px; align-items: center; }
.intro { max-width: 800px; padding-block: 56px 32px; }
.intro .dim { margin-bottom: 8px; }
h1, h2, h3 { font-family: 'Big Shoulders', Atkinson, sans-serif; font-weight: 700; line-height: 1.1; }
h1 { font-size: clamp(56px, 9vw, 88px); margin: 0 0 24px; }
h2 { font-size: clamp(36px, 5vw, 48px); margin: 0 0 24px; }
h3 { font-size: 28px; margin: 0 0 12px; }
p { margin: 0 0 20px; }
.lead { font-size: 22px; line-height: 1.45; }
.dim, .note, .site-foot { color: var(--dim); }
.dim, .site-foot { font-size: 15px; }
.button { padding: 12px 22px; background: var(--text); color: var(--ground); border-radius: 999px; text-decoration: none; font-weight: 700; }
.contents { border-block: 1px solid var(--line); padding-block: 12px; gap: 0 24px; }
section { padding-block: 48px; border-bottom: 1px solid var(--line); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.features p { margin: 0; }
.note { margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--line); }
.setup { margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.setup p:last-child { margin-bottom: 0; }
ol { padding-left: 24px; margin: 16px 0 24px; }
li + li { margin-top: 16px; }
pre { padding: 16px; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
code { font: 0.9em/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
blockquote { margin: 20px 0; padding: 20px 24px; background: var(--surface); border-left: 2px solid var(--text); border-radius: 0 12px 12px 0; }
details { border-bottom: 1px solid var(--line); padding-block: 16px; }
summary { cursor: pointer; font-weight: 700; min-height: 44px; align-content: center; }
details[open] summary { margin-bottom: 16px; }
dl { margin: 0; }
dt { font-weight: 700; margin-top: 20px; }
dt:first-child { margin-top: 0; }
dd { margin: 4px 0 0; color: var(--dim); }
.site-foot { padding-block: 28px 48px; }
.site-foot nav { margin-bottom: 20px; }
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .intro { padding-top: 36px; }
  .setup { padding: 20px 16px; }
  .site-head nav { column-gap: 16px; }
  section { padding-block: 36px; }
}