:root {
  --paper: #f5efe2; --ink: #17201e; --muted: #5d625b; --orange: #f2572a;
  --orange-dark: #c93f1c; --yellow: #f7c84b; --sage: #b8c7ad; --night: #13201e;
  --cream: #fffaf0; --line: rgba(23,32,30,.19); --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --display: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", Impact, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; text-underline-offset: .2em; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .75rem 1rem; background: var(--ink); color: white; }
.skip-link:focus { top: 1rem; }
.site-header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.2rem,4vw,4.5rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font: 900 1.08rem/1 var(--display); letter-spacing: .17em; }
.brand svg { width: 38px; fill: var(--orange); }
.site-header nav { display: flex; align-items: center; gap: clamp(1.1rem,3vw,2.8rem); font-size: .82rem; font-weight: 750; }
.site-header nav a { text-decoration: none; }
.site-header nav a:not(.nav-github):hover { color: var(--orange); }
.nav-github { padding: .64rem .9rem; border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.nav-github:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.hero { min-height: calc(100svh - 78px); display: grid; grid-template-columns: minmax(0,1.03fr) minmax(380px,.97fr); }
.hero-copy { padding: clamp(4rem,9vh,8rem) clamp(1.5rem,6vw,7.5rem); border-right: 1px solid var(--line); }
.eyebrow, .kicker { margin: 0 0 2rem; text-transform: uppercase; letter-spacing: .16em; font: 800 .7rem/1 var(--mono); }
.eyebrow span { display: inline-block; width: 9px; height: 9px; margin-right: .5rem; border-radius: 50%; background: var(--orange); }
h1, h2 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: -.045em; line-height: .86; }
h1 { font-size: clamp(4rem,8.5vw,8.9rem); max-width: 9ch; }
h1 em { color: var(--orange); font-style: normal; }
.lede { max-width: 620px; margin: 2.4rem 0; font-size: clamp(1.03rem,1.4vw,1.28rem); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { padding: .9rem 1.15rem; border: 1px solid var(--ink); text-decoration: none; font-size: .83rem; font-weight: 800; }
.button.primary { color: white; background: var(--ink); }
.button.primary:hover { background: var(--orange); border-color: var(--orange); }
.button.secondary:hover { background: var(--cream); }
.hero-facts { display: flex; gap: 0; margin: clamp(3rem,8vh,6rem) 0 0; border-top: 1px solid var(--line); }
.hero-facts div { flex: 1; padding: 1.2rem 1rem 0 0; }
.hero-facts div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.hero-facts dt { color: var(--muted); font: 650 .65rem var(--mono); text-transform: uppercase; }
.hero-facts dd { margin: .3rem 0 0; font: 900 .83rem var(--mono); }
.road-scene { position: relative; min-height: 620px; overflow: hidden; background: var(--yellow); isolation: isolate; }
.sun { position: absolute; width: 24vw; height: 24vw; max-width: 330px; max-height: 330px; min-width: 210px; min-height: 210px; top: 12%; right: -6%; border: 2px solid var(--ink); border-radius: 50%; background: #ffdd72; box-shadow: inset 0 0 0 22px #f7c84b, inset 0 0 0 24px var(--ink); }
.cloud { position: absolute; width: 100px; height: 22px; top: 17%; left: 12%; border-top: 2px solid var(--ink); opacity: .45; }
.cloud:before, .cloud:after { content: ""; position: absolute; width: 33px; height: 16px; top: -17px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 30px 30px 0 0; }
.cloud:after { left: 31px; width: 42px; height: 25px; top: -26px; }
.cloud-two { left: 62%; top: 31%; transform: scale(.7); }
.ridge { position: absolute; left: -15%; bottom: 30%; width: 130%; height: 40%; background: var(--sage); clip-path: polygon(0 80%,12% 58%,21% 71%,36% 27%,46% 64%,60% 42%,68% 60%,80% 22%,100% 70%,100% 100%,0 100%); border-bottom: 2px solid var(--ink); }
.ridge-back { opacity: .55; transform: translateY(-24%); }
.ridge-front { background: #718d70; clip-path: polygon(0 73%,15% 40%,28% 72%,45% 31%,61% 78%,73% 47%,88% 70%,100% 51%,100% 100%,0 100%); }
.road { position: absolute; z-index: 2; bottom: 0; left: -10%; width: 120%; height: 36%; background: var(--night); transform: skewY(-3deg); border-top: 3px solid var(--ink); }
.road i { position: absolute; width: 15%; height: 5px; top: 52%; background: var(--cream); transform: skewY(3deg); }
.road i:nth-child(2) { left: 28%; }.road i:nth-child(3) { left: 56%; }.road i:nth-child(4) { left: 84%; }
.convoy { position: absolute; z-index: 4; left: 7%; right: 4%; bottom: 25%; height: 130px; display: flex; align-items: flex-end; filter: drop-shadow(0 7px 0 rgba(0,0,0,.18)); animation: convoy-bob 1.1s ease-in-out infinite alternate; }
.vehicle { position: relative; height: 84px; border: 3px solid var(--ink); background: var(--orange); }
.vehicle b { position: absolute; left: 11px; top: 12px; font: 900 .62rem var(--mono); letter-spacing: .08em; }
.vehicle.lead { width: 33%; min-width: 130px; border-radius: 7px 22px 3px 3px; }
.vehicle.lead:before { content: ""; position: absolute; right: 10px; top: 11px; width: 32%; height: 28px; background: #bee0de; border: 3px solid var(--ink); transform: skewX(-10deg); }
.vehicle.trailer { width: 25%; min-width: 88px; height: 72px; background: var(--cream); border-radius: 4px; }
.vehicle.t2 { background: var(--sage); }
.hitch { width: 4%; min-width: 12px; height: 6px; margin-bottom: 22px; background: var(--ink); }
.wheel { position: absolute; bottom: -17px; width: 29px; height: 29px; border: 7px solid var(--ink); background: var(--paper); border-radius: 50%; }
.w1 { left: 13%; }.w2 { right: 13%; }
.scene-label { position: absolute; z-index: 5; right: 5%; bottom: 6%; margin: 0; color: var(--cream); font: 700 .64rem var(--mono); letter-spacing: .1em; }
.scene-label span { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; background: #77d897; border-radius: 50%; }
.scene-label b { color: var(--yellow); }
.manifesto { min-height: 340px; padding: 5rem clamp(1.5rem,7vw,8rem); display: flex; align-items: flex-end; justify-content: space-between; color: var(--cream); background: var(--orange); }
.manifesto p { margin: 0; font-family: var(--display); font-size: clamp(2.6rem,6vw,6.5rem); font-weight: 900; line-height: .92; text-transform: uppercase; }
.manifesto p strong { color: var(--ink); }
.manifesto-mark { font: 900 clamp(3rem,8vw,7rem) var(--display); opacity: .38; }
.manifesto-mark sup { font: 700 .7rem var(--mono); }
.section { padding: clamp(5rem,10vw,10rem) clamp(1.5rem,7vw,8rem); }
.section-heading { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 4vw; align-items: end; margin-bottom: clamp(4rem,8vw,7rem); }
.section-heading .kicker { align-self: start; color: var(--orange-dark); }
h2 { font-size: clamp(3rem,6.6vw,7.2rem); }
.section-heading > p:last-child { color: var(--muted); font-size: 1rem; }
.topology { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,3vw,3rem); padding-top: 5rem; }
.topology-line { position: absolute; left: 10%; right: 10%; top: 3.2rem; height: 3px; background: var(--ink); }
.topology-line:after { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 3px solid; border-right: 3px solid; transform: rotate(45deg); }
.main-branch { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: .5rem; font: 800 .7rem var(--mono); }
.main-branch b { display: block; width: 10px; height: 10px; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; }
.pr-card { position: relative; padding: 1.4rem; min-height: 180px; border: 2px solid var(--ink); background: var(--cream); box-shadow: 7px 7px 0 var(--ink); }
.pr-card:before { content: ""; position: absolute; top: -1.95rem; left: 50%; width: 3px; height: 1.9rem; background: var(--ink); }
.pr-card small { display: block; font: 750 .62rem var(--mono); color: var(--muted); }
.pr-card strong { display: block; margin-top: .7rem; font: 900 3.3rem/1 var(--display); }
.pr-card p { margin: .3rem 0; font-size: .75rem; }.pr-card code { font-family: var(--mono); }
.head-card { background: var(--yellow); transform: translateY(-12px); }
.status { position: absolute; right: 1rem; bottom: 1rem; padding: .25rem .45rem; border: 1px solid; font: 800 .58rem var(--mono); }
.status.ready { color: white; background: #27714e; border-color: #27714e; }
.loop-section { color: var(--cream); background: var(--night); }
.section-heading.light .kicker { color: var(--yellow); }.section-heading.light > p:last-child { color: #b8c3be; }
.loop-grid { display: grid; grid-template-columns: repeat(4,1fr); list-style: none; margin: 0; padding: 0; border: 1px solid #56615e; }
.loop-grid li { min-height: 290px; padding: 1.5rem; border-right: 1px solid #56615e; display: flex; flex-direction: column; justify-content: space-between; }
.loop-grid li:last-child { border: 0; }.loop-grid li > span { color: var(--yellow); font: 700 .65rem var(--mono); }
.loop-grid h3 { margin: 0 0 .8rem; font: 900 1.35rem var(--display); text-transform: uppercase; }
.loop-grid p { margin: 0; color: #b8c3be; font-size: .86rem; }.loop-grid .decision { color: var(--ink); background: var(--orange); }.loop-grid .decision span,.loop-grid .decision p { color: var(--ink); }
.command-strip { max-width: 680px; margin: 3rem auto 0; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid #59635f; background: #0b1211; font-family: var(--mono); }
.command-strip > span { color: var(--yellow); }.command-strip code { flex: 1; }.command-strip button,.install-commands button { color: inherit; border: 0; background: transparent; cursor: pointer; font: 700 .66rem var(--mono); text-transform: uppercase; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-grid article { min-height: 260px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--orange); border: 1px solid var(--ink); font: 800 1.1rem var(--mono); }
.feature-grid h3 { margin: 3.8rem 0 .7rem; font: 900 1.25rem var(--display); text-transform: uppercase; }.feature-grid p { color: var(--muted); font-size: .87rem; }
.commands { background: var(--yellow); }.section-heading.compact { grid-template-columns: .7fr 2fr; }
.route-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
.route-map > div { min-height: 180px; padding: 1.3rem; border: 2px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.route-map > i { padding: .7rem; font-style: normal; font-size: 1.5rem; }.route-map span { display: block; font: 700 .6rem var(--mono); color: var(--orange-dark); }.route-map code { display: block; margin: 2rem 0 .4rem; font: 900 1rem var(--mono); }.route-map p { margin: 0; font-size: .78rem; color: var(--muted); }
.integration { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; color: var(--cream); background: var(--orange); }
.integration-copy h2 { color: var(--ink); }.integration-copy > p:not(.kicker) { max-width: 570px; }.integration-copy a { display: inline-block; margin-top: 1.4rem; font-weight: 850; }
.integration pre { margin: 0; padding: clamp(1.5rem,4vw,3.5rem); overflow: auto; border: 2px solid var(--ink); color: #dfe8e2; background: var(--night); box-shadow: 10px 10px 0 var(--ink); font: .82rem/1.9 var(--mono); }.integration pre span { color: var(--yellow); }
.install { padding: clamp(5rem,10vw,10rem) clamp(1.5rem,7vw,8rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; color: var(--cream); background: var(--ink); }
.install h2 { color: var(--yellow); }.install > div > p:last-child { color: #b8c3be; max-width: 510px; }
.install-commands { border-top: 1px solid #53605c; }.install-commands > div { display: flex; gap: 1rem; justify-content: space-between; padding: 1.4rem 0; border-bottom: 1px solid #53605c; }.install-commands code { overflow-wrap: anywhere; color: #edf2ed; font: .78rem var(--mono); }.install-commands button { color: var(--yellow); }
footer { padding: 2.2rem clamp(1.5rem,7vw,8rem); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: #09100f; color: #cdd4d0; border-top: 1px solid #3d4845; font-size: .72rem; }
.footer-brand { color: white; } footer p { text-align: center; } footer > div { display: flex; justify-content: flex-end; gap: 1.5rem; }
button:focus-visible,a:focus-visible { outline: 3px solid #48a9ff; outline-offset: 4px; }
.has-motion .pr-card,.has-motion .feature-grid article,.has-motion .loop-grid li { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.has-motion .pr-card.is-visible,.has-motion .feature-grid article.is-visible,.has-motion .loop-grid li.is-visible { opacity: 1; transform: translateY(0); }
@keyframes convoy-bob { from { transform: translateY(0) rotate(-.2deg); } to { transform: translateY(-5px) rotate(.2deg); } }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }.hero-copy { border-right: 0; }.road-scene { min-height: 580px; }
  .section-heading { grid-template-columns: 1fr 1.5fr; }.section-heading > p:last-child { grid-column: 2; }
  .loop-grid { grid-template-columns: 1fr 1fr; }.loop-grid li:nth-child(2) { border-right: 0; }.loop-grid li:nth-child(-n+2) { border-bottom: 1px solid #56615e; }
  .feature-grid { grid-template-columns: 1fr 1fr; }.route-map { grid-template-columns: 1fr; gap: 1rem; }.route-map > i { display: none; }.route-map > div { min-height: 135px; }
}
@media (max-width: 680px) {
  .site-header { height: 66px; }.site-header nav a:not(.nav-github) { display: none; }.brand { font-size: .94rem; }
  .hero { min-height: auto; }.hero-copy { padding-top: 4rem; }.hero-facts { flex-direction: column; }.hero-facts div + div { padding-left: 0; border-left: 0; }.road-scene { min-height: 480px; }
  .convoy { left: 3%; right: 2%; transform-origin: left; }.vehicle.lead { min-width: 108px; }.vehicle.trailer { min-width: 68px; }.vehicle b { font-size: .52rem; }
  .manifesto { min-height: 290px; align-items: center; }.manifesto-mark { display: none; }
  .section-heading,.section-heading.compact { grid-template-columns: 1fr; }.section-heading > p:last-child { grid-column: 1; }.section-heading h2 { order: 2; }.section-heading > p:last-child { order: 3; }
  .topology { grid-template-columns: 1fr; padding-left: 2.2rem; }.topology-line { top: 5rem; bottom: 1rem; left: 1rem; width: 3px; height: auto; }.topology-line:after { right: -5px; top: auto; bottom: 0; transform: rotate(135deg); }.pr-card:before { top: 50%; left: -2.2rem; width: 2.2rem; height: 3px; }.head-card { transform: none; }
  .loop-grid,.feature-grid { grid-template-columns: 1fr; }.loop-grid li { min-height: 220px; border-right: 0; border-bottom: 1px solid #56615e; }.feature-grid article { min-height: 220px; }.feature-grid h3 { margin-top: 2.5rem; }
  .integration,.install { grid-template-columns: 1fr; }.integration pre { font-size: .68rem; } footer { grid-template-columns: 1fr; gap: 1rem; text-align: center; } footer p { margin: 0; } footer > div { justify-content: center; }
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#111a19; --ink:#eef1e8; --muted:#afb8ae; --cream:#182320; --line:rgba(238,241,232,.2); }
  .road-scene,.commands { color:#17201e; }.road { background:#263432; }.vehicle { border-color:#17201e; color:#17201e; }.wheel { border-color:#17201e; background:#f5efe2; }.hitch { background:#17201e; }
  .manifesto,.integration { color:#f5efe2; }.manifesto p strong,.integration-copy h2 { color:#17201e; }.integration pre { border-color:#0b1110; box-shadow:10px 10px 0 #0b1110; }
  .commands .route-map > div { color:#eef1e8; }.pr-card { box-shadow:7px 7px 0 #51615c; }.head-card { color:#17201e; }.nav-github { box-shadow:3px 3px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}