:root {
  color-scheme: light;
  --ink: #19201e;
  --muted: #58635f;
  --line: #dce4e1;
  --surface: #ffffff;
  --soft: #f5f7f6;
  --teal: #146c5a;
  --teal-soft: #dcefe9;
  --coral: #c84f33;
  --coral-soft: #fbe5df;
  --gold: #8a6400;
  --gold-soft: #f7edc8;
  --focus: #0b57d0;
}

* { box-sizing: border-box; }
html { background: var(--soft); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--surface); }
a { color: var(--teal); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-header, main, footer { width: min(100% - 32px, 1040px); margin-inline: auto; }
.site-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 800; text-decoration: none; }
.brand img, .app-icon { border-radius: 8px; }
nav { display: flex; align-items: center; gap: 8px; }
nav a { padding: 8px 10px; color: var(--muted); font-size: 0.92rem; font-weight: 700; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; }
main { padding-block: 64px 72px; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding-bottom: 58px; }
.eyebrow { margin: 0 0 8px; color: var(--coral); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.25; letter-spacing: 0; }
h1 { max-width: 780px; margin: 0; font-size: 3.4rem; }
h2 { margin: 48px 0 18px; font-size: 1.45rem; }
h3 { margin: 32px 0 8px; font-size: 1.08rem; }
.lede { max-width: 700px; margin: 16px 0; color: var(--muted); font-size: 1.14rem; }
.package { color: var(--muted); overflow-wrap: anywhere; }
code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); font-size: 0.9em; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resource { min-height: 154px; display: grid; align-content: start; gap: 9px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.resource:hover { border-color: var(--teal); }
.resource strong { font-size: 1.08rem; }
.resource > span:last-child { color: var(--muted); }
.resource-mark { width: fit-content; padding: 2px 7px; border-radius: 4px; font-size: 0.74rem; font-weight: 900; }
.teal { color: var(--teal); background: var(--teal-soft); }
.coral { color: var(--coral); background: var(--coral-soft); }
.gold { color: var(--gold); background: var(--gold-soft); }
.ink { color: var(--surface); background: var(--ink); }
.document { width: min(100%, 820px); }
.document-header { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.document-header h1 { font-size: 3rem; }
.updated { margin: 14px 0 0; color: var(--muted); }
.summary { margin: 28px 0 0; padding: 20px; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.summary p { margin: 0; }
.document p, .document li, .document td, .document th { color: #303936; }
.document ul, .document ol { padding-left: 22px; }
.document li + li { margin-top: 8px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink); background: var(--soft); }
tr:last-child td { border-bottom: 0; }
.contact-box { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.contact-box p { margin: 4px 0; }
.steps { counter-reset: steps; padding: 0; list-style: none; }
.steps li { counter-increment: steps; position: relative; min-height: 38px; padding-left: 46px; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 0.82rem; font-weight: 900; }
footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }

@media (max-width: 720px) {
  .site-header { padding-block: 16px; align-items: flex-start; flex-direction: column; }
  nav { width: 100%; overflow-x: auto; }
  nav a { padding-left: 0; padding-right: 16px; white-space: nowrap; }
  main { padding-block: 42px 56px; }
  h1, .document-header h1 { font-size: 2.1rem; }
  .intro { grid-template-columns: 1fr; gap: 24px; }
  .app-icon { width: 96px; height: 96px; grid-row: 1; }
  .resource-grid { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
  footer { padding-block: 24px; }
}