* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: #fff;
  background: var(--bg);
  font-family: Pixel, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; }
.page-hero {
  padding: 4rem var(--pad-x) var(--pad-y);
  background:
    radial-gradient(#ffffff14 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(#3a1010, var(--bg));
}
.page-hero .wrap,
.page-body .wrap,
.page-cta .wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}
.page-hero h1 {
  margin: 0;
  font-size: clamp(1.15rem, 3.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
}
.page-hero p {
  margin: 1.1rem 0 0;
  max-width: 40rem;
  color: #fff;
}
.page-hero a { color: var(--green); }
.page-hero a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.page-hero a.brand { color: #fff; }
.page-hero .brand {
  font-size: clamp(1.05rem, 3vw, 1.6rem);
}
.page-hero .brand img {
  width: 48px;
  height: 48px;
}
.page-hero .meta {
  color: var(--muted);
}
.page-body {
  background: var(--dark);
  padding: var(--pad-y) var(--pad-x) 4rem;
}
.prose { max-width: 42rem; }
.prose h2 {
  margin: 1.75rem 0 0.6rem;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose ol,
.prose ul { color: var(--muted); }
.prose ol,
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0.35rem 0; }
.prose a { color: var(--green); }
.prose a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.page-cta {
  text-align: center;
  padding: 4rem var(--pad-x);
  background:
    linear-gradient(#ffffff1f 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, #ffffff1f 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(#4a1414, #1e0808);
}
.page-cta h2 {
  margin: 0 0 1.15rem;
  color: #fff;
  font-size: clamp(1.15rem, 3.4vw, 1.85rem);
  line-height: 1.45;
  font-weight: 400;
}
.page-cta p {
  margin: 0 auto;
  max-width: 36rem;
  color: #fff;
}
.page-cta .btn { margin-top: 1.5rem; }
.page-hero .btn { margin-top: 1.5rem; }
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 28rem;
}
.prose .doc-list { margin: 1.25rem 0 0; padding-left: 0; }
.doc-list a,
.doc-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  color: var(--ink);
  text-align: start;
  font: inherit;
  border: 0;
  cursor: pointer;
}
.doc-list a:focus-visible,
.doc-list button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.doc-copy {
  display: block;
  min-width: 0;
}
.doc-copy strong {
  display: block;
  font-weight: 400;
}
.doc-copy .hint {
  display: block;
  margin-top: 0.2rem;
  color: #555;
  font-size: 10px;
  line-height: 1.5;
}
.doc-go {
  width: 2px;
  height: 2px;
  flex: none;
  margin-top: -6px;
  background: currentColor;
  box-shadow:
    2px 0 0 currentColor,
    4px 0 0 currentColor,
    6px 0 0 currentColor,
    6px 2px 0 currentColor,
    6px 4px 0 currentColor,
    4px 2px 0 currentColor,
    2px 4px 0 currentColor,
    0 6px 0 currentColor;
}
.url-box {
  margin: 1.25rem 0 0;
  max-width: 28rem;
  padding: 0.65rem 0.7rem;
  background: #fff;
  color: #555;
  font-size: 10px;
  line-height: 1.6;
  word-break: break-all;
  box-shadow:
    inset 2px 2px 0 #262626,
    inset -2px -2px 0 #f0f0f0;
}
@media (min-width: 800px) {
  .page-hero { padding-top: 4.5rem; }
}