:root {
  color-scheme: light;
  --paper: #f7f7f2;
  --paper-2: #eeefe9;
  --ink: #171920;
  --muted: #777a83;
  --line: #e0e2dc;
  --violet: #7559ef;
  --violet-light: #eeeaff;
  --mint: #20bb9f;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "DM Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --content: 1184px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #9885ff; outline-offset: 4px; }
::selection { background: #d6cdfd; color: #211748; }
.section-wrap { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.ambient-one { top: 54px; right: -130px; width: 560px; height: 520px; background: radial-gradient(circle, #ddd7ff75 0, #e9e6ff43 40%, transparent 72%); }
.ambient-two { top: 550px; left: -250px; width: 520px; height: 460px; background: radial-gradient(circle, #cfefe340 0, transparent 70%); }

.site-header { position: sticky; top: 0; z-index: 20; height: 76px; border-bottom: 1px solid #e7e8e2bd; background: #f7f7f2e8; backdrop-filter: blur(18px); }
.header-inner { width: min(1280px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(145deg, #9178ff 0%, #6242e9 100%); box-shadow: 0 5px 13px #765bec37; }
.brand-mark span { position: absolute; width: 4px; border-radius: 4px; background: #fff; transform: rotate(45deg); }
.brand-mark span:nth-child(1) { height: 15px; left: 10px; top: 9px; }
.brand-mark span:nth-child(2) { height: 20px; left: 15px; top: 6px; opacity: .84; }
.brand-mark span:nth-child(3) { height: 12px; left: 20px; top: 11px; opacity: .66; }
.brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.04em; }
.brand-name > span { margin-left: 5px; color: #9899a2; font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.main-nav { display: flex; align-items: center; gap: 36px; margin-left: 116px; }
.main-nav a, .login-link { color: #656872; font-size: 12px; font-weight: 500; transition: color .2s; }
.main-nav a:hover, .login-link:hover { color: var(--violet); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; border-radius: 9px; font-size: 12px; font-weight: 650; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 16px; font-weight: 400; }
.button-dark { color: #fff; background: var(--ink); box-shadow: 0 7px 18px #17192018; }
.button-dark:hover { background: #34323f; box-shadow: 0 9px 22px #17192025; }
.button-light { color: #48434f; background: #efeee9; }
.button-light:hover { background: #e6e3ef; }
.button-small { min-height: 37px; gap: 12px; padding-inline: 15px; border-radius: 7px; font-size: 11px; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 632px; display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 56px; padding-top: 54px; padding-bottom: 50px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 17px; }
.eyebrow-pill { width: fit-content; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid #e6e2f6; border-radius: 20px; background: #fff9; color: #727080; font-family: var(--mono); font-size: 9px; letter-spacing: .035em; }
.pulse-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.pulse-dot::after { position: absolute; inset: -4px; border: 1px solid #20bb9f63; border-radius: inherit; content: ""; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.hero h1 { margin: 26px 0 19px; font-size: clamp(42px, 4.7vw, 58px); font-weight: 800; line-height: 1.24; letter-spacing: -.075em; }
.hero h1 span { color: var(--violet); background: linear-gradient(transparent 78%, #d9d2ff 78%); }
.hero-subtitle { margin: -5px 0 12px; color: #5944cb; font-size: clamp(16px, 1.65vw, 20px); font-weight: 800; line-height: 1.55; letter-spacing: -.035em; }
.hero-description { max-width: 465px; margin: 0; color: #737580; font-size: 14px; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 26px; color: #777984; font-size: 10px; }
.hero-proof i { width: 3px; height: 3px; border-radius: 50%; background: #b3b3bd; }
.proof-icon { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #148d76; background: #d9f4ec; font-size: 9px; }

.terminal-wrap { position: relative; min-height: 421px; display: flex; align-items: center; justify-content: center; }
.terminal-card { position: relative; z-index: 2; width: min(100%, 548px); overflow: hidden; border: 1px solid #2c2c35; border-radius: 15px; background: #1b1b23; box-shadow: 0 28px 66px #2e275530, 0 8px 20px #2b284214; transform: rotate(-1deg); }
.terminal-head { height: 52px; display: flex; align-items: center; gap: 13px; padding: 0 18px; border-bottom: 1px solid #ffffff12; background: #22222b; }
.window-dots { display: flex; gap: 5px; }
.window-dots b { width: 7px; height: 7px; border-radius: 50%; background: #555560; }
.window-dots b:first-child { background: #ee7c83; }
.window-dots b:nth-child(2) { background: #e9c56b; }
.window-dots b:nth-child(3) { background: #60c995; }
.terminal-title { color: #aaaab5; font-family: var(--mono); font-size: 9px; }
.terminal-title span { padding: 0 5px; color: #55545f; }
.terminal-badge { display: flex; align-items: center; gap: 5px; margin-left: auto; color: #aeb3bd; font-family: var(--mono); font-size: 8px; }
.terminal-badge i, .live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.terminal-meta { height: 39px; display: flex; align-items: center; gap: 10px; padding: 0 19px; border-bottom: 1px solid #ffffff0d; color: #9595a2; font-family: var(--mono); font-size: 8px; }
.terminal-meta > span { padding: 4px 6px; border-radius: 4px; color: #60cfb2; background: #1d5b4c44; font-size: 7px; }
.terminal-meta code { color: #c8c6d3; }
.icon-copy { margin-left: auto; padding: 3px 7px; border: 0; border-radius: 4px; background: #ffffff0b; color: #a9a8b3; font-size: 14px; cursor: pointer; }
.code-window { min-height: 232px; margin: 0; padding: 23px 18px 17px; overflow: auto; color: #d0d0d8; font-family: var(--mono); font-size: 10px; line-height: 2.05; tab-size: 2; }
.code-muted { display: inline-block; width: 23px; color: #62616c; user-select: none; }
.code-purple { color: #c3a9ff; }
.code-green { color: #91d9c2; }
.code-blue { color: #9ac5f4; }
.terminal-foot { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-top: 1px solid #ffffff12; color: #92929e; font-family: var(--mono); font-size: 8px; }
.terminal-foot > span:first-child b { margin-right: 6px; color: #69d9b9; }
.latency-label { color: #777784; }
.latency-label i { margin-left: 5px; color: #62d3b3; font-style: normal; }
.orbit { position: absolute; border: 1px solid #cfc6fc7d; border-radius: 50%; }
.orbit-a { width: 460px; height: 310px; transform: rotate(-28deg); }
.orbit-b { width: 510px; height: 215px; transform: rotate(34deg); border-color: #c4e6db75; }
.floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #e9e8ed; border-radius: 10px; background: #fff; box-shadow: 0 12px 26px #24222d13; }
.chip-model { top: 34px; right: 0; transform: rotate(2deg); }
.chip-usage { bottom: 39px; left: -18px; transform: rotate(-2deg); }
.floating-chip > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.floating-chip b { font-size: 9px; font-weight: 650; }
.floating-chip small { color: #92939b; font-size: 8px; }
.model-glyph { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; font-size: 14px; font-style: normal; }
.glyph-violet { color: #7758eb; background: #eee9ff; }
.glyph-green { color: #2caa82; background: #e1f6eb; }
.glyph-orange { color: #ee8956; background: #fff0e7; }
.glyph-blue { color: #6684ee; background: #e9edff; }
.glyph-pink { color: #d4679a; background: #ffecf4; }
.glyph-cyan { color: #2f9fa9; background: #e4f8f7; }
.usage-bars { display: flex !important; align-items: end; gap: 2px; width: 25px; height: 23px; padding: 4px; border-radius: 7px; background: #e7f7f1; }
.usage-bars i { width: 3px; border-radius: 3px; background: #27b18e; }
.usage-bars i:nth-child(1) { height: 6px; }.usage-bars i:nth-child(2) { height: 10px; }.usage-bars i:nth-child(3) { height: 8px; }.usage-bars i:nth-child(4) { height: 14px; }
.hero-caption { position: absolute; right: 20px; bottom: 0; color: #a1a1a9; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }
.hero-caption span { padding: 0 6px; color: var(--violet); }

.model-band { overflow: hidden; border-block: 1px solid #e2e3de; background: #efefe9; }
.model-band-inner { width: min(1280px, calc(100% - 64px)); min-height: 88px; display: flex; align-items: center; gap: 27px; margin: auto; }
.band-label { flex: 0 0 auto; color: #898b93; font-family: var(--mono); font-size: 8px; line-height: 1.65; }
.band-label b { color: #4d4f59; font-weight: 500; }
.model-track { min-width: 0; overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.model-track-inner { width: max-content; display: flex; align-items: center; gap: 26px; animation: marquee 36s linear infinite; }
.model-track:hover .model-track-inner { animation-play-state: paused; }
.model-track-inner > span { display: flex; align-items: center; gap: 9px; color: #565862; font-size: 12px; font-weight: 650; white-space: nowrap; }
.model-track-inner > b { color: #aea4e6; font-size: 10px; font-weight: 400; }
.model-track-inner .model-glyph { width: 19px; height: 19px; background: transparent; font-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.band-link { flex: 0 0 auto; color: #777984; font-size: 9px; }
.band-link span { margin-left: 7px; color: var(--violet); font-size: 14px; }

.features { padding-top: 116px; padding-bottom: 113px; }
.section-intro, .use-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 43px; }
.section-kicker { margin: 0 0 17px; color: #858792; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
.section-kicker > span { margin-right: 10px; color: var(--violet); }
.section-intro h2, .use-heading h2, .quick-copy h2, .faq-heading h2 { margin: 0; font-size: 37px; font-weight: 750; line-height: 1.4; letter-spacing: -.07em; }
.section-intro h2 em, .quick-copy h2 em, .faq-heading h2 em { color: var(--violet); font-style: normal; }
.section-intro > p, .use-heading > p { margin: 0 0 4px; color: #777984; font-size: 11px; line-height: 1.95; }
.feature-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }
.feature-card { position: relative; min-height: 268px; overflow: hidden; padding: 24px 25px; border: 1px solid #e7e7e2; border-radius: 13px; background: #fcfcf9; }
.feature-primary { background: linear-gradient(135deg, #f1efff 0%, #fbfbf8 63%); }
.feature-top { display: flex; align-items: center; gap: 10px; }
.feature-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: 15px; }
.icon-spark { color: #7658ea; background: #e5ddff; }.icon-route { color: #309a7c; background: #dff4ea; }.icon-meter { color: #df8953; background: #fff0df; }.icon-key { color: #6276d8; background: #e9ecff; }
.feature-index { color: #9b9ca4; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.feature-card h3 { position: relative; z-index: 1; margin: 21px 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -.035em; }
.feature-card p { position: relative; z-index: 1; max-width: 355px; margin: 0; color: #7a7d86; font-size: 10px; line-height: 1.85; }
.endpoint-pill { position: relative; z-index: 1; width: fit-content; display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 11px; border: 1px solid #e7e4f4; border-radius: 7px; background: #fff; color: #656673; font-family: var(--mono); font-size: 8px; }
.endpoint-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.endpoint-arrow { margin-left: 9px; color: #9789d9; font-size: 12px; }
.feature-decoration { position: absolute; right: 9px; bottom: -97px; width: 238px; height: 195px; }
.feature-decoration span { position: absolute; inset: 0; border: 1px solid #bab0f186; border-radius: 50%; transform: rotate(30deg) scaleX(.59); }
.feature-decoration span:nth-child(2) { transform: rotate(-30deg) scaleX(.59); border-color: #c5c0ec91; }
.feature-decoration span:nth-child(3) { inset: 30px 38px; border-color: #afa0f978; }
.feature-decoration b { position: absolute; top: 77px; left: 93px; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #dcd4ff; border-radius: 15px; background: #fff; color: #7257e4; font-family: var(--mono); font-size: 11px; box-shadow: 0 8px 20px #7462c92c; transform: rotate(45deg); }
.feature-decoration b::first-letter { transform: rotate(-45deg); }
.mini-model-list { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.mini-model-list span { display: flex; justify-content: space-between; width: 100%; max-width: 262px; padding-bottom: 6px; border-bottom: 1px solid #ecece7; color: #595b64; font-family: var(--mono); font-size: 8px; }
.mini-model-list i { color: #a1a2a9; font-family: var(--sans); font-size: 8px; font-style: normal; }
.usage-chart { position: absolute; right: 19px; bottom: 19px; left: 19px; height: 80px; padding: 11px 10px 8px; border: 1px solid #e9e9e3; border-radius: 7px; background: #fafaf7; }
.chart-labels { display: flex; justify-content: space-between; color: #a0a1a7; font-size: 7px; }
.chart-bars { height: 42px; display: flex; align-items: end; gap: 5px; margin-top: 6px; }
.chart-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(0deg, #d9d0ff, #9482ed); opacity: .7; }
.feature-wide { min-height: 235px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; background: linear-gradient(100deg, #fbfbf9, #f5f6f2); }
.wide-copy { position: relative; z-index: 1; }
.wide-copy h3 { margin-top: 17px; }
.key-tags, .use-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.key-tags span, .use-tags span { padding: 5px 8px; border: 1px solid #e9e9e5; border-radius: 5px; color: #80818a; background: #fff9; font-size: 8px; }
.key-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 184px; }
.key-window { position: relative; z-index: 1; width: 260px; padding: 12px; border: 1px solid #ebeae5; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px #33342710; transform: rotate(2deg); }
.key-window-head, .key-window-foot { display: flex; align-items: center; justify-content: space-between; color: #8e9099; font-family: var(--mono); font-size: 7px; }
.key-plus { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; color: #fff; background: var(--violet); font-size: 12px; }
.key-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #f0f0ec; }
.key-row > span { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.key-avatar { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #624ae0; background: #ece9ff; font-size: 9px; font-style: normal; font-weight: 700; }
.avatar-b { color: #269278; background: #e5f6ef; }
.key-row b { font-size: 8px; font-weight: 650; }
.key-row small { color: #a2a3a9; font-family: var(--mono); font-size: 6px; }
.key-row em { padding: 3px 5px; border-radius: 4px; color: #299275; background: #e3f6ed; font-size: 7px; font-style: normal; }
.key-window-foot { padding-top: 10px; }
.key-orbit { position: absolute; width: 235px; height: 110px; border: 1px solid #d6d2f4; border-radius: 50%; transform: rotate(-25deg); }
.feature-note { margin-top: 16px; color: #9a9ba1; font-size: 9px; }
.feature-note span { margin-right: 8px; color: var(--violet); }

.use-cases { padding: 55px 0 108px; border-top: 1px solid var(--line); }
.use-heading { margin-bottom: 30px; }
.use-heading h2 { font-size: 31px; }
.use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.use-card { min-height: 410px; padding: 25px; overflow: hidden; border: 1px solid #e4e5df; border-radius: 13px; background: #eff0eb; }
.use-dev { background: linear-gradient(135deg, #eeeeeb, #f7f7f2); }
.use-team { background: linear-gradient(135deg, #f0edff, #f7f7f2 90%); }
.use-card-label { display: flex; align-items: center; gap: 9px; color: #8e9098; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }
.use-card-label span { color: var(--violet); }
.use-card h3 { margin: 21px 0 8px; font-size: 18px; letter-spacing: -.045em; }
.use-card > p { max-width: 405px; margin: 0; color: #777a83; font-size: 10px; line-height: 1.9; }
.snippet { overflow: hidden; border: 1px solid #2c2c35; border-radius: 9px; color: #d4d4dc; background: #1b1b23; box-shadow: 0 13px 27px #1b1b231c; }
.small-snippet { max-width: 440px; margin-top: 22px; }
.snippet-head { height: 31px; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid #ffffff12; background: #24242d; }
.snippet-head i { width: 5px; height: 5px; border-radius: 50%; background: #6f7079; }
.snippet-head i:first-child { background: #eb7e85; }.snippet-head i:nth-child(2) { background: #eac56c; }.snippet-head i:nth-child(3) { background: #62c997; }
.snippet-head b { margin-left: 7px; color: #9696a1; font-family: var(--mono); font-size: 7px; font-weight: 400; }
.snippet code { display: block; padding: 14px 13px 11px; color: #c8c8d1; font-family: var(--mono); font-size: 8px; line-height: 1.95; }
.snippet code span { color: #59c9a8; }
.snippet-status { padding: 8px 12px; border-top: 1px solid #ffffff12; color: #8e8f99; font-family: var(--mono); font-size: 7px; }
.snippet-status i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #e5b364; }
.use-tags { margin-top: 15px; }
.team-visual { max-width: 430px; margin-top: 21px; padding: 16px; border: 1px solid #e5e3f1; border-radius: 9px; background: #fff; box-shadow: 0 13px 27px #6557a00b; }
.team-visual-head { display: flex; justify-content: space-between; color: #777984; font-size: 8px; }
.team-visual-head span:last-child { color: #a0a1a9; }
.team-total { display: flex; align-items: baseline; gap: 9px; margin-top: 15px; }
.team-total strong { color: #4d4d59; font-family: var(--mono); font-size: 23px; }
.team-total span { color: #a1a2a9; font-size: 7px; }
.team-progress { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.team-progress > div { display: grid; grid-template-columns: 60px 1fr 24px; align-items: center; gap: 9px; color: #777984; font-size: 7px; }
.team-progress > div > i { height: 5px; overflow: hidden; border-radius: 5px; background: #eeedf3; }
.team-progress > div > i > b { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a997ff, #7559ef); }
.team-progress small { color: #a2a3a9; font-family: var(--mono); font-size: 6px; }

.quickstart { display: grid; grid-template-columns: .76fr 1.24fr; align-items: center; gap: 72px; padding-top: 83px; padding-bottom: 102px; border-top: 1px solid var(--line); }
.quick-copy h2 { font-size: 37px; }
.quick-copy > p:not(.section-kicker) { max-width: 380px; margin: 15px 0 0; color: #7d7f87; font-size: 10px; line-height: 1.9; }
.steps { display: flex; flex-direction: column; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; }
.step { position: relative; display: flex; gap: 14px; padding: 0 0 22px; color: #a2a3a9; }
.step:not(:last-child)::after { position: absolute; top: 24px; bottom: -1px; left: 10px; width: 1px; background: #dedfe3; content: ""; }
.step > b { position: relative; z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border: 1px solid #d9d9df; border-radius: 50%; background: var(--paper); font-family: var(--mono); font-size: 7px; font-weight: 400; }
.step > span { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.step strong { color: #575963; font-size: 10px; font-weight: 600; }
.step small { color: #9799a1; font-size: 8px; }
.step.is-active > b { border-color: #c3b8ff; color: var(--violet); background: #efecff; }
.quick-code-card { overflow: hidden; border: 1px solid #2b2b35; border-radius: 12px; background: #1b1b23; box-shadow: 0 22px 54px #26252d23; }
.quick-code-head { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-bottom: 1px solid #ffffff12; color: #dedee5; font-size: 10px; }
.quick-code-head > div { display: flex; align-items: center; gap: 8px; }
.quick-code-head small { color: #83848f; font-size: 8px; }
.copy-button { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #ffffff20; border-radius: 6px; color: #b4b5bf; background: #ffffff08; font-size: 8px; cursor: pointer; transition: background .2s; }
.copy-button:hover, .icon-copy:hover { background: #ffffff18; }
.copy-button span { font-size: 13px; }
.code-tabs { display: flex; gap: 17px; height: 39px; align-items: stretch; padding-inline: 20px; border-bottom: 1px solid #ffffff0e; }
.code-tab { position: relative; padding: 0 2px; border: 0; color: #8f909a; background: transparent; font-family: var(--mono); font-size: 8px; cursor: pointer; }
.code-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ""; }
.code-tab.is-active { color: #d2c8ff; }
.code-tab.is-active::after { background: #8e79f4; }
.quick-code { min-height: 219px; margin: 0; padding: 23px 21px; overflow: auto; color: #d3d3db; font-family: var(--mono); font-size: 9px; line-height: 2; white-space: pre; }
.quick-code code { font: inherit; }
.code-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid #ffffff10; color: #8d8e98; font-family: var(--mono); font-size: 7px; }
.code-foot > span:first-child i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #65d2b1; }
.base-url-row { display: flex; align-items: center; gap: 12px; padding: 12px 19px; border-top: 1px solid #ffffff10; background: #ffffff05; }
.base-url-row > span { color: #878894; font-family: var(--mono); font-size: 7px; }
.base-url-row code { flex: 1; color: #c4c2cf; font-family: var(--mono); font-size: 8px; }
.base-url-row button { padding: 5px 8px; border: 1px solid #ffffff20; border-radius: 5px; color: #b7b6c2; background: transparent; font-size: 7px; cursor: pointer; }
.base-url-row button:hover { background: #ffffff12; }

.models-detail { padding-top: 95px; padding-bottom: 99px; border-top: 1px solid var(--line); }
.model-intro { margin-bottom: 29px; }
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.catalog-item { min-height: 69px; display: grid; grid-template-columns: 36px 1fr auto 15px; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e7e8e2; border-radius: 8px; background: #fbfbf8; transition: transform .2s, border-color .2s; }
.catalog-item:hover { transform: translateY(-2px); border-color: #c8c0f3; }
.catalog-logo { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; font-size: 18px; }
.logo-openai { color: #1c9e75; background: #e4f6ed; }.logo-anthropic { color: #e0875d; background: #fff0e8; }.logo-google { color: #6c7fe8; background: #eceeff; }.logo-deepseek { color: #7181e4; background: #e9ecff; }.logo-qwen { color: #9461d8; background: #f2eaff; }.logo-more { color: #83858e; background: #eeefeb; }
.catalog-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.catalog-item b { font-size: 10px; font-weight: 650; }
.catalog-item small { color: #92949c; font-family: var(--mono); font-size: 7px; }
.catalog-item > i { color: #92949c; font-size: 8px; font-style: normal; }
.catalog-arrow { color: #a2a1ae; font-size: 13px; }
.catalog-more { border-style: dashed; background: #f4f4f0; }

.status-section { padding-bottom: 103px; }
.status-shell { display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; align-items: center; padding: 42px; border: 1px solid #e3e3dc; border-radius: 14px; background: #efefe9; }
.status-copy .section-kicker { margin-bottom: 14px; }
.status-copy h2 { margin: 0; font-size: 29px; font-weight: 750; line-height: 1.4; letter-spacing: -.06em; }
.status-copy > p:not(.section-kicker) { max-width: 290px; margin: 12px 0 0; color: #7d7f86; font-size: 9px; line-height: 1.9; }
.status-link { display: inline-flex; align-items: center; gap: 11px; margin-top: 19px; color: #60577e; font-size: 9px; }
.status-link span { color: var(--violet); font-size: 15px; }
.status-dashboard { overflow: hidden; border: 1px solid #e6e7e0; border-radius: 10px; background: #fcfcfa; box-shadow: 0 12px 32px #3131290c; }
.dashboard-head { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #efefe9; font-size: 8px; }
.dashboard-head > span { display: flex; align-items: center; gap: 7px; color: #575a63; font-weight: 650; }
.dashboard-dot { width: 6px; height: 6px; border: 1px solid #c7c8cb; border-radius: 50%; }
.dashboard-head small { color: #a0a1a7; font-size: 7px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); padding: 13px 14px; border-bottom: 1px solid #f0f0eb; }
.dashboard-metrics > div { display: flex; flex-direction: column; gap: 4px; padding-left: 13px; border-left: 1px solid #eeeeea; }
.dashboard-metrics > div:first-child { padding-left: 0; border-left: 0; }
.dashboard-metrics small { color: #92939a; font-size: 7px; }
.dashboard-metrics b { color: #555760; font-family: var(--mono); font-size: 19px; font-weight: 400; }
.dashboard-metrics span { color: #b0b1b7; font-size: 6px; }
.dashboard-chart { padding: 12px 14px 8px; }
.chart-title { display: flex; justify-content: space-between; color: #777984; font-size: 7px; }
.chart-title span:last-child { color: #a2a3a9; }
.chart-empty { position: relative; height: 92px; display: grid; place-items: center; margin-top: 6px; overflow: hidden; }
.chart-grid-lines { position: absolute; inset: 7px 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines i { height: 1px; border-top: 1px dashed #e8e9e4; }
.chart-empty svg { position: absolute; inset: 5px 0; width: 100%; height: 80px; opacity: .35; }
.chart-empty path { fill: none; stroke: #8772ef; stroke-width: 2; stroke-dasharray: 5 4; }
.chart-empty > span { position: relative; z-index: 1; padding: 6px 9px; border: 1px solid #eeedf4; border-radius: 5px; color: #9697a0; background: #fcfcfae8; font-size: 7px; }
.dashboard-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #f0f0eb; color: #9c9da4; font-family: var(--mono); font-size: 6px; }
.dashboard-foot > span:first-child { color: #9a8be0; }
.dashboard-foot i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #b3a5f4; }

.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; padding-top: 77px; padding-bottom: 115px; border-top: 1px solid var(--line); }
.faq-heading h2 { font-size: 34px; }
.faq-heading > p:last-child { margin: 13px 0 0; color: #878991; font-size: 9px; }
.faq-list { border-top: 1px solid #e1e2dd; }
.faq-item { border-bottom: 1px solid #e1e2dd; }
.faq-item summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span { display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 600; }
.faq-item summary b { color: #9583ed; font-family: var(--mono); font-size: 7px; font-weight: 400; }
.faq-item summary i { position: relative; width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid #dddde0; border-radius: 50%; }
.faq-item summary i::before, .faq-item summary i::after { position: absolute; top: 8px; left: 5px; width: 6px; height: 1px; background: #8b8c95; content: ""; transition: transform .2s; }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i { border-color: #d4cdf7; background: #f1eeff; }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-item > p { max-width: 590px; margin: -3px 32px 17px; color: #858790; font-size: 9px; line-height: 1.95; }

.final-cta { position: relative; min-height: 365px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 15px; color: #fff; background: #1a1922; }
.cta-glow { position: absolute; top: -160px; right: 80px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, #7258ed78 0, #6349de32 38%, transparent 70%); }
.cta-glow::after { position: absolute; top: 60px; left: -120px; width: 470px; height: 370px; border: 1px solid #bcb0ff1c; border-radius: 50%; content: ""; transform: rotate(-25deg); }
.cta-content { position: relative; z-index: 1; text-align: center; }
.cta-mark { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; margin-bottom: 10px; border: 1px solid #ffffff35; border-radius: 11px; color: #d8d0ff; font-family: var(--mono); font-size: 15px; }
.cta-mark span { margin-left: 1px; color: #a695ff; font-size: 9px; }
.cta-content .section-kicker { margin-bottom: 12px; color: #a7a4b3; font-size: 7px; }
.cta-content h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.45; letter-spacing: -.06em; }
.cta-content h2 em { color: #aa9aff; font-style: normal; }
.cta-content > p:not(.section-kicker) { margin: 10px 0 18px; color: #aaa8b4; font-size: 9px; }
.button-white { min-height: 39px; gap: 16px; padding-inline: 14px; color: #2b2934; background: #fff; font-size: 9px; }
.button-white:hover { box-shadow: 0 9px 24px #0005; }
.cta-side-note { position: absolute; right: 28px; bottom: 24px; display: flex; flex-direction: column; align-items: end; gap: 4px; color: #9996a8; font-family: var(--mono); font-size: 7px; }
.cta-side-note b { color: #ded9f6; font-family: var(--sans); font-size: 12px; }
.cta-side-note i { margin-top: 4px; color: #716d7c; font-size: 6px; font-style: normal; letter-spacing: .08em; }
.site-footer { min-height: 148px; display: grid; grid-template-columns: 1fr 1.2fr 1fr auto; align-items: center; gap: 20px; }
.site-footer > p { color: #8b8d95; font-size: 9px; }
.footer-links { display: flex; justify-content: center; gap: 17px; color: #7c7e86; font-size: 8px; }
.footer-links a:hover { color: var(--violet); }
.copyright { color: #a1a2a8; font-family: var(--mono); font-size: 7px; white-space: nowrap; }
.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; padding: 11px 15px; border: 1px solid #34333e; border-radius: 8px; color: #f5f4fa; background: #22212b; box-shadow: 0 12px 25px #10101530; font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .main-nav { gap: 22px; margin-left: 35px; }
  .hero { min-height: 585px; gap: 25px; }
  .hero h1 { font-size: clamp(42px, 4.8vw, 52px); }
  .terminal-wrap { min-height: 375px; }
  .orbit-a { width: 72%; height: 230px; }
  .orbit-b { width: 80%; height: 190px; }
  .floating-chip { scale: .9; }
  .chip-model { right: -6px; }
  .chip-usage { left: -10px; }
  .status-shell { gap: 30px; padding: 30px; }
  .quickstart { gap: 40px; }
  .faq-section { gap: 44px; }
}

@media (max-width: 1100px) {
  .orbit-a { width: 72%; height: 230px; }
  .orbit-b { width: 80%; height: 190px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 75px; }
  .ambient-one { right: 0; width: 100vw; }
  .section-wrap { width: min(100% - 40px, var(--content)); }
  .site-header { height: 66px; }
  .header-inner { width: calc(100% - 40px); }
  .header-actions { display: none; }
  .menu-toggle { width: 38px; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e4e4df; border-radius: 8px; background: #fff9; cursor: pointer; }
  .menu-toggle span { width: 15px; height: 1.5px; border-radius: 2px; background: #383943; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .main-nav { position: absolute; top: 65px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 20px 15px; border-bottom: 1px solid #e3e3dd; background: #f7f7f2f5; box-shadow: 0 14px 20px #29283a0c; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 13px 5px; border-bottom: 1px solid #ebebe6; }
  .main-nav a:last-child { border-bottom: 0; }
  .hero { min-height: unset; display: flex; flex-direction: column; align-items: stretch; gap: 31px; padding-top: 52px; padding-bottom: 40px; }
  .hero h1 { margin-top: 20px; font-size: clamp(43px, 10vw, 60px); }
  .hero-description { max-width: 550px; font-size: 12px; }
  .hero-proof { margin-top: 20px; font-size: 9px; }
  .terminal-wrap { min-height: unset; padding: 16px 5px 30px; }
  .terminal-card { width: 100%; transform: rotate(-.4deg); }
  .code-window { min-height: 208px; padding: 17px 13px 14px; font-size: clamp(7px, 1.9vw, 9px); }
  .terminal-head { height: 45px; padding-inline: 13px; }
  .terminal-meta { padding-inline: 13px; }
  .terminal-foot { padding-inline: 13px; }
  .orbit-a { width: 68%; height: 190px; }
  .orbit-b { width: 75%; height: 150px; }
  .floating-chip { scale: .82; }
  .chip-model { top: -2px; right: -10px; transform-origin: top right; }
  .chip-usage { bottom: 7px; left: 0; transform-origin: bottom left; }
  .hero-caption { right: 6px; bottom: 2px; font-size: 7px; }
  .model-band-inner { width: 100%; min-height: 73px; gap: 14px; padding-left: 20px; }
  .band-label { font-size: 7px; }
  .model-track-inner { gap: 18px; }
  .model-track-inner > span { gap: 6px; font-size: 10px; }
  .model-track-inner > b { font-size: 8px; }
  .band-link { padding-right: 16px; font-size: 8px; }
  .features { padding-top: 76px; padding-bottom: 74px; }
  .section-intro, .use-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 26px; }
  .section-intro h2, .quick-copy h2 { font-size: 31px; }
  .section-intro > p, .use-heading > p { font-size: 10px; }
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-card { min-height: 235px; padding: 20px; }
  .feature-primary { min-height: 255px; }
  .feature-wide { min-height: 380px; grid-template-columns: 1fr; align-content: start; }
  .key-visual { min-height: 175px; }
  .feature-note { font-size: 8px; line-height: 1.7; }
  .use-cases { padding: 40px 0 75px; }
  .use-heading h2 { font-size: 27px; }
  .use-grid { grid-template-columns: 1fr; gap: 10px; }
  .use-card { min-height: 380px; padding: 20px; }
  .quickstart { grid-template-columns: 1fr; gap: 28px; padding-top: 70px; padding-bottom: 76px; }
  .quick-copy > p:not(.section-kicker) { max-width: 500px; }
  .steps { margin-top: 23px; }
  .quick-code { min-height: 198px; padding: 18px 14px; font-size: clamp(7px, 1.85vw, 9px); }
  .quick-code-head { padding-inline: 13px; }
  .code-tabs { padding-inline: 14px; }
  .code-foot { padding-inline: 13px; }
  .base-url-row { gap: 7px; padding-inline: 12px; }
  .base-url-row code { font-size: 7px; }
  .models-detail { padding-top: 72px; padding-bottom: 75px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 7px; }
  .catalog-item { min-height: 61px; grid-template-columns: 34px 1fr auto 12px; gap: 8px; padding: 9px; }
  .catalog-item > i { font-size: 7px; }
  .status-section { padding-bottom: 76px; }
  .status-shell { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .status-copy h2 { font-size: 26px; }
  .status-copy > p:not(.section-kicker) { max-width: 440px; }
  .faq-section { grid-template-columns: 1fr; gap: 26px; padding-top: 69px; padding-bottom: 78px; }
  .faq-heading h2 { font-size: 31px; }
  .faq-item summary { min-height: 58px; }
  .faq-item summary > span { gap: 10px; font-size: 10px; }
  .faq-item > p { margin-right: 24px; margin-left: 24px; font-size: 8px; }
  .final-cta { min-height: 336px; }
  .cta-content { padding-inline: 18px; }
  .cta-content h2 { font-size: clamp(23px, 6vw, 29px); }
  .cta-content > p:not(.section-kicker) { max-width: 290px; margin-inline: auto; line-height: 1.7; }
  .cta-side-note { right: 17px; bottom: 13px; scale: .85; transform-origin: bottom right; }
  .site-footer { min-height: 190px; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 25px; padding-bottom: 25px; }
  .site-footer > p { grid-column: 1; margin: 3px 0; }
  .footer-links { grid-column: 1 / -1; justify-content: flex-start; margin-top: 13px; }
  .copyright { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .section-wrap { width: calc(100% - 32px); }
  .header-inner { width: calc(100% - 32px); }
  .hero h1 { font-size: 42px; }
  .hero-actions .button { min-height: 42px; gap: 12px; padding-inline: 13px; font-size: 10px; }
  .hero-proof { gap: 7px; font-size: 8px; }
  .terminal-badge { display: none; }
  .terminal-title { font-size: 8px; }
  .code-window { font-size: 7px; }
  .floating-chip { scale: .7; }
  .chip-model { right: -8px; }
  .chip-usage { left: 0; }
  .base-url-row > span { display: none; }
  .catalog-item { grid-template-columns: 31px 1fr auto 10px; }
  .catalog-item > i { max-width: 72px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}