@font-face { font-family: "Geist"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/assets/fonts/geist-latin-wght.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/assets/fonts/geist-mono-latin-wght.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #0e1114; --panel: #151a1f; --raised: #2a333c; --line: #28313a;
  --fg: #e9ecee; --fg-2: #9aa4ad; --fg-3: #8a949d;
  --accent: #ff7a3d; --accent-bg: rgba(255,122,61,.08); --accent-line: rgba(255,122,61,.45);
  --on-accent: #0e1114;
  --col-a: #2c353e; --col-b: #28313a; --col-l: #222a31; --col-r: #1a2025;
  --band1: #181d22; --band2: #14181c; --band3: #111417;
  --sans: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
svg { max-width: 100%; display: block; }
code, pre { font-family: var(--mono); }
p code, li code { font-size: .88em; color: var(--fg); background: var(--raised); border: 1px solid var(--line); border-radius: 5px; padding: .08em .4em; white-space: nowrap; }
.wrap { width: min(1120px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

/* hero: always dark */
.hero { position: relative; min-height: min(100svh, 940px); background: #0e1114; color: #e9ecee; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0e1114 0%, rgba(14,17,20,.88) 34%, rgba(14,17,20,0) 70%), linear-gradient(180deg, rgba(14,17,20,.7) 0, rgba(14,17,20,0) 160px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: #e9ecee; font: 700 32px/1 var(--sans); letter-spacing: -.035em; }
.brand img { width: 64px; height: 64px; margin-left: -15px; }
@media (max-width: 600px) { .brand { font-size: 26px; gap: 12px; } .brand img { width: 52px; height: 52px; margin-left: -12px; } }
.top nav { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 15px; }
.top nav a { color: #b4bcc3; text-decoration: none; }
.top nav a:hover { color: #ff7a3d; }
.hero-body { flex: 1; display: flex; align-items: flex-end; padding-bottom: clamp(40px, 9vh, 96px); padding-top: 48px; }
h1 { font: 700 clamp(40px, 7.4vw, 88px)/1.0 var(--sans); letter-spacing: -.045em; margin: 0 0 24px; max-width: 11em; }
h1 em { font-style: normal; color: #ff7a3d; }
.lede { font-size: clamp(17px, 2vw, 20px); color: #aab3ba; max-width: 33em; margin: 0 0 32px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 8px; border: 1px solid var(--accent-line); color: var(--accent); text-decoration: none; font-weight: 500; font-size: 15px; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hero .btn { border-color: rgba(233,236,238,.28); color: #e9ecee; }
.hero .btn.primary { background: #ff7a3d; color: #0e1114; border-color: #ff7a3d; }
.btn:hover { filter: brightness(1.1); }

/* sections: plain, spacious */
section { padding: clamp(72px, 12vw, 160px) 0 0; }
.eyebrow { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 20px; display: block; }
h2 { font: 700 clamp(30px, 4.6vw, 52px)/1.06 var(--sans); letter-spacing: -.035em; margin: 0 0 20px; max-width: 14em; }
p { margin: 0 0 16px; }
.copy p { color: var(--fg-2); font-size: clamp(16px, 1.5vw, 18px); max-width: 32em; }
.split { display: grid; gap: clamp(32px, 6vw, 88px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split.flip { grid-template-columns: 1.15fr 1fr; }
  .split.flip .copy { order: 2; }
}
.tiersart { width: 100%; height: auto; }

.shot { display: block; cursor: zoom-in; }
.shot img { width: 100%; height: auto; display: block; }
.ui { margin: clamp(32px, 5vw, 64px) 0 0; }
figure { margin: 0; }
figcaption { margin-top: 14px; font-size: 14.5px; color: var(--fg-3); }
h3 { font: 700 clamp(24px, 3.2vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 16px; }
dialog.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.zoom::backdrop { background: rgba(2, 6, 12, .88); }
dialog.zoom img { width: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); margin: auto; position: absolute; inset: 0; cursor: zoom-out; }


/* motion: restrained, one-shot; the page is whole without it and under prefers-reduced-motion */
.pts { list-style: none; margin: 0 0 20px; padding: 0; color: var(--fg-2); max-width: 30em; }
.pts li { padding: 7px 0; border-top: 1px solid var(--line); }
.pts li:last-child { border-bottom: 1px solid var(--line); }
.anim .rv { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--d, 0s); }
.anim .rv.in { opacity: 1; transform: none; }
.anim .hero-body > div { animation: rise .6s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes glow { 50% { opacity: .78; } }
@media (prefers-reduced-motion: no-preference) { .hero-art .hot { animation: glow 9s ease-in-out infinite; } }
/* terminal: the command types out, then the request appears */
@keyframes type { from { width: 0; } }
.term .type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 44ch; }
.anim .term:not(.go) .type { width: 0; }
.anim .term.go .type { animation: type 1.1s steps(44, end) both; }
.late { transition: opacity .4s ease-out 1.3s; }
.anim .term:not(.go) .late { opacity: 0; }

/* structured output band */
.band { position: relative; isolation: isolate; overflow: hidden; background: #0e1114; color: #e9ecee; margin-top: clamp(72px, 12vw, 160px);
  padding: clamp(72px, 11vw, 140px) 0; --fg: #e9ecee; --fg-2: #aab3ba; --fg-3: #8a949d; --line: #28313a; --accent: #ff7a3d; }
.band-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .5; }
.band-art .ta { fill: #2c353e; } .band-art .tb { fill: #28313a; } .band-art .fl { fill: #222a31; } .band-art .fr { fill: #1a2025; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0e1114 0, rgba(14,17,20,.6) 38%, rgba(14,17,20,.9) 100%); }
.band h2 { font-size: clamp(34px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -.045em; max-width: 12em; }
.band-lede { font-size: clamp(17px, 2vw, 20px); color: var(--fg-2); max-width: 34em; margin: 0 0 clamp(36px, 6vw, 64px); }
.lane { margin: 0; }
.lane-schema, .lane-out { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.lane-schema > span, .lane-out > span { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); min-width: 64px; }
.lane code { font: 500 clamp(15px, 2vw, 20px)/1.4 var(--mono); color: var(--fg); }
.lane-out code { font-size: clamp(22px, 4.2vw, 44px); color: var(--accent); letter-spacing: -.02em; white-space: nowrap; }
.lane-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px clamp(6px, 2vw, 24px); margin: clamp(24px, 4vw, 40px) 0; max-width: 760px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.t { display: block; font: 500 clamp(12px, 1.8vw, 18px)/1 var(--mono); font-style: normal; padding: 11px 6px; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: #151a1f; white-space: nowrap; overflow: hidden; text-overflow: clip;
  transition: opacity .35s ease-out, color .35s ease-out, border-color .35s ease-out; transition-delay: calc(var(--i) * .45s + .3s); }
.t.no { opacity: .4; text-decoration: line-through; color: var(--fg-3); }
.t.ok { color: var(--accent); border-color: var(--accent); }
.anim .lane:not(.go) .t.no { opacity: 1; text-decoration: none; color: var(--fg-2); }
.anim .lane:not(.go) .t.ok { color: var(--fg-2); border-color: var(--line); }
.lane-out code span { transition: opacity .35s ease-out; transition-delay: calc(var(--i) * .45s + .5s); }
.anim .lane:not(.go) .lane-out code span { opacity: 0; }


/* speed replay */
.speedbtn { background: none; border: 0; padding: 0; margin: 4px 0 22px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-block; text-align: left; }
.speedbtn:hover { text-decoration-thickness: 2px; filter: brightness(1.1); }
.speedbtn:focus-visible, .demo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
dialog.demo { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); width: min(720px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px)); max-width: 100%; overflow: hidden; }
dialog.demo[open] { display: flex; flex-direction: column; }
dialog.demo > * { min-width: 0; max-width: 100%; }
dialog.demo::backdrop { background: rgba(2, 6, 12, .72); }
.demo-bar { flex: none; display: flex; align-items: center; gap: 8px 16px; flex-wrap: nowrap; padding: 14px 18px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--line); font: 500 13px/1.4 var(--mono); color: var(--fg-3); }
.demo-bar .sp { flex: 1; min-width: 0; }
.demo-bar .d-model { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .demo-bar { gap: 8px 10px; padding: 12px 14px; } }
.demo-bar button { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; margin: 0; background: none; border: 0; border-radius: 6px; color: var(--fg-3); cursor: pointer; transition: color .2s ease-out; }
.demo-bar button:hover { color: var(--accent); }
.demo-body { overflow: auto; padding: 18px; font-size: 15px; line-height: 1.6; flex: 1; min-height: 0; overscroll-behavior: contain; }
.demo-body p { margin: 0 0 12px; white-space: pre-wrap; }
.demo-body pre { margin: 0 0 12px; padding: 12px 14px; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; font: 400 13px/1.6 var(--mono); }
.demo-note { flex: none; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }

/* models: typography only */
.models { display: grid; gap: 56px clamp(32px, 6vw, 96px); grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 760px) { .models { grid-template-columns: 1fr 1fr; } }
.models > div { border-top: 1px solid var(--line); padding-top: 24px; }
.mname { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); display: block; margin-bottom: 20px; }
.big { font: 600 clamp(56px, 9vw, 104px)/.95 var(--sans); letter-spacing: -.05em; color: #ff7a3d; font-variant-numeric: tabular-nums; margin: 0 0 6px; }
.big small { font: 400 16px var(--sans); letter-spacing: 0; color: var(--fg-2); margin-left: 10px; }
.models p { color: var(--fg-2); max-width: 30em; }
.models .big { color: #ff7a3d; }
.models .meta .n { color: #ff7a3d; }
.models .meta { font: 400 13px/1.6 var(--mono); color: var(--fg-3); }

/* terminal */
.term { background: #0e1114; color: #e9ecee; border-radius: 6px; font: 400 13.5px/1.75 var(--mono); padding: 20px 22px 24px; overflow-x: auto; box-shadow: 0 0 0 1px var(--line); }
.term .path { color: #8a949d; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; display: block; }
.term .c { color: #8a949d; }
.term .p { color: #ff7a3d; user-select: none; }
.term pre { margin: 0 0 14px; font-size: inherit; line-height: inherit; }
.term pre:last-child { margin: 0; }

/* tables: hairlines, no box */
.tablewrap { overflow-x: auto; margin-top: 40px; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 600px; }
th, td { text-align: left; padding: 18px 24px 18px 0; border-top: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 1px solid var(--line); }
th { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); padding-top: 0; border-top: 0; padding-bottom: 14px; }
th.us { color: var(--accent); }
td:first-child { color: var(--fg); }
td:last-child { color: var(--fg-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
table td.num { color: #ff7a3d; }
td.num + td.num { padding-left: 24px; }
.claim { font: 600 clamp(22px, 3vw, 32px)/1.2 var(--sans); letter-spacing: -.025em; margin: 48px 0 0; max-width: 24em; color: var(--fg); }
.claim b { color: #ff7a3d; font-weight: 600; }
#compare { padding-top: clamp(48px, 7vw, 88px); }
#compare h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 0; max-width: none; }
.stats { margin-top: 24px; max-width: 900px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 64px); border-top: 1px solid var(--line); }
.stat { padding: 24px 0 16px; border-bottom: 1px solid var(--line); }
.stat .x { display: block; font: 600 clamp(48px, 6vw, 80px)/1 var(--sans); letter-spacing: -.045em; color: #ff7a3d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .x small { display: block; font: 500 14px/1 var(--sans); letter-spacing: 0; color: var(--fg-3); margin: 0 0 10px; }
.stat:nth-child(4) .x { padding-top: 23px; }
.stat p { margin: 10px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; color: var(--fg-2); max-width: 20em; }
.stat p.vs { max-width: none; margin: 8px 0 0; font-size: clamp(14px, 1.2vw, 16px); color: var(--fg-3); }
.stat .vs b { font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--sans); letter-spacing: -.02em; color: #ff7a3d; white-space: nowrap; margin-right: 4px; }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } .stat:nth-child(4) .x { padding-top: 0; } .stat:nth-child(4) { padding-top: 24px; } }
.note { font-size: 14.5px; color: var(--fg-3); max-width: 44em; margin: 24px 0 0; }

/* quick start */
.steps { display: grid; gap: 40px clamp(32px, 6vw, 88px); grid-template-columns: 1fr; margin-top: 48px; }
@media (min-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
.steps > div { min-width: 0; }
.step { font: 500 13px/1 var(--mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px; display: block; }
.steps pre { margin: 0; background: transparent; border-left: 2px solid var(--accent); padding: 2px 0 2px 20px; overflow-x: auto; font-size: 13.5px; line-height: 1.75; color: var(--fg); }
.req { color: var(--fg-2); max-width: 44em; margin-top: 24px; font-size: 15px; }

footer { margin-top: clamp(72px, 12vw, 160px); position: relative; color: var(--fg-3); font-size: 14px; }
.ridge { width: 100%; height: 110px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--line); }
.fbrand { display: inline-flex; align-items: center; gap: 14px; }
.fbrand img { width: 48px; height: 48px; }
footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer a { color: var(--fg-2); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* benchmark tables, FAQ, 404 */
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--fg-3); flex: none; }
details[open] > summary::after { content: "\2212"; }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.how { color: var(--fg-2); font-size: 15px; max-width: 46em; margin: 8px 0 8px; }
.prov { margin-top: 20px; border-top: 1px solid var(--line); }
.prov > summary { padding: 12px 0; font-size: 14.5px; color: var(--fg-2); }
.prov ul { margin: 0 0 8px; padding-left: 1.2em; color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.prov li { margin-bottom: 8px; }
.prov strong { color: var(--fg); font-weight: 500; }
.how ul { margin: 8px 0 0; padding-left: 1.2em; }
.bn h3 { font-size: 20px; letter-spacing: -.02em; margin: 40px 0 6px; }
.bn .tablewrap { margin-top: 12px; }
.bn table { min-width: 640px; font-size: 14.5px; }
.bn caption { caption-side: top; text-align: left; color: var(--fg-3); font-size: 13.5px; padding: 0 0 10px; }
.bn td, .bn th { padding: 10px 14px 10px 0; }
.bn td.num strong, .bn tbody td strong { color: var(--accent); font-weight: 600; }
.bn td.num { color: var(--fg-2); }
.bn tbody th { font: inherit; text-transform: none; letter-spacing: 0; background: none; color: var(--fg-2); padding: 10px 14px 10px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.bn tr.us th { color: var(--fg); font-weight: 500; }
.rig th { text-align: left; font: 500 14.5px/1.5 var(--sans); text-transform: none; letter-spacing: 0; color: var(--fg-2); width: 15em; padding-right: 24px; border-top: 1px solid var(--line); background: none; }
.rig td { color: var(--fg); }
.faq-list { max-width: 900px; margin-top: 24px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-size: clamp(16px, 1.8vw, 19px); }
.faq p { margin: 0 0 20px; color: var(--fg-2); max-width: 44em; }
.allnums { font-size: 15px; }
.bench { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); width: min(980px, calc(100vw - 32px)); height: min(88vh, 920px); max-width: 100%; overflow: hidden; }
.bench[open] { display: flex; flex-direction: column; }
.bench::backdrop { background: rgba(2, 6, 12, .72); }
.bench-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.bench-bar h2 { font-size: 18px; letter-spacing: -.02em; margin: 0; max-width: none; }
.bench-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 20px; overscroll-behavior: contain; }
.bench-foot { flex: none; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-3); }
.bench-x { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--fg-3); cursor: pointer; }
.bench-x:hover { color: var(--accent); }
.bench-x:focus-visible, .bench a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bar { background: #0e1114; }
.bench-page { padding-bottom: clamp(48px, 8vw, 96px); }
.bench-page h1 { font: 700 clamp(30px, 5vw, 52px)/1.06 var(--sans); letter-spacing: -.04em; margin: clamp(32px, 6vw, 72px) 0 12px; max-width: 16em; }
.bench-page .lede { color: var(--fg-2); font-size: 18px; max-width: 40em; }
.bench-page a.back { display: inline-block; margin-top: 32px; }
.faq h2 { font-size: clamp(22px, 2.6vw, 30px); }
.faq summary { font-size: 16px; font-weight: 400; }
.nf { background: #0e1114; color: #e9ecee; min-height: 100vh; --fg: #e9ecee; --fg-2: #aab3ba; --line: #28313a; --accent: #ff7a3d; --on-accent: #0e1114; --accent-line: rgba(255,122,61,.45); }
.nf .hero { min-height: 0; }
.nf main { padding: clamp(64px, 14vh, 160px) 0; }
.nf h1 { max-width: 12em; }

/* testimonials: plain quotes between hairlines */
.voices h2 { font-size: clamp(22px, 2.6vw, 30px); }
.quotes { max-width: 820px; margin-top: 24px; }
.q { margin: 0; padding: clamp(20px, 3vw, 32px) 0; border-top: 1px solid var(--line); }
.q:last-child { border-bottom: 1px solid var(--line); }
.q blockquote { margin: 0; }
.q p { margin: 0; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; letter-spacing: -.01em; color: var(--fg); max-width: 32em; }
.q figcaption { margin-top: 12px; font: 400 13px/1.4 var(--mono); color: var(--fg-3); }
.q figcaption a { color: var(--accent); text-underline-offset: 3px; }