/* Fly brand assets are shared with superfly/ui-ex and served locally. */
@font-face {
  font-family: "Fricolage";
  src: url("/guide-assets/fricolage-grotesque.var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mackinac";
  src: url("/guide-assets/mackinac-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/guide-assets/fragment-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --navy-50: #f9f9fd;
  --navy-100: #f4f3fb;
  --navy-200: #e7e6f4;
  --navy-300: #d4ceea;
  --navy-400: #a39ac1;
  --navy-500: #756b93;
  --navy-600: #564c73;
  --navy-700: #42385f;
  --navy-900: #22183c;
  --peacoat: #171434;
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --sans: "Fricolage", system-ui, sans-serif;
  --heading: "Mackinac", Georgia, serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis: none;
  color: var(--navy-900);
  background: #fff;
  scroll-padding-top: 2rem;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--violet-700); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(109 40 217 / .3); }
a:hover { color: var(--violet-600); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--violet-400); outline-offset: 3px; border-radius: 4px; }
code { font-family: var(--mono); font-size: .85em; }
:not(pre) > code { padding: .05em .35em; border-radius: 4px; background: var(--navy-100); color: var(--navy-900); }
.wrap { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }

.top { position: relative; overflow: hidden; background: linear-gradient(to bottom, #f1f2f9, #fff 55%, #fff); }
.top-blobs { pointer-events: none; position: absolute; top: 0; left: 50%; width: 100%; min-width: 80rem; height: auto; transform: translateX(-50%); }
.navbar { position: relative; z-index: 5; }
.navbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 6rem; }
.nav-pill { justify-self: center; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; padding: 0; border: 0; background: none; color: var(--navy-900); cursor: pointer; }
.mobile-menu { position: fixed; inset: 0; z-index: 600; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--navy-900); visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
html[data-menu-state="on"] { overflow: hidden; }
html[data-menu-state="on"] .mobile-menu { visibility: visible; opacity: 1; transition: opacity .2s, visibility 0s; }
.mobile-menu-bar { display: flex; align-items: center; justify-content: space-between; height: 6rem; border-bottom: 1px solid #e6e0fe; }
.mobile-menu-bar .menu-toggle { display: flex; }
.mobile-menu-body { display: flex; flex-direction: column; gap: 2rem; padding-block: 3rem; }
.mobile-menu-body > a { align-self: flex-start; }
.mobile-menu-body > a { color: #2e2e2e; font-size: 1.25rem; font-weight: 600; line-height: 1.5; text-decoration: none; transition: color .15s; }
.mobile-menu-body > a:hover { color: var(--violet-600); }
.brand { display: flex; }
.brand img { display: block; width: auto; height: 40px; }
.nav-pill, .nav-beta { box-sizing: border-box; height: 2.875rem; display: flex; align-items: center; padding: 0 .75rem; border: 1px solid rgb(255 255 255 / .5); border-radius: 999px; background: linear-gradient(to right, rgb(251 207 232 / .4), rgb(221 214 254 / .4), rgb(199 210 254 / .4)), rgb(255 255 255 / .75); box-shadow: 0 10px 15px -3px rgb(32 34 55 / .05), 0 4px 6px -4px rgb(32 34 55 / .05), 0 0 0 1px rgb(32 34 55 / .075); backdrop-filter: blur(24px); font-size: .875rem; font-weight: 500; color: #202237; }
.nav-beta { justify-self: end; padding: 0 1rem; }
.nav-pill a { position: relative; display: block; padding: .625rem .75rem; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .3s; }
.nav-pill a:hover { color: var(--violet-600); }
.nav-pill a::after { content: ""; position: absolute; left: .25rem; right: .25rem; bottom: -2px; height: 1px; background: linear-gradient(to right, transparent 10%, var(--violet-400), transparent 90%); opacity: 0; transform: scaleX(0); transition: opacity .3s, transform .3s; }
.nav-pill a::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -.5rem; height: 100%; border-radius: 999px 999px 0 0; background: linear-gradient(to top, rgb(139 92 246 / .2), transparent); filter: blur(4px); opacity: 0; transform: scale(0); transform-origin: bottom; transition: opacity .3s, transform .3s; }
.nav-pill a:hover::after { opacity: 1; transform: scaleX(1); }
.nav-pill a:hover::before { opacity: 1; transform: scale(1); }

.button, .text-link, .setup-docs {
  display: inline-flex; align-items: center; gap: .55rem; height: 2.625rem; padding: 0 1.1rem; border-radius: 999px;
  font-family: var(--sans); font-size: .90625rem; font-weight: 450; line-height: 1; text-decoration: none; cursor: pointer;
}
.button { background: var(--violet-600); color: #fff; border: 1px solid var(--violet-700); box-shadow: inset 0 -2px 6px var(--violet-700); }
.button:hover { background: var(--violet-700); color: #fff; }
.text-link { background: #fff; color: var(--navy-900); border: 1px solid rgb(124 58 237 / .12); box-shadow: inset 0 -3px 6px -2px var(--navy-200); }
.text-link:hover { background: var(--navy-50); color: var(--violet-700); }

.hero { position: relative; border-bottom: 1px solid var(--navy-200); }
.halftone { pointer-events: none; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(circle, #6d28d9 1.4px, transparent 1.5px), radial-gradient(circle, #6d28d9 1.4px, transparent 1.5px); background-position: 0 0, 4px 4px; background-size: 8px 8px; -webkit-mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, rgb(0 0 0 / .6) 35%, transparent 70%); mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, rgb(0 0 0 / .6) 35%, transparent 70%); }
.hero-inner { position: relative; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center; padding-block: 64px 72px; }
h1 { margin: 0; font-family: var(--heading); font-weight: 500; font-size: clamp(3rem, 5vw, 4.5rem); letter-spacing: -.04em; line-height: 1.1; color: var(--navy-900); }
.payoff { display: inline-block; padding-bottom: .06em; background: url("/guide-assets/scribble-underline.svg") no-repeat bottom / 100% 12px; }
.intro { max-width: 470px; margin: 1.5rem 0 1.9rem; color: var(--navy-600); font-size: 1.28125rem; line-height: 1.6; }
.hero-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.hero-aside { min-width: 0; }
.terminal { background: var(--navy-900); border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 1px 2px rgb(0 0 0 / .05); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .5rem .5rem .875rem; background: rgb(255 255 255 / .05); border-bottom: 1px solid rgb(255 255 255 / .1); min-height: 2.25rem; }
.terminal-dots { display: flex; gap: .375rem; }
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--navy-600); }
.terminal-pill { padding: .25rem .625rem; border-radius: 999px; background: rgb(52 211 153 / .15); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .3); color: var(--emerald-300); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.terminal-body { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .875rem; }
.terminal-comment { margin: 0; padding-top: .5rem; color: var(--navy-400); font-family: var(--mono); font-size: .75rem; line-height: 1.6; user-select: none; }
.terminal-comment:first-child { padding-top: .25rem; }
.terminal-line { display: flex; align-items: center; gap: .25rem; width: calc(100% + .25rem); margin: 0 0 0 -.25rem; padding: 0 0 0 .25rem; border: 0; border-radius: 6px; background: transparent; color: var(--navy-100); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
.terminal-line:hover, .terminal-line[data-copied] { background: rgb(255 255 255 / .05); }
.terminal-prompt { flex: none; color: var(--emerald-400); font-family: var(--mono); font-size: .875rem; user-select: none; }
.terminal-line code { flex: 1; min-width: 0; padding: .25rem; font-family: var(--mono); font-size: .875rem; line-height: 1.25rem; color: var(--navy-100); white-space: nowrap; overflow-x: auto; scrollbar-width: none; background: none; }
.terminal-line code::-webkit-scrollbar { display: none; }
.terminal-line code b { font-weight: 500; color: #fff; }
.copy-glyph { position: relative; flex: none; display: inline-flex; padding: .375rem; border-radius: 6px; color: var(--navy-400); transition: color .15s; }
.terminal-line:hover .copy-glyph { color: #fff; }
[data-copied] .copy-glyph { color: var(--emerald-300); }
.copy-glyph svg { width: 1rem; height: 1rem; transition: opacity .15s, transform .15s; }
.copy-glyph .check-icon { position: absolute; inset: 0; margin: auto; opacity: 0; transform: scale(.5); transition-delay: .1s; }
[data-copied] .copy-glyph .copy-icon { opacity: 0; transform: scale(.5); }
[data-copied] .copy-glyph .check-icon { opacity: 1; transform: scale(1); }
.terminal-prompt.agent { color: var(--violet-400); font-weight: 700; }
.harness-switch { display: flex; gap: .25rem; }
.harness-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--navy-400); cursor: pointer; transition: color .15s, background-color .15s; }
.harness-icon svg { width: 1rem; height: 1rem; }
.harness-icon:hover { color: var(--navy-100); background: rgb(255 255 255 / .06); }
.harness-icon[aria-pressed="true"] { color: var(--emerald-300); background: rgb(52 211 153 / .15); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .3); }
.terminal-config code { white-space: pre; line-height: 1.5; padding: .5rem .25rem; }
.terminal-body[hidden] { display: none; }
.copy-scratch { position: fixed; opacity: 0; }

.config { margin: .75rem 0 1rem; background: var(--navy-900); border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 1px 2px rgb(0 0 0 / .05); overflow: hidden; }
.config-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .375rem .25rem .875rem; background: rgb(255 255 255 / .05); border-bottom: 1px solid rgb(255 255 255 / .1); }
.config-file { color: var(--navy-300); font-family: var(--mono); font-size: 11px; }
.config-copy { display: inline-flex; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.config-copy:hover .copy-glyph { color: #fff; }
.config pre { margin: 0; padding: .75rem .875rem; color: var(--navy-100); font-family: var(--mono); font-size: .875rem; line-height: 1.6; white-space: pre; overflow-x: auto; scrollbar-width: thin; }
.config code { font: inherit; background: none; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.or-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem; }
.or-divider span { flex: 1; height: 1px; background: rgb(34 24 60 / .2); }
.or-divider em { padding: .125rem .75rem; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(34 24 60 / .1); color: var(--navy-700); font-family: var(--mono); font-style: normal; font-size: .75rem; letter-spacing: .2em; }
.agent-prompt { --coin-pull: 1; display: flex; max-width: 100%; align-items: center; gap: .75rem; margin: 0 auto; padding: .25rem .75rem .25rem .25rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / .8); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgb(34 24 60 / .1), 0 1px 2px rgb(0 0 0 / .05); color: var(--navy-900); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.agent-prompt:hover, .agent-prompt:focus-visible { --coin-pull: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--violet-400), 0 1px 3px rgb(0 0 0 / .08); }
.agent-prompt[data-copied] { box-shadow: inset 0 0 0 1px var(--emerald-400), 0 1px 3px rgb(0 0 0 / .08); }
.coins { display: flex; flex: none; }
.coin { position: relative; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 2px solid #fff; border-radius: 50%; background: var(--navy-50); box-shadow: 0 0 0 1px rgb(34 24 60 / .1); color: #2f2552; transition: transform .3s ease-out; }
.coin svg { width: 18px; height: 18px; }
.coin + .coin { margin-left: -8px; }
.coin:nth-child(2) { transform: translateX(calc(-2px * var(--coin-pull))); z-index: 1; }
.coin:nth-child(3) { transform: translateX(calc(-4px * var(--coin-pull))); z-index: 2; }
.agent-prompt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.agent-prompt-short { display: none; }
.agent-prompt .copy-glyph { padding: .25rem; }
.agent-prompt:hover .copy-glyph { color: var(--violet-600); }
.agent-prompt[data-copied] .copy-glyph { color: #059669; }
.agent-prompt .copy-glyph svg { width: 1.25rem; height: 1.25rem; }

.guide-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 64px; padding-block: 64px 48px; }
.contents { position: sticky; top: 32px; display: flex; flex-direction: column; }
.contents > p { margin: 0; padding-left: .125rem; color: rgb(103 107 137 / .8); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hook-list { position: relative; display: flex; flex-direction: column; gap: .125rem; margin: 0; padding: .875rem 0 0; list-style: none; }
.hook-list li { display: flex; margin: 0; padding: 0; }
.hook-list a { display: flex; flex: 1; min-height: 2.25rem; align-items: center; padding: .375rem .5rem .375rem 1.25rem; border-radius: .625rem; font-size: .90625rem; line-height: 1.3; font-weight: 450; color: var(--navy-600); text-decoration: none; transition: color .2s; }
.hook-list a:hover { color: var(--navy-900); }
.hook-list a[aria-current] { font-weight: 550; color: var(--navy-900); }
.hook-rail { pointer-events: none; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.hook-rail[data-visible] { opacity: 1; }
.hook-rail-line { position: absolute; left: .125rem; width: 1px; background-image: repeating-linear-gradient(to top, transparent 0 2px, currentColor 2px 4px); transition: top .25s cubic-bezier(.2, .8, .2, 1), height .25s cubic-bezier(.2, .8, .2, 1); }
.hook-rail-corner { position: absolute; left: .125rem; transition: top .25s cubic-bezier(.2, .8, .2, 1); }
.hook-rail-hover { color: var(--navy-400); }
.hook-rail-active { color: var(--violet-600); }
.contents .markdown-link { margin-top: 1.25rem; padding-left: 1.25rem; font-size: .8125rem; color: var(--navy-500); text-decoration: none; }
.contents .markdown-link:hover { color: var(--violet-700); }
@media (prefers-reduced-motion: reduce) { .hook-list a, .hook-rail, .hook-rail-line, .hook-rail-corner, .tool-toggle, .mobile-menu { transition: none; } }
article { min-width: 0; max-width: 760px; }
section { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--navy-200); }
section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.section-eyebrow { margin: 0 0 .6rem; color: var(--violet-600); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
h2 { margin: 0 0 1rem; font-family: var(--heading); font-weight: 500; font-size: 2.25rem; line-height: 1.325; letter-spacing: -.025em; color: var(--navy-900); }
h3 { margin: 2rem 0 .6rem; font-size: 1.28125rem; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--navy-900); }
p { margin: .85rem 0; }
article p, article li { color: var(--navy-600); }
ul { padding-left: 1.2rem; margin: 1rem 0; }
li { padding-left: .25rem; margin-bottom: .55rem; }
li::marker { color: var(--violet-400); }

.harness-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; min-inline-size: 0; margin: 1.4rem 0 2rem; padding: 0; border: 0; }
.harness-picker legend { display: flex; flex-direction: column; gap: .25rem; padding: 0; margin-bottom: 1rem; }
.harness-title { font-family: var(--heading); font-size: 1.5rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--navy-900); }
.harness-sub { font-size: .875rem; color: var(--navy-600); }
.harness-choice { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.harness-option { display: block; min-width: 0; padding: .75rem 1rem; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgb(34 24 60 / .1); cursor: pointer; text-align: left; transition: box-shadow .15s; }
.harness-option:hover { box-shadow: inset 0 0 0 1px rgb(34 24 60 / .25); }
.harness-row { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.harness-logo { flex: none; width: 1.25rem; height: 1.25rem; color: var(--navy-400); transition: color .15s; }
.harness-logo svg { display: block; width: 100%; height: 100%; }
.harness-option:hover .harness-logo { color: var(--navy-600); }
.harness-name { min-width: 0; overflow: hidden; font-family: var(--heading); font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--navy-900); white-space: nowrap; text-overflow: ellipsis; }
.harness-tagline { display: block; margin-top: .375rem; font-size: .75rem; line-height: 1.625; color: var(--navy-600); }
.harness-choice:checked + .harness-option { box-shadow: inset 0 0 0 2px var(--violet-600), 0 10px 15px -3px rgb(124 58 237 / .1), 0 4px 6px -4px rgb(124 58 237 / .1); }
.harness-choice:checked + .harness-option .harness-logo { color: var(--violet-600); }
.harness-choice:focus-visible + .harness-option { outline: 3px solid var(--violet-400); outline-offset: 3px; }
.harness-panel { display: none; grid-column: 1 / -1; order: 1; min-width: 0; padding: 1.6rem 1.6rem 1.3rem; margin-top: .4rem; border: 1px solid var(--navy-200); border-radius: 12px; background: var(--navy-50); }
.harness-choice:checked + .harness-option + .harness-panel { display: block; }
.harness-panel > h3 { margin: 0 0 1.3rem; font-size: 1.28125rem; }
.setup-steps { margin: 0; padding: 0; list-style: none; counter-reset: setup-step; }
.setup-steps > li { position: relative; margin: 0 0 1.5rem; padding-left: 2.6rem; counter-increment: setup-step; }
.setup-steps > li::before { content: counter(setup-step); position: absolute; top: .1rem; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); font-size: .75rem; font-weight: 700; }
.setup-steps h4 { margin: 0 0 .4rem; color: var(--navy-900); font-size: .96875rem; font-weight: 600; line-height: 1.6; }
.setup-steps p { font-size: .90625rem; line-height: 1.6; margin: .45rem 0 .65rem; overflow-wrap: anywhere; }
.setup-docs { height: 2.375rem; padding: 0 .95rem; margin-top: .25rem; background: #fff; color: var(--navy-900); border: 1px solid rgb(124 58 237 / .12); box-shadow: inset 0 -3px 6px -2px var(--navy-200); font-size: .875rem; }
.setup-docs:hover { background: var(--navy-50); color: var(--violet-700); }

.harness-panel .terminal { margin: 0 0 1.5rem; }

.callout {
  --shadow-color: rgb(91 33 182 / .075);
  --border-color: rgb(139 92 246 / .2);
  --text: #564b80;
  --text-dark: #2a1863;
  --code: #874bee;
  --code-bg: rgb(221 214 254 / .5);
  --decoration: rgb(42 24 99 / .4);
  --decoration-hover: rgb(124 58 237 / .4);
  --link-hover: #7c3aed;
  position: relative;
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-radius: .75rem;
  background: linear-gradient(to bottom right, #f5f3ff, #eef2ff);
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color), 0 0 0 1px var(--border-color);
  font-size: .9375rem;
  line-height: 1.625;
  color: var(--text);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--text-dark); font-weight: 600; letter-spacing: -.005em; }
.callout a:not([class]) { color: var(--text-dark); font-weight: 450; letter-spacing: -.015em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--decoration); transition: color .15s, text-decoration-color .15s; }
.callout a:not([class]):hover { color: var(--link-hover); text-decoration-color: var(--decoration-hover); }
.callout code { color: var(--code); background: var(--code-bg); }
.prompt-card { position: relative; margin: .6rem 0 1.6rem; padding: .9rem 1rem 1rem 1.25rem; background: #fff; border: 1px solid var(--navy-200); border-radius: 12px; box-shadow: inset 0 -3px 6px -2px var(--navy-100); }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.prompt-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem .25rem .5rem; border-radius: 999px; background: linear-gradient(to bottom right, var(--violet-100), #e0e7ff); box-shadow: inset 0 0 0 1px rgb(124 58 237 / .15); color: var(--violet-700); font-family: var(--mono); font-size: .625rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.prompt-badge svg { width: .8125rem; height: .8125rem; color: var(--violet-600); }
.prompt-copy { display: inline-flex; align-items: center; gap: .125rem; margin: -.25rem -.25rem -.25rem 0; padding: 0 .125rem 0 .625rem; border: 0; border-radius: 8px; background: transparent; color: var(--navy-500); font: inherit; font-size: .8125rem; font-weight: 450; cursor: pointer; transition: color .15s, background-color .15s; }
.prompt-copy:hover { color: var(--navy-900); background: var(--navy-50); }
.prompt-copy .copy-glyph { color: inherit; }
.prompt-copy-done, .prompt-copy[data-copied] .prompt-copy-label { display: none; }
.prompt-copy[data-copied] .prompt-copy-done { display: inline; }
.prompt-copy[data-copied] { color: #059669; }
.prompt-copy[data-copied] .copy-glyph { color: #059669; }
.prompt-copy:focus-visible { outline: 3px solid var(--violet-400); outline-offset: 2px; }
.prompt-card p { margin: 0; font-size: .96875rem; color: var(--navy-900); }

.tool-reference { margin-top: 1.3rem; overflow: hidden; border: 1px solid var(--navy-200); border-radius: 12px; background: #fff; }
.tool-reference + .tool-reference { margin-top: .5rem; }
.tool-reference > summary { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem .8rem 1.2rem; cursor: pointer; list-style: none; font-size: .96875rem; font-weight: 600; color: var(--navy-900); transition: background-color .15s; }
.tool-reference > summary::-webkit-details-marker { display: none; }
.tool-reference > summary:hover, .tool-reference[open] > summary { background: var(--navy-50); }
.tool-reference[open] > summary { border-bottom: 1px solid var(--navy-200); }
.tool-reference > summary:focus-visible { outline: 3px solid var(--violet-400); outline-offset: -3px; }
.tool-count { padding: .15rem .5rem; border-radius: 999px; background: var(--navy-100); color: var(--navy-600); font-family: var(--mono); font-size: .6875rem; font-weight: 400; letter-spacing: .02em; }
.tool-toggle { position: relative; flex: none; width: 1.5rem; height: 1.5rem; margin-left: auto; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--navy-200); color: var(--navy-600); transition: transform .2s ease, background-color .15s, color .15s, box-shadow .15s; }
.tool-toggle::before, .tool-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.tool-toggle::before { width: 10px; height: 2px; }
.tool-toggle::after { width: 2px; height: 10px; }
.tool-reference > summary:hover .tool-toggle { background: var(--violet-600); color: #fff; box-shadow: none; }
.tool-reference[open] .tool-toggle { background: var(--navy-900); color: #fff; box-shadow: none; transform: rotate(45deg); }
.tool-reference dl { margin: 0; padding: 0 1.2rem; }
.tool-reference dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: .25rem 1.25rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--navy-200); }
.tool-reference dl > div:first-child { border-top: 0; }
.tool-reference dl > div:target { background: var(--violet-50); margin: 0 -1.2rem; padding-inline: 1.2rem; }
dt { color: var(--violet-700); font-weight: 500; overflow-wrap: anywhere; }
dt code { background: var(--violet-50); color: var(--violet-700); }
dd { margin: 0; font-size: .90625rem; color: var(--navy-600); }

.site-footer { position: relative; padding: 80px 0 32px; background: #191034 linear-gradient(to bottom right, rgb(18 18 38 / .5), rgb(34 24 60 / .5), rgb(25 16 52 / .5)); color: var(--navy-400); font-size: .90625rem; line-height: 1.5rem; font-weight: 325; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 64px; padding-bottom: 80px; }
.footer-logo { justify-self: start; }
.footer-logo img { display: block; width: auto; height: 36px; }
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 40px; align-items: start; justify-items: center; }
.site-footer dl { margin: 0; }
.site-footer dt { margin: 0 0 12px; color: #fff; font-size: .75rem; line-height: 18px; font-weight: 575; letter-spacing: .05em; text-transform: uppercase; }
.site-footer dd { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-weight: 450; }
.site-footer dd a { color: var(--navy-400); text-decoration: none; white-space: nowrap; transition: color .15s; }
.site-footer dd a:hover { color: var(--violet-500); }
.footer-copyright { margin: 0; text-align: center; font-size: .75rem; line-height: 18px; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .6rem 1rem; background: #fff; z-index: 1; }
.skip-link:focus { top: 1rem; }

@media (max-width: 1050px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; }
  .guide-layout { gap: 44px; grid-template-columns: 190px minmax(0, 1fr); }
  .harness-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .wrap { width: min(650px, calc(100% - 48px)); }
  .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
  .navbar .nav-pill, .navbar .nav-beta { display: none; }
  .menu-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-block: 44px 48px; }
  h1 { font-size: 3.4rem; }
  .intro { max-width: 520px; }
  .guide-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .contents { position: static; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding-bottom: 20px; border-bottom: 1px solid var(--navy-200); }
  .contents > p { grid-row: 1; margin: 0; }
  .contents .markdown-link { grid-row: 1; grid-column: 2; margin: 0; padding: 0; font-size: .8125rem; }
  .hook-list { grid-row: 2; grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; gap: .375rem; margin: 0 -24px; padding: .75rem 24px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 24px; }
  .hook-list::-webkit-scrollbar { display: none; }
  .hook-list li { flex: none; scroll-snap-align: start; }
  .hook-list a { min-height: 2rem; padding: .25rem .75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--navy-200); font-size: .875rem; white-space: nowrap; }
  .hook-list a[aria-current] { background: var(--navy-900); color: #fff; box-shadow: none; }
  .hook-rail { display: none; }
}
@media (max-width: 640px) {
  .harness-picker { grid-template-columns: minmax(0, 1fr); }
  .tool-reference dl > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .wrap { width: calc(100% - 40px); }
  .brand img { height: 32px; }
  .hook-list { margin: 0 -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .navbar-inner, .mobile-menu-bar { height: 4.5rem; }
  .agent-prompt-long { display: none; }
  .agent-prompt-short { display: inline; }
  .hero-inner { padding-block: 36px 40px; }
  h1 { font-size: 3rem; }
  .payoff { background-size: 100% 9px; }
  .intro { font-size: 1.125rem; }
  .hero-actions a { height: 2.5rem; }
  .harness-panel { padding: 1.1rem .9rem; }
  .setup-steps > li { padding-left: 2.1rem; }
  .setup-steps > li::before { width: 24px; height: 24px; }
  .terminal-line code, .terminal-prompt { font-size: .8125rem; }
  h2 { font-size: 1.75rem; }
  section { padding-bottom: 2.2rem; margin-bottom: 2.2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .footer-columns { justify-items: start; }
}
@media print {
  .wrap { width: 100%; }
  .hero { background: none; border: 0; }
  .hero-inner { display: block; padding: 0; }
  .guide-layout { display: block; padding-top: 2rem; }
  aside, .navbar, .mobile-menu, .top-blobs, .halftone, footer, .hero-actions, .hero-aside { display: none; }
  .harness-option, .harness-picker legend, .copy-glyph, .or-divider, .agent-prompt { display: none; }
  .harness-picker, .harness-panel { display: block; }
  .harness-panel { border: 0; padding: 0; margin-bottom: 2rem; }
  section { break-inside: avoid; }
}