/* Orbital brand aesthetic; native CSS, no imitation of an official design system.
   Radius scale: surfaces 12px, controls 8px. Layers: header 10, notification 20, skip-link 30. */
@font-face{font-family:Geist;src:url('assets/fonts/geist.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--bg:#f3f6f8;--surface:#e8eef2;--elevated:#f9fbfc;--text:#132631;--muted:#526775;--line:#cedae1;--accent:#2d637d;--accent-fill:#235a76;--accent-text:#f5fafc;--tint:#dfeaf0;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Consolas,monospace;--sans:Geist,'PingFang SC','Microsoft YaHei',sans-serif;--radius:12px;--header-layer:10;--toast-layer:20;--skip-layer:30}
:root[data-theme=dark]{color-scheme:dark;--bg:#071015;--surface:#0d1922;--elevated:#11202b;--text:#e8f0f4;--muted:#a0b2be;--line:#263743;--accent:#b4d4e8;--accent-fill:#b4d4e8;--accent-text:#102833;--tint:#112735}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:wait}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:active,.button:active{transform:scale(.98)}[hidden]{display:none!important}.container{width:calc(100% - 96px);max-width:1280px;margin-inline:auto}.skip-link{position:fixed;top:10px;left:20px;z-index:var(--skip-layer);padding:8px 16px;background:var(--accent-fill);color:var(--accent-text);border-radius:8px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:var(--header-layer);border-bottom:1px solid var(--line);background:var(--bg)}.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}.brand img{width:40px;height:40px;object-fit:contain}.brand strong{display:block;font-size:19px;line-height:1.3;font-weight:650;letter-spacing:.02em}.brand small{display:block;font-family:var(--mono);font-size:9px;line-height:1.3;letter-spacing:.18em;color:var(--muted);margin-top:3px}.desktop-nav{display:flex;gap:30px;align-items:center}.desktop-nav a,.footer-main nav a{font-size:14px;color:var(--muted);white-space:nowrap}.desktop-nav a:hover,.footer-main a:hover{color:var(--text)}.nav-actions{display:flex;align-items:center;gap:8px}.icon-button{width:40px;height:40px;padding:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;background:transparent;flex-shrink:0}.icon-button:hover,.language-button:hover{background:var(--surface);border-color:var(--line)}.language-button{min-width:40px;height:40px;font:12px var(--mono);padding:8px;border:1px solid transparent;border-radius:8px;background:transparent}.menu-button{display:none}.mobile-nav{padding:10px 0 20px}.mobile-nav a{display:block;padding:12px;border-radius:8px}.mobile-nav a:hover{background:var(--surface)}.button{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:48px;padding:12px 21px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;transition:transform .18s}.button-small{min-height:38px;padding:9px 16px;gap:12px;font-size:13px;margin-left:8px}.button-primary{background:var(--accent-fill);color:var(--accent-text)}.button-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}.button-outline{background:transparent;border-color:var(--line);color:var(--text)}.button-outline:hover{background:var(--surface);border-color:var(--muted)}.icon{display:inline-block;width:20px;height:20px;flex-shrink:0;background:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.icon-arrow-right{mask-image:url('assets/icons/arrow-right.svg')}.icon-arrow-up-right{mask-image:url('assets/icons/arrow-up-right.svg')}.icon-menu{mask-image:url('assets/icons/menu-2.svg')}.menu-button[aria-expanded=true] .icon-menu{mask-image:url('assets/icons/x.svg')}.icon-code{mask-image:url('assets/icons/code.svg')}.icon-anchor{mask-image:url('assets/icons/anchor.svg')}.icon-key{mask-image:url('assets/icons/key.svg')}.icon-plug{mask-image:url('assets/icons/plug-connected.svg')}.icon-stack{mask-image:url('assets/icons/stack-2.svg')}.icon-chart{mask-image:url('assets/icons/chart-bar.svg')}.icon-shield{mask-image:url('assets/icons/shield-check.svg')}.icon-copy{mask-image:url('assets/icons/copy.svg')}.icon-check{mask-image:url('assets/icons/check.svg')}.icon-chevron{mask-image:url('assets/icons/chevron-down.svg')}
.eyebrow{font:11px var(--mono);letter-spacing:.06em;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:24px}.eyebrow .icon{width:17px;height:17px}h1{font-size:clamp(44px,4.3vw,62px);font-weight:650;line-height:1.2;letter-spacing:-.045em}h1>span{display:block}.accent-text{color:var(--accent)}.capabilities{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:27px;gap:24px}.capabilities>div{display:flex;align-items:center;gap:15px;padding-inline:20px}.capabilities>div:first-child{padding-left:0}.capabilities>div+div{border-left:1px solid var(--line)}.capabilities .icon{color:var(--accent);width:24px;height:24px}.capabilities strong{font-size:14px;font-weight:600;display:block}.capabilities small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.section{padding-block:80px}.section-heading{margin-bottom:32px;max-width:700px}.section-heading h2{font-size:32px;line-height:1.35;letter-spacing:-.025em;font-weight:600}.section-heading p:not(.eyebrow){margin-top:13px;color:var(--muted);font-size:14px;line-height:1.85}.section-heading .eyebrow{margin-bottom:14px}.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.model-card{padding:29px 30px 25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform .2s,border-color .2s}.model-card-gpt{background:var(--tint)}.model-card:hover{transform:translateY(-3px);border-color:var(--accent)}.model-top{display:flex;align-items:center;gap:12px;margin-bottom:27px}.model-logo{object-fit:contain}.claude-logo{filter:grayscale(1) brightness(.4)}.openai-logo{filter:brightness(.25)}[data-theme=dark] .claude-logo{filter:grayscale(1) brightness(1.7)}[data-theme=dark] .openai-logo{filter:brightness(0) invert(.92)}.model-provider{font:12px var(--mono);color:var(--muted)}.model-top>.icon{margin-left:auto;color:var(--muted)}.model-card h3{font-size:30px;line-height:1.2;letter-spacing:-.04em;font-weight:600}.model-card p{color:var(--muted);font-size:14px;line-height:1.9;max-width:360px;margin-top:14px}.model-tags{display:flex;gap:20px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.model-footnote{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}.model-footnote p{font-size:12px;color:var(--muted)}.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:500;white-space:nowrap}.text-link .icon{width:17px;height:17px}.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.quickstart-section{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quickstart-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}.setup{padding-top:14px;min-width:0}.setup-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:17px;margin-bottom:31px}.setup-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;color:var(--accent)}.setup-item h3{font-size:15px;font-weight:600;line-height:1.45;margin-top:2px}.setup-item p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:7px}.base-url{display:flex;align-items:center;gap:8px;max-width:320px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding-left:12px;margin-top:14px;min-width:0}.base-url code{font:11px var(--mono);color:var(--accent);min-width:0;overflow-wrap:anywhere}.base-url button{margin-left:auto;width:36px;height:36px}.base-url button .icon{width:16px;height:16px}.setup>.text-link{margin-left:57px}.code-panel{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius);overflow:hidden;min-width:0}.code-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);gap:12px}.code-filename{font:11px var(--mono);color:var(--muted)}.copy-button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 8px;font-size:11px;white-space:nowrap;color:var(--muted)}.copy-button .icon{width:14px;height:14px}.copy-button:hover{color:var(--text);border-color:var(--line)}.code-tabs{display:flex;border-bottom:1px solid var(--line);gap:24px;padding-inline:20px}.code-tabs button{border:none;border-bottom:2px solid transparent;background:none;font:11px var(--mono);padding:14px 0 12px;color:var(--muted)}.code-tabs [aria-selected=true]{border-color:var(--accent);color:var(--accent)}#code-content{overflow:auto;min-height:337px}pre{margin:0;padding:23px 24px 25px;font:12px/1.8 var(--mono);tab-size:4;width:max-content;min-width:100%}pre code{font:inherit;color:var(--text)}.syntax-comment{color:var(--muted)}.syntax-keyword,.syntax-string{color:var(--accent)}.code-note{display:flex;align-items:flex-start;gap:9px;padding:15px 20px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted)}.code-note .icon{width:16px;height:16px;margin-top:1px}.code-note p{font-size:11px;line-height:1.7}
.management-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.management-main{grid-row:span 2;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.management-copy{padding:32px 32px 27px}.management-copy>.icon,.management-secondary>.icon{color:var(--accent);width:25px;height:25px;margin-bottom:21px}.management-grid h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.4}.management-grid p{font-size:14px;color:var(--muted);line-height:1.85;max-width:360px;margin-top:12px}.management-grid .text-link{margin-top:22px}.management-main img{width:100%;height:240px;object-fit:cover;object-position:center;margin-top:auto}.management-secondary{padding:29px 32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}.key-card{background:var(--tint)}.doc-card{background:var(--elevated)}.management-secondary h3{font-size:19px}.management-secondary>.icon{margin-bottom:17px}.management-secondary .text-link{margin-top:19px}
.faq-section{border-top:1px solid var(--line);padding-block:64px 80px}.faq-list{max-width:980px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:22px;list-style:none;font-size:15px;font-weight:500}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary .icon{width:18px;height:18px;color:var(--muted);transition:transform .18s}.faq-list details[open] summary .icon{transform:rotate(180deg);color:var(--accent)}.faq-list details[open] summary{color:var(--accent)}.faq-list details>p{font-size:14px;line-height:1.9;color:var(--muted);max-width:750px;padding:0 35px 23px 0}.site-footer{border-top:1px solid var(--line);background:var(--surface)}.footer-main{display:flex;align-items:center;gap:30px;padding-block:34px}.footer-brand img{width:36px;height:36px}.footer-brand strong{font-size:17px}.footer-main>p{font-size:12px;color:var(--muted)}.footer-main nav{display:flex;gap:26px;margin-left:auto}.footer-main nav a{font-size:12px}.footer-bottom{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding-block:18px 23px;font:10px var(--mono);color:var(--muted)}.footer-bottom a{display:flex;gap:8px;align-items:center}.footer-bottom .icon{height:14px;width:14px}.footer-bottom small{font-size:inherit}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:var(--toast-layer);padding:12px 20px;border:1px solid var(--accent);background:var(--elevated);border-radius:8px;color:var(--text);font-size:13px;max-width:calc(100% - 32px);text-align:center}.noscript-note{margin:20px;font-size:14px;color:var(--muted)}
.clipboard-helper{position:fixed;top:-9999px;opacity:0}

@media(max-width:1100px){.container{width:calc(100% - 64px)}.desktop-nav{gap:19px}.nav-inner{gap:18px}.quickstart-layout{gap:36px;grid-template-columns:.86fr 1.14fr}.management-copy,.management-secondary{padding:27px}.footer-main{gap:20px}.footer-main nav{gap:18px}}
@media(max-width:900px){.desktop-nav{display:none}.menu-button{display:inline-flex}.section-heading h2{font-size:28px}.capabilities>div{padding-inline:10px;gap:10px}.capabilities strong{font-size:12px}.capabilities small{font-size:11px}.quickstart-layout{grid-template-columns:.82fr 1.18fr;gap:26px}.setup-item{grid-template-columns:32px minmax(0,1fr);gap:12px}.setup-icon{width:32px;height:32px}.setup>.text-link{margin-left:44px}.management-grid h3{font-size:19px}.management-grid p{font-size:13px}.footer-main{flex-wrap:wrap}.footer-main>p{margin-left:auto}.footer-main nav{width:100%;margin-left:47px}}
/* Every asymmetric section collapses explicitly below 768px. */
@media(max-width:767px){html{scroll-padding-top:88px}.container{width:calc(100% - 40px)}.nav-inner{height:66px;gap:12px}.brand{gap:8px}.brand img{width:34px;height:34px}.brand strong{font-size:16px}.brand small{font-size:8px}.nav-actions{gap:2px}.console-link{display:none}.icon-button,.language-button{width:36px;min-width:36px;height:40px;padding:9px}.capabilities{grid-template-columns:1fr;gap:19px;padding-block:25px}.capabilities>div,.capabilities>div:first-child{padding:0;gap:15px}.capabilities>div+div{border-left:0}.capabilities strong{font-size:13px}.capabilities small{font-size:12px}.section{padding-block:52px}.section-heading{margin-bottom:26px}.section-heading h2{font-size:26px;line-height:1.45}.section-heading p:not(.eyebrow){font-size:13px;margin-top:10px}.model-grid{grid-template-columns:1fr;gap:14px}.model-card{padding:25px}.model-top{margin-bottom:22px}.model-card h3{font-size:28px}.model-card p{font-size:13px}.model-footnote{flex-direction:column;align-items:flex-start;gap:14px;margin-top:20px}.model-footnote p{font-size:11px}.quickstart-layout{grid-template-columns:1fr;gap:28px}.setup{padding-top:0}.setup-item{grid-template-columns:36px minmax(0,1fr);gap:15px;margin-bottom:27px}.setup-icon{width:36px;height:36px}.setup>.text-link{margin-left:51px}.setup-item h3{font-size:14px}.setup-item p{font-size:12px}.base-url{max-width:320px;padding-left:11px}.base-url code{font-size:11px}.code-toolbar{padding:12px 14px}.code-tabs{gap:22px;padding-inline:16px}pre{font-size:11px;padding:19px 17px;line-height:1.9}#code-content{min-height:320px}.code-note{padding:13px 16px}.code-note p{font-size:10px}.management-grid{grid-template-columns:1fr;gap:14px}.management-main{grid-row:auto}.management-copy,.management-secondary{padding:25px}.management-grid h3{font-size:20px}.management-grid p{font-size:13px}.management-main img{height:auto;aspect-ratio:16/9}.management-secondary h3{font-size:18px}.faq-list summary{font-size:14px;padding-block:20px}.faq-list details>p{font-size:13px;padding-right:10px}.footer-main{display:grid;grid-template-columns:1fr;gap:19px;padding-block:29px}.footer-main>p{margin:0}.footer-main nav{width:auto;margin:0;gap:26px;flex-wrap:wrap}.footer-bottom{padding-block:19px;font-size:9px}.toast{bottom:18px;font-size:12px;min-width:180px}}
@media(max-width:370px){.container{width:calc(100% - 32px)}.brand strong{font-size:15px}.brand img{width:30px;height:30px}.section-heading h2{font-size:24px}.model-card,.management-copy,.management-secondary{padding:22px}.base-url code{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.button-primary:hover,.model-card:hover{transform:none}}

/* Orbital visual system. Photography supplies the atmosphere; gradients below
   are exposure masks for readable copy and seamless theme transitions. */
.brand .brand-mark {
  width: 44px;
  height: 44px;
  mix-blend-mode: multiply;
}
[data-theme=dark] .brand .brand-mark {
  filter: invert(1);
  mix-blend-mode: screen;
}
.brand { gap: 9px; }
.brand strong { font-weight: 600; letter-spacing: .06em; }
.brand small { color: var(--accent); letter-spacing: .2em; }
.site-header { background: var(--bg); }
.nav-inner { height: 76px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  background: var(--bg);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-block: 88px 112px;
}
.hero-copy { max-width: 590px; }
.hero .eyebrow { font-size: 11px; margin-bottom: 28px; letter-spacing: .12em; }
.hero h1 {
  font-size: clamp(48px, 4.65vw, 68px);
  line-height: 1.17;
  letter-spacing: -.055em;
  font-weight: 600;
}
.hero h1 .accent-text { color: var(--accent); }
.hero-description {
  max-width: 385px;
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.hero-actions .button { min-height: 49px; padding-inline: 22px; }
.hero-actions .button-outline {
  background: var(--bg);
  border-color: var(--line);
}
.hero-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 67%;
  height: 100%;
  pointer-events: none;
}
.hero-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 54%),
    linear-gradient(0deg, var(--bg) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg) 0%, transparent 20%);
}
[data-theme=light] .hero-art::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 60%),
    linear-gradient(0deg, var(--bg) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, transparent 32%);
}
.capabilities { padding-block: 25px; }
.capabilities strong { font-weight: 500; }
.capabilities .icon { color: var(--muted); }
.section { padding-block: 88px; }
.section-heading h2 { font-size: 34px; font-weight: 500; letter-spacing: -.03em; }
.model-card { padding: 32px; background: var(--surface); }
.model-card-gpt { background: var(--elevated); }
.model-top { margin-bottom: 30px; }
.model-card h3 { font-size: 34px; font-weight: 500; }
.model-tags { border-top: 0; padding-top: 0; margin-top: 25px; gap: 24px; }
.quickstart-section { background: var(--surface); }
.code-panel { box-shadow: 0 16px 40px rgb(7 16 21 / .08); }
[data-theme=dark] .code-panel { box-shadow: 0 18px 40px rgb(2 7 11 / .28); }
.management-main { background: var(--surface); }
.management-main img { height: 260px; object-position: 65% 50%; }
.key-card { position: relative; overflow: hidden; background: var(--tint); }
.key-card::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  right: -12px;
  bottom: -15px;
  background: var(--accent);
  opacity: .08;
  mask: url('assets/icons/key.svg') center / contain no-repeat;
  transform: rotate(-25deg);
  pointer-events: none;
}
.key-card > * { position: relative; z-index: 1; }
.doc-card { background: var(--elevated); }
.site-footer { background: var(--bg); }
.footer-brand .brand-mark { width: 40px; height: 40px; }
@media (min-width: 1536px) {
  .hero { min-height: 660px; }
  .hero-content { padding-top: 96px; }
}
@media (max-width: 1100px) {
  .hero { min-height: 565px; }
  .hero-content { padding-block: 76px 90px; }
  .hero-copy { max-width: 480px; }
  .hero h1 { font-size: 52px; }
  .hero-art { width: 65%; }
  .hero-actions .button { padding-inline: 18px; gap: 10px; }
}
@media (max-width: 900px) {
  .hero { min-height: 535px; }
  .hero-content { padding-block: 68px 78px; }
  .hero-copy { max-width: 410px; }
  .hero h1 { font-size: 44px; }
  .hero-description { font-size: 14px; max-width: 320px; }
  .hero-art { width: 65%; }
  .hero-actions .button { font-size: 13px; padding-inline: 16px; gap: 10px; }
  .section-heading h2 { font-size: 30px; }
}
@media (max-width: 767px) {
  .nav-inner { height: 66px; }
  .brand .brand-mark { width: 38px; height: 38px; }
  .brand strong { font-size: 16px; letter-spacing: .04em; }
  .hero { min-height: 705px; }
  .hero-content { padding-block: 46px 338px; }
  .hero-copy { max-width: 530px; }
  .hero h1 { font-size: clamp(35px, 8.8vw, 48px); line-height: 1.22; letter-spacing: -.045em; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .09em; margin-bottom: 24px; }
  .hero-description { margin-top: 23px; max-width: 350px; font-size: 14px; line-height: 1.85; }
  .hero-actions { margin-top: 27px; gap: 10px; flex-wrap: nowrap; }
  .hero-actions .button { min-height: 46px; font-size: 13px; padding-inline: 16px; gap: 10px; }
  .hero-art { inset: 224px 0 0; width: 100%; height: auto; }
  .hero-art img { object-position: 50% 41%; }
  .hero-art::after, [data-theme=light] .hero-art::after {
    background:
      linear-gradient(180deg, var(--bg) 3%, transparent 48%),
      linear-gradient(0deg, var(--bg) 0%, transparent 30%),
      linear-gradient(90deg, var(--bg) 0%, transparent 72%);
  }
  .capabilities { padding-block: 28px; }
  .section { padding-block: 56px; }
  .section-heading h2 { font-size: 26px; line-height: 1.45; }
  .model-card { padding: 25px; }
  .model-card h3 { font-size: 30px; }
  .management-main img { height: auto; aspect-ratio: 16 / 9; }
  .footer-brand .brand-mark { width: 36px; height: 36px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 34px; }
  .brand .brand-mark { width: 32px; height: 32px; }
  .hero-actions .button { padding-inline: 12px; font-size: 12px; gap: 8px; }
  .section-heading h2 { font-size: 24px; }
}

/* OpenRouter-inspired spatial organization. Layout only: retained brand tokens,
   typefaces, copy, imagery and behavioral components. Desktop uses a centered
   hero, consistent 1280px content rails and a narrower onboarding/FAQ measure. */
.site-header .container {
  width: calc(100% - 64px);
  max-width: 1440px;
}
.nav-inner { height: 64px; gap: 28px; }
.desktop-nav { margin-left: auto; gap: 28px; }
.nav-actions { gap: 8px; }
.hero { min-height: 490px; }
.hero-content { padding-block: 72px 86px; }
.hero-copy { max-width: 840px; margin-inline: auto; text-align: center; }
.hero .eyebrow { justify-content: center; margin-bottom: 22px; }
.hero h1 { font-size: clamp(48px, 4vw, 58px); line-height: 1.16; }
.hero-description { width: max-content; max-width: 100%; margin: 24px auto 0; line-height: 1.9; white-space: nowrap; text-wrap: nowrap; text-align: left; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.hero-description::-webkit-scrollbar { height: 4px; }
.hero-description::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }
.hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 394px); gap: 14px; margin: 28px auto 0; }
.hero-actions .button { min-width: 0; min-height: 46px; padding-inline: 16px; }
.hero-note { margin: 16px auto 0; color: var(--muted); font-size: 13px; line-height: 1.8; text-wrap: balance; word-break: keep-all; }
.hero-art { width: 50%; }
.hero-art img { object-position: 50% 42%; }
.hero-art::after, [data-theme=light] .hero-art::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 86%),
    linear-gradient(0deg, var(--bg) 0%, transparent 52%),
    linear-gradient(180deg, var(--bg) 0%, transparent 28%);
}
.capabilities {
  max-width: 960px;
  padding-block: 8px 38px;
  gap: 36px;
  border: 0;
}
.capabilities > div, .capabilities > div:first-child {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 0;
}
.capabilities > div + div { border: 0; }
.capabilities strong { font-size: 15px; }
.capabilities small { margin-top: 5px; font-size: 12px; }
.section { padding-block: 64px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { font-size: 28px; line-height: 1.4; }
.section-heading p:not(.eyebrow) { margin-top: 10px; }
.model-grid { gap: 24px; }
.model-card { padding: 26px 28px; }
.model-top { margin-bottom: 22px; }
.model-card h3 { font-size: 28px; }
.model-card p { max-width: 430px; margin-top: 12px; }
.model-tags { flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.model-footnote { margin-top: 20px; }
.management-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.management-main, .management-secondary {
  grid-row: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.management-main img {
  order: -1;
  width: 100%;
  height: 176px;
  margin: 0;
  object-fit: cover;
  object-position: 67% 44%;
}
.management-copy { padding: 25px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.management-copy > .icon { width: 23px; height: 23px; margin-bottom: 16px; }
.management-grid h3, .management-secondary h3 { font-size: 20px; line-height: 1.45; }
.management-grid p { font-size: 14px; margin-top: 12px; line-height: 1.85; }
.management-grid .text-link { margin-top: auto; padding-top: 20px; }
.management-visual {
  flex: none;
  height: 176px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}
.management-visual::before {
  content: '';
  width: 64px;
  height: 64px;
  background: var(--accent);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
.key-card .management-visual::before { mask-image: url('assets/icons/key.svg'); }
.doc-card .management-visual::before { mask-image: url('assets/icons/code.svg'); }
.management-visual-photo { display: block; overflow: hidden; }
.management-visual-photo::before { content: none; }
.management-visual-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.key-card::after { content: none; }
.key-card > .management-copy { z-index: auto; }
.quickstart-section > .container { max-width: 1000px; }
.quickstart-layout { grid-template-columns: 1fr; gap: 32px; }
.setup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: start;
  padding-top: 0;
}
.setup-item { grid-template-columns: 1fr; gap: 14px; margin: 0; }
.setup-icon { width: 38px; height: 38px; }
.setup-item h3 { font-size: 15px; margin-top: 0; }
.setup-item p { font-size: 13px; }
.setup-link { margin-top: 9px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.setup-link:hover { text-decoration-thickness: 2px; }
.setup > .text-link { grid-column: 1 / -1; justify-self: start; margin: 0; }
.base-url { margin-top: 12px; max-width: 100%; }
.code-panel { width: 100%; max-width: 900px; justify-self: center; }
.code-panel .code-note { border-top: 0; border-bottom: 1px solid var(--line); }
.code-panel .code-note p { font-size: 12px; }
#code-content { min-height: 0; }
pre { padding: 25px 28px; font-size: 13px; line-height: 1.9; }
.faq-section { max-width: 1000px; border-top: 0; padding-block: 64px 80px; }
.faq-list { max-width: none; }
.faq-list details > p { max-width: 790px; }
.footer-main { padding-block: 30px; }
.footer-bottom { padding-block: 18px 22px; }
@media (max-width: 1100px) {
  .nav-inner { gap: 20px; }
  .desktop-nav { gap: 22px; }
  .hero { min-height: 470px; }
  .hero-content { padding-block: 64px 76px; }
  .hero h1 { font-size: 52px; }
  .hero-art { width: 45%; }
  .management-copy { padding: 24px; }
  .management-grid h3, .management-secondary h3 { font-size: 18px; }
  .management-grid p { font-size: 13px; }
  .setup { gap: 26px 20px; }
  .base-url { padding-left: 9px; gap: 4px; }
  .base-url code { font-size: 10px; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: 46px; }
  .hero-description { max-width: 100%; font-size: 14px; }
  .hero-art { width: 42%; }
  .capabilities { gap: 20px; }
  .capabilities strong { font-size: 13px; }
  .capabilities small { font-size: 11px; }
  .management-grid { gap: 16px; }
  .management-copy { padding: 21px 18px 23px; }
  .management-grid h3, .management-secondary h3 { font-size: 17px; }
  .management-grid p { font-size: 12px; }
  .management-main img, .management-visual { height: 148px; }
  .setup { gap: 24px 16px; }
  .setup-item h3 { font-size: 14px; }
  .setup-item p { font-size: 12px; }
  .base-url code { font-size: 9px; }
}
@media (max-width: 767px) {
  .container { width: calc(100% - 48px); }
  .site-header .container { width: calc(100% - 32px); }
  .nav-inner { height: 60px; gap: 12px; }
  .nav-actions { gap: 2px; }
  .brand .brand-mark { width: 34px; height: 34px; }
  .hero { min-height: 720px; }
  .hero-content { padding-block: 46px 298px; }
  .hero-copy { max-width: 530px; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 48px); line-height: 1.22; }
  .hero-description { max-width: 100%; margin-top: 22px; font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; max-width: 370px; margin: 24px auto 0; gap: 12px; }
  .hero-actions .button { width: 100%; min-height: 46px; }
  .hero-art { inset: 344px 0 0; width: 100%; height: auto; }
  .hero-art img { object-position: 50% 37%; }
  .hero-art::after, [data-theme=light] .hero-art::after {
    background:
      linear-gradient(180deg, var(--bg) 0%, transparent 58%),
      linear-gradient(0deg, var(--bg) 0%, transparent 30%),
      linear-gradient(90deg, var(--bg) 0%, transparent 75%);
  }
  .capabilities { padding-block: 18px 28px; gap: 24px; }
  .capabilities > div, .capabilities > div:first-child {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    gap: 15px;
  }
  .capabilities strong { font-size: 14px; }
  .capabilities small { font-size: 12px; }
  .section { padding-block: 48px; }
  .section-heading { margin-bottom: 24px; }
  .section-heading h2 { font-size: 25px; line-height: 1.45; }
  .model-grid { gap: 16px; }
  .model-card { padding: 24px; }
  .model-card h3 { font-size: 28px; }
  .model-footnote { gap: 12px; }
  .management-grid { grid-template-columns: 1fr; gap: 16px; }
  .management-copy { padding: 25px; }
  .management-grid h3, .management-secondary h3 { font-size: 20px; }
  .management-grid p { font-size: 13px; }
  .management-main img { height: auto; aspect-ratio: 16 / 9; }
  .management-visual { height: 126px; }
  .management-visual-photo { height: auto; aspect-ratio: 16 / 9; }
  .management-visual::before { width: 48px; height: 48px; }
  .setup { grid-template-columns: 1fr; gap: 25px; }
  .setup-item { grid-template-columns: 36px minmax(0, 1fr); gap: 15px; }
  .setup-icon { width: 36px; height: 36px; }
  .setup > .text-link { margin-left: 51px; }
  .setup-item h3 { font-size: 14px; }
  .setup-item p { font-size: 12px; }
  .base-url { padding-left: 10px; gap: 4px; }
  .base-url code { font-size: 10px; }
  .quickstart-layout { gap: 28px; }
  pre { font-size: 11px; padding: 20px 17px; line-height: 1.9; }
  .faq-section { padding-block: 48px 60px; }
  .footer-main { padding-block: 28px; gap: 18px; }
  .footer-main nav { gap: 22px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 34px; }
  .brand .brand-mark { width: 32px; height: 32px; }
  .section-heading h2 { font-size: 24px; }
  .model-card, .management-copy { padding: 22px; }
}

/* Both plates share the original canvas and crop. The foreground moves 3x
   farther; the existing exposure mask stays above the two moving layers. */
.hero-art { isolation: isolate; overflow: hidden; }
.hero-art::after { z-index: 1; }
.hero-layer { position: absolute; inset: 0; display: block; z-index: 0; }
.hero-layer-shuttle { display: none; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-layer { inset: -18px; }
  .hero-layer-shuttle { display: block; }
}
.hero-art[data-parallax-fallback] .hero-layer { inset: 0; }
.hero-art[data-parallax-fallback] .hero-layer-shuttle { display: none; }

/* Draw the theme control directly, without loading a CSS mask image. */
.theme-symbol { display: block; width: 20px; height: 20px; flex: none; }
.theme-symbol-sun { display: none; }
[data-theme=dark] .theme-symbol-moon { display: none; }
[data-theme=dark] .theme-symbol-sun { display: block; }

/* Quickstart icons render directly; copy state classes retain their behavior. */
.quickstart-section svg.icon.inline-icon { background: none; mask-image: none; -webkit-mask-image: none; }
.quickstart-section .check-glyph { display: none; }
.quickstart-section .icon-check .copy-glyph { display: none; }
.quickstart-section .icon-check .check-glyph { display: inline; }