/* October Harness. A developer page in the family of lantern.october.dev/agents:
   the same night palette, plain sans headlines, mono details, rounded dark cards
   and quiet one-time motion. Harness keeps its own hero video, the CLI wordmark's
   gold-to-rust ramp and a terminal-first showcase. Loaded only by harness.html,
   after the shared site-navigation.css. */
:root {
  --hn-night: #0c0e0d;
  --hn-night-2: #121513;
  --hn-night-3: #191d1a;
  --hn-night-4: #212622;
  --hn-line: #2a302b;
  --hn-line-2: #39403a;
  --hn-text: #ece9e1;
  --hn-muted: #a6a69b;
  --hn-faint: #8c8d82;
  --hn-gold: #ffc452;
  --hn-amber: #ff9a22;
  --hn-rust: #e96904;
  --hn-green: #8fd19a;
  --hn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --hn-ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--hn-text);
  background: var(--hn-night);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--hn-night); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, pre, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: #ffb03b55; }
:focus-visible { outline: 2px solid var(--hn-gold); outline-offset: 4px; }
code, pre, kbd { font-family: var(--hn-mono); }

.skip-link { position: fixed; z-index: 60; top: 12px; left: 12px; padding: 12px 18px; border-radius: 8px; background: var(--hn-text); color: var(--hn-night); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.hn-wrap { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.hn-wide { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.ac-nav.hn-nav { width: min(1120px, calc(100% - 64px)); }
.hn-nav .ac-brand img { border-radius: 6px; }

/* Shared type */
.hn-eyebrow { color: var(--hn-gold); font: 600 11px/1.5 var(--hn-mono); letter-spacing: .1em; text-transform: uppercase; }
.hn-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.hn-intro h2, .hn-example h2, .hn-faq h2, .hn-closing h2 { margin-top: 16px; font-size: clamp(34px, 4.3vw, 52px); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.hn-intro > p:last-child { max-width: 600px; margin: 20px auto 0; color: var(--hn-muted); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.hn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--hn-text); font-size: 14px; font-weight: 500; text-decoration-color: #ece9e155; }
.hn-link:hover { text-decoration-color: currentColor; }
.hn-dim { color: var(--hn-faint); }

/* Hero: the existing video, darkened into the night page */
.hn-hero { position: relative; isolation: isolate; overflow: clip; min-height: min(100svh, 900px); padding: 164px 0 calc(var(--hn-overlap) + 72px); color: var(--hn-text); background: #1b241e; --hn-overlap: clamp(90px, 12vw, 170px); }
.hero-backdrop { position: absolute; inset: 0; z-index: -1; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 52% at 50% 42%, #0c0e0d9e, #0c0e0d33 72%),
  linear-gradient(180deg, #0c0e0dcc 0%, #0c0e0d40 26%, #0c0e0d66 58%, #0c0e0de6 86%, var(--hn-night) 100%); }
.hn-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hn-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #efe7d6; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 10px #0009; }
.hn-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hn-gold); box-shadow: 0 0 0 4px #ffc45233; }
.hn-hero h1 { max-width: 980px; margin-top: 24px; font-size: clamp(44px, 6.4vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 2px 30px #0c0e0d80; }
.hn-hero h1 em { font-style: normal; color: var(--hn-gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hn-hero h1 em { background: linear-gradient(95deg, #ffd06b 0%, var(--hn-amber) 55%, #f7820e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
}
.hn-hero__intro { max-width: 600px; margin-top: 26px; color: #e1ddd2; font-size: 18px; line-height: 1.6; text-wrap: pretty; text-shadow: 0 1px 14px #0c0e0dcc; }
.hn-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hn-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; background: linear-gradient(180deg, #ffd06b, var(--hn-amber)); box-shadow: inset 0 1px 0 #fff6, 0 10px 30px -10px #ff9a2299; color: #1d1305; font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--hn-ease), filter 160ms ease; }
.hn-button svg { width: 17px; height: 17px; }
.hn-button:active { transform: scale(.97); }
.hn-hero__note { margin-top: 22px; color: #d6d1c4; font-size: 13px; line-height: 1.7; text-shadow: 0 1px 10px #0c0e0dcc; }
.hn-hero__note a { color: inherit; white-space: nowrap; }

/* GitHub button (same markup and label rules as the other product pages) */
.github-button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; min-height: 56px; padding: 0 19px; border: 1px solid #ffffff33; border-radius: 999px; background: #0c0e0dcc; box-shadow: inset 0 1px 0 #ffffff0d; color: var(--hn-text); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 160ms var(--hn-ease), border-color 160ms ease; }
.github-mark { width: 16px; height: 16px; flex-shrink: 0; }
.github-star { display: flex; align-items: center; align-self: stretch; margin-left: 3px; padding-left: 12px; border-left: 1px solid #ffffff26; color: var(--hn-gold); }
.github-star svg { width: 15px; height: 15px; }
.github-button:active { transform: scale(.97); }

.hero-video-toggle { position: absolute; z-index: 2; right: 24px; bottom: calc(var(--hn-overlap) + 24px); display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 8px 12px; border: 1px solid #ffffff33; border-radius: 8px; background: #0c0e0dcc; color: var(--hn-text); font-size: 11px; line-height: 1.4; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Showcase: the terminal rises over the hero's lower edge */
.hn-showcase-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--hn-overlap, 130px)); }
.hn-hero + .hn-showcase-wrap { --hn-overlap: clamp(90px, 12vw, 170px); }
.hn-showcase figcaption { margin-top: 18px; color: var(--hn-faint); font-size: 13px; text-align: center; }
.hn-term { position: relative; border: 1px solid var(--hn-line-2); border-radius: 16px; background: linear-gradient(180deg, #151916f7, #101311fa); box-shadow: 0 0 0 6px #ffffff08, 0 50px 120px -40px #ff9a2240, 0 40px 80px -40px #000; font-family: var(--hn-mono); }
.hn-term__bar { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--hn-line); color: var(--hn-muted); font-size: 12px; }
.hn-term__bar small, .hn-window__bar small { margin-left: auto; padding: 3px 8px; border: 1px solid var(--hn-line-2); border-radius: 99px; color: var(--hn-faint); font-size: 10px; letter-spacing: .04em; }
.hn-sep { color: var(--hn-faint); }
.hn-term__body { padding: clamp(22px, 3.4vw, 40px) clamp(20px, 4vw, 48px) 28px; font-size: clamp(12px, 1.25vw, 15px); line-height: 1.6; }
.hn-term__wordmark { width: min(420px, 70%); height: auto; margin-bottom: clamp(18px, 2.6vw, 30px); }
.hn-term__prompt { color: var(--hn-text); }
.hn-term__prompt b, .hn-term__input b, .hn-ask__prompt b, .hn-tree__node b { margin-right: 10px; color: var(--hn-gold); font-weight: 400; }
.hn-term__reply { margin-top: 14px; color: var(--hn-muted); }
.hn-term__reply b { margin-right: 10px; color: var(--hn-amber); font-weight: 400; }
.hn-term__steps { display: grid; gap: 8px; margin-top: 18px; max-width: 760px; }
.hn-term__steps li, .hn-ask__row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 9px 14px; border: 1px solid var(--hn-line); border-radius: 9px; background: #ffffff05; color: #d4d2c8; }
.hn-term__steps code, .hn-ask__row code { flex-shrink: 0; width: 44px; color: var(--hn-gold); }
.hn-term__steps span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.hn-term__steps em { margin-left: 8px; color: var(--hn-green); font-style: normal; }
.hn-term__steps i, .hn-ask__row i, .hn-menu__row i { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: #8fd19a24; color: var(--hn-green); }
.hn-term__steps svg, .hn-ask__row svg, .hn-menu__row svg { width: 12px; height: 12px; }
.hn-term__result { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--hn-green); }
.hn-term__result svg { width: 15px; height: 15px; }
.hn-term__input { display: flex; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--hn-line-2); }
.hn-caret { width: 9px; height: 1.2em; background: var(--hn-text); opacity: .8; }
.hn-term__status { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-top: 1px solid var(--hn-line); border-radius: 0 0 16px 16px; background: #0c0e0d; color: var(--hn-faint); font-size: 11px; }
.hn-term__status span:nth-child(2) { color: var(--hn-gold); }
.hn-term__saved { margin-left: auto; }
.hn-term__note { position: absolute; right: clamp(-28px, -2vw, -12px); bottom: 86px; display: flex; gap: 12px; width: min(340px, 42%); padding: 14px 16px; border: 1px solid var(--hn-line-2); border-radius: 12px; background: #1c211df5; box-shadow: 0 24px 50px -24px #000, 0 0 0 1px #ffffff06; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transform: rotate(1.5deg); }
.hn-term__note img { width: 28px; height: 28px; border-radius: 7px; }
.hn-term__note strong { display: block; color: var(--hn-text); font-size: 13px; font-weight: 600; }
.hn-term__note strong span { color: var(--hn-faint); font-weight: 400; }
.hn-term__note p { margin-top: 4px; color: var(--hn-muted); font-size: 13px; line-height: 1.5; }

/* Model sources strip */
.hn-providers { padding: 88px 0 20px; text-align: center; }
.hn-providers h2 { color: var(--hn-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.hn-providers ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 960px; margin: 24px auto 0; }
.hn-providers li { padding: 8px 15px; border: 1px solid var(--hn-line); border-radius: 99px; background: var(--hn-night-2); color: #d8d5cb; font-size: 13px; white-space: nowrap; }
.hn-providers li:first-child { border-color: #ffc45266; color: var(--hn-gold); }
.hn-providers p { margin-top: 22px; color: var(--hn-faint); font-size: 13px; line-height: 1.7; }
.hn-providers p a { color: var(--hn-muted); }

/* Sections */
.hn-section { padding-block: 120px; }
.hn-section--band { border-block: 1px solid var(--hn-line); background: var(--hn-night-2); }
.hn-grid { display: grid; gap: 22px; margin-top: 56px; }
.hn-grid--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hn-grid--features { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hn-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--hn-line); border-radius: 16px; background: var(--hn-night-2); }
.hn-section--band .hn-card { background: var(--hn-night); }
.hn-card--wide { grid-column: span 7; }
.hn-card--models, .hn-card--perms { grid-column: span 5; }
.hn-card--half { grid-column: span 6; }
.hn-card__copy { flex: 1; padding: 26px 28px 30px; }
.hn-card__copy h3 { font-size: clamp(22px, 2.2vw, 27px); font-weight: 600; line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.hn-card__copy p { margin-top: 12px; color: var(--hn-muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.hn-grid--steps .hn-card__copy h3 { font-size: 22px; }
.hn-step { display: block; margin-bottom: 14px; color: var(--hn-gold); font: 12px var(--hn-mono); letter-spacing: .08em; }

/* Scenes: decorative, dotted, complete without JavaScript */
.hn-scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 300px; padding: 30px 7%; overflow: hidden; border-bottom: 1px solid var(--hn-line); background-color: var(--hn-night-3); background-image: radial-gradient(#ffffff14 .7px, transparent .8px); background-size: 17px 17px; color: var(--hn-text); font-size: 12px; line-height: 1.45; }
.hn-grid--steps .hn-scene { height: 270px; padding-block: 22px; gap: 14px; }
.hn-scene:has(.hn-scene-label) { justify-content: flex-start; padding-top: 52px; }
.hn-scene:has(.hn-scene-foot) { padding-bottom: 46px; }
.hn-scene-label { position: absolute; top: 18px; left: 7%; right: 7%; display: flex; justify-content: space-between; gap: 12px; color: var(--hn-faint); font: 11px/1.5 var(--hn-mono); }
.hn-scene-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-scene-foot { position: absolute; bottom: 16px; left: 7%; right: 7%; color: var(--hn-faint); font: 11px/1.5 var(--hn-mono); text-align: center; }
.hn-dots { display: inline-flex; flex-shrink: 0; gap: 5px; }
.hn-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ec7d6a; }
.hn-dots i:nth-child(2) { background: #e9bd5f; }
.hn-dots i:nth-child(3) { background: #7fbf86; }
.hn-scene .hn-dots i { width: 6px; height: 6px; }
.hn-tilt-l { transform: rotate(-1deg); }
.hn-tilt-r { transform: rotate(1deg); }
.hn-window { width: 100%; max-width: 440px; overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-night-4); box-shadow: 0 18px 30px -18px #000; }
.hn-window__bar { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border-bottom: 1px solid var(--hn-line); color: var(--hn-faint); font-size: 10px; }
.hn-window__body { padding: 14px 15px; }
.hn-window--term { background: #0f1210; }
.hn-code { overflow: hidden; color: #d8d6cc; font: clamp(10px, 2.9cqw, 12px)/1.9 var(--hn-mono); text-overflow: ellipsis; white-space: nowrap; }
.hn-scene { container-type: inline-size; }
.hn-code b { margin-right: 8px; color: var(--hn-gold); font-weight: 400; }
.hn-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid #8fd19a55; border-radius: 99px; background: #8fd19a14; color: #c9e9cf; font-size: 11px; white-space: nowrap; }
.hn-pill svg { width: 13px; height: 13px; color: var(--hn-green); }

.hn-menu { width: 100%; max-width: 360px; overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-night-4); box-shadow: 0 18px 30px -18px #000; }
.hn-menu__head { display: flex; align-items: baseline; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--hn-line); color: var(--hn-faint); font-size: 11px; }
.hn-menu__head code { color: var(--hn-gold); font-size: 12px; }
.hn-menu__row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 13px; color: #cfccc2; font-size: 12px; }
.hn-menu__row + .hn-menu__row { border-top: 1px solid #ffffff08; }
.hn-menu__row kbd { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #ffffff10; color: var(--hn-muted); font-size: 10px; }
.hn-menu__row.is-picked { background: #ffc45214; color: var(--hn-text); box-shadow: inset 2px 0 0 var(--hn-gold); }
.hn-menu__row.is-picked kbd { background: var(--hn-gold); color: #1d1305; }
.hn-provider { min-width: 74px; color: var(--hn-faint); font: 11px var(--hn-mono); }
.hn-menu__row.is-picked .hn-provider { color: var(--hn-gold); }

.hn-ask { display: grid; gap: 8px; width: 100%; max-width: 400px; }
.hn-ask__prompt { padding: 12px 14px; border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-night-4); font: 12px/1.5 var(--hn-mono); }
.hn-ask__row { font: 11px/1.4 var(--hn-mono); }
.hn-ask__row code { width: 36px; }

.hn-ops { display: grid; gap: 7px; width: 100%; max-width: 560px; font: clamp(10px, 2.1cqw, 12px)/1.4 var(--hn-mono); }
.hn-ops li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 11px; border: 1px solid var(--hn-line); border-radius: 8px; background: var(--hn-night-4); color: #d8d6cc; white-space: nowrap; }
.hn-ops li.hn-ops__in { margin-left: 8%; background: #1c2326; border-color: #2c393d; }
.hn-ops img { width: 16px; height: 16px; border-radius: 4px; }
.hn-ops b { width: 56px; flex-shrink: 0; color: var(--hn-muted); font-weight: 500; }
.hn-ops code { overflow: hidden; min-width: 0; color: var(--hn-gold); text-overflow: ellipsis; }
.hn-ops__in code { color: #9fd0e0; }
.hn-ops q, .hn-ops span { overflow: hidden; min-width: 0; color: var(--hn-muted); text-overflow: ellipsis; }
.hn-ops q { flex: 1 1 0; quotes: "“" "”"; }
.hn-ops li.hn-ops__done { justify-content: center; border-color: #8fd19a40; background: #8fd19a10; color: #c9e9cf; }
.hn-ops__done svg { width: 13px; height: 13px; color: var(--hn-green); }
.hn-ops__done span { color: #c9e9cf; }

.hn-perms { width: 100%; max-width: 380px; overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-night-4); box-shadow: 0 18px 30px -18px #000; }
.hn-perms__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px; font-size: 11px; }
.hn-perms__row + .hn-perms__row { border-top: 1px solid #ffffff08; }
.hn-perms__head { min-height: 34px; color: var(--hn-faint); font: 10px var(--hn-mono); letter-spacing: .06em; text-transform: uppercase; }
.hn-perms__row code { color: var(--hn-text); font-size: 12px; }
.hn-perms__row code small { margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: #ffffff12; color: var(--hn-muted); font-size: 9px; }
.hn-perms__row.is-picked { background: #ffc45212; box-shadow: inset 2px 0 0 var(--hn-gold); }
.hn-perms__row.is-picked code { color: var(--hn-gold); }
.hn-perms .is-ask, .hn-perms .is-allow { justify-self: start; padding: 2px 9px; border-radius: 99px; font-size: 10px; }
.hn-perms .is-ask { background: #ffc4521f; color: #ffd98c; }
.hn-perms .is-allow { background: #8fd19a1f; color: #bfe6c6; }

.hn-tree { display: grid; gap: 8px; width: 100%; max-width: 520px; margin-top: 10px; font: 12px/1.4 var(--hn-mono); }
.hn-tree__node { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; padding: 9px 12px; border: 1px solid var(--hn-line); border-radius: 8px; background: var(--hn-night-4); color: #d8d6cc; white-space: nowrap; }
.hn-tree__node small { margin-left: auto; padding-left: 10px; color: var(--hn-faint); font-size: 10px; }
.hn-tree__branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hn-tree__node.is-current { border-color: #ffc45266; }
.hn-tree__node.is-fork { border-style: dashed; border-color: #9fd0e066; }
.hn-tree__node.is-fork small { color: #9fd0e0; }
.hn-tree__branches .hn-tree__node { overflow: hidden; text-overflow: ellipsis; }
.hn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hn-chips code { padding: 3px 9px; border: 1px solid var(--hn-line); border-radius: 99px; color: var(--hn-muted); font-size: 11px; }

.hn-sdk { display: inline-flex; gap: 8px; padding: 7px 13px; border: 1px solid #9fd0e055; border-radius: 99px; background: #9fd0e012; color: #cfe8f0; font: 11px var(--hn-mono); }
.hn-sdk code { color: #9fd0e0; }

.hn-packages { width: 100%; max-width: 400px; overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 10px; background: var(--hn-night-4); box-shadow: 0 18px 30px -18px #000; }
.hn-packages__head { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--hn-line); color: var(--hn-text); font-size: 12px; font-weight: 600; }
.hn-packages__head span { color: var(--hn-faint); font: 400 11px var(--hn-mono); }
.hn-packages p { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 13px; font: 11px var(--hn-mono); }
.hn-packages p + p { border-top: 1px solid #ffffff08; }
.hn-packages b { overflow: hidden; color: #d8d6cc; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.hn-packages code { color: var(--hn-gold); }
.hn-packages p span { flex-shrink: 0; color: var(--hn-faint); }

/* Quick facts */
.hn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.hn-facts li { padding-top: 16px; border-top: 1px solid var(--hn-line-2); color: var(--hn-muted); font-size: 14px; line-height: 1.6; }
.hn-facts strong { display: block; margin-bottom: 6px; color: var(--hn-text); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* Example and run modes */
.hn-example { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 72px; }
.hn-example h2 { font-size: clamp(32px, 3.6vw, 46px); }
.hn-example__copy > p:not(.hn-eyebrow) { max-width: 440px; margin: 20px 0 14px; color: var(--hn-muted); font-size: 16px; line-height: 1.65; }
.hn-modes { overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 14px; background: #0f1210; box-shadow: 0 40px 80px -40px #000, 0 30px 90px -50px #ff9a2233; }
.hn-modes__bar { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--hn-line); }
.hn-modes__title { color: var(--hn-faint); font-size: 12px; }
.hn-modes__tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hn-modes__tabs:not([hidden]) + .hn-modes__title { display: none; }
.hn-modes__tabs button { flex-shrink: 0; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--hn-muted); font-size: 12px; transition: background 160ms ease, color 160ms ease; }
.hn-modes__tabs button[aria-selected="true"] { background: #ffffff12; color: var(--hn-text); }
.hn-modes__tabs button:focus-visible { outline-offset: -2px; }
.hn-modes__panel { padding: 22px 24px 24px; }
.hn-modes__panel + .hn-modes__panel { border-top: 1px solid var(--hn-line); }
.hn-modes.is-enhanced .hn-modes__panel { min-height: 236px; border-top: 0; }
.hn-modes__label { margin-bottom: 10px; color: var(--hn-gold); font: 11px var(--hn-mono); letter-spacing: .08em; text-transform: uppercase; }
.hn-modes.is-enhanced .hn-modes__label { display: none; }
.hn-modes pre { overflow-x: auto; color: #e3e0d6; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.hn-modes__desc { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--hn-line-2); color: var(--hn-faint); font-size: 13px; }

/* FAQ */
.hn-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 80px; padding-block: 40px 120px; }
.hn-faq h2 { font-size: clamp(32px, 3.4vw, 42px); }
.hn-faq__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 18px; }
.hn-faq__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--hn-gold); font-size: 14px; text-decoration: none; }
.hn-faq__links a:hover { text-decoration: underline; }
.hn-faq__list details { border-bottom: 1px solid var(--hn-line); }
.hn-faq__list details:first-child { border-top: 1px solid var(--hn-line); }
.hn-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 0; color: var(--hn-text); font-size: 15px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.hn-faq__list summary::-webkit-details-marker { display: none; }
.hn-faq__list summary > span { flex-shrink: 0; color: var(--hn-gold); font-size: 22px; font-weight: 300; transition: transform 180ms var(--hn-ease); }
.hn-faq__list details[open] summary > span { transform: rotate(45deg); }
.hn-faq__list details p { padding: 0 32px 22px 0; color: var(--hn-muted); font-size: 14px; line-height: 1.75; }

/* Closing: install */
.hn-closing { position: relative; isolation: isolate; overflow: hidden; padding: 72px clamp(20px, 5vw, 64px) 64px; border: 1px solid var(--hn-line); border-radius: 22px; background: var(--hn-night-2); text-align: center; }
.hn-closing__glow { position: absolute; z-index: -1; top: -300px; left: 50%; width: 760px; height: 640px; transform: translateX(-50%); background: radial-gradient(closest-side, #ff9a2233, transparent); }
.hn-closing__mark { width: min(360px, 80%); height: auto; margin: 0 auto 28px; }
.hn-closing h2 { max-width: 760px; margin-inline: auto; }
.hn-closing__intro { max-width: 600px; margin: 20px auto 0; color: var(--hn-muted); font-size: 16px; line-height: 1.65; }
.hn-install { max-width: 640px; margin: 34px auto 0; overflow: hidden; border: 1px solid var(--hn-line-2); border-radius: 12px; background: #0b0d0c; text-align: left; }
.hn-install__bar { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--hn-line); color: var(--hn-faint); font-size: 12px; }
.hn-install__bar button { min-height: 34px; margin-left: auto; padding: 0 13px; border: 1px solid var(--hn-line-2); border-radius: 8px; background: #ffffff0a; color: var(--hn-text); font-size: 12px; transition: background 160ms ease; }
.hn-install pre { overflow-x: auto; padding: 18px 20px 20px; color: #e3e0d6; font-size: 14px; line-height: 1.85; }
.hn-copy-status { min-height: 22px; margin-top: 8px; color: var(--hn-green); font-size: 13px; }
.hn-closing__note { max-width: 600px; margin: 4px auto 0; color: var(--hn-faint); font-size: 13px; line-height: 1.7; }
.hn-closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 16px; }

/* Family and footer */
.hn-family { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; padding-block: 64px 48px; }
.hn-family h2 { color: var(--hn-faint); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.hn-family nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.hn-family a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--hn-muted); font-size: 13px; text-decoration: none; }
.hn-family a[aria-current] { color: var(--hn-gold); }
.hn-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-block: 26px 36px; border-top: 1px solid var(--hn-line); color: var(--hn-faint); font-size: 12px; }
.hn-footer__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--hn-text); font-size: 16px; font-weight: 600; letter-spacing: -.03em; text-decoration: none; }
.hn-footer__brand img { border-radius: 5px; }
.hn-footer p { flex: 1; min-width: 240px; text-align: center; line-height: 1.6; }
.hn-footer nav { display: flex; gap: 22px; }
.hn-footer nav a, .hn-footer p a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--hn-muted); }
.hn-footer nav a { text-decoration: none; }

/* Motion: one pass when a scene first scrolls into view, then it settles.
   harness.js sets data-motion; without it, or with reduced motion, scenes are stills. */
[data-motion="playing"] .hn-arrive, [data-motion="paused"] .hn-arrive { animation: hn-arrive 560ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: 300ms; }
[data-motion] .hn-term__reply { animation-delay: 750ms; }
[data-motion] .hn-term__steps li:nth-child(1) { animation-delay: 1250ms; }
[data-motion] .hn-term__steps li:nth-child(2) { animation-delay: 1800ms; }
[data-motion] .hn-term__steps li:nth-child(3) { animation-delay: 2350ms; }
[data-motion] .hn-term__result { animation-delay: 3000ms; }
[data-motion] .hn-term__note { animation-delay: 3700ms; animation-name: hn-note; }
[data-motion="playing"] .hn-caret, [data-motion="paused"] .hn-caret { animation: hn-caret 1s steps(1) 3400ms 6; }
[data-motion] .hn-ops li:nth-child(2) { animation-delay: 650ms; }
[data-motion] .hn-ops li:nth-child(3) { animation-delay: 1100ms; }
[data-motion] .hn-ops li:nth-child(4) { animation-delay: 1650ms; }
[data-motion] .hn-ops li:nth-child(5) { animation-delay: 2150ms; }
[data-motion] .hn-ops li:nth-child(6) { animation-delay: 2700ms; }
[data-motion] .hn-ask__row:nth-of-type(2) { animation-delay: 700ms; }
[data-motion] .hn-ask__row:nth-of-type(3) { animation-delay: 1150ms; }
[data-motion] .hn-pill { animation-delay: 1500ms; }
[data-motion] .hn-packages p:nth-of-type(2) { animation-delay: 550ms; }
[data-motion] .hn-packages p:nth-of-type(3) { animation-delay: 800ms; }
[data-motion] .hn-packages p:nth-of-type(4) { animation-delay: 1050ms; }
[data-motion] .hn-tree__node.is-fork { animation-delay: 900ms; }
[data-motion] .hn-sdk { animation-delay: 900ms; }
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state: paused !important; }
@keyframes hn-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hn-note { from { opacity: 0; transform: translateY(14px) rotate(1.5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes hn-caret { 50% { opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .hn-button:hover { filter: brightness(1.06); }
  .github-button:hover { border-color: #ffffff66; }
  .hn-modes__tabs button:hover { color: var(--hn-text); }
  .hn-install__bar button:hover { background: #ffffff16; }
  .hn-faq__list summary:hover { color: #fff; }
  .hn-family a:hover, .hn-footer nav a:hover { color: var(--hn-text); }
}

/* Large screens: the header, hero and showcase widen like Lantern's */
@media (min-width: 1440px) {
  .ac-nav.hn-nav, .hn-wide { width: min(1280px, calc(100% - 320px)); }
}
@media (max-width: 1100px) {
  .hn-card--wide, .hn-card--models, .hn-card--perms, .hn-card--half { grid-column: span 6; }
  .hn-term__note { right: 16px; bottom: 70px; }
}
@media (max-width: 1000px) {
  .hn-hero { min-height: 0; padding-top: 148px; }
  .hn-wrap, .hn-wide { width: calc(100% - 64px); }
  .hn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .hn-example, .hn-faq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hn-example__copy > p:not(.hn-eyebrow) { max-width: 600px; }
}
@media (max-width: 900px) {
  .hn-grid--steps { grid-template-columns: minmax(0, 1fr); }
  .hn-grid--steps .hn-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hn-grid--steps .hn-scene { height: auto; min-height: 230px; border-right: 1px solid var(--hn-line); border-bottom: 0; }
  .hn-grid--steps .hn-card__copy { align-self: center; }
  .hn-term__note { position: relative; right: auto; bottom: auto; width: auto; margin: 0 16px 16px; transform: none; }
  @keyframes hn-note { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .hn-wrap, .hn-wide { width: calc(100% - 40px); }
  .hn-hero { min-height: 0; padding-top: 128px; --hn-overlap: 64px; }
  .hn-hero + .hn-showcase-wrap { --hn-overlap: 64px; }
  .hero-poster, .hero-video { object-position: 50% 40%; }
  .hn-hero__eyebrow { font-size: 10px; letter-spacing: .12em; }
  .hn-hero h1 { margin-top: 20px; font-size: clamp(38px, 11vw, 56px); }
  .hn-hero__intro { font-size: 16px; }
  .hn-hero__actions { margin-top: 28px; }
  .hn-button, .github-button { min-height: 52px; }
  .hero-video-toggle { right: 12px; bottom: calc(var(--hn-overlap) + 14px); }
  .hn-term { border-radius: 12px; }
  .hn-term__bar { padding: 0 14px; }
  .hn-term__status { border-radius: 0 0 12px 12px; }
  .hn-term__status span:nth-child(3) { display: none; }
  .hn-term__steps li { gap: 10px; padding: 8px 10px; }
  .hn-term__steps code { width: 34px; }
  .hn-term__steps em { display: none; }
  .hn-providers { padding-top: 64px; }
  .hn-providers ul { gap: 8px; }
  .hn-providers li { padding: 6px 12px; font-size: 12px; }
  .hn-section { padding-block: 88px; }
  .hn-grid { margin-top: 40px; gap: 16px; }
  .hn-grid--features { grid-template-columns: minmax(0, 1fr); }
  .hn-card--wide, .hn-card--models, .hn-card--perms, .hn-card--half { grid-column: auto; }
  .hn-intro > p:last-child, .hn-closing__intro, .hn-example__copy > p:not(.hn-eyebrow) { font-size: 15px; }
  .hn-faq { padding-bottom: 88px; }
  .hn-closing { padding-top: 56px; border-radius: 16px; }
  .hn-install pre, .hn-modes pre { font-size: 12.5px; }
  .hn-modes__panel { padding: 18px; }
}
@media (max-width: 600px) {
  .hn-hero__eyebrow { display: block; max-width: 300px; text-wrap: balance; }
  .hn-live { display: none; }
  .hn-tree > .hn-tree__node:first-child { display: none; }
  .hn-tree { margin-top: 0; }
  .hn-grid--steps .hn-card { display: flex; }
  .hn-grid--steps .hn-scene { min-height: 0; height: 260px; border-right: 0; border-bottom: 1px solid var(--hn-line); }
  .hn-ops q { display: none; }
  .hn-scene { height: 280px; padding-inline: 18px; }
  .hn-card__copy { padding: 22px 22px 26px; }
  .hn-facts { grid-template-columns: minmax(0, 1fr); }
  .hn-tree__branches { grid-template-columns: minmax(0, 1fr); }
  .hn-ops li.hn-ops__in { margin-left: 5%; }
  .hn-footer { flex-direction: column; text-align: center; }
  .hn-footer p { min-width: 0; }
}
@media (max-width: 480px) {
  .hn-hero__actions { gap: 8px; }
  .hn-button { gap: 8px; padding-inline: 18px; font-size: 14px; }
  .github-button { gap: 7px; padding-inline: 13px; font-size: 13px; }
  .github-star { margin-left: 1px; padding-left: 9px; }
}
@media (max-width: 380px) {
  .github-label-prefix { display: none; }
  .hn-wrap, .hn-wide { width: calc(100% - 32px); }
  .hn-button { padding-inline: 15px; }
  .github-button { padding-inline: 12px; }
  .hn-term__bar small { display: none; }
}
@media (max-width: 340px) {
  .hn-button svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-motion] *, [data-motion] *::before, [data-motion] *::after { animation: none !important; transition: none !important; }
  .hn-button, .github-button, .hn-faq__list summary > span, .hn-modes__tabs button { transition: none; }
}