:root {
  color-scheme:dark;
  --bg:#0d1117;
  --surface:#151d26;
  --raised:#1d2935;
  --text:#edf3f7;
  --muted:#a9b9c7;
  --border:#647b8e;
  --accent:#77d9f5;
  --warning:#f3c47a;
  --success:#8cdbb1;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65}
a {
  color:inherit;
  text-underline-offset:5px}
a:hover {
  color:var(--accent)}
button,input,select {
  font:inherit}
button,a,input,select {
  touch-action:manipulation}
button {
  cursor:pointer}
button:disabled {
  cursor:not-allowed;
  opacity:.55}
button {
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:5px}
button:hover {
  border-color:var(--accent);
  color:var(--accent)}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline-offset:3px}
[hidden] {
  display:none!important}
img {
  max-width:100%;
  height:auto}
p {
  margin:0 0 22px}
h1,h2,h3 {
  line-height:1.07;
  letter-spacing:-.045em;
  margin:0 0 25px;
  font-weight:650}
h1 {
  font-size:clamp(58px,6.3vw,92px);
  line-height:1.01}
h1 span {
  color:var(--accent)}
h2 {
  font-size:clamp(36px,4vw,58px)}
h3 {
  font-size:25px;
  letter-spacing:-.025em}
.container {
  width:min(1200px,calc(100% - 80px));
  margin:auto}
.section {
  padding:110px 0}
.mono,.eyebrow,.version,.fine code {
  font-family:var(--mono)}
.eyebrow {
  font-size:11px;
  letter-spacing:.13em;
  color:var(--accent);
  font-weight:600;
  margin-bottom:28px}
.lead {
  font-size:19px;
  line-height:1.65;
  color:var(--muted)}
.fine {
  font-size:12px;
  color:var(--muted);
  line-height:1.7}
.square {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  margin-right:8px}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--text);
  color:var(--bg);
  padding:12px}
.skip-link:focus {
  top:15px}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(13,17,23,.96);
  border-bottom:1px solid #31414f}
.nav-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:85px;
  gap:20px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:23px;
  font-weight:650;
  letter-spacing:-.04em;
  white-space:nowrap}
.version {
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  border:1px solid #415260;
  border-radius:4px;
  padding:2px 6px;
  margin-left:6px;
  letter-spacing:0}
nav {
  display:flex;
  align-items:center;
  gap:28px}
nav a {
  font-size:13px;
  text-decoration:none;
  color:var(--muted)}
.nav-source {
  color:var(--text);
  border-left:1px solid var(--border);
  padding-left:28px}
.menu-toggle {
  display:none}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:45px;
  padding-top:82px;
  padding-bottom:80px;
  align-items:center;
  min-height:740px}
.hero-copy {
  position:relative;
  z-index:1}
.hero-copy .lead {
  max-width:510px;
  margin-bottom:30px}
.install {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  padding:10px 10px 10px 20px;
  max-width:455px}
.install code {
  font:14px var(--mono);
  color:var(--text);
  overflow-wrap:anywhere}
.install button {
  font-size:12px;
  background:var(--raised);
  flex-shrink:0}
.hero-links {
  display:flex;
  gap:26px;
  align-items:center;
  margin:23px 0}
.hero-links a {
  font-size:13px;
  font-weight:600}
.hero-links a:first-child {
  color:var(--accent)}
.pack-stage {
  min-height:540px;
  position:relative;
  perspective:1000px;
  isolation:isolate;
  overflow:clip}
.boundary-strip {
  border-block:1px solid #344656;
  background:#101720}
.boundary-strip>.container {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  padding-block:22px}
.boundary-strip p {
  margin:0;
  font-size:12px}
.boundary-strip span {
  color:var(--accent);
  margin-right:12px;
  font-size:10px}
.section-heading {
  max-width:670px}
.section-heading>p:last-child {
  color:var(--muted);
  max-width:570px}
.collector-tokens{
  height:138px;
  margin-bottom:30px}
.collector-tokens {
  display:flex;
  align-content:center;
  flex-wrap:wrap;
  gap:8px}
.collector-tokens span {
  font:11px var(--mono);
  border:1px solid #4f687b;
  background:var(--surface);
  padding:7px 9px;
  border-radius:4px}
.builder-section {
  background:#111923;
  border-block:1px solid #354657}
.builder-layout {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:75px;
  margin-top:50px}
label,legend {
  font-size:13px;
  font-weight:500}
label:not(.check-row):not(.collector-options label) {
  display:block;
  margin-bottom:8px}
input:not([type=checkbox]),select {
  display:block;
  width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:12px 14px;
  font-size:14px}
fieldset {
  border:0;
  padding:0;
  margin:25px 0}
legend {
  margin-bottom:13px}
.collector-options {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px}
.collector-options label,.check-row {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  cursor:pointer}
input[type=checkbox] {
  width:17px;
  height:17px;
  accent-color:var(--accent);
  margin:0;
  flex-shrink:0}
.field-row {
  display:grid;
  grid-template-columns:.65fr 1fr;
  gap:18px;
  margin-bottom:24px}
.check-row {
  margin-bottom:12px}
#wrap-field {
  margin-top:20px}
#wrap-field .fine {
  margin-top:8px}
.command-output,.sample-report,.agent-instructions {
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  min-width:0;
  overflow:hidden}
.command-output {
  padding:22px 24px}
.output-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.output-heading>.mono {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.06em}
.output-heading button {
  font-size:11px;
  padding:6px 10px}
.command-output pre {
  padding:15px 0;
  font:13px/1.9 var(--mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  min-height:90px;
  color:var(--accent)}
.command-output .fine {
  margin-bottom:24px}
.command-output .fine:last-child {
  margin:0}
.command-output .output-heading:nth-of-type(2) {
  border-top:1px solid #344959;
  padding-top:23px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#0d1117;
  border:1px solid var(--accent);
  padding:14px 24px;
  border-radius:5px;
  text-decoration:none;
  font-weight:650;
  font-size:13px;
  gap:8px}
.button:hover {
  background:#b4edfb;
  color:#0d1117}
.button.secondary {
  background:transparent;
  color:var(--text);
  border-color:var(--border);
  margin:10px 0 18px}
.sample-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center}
.sample-report .output-heading,.agent-instructions .output-heading {
  background:var(--surface);
  padding:16px 20px;
  border-bottom:1px solid var(--border)}
.sample-report pre {
  margin:0;
  padding:25px;
  font:12px/1.9 var(--mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#c1d4e2}
.agent-section {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  border-top:1px solid #344959;
  padding-top:80px}
.agent-section p:not(.eyebrow) {
  color:var(--muted)}
.agent-section a {
  font-size:13px;
  color:var(--accent)}
.agent-instructions pre {
  white-space:pre-wrap;
  padding:25px;
  font:13px/1.9 var(--mono);
  color:var(--muted);
  margin:0}
.about-section {
  background:#151d26;
  border-block:1px solid #344959}
.about-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:110px;
  align-items:center}
.portrait-wrap {
  position:relative;
  border:1px solid #526879;
  border-radius:4px;
  overflow:hidden;
  max-width:385px}
.portrait-wrap img {
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(.7)}
.about-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px}
.about-copy>.lead {
  color:var(--text)!important;
  font-size:21px!important}
.final-cta {
  text-align:center}
.final-cta>img {
  margin-bottom:25px}
.final-cta .fine {
  margin-top:22px}
.site-footer {
  border-top:1px solid #344959;
  padding:50px 0 20px}
.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr 1.1fr;
  gap:30px;
  align-items:start}
.footer-top>p {
  font-size:12px;
  color:var(--muted)}
.footer-top nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px}
.footer-top nav a {
  font-size:11px}
.footer-bottom {
  border-top:1px solid #344959;
  margin-top:30px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  gap:20px}
.copy-status {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:var(--text);
  color:var(--bg);
  box-shadow:0 10px 40px #0005;
  border-radius:5px;
  padding:12px 20px;
  font-size:13px;
  max-width:90vw}
.copy-status:empty {
  display:none}
.guide-layout {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:70px;
  padding-block:65px}
.guide-nav {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:14px;
  position:sticky;
  top:125px;
  align-self:start}
.guide-nav a {
  font-size:13px}
.guide-content {
  min-width:0;
  max-width:810px}
.guide-content h1 {
  font-size:54px}
.guide-content h2 {
  font-size:32px;
  margin-top:65px}
.guide-content h3 {
  font-size:21px;
  margin-top:30px}
.guide-content p,.guide-content li {
  font-size:15px;
  color:var(--muted)}
.guide-content pre {
  padding:20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  font:12px/1.8 var(--mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.guide-content code {
  font-family:var(--mono);
  font-size:.9em;
  color:var(--text)}
.table-scroll {
  overflow-x:auto}
table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  margin:25px 0}
th,td {
  text-align:left;
  border-bottom:1px solid #405565;
  padding:12px 14px;
  vertical-align:top}
th {
  color:var(--text);
  background:var(--surface)}
td {
  color:var(--muted)}
.guide-content details {
  border-bottom:1px solid var(--border);
  padding:18px 0}
.guide-content summary {
  cursor:pointer;
  font-weight:600}
.guide-content details p {
  margin:12px 0 0}

@media(min-width:1500px) {
  .hero {
  gap:80px;
  padding-top:100px;
  padding-bottom:100px}
}

@media(max-width:1000px) {
  .container {
  width:calc(100% - 48px)}
nav {
  gap:16px}
.nav-source {
  padding-left:16px}
.hero {
  gap:20px;
  min-height:680px}
h1 {
  font-size:65px}
.pack-stage {
  min-height:495px}
.builder-layout,.sample-layout,.agent-section {
  gap:40px}
.about-layout {
  gap:60px}
.guide-layout {
  gap:35px}
}

@media(max-width:760px) {
  .container {
  width:calc(100% - 40px)}
.nav-row {
  min-height:72px;
  flex-wrap:wrap;
  padding-block:13px}
.brand {
  font-size:22px}
.menu-toggle:not([hidden]) {
  display:block;
  font-size:12px}
#navigation {
  display:flex;
  width:100%;
  flex-wrap:wrap;
  gap:18px;
  padding:12px 0 5px}
.js-ready #navigation:not(.open) {
  display:none}
.nav-source {
  border:0;
  padding:0}
.hero {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding-top:48px;
  padding-bottom:35px;
  gap:40px}
h1 {
  font-size:clamp(56px,11vw,80px)}
.hero-copy .lead {
  font-size:17px;
  max-width:520px}
.hero .eyebrow {
  font-size:10px}
.pack-stage {
  width:min(500px,100%);
  margin:auto;
  min-height:485px}
.boundary-strip>.container {
  grid-template-columns:1fr;
  gap:12px;
  padding-block:20px}
.section {
  padding-block:70px}
.section-heading h2 {
  font-size:39px}
.collector-tokens{
  grid-column:1;
  grid-row:2/5;
  height:150px;
  margin:0}
.builder-layout,.sample-layout,.agent-section,.about-layout {
  grid-template-columns:1fr;
  gap:35px}
.builder-layout {
  margin-top:35px}
.command-output {
  padding:20px}
.sample-report pre {
  font-size:11px;
  padding:20px}
.portrait-wrap {
  max-width:330px}
.about-layout {
  gap:40px}
.about-copy h2 {
  font-size:43px}
.about-copy .hero-links {
  flex-wrap:wrap}
.footer-top {
  grid-template-columns:1fr 1fr}
.footer-top nav {
  grid-column:1/-1}
.footer-bottom {
  flex-wrap:wrap;
  font-size:10px}
.guide-layout {
  grid-template-columns:1fr;
  padding-top:35px;
  gap:35px}
.guide-nav {
  position:static;
  flex-direction:row;
  flex-wrap:wrap;
  gap:12px 20px;
  padding-bottom:25px;
  border-bottom:1px solid var(--border)}
.guide-content h1 {
  font-size:44px}
.guide-content h2 {
  margin-top:45px}
}

@media(max-width:380px) {
  .container {
  width:calc(100% - 30px)}
.version {
  display:none}
.install {
  padding-left:12px}
.install code {
  font-size:12px}
.pack-stage {
  min-height:450px}
.hero-links {
  gap:18px}
.collector-tokens{
  grid-row:auto;
  height:120px}
.field-row {
  grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
.pack-stage * {
  will-change:auto!important}
}

/* Landing composition: charcoal canvas, one blue accent, content-led motion. */
:root {font-family:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif;--bg:#101214;--surface:#191c1f;--raised:#24292d;--text:#eef2f4;--muted:#b0b9bf;--border:#677680}
.site-header {background:#101214f5}
.nav-row {min-height:74px}
.landing .hero {grid-template-columns:1.15fr 1fr;gap:65px;min-height:720px;padding-block:70px}
.landing h1 {font-size:clamp(56px,6vw,88px);letter-spacing:-.07em;font-weight:550;line-height:1.06;margin-bottom:26px}
.hero-line {display:block;color:var(--text);overflow:hidden}
.hero-line em {font-style:normal;color:var(--accent)}
.landing h2 {font-size:clamp(40px,4.5vw,66px);font-weight:520;letter-spacing:-.055em}
.landing .hero-copy .lead {max-width:440px;font-size:18px;line-height:1.6}
.landing .eyebrow {text-transform:none;letter-spacing:0;font:14px var(--mono);margin-bottom:26px;color:var(--muted)}
.landing .install {border-radius:2px;background:var(--surface);padding:12px 12px 12px 18px}
.landing .pack-stage {min-height:510px;perspective:1200px;overflow:visible;padding:0 8px}
.demo-heading {display:flex;justify-content:space-between;align-items:center;font:12px var(--mono);color:var(--muted);margin-bottom:25px}
.demo-heading button,.replay-demo {font:11px var(--mono);border:0;padding:5px 0;text-decoration:underline;text-underline-offset:5px}
.demo-source {border-left:2px solid var(--accent);padding:0 0 0 20px;margin-left:20px}
.demo-source>.mono {font-size:11px;color:var(--muted)}
.demo-source pre {font:12px/1.9 var(--mono);color:var(--text);white-space:pre-wrap}
.demo-secret {color:var(--muted)}
.demo-bridge {display:flex;align-items:center;gap:14px;font:10px var(--mono);color:var(--accent);margin:25px 0}
.bridge-line {height:1px;flex:1;background:var(--accent);transform-origin:left}
.demo-report {border:1px solid #586975;background:#20262b;box-shadow:0 28px 50px #0004;transform-origin:50% 80%}
.demo-report-title {display:flex;align-items:center;gap:12px;border-bottom:1px solid #586975;padding:18px 22px;font:12px var(--mono)}
.report-symbol {margin-left:auto;color:var(--accent);font-size:22px}
.report-rows {padding:10px 22px}
.report-rows p {display:grid;grid-template-columns:90px 1fr;gap:10px;font-size:12px;border-bottom:1px solid #39444d;margin:0;padding:12px 0}
.report-rows p:last-child {border:0}
.report-rows code {font:11px/1.6 var(--mono);overflow-wrap:anywhere;color:var(--accent)}
.report-review {padding:10px 22px 16px;color:var(--muted);font:11px var(--mono)}
.replay-demo {display:block;margin:18px 0 0 auto;color:var(--muted)}
.landing .boundary-strip {background:transparent;border-color:#39444d}
.landing .boundary-strip>.container {display:flex;justify-content:space-between;padding-block:20px}
.landing .boundary-strip span {margin:0 8px}
.landing .section {padding-block:110px}
.workflow-section>.section-heading {margin-bottom:60px}
.workflow-story {display:grid;grid-template-columns:1.05fr 1fr;gap:120px;position:relative}
.story-visual {position:sticky;top:130px;align-self:start;perspective:1200px;padding:35px 10px}
.story-document {background:#20262b;border:1px solid #687a87;min-height:435px;padding:32px;box-shadow:0 32px 50px #0003}
.story-document>.mono {color:var(--accent);font-size:12px}
.story-document h3 {font-size:34px;line-height:1.1;margin-top:30px;font-weight:500}
.story-row {padding:13px 0;border-bottom:1px solid #46525b;font:12px/1.5 var(--mono);overflow-wrap:anywhere}
.story-password span {color:var(--accent)}
.story-stamp {color:var(--accent);font:12px var(--mono);margin-top:26px}
.story-chapter {min-height:440px;padding:75px 0 80px;border-top:1px solid #46525b}
.story-chapter h3 {font-size:40px;font-weight:500;letter-spacing:-.045em}
.story-chapter p {color:var(--muted);max-width:360px}
.story-chapter a {color:var(--accent);font-size:13px}
.story-chapter .collector-tokens {height:auto;margin:25px 0 0;max-width:320px}
.collector-tokens span {border:0;background:#252e34;border-radius:2px}
.landing .builder-section {background:var(--surface);border-color:#39444d}
.landing .builder-layout {grid-template-columns:1fr 1fr;gap:0;border:1px solid #586975;margin-top:50px}
.landing #command-builder {padding:35px}
.landing .command-output {border:0;border-left:1px solid #586975;border-radius:0;padding:35px;box-shadow:none}
.landing .sample-layout {grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.landing .sample-report {border-radius:0;box-shadow:15px 15px 0 #20262b}
.landing .agent-section {grid-template-columns:1fr;gap:25px;padding-top:40px;max-width:880px}
.landing .agent-section>div:first-child {max-width:640px}
.landing .agent-instructions {border-radius:0}
.landing .about-section {background:transparent;border-color:#39444d}
.landing .about-layout {grid-template-columns:.8fr 1.2fr;gap:100px}
.landing .portrait-wrap {border:0;border-radius:0;max-width:none;aspect-ratio:4/5}
.landing .portrait-wrap img {height:115%;aspect-ratio:auto;object-fit:cover;filter:grayscale(1)}
.landing .final-cta {text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px}
.landing .final-cta>img,.landing .final-cta>.fine {display:none}
.landing .final-cta h2 {margin:0;max-width:800px}
.landing .final-cta .button {justify-self:end}
button,.button,nav a {transition:transform .25s ease,background-color .25s ease,color .25s ease}
button:hover,.button:hover {transform:translateY(-3px)}
button:active,.button:active {transform:translateY(0)}
@media(max-width:1000px) {
.landing .hero {gap:32px;grid-template-columns:1fr 1fr}
.workflow-story {gap:60px}.story-document {padding:24px}.landing .sample-layout {gap:45px}
}
@media(max-width:760px) {
.landing .hero {display:flex;gap:45px;padding-block:40px;min-height:0}
.landing h1 {font-size:clamp(48px,10.8vw,76px)}
.landing .pack-stage {min-height:0;max-width:520px;width:100%;padding:0}
.landing .boundary-strip>.container {display:grid;gap:8px}
.landing .section {padding-block:65px}
.workflow-story {grid-template-columns:1fr;gap:20px}
.story-visual {top:80px;z-index:1;padding:10px 0;background:var(--bg)}
.story-document {min-height:0;padding:20px}.story-document h3 {display:none}.story-row {padding:9px 0;font-size:11px}.story-stamp {margin-top:15px}
.story-chapter {min-height:480px;padding:45px 0 65px}.story-chapter h3 {font-size:35px}
.story-chapters {padding-top:10px}.workflow-section>.section-heading {margin-bottom:20px}
.landing .builder-layout,.landing .sample-layout,.landing .about-layout {grid-template-columns:1fr;gap:35px}
.landing .builder-layout {gap:0}.landing #command-builder,.landing .command-output {padding:22px}.landing .command-output {border-left:0;border-top:1px solid #586975}
.landing .portrait-wrap {max-width:430px}.landing .final-cta {grid-template-columns:1fr}.landing .final-cta .button {justify-self:start}
}
@media(prefers-reduced-motion:reduce) {.story-visual {position:static}.story-chapter {min-height:0}.replay-demo {display:none}}
[data-motion="off"] .story-visual {position:static}
[data-motion="off"] .story-chapter {min-height:0}
.story-document,.demo-report {overflow:hidden}