:root {
  --ink: #0a0b0d;
  --paper: #f2f1ea;
  --muted: #787a74;
  --line: rgba(10, 11, 13, 0.18);
  --acid: #58f4c2;
  --blue: #c9e2ea;
  --dark: #111719;
  --pad: clamp(22px, 4.2vw, 74px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; width: 100%; }

.nav {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px var(--pad);
  color: white;
  mix-blend-mode: difference;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.brand-mark { width: 14px; height: 14px; background: var(--acid); transform: rotate(45deg); border-radius: 2px; }
.nav nav { display: flex; gap: clamp(16px, 3vw, 42px); }
.nav nav a { text-decoration: none; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

.hero { background: var(--ink); color: white; min-height: 100vh; }
.hero-copy { min-height: 76vh; padding: clamp(120px, 15vw, 210px) var(--pad) 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.eyebrow { margin: 0 0 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 34px; max-width: 1200px; font-size: clamp(3.5rem, 9.1vw, 9rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 620; }
.lede { max-width: 760px; font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.35; color: rgba(255,255,255,.75); }
.hero-tagline { max-width: 1000px; margin: 0 0 18px; color: var(--acid); font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.25; }
.hero-tagline strong { font-weight: 650; }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.25); }
.metric-row strong, .metric-row span { display: block; }
.metric-row strong { color: var(--acid); font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.1; }
.metric-row span { margin-top: 7px; color: rgba(255,255,255,.56); font-size: .82rem; }

.fullbleed-media { margin: 0; position: relative; overflow: hidden; background: #172022; }
.hero-media { aspect-ratio: 16 / 8.5; }
.fullbleed-media img { width: 100%; height: 100%; object-fit: cover; }
.fullbleed-media figcaption { position: absolute; left: 20px; bottom: 18px; max-width: 620px; padding: 10px 14px; color: white; background: rgba(8,12,14,.78); backdrop-filter: blur(12px); font-size: .76rem; }
.fullbleed-media figcaption span { color: var(--acid); font-family: ui-monospace, monospace; margin-right: 12px; }

.statement { padding: clamp(100px, 15vw, 220px) var(--pad); max-width: 1500px; }
.statement > p:first-child { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.statement h2, .section-heading h2, .worlds h2, .latency-section h2, .notes-section h2 { margin-bottom: 36px; font-size: clamp(3rem, 7vw, 7.4rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 560; }
.statement h2 em { color: #12745e; font-style: normal; }
.statement p strong { color: #12745e; font-weight: 650; }
.statement > p:last-child { margin: 60px 0 0 auto; max-width: 720px; font-size: clamp(1.15rem, 1.8vw, 1.55rem); }
.statement-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin: 90px 0 0; padding-top: 34px; border-top: 1px solid var(--line); font-size: 1.04rem; }
.statement-notes p { margin: 0; }

.system-section { padding: 120px var(--pad); background: #cbdfe4; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; column-gap: 7vw; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p:last-child { max-width: 540px; font-size: 1.12rem; }
.pipeline { margin-top: 100px; }
.planning-showcase { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: center; margin-top: 34px; }
.planning-toolbar { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; }
.planning-toolbar button { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 17px; border: 1px solid rgba(22,105,87,.24); border-radius: 999px; background: rgba(255,255,255,.58); color: #176957; font: 700 .72rem ui-monospace, monospace; transition: transform .2s ease, background .2s ease; }
.planning-toolbar button:hover { transform: translateY(-2px); background: rgba(255,255,255,.9); }
.planning-toolbar button span { font-size: .62rem; }
.planning-toolbar p { max-width: 190px; margin: 0; color: #5c7773; font: 650 .68rem/1.55 ui-monospace, monospace; }
.tile-planning-demo { width: 100%; margin: 0; }
.tile-planning-demo img { width: 100%; }
.stage { display: grid; grid-template-columns: 70px 1fr minmax(320px, 42%); gap: 32px; align-items: center; min-height: 360px; padding: 48px; border: 1px solid rgba(4,27,32,.28); background: rgba(255,255,255,.22); }
.stage-index { align-self: start; font: 700 .8rem ui-monospace, monospace; }
.stage-label { margin-bottom: 8px; font: 700 .72rem ui-monospace, monospace; letter-spacing: .13em; }
.stage h3 { margin-bottom: 16px; font-size: clamp(2.1rem, 4vw, 4.3rem); line-height: 1.08; letter-spacing: -.01em; font-weight: 560; }
.stage p:last-child { max-width: 560px; }
.flow-arrow { height: 72px; display: grid; place-items: center; font-size: 2rem; }

.macro-map, .micro-grid, .code-window { position: relative; min-height: 260px; background: #dce9e4; border: 1px solid rgba(0,0,0,.2); overflow: hidden; }
.stage-real { margin: 0; background: transparent; }
.stage-real img { width: 100%; height: auto; aspect-ratio: 1200 / 760; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 46px rgba(33,63,61,.12); }
.state-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.state-pills span { padding: 6px 9px; border: 1px solid rgba(29,77,69,.18); border-radius: 999px; background: rgba(255,255,255,.48); color: #315c55; font: 650 .56rem ui-monospace, monospace; }
.stage-real figcaption { padding-top: 10px; color: #506765; font: 600 .59rem ui-monospace, monospace; line-height: 1.45; }
.stage-real figcaption b { color: #176957; }
.stage-real figcaption span { padding: 0 5px; color: #91a29f; }
.stage-code-real img { object-position: left center; }
.macro-map { background: linear-gradient(150deg,#b9cf9a 0 48%,#d1c18c 49% 76%,#91b5bd 77%); }
.macro-map i { position: absolute; display: block; }
.macro-map .water { left: 0; bottom: 0; width: 75%; height: 28%; background: #5f94a5; clip-path: polygon(0 62%,35% 22%,60% 55%,100% 10%,100% 100%,0 100%); }
.macro-map .ridge { right: 12%; top: 0; width: 28%; height: 70%; background: #626c5d; clip-path: polygon(50% 0,100% 55%,68% 48%,85% 100%,40% 62%,0 100%,22% 35%); }
.macro-map .city { width: 80px; height: 66px; left: 45%; top: 36%; background: repeating-linear-gradient(0deg,#374745 0 7px,#89a39c 7px 11px); }
.macro-map .town { width: 43px; height: 35px; left: 24%; top: 29%; background: #d67b55; }
.macro-map .route { left: 15%; top: 46%; width: 67%; height: 7px; background: white; transform: rotate(12deg); transform-origin: left center; }
.micro-grid { background-color: #b9c893; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 25% 25%; }
.micro-grid i, .micro-grid span { position: absolute; display: block; }
.road-x { left: 0; right: 0; top: 43%; height: 18%; background: #50575a; }
.road-y { top: 0; bottom: 0; left: 53%; width: 14%; background: #50575a; }
.micro-grid span:not(.park) { background: #d6b49b; box-shadow: inset 0 0 0 3px #7d4d3e; }
.b1 { left: 8%; top: 8%; width: 34%; height: 26%; }.b2 { right: 6%; top: 10%; width: 20%; height: 25%; }.b3 { left: 8%; bottom: 8%; width: 34%; height: 24%; }
.micro-grid .park { right: 6%; bottom: 8%; width: 24%; height: 24%; border-radius: 50%; background: repeating-radial-gradient(circle,#315b42 0 5px,#76a56e 6px 15px); }
.code-window { padding: 28px; background: #0f181a; color: #d6fff1; font-family: ui-monospace, monospace; }
.code-window span { display: block; margin-bottom: 32px; color: var(--acid); }
.code-window code { display: block; margin: 12px 0; color: #b8c8c4; }

.worlds { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 820px; background: #101616; color: white; }
.worlds-copy { padding: 120px var(--pad); align-self: center; }
.worlds h2 { font-size: clamp(3rem, 5vw, 6rem); }
.worlds-copy > p:not(.eyebrow) { color: rgba(255,255,255,.66); font-size: 1.1rem; }
.biome-route { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); margin-top: 42px; border: 1px solid rgba(255,255,255,.24); overflow: hidden; }
.biome { min-height: 112px; padding: 16px 12px; display: flex; flex-direction: column; justify-content: flex-end; color: #09100f; border-right: 1px solid rgba(0,0,0,.22); }
.biome:last-child { border-right: 0; }
.biome b { font-size: .82rem; }
.biome span { margin-top: 2px; font: 600 .59rem ui-monospace, monospace; text-transform: uppercase; opacity: .62; }
.city-biome { background: repeating-linear-gradient(90deg,#c8d1cf 0 8px,#889693 8px 10px); }
.rural-biome { background: linear-gradient(145deg,#bfd08c 0 42%,#d0b874 43% 66%,#93aa70 67%); }
.forest-biome { background: radial-gradient(circle at 28% 35%,#8eb173 0 10%,transparent 11%),radial-gradient(circle at 66% 58%,#537c56 0 19%,transparent 20%),#759865; }
.desert-biome { background: linear-gradient(155deg,#e3c381,#b98455); }
.coast-biome { background: linear-gradient(145deg,#cfbd82 0 34%,#65a8b6 35% 62%,#286e88 63%); }
.route-note { display: flex; gap: 14px; margin-top: 11px; font-size: .75rem !important; }
.route-note span { flex: 0 0 auto; color: var(--acid); font: 700 .65rem ui-monospace, monospace; letter-spacing: .04em; }
.plain-list { list-style: none; padding: 0; margin: 54px 0 0; border-top: 1px solid rgba(255,255,255,.2); }
.plain-list li { display: grid; grid-template-columns: 85px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.plain-list span { color: var(--acid); font: 700 .72rem ui-monospace, monospace; text-transform: uppercase; }
.forest-media { min-height: 820px; }

.interaction-section { padding: 120px var(--pad); }
.interaction-heading { margin-bottom: 80px; }
.interaction-demo { display: grid; grid-template-columns: minmax(330px, .75fr) 1.25fr; min-height: 640px; border: 1px solid var(--line); }
.object-panel { padding: clamp(28px, 4vw, 56px); background: #d7e8eb; }
.panel-top { display: flex; justify-content: space-between; font: 700 .72rem ui-monospace, monospace; letter-spacing: .1em; }
.live-dot { color: #08795d; }
.object-tabs { display: flex; gap: 8px; margin: 50px 0 32px; flex-wrap: wrap; }
.object-tabs button { cursor: pointer; border: 1px solid #607376; background: transparent; padding: 10px 13px; font: inherit; color: inherit; }
.object-tabs button.active { background: #11282c; color: white; }
.state-card { background: #11282c; color: white; padding: 24px; }
.state-card div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.state-card div:last-child { border: 0; }
.state-card span { color: var(--acid); font: 700 .68rem ui-monospace, monospace; }
.state-card code { color: white; overflow-wrap: anywhere; }
.object-panel > p { margin: 32px 0 0; max-width: 500px; }
.interaction-media { min-height: 640px; }

.npc-section { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 780px; background: #152325; color: white; }
.npc-copy { padding: 120px var(--pad); align-self: center; }
.npc-copy h2 { max-width: 820px; margin-bottom: 38px; font-size: clamp(3rem, 5.5vw, 6.5rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 560; }
.npc-copy > p:not(.eyebrow) { max-width: 720px; color: rgba(255,255,255,.68); font-size: 1.08rem; }
.npc-reaction { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 58px; border-top: 1px solid rgba(255,255,255,.2); }
.npc-reaction article { position: relative; min-height: 160px; padding: 22px 18px 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.npc-reaction article + article { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); }
.npc-reaction article::before { content: ""; position: absolute; top: -4px; left: 0; width: 54px; height: 7px; border-radius: 4px; background: var(--acid); opacity: .22; }
.npc-reaction article + article::before { left: 18px; }
.npc-reaction span, .npc-reaction b, .npc-reaction small { display: block; }
.npc-reaction span { color: var(--acid); font: 700 .64rem ui-monospace, monospace; letter-spacing: .08em; }
.npc-reaction b { margin-top: 26px; font-size: 1rem; font-weight: 600; }
.npc-reaction small { margin-top: 8px; color: rgba(255,255,255,.48); font: 600 .65rem/1.45 ui-monospace, monospace; }
.npc-lab-link { display: inline-flex; margin-top: 34px; padding-bottom: 5px; color: var(--acid); border-bottom: 1px solid currentColor; text-decoration: none; font: 700 .72rem ui-monospace, monospace; letter-spacing: .04em; }
.npc-media { min-height: 780px; background: #e4e4d2; }
.npc-media img { object-position: 72% center; }

.latency-section { padding: 120px var(--pad); background: #def394; }
.latency-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; }
.latency-section h2 { font-size: clamp(3rem, 5vw, 6rem); }
.latency-note { max-width: 440px; margin: 18px 0 0; font-size: 1rem; line-height: 1.6; }
.latency-chart { align-self: center; }
.timing-details { margin-top: 22px; font-size: .78rem; max-width: 680px; }
.timing-details summary { cursor: pointer; text-underline-offset: 3px; text-decoration: underline; }
.timing-details p { margin: 12px 0 0; line-height: 1.6; }
.latency-bar { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 18px 0 24px; border-bottom: 1px solid rgba(0,0,0,.25); }
.latency-bar span { position: absolute; bottom: 0; left: 0; height: 6px; width: var(--w); background: #0b6d58; }
.latency-bar.faint span { background: rgba(0,0,0,.22); }
.latency-bar b { font-weight: 520; }.latency-bar strong { font-family: ui-monospace, monospace; }
.latency-note { grid-column: 2; max-width: 700px; margin-top: 26px; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px var(--pad); background: var(--ink); color: rgba(255,255,255,.65); font: 700 .7rem ui-monospace, monospace; letter-spacing: .08em; }
.footer-link { color: inherit; text-decoration: none; }

@media (max-width: 900px) {
  .nav nav { display: none; }
  .hero-copy { min-height: 70vh; }
  .metric-row { grid-template-columns: 1fr; gap: 22px; }
  .hero-media { aspect-ratio: 4 / 3; }
  .section-heading, .worlds, .interaction-demo, .npc-section, .latency-section, .statement-notes { grid-template-columns: 1fr; }
  .section-heading > p:last-child { margin-top: 30px; }
  .planning-showcase { grid-template-columns: 1fr; margin-top: 34px; }
  .planning-toolbar { align-items: flex-start; flex-direction: column; padding: 0 0 24px; }
  .tile-planning-demo { margin-bottom: 50px; }
  .stage { grid-template-columns: 40px 1fr; padding: 28px; }
  .stage > :last-child { grid-column: 1 / -1; }
  .worlds-copy { padding-top: 100px; padding-bottom: 80px; }
  .biome-route { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; }
  .biome { min-height: 96px; }
  .forest-media { min-height: 64vh; }
  .interaction-media { min-height: 420px; }
  .npc-reaction { grid-template-columns: 1fr; }
  .npc-reaction article + article { padding-left: 0; border-left: 0; }
  .npc-reaction article + article::before { left: 0; }
  .npc-media { min-height: 520px; }
  .latency-note { grid-column: 1; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .fullbleed-media img { transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
  .fullbleed-media:hover img { transform: scale(1.015); }
  .npc-reaction article::before { animation: npc-step 4.8s ease-in-out infinite; }
  .npc-reaction article:nth-child(2)::before { animation-delay: 1.6s; }
  .npc-reaction article:nth-child(3)::before { animation-delay: 3.2s; }
}

@keyframes npc-step {
  0%, 70%, 100% { opacity: .2; transform: scaleX(.5); transform-origin: left; }
  12%, 36% { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* Recorded demo: uncropped media, no autoplay. */
html { scroll-padding-top: 28px; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #101616; object-fit: contain; }
button:focus-visible, a:focus-visible, video:focus-visible { outline: 3px solid #19987b; outline-offset: 5px; }
.hero { min-height: auto; }
.hero-copy { min-height: auto; padding-top: clamp(130px, 12vw, 175px); padding-bottom: 64px; }
.hero h1 { font-size: clamp(3.5rem, 8.5vw, 8rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 12px; }
.primary-link { display: inline-flex; gap: 36px; padding: 14px 22px; color: var(--ink); background: var(--acid); text-decoration: none; font-weight: 650; }
.hero-actions > span { color: #aab5b0; font: .72rem ui-monospace, monospace; }
.link-icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; vertical-align: middle; }
.nav nav a, .primary-link, .repo-link { display: inline-flex; align-items: center; }
.nav nav a { gap: 7px; }
.hero-actions .primary-link { gap: 12px; }
.hero-actions .primary-link > span { margin-left: 18px; }
.repo-link { gap: 9px; color: #c4d5ce; text-decoration: none; font-size: .88rem; padding: 12px 0; }
.repo-link:hover { color: var(--acid); }
.demo-section { background: var(--ink); color: white; padding: 38px var(--pad) 64px; }
.demo-heading { display: grid; grid-template-columns: 1fr .65fr; gap: 60px; align-items: end; margin-bottom: 36px; }
.demo-heading h2, .return-section h2 { font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 560; margin-bottom: 0; }
.demo-heading > p { max-width: 460px; color: #aab5b0; margin-bottom: 0; }
.tour-video { border: 1px solid #34413b; }
.video-options { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.quality-switch, .video-downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.quality-switch button { padding: 9px 15px; background: transparent; color: #c4cdc8; border: 1px solid #34413b; font: inherit; font-size: .8rem; cursor: pointer; }
.quality-switch button[aria-pressed="true"] { color: #101616; background: var(--acid); border-color: var(--acid); }
.video-downloads a { color: #bdcdc5; font-size: .75rem; text-underline-offset: 4px; }
.demo-chapters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #34413b; }
.demo-chapters button { font: inherit; font-size: .78rem; line-height: 1.4; padding: 19px 12px; background: transparent; border: 0; border-right: 1px solid #34413b; color: #c4cdc8; text-align: left; cursor: pointer; }
.demo-chapters button:last-child { border-right: 0; }
.demo-chapters button span { display: block; margin-bottom: 9px; color: var(--acid); font: .68rem ui-monospace, monospace; }
.demo-chapters button:hover, .demo-chapters button[aria-current="true"] { background: #20372e; color: white; }
.demo-footnote { display: flex; justify-content: space-between; gap: 32px; color: #a0aaa5; font-size: .73rem; margin-top: 18px; }
.demo-footnote p { max-width: 720px; margin: 0; }
.demo-footnote a { flex-shrink: 0; text-underline-offset: 4px; }
.playback-status { color: var(--acid); font-size: .8rem; margin: 0; }
.playback-status:not(:empty) { margin-top: 14px; }
.worlds, .npc-section { grid-template-columns: 1fr; min-height: 0; }
.worlds > *, .npc-section > * { min-width: 0; }
.worlds-copy, .npc-copy { padding: 80px var(--pad) 48px; }
.worlds-copy > p, .npc-copy > p { max-width: 850px; }
.worlds h2, .npc-copy h2 { max-width: 1000px; }
.biome-route, .plain-list { max-width: 950px; }
.forest-media, .npc-media { margin: 0 var(--pad) 60px; min-height: 0; background: #101616; overflow: visible; }
.forest-media figcaption, .npc-media figcaption { position: static; padding: 14px 0 0; max-width: none; background: transparent; backdrop-filter: none; }
.route-gallery { background: #101616; color: white; padding: 0 var(--pad) 90px; }
.gallery-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.gallery-heading > p:last-child { color: #aab5b0; }
.biome-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.biome-frames figure, .edit-pair figure, .return-section figure { margin: 0; min-width: 0; }
.biome-frames figure:first-child { grid-column: span 2; }
.biome-frames img { aspect-ratio: 16 / 9; height: auto; object-fit: contain; }
.biome-frames figcaption, .edit-pair figcaption { padding: 14px 0; font-size: .88rem; }
.biome-frames figcaption span, .edit-pair figcaption span { display: block; font: .65rem ui-monospace, monospace; letter-spacing: .1em; color: var(--acid); margin-bottom: 7px; }
.interaction-heading { margin-bottom: 42px; }
.edit-showcase blockquote { max-width: 1000px; margin: 0 0 38px; padding: 24px 30px; border-left: 3px solid #168268; background: #e1e8dd; font-size: clamp(1.1rem, 2vw, 1.65rem); line-height: 1.45; }
.edit-showcase cite { display: block; margin-top: 14px; font: .7rem ui-monospace, monospace; color: #526456; }
.excerpt-media { margin: 0 0 32px; }
.excerpt-media figcaption, .return-section figcaption { margin-top: 12px; font-size: .78rem; color: #57635a; }
.edit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edit-pair img { height: auto; }
.edit-pair figcaption span { color: #12745e; }
.media-note { font-size: .75rem; color: #57635a; max-width: 850px; margin: 10px 0 0; }
.npc-reaction { max-width: 1000px; margin-top: 32px; }
.chapter-link { background: none; color: inherit; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 6px; cursor: pointer; font: 650 .78rem ui-monospace, monospace; }
.npc-lab-link { color: var(--acid); }
.return-section { padding: 100px var(--pad); display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: center; }
.return-section h2 { margin-bottom: 28px; }
.return-section .chapter-link { margin-top: 16px; color: #12745e; }
.return-section img { height: auto; }
@media (max-width: 900px) {
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-heading, .return-section { grid-template-columns: 1fr; gap: 28px; }
  .demo-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo-chapters button { border-bottom: 1px solid #34413b; }
  .demo-footnote { flex-direction: column; gap: 12px; }
  .gallery-heading { display: block; }
  .biome-frames { grid-template-columns: 1fr 1fr; gap: 18px; }
  .biome-frames figure:first-child { grid-column: auto; }
  .biome-frames figure:last-child { grid-column: span 2; }
  .edit-pair { grid-template-columns: 1fr; }
  .interaction-section { padding: 70px var(--pad); }
}
@media (max-width: 520px) {
  .biome-route { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .biome { padding: 10px 5px; }
  .biome b { font-size: .7rem; }
  .biome span { font-size: .5rem; overflow-wrap: anywhere; }
  .route-note { flex-direction: column; gap: 6px; }
  .hero-copy { padding-top: 115px; }
  .metric-row strong { font-size: 1.3rem; }
  .demo-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biome-frames { grid-template-columns: 1fr; }
  .biome-frames figure:last-child { grid-column: auto; }
  .demo-heading h2, .return-section h2 { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* One media focal point per section. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.demo-heading { grid-template-columns: 1fr; }
.system-section > .section-heading h2 { grid-column: 1 / -1; }
.statement { padding-top: 90px; padding-bottom: 90px; }
.statement > p:last-child { margin-top: 28px; }
.capability-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.capability-row strong { font-size: clamp(1.1rem, 1.85vw, 1.8rem); line-height: 1.25; }
.worlds-copy { padding-bottom: 30px; }
.biome-showcase { padding: 0 var(--pad) 70px; }
.landscape-thumbnails { position: relative; height: clamp(230px, 26vw, 390px); overflow: hidden; background: #101616; }
.landscape-thumbnails figure { position: absolute; top: 0; bottom: 0; width: 24%; clip-path: polygon(16.67% 0, 100% 0, 83.33% 100%, 0 100%); }
.landscape-thumbnails figure:nth-child(1) { left: 0; width: 22%; clip-path: polygon(0 0, 100% 0, 81.82% 100%, 0 100%); }
.landscape-thumbnails figure:nth-child(2) { left: 18%; }
.landscape-thumbnails figure:nth-child(3) { left: 38%; }
.landscape-thumbnails figure:nth-child(4) { left: 58%; }
.landscape-thumbnails figure:nth-child(5) { left: 78%; width: 22%; clip-path: polygon(18.18% 0, 100% 0, 100% 100%, 0 100%); }
.biome-showcase .landscape-thumbnails img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.landscape-thumbnails figure:nth-child(1) img { object-position: 48% center; }
.landscape-thumbnails figure:nth-child(2) img { object-position: 58% center; }
.landscape-thumbnails figure:nth-child(3) img { object-position: 45% center; }
.landscape-thumbnails figure:nth-child(4) img { object-position: 63% center; }
.landscape-thumbnails figure:nth-child(5) img { object-position: 40% center; }
.landscape-thumbnails figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 65%, rgba(0,0,0,.65)); pointer-events: none; }
.biome-showcase .landscape-thumbnails figcaption { position: absolute; z-index: 1; left: 15%; bottom: 18px; margin: 0; color: white; font-size: clamp(.68rem, 1.1vw, 1rem); font-weight: 600; }
@media (max-width: 600px) {
  .landscape-thumbnails { height: 190px; }
  .biome-showcase .landscape-thumbnails figcaption { font-size: .6rem; left: 10%; bottom: 12px; }
}
.biome-showcase figure { margin: 0; }
.biome-showcase img { height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #101616; }
.biome-showcase figcaption { margin-top: 12px; color: #bdcdc5; font-size: .8rem; }
.biome-selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.biome-selector button { padding: 10px 22px; border: 1px solid #4e6259; background: transparent; color: #cbd7d0; cursor: pointer; font: inherit; font-size: .85rem; }
.biome-selector button[aria-pressed="true"] { color: #101616; background: var(--acid); border-color: var(--acid); }
.revisit-note { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #34473e; padding-top: 22px; margin-top: 24px; }
.revisit-note p { margin: 0; max-width: 720px; color: #aabbb2; font-size: .9rem; }
.revisit-note button { color: var(--acid); flex-shrink: 0; }
.interaction-section, .npc-section { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); padding: 76px var(--pad); align-items: center; }
.interaction-heading { display: block; margin: 0; }
.interaction-heading h2, .npc-copy h2 { font-size: clamp(2.5rem, 4.2vw, 4.6rem); line-height: 1.04; margin-bottom: 24px; }
.interaction-heading > p:last-child, .npc-copy > p:not(.eyebrow) { font-size: 1rem; margin-bottom: 0; }
.excerpt-media { margin: 0; }
.npc-copy { padding: 0; }
.npc-media { margin: 0; }
.npc-lab-link { margin-top: 24px; }
@media (max-width: 800px) {
  .capability-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .interaction-section, .npc-section { grid-template-columns: 1fr; padding: 56px var(--pad); gap: 28px; }
  .revisit-note { flex-direction: column; align-items: flex-start; gap: 16px; }
  .biome-selector button { padding: 9px 13px; }
}

.demo-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #34413b; border-bottom: 0; }
.demo-library button { display: grid; gap: 8px; min-height: 84px; padding: 17px 20px; border: 0; border-right: 1px solid #34413b; background: #141c19; color: #d9e3de; text-align: left; cursor: pointer; }
.demo-library button:last-child { border-right: 0; }
.demo-library button span { color: #8da098; font: .68rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.demo-library button strong { font: 600 1rem/1.25 Inter, ui-sans-serif, sans-serif; }
.demo-library button:hover, .demo-library button[aria-selected="true"] { background: #20372e; color: white; }
.demo-library button[aria-selected="true"] span { color: var(--acid); }
.demo-chapters[hidden] { display: none; }
@media (max-width: 520px) {
  .demo-library { grid-template-columns: 1fr; }
  .demo-library button { min-height: 0; border-right: 0; border-bottom: 1px solid #34413b; }
  .demo-library button:last-child { border-bottom: 0; }
}