@font-face { font-family:Outfit; src:url("assets/outfit-variable.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
:root { color-scheme:light; --paper:#fbfcfa; --ink:#15302d; --muted:#5b6b64; --accent:#08745f; --line:#dbe5de; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Outfit,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.icon { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wrap { width:min(100% - 80px,1160px); margin-inline:auto; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:5; border-bottom:1px solid #dbe5de80; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:21px; font-weight:650; line-height:1.15; }
.brand img { object-fit:contain; }
.brand small { display:block; font-size:11px; color:var(--muted); font-weight:450; margin-top:3px; }
nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.repo-link { display:inline-flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:26px; }
.repo-link .icon:last-child { width:14px; height:14px; flex-basis:14px; }
.hero { position:relative; isolation:isolate; overflow-x:clip; overflow-y:visible; padding:36px 24px 36px; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#087d6709 1px,transparent 1px),linear-gradient(90deg,#087d6709 1px,transparent 1px); background-size:48px 48px; background-position:center top; mask-image:linear-gradient(transparent,#000 20%,#000 76%,transparent); }
.hero-copy { position:relative; z-index:4; max-width:900px; margin:auto; text-align:center; }
.eyebrow { margin:0 0 18px; color:var(--accent); font-size:11px; font-weight:600; text-transform:uppercase; }
h1 { font-size:64px; line-height:1.08; font-weight:550; margin:0; text-wrap:balance; }
h1 span { color:var(--accent); }
.hero-description { max-width:580px; font-size:18px; line-height:1.65; color:var(--muted); margin:22px auto 0; text-wrap:pretty; }
.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:46px; padding:11px 22px; border:1px solid transparent; border-radius:6px; font-size:14px; font-weight:550; transition:background-color 160ms ease,border-color 160ms ease; }
.primary { background:var(--accent); color:#fff; }
.primary:hover { background:#076552; color:#fff; }
.secondary { border-color:var(--line); background:#fff; }
.secondary:hover { border-color:#8ab9a9; background:#f5faf6; }
.hero-facts { margin:16px 0 0; font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.hero-facts i { width:3px; height:3px; border-radius:50%; background:#91aa9b; }
.session-figure { position:relative; width:min(100%,940px); margin:64px auto 0; }
.session-composition { position:relative; isolation:isolate; height:178px; padding:0 80px; }
.session-panel { position:relative; z-index:2; background:#fff; border:1px solid #d6e4dd; border-radius:8px; box-shadow:0 16px 44px #164b3420,0 3px 10px #164b3408; transform:rotate(-2deg); }
.session-title { height:42px; display:flex; align-items:center; gap:9px; padding:0 20px 0 78px; border-bottom:1px solid #e7eeea; font-size:11px; color:var(--muted); }
.session-title > .icon { color:var(--accent); width:15px; height:15px; flex-basis:15px; }
.session-title small { margin-left:auto; color:var(--muted); font-size:10px; }
.session-title small span { margin:0 6px; color:#b3c5ba; }
.session-commands { list-style:none; margin:0; padding:12px 20px 12px 78px; }
.session-commands li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:34px; }
.step { font:10px/1.5 ui-monospace,Consolas,monospace; color:var(--muted); }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.session-commands code { font-size:11px; color:#254239; overflow-wrap:anywhere; }
.code-detail { color:var(--muted); }
.command-purpose { color:var(--accent); font-size:10px; }
.viper { position:absolute; width:150%; aspect-ratio:4232/2362; left:-24%; bottom:-163px; pointer-events:none; user-select:none; }
.viper img { display:block; width:100%; height:100%; object-fit:contain; }
.viper-back { z-index:1; }
.viper-front { z-index:3; mask-image:linear-gradient(90deg,#000 0 26%,transparent 26% 80%,#000 80% 100%); }
.session-figure figcaption { position:relative; z-index:4; width:fit-content; max-width:100%; margin:60px auto 0; padding:3px 8px; font-size:11px; background:var(--paper); color:var(--muted); text-align:center; }
.overview { padding-top:36px; padding-bottom:76px; }
.section-heading h2 { font-size:38px; line-height:1.16; font-weight:550; margin:0; text-wrap:balance; }
.section-heading > p:last-child:not(.eyebrow) { color:var(--muted); font-size:15px; margin:16px 0 0; }
.capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin-top:42px; }
.capabilities article { border-top:1px solid var(--line); padding-top:24px; }
.capabilities article > .icon { color:var(--accent); width:23px; height:23px; }
h3 { font-weight:550; font-size:20px; line-height:1.3; margin:15px 0 12px; }
p { margin:0; }
.capabilities p { font-size:14px; color:var(--muted); margin-bottom:18px; line-height:1.75; }
.capabilities article > span { font-size:11px; color:var(--muted); }
.tool-index { display:flex; align-items:start; gap:22px; border-top:1px solid var(--line); margin-top:34px; padding-top:24px; font-size:12px; }
.tool-index > p { white-space:nowrap; color:var(--muted); }
.tool-index ul { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; gap:8px 20px; flex:1; }
.tool-index a { display:inline-flex; align-items:center; gap:5px; color:var(--accent); white-space:nowrap; }
.tool-index .icon { width:15px; height:15px; flex-basis:15px; }
.video-section { border-top:1px solid var(--line); padding-block:64px 50px; }
.connector-video { margin:30px 0 0; }
.connector-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#fdfefd; border:1px solid var(--line); border-radius:8px; }
.connector-video figcaption { margin-top:15px; max-width:850px; font-size:12px; line-height:1.75; color:var(--muted); }
.video-links { display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:18px; }
.video-transcript { margin-top:26px; }
.comparison-section { background:#fff; border-top:1px solid var(--line); padding-block:64px 50px; }
.scene-comparison { margin:30px 0 0; }
.scene-comparison > a { display:block; }
.scene-comparison img { display:block; width:100%; height:auto; aspect-ratio:1376/768; }
.scene-comparison figcaption { margin-top:15px; max-width:850px; font-size:12px; line-height:1.75; color:var(--muted); }
.comparison-context { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:18px; }
.comparison-context > p { flex-basis:100%; max-width:850px; font-size:12px; line-height:1.75; color:var(--muted); }
.connection { background:#eef4f0; padding:62px 0 50px; border-block:1px solid #dce7df; }
.connection-flow { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items:center; gap:20px; margin-top:34px; }
.connection-flow > div { display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px 12px; align-items:center; }
.connection-flow > div > .icon { color:var(--accent); }
.connection-flow strong { font-size:19px; font-weight:550; }
.connection-flow > div > span { grid-column:2; font-size:12px; color:var(--muted); }
.flow-arrow { color:#91ae9e; }
.connection-note { border-top:1px solid #d1dfd5; padding-top:24px; margin-top:30px; color:var(--muted); font-size:13px; }
.setup { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:90px; padding-block:76px 48px; }
.setup > * { min-width:0; }
.setup-intro h2 { font-size:38px; line-height:1.18; font-weight:550; margin:0 0 20px; }
.setup-intro p:not(.eyebrow) { color:var(--muted); font-size:15px; margin-bottom:22px; }
.setup-intro .requirements { font-size:12px !important; padding-top:20px; border-top:1px solid var(--line); }
.text-link { color:var(--accent); display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.text-link .icon { width:16px; height:16px; flex-basis:16px; }
.setup-steps { list-style:none; margin:0; padding:0; }
.setup-steps > li { padding-bottom:30px; }
.setup-step-title { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.setup-step-title > span { color:var(--muted); font-size:12px; font-family:ui-monospace,Consolas,monospace; }
.setup-step-title h3 { margin:0; font-size:18px; }
.setup-steps p { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:14px; }
.setup-steps p > a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.setup-steps p > code { color:#315847; font-size:12px; }
.code-block { background:#f3f6f3; border:1px solid #dee7df; border-radius:6px; overflow:hidden; }
.code-toolbar { position:relative; display:flex; align-items:center; gap:10px; border-bottom:1px solid #dfe8e0; padding:5px 8px 5px 16px; color:#62736c; font-size:11px; }
.code-toolbar > button { margin-left:auto; width:32px; height:32px; display:grid; place-items:center; background:transparent; border:0; border-radius:4px; color:#4e7966; cursor:pointer; }
.code-toolbar > button:hover { background:#e6efe8; }
.code-toolbar .icon { width:16px; height:16px; }
.copy-status { position:absolute; left:16px; right:50px; font-size:11px; }
.code-toolbar:has(.copy-status:not(:empty)) > span:first-child { visibility:hidden; }
.copy-status:empty { display:none; }
pre { margin:0; padding:16px; overflow:auto; font-size:11px; line-height:1.9; }
pre code { white-space:pre; overflow-wrap:normal; }
.scope { padding-block:28px 76px; }
.scope .section-heading { margin-bottom:30px; }
details { border-top:1px solid var(--line); padding:20px 0; }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-size:18px; font-weight:500; list-style:none; position:relative; padding-right:32px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:0; top:0; font:22px/1.2 Outfit,sans-serif; color:#779987; }
details[open] summary::after { content:"−"; }
details p { color:var(--muted); font-size:14px; max-width:860px; margin:14px 0 0; line-height:1.8; }
details .text-link { margin-top:12px; }
.closing { background:#e4efe8; border-block:1px solid #d2e2d7; padding:52px 0; }
.closing > .wrap { display:flex; justify-content:space-between; gap:30px; align-items:center; }
.closing h2 { font-size:38px; line-height:1.15; font-weight:550; margin:0 0 14px; }
.closing p:not(.eyebrow) { font-size:15px; color:var(--muted); }
footer { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:30px; }
.footer-brand { font-size:16px; }
.footer-brand small { font-size:10px; }
footer > p { color:var(--muted); font-size:11px; }
footer nav { font-size:12px; gap:20px; }
footer nav > a:last-child { display:inline-flex; align-items:center; gap:4px; }
footer nav .icon { width:14px; height:14px; flex-basis:14px; }
.skip { position:fixed; top:-100px; left:20px; z-index:10; padding:12px; background:#fff; border:1px solid var(--line); }
.skip:focus { top:10px; }
@media (max-width:900px) {
  .wrap { width:calc(100% - 48px); }
  .hero { padding-top:42px; }
  h1 { font-size:48px; }
  .hero-description { font-size:16px; }
  .session-composition { padding-inline:40px; }
  .session-commands code { font-size:10px; }
  .viper { width:140%; left:-20%; bottom:-100px; }
  .capabilities { gap:28px; }
  .capabilities h3 { font-size:18px; }
  .tool-index { flex-wrap:wrap; }
  .tool-index > ul { flex-basis:calc(100% - 100px); }
  .connection-flow { gap:12px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr); }
  .connection-flow strong { font-size:16px; }
  .setup { gap:40px; }
  footer { flex-wrap:wrap; }
}
@media (max-width:600px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { height:74px; }
  .brand { font-size:18px; gap:8px; }
  .brand img { width:29px; height:29px; }
  .site-header nav { gap:16px; font-size:13px; }
  .site-header nav > a:first-child { display:none; }
  .repo-link { padding-left:0; border:0; }
  .repo-link > span, .repo-link > .icon:last-child { display:none; }
  .hero { padding:34px 20px 32px; }
  .eyebrow { margin-bottom:16px; font-size:10px; }
  h1 { font-size:32px; line-height:1.13; }
  .hero-description { margin-top:18px; font-size:15px; line-height:1.65; }
  .desktop-break { display:none; }
  .actions { gap:9px; margin-top:22px; }
  .button { font-size:13px; gap:8px; padding:10px 15px; }
  .hero-facts { font-size:10px; gap:7px; }
  .session-figure { margin-top:85px; }
  .session-composition { padding:0; height:188px; }
  .session-panel { transform:rotate(-1.5deg); }
  .session-title { padding:0 12px; font-size:10px; }
  .session-title small { display:none; }
  .session-commands { padding:11px 13px; }
  .session-commands li { min-height:38px; grid-template-columns:18px minmax(0,1fr); gap:7px; }
  .command-purpose { display:none; }
  .session-commands code { font-size:10px; }
  .code-detail { display:block; font-size:9px; margin-top:2px; }
  .viper { width:150%; left:-25%; bottom:90px; }
  .viper-front { mask-image:linear-gradient(90deg,#000 0 18%,transparent 18% 77%,#000 77% 100%); }
  .session-figure figcaption { margin-top:18px; font-size:10px; }
  .overview { padding-block:40px; }
  .section-heading h2, .setup-intro h2, .closing h2 { font-size:29px; }
  .capabilities, .setup { grid-template-columns:minmax(0,1fr); }
  .capabilities { margin-top:28px; gap:26px; }
  .capabilities article { padding-top:20px; }
  .tool-index { gap:12px; margin-top:28px; }
  .tool-index ul { flex-basis:100%; gap:8px 16px; }
  .connection { padding:40px 0; }
  .comparison-section { padding-block:40px; }
  .video-section { padding-block:40px; }
  .connection-flow { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:26px; }
  .connection-flow > .flow-arrow { margin-left:4px; transform:rotate(90deg); width:17px; height:17px; }
  .connection-flow strong { font-size:19px; }
  .setup { padding-block:44px 20px; gap:30px; }
  .scope { padding-block:20px 44px; }
  summary { font-size:16px; }
  .closing { padding:40px 0; }
  .closing > .wrap { align-items:start; flex-direction:column; gap:22px; }
  footer { flex-direction:column; align-items:start; gap:18px; padding-block:28px; }
  footer nav { gap:18px; flex-wrap:wrap; }
}
@media (max-width:360px) { h1 { font-size:26px; } .hero { padding-inline:16px; } .wrap { width:calc(100% - 32px); } .button { padding-inline:12px; } .session-figure { margin-top:70px; } }
@media (min-width:901px) and (max-height:800px) {
  .hero { padding-top:18px; padding-bottom:20px; }
  h1 { font-size:48px; }
  .hero-description { font-size:16px; margin-top:16px; }
  .actions { margin-top:20px; }
  .session-figure { width:min(100%,800px); margin-top:28px; }
  .session-composition { padding-inline:100px; }
  .viper { width:120%; left:-10%; bottom:-85px; }
  .session-figure figcaption { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }

.discovery-guide { padding-block: 48px; max-width: 900px; }
.discovery-guide p { line-height: 1.8; }
.setup-guide { max-width: 880px; padding-block: 40px 64px; }
.setup-guide h1 { font-size: clamp(36px, 5vw, 60px); margin-block: 28px 20px; }
.setup-guide .guide-lead { font-size: 20px; line-height: 1.6; }
.setup-guide section { margin-top: 42px; }
.setup-guide h2 { font-size: 26px; margin-bottom: 16px; }
.setup-guide h3 { margin-top: 24px; }
.setup-guide p, .setup-guide li { line-height: 1.8; }
.setup-guide li { margin-bottom: 8px; }
.setup-guide pre { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #f5f7f4; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; line-height: 1.8; }
.setup-guide details { padding-block: 18px; border-bottom: 1px solid var(--line); }
.setup-guide summary { cursor: pointer; font-weight: 600; }
.setup-guide details p { margin-bottom: 0; }
@media (max-width:600px) { .setup-guide { padding-top: 24px; } .setup-guide .guide-lead { font-size: 17px; } .setup-guide h2 { font-size: 23px; } }