:root {
  --ink: #f3f0e8;
  --muted: #a8afbd;
  --paper: #111827;
  --deep: #090e18;
  --panel: #172033;
  --line: #334058;
  --orange: #f59e0b;
  --orange-dark: #b96808;
  --green: #5fc99a;
  --red: #e47777;
  --measure: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.58;
}
a { color: inherit; }
.site-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.wordmark span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: .7rem;
}
nav { display: flex; gap: 25px; }
nav a {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .72rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
}
nav a:hover, nav a:focus-visible { color: var(--orange); }
main { max-width: var(--measure); margin: 0 auto; padding: 0 28px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: 70px;
  align-items: center;
  min-height: 640px;
  padding: 80px 0;
}
.kicker, .section-number, .rule-label, .requirements {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.kicker, .section-number, .rule-label { color: var(--orange); font-size: .72rem; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 760px;
  margin-bottom: 26px;
  font-size: clamp(3.7rem, 8.5vw, 7.7rem);
  line-height: .86;
  letter-spacing: -.065em;
}
.lede { max-width: 700px; color: #d0d5df; font-size: 1.22rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 15px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 19px;
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.button.primary { border-color: var(--orange); color: #1c1203; background: var(--orange); }
.button.primary:hover, .button.primary:focus-visible { background: #ffc04c; }
.button.quiet:hover, .button.quiet:focus-visible { border-color: var(--orange); color: var(--orange); }
.requirements { color: #7f8999; font-size: .62rem; }
.rule-card { padding: 28px; border: 1px solid var(--line); background: var(--paper); box-shadow: 13px 13px 0 #05080e; }
.rule-card strong { display: block; margin: 5px 0; color: var(--orange); font: 700 6.5rem/.9 ui-monospace, monospace; letter-spacing: -.09em; }
.rule-card strong span { font-size: 2.2rem; }
.rule-card > p:not(.rule-label) { color: #c7ccd6; }
.rule-card ol { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.rule-card li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: ui-monospace, monospace; font-size: .8rem; text-transform: uppercase; }
.rule-card li span { color: #707a8d; }
.ruled { padding: 88px 0; border-top: 1px solid var(--line); }
.section-number { margin-bottom: 34px; }
.manifesto blockquote { max-width: 990px; margin: 0 0 48px; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; color: #c5cad4; }
.two-column p { margin-bottom: 0; }
.workflow h2, .install h2 { max-width: 800px; margin-bottom: 45px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.035em; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps article { min-height: 270px; padding: 28px; background: var(--paper); }
.steps article > span { color: var(--orange); font: 700 .75rem ui-monospace, monospace; }
.steps h3 { margin: 38px 0 12px; font-size: 1.35rem; }
.steps p { margin: 0; color: var(--muted); font-size: .92rem; }
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.boundary-grid h2 { font-size: 2rem; }
.boundary-grid ul { margin: 0; padding: 0; list-style: none; }
.boundary-grid li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); color: #cbd0da; }
.boundary-grid li::before { position: absolute; left: 0; font-family: ui-monospace, monospace; font-weight: 700; }
.yes-list li::before { content: "+"; color: var(--green); }
.no-list li::before { content: "−"; color: var(--red); }
.install-intro { max-width: 800px; color: #cbd0da; }
.code-block { margin: 26px 0; border: 1px solid var(--line); background: #070b12; }
.code-block > div { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); color: #a9b0be; font: .65rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.code-block button { border: 0; color: #656f81; background: transparent; font: inherit; }
pre { overflow-x: auto; margin: 0; padding: 20px; color: #e7e2d6; font: .8rem/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
.notice { margin-top: 35px; padding: 24px; border-left: 4px solid var(--orange); background: var(--paper); }
.notice p { margin: 8px 0 0; color: var(--muted); }
.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 30px 0 95px; padding: 40px; border: 1px solid var(--orange-dark); background: #1d1b18; }
.download-panel h2 { max-width: 720px; margin: 0; font-size: clamp(1.8rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -.035em; }
.download-panel .button { flex: 0 0 auto; }
footer { max-width: var(--measure); margin: 0 auto; padding: 35px 28px 55px; border-top: 1px solid var(--line); color: #7f8999; font-size: .72rem; }
footer p { margin-bottom: 9px; }

@media (max-width: 800px) {
  .site-head { align-items: flex-start; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 65px 0; }
  .rule-card { max-width: 480px; }
  .two-column, .boundary-grid { grid-template-columns: 1fr; gap: 25px; }
  .steps { grid-template-columns: 1fr; }
  .download-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .site-head, main, footer { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: 3.45rem; }
  .ruled { padding: 65px 0; }
  .rule-card, .steps article, .download-panel { padding: 22px; }
  .actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}