:root {
  color-scheme: light;
  --bg:#f4f6f0; --surface:#fcfdf9; --subtle:#e9eee3; --text:#152019; --muted:#546257; --faint:#647266;
  --line:#d8dfd1; --strong:#a9baa1; --accent:#4b7113; --button:#bbf34d; --button-text:#142007; --panel-top:#fcfdf9; --panel-bottom:#edf1e7; --header:rgba(244,246,240,.94);
  --max:1160px; --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-family:var(--font); font-synthesis:none; text-rendering:optimizeLegibility;
}
html[data-theme="dark"] { color-scheme:dark; --bg:#090d0b; --surface:#101611; --subtle:#19221a; --text:#eff4e9; --muted:#a8b3a5; --faint:#859280; --line:#263125; --strong:#47593d; --accent:#bbf34d; --button:#bbf34d; --button-text:#142007; --panel-top:#141d14; --panel-bottom:#0c120e; --header:rgba(9,13,11,.92); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,select { font:inherit; color:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
img { max-width:100%; display:block; }
code,pre,.mini-label,.eyebrow,.index-number { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
button,select,a,summary { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.icon { display:block; flex-shrink:0; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width:min(calc(100% - 80px),var(--max)); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; padding:10px 20px; background:var(--button); color:var(--button-text); }
.skip-link:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:30; background:var(--header); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.nav-shell { display:flex; align-items:center; height:82px; gap:30px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand img { width:146px; height:auto; }
.nav-links { display:flex; align-items:center; gap:27px; margin-left:16px; }
.nav-links>a,.sign-in { font-size:13px; font-weight:550; white-space:nowrap; color:var(--muted); }
.nav-links>a:hover,.sign-in:hover { color:var(--text); }
.nav-tools { display:flex; align-items:center; gap:3px; margin-left:auto; padding-right:19px; border-right:1px solid var(--line); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:9px; background:transparent; color:var(--muted); }
.icon-button:hover { background:var(--subtle); color:var(--text); }
.theme-switch .sun-icon { display:none; }
html[data-theme="dark"] .theme-switch .moon-icon { display:none; }
html[data-theme="dark"] .theme-switch .sun-icon { display:block; }
.account-actions { display:flex; align-items:center; gap:22px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:11px 22px; border:1px solid var(--button); border-radius:11px; background:var(--button); color:var(--button-text); font-weight:650; font-size:13px; line-height:1.5; transition:opacity .15s,box-shadow .2s; white-space:nowrap; }
.button:hover { opacity:.94; box-shadow:0 6px 24px #9bbb4030; }
.button.small { min-height:39px; padding:8px 16px; font-size:12px; }
.button.secondary { background:transparent; border-color:var(--strong); color:var(--text); }
.mobile-menu,.mobile-account { display:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:650; }
h2 { font-size:37px; line-height:1.25; letter-spacing:-.035em; margin-bottom:0; text-wrap:balance; }
.eyebrow { color:var(--accent); font-size:10px; line-height:1.5; letter-spacing:.09em; font-weight:500; margin-bottom:22px; }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.32fr .92fr; gap:68px; align-items:center; padding-top:102px; padding-bottom:96px; }
.hero h1 { margin:0 0 26px; font-size:clamp(42px,4.85vw,68px); font-weight:740; line-height:1.12; letter-spacing:-.052em; }
.hero h1>span { display:block; }
.hero-secondary { color:var(--accent); background:linear-gradient(100deg,#baff49 5%,#dcffc5 55%,#6ce4f3); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
html[data-theme="light"] .hero-secondary { background-image:linear-gradient(100deg,#53800e 5%,#659f23 45%,#087c9b); }
.hero-body { color:var(--muted); max-width:490px; font-size:17px; line-height:1.8; margin-bottom:30px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--text); font-size:13px; font-weight:550; }
.text-link:hover { color:var(--accent); }
.hero-note { margin:24px 0 0; font-size:12px; color:var(--faint); }
.connection-card { background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom)); border:1px solid var(--strong); border-radius:20px; overflow:hidden; box-shadow:0 24px 70px #0002,inset 0 1px #ffffff08; }
.connection-heading { display:flex; gap:12px; align-items:center; padding:23px 26px; border-bottom:1px solid var(--line); }
.connection-heading h2 { font-size:14px; font-weight:600; letter-spacing:0; }
.connection-mark { font-family:monospace; font-size:12px; color:var(--accent); }
.connection-body { padding:28px 26px 24px; }
.mini-label { color:var(--faint); font-size:9px; letter-spacing:.09em; margin-bottom:11px; }
.endpoint-field { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:5px 6px 5px 13px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.endpoint-field code { font-size:14px; white-space:nowrap; }
.endpoint-field .icon { width:15px; }
.connection-options { margin:21px 0 0; font-size:12px; }
.connection-options>div { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); }
.connection-options dt { color:var(--faint); }
.connection-options dd { margin:0; }
.connection-options a { display:flex; align-items:center; gap:8px; }
.connection-options a:hover { color:var(--accent); }
.connection-options .icon { width:13px; }
.connection-footer { padding-top:24px; font-size:11px; color:var(--faint); }
.connection-footer p { margin-bottom:5px; }
.subtle-link { display:inline-flex; align-items:center; gap:6px; color:var(--accent); }
.subtle-link .icon { width:13px; }
.section { padding-top:64px; padding-bottom:64px; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:80px; margin-bottom:38px; }
.section-heading>div { max-width:610px; }
.section-heading .eyebrow { margin-bottom:15px; }
.section-description { font-size:14px; color:var(--muted); line-height:1.8; margin:0; }
.section-heading>.section-description { max-width:330px; }
.model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.model-item { padding:29px 26px 30px; background:linear-gradient(140deg,var(--panel-top),var(--panel-bottom)); border:1px solid var(--line); border-radius:18px; transition:border-color .2s,background .2s; }
.model-item:first-child { padding-left:26px; }
.model-item:last-child { padding-right:26px; }
.model-item+.model-item { border-left:1px solid var(--line); }
.model-item:hover { border-color:var(--strong); background:var(--subtle); }
.model-identity { display:flex; align-items:center; gap:14px; }
.model-identity h3 { font-size:25px; line-height:1.2; margin:0 0 2px; font-weight:550; letter-spacing:-.025em; }
.model-identity span { font-size:10px; color:var(--faint); }
.model-identity>.icon { width:17px; margin-left:auto; color:var(--faint); }
.model-logo { width:36px; height:36px; object-fit:contain; }
html[data-theme="dark"] .openai .model-logo { filter:invert(1); }
.model-item p { margin:20px 0 0; max-width:275px; color:var(--muted); font-size:13px; line-height:1.8; }
.models-bottom { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:21px; }
.models-bottom p { max-width:580px; color:var(--faint); font-size:11px; margin:0; }
.models-bottom .text-link { flex-shrink:0; font-size:12px; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:6px; }
.benefit { padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.index-number { font-size:12px; color:var(--faint); display:block; margin-bottom:22px; }
.benefit h3 { font-size:19px; line-height:1.4; margin-bottom:12px; }
.benefit p { font-size:14px; line-height:1.9; margin-bottom:0; color:var(--muted); }
.quick-section { display:grid; grid-template-columns:.88fr 1.12fr; gap:85px; align-items:start; padding-block:72px; }
.quick-copy h2 { white-space:pre-line; font-size:40px; }
.quick-copy>.section-description { margin-top:22px; max-width:345px; }
.steps { list-style:none; padding:0; margin:35px 0 0; display:grid; gap:26px; }
.steps li { display:flex; align-items:flex-start; gap:16px; }
.step-number { display:grid; place-items:center; width:27px; height:27px; flex-shrink:0; border:1px solid var(--strong); border-radius:50%; color:var(--accent); font-family:monospace; font-size:11px; }
.steps h3 { font-size:14px; margin:1px 0 6px; font-weight:600; }
.steps p { font-size:12px; color:var(--muted); line-height:1.8; margin:0; max-width:315px; }
.code-wrap { min-width:0; }
.code-panel { background:#0c120e; color:#e1e9db; border:1px solid #344331; border-radius:18px; overflow:hidden; }
.code-heading { min-height:51px; padding:7px 17px 7px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; border-bottom:1px solid #293526; }
.code-copy { display:flex; gap:7px; align-items:center; padding:8px; border:0; background:transparent; color:#a8b5a0; font-size:10px; border-radius:3px; }
.code-copy:hover { background:#202b39; color:#fff; }
.code-copy .icon { width:13px; height:13px; }
.code-tabs { display:flex; gap:23px; padding:0 22px; }
.code-tabs button { padding:16px 0 11px; border:0; border-bottom:2px solid transparent; background:transparent; color:#98a592; font-size:11px; }
.code-tabs button[aria-selected="true"] { border-bottom-color:#bbf34d; color:#f1f7fe; }
.code-panel :focus-visible { outline-color:#bbf34d; }
.code-example { margin:0; padding:23px 22px 28px; font-size:11px; line-height:1.9; overflow:auto; min-height:338px; tab-size:2; }
.syntax-keyword { color:#a9c9c1; }
.syntax-string { color:#bbf34d; }
.code-setup { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 22px; border-top:1px solid #293526; font-size:10px; color:#98a592; }
.code-setup code { color:#cbd7c3; }
.code-note,.protocol-note { margin:15px 0 0; color:var(--faint); font-size:11px; line-height:1.8; }
.protocol-note { margin-top:8px; }
.protocol-note a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.faq-section { display:grid; grid-template-columns:.8fr 1.5fr; gap:72px; padding-block:64px; border-top:1px solid var(--line); }
.faq-heading { padding-top:13px; }
.faq-heading h2 { font-size:34px; max-width:340px; }
.faq-heading>.section-description { margin-top:16px; max-width:285px; }
.faq-console { margin-top:24px; font-size:12px; }
.faq-console p { color:var(--faint); margin-bottom:5px; }
.faq-console .text-link { font-size:12px; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.faq-list summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:20px 0; font-size:14px; font-weight:550; line-height:1.65; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-plus { color:var(--faint); width:15px; }
.faq-list details[open] .plus-vertical { display:none; }
.faq-answer { padding:0 35px 25px 0; font-size:13px; line-height:1.9; color:var(--muted); overflow-wrap:anywhere; }
.faq-answer p { margin:0 0 13px; }
.faq-answer p:last-child { margin-bottom:0; }
.final-cta { text-align:center; padding:56px 28px 60px; margin-bottom:56px; border:1px solid var(--line); border-radius:26px; background:radial-gradient(ellipse at 50% 130%,#9ed72e16,transparent 65%),linear-gradient(140deg,var(--panel-top),var(--panel-bottom)); }
.final-cta h2 { font-size:36px; }
.final-cta p { margin:18px 0 26px; color:var(--muted); font-size:14px; }
.site-footer { border-top:1px solid var(--line); padding-top:38px; padding-bottom:20px; }
.footer-main { display:flex; justify-content:space-between; align-items:center; gap:50px; padding-bottom:36px; }
.footer-main .brand img { width:126px; }
.footer-main p { font-size:11px; color:var(--faint); margin:13px 0 0; }
.footer-main nav { display:flex; flex-wrap:wrap; gap:25px; font-size:12px; color:var(--muted); }
.footer-main nav a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid var(--line); padding-top:18px; display:flex; justify-content:space-between; gap:30px; color:var(--faint); font-size:10px; }
.toast { position:fixed; z-index:100; bottom:25px; left:50%; transform:translate(-50%,8px); max-width:calc(100% - 32px); padding:12px 20px; background:var(--button); color:var(--button-text); border-radius:5px; font-size:12px; box-shadow:0 4px 20px #0002; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
html[lang^="zh"] h1 { letter-spacing:-.045em; line-height:1.25; }
html[lang^="zh"] h2 { letter-spacing:-.02em; }
html[lang^="zh"] .eyebrow { font-family:var(--font); font-size:11px; letter-spacing:.08em; }

.hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background-image:linear-gradient(#859ab00b 1px,transparent 1px),linear-gradient(90deg,#859ab00b 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(180deg,#000,transparent 92%); }
.hero::after { content:""; position:absolute; z-index:-1; top:12%; right:0; width:45%; height:70%; pointer-events:none; background:radial-gradient(ellipse,#59dbeb0d,transparent 70%); }
.hero-copy>.eyebrow { display:inline-flex; align-items:center; padding:7px 12px; border:1px solid var(--line); border-radius:99px; background:var(--surface); font-size:10px; letter-spacing:.045em; }
.connection-mark { padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
html[data-theme="light"] .connection-card { box-shadow:0 20px 60px #273e5612; }
html[data-theme="dark"] .button:not(.secondary) { box-shadow:0 5px 25px #b7eb3b12; }
.language-switch .icon { width:19px; height:19px; }
.docs-dialog { width:min(820px,calc(100% - 32px)); max-height:85dvh; margin:auto; padding:0; border:1px solid var(--strong); border-radius:18px; background:var(--surface); color:var(--text); box-shadow:0 30px 100px #0007; overflow:auto; }
.docs-dialog::backdrop { background:#02060bc4; backdrop-filter:blur(4px); }
.docs-header { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:17px 25px; gap:20px; border-bottom:1px solid var(--line); background:var(--surface); }
.docs-header h2 { font-size:21px; }
.docs-header form { margin:0; }
.docs-body { padding:25px; font-size:13px; line-height:1.9; color:var(--muted); }
.docs-body p { margin-bottom:22px; }
.docs-body h3 { color:var(--text); margin:25px 0 12px; font-size:15px; }
.docs-table-wrap { overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:9px; }
.docs-dialog table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
.docs-dialog th,.docs-dialog td { padding:13px; border-bottom:1px solid var(--line); }
.docs-dialog tbody tr:last-child>* { border-bottom:0; }
.docs-dialog th { color:var(--text); font-weight:550; background:var(--subtle); }
.docs-dialog code { font-size:10px; white-space:nowrap; }
.docs-more { margin:24px 0; border-top:1px solid var(--line); }
.docs-more details { border-bottom:1px solid var(--line); }
.docs-more summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; color:var(--text); font-size:13px; }
.docs-more summary::-webkit-details-marker { display:none; }
.docs-more details[open] .plus-vertical { display:none; }
.docs-more .faq-answer { padding:0 15px 20px 0; }
.docs-more .faq-answer p { margin-bottom:13px; }
@media(max-width:1100px) {
 .nav-shell{gap:20px}.nav-links{gap:20px;margin-left:0}.nav-tools{padding-right:13px}.account-actions{gap:16px}.hero{gap:40px;grid-template-columns:1.15fr 1fr}.hero h1{font-size:49px}.quick-section{gap:50px}.section-heading{gap:45px}.faq-section{gap:55px}.brand img{width:131px}
}
@media(max-width:900px) {
 .shell{width:calc(100% - 48px)}.nav-shell{height:72px;gap:18px}.nav-links{gap:20px}.account-actions .sign-in{display:none}.nav-tools{border:0;padding:0}.account-actions{display:flex}.hero{grid-template-columns:1fr 1fr;gap:35px;padding-block:70px}.hero h1{font-size:43px}.hero-body{font-size:15px}.hero-actions{gap:20px}.hero-actions .text-link{font-size:12px}.connection-heading{padding:20px}.connection-body{padding:22px 20px}.endpoint-field code{font-size:12px}.section-heading{display:block}.section-heading>.section-description{max-width:550px;margin-top:18px}.model-item{padding-inline:20px}.model-identity{gap:10px}.model-identity h3{font-size:22px}.model-logo{width:30px;height:30px}.models-bottom{align-items:flex-start}.benefits-grid{gap:30px}.quick-section{gap:35px;grid-template-columns:.8fr 1.2fr}.quick-copy h2{font-size:36px}.code-example{font-size:10px}.faq-section{grid-template-columns:.7fr 1.3fr;gap:40px}.faq-heading h2{font-size:30px}
}
@media(max-width:700px) {
 .shell{width:calc(100% - 40px)}.nav-shell{height:68px;gap:10px}.brand img{width:126px}.nav-tools{gap:0}.icon-button{width:36px;height:40px}.mobile-menu{display:flex}.account-actions{display:none}.nav-links{display:none}.nav-links.open{position:absolute;top:68px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:24px 20px;display:flex;align-items:stretch;flex-direction:column;gap:0;box-shadow:0 15px 22px #0001}.nav-links>a{padding:12px 0;font-size:15px}.mobile-account{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}.mobile-account .button{min-height:44px}.hero{grid-template-columns:1fr;gap:43px;padding-top:52px;padding-bottom:57px}.hero .eyebrow{margin-bottom:20px}.hero h1{font-size:clamp(37px,8.3vw,56px);margin-bottom:22px;letter-spacing:-.045em}.hero-body{font-size:15px;max-width:520px;margin-bottom:25px}.hero-actions{gap:22px}.hero-note{margin-top:18px;font-size:11px}.connection-card{max-width:520px;width:100%;box-shadow:none}.connection-heading{padding:18px 21px}.connection-heading h2{font-size:13px}.connection-body{padding:22px 21px}.endpoint-field code{font-size:14px}.connection-footer{padding-top:20px}.section{padding-block:52px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:29px}.section-heading>.section-description{font-size:13px;margin-top:15px}.eyebrow{font-size:9px;margin-bottom:16px}.model-grid{grid-template-columns:1fr}.model-item,.model-item:first-child,.model-item:last-child{padding:23px}.model-item+.model-item{border:1px solid var(--line)}.model-identity h3{font-size:25px}.model-logo{width:36px;height:36px}.model-identity{gap:15px}.model-item p{margin-top:13px;max-width:none;font-size:12px}.models-bottom{display:block;padding-top:20px}.models-bottom p{font-size:10px;line-height:1.8}.models-bottom .text-link{margin-top:13px}.benefits-grid{grid-template-columns:1fr;gap:25px}.benefit{display:grid;grid-template-columns:30px 1fr;column-gap:15px;padding:23px}.index-number{grid-row:1 / 3;margin:2px 0 0}.benefit h3{font-size:17px;margin:0 0 9px}.benefit p{font-size:13px}.quick-section{grid-template-columns:1fr;gap:32px}.quick-copy h2{font-size:34px}.quick-copy>.section-description{max-width:none;margin-top:18px;font-size:13px}.steps{gap:23px;margin-top:28px}.steps p{max-width:none}.code-heading{font-size:10px;padding-left:16px}.code-tabs{padding-inline:16px}.code-example{padding:23px 16px;min-height:330px;font-size:10px}.code-setup{padding-inline:16px}.faq-section{display:block;padding-top:46px;padding-bottom:46px}.faq-heading{padding:0 0 27px}.faq-heading h2{max-width:none}.faq-heading>.section-description{max-width:none;margin-top:15px;font-size:13px}.faq-console{display:block;margin-top:17px}.faq-console>p{display:none}.faq-list summary{font-size:13px;gap:20px;padding:20px 0}.faq-answer{font-size:12px;padding-right:18px}.final-cta{padding:46px 20px 55px;margin-bottom:40px}.final-cta h2{font-size:28px}.final-cta p{font-size:13px;line-height:1.8}.footer-main{display:block;padding-bottom:25px}.footer-main nav{margin-top:28px;gap:22px;font-size:11px}.footer-bottom{display:block;font-size:9px}.footer-bottom>span{display:block}.footer-bottom>span+span{margin-top:9px}
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }

/* dev.dog identity: graphite surfaces, consistent curves, restrained neon. */
::selection { background:var(--button); color:var(--button-text); }
.brand { gap:10px; }
.brand-symbol { display:block; position:relative; width:42px; height:46px; overflow:hidden; flex-shrink:0; }
.brand .brand-symbol img,.footer-main .brand .brand-symbol img { position:absolute; width:64px; max-width:none; height:64px; left:-11px; top:-9px; }
.brand-name { font-size:25px; font-weight:750; letter-spacing:-1.2px; line-height:1; }
.brand-name>span,.brand-dot { color:var(--accent); }
.nav-shell { height:80px; }
.button { border-radius:12px; gap:20px; }
.button:hover { opacity:1; box-shadow:0 0 26px #a3ed3524; }
.nav-links>a:hover { color:var(--accent); }
.hero { grid-template-columns:1.2fr 1fr; gap:72px; padding-block:68px 72px; }
.hero h1 { font-size:clamp(42px,4.6vw,64px); line-height:1.14; letter-spacing:-.055em; }
.hero-secondary,html[data-theme="light"] .hero-secondary { background:none; -webkit-text-fill-color:currentColor; color:var(--accent); }
.hero-copy>.eyebrow { padding:0; border:0; border-radius:0; background:none; letter-spacing:.1em; gap:10px; }
.hero-copy>.eyebrow::before { content:""; width:18px; height:2px; background:var(--accent); }
.hero::before { inset:0 -30px; background-image:linear-gradient(#81a36709 1px,transparent 1px),linear-gradient(90deg,#81a36709 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,#000 65%,transparent); }
.hero::after { top:0; right:-2%; height:90%; width:52%; background:radial-gradient(ellipse,#a5ed3810,transparent 65%); }
.hero-body { max-width:455px; font-size:16px; }
.hero-note { font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; }
.hero-visual { min-width:0; }
.brand-stage { position:relative; margin:0; padding:18px 24px 22px; }
.stage-label { display:block; font:9px "SFMono-Regular",Consolas,monospace; letter-spacing:.19em; color:var(--faint); }
.mascot-frame { position:relative; width:290px; height:285px; margin:0 auto 8px; }
.mascot-frame::before,.mascot-frame::after { content:""; position:absolute; width:18px; height:18px; opacity:.65; border-color:var(--accent); border-style:solid; }
.mascot-frame::before { top:25px; left:7px; border-width:1px 0 0 1px; }
.mascot-frame::after { bottom:4px; right:7px; border-width:0 1px 1px 0; }
.hero-mascot { position:absolute; width:360px; max-width:none; height:360px; top:-32px; left:-35px; filter:drop-shadow(0 0 22px #abf53612); }
.brand-stage figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; }
.brand-stage figcaption>span:first-child { font-size:25px; font-weight:750; letter-spacing:-1px; }
.brand-stage figcaption>span:last-child { color:var(--faint); font-size:11px; }
.connection-card { position:relative; border-radius:20px; background:var(--surface); border-color:var(--line); box-shadow:none; margin:0 16px; }
.connection-heading { padding:13px 17px 0; gap:10px; border:0; }
.connection-heading h2 { font:9px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; color:var(--muted); }
.connection-mark { padding:0; border:0; background:none; color:var(--accent); }
.connection-docs { margin-left:auto; color:var(--faint); }
.connection-docs:hover { color:var(--accent); }
.connection-docs .icon { width:15px; }
.connection-body { padding:5px 10px 9px 17px; }
.endpoint-field { padding:0; background:none; border:0; border-radius:0; }
.endpoint-field code { font-size:15px; }
html[data-theme="light"] .connection-card { box-shadow:0 8px 30px #273e5608; }
.section { padding-block:54px; border-top:0; }
.section-heading { margin-bottom:32px; }
h2 { font-size:33px; }
.eyebrow { letter-spacing:.13em; }
.model-grid { gap:16px; }
.model-item { position:relative; background:var(--surface); border-radius:20px; padding:28px 26px; transition:border-color .2s,transform .2s; }
.model-item::after { content:none; position:absolute; width:16px; height:2px; background:var(--strong); right:24px; bottom:22px; transition:background .2s; }
.model-item:hover { background:var(--surface); border-color:var(--accent); transform:translateY(-3px); }
.model-item:hover::after { background:var(--accent); }
.model-item p { padding-right:15px; }
.model-identity h3 { font-weight:600; }
.benefits-grid { gap:16px; }
.benefit { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; }
.index-number { color:var(--accent); margin-bottom:20px; font-size:11px; }
.benefit h3 { font-size:18px; }
.benefit p { font-size:13px; }
.quick-copy h2 { font-size:37px; }
.step-number { border-radius:9px; background:var(--surface); }
.code-panel { border-radius:20px; box-shadow:0 20px 60px #00000012; }
.code-heading { color:#a8b5a0; }
.code-tabs button[aria-selected="true"] { color:#bbf34d; }
.code-example { font-size:11px; }
.faq-heading h2 { font-size:32px; }
.faq-list details[open] summary { color:var(--accent); }
.faq-list details[open] { border-bottom-color:var(--strong); }
.final-cta { position:relative; overflow:hidden; border-radius:20px; padding:58px 28px; background:radial-gradient(ellipse at 50% 160%,#a7ef3820,transparent 70%),var(--surface); }
.final-cta::before { content:none; position:absolute; top:0; left:calc(50% - 36px); width:72px; height:2px; background:var(--accent); box-shadow:0 0 20px #b3f34d50; }
.final-cta h2 { font-size:33px; }
.docs-dialog { border-radius:20px; }
@media(min-width:701px) and (max-width:1100px) {
 .nav-shell{gap:14px}.nav-links{gap:16px}.brand-name{font-size:22px}.account-actions .sign-in{display:none}.nav-tools{padding-right:10px}.hero{gap:30px;grid-template-columns:1.15fr 1fr}.hero h1{font-size:46px}.mascot-frame{width:240px;height:253px}.hero-mascot{width:320px;height:320px;left:-40px;top:-27px}.brand-stage{padding-inline:16px}.brand-stage figcaption{flex-wrap:wrap;gap:4px}.connection-card{margin:0}.benefits-grid{gap:14px}.benefit{padding-inline:17px}
}
@media(min-width:701px) and (max-width:820px) {
 .nav-links{gap:12px}.nav-links>a{font-size:11px}.account-actions .button{padding-inline:12px;font-size:11px}.nav-shell{gap:10px}.hero h1{font-size:38px}.brand-name{font-size:20px}.brand-symbol{width:34px}.hero-body{font-size:14px}.hero-actions{gap:18px}
}
@media(max-width:700px) {
 .nav-shell{height:68px}.brand-name{font-size:23px}.brand-symbol{width:36px;height:40px}.brand .brand-symbol img,.footer-main .brand .brand-symbol img{width:56px;height:56px;left:-10px;top:-8px}.hero{grid-template-columns:1fr;gap:26px;padding-block:48px}.hero h1{font-size:clamp(36px,8.7vw,56px)}.hero-body{font-size:15px}.hero-visual{width:100%;max-width:460px;justify-self:center}.brand-stage{padding:10px 8px 18px}.mascot-frame{height:233px;width:240px;margin-top:0;margin-bottom:0}.hero-mascot{height:290px;width:290px;left:-25px;top:-26px}.mascot-frame::before{top:12px}.mascot-frame::after{bottom:0}.brand-stage figcaption>span:first-child{font-size:23px}.stage-label{font-size:8px}.connection-card{margin:0}.hero::before{inset:0;mask-image:linear-gradient(180deg,transparent,#000)}.hero::after{width:100%;top:40%;height:60%;right:0}.section{padding-block:46px}.section-heading h2,.faq-heading h2{font-size:28px}.model-grid{gap:12px}.model-item,.model-item:first-child,.model-item:last-child{padding:22px}.benefits-grid{gap:20px}.benefit{padding:4px 0 4px 17px;grid-template-columns:26px 1fr;column-gap:12px}.index-number{margin:3px 0 0}.quick-copy h2{font-size:32px}.code-example{font-size:10px}.faq-heading{padding-bottom:24px}.final-cta{padding:44px 22px}.final-cta h2{font-size:28px}.hero-note{font-size:10px;line-height:1.8}
}

/* Shared surface and motion treatment; keep the mascot as the only animated focus. */
:root { --line:#dfe4db; --surface:#fcfdfb; }
html[data-theme="dark"] { --bg:#0b0e0d; --surface:#141917; --subtle:#1c2420; --line:#29322d; --strong:#475c45; --header:rgba(11,14,13,.88); }
.site-header { border-bottom-color:transparent; }
.hero { padding-top:60px; padding-bottom:50px; }
.hero::before { display:none; }
.hero::after { background:radial-gradient(ellipse,#b4f44812,transparent 66%); }
.hero-copy>.eyebrow { padding:7px 12px; border:1px solid var(--line); border-radius:99px; letter-spacing:.025em; font-family:var(--font); background:var(--surface); }
.hero-copy>.eyebrow::before { width:5px; height:5px; border-radius:50%; }
.eyebrow,html[lang^="zh"] .eyebrow { font-family:var(--font); letter-spacing:.03em; }
.hero-note { font-family:var(--font); }
.hero-visual { perspective:900px; }
.brand-stage { display:grid; place-items:center; padding:18px 0 25px; }
.mascot-frame { width:320px; height:330px; margin:0; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .3s ease-out; }
.mascot-frame::before { inset:24% 8% 10%; width:auto; height:auto; border:0; border-radius:50%; opacity:.45; background:radial-gradient(ellipse,#a3f33435,transparent 70%); filter:blur(18px); animation:mascot-glow 5s ease-in-out infinite; }
.mascot-frame::after { width:160px; height:15px; left:calc(50% - 80px); right:auto; bottom:-4px; border:0; border-radius:50%; opacity:.3; background:#99d52f; filter:blur(22px); animation:mascot-shadow 5s ease-in-out infinite; }
.mascot-float { position:absolute; inset:0; animation:mascot-hover 5s ease-in-out infinite; }
.hero-mascot { width:410px; height:410px; top:-44px; left:-45px; filter:drop-shadow(0 12px 20px #0002) drop-shadow(0 0 12px #b4f44818); }
.connection-card { margin:16px 16px 0; background:linear-gradient(130deg,var(--surface),var(--panel-bottom)); }
.connection-heading { padding:17px 19px 0; }
.connection-body { padding:7px 12px 13px 19px; }
.section-heading { align-items:center; gap:48px; }
.model-item,.benefit { background:linear-gradient(145deg,var(--surface),var(--panel-bottom)); }
.model-item:hover { box-shadow:0 8px 32px #b0ee3a08; }
.index-number { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--subtle); font-size:10px; }
.faq-list { padding:5px 24px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.faq-list details:last-child { border-bottom:0; }
.final-cta { background:radial-gradient(ellipse at 50% 140%,#b4ef3820,transparent 75%),var(--surface); }
@keyframes mascot-hover { 0%,100% { transform:translateY(3px) rotate(-1deg); } 50% { transform:translateY(-11px) rotate(1deg); } }
@keyframes mascot-glow { 0%,100% { opacity:.35; transform:scale(.94); } 50% { opacity:.7; transform:scale(1.06); } }
@keyframes mascot-shadow { 0%,100% { opacity:.3; transform:scaleX(1); } 50% { opacity:.16; transform:scaleX(.8); } }
.hero-visual.motion-paused .mascot-float,.hero-visual.motion-paused .mascot-frame::before,.hero-visual.motion-paused .mascot-frame::after { animation-play-state:paused; }
@media(min-width:701px) and (max-width:1100px) { .mascot-frame{width:260px;height:285px}.hero-mascot{width:350px;height:350px;left:-45px;top:-35px}.benefit{padding:22px}.section-heading{gap:30px} }
@media(max-width:700px) { .hero{padding-block:42px;gap:14px}.brand-stage{padding:10px 0 18px}.mascot-frame{width:240px;height:254px}.hero-mascot{width:310px;height:310px;left:-35px;top:-33px}.connection-card{margin:12px 0 0}.benefits-grid{gap:12px}.benefit{padding:22px;grid-template-columns:30px 1fr}.section{padding-block:38px}.faq-list{padding-inline:19px}.faq-list summary{padding-block:19px}.hero-copy>.eyebrow{font-size:10px} }
@media(prefers-reduced-motion:reduce) { .mascot-float,.mascot-frame::before,.mascot-frame::after { animation:none!important; }.mascot-frame{transform:none!important} }
/* Neutral daylight and a compact endpoint beneath a pointer-driven logo. */
html[data-theme="light"] {
 --bg:#fafafa; --surface:#ffffff; --subtle:#f0f1f1; --text:#191c20; --muted:#60666c; --faint:#73797f;
 --line:#e2e4e5; --strong:#bcc2c6; --accent:#477218; --button:#bcf34c; --button-text:#18220b;
 --panel-top:#ffffff; --panel-bottom:#f6f7f7; --header:rgba(250,250,250,.92);
}
html[data-theme="light"] .hero-secondary { color:#191c20; }
html[data-theme="light"] .hero::after { background:radial-gradient(ellipse,#bec5c815,transparent 65%); }
html[data-theme="light"] .hero-copy>.eyebrow { background:#fff; color:#60666c; }
html[data-theme="light"] .hero-copy>.eyebrow::before { background:#8cbe38; }
html[data-theme="light"] .model-item { background:#fff; box-shadow:0 4px 18px #20262c03; }
html[data-theme="light"] .final-cta { background:#f2f3f3; }
.hero { gap:64px; padding-block:64px; }
.hero-visual { position:relative; }
.brand-stage { padding:0 0 22px; }
.brand-stage::before,.brand-stage::after,.mascot-frame::before,.mascot-frame::after { content:none; }
.mascot-frame { width:320px; height:330px; transform-style:preserve-3d; transform:perspective(850px) translate3d(var(--move-x,0px),var(--move-y,0px),0) rotateX(var(--turn-x,0deg)) rotateY(var(--turn-y,0deg)); transition:none; }
.mascot-float { animation:none; transform-style:preserve-3d; }
.hero-mascot { width:410px; height:410px; top:-44px; left:-45px; user-select:none; pointer-events:none; backface-visibility:hidden; }
.mascot-face { transform:translateZ(12px); filter:drop-shadow(0 12px 22px #00000020); }
.mascot-depth { filter:brightness(.25) saturate(.4); }
.depth-back { transform:translateZ(-6px); opacity:.7; }
.depth-mid { transform:translateZ(3px); opacity:.8; }
html[data-theme="light"] .mascot-face { filter:drop-shadow(0 14px 18px #161e2520); }
.endpoint-card { width:min(100%,410px); margin:4px auto 0; padding:14px 18px 12px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 8px 30px #00000008; }
html[data-theme="light"] .endpoint-card { background:#fff; box-shadow:0 8px 24px #1a202607; }
.endpoint-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.endpoint-protocols { display:flex; gap:18px; }
.endpoint-protocols button { padding:3px 0; border:0; border-radius:0; background:transparent; color:var(--faint); font-size:11px; line-height:1.5; }
.endpoint-protocols button[aria-pressed="true"] { color:var(--text); }
.endpoint-protocols button[aria-pressed="true"]::after { content:""; display:block; width:12px; height:2px; margin-top:4px; background:var(--accent); }
.endpoint-protocols button::after { content:""; display:block; height:2px; margin-top:4px; }
.endpoint-docs { color:var(--faint); padding:5px; }
.endpoint-docs:hover { color:var(--accent); }
.endpoint-docs .icon { width:14px; height:14px; }
.endpoint-card .endpoint-field { display:flex; justify-content:flex-start; padding-top:7px; gap:10px; min-height:47px; }
.endpoint-prompt { color:var(--accent); font:20px monospace; }
.endpoint-card code { font-size:15px; color:var(--text); }
.endpoint-copy { margin-left:auto; width:32px; height:32px; }
.endpoint-copy .icon { width:14px; }
@media(min-width:701px) and (max-width:1100px) { .hero{gap:30px}.mascot-frame{width:260px;height:285px}.hero-mascot{width:350px;height:350px;left:-45px;top:-35px}.endpoint-card{padding-inline:14px}.endpoint-card code{font-size:13px} }
@media(max-width:700px) { .hero{gap:22px;padding-block:44px}.brand-stage{padding:6px 0 18px}.mascot-frame{width:240px;height:254px}.hero-mascot{width:310px;height:310px;left:-35px;top:-33px}.endpoint-card{margin:4px auto 0;padding:13px 16px 10px}.endpoint-card code{font-size:14px} }
@media(prefers-reduced-motion:reduce) { .mascot-frame{transform:none!important} }
/* Depth stays behind the artwork; model browsing stays in one horizontal lane. */
.hero { --grid-line:#b4d78b13; }
html[data-theme="light"] .hero { --grid-line:#25334412; }
.hero::before { display:block; inset:12px 0 20px 32%; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse at 68% 43%,#000 10%,transparent 73%); opacity:1; }
.hero-depth { position:absolute; z-index:-1; pointer-events:none; inset:0 0 0 30%; overflow:hidden; perspective:600px; }
.hero-depth::before { content:""; position:absolute; width:120%; height:65%; left:-10%; bottom:-9%; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:56px 44px; transform:rotateX(58deg); transform-origin:center bottom; mask-image:radial-gradient(ellipse at 60% 90%,#000,transparent 68%); }
.hero-depth::after { content:""; position:absolute; inset:10% 7% 12% 25%; background:linear-gradient(90deg,transparent 49.8%,var(--grid-line) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,var(--grid-line) 50%,transparent 50.2%); mask-image:radial-gradient(ellipse,#000,transparent 72%); }
.models-section { min-width:0; }
.models-section .section-heading { margin-bottom:20px; }
.model-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:4px; }
.model-toolbar>p { color:var(--faint); font-size:11px; margin:0; }
.model-controls { display:flex; gap:6px; }
.model-controls .icon-button { border:1px solid var(--line); border-radius:50%; width:34px; height:34px; background:var(--surface); }
.model-controls .icon-button:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.model-controls .icon-button:disabled { opacity:.3; cursor:default; }
.model-play { font-size:12px; }
.model-grid { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:5px; padding:13px 5px 19px; margin-inline:-5px; scrollbar-width:thin; scrollbar-color:var(--strong) transparent; }
.model-grid::-webkit-scrollbar { height:4px; }
.model-grid::-webkit-scrollbar-thumb { background:var(--strong); border-radius:9px; }
.model-grid:focus-visible { outline-offset:1px; border-radius:20px; }
.model-grid .model-item { flex:0 0 calc((100% - 56px) / 3); min-width:270px; min-height:174px; scroll-snap-align:start; padding:27px 25px; position:relative; isolation:isolate; overflow:hidden; --model-tint:#aef34b; }
.model-item.claude { --model-tint:#da9472; }.model-item.openai { --model-tint:#81c9a0; }.model-item.gemini { --model-tint:#7095fa; }.model-item.grok { --model-tint:#9faab7; }.model-item.deepseek { --model-tint:#628aff; }.model-item.qwen { --model-tint:#a18aff; }.model-item.kimi { --model-tint:#79cde2; }
.model-grid .model-item::before { content:""; position:absolute; z-index:-1; inset:0; opacity:0; background:radial-gradient(ellipse at 5% 0%,color-mix(in srgb,var(--model-tint) 14%,transparent),transparent 75%); transition:opacity .25s; pointer-events:none; }
.model-grid .model-item:hover,.model-grid .model-item:focus-visible { border-color:color-mix(in srgb,var(--model-tint) 60%,var(--line)); box-shadow:0 8px 22px #0000000a; transform:translateY(-5px); }
.model-grid .model-item:hover::before,.model-grid .model-item:focus-visible::before { opacity:1; }
.model-identity>.icon { transition:transform .2s,color .2s; }
.model-item:hover .model-identity>.icon { transform:translateX(4px); color:var(--accent); }
.model-grid .model-item h3 { font-size:24px; }
.model-grid .model-item p { max-width:none; padding-right:0; }
html[data-theme="dark"] .grok .model-logo { filter:invert(1); }
.models-bottom { padding-top:13px; }
@media(min-width:701px) and (max-width:1000px) { .model-grid .model-item { flex-basis:calc((100% - 34px) / 2); min-width:270px; } }
@media(max-width:700px) { .hero::before { inset:34% 0 10px; mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 72%); background-size:40px 40px; }.hero-depth{inset:36% 0 0}.model-grid .model-item{flex-basis:84%;min-width:240px;min-height:165px;padding:24px 22px}.model-toolbar>p{font-size:10px}.model-controls{gap:5px}.model-controls .icon-button{width:32px;height:32px}.model-grid{gap:12px}.models-section .section-heading{margin-bottom:22px} }
@media(prefers-reduced-motion:reduce) { .model-grid .model-item:hover,.model-grid .model-item:focus-visible { transform:none; } }
/* Continuous model motion and layered, quiet ambient depth. */
.model-grid { scroll-snap-type:none; scroll-behavior:auto; scrollbar-width:none; mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent); }
.model-grid::-webkit-scrollbar { display:none; }
.model-grid:focus-within { mask-image:none; }
.hero { --grid-line:#b7d5a119; --grid-glint:#b9f45a40; }
html[data-theme="light"] .hero { --grid-line:#27364114; --grid-glint:#667f4330; }
.hero::before { background-size:48px 48px; background-position:var(--grid-x,0px) var(--grid-y,0px); mask-image:radial-gradient(ellipse at 65% 45%,#000 12%,transparent 73%); }
.hero-depth { perspective:700px; }
.hero-depth::before { bottom:-15%; height:74%; background-size:56px 40px; transform:rotateX(57deg) translateX(var(--grid-x,0px)); animation:grid-flow 22s linear infinite; mask-image:radial-gradient(ellipse at 56% 76%,#000 5%,transparent 70%); }
.hero-depth::after { inset:8% 4% 10% 12%; background:linear-gradient(90deg,transparent 49.9%,var(--grid-glint) 50%,transparent 50.1%),linear-gradient(0deg,transparent 39.9%,var(--grid-glint) 40%,transparent 40.1%); transform:translate(var(--grid-x,0px),var(--grid-y,0px)); opacity:.55; mask-image:radial-gradient(ellipse,#000,transparent 74%); }
.hero-scan { position:absolute; width:75%; height:1px; left:20%; top:0; background:linear-gradient(90deg,transparent,var(--grid-glint),transparent); box-shadow:0 0 14px var(--grid-glint); animation:scan-drift 12s ease-in-out infinite; }
.hero-nodes { position:absolute; inset:14% 10% 15% 24%; background:radial-gradient(circle at 25% 20%,var(--grid-glint) 1.5px,transparent 2px),radial-gradient(circle at 76% 38%,var(--grid-glint) 1.5px,transparent 2px),radial-gradient(circle at 45% 82%,var(--grid-glint) 1.5px,transparent 2px); transform:translate(var(--grid-x,0px),var(--grid-y,0px)); animation:node-breathe 7s ease-in-out infinite; }
.hero-copy>.eyebrow { animation:content-arrive .7s ease-out both; }
.hero h1 { animation:content-arrive .8s .07s ease-out both; }
.hero-body,.hero-actions,.hero-note { animation:content-arrive .85s .14s ease-out both; }
.hero-visual { animation:visual-arrive 1s ease-out both; }
.section.is-revealed>.section-heading,.section.is-revealed>.quick-copy,.section.is-revealed>.faq-heading { animation:content-arrive .75s ease-out both; }
.section.is-revealed>.benefits-grid,.section.is-revealed>.code-wrap,.section.is-revealed>.faq-list,.final-cta.is-revealed { animation:content-arrive .85s ease-out both; }
.button .icon { transition:transform .2s; }
.button:hover .icon { transform:translateX(3px); }
@keyframes grid-flow { to{background-position:0 40px} }
@keyframes scan-drift { 0%{transform:translateY(70px);opacity:0} 20%{opacity:.65} 75%{opacity:.4} 100%{transform:translateY(450px);opacity:0} }
@keyframes node-breathe { 0%,100%{opacity:.25} 50%{opacity:.85} }
@keyframes content-arrive { from{opacity:.2;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes visual-arrive { from{opacity:.2;transform:translateY(10px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.hero.ambient-paused .hero-depth::before,.hero.ambient-paused .hero-scan,.hero.ambient-paused .hero-nodes { animation-play-state:paused; }
@media(max-width:700px) { .hero::before{background-size:36px 36px}.hero-scan{left:8%;width:84%} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; }.hero-depth::before { background-position:0 0; }.hero-scan{display:none} }
/* A single vanishing point and an open, receding ground plane. */
.hero::before { display:none; }
.hero::after { top:8%; right:0; width:49%; height:77%; background:radial-gradient(ellipse at 57% 40%,#b6e2600a,transparent 65%); }
html[data-theme="light"] .hero::after { background:radial-gradient(ellipse at 57% 40%,#35464f09,transparent 65%); }
.hero-visual { isolation:isolate; padding-block:6px 16px; }
.hero-construction { position:absolute; z-index:-1; pointer-events:none; width:124%; height:144%; inset:-72px auto auto -16%; overflow:hidden; color:#afc0a4; }
.perspective-guides { stroke:currentColor; stroke-width:.7; opacity:.18; }
.perspective-registration { stroke:currentColor; stroke-width:.8; opacity:.3; }
html[data-theme="light"] .hero-construction { color:#7c8791; }
.brand-stage { position:relative; z-index:1; padding-bottom:30px; padding-left:22px; }
.mascot-face { filter:drop-shadow(9px 24px 22px #00000040); }
html[data-theme="light"] .mascot-face { filter:drop-shadow(9px 22px 20px #1b253024); }
.endpoint-card { position:relative; z-index:2; margin:0 auto 0 8px; width:88%; background:var(--surface); box-shadow:0 18px 36px #00000020,0 2px 5px #0000000a; }
html[data-theme="light"] .endpoint-card { background:#fff; box-shadow:0 18px 32px #19232c0d,0 2px 5px #19232c04; }
.models-section .section-heading { margin-bottom:24px; }
@media(max-width:700px) { .hero-visual{padding-block:0 12px}.hero-construction{width:110%;height:143%;inset:-45px auto auto -5%}.brand-stage{padding-left:12px;padding-bottom:22px}.endpoint-card{width:94%;margin-inline:auto}.models-section .section-heading{margin-bottom:18px} }
/* Benefits: one open information rail, with restrained technical accents. */
.benefits-grid { gap:0; padding:0; align-items:stretch; border-block:1px solid var(--line); }
.benefits-grid .benefit { display:block; position:relative; min-width:0; padding:36px 32px 38px; border:0; border-radius:0; background:none; box-shadow:none; }
.benefits-grid .benefit:first-child { padding-left:0; }
.benefits-grid .benefit:last-child { padding-right:0; }
.benefits-grid .benefit + .benefit::before { content:""; position:absolute; left:0; top:36px; bottom:38px; width:1px; background:var(--line); }
.benefits-grid .benefit::after { content:""; position:absolute; left:32px; top:-1px; width:28px; height:2px; background:var(--accent); opacity:.55; transition:width .25s,opacity .25s; }
.benefits-grid .benefit:first-child::after { left:0; }
.benefits-grid .benefit:hover::after { width:52px; opacity:1; }
.benefits-grid .benefit h3 { font-size:21px; font-weight:550; letter-spacing:-.035em; line-height:1.5; margin:0 0 17px; text-wrap:balance; }
.benefits-grid .benefit p { font-size:14px; line-height:1.95; margin:0; color:var(--muted); max-width:28em; }
@media(min-width:701px) and (max-width:1000px) { .benefits-grid .benefit { padding:28px 22px; }.benefits-grid .benefit h3{font-size:18px;min-height:54px}.benefits-grid .benefit p{font-size:13px}.benefits-grid .benefit::after{left:22px} }
@media(max-width:700px) { .benefits-grid{grid-template-columns:1fr}.benefits-grid .benefit,.benefits-grid .benefit:first-child,.benefits-grid .benefit:last-child{padding:26px 0 28px}.benefits-grid .benefit + .benefit{border-top:1px solid var(--line)}.benefits-grid .benefit + .benefit::before{display:none}.benefits-grid .benefit::after{left:0;width:24px}.benefits-grid .benefit h3{font-size:20px;margin-bottom:10px}.benefits-grid .benefit p{font-size:13px;max-width:36em} }

/* Navigation: balanced page-centered capsule with a restrained illuminated edge. */
.nav-capsule { display:contents; }
@media(min-width:701px) {
  .nav-shell { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:24px; height:88px; }
  .nav-shell>.brand { justify-self:start; }
  .nav-capsule { position:relative; display:flex; align-items:center; gap:10px; padding:6px; border:1px solid transparent; border-radius:999px; background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(130deg,#ffffff29,#ffffff0d 48%,#b2ce922b) border-box; box-shadow:0 6px 24px #00000010,inset 0 1px 0 #ffffff03; }
  .nav-capsule::before { content:""; position:absolute; height:1px; top:-1px; left:22%; right:22%; background:linear-gradient(90deg,transparent,#cfdfbb50,transparent); pointer-events:none; }
  .nav-capsule .nav-links { margin:0; gap:2px; padding:0; border:0; background:none; box-shadow:none; }
  .nav-links>a { display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 17px; border-radius:999px; font-size:13px; font-weight:550; line-height:1.2; transition:background .18s,color .18s; }
  .nav-links>a:hover { color:var(--text); background:color-mix(in srgb,var(--text) 7%,transparent); }
  .nav-links>a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; background:color-mix(in srgb,var(--accent) 8%,transparent); }
  .nav-capsule .nav-tools { position:relative; margin:0; padding:0 2px 0 12px; gap:2px; border:0; }
  .nav-capsule .nav-tools::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:var(--line); }
  .nav-tools .icon-button { width:34px; height:36px; border-radius:50%; }
  .nav-shell>.account-actions { justify-self:end; gap:18px; }
  html[data-theme="light"] .nav-capsule { background:linear-gradient(#ffffffed,#ffffffed) padding-box,linear-gradient(135deg,#202c3b1f,#202c3b0c 50%,#202c3b1a) border-box; box-shadow:0 5px 20px #202c3b06,inset 0 1px 0 #fff; }
  html[data-theme="light"] .nav-capsule::before { background:linear-gradient(90deg,transparent,#fff,transparent); }
}
@media(min-width:701px) and (max-width:1000px) {
  .nav-shell { gap:12px; height:78px; }
  .nav-capsule { padding:5px; gap:6px; }
  .nav-links>a { padding-inline:10px; font-size:11px; min-height:34px; }
  .nav-capsule .nav-tools { padding-left:8px; padding-right:0; gap:0; }
  .nav-tools .icon-button { width:30px; height:34px; }
  .account-actions .button { padding-inline:13px; font-size:11px; }
}
@media(max-width:700px) {
  .nav-links.open { left:20px; right:20px; top:70px; margin:0; padding:10px; border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 40px #00000018; }
  .nav-links.open>a { padding:14px 16px; border-radius:12px; font-size:14px; }
  .nav-links.open>a:hover { background:color-mix(in srgb,var(--text) 5%,transparent); }
  .nav-links .mobile-account { margin:6px 6px 0; padding:15px 0 5px; }
}

/* Auth visibility must override the navigation display rules. */
[data-auth-guest][hidden] { display:none!important; }
.mobile-account:has([data-auth-guest][hidden]) { justify-content:flex-end; }

/* Reserve the complete headline while the visible copy types over it. */
.typewriter-title>span { position:relative; }
.typewriter-space { visibility:hidden; }
.typewriter-ink { position:absolute; inset:0; }
.typewriter-ink.has-caret::after { content:"_"; display:inline-block; margin-left:.06em; color:var(--accent); font-weight:500; line-height:1; animation:headline-caret 1.1s step-end infinite; }
.typewriter-title.caret-paused .has-caret::after { animation-play-state:paused; }
@keyframes headline-caret { 0%,48%{opacity:1} 49%,100%{opacity:0} }
@media(prefers-reduced-motion:reduce) { .typewriter-ink.has-caret::after { animation:none; box-shadow:none; opacity:.65; } }

/* The idea gets a quiet moving highlight in the brand's lime palette. */
.idea-word { color:var(--accent); }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .idea-word { background-image:linear-gradient(110deg,#a5db50 15%,#c5f779 38%,#f0ffcb 50%,#c5f779 62%,#a5db50 85%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:idea-highlight 7s ease-in-out infinite; }
  html[data-theme="light"] .idea-word { background-image:linear-gradient(110deg,#365619 15%,#507720 38%,#809e3e 50%,#507720 62%,#365619 85%); }
}
@keyframes idea-highlight { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.typewriter-title.caret-paused .idea-word { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .idea-word { animation:none; background-position:40% 50%; } }

/* On phones the mascot introduces the headline; the endpoint remains below the copy. */
@media(max-width:700px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:20px; }
  .hero-visual { display:contents; }
  .hero .brand-stage { grid-column:1; grid-row:1; margin:0; padding:0; }
  .hero .hero-copy { grid-column:1; grid-row:2; min-width:0; }
  .hero .endpoint-card { grid-column:1; grid-row:3; width:100%; margin:6px 0 0; }
  .hero .mascot-frame { width:180px; height:190px; }
  .hero .hero-mascot { width:240px; height:240px; left:-30px; top:-25px; }
  .hero .hero-construction { width:100%; height:290px; inset:-20px auto auto 0; }
  .hero::after { top:0; height:260px; }
}

/* Give Latin words and Chinese characters their own comfortable spacing. */
/* Touch devices have no hover: give the layered mascot a quiet idle turn. */
@keyframes mascot-idle-turn {
  0%,100% { transform:translate3d(0,0,0) rotateX(2deg) rotateY(-7deg) rotateZ(-1deg); }
  50% { transform:translate3d(0,-4px,0) rotateX(-3deg) rotateY(7deg) rotateZ(1deg); }
}
@media(max-width:700px), (hover:none) and (pointer:coarse) {
  .mascot-float { animation:mascot-idle-turn 6s ease-in-out infinite; }
  .mascot-frame.motion-paused .mascot-float { animation-play-state:paused; }
}
@media(prefers-reduced-motion:reduce) {
  .mascot-float { animation:none!important; }
}

.hero-copy>.eyebrow { margin-bottom:26px; padding:8px 13px; line-height:1.5; }
.hero h1 { line-height:1.2; letter-spacing:-.025em; word-spacing:.045em; margin-bottom:26px; }
.hero h1>span + span { margin-top:.04em; }
.hero-body { line-height:1.85; margin-bottom:28px; }
html[lang="zh-CN"] .hero h1 { letter-spacing:.005em; word-spacing:normal; line-height:1.24; }
html[lang="zh-CN"] .hero-copy>.eyebrow { letter-spacing:.06em; }
html[lang="zh-CN"] .hero-body { letter-spacing:.015em; }
@media(max-width:700px) {
  .hero-copy>.eyebrow { margin-bottom:22px; padding:7px 11px; font-size:9px; letter-spacing:.025em; }
  .hero h1 { margin-bottom:22px; line-height:1.2; }
  html[lang="zh-CN"] .hero h1 { line-height:1.25; }
  .hero-body { margin-bottom:25px; }
}

/* Keep the benefits introduction together above the information rail. */
.benefits-section>.section-heading { display:block; margin-bottom:30px; }
.benefits-section>.section-heading>div { max-width:none; }
.benefits-section>.section-heading>.section-description { max-width:720px; margin-top:14px; }
@media(max-width:700px) {
  .benefits-section>.section-heading { margin-bottom:25px; }
  .benefits-section>.section-heading>.section-description { margin-top:12px; }
}