:root{color-scheme:light;--canvas:#f8f5ef;--surface:#fffdf8;--ink:#252523;--muted:#76736c;--border:#e2ddd4;--accent:#b94727;--accent-light:#f5e6dc;--focus:#873d2a;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:5px}button{color:inherit}svg{display:block}button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.page-shell{width:min(1320px,calc(100% - 112px));margin:auto;min-height:720px;height:100svh;display:flex;flex-direction:column}.site-header{height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:30px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:21px;font-weight:750;letter-spacing:-.65px}.brand strong{font-weight:650;margin-left:3px}.brand small{display:block;font-size:8px;line-height:1.6;letter-spacing:2.2px;font-weight:650;color:var(--muted);margin-top:2px}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--accent);color:#fffdf8}.brand-icon svg{width:28px;height:28px}.nav-links{display:flex;align-items:center;gap:37px;margin-left:auto;margin-right:36px}.nav-link{border:0;background:none;padding:10px 0;font-size:13px;color:#69675f;position:relative;transition:color .18s}.nav-link:hover,.nav-link.active{color:var(--ink)}.nav-link.active:after{content:"";position:absolute;height:3px;width:3px;background:var(--accent);border-radius:50%;bottom:1px;left:calc(50% - 1.5px)}.small-arrow{padding-left:3px}.header-cta{background:none;border:1px solid #c8c2b8;border-radius:7px;padding:11px 17px;font-size:12px;font-weight:600;display:flex;gap:22px;align-items:center;transition:background .2s,transform .2s}.header-cta:hover{background:#eee6dc;transform:translateY(-2px)}.main-content{flex:1;min-height:0;display:flex;flex-direction:column}.hero{flex:1;min-height:490px;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;position:relative;padding:38px 0 26px}.hero-copy{padding-bottom:7px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#686257;font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:23px}.eyebrow-symbol{font-size:20px;color:var(--accent);line-height:1}.eyebrow-line{display:inline-block;width:34px;height:1px;background:#c6baac;margin-left:6px}h1{font-size:clamp(48px,4.75vw,70px);line-height:1.27;font-weight:800;letter-spacing:-2px;margin:0}.headline-accent{display:block;color:var(--accent);white-space:nowrap}.headline-period{font-family:Georgia,serif;display:inline-block;margin-left:3px}.hero-description{font-size:16px;line-height:1.95;letter-spacing:.45px;color:#77746b;margin:24px 0 29px}.hero-actions{display:flex;gap:13px;align-items:center}.button{height:51px;display:inline-flex;align-items:center;justify-content:center;gap:24px;border-radius:7px;padding:0 24px;font-size:14px;transition:background .2s,transform .2s,box-shadow .2s}.button svg{height:19px;width:19px}.button-primary{background:var(--accent);color:#fffdf8;border:1px solid var(--accent);font-weight:650;box-shadow:0 4px 10px #84351f0a}.button-primary:hover{background:#a33c21;transform:translateY(-2px);box-shadow:0 7px 18px #84351f22}.button-secondary{background:transparent;color:#524d44;border:1px solid #d8d1c5;gap:10px;padding:0 19px}.button-secondary:hover{background:#f0e9df;transform:translateY(-2px)}.feature-notes{display:flex;align-items:center;gap:18px;font-size:10px;color:#767268;margin-top:23px;white-space:nowrap}.feature-notes span{display:flex;align-items:center;gap:5px}.feature-notes svg{height:13px;width:13px;fill:none;stroke:#6d7460;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hero-visual{height:490px;position:relative;min-width:0;isolation:isolate}.visual-grid{position:absolute;inset:0 -15px 0 -30px;z-index:-3;background-image:linear-gradient(#bda99416 1px,transparent 1px),linear-gradient(90deg,#bda99416 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse 58% 55% at 58% 43%,black,transparent)}.hero-visual:before{content:"";position:absolute;z-index:-2;inset:30px -35px 5px -40px;background:radial-gradient(ellipse at 64% 42%,#d89d6633,transparent 67%);filter:blur(10px)}.globe{width:520px;height:auto;max-width:none;position:absolute;top:-43px;right:-47px;z-index:-1;opacity:.9;animation:globe-appear 1.1s ease-out both}.orbit-caption{display:flex;gap:9px;align-items:center;position:absolute;right:8px;top:44px;font:8px/1.8 "Segoe UI",sans-serif;letter-spacing:1px;color:#81725f;transform:rotate(6deg)}.orbit-caption strong{font-weight:600;color:#5a5349}.orbit-icon{background:#fbf8f2;border:1px solid #d0b6a0;display:grid;place-items:center;border-radius:50%;height:29px;width:29px;font-size:16px;line-height:1}.coordinate{position:absolute;right:-6px;top:220px;writing-mode:vertical-rl;color:#948c7e;letter-spacing:2px;font-size:7px}.code-window{position:absolute;left:0;right:25px;top:155px;background:#242724;border:1px solid #343830;border-radius:12px;box-shadow:0 24px 56px -22px #3c352c5c,0 4px 10px #3c352c17;overflow:hidden;transform:rotate(-1.25deg);animation:card-appear .85s ease-out both}.code-header{height:48px;background:#2b2e2a;border-bottom:1px solid #3b3e37;display:flex;align-items:center;gap:16px;padding:0 18px;color:#b8b9ad}.window-dots{display:flex;gap:5px}.window-dots i{display:block;width:7px;height:7px;background:#62645b;border-radius:50%}.window-dots i:first-child{background:#c37d5d}.window-dots i:nth-child(2){background:#b69f64}.window-dots i:nth-child(3){background:#849773}.file-name{font:10px "Cascadia Code",Consolas,monospace;letter-spacing:.2px}.copy-button{display:flex;gap:6px;align-items:center;border:0;background:transparent;color:#c2c2b6;margin-left:auto;font-size:10px;padding:8px 0 8px 8px}.copy-button svg{width:13px;height:13px}.copy-button:hover{color:white}.code-body{padding:19px 0 18px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#6b705f #242724}.code-line{display:flex;align-items:center;min-height:22px;line-height:22px;font-size:11.5px;white-space:pre;min-width:max-content;padding-right:17px}.line-number{font:9px/22px "Cascadia Code",Consolas,monospace;flex:0 0 44px;text-align:center;color:#8c8f7d;user-select:none}.code-line code{font:inherit;font-family:"Cascadia Code",Consolas,"Microsoft YaHei",monospace;color:#e1e2d5;letter-spacing:-.15px}.c-comment{color:#a6ad97}.c-purple{color:#dcbca1}.c-green{color:#c0d496}.c-yellow{color:#e5c787}.code-line.highlight{background:#c6d19a09;box-shadow:inset 2px 0 #d89667}.code-footer{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;border-top:1px solid #3b3e37;font-size:8px;letter-spacing:.4px;color:#b6bbaa;background:#282b26}.code-footer span:first-child{display:flex;align-items:center;gap:6px}.code-footer i{display:block;height:5px;width:5px;border-radius:50%;background:#c49b72}.example-label{color:#a7ad99}.floating-note{display:flex;align-items:center;gap:12px;background:#fffdf8;border:1px solid #e4d9cb;position:absolute;left:10px;right:auto;top:86px;bottom:auto;border-radius:9px;padding:13px 17px;box-shadow:0 8px 24px #5a46330a;transform:rotate(2deg);animation:note-appear 1s ease-out both;z-index:3}.note-icon{height:31px;width:31px;border:1px solid #ead6c6;border-radius:8px;color:var(--accent);display:grid;place-items:center;background:#faf0e7}.note-icon svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.floating-note strong{font-size:11px;font-weight:600;display:block;letter-spacing:.4px}.floating-note div>span{display:block;font-size:8px;color:#8b8378;margin-top:5px}.note-spark{font-size:23px;color:#c68f68;margin-left:18px}.ecosystem{height:111px;border-top:1px solid var(--border);display:flex;align-items:center;gap:45px;flex-shrink:0}.ecosystem-intro{width:162px;flex-shrink:0;font-size:10px;line-height:1.8;color:var(--muted);border-right:1px solid var(--border)}.ecosystem-intro strong{display:block;font-size:12px;font-weight:500;color:#4c4840;margin-top:2px}.model-logos{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1}.model-logo{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:10px 0;color:#55544f;font-size:21px;font-weight:600;letter-spacing:-.7px;opacity:.9;transition:opacity .2s,transform .2s}.model-logo:hover{opacity:1;transform:translateY(-2px)}.provider-mark{height:27px;width:27px;flex-shrink:0}.claude-logo{font-family:Georgia,"Times New Roman",serif;font-size:26px;letter-spacing:-.9px;font-weight:500}.gemini-logo{font-weight:500;letter-spacing:-.7px}.deepseek-logo{font-size:22px;letter-spacing:-1px}.deepseek-logo svg{width:31px}.more-models{font-size:10px;border:0;background:transparent;color:#776e60;display:flex;gap:13px;align-items:center;padding:10px 0;white-space:nowrap}.more-models:hover{color:var(--accent)}.site-footer{height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:#847e73;border-top:1px solid var(--border);flex-shrink:0;letter-spacing:.2px}.footer-divider{padding:0 12px;color:#c9c0b4}.footer-right{display:flex;align-items:center;gap:7px}.footer-star{font-size:15px;color:#9a826a}.preview-tag{font-size:8px;border:1px solid #ded5c9;border-radius:4px;margin-left:10px;padding:3px 5px;color:#8a7762}.skip-link{position:fixed;left:20px;top:-80px;padding:12px 16px;background:var(--surface);border:1px solid var(--accent);z-index:20}.skip-link:focus{top:10px}dialog{width:min(590px,calc(100% - 36px));max-height:calc(100svh - 40px);border:1px solid #e0d6c9;border-radius:16px;background:var(--surface);color:var(--ink);padding:0;box-shadow:0 24px 100px #211d2440}dialog::backdrop{background:#23221f66;backdrop-filter:blur(5px)}.dialog-shell{padding:34px;position:relative}.dialog-close{position:absolute;right:13px;top:9px;width:36px;height:36px;font-size:27px;border:0;background:transparent;color:#80776b;border-radius:5px}.dialog-close:hover{background:#f0e8df}.dialog-eyebrow{color:var(--accent);font-size:9px;font-weight:650;letter-spacing:1.2px}.dialog-shell h2{font-size:25px;letter-spacing:-.5px;margin:15px 0 17px}.dialog-shell p,.dialog-shell li{font-size:13px;line-height:1.9;color:#6e675c}.dialog-shell ol{padding-left:20px}.dialog-shell .dialog-tip{background:#f4ece1;border:1px solid #e9dac7;border-radius:8px;padding:11px 13px;font-size:11px;color:#79624c}.dialog-code{background:#242724;color:#d8dfc8;border-radius:8px;font:11px/1.8 "Cascadia Code",Consolas,monospace;padding:17px;overflow:auto;white-space:pre;tab-size:2}.dialog-models{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-model{border:1px solid #e3d9cb;border-radius:8px;padding:16px}.dialog-model strong{font-size:15px}.dialog-model p{margin:7px 0 0;font-size:11px}.dialog-shell .button{margin-top:14px;font-size:12px;height:44px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,14px);opacity:0;pointer-events:none;color:#fff;background:#33382d;box-shadow:0 5px 20px #0002;padding:12px 20px;border-radius:8px;font-size:12px;transition:opacity .2s,transform .2s;z-index:10;max-width:calc(100% - 36px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes globe-appear{from{opacity:0;transform:translateY(10px) rotate(-4deg)}to{opacity:.9;transform:translateY(0) rotate(0)}}@keyframes card-appear{from{opacity:0;transform:translateY(16px) rotate(-1.25deg)}to{opacity:1;transform:translateY(0) rotate(-1.25deg)}}@keyframes note-appear{from{opacity:0;transform:translateY(12px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(2deg)}}
@media(min-width:1600px){.page-shell{width:min(1400px,calc(100% - 160px))}.site-header{height:112px}.hero{gap:70px}.hero-visual{height:520px}.globe{width:590px;top:-80px}.code-window{top:165px;right:30px}.code-line{font-size:12px;min-height:24px;line-height:24px}.line-number{line-height:24px}.floating-note{top:94px;bottom:auto}.eyebrow{margin-bottom:30px}h1{font-size:76px}.hero-description{font-size:18px}.ecosystem{height:126px}.site-footer{height:74px}}
@media(max-width:1190px){.page-shell{width:calc(100% - 72px)}.hero{gap:25px}.eyebrow{font-size:8px;letter-spacing:1.3px}.hero-description{font-size:14px}.hero-actions{gap:10px}.button{padding:0 18px;gap:18px;font-size:13px}.button-secondary{gap:8px;padding:0 14px}.code-window{right:10px}.code-line{font-size:9px}.line-number{flex-basis:32px}.globe{width:480px;right:-37px;top:-24px}.coordinate{right:-10px}.floating-note{left:0;right:auto;top:88px;bottom:auto}.ecosystem{gap:27px}.ecosystem-intro{width:138px}.model-logos{gap:17px}.model-logo{font-size:19px}.claude-logo{font-size:23px}.provider-mark{width:24px;height:24px}.more-models{font-size:9px;gap:8px}}
@media(max-height:780px) and (min-width:951px){.page-shell{min-height:650px}.site-header{height:82px}.hero{min-height:420px;padding-top:18px;padding-bottom:18px}.hero-visual{height:423px}.code-window{top:110px}.globe{width:470px;top:-76px}.orbit-caption{top:3px}.coordinate{top:160px}.floating-note{top:44px;bottom:auto}.eyebrow{margin-bottom:17px}h1{font-size:58px}.hero-description{margin:18px 0 23px;font-size:14px}.feature-notes{margin-top:18px}.ecosystem{height:90px}.site-footer{height:49px}}
@media(max-width:950px) and (min-width:641px){.page-shell{height:auto;min-height:100svh;width:calc(100% - 64px)}.site-header{height:86px}.nav-links{gap:22px;margin-right:0}.hero{gap:10px;min-height:470px;padding:32px 0}.hero-copy{width:100%}h1{font-size:43px}.hero-description{font-size:12px;letter-spacing:0}.eyebrow{font-size:7px;gap:7px;letter-spacing:1px}.eyebrow-line{display:none}.hero-actions{flex-wrap:wrap;gap:8px}.button{height:44px;font-size:12px;padding:0 14px;gap:10px}.feature-notes{gap:9px;font-size:8px}.hero-visual{height:405px}.hero-visual:before{right:-16px}.globe{width:390px;right:-30px;top:-35px}.code-window{top:123px;right:0}.code-line{font-size:7px;line-height:19px;min-height:19px}.line-number{flex-basis:24px;line-height:19px;font-size:7px}.code-header{height:39px;padding:0 12px;gap:10px}.file-name{font-size:8px}.code-body{padding:13px 0}.code-footer{font-size:7px;padding:0 10px}.coordinate{display:none}.orbit-caption{right:0;top:28px;font-size:7px}.floating-note{padding:9px 12px;gap:8px;left:0;right:auto;top:57px;bottom:auto}.floating-note strong{font-size:9px}.floating-note div>span{font-size:6px}.note-icon{width:27px;height:27px}.note-spark{font-size:18px;margin-left:5px}.ecosystem{height:106px;gap:20px}.ecosystem-intro{width:120px;font-size:9px}.ecosystem-intro strong{font-size:10px}.model-logos{gap:12px}.model-logo{font-size:16px;gap:5px}.claude-logo{font-size:20px}.deepseek-logo{font-size:16px}.provider-mark{width:21px;height:21px}.deepseek-logo svg{width:23px}.more-models{display:none}.site-footer{height:55px;font-size:8px}.preview-tag{margin-left:3px}}
@media(max-width:640px){.page-shell{width:calc(100% - 40px);height:100svh;min-height:780px}.site-header{height:77px;gap:14px}.brand{font-size:17px;gap:9px;letter-spacing:-.5px}.brand-icon{height:35px;width:35px;border-radius:10px}.brand-icon svg{height:24px;width:24px}.brand small{font-size:6px;letter-spacing:1.7px}.nav-links{display:none}.header-cta{font-size:10px;padding:9px 12px;gap:12px;border-radius:6px}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:9px;padding:30px 0 18px;justify-content:center;flex:1}.hero-copy{padding:0}.eyebrow{font-size:8px;margin-bottom:14px;letter-spacing:1.35px}.eyebrow-symbol{font-size:17px}.eyebrow-line{width:25px}.hero h1{font-size:clamp(37px,10.8vw,53px);line-height:1.24;letter-spacing:-1.6px}.headline-period{margin-left:2px}.hero-description{font-size:12px;line-height:1.85;margin:14px 0 18px;letter-spacing:.15px}.desktop-break{display:none}.hero-actions{gap:9px}.button{font-size:12px;height:44px;padding:0 17px;gap:20px}.button-secondary{gap:8px;padding:0 13px}.button svg{height:17px;width:17px}.feature-notes{font-size:8px;gap:15px;margin-top:13px}.feature-notes svg{width:11px;height:11px}.hero-visual{height:270px;flex-shrink:0;margin-top:9px}.globe{width:295px;right:-16px;top:-50px;opacity:.6}.visual-grid{inset:-30px 0 -10px 0}.hero-visual:before{inset:-25px -5px 0 0}.orbit-caption{font-size:6px;top:-9px;right:7px;gap:6px}.orbit-icon{height:22px;width:22px;font-size:12px}.coordinate{display:none}.code-window{top:38px;right:6px;left:0;border-radius:9px;transform:rotate(-1deg)}.code-header{height:36px;padding:0 12px;gap:12px}.window-dots{gap:4px}.window-dots i{width:5px;height:5px}.file-name{font-size:8px}.copy-button{font-size:8px;gap:4px}.copy-button svg{width:11px;height:11px}.code-body{padding:12px 0}.code-line{font-size:8px;line-height:18px;min-height:18px;padding-right:12px}.line-number{font-size:7px;line-height:18px;flex-basis:28px}.code-line:nth-child(n+7){display:none}.code-line.blank{display:none}.code-footer{height:29px;font-size:7px;padding:0 12px}.floating-note{left:auto;top:auto;right:0;bottom:2px;padding:9px 13px;gap:9px;transform:rotate(1.4deg);border-radius:7px}.floating-note strong{font-size:9px}.floating-note div>span{font-size:7px;margin-top:3px}.note-icon{height:27px;width:27px;border-radius:6px}.note-icon svg{width:17px;height:17px}.note-spark{font-size:20px;margin-left:13px}.ecosystem{height:86px;gap:12px;flex-direction:column;align-items:stretch;justify-content:center}.ecosystem-intro{border:0;width:auto;display:flex;gap:7px;font-size:8px;line-height:1}.ecosystem-intro strong{font-size:8px;margin:0;color:#847d72}.model-logos{flex:0;gap:8px}.model-logo{gap:5px;font-size:15px;padding:4px 0;letter-spacing:-.5px}.claude-logo{font-size:18px}.deepseek-logo{font-size:15px}.provider-mark{height:20px;width:20px}.deepseek-logo svg{width:24px}.more-models{display:none}.site-footer{font-size:7px;height:46px;gap:8px;letter-spacing:0}.footer-divider{padding:0 6px}.footer-right{gap:0}.footer-star{display:none}.footer-right{font-size:0}.preview-tag{font-size:7px;margin:0}.dialog-shell{padding:28px 21px}.dialog-shell h2{font-size:22px}.dialog-code{font-size:9px;padding:13px}.dialog-models{gap:8px}.dialog-model{padding:12px}.dialog-model p{font-size:10px}}
@media(max-width:640px) and (max-height:760px){.page-shell{min-height:690px}.site-header{height:65px}.hero{padding-top:19px;padding-bottom:10px;gap:0}.eyebrow{margin-bottom:10px}.hero h1{font-size:40px}.hero-description{margin:10px 0 13px;font-size:11px}.button{height:40px}.feature-notes{margin-top:10px}.hero-visual{height:236px;margin-top:9px}.globe{top:-42px;width:265px}.code-window{top:32px}.floating-note{top:auto;bottom:-3px}.ecosystem{height:77px}.site-footer{height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.globe{opacity:.9}.code-window{transform:rotate(-1.25deg)}.floating-note{transform:rotate(2deg)}}

/* 2026-10-10 — reference-style revision. Approved copy and interactions stay unchanged. */
:root {
  --canvas: #f6f9f9;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #7e8998;
  --border: #e7eeed;
  --accent: #0b9677;
  --accent-light: #e7f5f0;
  --focus: #08785f;
}
body {
  background: linear-gradient(180deg, #f8fafb 0%, #f3f8f7 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 72px 0 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(13, 148, 119, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 148, 119, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent);
  z-index: -1;
}
.page-shell {
  width: min(1200px, calc(100% - 100px));
  height: 100svh;
  min-height: 720px;
}
.site-header {
  height: 72px;
  border: 0;
  position: relative;
  isolation: isolate;
}
.site-header::before {
  content: "";
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid #f0f3f4;
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
.brand { gap: 10px; font-size: 22px; letter-spacing: -.5px; }
.brand-icon { width: 28px; height: 32px; background: none; color: var(--accent); border-radius: 0; }
.brand-icon svg { width: 27px; height: 27px; }
.brand small { color: #8c98a4; font-size: 7px; letter-spacing: 2px; }
.nav-links { gap: 32px; margin-right: 25px; }
.nav-link { color: #7b8695; font-size: 14px; }
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-link.active::after { background: var(--accent); }
.header-cta { border: 1px solid #c7e9e0; background: #edf8f4; color: #0c896c; border-radius: 999px; padding: 10px 17px; font-size: 13px; gap: 15px; }
.header-cta:hover { background: #e0f4ec; }
.hero {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 95px;
  min-height: 490px;
  padding: 42px 0 36px;
}
.hero-copy { padding-bottom: 0; }
.eyebrow {
  display: inline-flex;
  gap: 10px;
  background: #e5f3ee;
  color: #15826c;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 1.2px;
  margin-bottom: 27px;
  box-shadow: 0 2px 6px rgba(7, 127, 96, .035);
}
.eyebrow-symbol { display: block; width: 8px; height: 8px; border-radius: 50%; font-size: 0; background: #16ad88; box-shadow: 0 0 0 4px #16ad8812; }
.eyebrow-line { display: none; }
h1 { color: #111827; font-size: 67px; line-height: 1.22; letter-spacing: -2px; font-weight: 800; }
.headline-accent { color: #111827; }
.gradient-model, .headline-period {
  color: #3c8fec;
  background: linear-gradient(110deg, #229fb3 0%, #318cf8 45%, #7062ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headline-period { margin-left: 2px; }
.hero-description { color: #7c8796; font-size: 16px; line-height: 1.85; letter-spacing: .15px; margin: 23px 0 30px; }
.hero-actions { gap: 14px; }
.button { border-radius: 999px; height: 52px; padding: 0 25px; font-size: 14px; }
.button-primary { color: white; border-color: #0d9e7b; background: linear-gradient(105deg, #21a486, #09ae85); box-shadow: 0 4px 10px #0d9e7b26; }
.button-primary:hover { background: linear-gradient(105deg, #178f75, #079b77); box-shadow: 0 7px 18px #0d9e7b26; }
.button-secondary { border-color: #d4e5e1; color: #6b7c81; background: #ffffff70; padding: 0 22px; gap: 9px; }
.button-secondary:hover { background: #e9f5f0; }
.feature-notes { margin-top: 25px; gap: 18px; color: #7f8a98; font-size: 10px; }
.feature-notes svg { stroke: #109f7c; }
.hero-visual { height: 430px; display: flex; align-items: center; justify-content: center; }
.visual-grid, .globe, .orbit-caption, .coordinate, .floating-note { display: none; animation: none; }
.hero-visual::before { content: none; }
.code-window {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  background: white;
  border: 1px solid #e3e9ed;
  border-radius: 17px;
  transform: none;
  animation: none;
  box-shadow: 0 20px 60px rgba(15, 34, 31, .085), 0 1px 3px rgba(15, 34, 31, .05);
}
.code-header { background: #fff; border-bottom: 1px solid #f0f4f6; height: 53px; padding: 0 21px; gap: 18px; }
.window-dots { gap: 7px; }
.window-dots i { width: 11px; height: 11px; }
.window-dots i:first-child { background: #ff6059; }
.window-dots i:nth-child(2) { background: #ffbc2e; }
.window-dots i:nth-child(3) { background: #28c840; }
.file-name { color: #91a0b7; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.copy-button { color: #8b9aad; font-size: 10px; }
.copy-button:hover { color: #0c9878; }
.code-body { padding: 23px 0 22px; scrollbar-color: #b4d8ce #f8fbfa; }
.code-line { font-size: 11.5px; line-height: 23px; min-height: 23px; padding: 0 22px; }
.line-number { display: none; }
.code-line code { color: #334155; letter-spacing: -.25px; }
.code-line.highlight { background: #eefaf633; box-shadow: none; }
.c-comment { color: #8798b0; }
.c-purple { color: #1e293b; font-weight: 700; }
.c-yellow { color: #d87913; }
.c-green { color: #099f7b; }
.code-footer { height: 35px; padding: 0 21px; background: #fbfdfc; border-color: #f0f5f3; color: #7f91a3; font-size: 8px; }
.code-footer i { background: #13a77e; }
.example-label { color: #9aa8b8; }
.ecosystem { height: 100px; border: 0; gap: 35px; }
.ecosystem-intro { border-color: #e0e8e6; color: #8b98a6; }
.ecosystem-intro strong { color: #74828b; }
.model-logo { color: #548a7d; opacity: .8; font-size: 20px; }
.claude-logo { font-size: 25px; }
.model-logo:hover { color: #0b9677; opacity: 1; }
.more-models { color: #7d9690; }
.site-footer { height: 42px; border: 0; color: #99a5ae; }
.footer-divider { color: #c8d5d2; }
.footer-star { color: #5cab92; }
.preview-tag { border-color: #d7e7e1; color: #7b9e90; }
.dialog-close { color: #7e8d95; }
.dialog-close:hover { background: #eaf6f0; }
dialog { border-color: #dfeae5; }
.dialog-shell p, .dialog-shell li { color: #71808b; }
.dialog-shell .dialog-tip { border-color: #d4eae0; background: #f0f9f4; color: #598374; }
.dialog-code { background: #f3f8f7; border: 1px solid #deebe5; color: #36574e; }
.dialog-model { border-color: #e1ece6; }
.toast { background: #126e58; }
@media (min-width:1600px) {
  .page-shell { width: min(1240px, calc(100% - 160px)); }
  .site-header { height: 76px; }
  body::before { top: 76px; }
  .hero { gap: 105px; }
  h1 { font-size: 75px; }
  .hero-description { font-size: 18px; }
  .hero-visual { height: 470px; }
  .code-window { top: auto; right: auto; }
  .code-line { font-size: 12px; line-height: 25px; min-height: 25px; }
  .ecosystem { height: 105px; }
  .site-footer { height: 45px; }
}
@media (max-width:1190px) {
  .page-shell { width: calc(100% - 76px); }
  .hero { gap: 52px; }
  h1 { font-size: 58px; }
  .eyebrow { font-size: 8px; letter-spacing: .9px; }
  .hero-description { font-size: 14px; }
  .button { padding: 0 20px; font-size: 13px; }
  .button-secondary { padding: 0 17px; }
  .code-window { right: auto; }
  .code-line { font-size: 10px; padding: 0 18px; }
  .ecosystem { gap: 27px; }
  .model-logo { font-size: 18px; }
  .claude-logo { font-size: 23px; }
}
@media (max-height:780px) and (min-width:951px) {
  .page-shell { min-height: 650px; }
  .site-header { height: 65px; }
  body::before { top: 65px; }
  .hero { min-height: 420px; padding: 22px 0; }
  .eyebrow { margin-bottom: 20px; padding: 8px 14px; }
  h1 { font-size: 59px; }
  .hero-description { font-size: 14px; margin: 20px 0 23px; }
  .hero-visual { height: 398px; }
  .code-window { top: auto; }
  .code-body { padding: 18px 0; }
  .code-line { line-height: 22px; min-height: 22px; }
  .feature-notes { margin-top: 21px; }
  .ecosystem { height: 83px; }
  .site-footer { height: 37px; }
}
@media (max-width:950px) and (min-width:641px) {
  .page-shell { width: calc(100% - 64px); height: 100svh; min-height: 720px; }
  .site-header { height: 75px; }
  .nav-links { gap: 22px; margin-right: 0; }
  .brand { font-size: 20px; }
  .hero { gap: 22px; min-height: 450px; padding: 30px 0; }
  h1 { font-size: 43px; }
  .eyebrow { font-size: 6px; letter-spacing: .7px; gap: 8px; padding: 8px 12px; margin-bottom: 21px; }
  .eyebrow-symbol { height: 6px; width: 6px; }
  .hero-description { font-size: 12px; }
  .hero-actions { gap: 9px; }
  .button { padding: 0 14px; height: 44px; font-size: 11px; gap: 10px; }
  .button-secondary { gap: 7px; }
  .feature-notes { gap: 10px; font-size: 8px; margin-top: 21px; }
  .hero-visual { height: 390px; }
  .code-window { right: auto; top: auto; border-radius: 14px; }
  .code-header { height: 43px; padding: 0 15px; gap: 10px; }
  .file-name { font-size: 7px; }
  .window-dots { gap: 5px; }
  .window-dots i { width: 8px; height: 8px; }
  .copy-button { font-size: 8px; }
  .code-body { padding: 17px 0; }
  .code-line { font-size: 7.7px; padding: 0 13px; line-height: 21px; min-height: 21px; }
  .code-footer { padding: 0 13px; font-size: 7px; }
  .ecosystem { height: 100px; gap: 20px; }
  .model-logo { font-size: 16px; }
  .claude-logo { font-size: 20px; }
  .site-footer { height: 43px; }
}
@media (max-width:640px) {
  .page-shell { width: calc(100% - 40px); height: 100svh; min-height: 780px; }
  .site-header { height: 70px; }
  body::before { top: 70px; background-size: 44px 44px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-icon { width: 25px; height: 30px; }
  .brand-icon svg { height: 25px; width: 25px; }
  .brand small { font-size: 6px; letter-spacing: 1.5px; }
  .nav-links { display: none; }
  .header-cta { font-size: 10px; padding: 9px 12px; gap: 11px; }
  .hero { display: flex; flex-direction: column; min-height: 0; gap: 17px; padding: 27px 0 15px; justify-content: center; }
  .eyebrow { font-size: 7px; letter-spacing: .7px; padding: 8px 12px; gap: 9px; margin-bottom: 18px; }
  .eyebrow-symbol { height: 6px; width: 6px; }
  .hero h1 { font-size: clamp(38px, 10.7vw, 55px); line-height: 1.25; letter-spacing: -1.5px; }
  .hero-description { font-size: 12px; line-height: 1.8; margin: 16px 0 21px; }
  .hero-actions { gap: 10px; }
  .button { height: 44px; font-size: 12px; padding: 0 18px; gap: 18px; }
  .button-secondary { gap: 7px; padding: 0 15px; }
  .feature-notes { font-size: 8px; gap: 15px; margin-top: 16px; }
  .hero-visual { height: 221px; margin-top: 5px; display: flex; align-items: center; justify-content: center; }
  .code-window { left: auto; right: auto; top: auto; border-radius: 13px; transform: none; }
  .code-header { height: 41px; padding: 0 16px; gap: 13px; }
  .window-dots { gap: 5px; }
  .window-dots i { height: 8px; width: 8px; }
  .file-name { font-size: 8px; }
  .copy-button { font-size: 8px; }
  .code-body { padding: 20px 0; }
  .code-line { font-size: 9px; line-height: 21px; min-height: 21px; padding: 0 17px; }
  .code-footer { height: 31px; padding: 0 16px; font-size: 7px; }
  .ecosystem { height: 88px; border: 0; gap: 13px; }
  .ecosystem-intro { font-size: 8px; }
  .ecosystem-intro strong { font-size: 8px; }
  .model-logos { gap: 8px; }
  .model-logo { font-size: 15px; gap: 5px; }
  .claude-logo { font-size: 18px; }
  .deepseek-logo { font-size: 15px; }
  .site-footer { height: 37px; font-size: 7px; border: 0; }
}
@media (max-width:640px) and (max-height:760px) {
  .page-shell { min-height: 690px; }
  .site-header { height: 62px; }
  body::before { top: 62px; }
  .hero { padding: 18px 0 9px; gap: 12px; }
  .eyebrow { margin-bottom: 12px; padding: 7px 11px; }
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 11px; margin: 12px 0 16px; }
  .button { height: 40px; }
  .feature-notes { margin-top: 12px; }
  .hero-visual { height: 210px; margin-top: 2px; }
  .code-window { top: auto; }
  .code-body { padding: 17px 0; }
  .ecosystem { height: 78px; }
  .site-footer { height: 33px; }
}
@media (prefers-reduced-motion:reduce) {
  .code-window { transform: none; }
}

/* XCM brand / reference typography variant. The previous version stays untouched. */
:root {
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", "Fira Code", Consolas, monospace;
  font-family: var(--font-sans);
  font-synthesis: weight style;
}
body { font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.brand { gap: 10px; font-family: var(--font-sans); font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.brand-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; overflow: hidden; }
.brand-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-wordmark { white-space: nowrap; }
.brand strong { margin-left: 0; font-weight: 800; }
.hero h1 { font-family: var(--font-sans); font-size: 60px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.hero-description { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; }
.code-line code, .dialog-code { font-family: var(--font-mono); letter-spacing: 0; }
.file-name { font-family: var(--font-sans); }
@media (min-width: 1600px) { .hero h1 { font-size: 60px; } }
@media (max-width: 1200px) and (min-width: 901px) { .hero h1 { font-size: clamp(48px, calc(6vw - 7px), 56px); } }
@media (max-width: 900px) and (min-width: 641px) { .hero h1 { font-size: clamp(32px, calc(6vw - 5px), 46px); } }
@media (max-width: 640px) {
  .brand { font-size: 20px; gap: 8px; }
  .brand-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .hero h1 { font-size: clamp(38px, 10.7vw, 55px); line-height: 1.2; letter-spacing: -.03em; }
  .hero-description { font-size: 12px; line-height: 1.8; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 11px; }
}

/* 2026-10-10: refined actions, softer rectangle geometry and balanced icon spacing. */
.header-cta > svg,
.hero-actions a.button > svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.header-cta,
.hero-actions .button {
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.header-cta {
  height: 40px;
  gap: 9px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid #d3e3de;
  background: #fff;
  color: #356255;
  font-size: 13px;
  box-shadow: 0 1px 2px #123e2e04;
}
.header-cta .action-arrow {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke-width: 1.75;
}
.header-cta:hover {
  border-color: #9bc5b6;
  color: #087c60;
  background: #f4faf7;
  transform: none;
}
.header-cta:active { background: #e8f4ee; }
.hero-actions { gap: 12px; }
.hero-actions .button {
  height: 48px;
  border-radius: 10px;
  padding: 0 22px;
  gap: 12px;
  font-size: 14px;
}
.hero-actions .button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke-width: 1.8;
}
.hero-actions .button-primary {
  min-width: 140px;
  border-color: #078266;
  background: #078266;
  color: #fff;
  box-shadow: 0 2px 4px #075e4612;
}
.hero-actions .button-primary:hover {
  border-color: #076f57;
  background: #076f57;
  box-shadow: 0 3px 7px #075e461c;
  transform: none;
}
.hero-actions .button-primary:active { background: #075e4b; box-shadow: none; }
.hero-actions .button-secondary {
  gap: 9px;
  background: #ffffffb8;
  border-color: #d6e1de;
  color: #526963;
  box-shadow: none;
}
.hero-actions .button-secondary:hover {
  border-color: #a8c8bb;
  background: #f6faf8;
  color: #235345;
  transform: none;
}
.hero-actions .button-secondary:active { background: #eaf2ee; }
.header-cta:focus-visible,
.hero-actions .button:focus-visible {
  outline: 3px solid #08785f;
  outline-offset: 4px;
}
.header-cta:disabled,
.hero-actions .button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 900px) and (min-width: 641px) {
  .hero-actions { gap: 10px; }
  .hero-actions .button { height: 44px; padding: 0 16px; font-size: 12px; gap: 9px; }
  .hero-actions .button-primary { min-width: 120px; }
}
@media (max-width: 640px) {
  .header-cta { height: 38px; padding: 0 12px; gap: 7px; font-size: 12px; border-radius: 8px; }
  .header-cta .action-arrow { width: 14px; height: 14px; flex-basis: 14px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { height: 44px; padding: 0 17px; gap: 10px; font-size: 12px; border-radius: 9px; }
  .hero-actions .button-primary { min-width: 123px; }
  .hero-actions .button-secondary { gap: 8px; }
  .hero-actions .button svg { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .header-cta, .hero-actions .button { transition: none; }
}


/* Official provider palette; keep the existing local layout and interactions. */
.model-logos .model-logo { opacity: 1; }
.model-logos .openai-logo { color: #000000; }
.model-logos .claude-logo { color: #141413; }
.model-logos .claude-logo .provider-mark { color: #d97757; }
.model-logos .gemini-logo { color: #5684d1; }
.model-logos .gemini-logo > span {
  background-image: linear-gradient(110deg, #9168c0 6.71246%, #5684d1 34.2551%, #1ba1e3 67.2076%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.model-logos .deepseek-logo { color: #4d6bfe; }
.model-logos .model-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }


/* Centered brand statement fills the upper whitespace without adding another card. */
.brand-intro {
  flex: 0 0 clamp(156px, 20vh, 220px);
  align-self: center;
  width: min(100%, 1000px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 0;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.brand-intro::before {
  content: "";
  position: absolute;
  inset: -12px 0 -8px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(11, 150, 119, .055), transparent 70%);
}
.intro-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; height: 8px; }
.intro-ornament span { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #b4d8ce); }
.intro-ornament span:last-child { transform: rotate(180deg); }
.intro-ornament i { width: 5px; height: 5px; border-radius: 50%; background: #15977d; box-shadow: 0 0 0 4px #15977d0d; }
.brand-intro h2 { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 58px; font-weight: 800; line-height: 1.18; letter-spacing: -.035em; white-space: nowrap; }
.intro-enterprise { color: #5442dd; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .intro-enterprise {
    background: linear-gradient(105deg, #2563eb 0%, #6546ec 48%, #a832dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.intro-api { color: #087d66; background: linear-gradient(transparent 83%, #0b967711 83%, #0b967711 95%, transparent 95%); }
.intro-tagline { margin: 0; color: #000; font-size: 20px; line-height: 30px; letter-spacing: .07em; }
.header-cta { min-width: 88px; justify-content: center; }
@media (min-width: 1600px) {
  .brand-intro { flex-basis: clamp(180px, 19vh, 280px); }
  .brand-intro h2 { font-size: 70px; }
  .intro-tagline { font-size: 24px; line-height: 34px; }
}
@media (max-height: 780px) and (min-width: 951px) {
  .brand-intro { flex-basis: 104px; padding-top: 6px; gap: 5px; }
  .brand-intro h2 { font-size: 42px; }
  .intro-tagline { font-size: 14px; line-height: 22px; }
}
@media (max-width: 950px) and (min-width: 641px) {
  .brand-intro { flex-basis: 154px; }
  .brand-intro h2 { font-size: 44px; }
  .intro-tagline { font-size: 17px; line-height: 26px; }
}
@media (max-width: 640px) {
  .brand-intro { flex-basis: 86px; padding: 7px 0 0; gap: 6px; }
  .brand-intro::before { inset: 0; }
  .intro-ornament { display: none; }
  .brand-intro h2 { font-size: clamp(27px, 7.2vw, 36px); letter-spacing: -.035em; }
  .intro-tagline { font-size: 12px; line-height: 20px; letter-spacing: .04em; }
  .header-cta { min-width: 78px; }
  .hero { padding-top: 8px; padding-bottom: 12px; gap: 14px; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .brand-intro { flex-basis: 76px; padding-top: 4px; gap: 4px; }
  .brand-intro h2 { font-size: 27px; }
  .hero { padding-top: 6px; padding-bottom: 6px; gap: 10px; }
}

/* Service-promise copy and an accessible, layout-stable code typing preview. */
.eyebrow { gap: 9px; font-size: 11px; letter-spacing: .025em; padding: 9px 14px; }
.uptime-copy { display: inline-flex; align-items: baseline; gap: 6px; }
.uptime-copy strong { font: 650 12px/1.4 var(--font-mono); letter-spacing: -.02em; color: #087d66; }
.code-animation-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; padding: 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #8292a8; cursor: pointer; }
.code-animation-toggle[hidden] { display: none; }
.code-animation-toggle:hover { color: #087d66; background: #edf7f3; border-color: #dcece5; }
.code-animation-toggle:focus-visible { outline: 2px solid #087d66; outline-offset: 2px; }
.code-animation-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.code-animation-toggle .animation-play, .code-animation-toggle .animation-replay { display: none; }
.code-animation-toggle[data-mode="paused"] .animation-pause, .code-animation-toggle[data-mode="complete"] .animation-pause { display: none; }
.code-animation-toggle[data-mode="paused"] .animation-play, .code-animation-toggle[data-mode="complete"] .animation-replay { display: block; }
.code-animation-toggle:not([hidden]) + .copy-button { margin-left: 0; }
.code-body.has-typewriter { position: relative; overflow: hidden; }
.has-typewriter .typewriter-source { opacity: 0; pointer-events: none; user-select: none; }
.typewriter-viewport { position: absolute; inset: 0; padding: inherit; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.typewriter-viewport::-webkit-scrollbar { display: none; }
.typewriter-output { position: relative; padding-bottom: 46px; }
.has-typewriter .typewriter-output .code-line { display: flex; }
.has-typewriter .typewriter-output .code-line.typing-pending { display: none; }
.typewriter-output code { position: relative; }
.typewriter-output .typing-current code::after { content: ""; display: inline-block; position: absolute; width: 2px; height: 1.08em; top: .1em; margin-left: 3px; background: #0b9677; animation: code-caret 1s step-end infinite; }
.code-body[data-typing-state="paused"] .typing-current code::after { animation: none; opacity: .55; }
@keyframes code-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@media (max-width: 950px) and (min-width: 641px) {
  .eyebrow { font-size: 9px; padding: 8px 11px; }
  .uptime-copy strong { font-size: 10px; }
  .code-animation-toggle { width: 24px; height: 24px; padding: 4px; }
}
@media (max-width: 640px) {
  .eyebrow { font-size: 10px; letter-spacing: .01em; padding: 7px 11px; }
  .uptime-copy { gap: 5px; }
  .uptime-copy strong { font-size: 11px; }
  .code-animation-toggle { width: 25px; height: 25px; padding: 4px; }
  .typewriter-output { padding-bottom: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-output .typing-current code::after { animation: none; }
  .typewriter-viewport { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .intro-enterprise { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}


/* True spatial orbit. Reference: Baixiao Reading Cockpit (MIT); see notices. */
.page-shell { position: relative; z-index: 1; }
/* Fade only the decorative background, never the foreground or code panel. */
.earth-background { position: fixed; inset: 72px 0 0; overflow: hidden; pointer-events: none; user-select: none; z-index: 0; opacity: .84; }
.earth-stage { --scene-scale: 1; position: absolute; left: 73%; top: 52%; width: 1000px; height: 900px; transform: translate(-50%,-50%) scale(calc(var(--scene-scale) * .9)); }
.earth-stage::before { content: ''; position: absolute; inset: 70px 90px; background: radial-gradient(ellipse,rgba(32,166,139,.13),rgba(73,178,177,.07) 42%,transparent 70%); filter: blur(28px); }
.orbit-world { position: absolute; inset: 0; perspective: 1200px; perspective-origin: 50% 50%; transform-style: preserve-3d; }
.earth-canvas { display: none; position: absolute; inset: 0; width: 1000px; height: 900px; transform: translateZ(0); }
.earth-background.is-rendered .earth-canvas { display: block; }
.earth-fallback { position: absolute; width: 700px; height: 700px; left: 150px; top: 100px; transform: translateZ(0); }
.earth-background.is-rendered .earth-fallback { display: none; }
.orbit-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-23deg) rotateY(-34deg); }
.orbit-card { position: absolute; left: -57px; top: -77px; width: 114px; height: 154px; transform-style: preserve-3d; }
.orbit-card-face,.orbit-card-back { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.95); border-radius: 13px; backface-visibility: hidden; color: #203f3b; background: linear-gradient(140deg,rgba(255,255,255,.94),rgba(237,248,245,.89) 56%,rgba(205,233,227,.93)); box-shadow: 0 14px 34px -12px rgba(18,93,76,.24),inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(39,137,109,.13); overflow: hidden; }
.orbit-card-face { padding: 12px 12px 10px; transform: translateZ(5px); }
.orbit-card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transform: rotateY(180deg) translateZ(5px); background: linear-gradient(140deg,#edf7f4,#d6ebe5); }
.orbit-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 7px; font-weight: 600; letter-spacing: .7px; color: #809c96; }
.orbit-card-meta i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--model-color); opacity: .65; }
.orbit-card-icon { display: grid; place-items: center; width: 39px; height: 42px; margin: 16px 0 8px; color: var(--model-color); }
.orbit-card-icon svg { width: 35px; height: 35px; }
.orbit-card-face strong,.orbit-card-back strong { position: relative; display: block; font-size: 15px; font-weight: 600; letter-spacing: -.5px; }
.orbit-card-face small,.orbit-card-back small { display: block; font: 6px/1.5 'Segoe UI',sans-serif; letter-spacing: .85px; color: #78958d; }
.orbit-card-back .orbit-card-icon { margin: 0; }
.orbit-card-rule { display: block; width: 100%; height: 1px; margin: 10px 0 8px; background: linear-gradient(90deg,#bcd9d0,transparent); }
.orbit-card-shine { position: absolute; inset: -60% -90%; background: linear-gradient(120deg,transparent 38%,rgba(255,255,255,.64) 48%,transparent 57%); transform: rotate(-10deg); pointer-events: none; }
.orbit-card-edge { position: absolute; display: block; background: linear-gradient(90deg,#a3c9bc,#f4fff9); border: 1px solid #b9d8cd; }
.edge-left { width: 10px; height: 132px; left: -5px; top: 11px; transform: rotateY(90deg); }
.edge-right { width: 10px; height: 132px; right: -5px; top: 11px; transform: rotateY(90deg); }
.edge-top { width: 90px; height: 10px; top: -5px; left: 12px; transform: rotateX(90deg); }
.orbit-floor { position: absolute; width: 730px; height: 230px; top: 610px; left: 135px; border-radius: 50%; background: radial-gradient(ellipse,rgba(28,118,92,.12),transparent 68%); filter: blur(16px); z-index: -1; }
.earth-motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 4px; background: #f5faf8; border: 1px solid #d4e5de; border-radius: 6px; color: #588b7f; }
.earth-motion-toggle[hidden] { display: none; }
.earth-motion-toggle:hover { background: #e9f5ef; color: #087d66; border-color: #aed4c6; }
.earth-motion-toggle svg { width: 14px; height: 14px; }
.earth-motion-toggle .earth-play,.earth-motion-toggle[data-mode="paused"] .earth-pause { display: none; }
.earth-motion-toggle[data-mode="paused"] .earth-play { display: block; }
@media (min-width:1600px) { .earth-background { top: 76px; } .earth-stage { --scene-scale: 1.2; } }
@media (max-height:780px) and (min-width:951px) { .earth-background { top: 65px; } .earth-stage { --scene-scale: .82; } }
@media (max-width:950px) and (min-width:641px) { .earth-stage { left: 81%; top: 48%; --scene-scale: .89; } }
@media (max-width:640px) { .earth-background { top: 66px; } .earth-stage { left: 86%; top: 48%; --scene-scale: .65; } .earth-motion-toggle { flex-basis: 20px; width: 20px; height: 20px; padding: 3px; } }
@media (max-width:640px) and (max-height:760px) { .earth-background { top: 62px; } .earth-stage { --scene-scale: .58; } }
@media (forced-colors:active) { .earth-background,.earth-motion-toggle { display: none; } }

/* Keep the foreground copy quiet while retaining full 3D depth on the visual side. */
@media (min-width: 641px) { .earth-background { mask-image: linear-gradient(90deg,transparent 34%,rgba(0,0,0,.25) 44%,#000 54%); } }
@media (max-width: 640px) { .earth-background { mask-image: linear-gradient(180deg,transparent 12%,rgba(0,0,0,.12) 38%,#000 74%); } }

/* Translucent quickstart window: keep content opaque and reveal the 3D scene. */
.code-window {
  background: rgba(255, 255, 255, .46);
  border-color: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
  backdrop-filter: blur(7px) saturate(1.06);
  box-shadow: 0 20px 60px rgba(15, 64, 50, .10), 0 1px 3px rgba(15, 34, 31, .04), inset 0 0 0 1px rgba(255, 255, 255, .20);
}
.code-header {
  background: rgba(255, 255, 255, .28);
  border-bottom-color: rgba(255, 255, 255, .65);
}
.code-body { background: rgba(255, 255, 255, .05); }
.code-footer {
  background: rgba(255, 255, 255, .22);
  border-top-color: rgba(255, 255, 255, .65);
}
@media (max-width: 640px) {
  .code-window { background: rgba(255, 255, 255, .64); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .code-window { background: rgba(255, 255, 255, .92); }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .code-window {
    background: #fff;
    border-color: #c4d7d1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .code-header, .code-body, .code-footer { background: #fff; }
}
@media (forced-colors: active) {
  .code-window, .code-header, .code-body, .code-footer {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Satellite Earth: reveal the upper-right hemisphere without covering the copy. */
@media (min-width: 951px) { .earth-stage { left: 79%; top: 44%; } }
.earth-stage::before { background: radial-gradient(ellipse,rgba(33,165,228,.13),rgba(46,154,205,.055) 44%,transparent 70%); }
.orbit-floor { background: radial-gradient(ellipse,rgba(26,108,145,.10),transparent 68%); }
/* 35% glass background; keep the code and controls fully opaque. */
.code-window { background: rgba(255,255,255,.35); }
.code-header, .code-body, .code-footer { background: transparent; }
.code-window .file-name, .code-window .copy-button, .code-window .code-animation-toggle, .code-window .code-footer { color: #40596a; }
.code-window .c-comment { color: #40596a; }
.code-window .c-green { color: #007d68; }
.code-window .c-yellow { color: #995008; }
@media (max-width: 640px) { .code-window { background: rgba(255,255,255,.35); } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { .code-window { background: #fff; } }
@media (forced-colors: active) { .code-window { background: Canvas; } .code-window .c-comment { color: CanvasText; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .code-window { background: rgba(255,255,255,.95); } }

/* Homepage-only night horizon. The image and route SVG share a coordinate system.
   Static landscape, animated connection lights; no simulated 3D globe or API traffic. */
.earth-background.earth-night-panorama {
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
  contain: paint;
}
.earth-panorama {
  position: absolute;
  width: 1586px;
  aspect-ratio: 3 / 2;
  right: -253px;
  top: -154px;
  isolation: isolate;
  opacity: .92;
  /* Follow the real horizon curve; ellipse feathering removes the rectangular photo edges. */
  mask-image: radial-gradient(ellipse 89% 76% at 50% 103%, #000 94%, rgba(0,0,0,.94) 98%, rgba(0,0,0,.25) 101%, transparent 104%), radial-gradient(ellipse 64% 34% at 58% 50%, #000 40%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.48) 80%, rgba(0,0,0,.10) 92%, transparent 100%), linear-gradient(90deg, transparent 15%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.60) 46%, #000 64%, #000 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: radial-gradient(ellipse 89% 76% at 50% 103%, #000 94%, rgba(0,0,0,.94) 98%, rgba(0,0,0,.25) 101%, transparent 104%), radial-gradient(ellipse 64% 34% at 58% 50%, #000 40%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.48) 80%, rgba(0,0,0,.10) 92%, transparent 100%), linear-gradient(90deg, transparent 15%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.60) 46%, #000 64%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.earth-night-image,
.earth-network { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.earth-night-image { object-fit: contain; }
.earth-network { overflow: visible; }
.earth-network-trail,
.earth-network-flow {
  stroke-linecap: round;
  animation: earth-route-flow var(--flow-duration, 11.25s) var(--flow-delay, 0s) linear infinite;
  animation-play-state: paused;
}
/* Two softly glowing packets per route; white tips lead the cyan/blue current. */
.earth-network-trail {
  stroke: var(--electric-color, #28d7ff);
  stroke-width: 1.6;
  stroke-dasharray: 4.2 45.8;
  animation-name: earth-route-trail;
  opacity: .72;
  filter: drop-shadow(0 0 2.2px var(--electric-color, #28d7ff));
}
.earth-network-flow {
  stroke: #f0fdff;
  stroke-width: 1.1;
  stroke-dasharray: .85 49.15;
  opacity: .96;
  filter: drop-shadow(0 0 1.4px #8cf5ff);
}
.earth-network-halo {
  stroke: #67e7ff;
  stroke-width: 1;
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  animation: earth-node-pulse 5s var(--node-delay, 0s) ease-out infinite;
  animation-play-state: paused;
}
.earth-network-node { fill: #edfdff; opacity: .9; filter: url(#earth-light-glow); }
.earth-night-panorama[data-state="running"] .earth-network-trail,
.earth-night-panorama[data-state="running"] .earth-network-flow,
.earth-night-panorama[data-state="running"] .earth-network-halo { animation-play-state: running; }
.earth-night-panorama[data-state="unavailable"] { display: none; }
@keyframes earth-route-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes earth-route-trail { from { stroke-dashoffset: 3.35; } to { stroke-dashoffset: -96.65; } }
@keyframes earth-node-pulse { 0% { transform: scale(1); opacity: .6; } 80%,100% { transform: scale(3.7); opacity: 0; } }
@media (min-width: 1600px) {
  .earth-panorama { width: 1936px; right: calc((100vw - 1560px) / 2 - 248px); top: -161px; }
}
@media (max-height: 780px) and (min-width: 951px) {
  .earth-panorama { width: 1398px; right: -259px; top: -154px; }
}
@media (max-width: 950px) and (min-width: 641px) {
  .earth-panorama { width: 1277px; right: -314px; top: -116px; opacity: .76; }
}
@media (max-width: 640px) {
  .earth-panorama {
    width: 850px;
    right: -250px;
    top: 238px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 89% 76% at 50% 103%, #000 94%, rgba(0,0,0,.94) 98%, rgba(0,0,0,.25) 101%, transparent 104%), radial-gradient(ellipse 64% 34% at 58% 50%, #000 40%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.48) 80%, rgba(0,0,0,.10) 92%, transparent 100%), linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent);
    -webkit-mask-image: radial-gradient(ellipse 89% 76% at 50% 103%, #000 94%, rgba(0,0,0,.94) 98%, rgba(0,0,0,.25) 101%, transparent 104%), radial-gradient(ellipse 64% 34% at 58% 50%, #000 40%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.48) 80%, rgba(0,0,0,.10) 92%, transparent 100%), linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .earth-network-trail, .earth-network-flow, .earth-network-halo { animation: none !important; }
  .earth-network-trail { opacity: .3; }
  .earth-network-flow { opacity: .45; }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .earth-panorama { opacity: .35; }
}
@media (forced-colors: active) {
  .earth-background.earth-night-panorama, .earth-motion-toggle { display: none; }
}

/* Keep the smallest phones readable without changing desktop typography. */
@media (max-width: 360px) {
  .hero h1 { font-size: clamp(30px, 10.5vw, 37px); }
  .model-logos { width: 100%; gap: 10px; justify-content: space-between; }
  .model-logo { font-size: 12px; gap: 4px; }
  .model-logo .provider-mark { width: 20px; height: 20px; }
  .claude-logo { font-size: 15px; }
  .deepseek-logo { font-size: 12px; }
}

@media (max-width: 640px) and (max-height: 760px) {
  .earth-panorama { top: 168px; }
}

/* Strengthen the header navigation without changing font size or colors. */
.site-header .nav-link,
.site-header .header-cta { font-weight: 700; }

/* Quiet service-scope reminder above the existing copyright row. */
.site-footer {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 6px 0 8px;
}
.service-notice {
  flex: 0 0 auto;
  color: #61717c;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  overflow-wrap: anywhere;
}
.service-notice p { margin: 0; }
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 18px;
}
@media (min-width: 641px) {
  .ecosystem { height: 64px; }
}
@media (min-width: 1600px) {
  .ecosystem { height: 84px; }
}
@media (max-width: 640px) {
  .page-shell { height: auto; min-height: 100svh; }
  .main-content { flex: 1 0 auto; }
  .hero { flex: 1 0 auto; }
  .site-footer { gap: 8px; padding-top: 8px; }
  .service-notice { font-size: 10px; line-height: 1.6; text-align: left; }
  .footer-meta { gap: 8px; }
}
@media (forced-colors: active) {
  .service-notice { color: CanvasText; }
}