:root { --bg:#f9fbfe; --bg-alt:#eef4f8; --bg-cool:#e8f4f5; --fg:#132238; --muted:#5e6f83; --subtle:#7f8fa1; --border:#cedae7; --border-strong:#b6c7d8; --accent:#315ddc; --accent-hover:#244bc2; --accent-soft:#e9efff; --cyan:#0798ae; --cyan-soft:#e1f5f7; --violet:#7257d9; --violet-soft:#eeeafd; --amber:#d9832f; --success:#16896b; --success-soft:#e3f6ef; --terminal:#08121f; --line:var(--border); --acc:var(--accent); --dim:var(--muted); --good:var(--success); --card-shadow:0 1px 2px rgba(31,58,89,.06),0 5px 18px rgba(31,58,89,.045); --card-shadow-lg:0 24px 56px rgba(31,58,89,.16),0 5px 15px rgba(31,58,89,.08); --header-bg:rgba(249,251,254,.88); --font-sans:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; --font-heading:Manrope,Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace }
[data-theme="dark"] { --bg:#09111d; --bg-alt:#101d2b; --bg-cool:#102832; --fg:#edf5ff; --muted:#9eb0c5; --subtle:#72869c; --border:#25384b; --border-strong:#39536b; --accent:#7ca0ff; --accent-hover:#9bb6ff; --accent-soft:#17294f; --cyan:#42c7d4; --cyan-soft:#10343b; --violet:#a592ff; --violet-soft:#29234b; --amber:#f0a65d; --success:#52d4ac; --success-soft:#123c34; --card-shadow:0 1px 3px rgba(0,0,0,.32); --card-shadow-lg:0 24px 56px rgba(0,0,0,.48); --header-bg:rgba(9,17,29,.88); color-scheme:dark }
* { box-sizing:border-box } html { scroll-behavior:smooth; scroll-padding-top:64px } body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased }
button,a { -webkit-tap-highlight-color:transparent } a { color:inherit } button { font:inherit } img,video,svg { display:block; max-width:100% } ::selection { background:var(--accent); color:#fff }
.container { width:min(100% - 48px,1152px); margin-inline:auto }.center { text-align:center }.muted { color:var(--muted) }.en { display:none } html[lang="en"] .zh { display:none!important } html[lang="en"] .en { display:inline }
.skip-link { position:fixed; z-index:9999; top:8px; left:8px; transform:translateY(-150%); padding:8px 12px; border-radius:6px; background:var(--fg); color:var(--bg); text-decoration:none }.skip-link:focus { transform:none }
.site-header { position:fixed; inset:0 0 auto; z-index:1000; height:65px; border-bottom:1px solid var(--border); background:var(--header-bg); backdrop-filter:blur(14px) }.nav-wrap { height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { display:inline-flex; align-items:center; gap:11px; min-width:0; color:var(--fg); text-decoration:none }.brand-mark { position:relative; width:34px; height:34px; flex:0 0 34px; overflow:hidden; border-radius:8px; background:var(--fg) }
.brand-mark::before,.brand-mark::after,.brand-mark i { content:""; position:absolute; border-radius:50%; border:2px solid var(--bg) }.brand-mark::before { width:20px; height:20px; left:5px; top:5px }.brand-mark::after { width:10px; height:10px; left:16px; top:14px; background:var(--fg) }.brand-mark i:first-child { width:5px; height:5px; right:4px; top:4px; background:var(--bg) }.brand-mark i:last-child { width:5px; height:5px; left:4px; bottom:4px; background:var(--bg) }
.brand-copy { display:grid; min-width:0; line-height:1.15 }.brand-copy strong { font-family:var(--font-heading); font-size:14px; font-weight:800; white-space:nowrap; letter-spacing:-.01em }.brand-copy em { color:var(--accent); font-style:normal }.brand-copy small { margin-top:4px; color:var(--muted); font-family:var(--font-mono); font-size:7.3px; font-weight:500; letter-spacing:.035em; white-space:nowrap }
.desktop-nav { display:flex; align-items:center; gap:28px; margin-left:auto }.desktop-nav a { color:var(--fg); font-family:var(--font-heading); font-size:12px; font-weight:800; letter-spacing:.065em; text-decoration:none; text-transform:uppercase; transition:color .15s }.desktop-nav a:hover { color:var(--accent) }
.nav-actions { display:flex; align-items:center; gap:8px }.icon-btn,.lang-btn,.menu-btn { display:inline-grid; place-items:center; height:38px; border:0; border-radius:7px; background:transparent; color:var(--fg); cursor:pointer; transition:background .15s }.icon-btn:hover,.lang-btn:hover,.menu-btn:hover { background:var(--bg-alt) }.icon-btn { width:38px }.icon-btn svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }.moon,[data-theme="dark"] .sun { display:none!important } [data-theme="dark"] .moon { display:block!important }.lang-btn { width:38px; font-family:var(--font-mono); font-size:12px; font-weight:600 }.menu-btn { display:none; width:38px; padding:10px; gap:4px }.menu-btn span { width:18px; height:1.5px; background:currentColor }
.mobile-nav { position:absolute; top:64px; left:0; width:100%; padding:12px 24px 20px; border-bottom:1px solid var(--border); background:var(--bg); box-shadow:var(--card-shadow) }.mobile-nav a { display:block; padding:11px 0; font-family:var(--font-heading); font-size:14px; font-weight:700; text-decoration:none }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); box-shadow:var(--card-shadow); color:var(--fg); font-family:var(--font-heading); font-size:14px; font-weight:800; line-height:1; text-decoration:none; transition:transform .12s,box-shadow .12s,background .15s,border-color .15s }.btn:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(16,24,40,.10) }.btn-primary { border-color:transparent; background:var(--accent); color:#fff } [data-theme="dark"] .btn-primary { color:#07111e }.btn-primary:hover { background:var(--accent-hover) }.btn-sm { min-height:34px; padding:0 14px; font-size:12px }.btn-lg { min-height:50px; padding:0 26px; font-size:14px }
main section { padding:104px 0 }.section-tight { padding-top:24px }.alt-section { background:var(--bg-alt) }.eyebrow { margin:0 0 14px; color:var(--muted); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase }.section-head { max-width:720px; margin:0 auto 48px }.section-head h2,.api-copy h2,.cta-section h2 { margin:0; font-family:var(--font-heading); font-size:clamp(32px,4vw,44px); font-weight:800; line-height:1.15; letter-spacing:-.035em }.section-head>p:last-child,.cta-section .container>p:not(.eyebrow) { margin:18px auto 0; color:var(--muted); font-size:17px; line-height:1.8 }
.hero { padding:118px 0 66px; overflow:hidden; text-align:center }.hero-inner { display:flex; flex-direction:column; align-items:center }.model-glyph { position:relative; width:190px; height:132px; margin-bottom:26px }.glyph-ring { position:absolute; left:50%; top:50%; width:92px; height:92px; border:1.5px solid var(--fg); border-radius:50%; transform:translate(-50%,-50%) }.ring-b { width:132px; height:62px; transform:translate(-50%,-50%) rotate(-30deg) }.glyph-core { position:absolute; z-index:2; left:50%; top:50%; display:grid; place-items:center; width:58px; height:34px; border:2px solid var(--accent); border-radius:70% 70% 62% 62% / 82% 82% 58% 58%; background:var(--bg); transform:translate(-50%,-50%) }.glyph-core i { position:relative; width:21px; height:21px; border:5px solid color-mix(in srgb,var(--accent) 22%,var(--bg)); border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--violet)) }.glyph-core i::after { position:absolute; top:2px; right:2px; width:4px; height:4px; border-radius:50%; background:#fff; content:"" }.planet-path { position:absolute; z-index:3; left:50%; top:50%; pointer-events:none }.path-a { width:92px; height:92px; transform:translate(-50%,-50%) }.path-b { width:132px; height:62px; transform:translate(-50%,-50%) rotate(-30deg) }.glyph-dot { position:absolute; left:0; top:0; width:8px; height:8px; border:2px solid var(--bg); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); offset-rotate:0deg }.dot-a { offset-path:ellipse(44px 44px at 46px 46px); animation:planet-travel 8s linear infinite }.dot-b { background:var(--violet); box-shadow:0 0 0 1px var(--violet); offset-path:ellipse(64px 29px at 66px 31px); animation:planet-travel 11s -3.5s linear infinite }
@keyframes planet-travel { to { offset-distance:100% } }
.status-pill { display:inline-flex; align-items:center; gap:10px; min-height:38px; margin-bottom:30px; padding:5px 12px 5px 6px; border:1px solid var(--border); border-radius:8px; background:var(--bg); box-shadow:var(--card-shadow); font-size:12px }.status-pill .live { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:5px; background:var(--success-soft); color:var(--success); font-family:var(--font-heading); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase }.status-pill .live i,.pulse i,.window-state i,.code-status i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent) }.status-pill .divider { width:1px; height:14px; background:var(--border) }
.hero h1 { margin:0; font-family:var(--font-heading); font-size:clamp(42px,6.8vw,72px); font-weight:700; line-height:1.08; letter-spacing:-.055em }.hero h1 em { color:var(--accent); font-style:normal; font-weight:800 }.hero-lead { max-width:720px; margin:28px auto 0; color:var(--muted); font-size:clamp(17px,2vw,20px); line-height:1.8 }.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px }.hero-facts { display:flex; margin-top:48px }.hero-facts>span { display:grid; min-width:176px; padding:0 34px; border-right:1px solid var(--border) }.hero-facts>span:last-child { border-right:0 }.hero-facts b { font-family:var(--font-heading); font-size:20px; line-height:1.3 }.hero-facts small { margin-top:3px; color:var(--muted); font-size:11px }
.demo-window { max-width:940px; margin:28px auto 0; overflow:hidden; border:1px solid #303030; border-radius:10px; background:#0a0a0a; box-shadow:var(--card-shadow-lg); color:#e8e8e8 }.window-bar,.code-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:42px; padding:0 14px; border-bottom:1px solid #313131; background:#1c1c1c; color:#969696; font-family:var(--font-mono); font-size:11px }.traffic { display:flex; gap:7px }.traffic i { width:10px; height:10px; border-radius:50%; background:#ff5f57 }.traffic i:nth-child(2) { background:#febc2e }.traffic i:nth-child(3) { background:#28c840 }.window-state { display:flex; align-items:center; justify-self:end; gap:7px; color:#4ade80; font-size:9px; font-weight:600; letter-spacing:.08em }.window-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr) }.video-panel { position:relative; min-height:400px; background:#000 }.video-panel video { width:100%; height:100%; min-height:400px; object-fit:cover }.video-chip { position:absolute; left:16px; bottom:16px; padding:6px 9px; border:1px solid rgba(255,255,255,.15); border-radius:5px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); color:#c8c8c8; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase }
.decision-panel { padding:18px; border-left:1px solid #303030; background:#101010 }.decision-head { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #2e2e2e; color:#8b8b8b; font-size:9px }.mono { font-family:var(--font-mono); letter-spacing:.1em }.pulse { display:flex; align-items:center; gap:7px; color:#4ade80; font-family:var(--font-mono) }.decision-item { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px; padding:16px 0 14px; border-bottom:1px solid #272727 }.decision-item div { display:grid }.decision-item div span { color:#858585; font-size:10px }.decision-item div b { margin-top:2px; color:#e8e8e8; font-family:var(--font-mono); font-size:12px; font-weight:500 }.decision-item>strong { color:#60a5fa; font-family:var(--font-mono); font-size:12px }.decision-item>i { position:absolute; left:0; bottom:-1px; width:var(--p); height:1px; background:#60a5fa }.progress-96 { --p:96% }.progress-87 { --p:87% }.progress-93 { --p:93% }.progress-91 { --p:91% }.decision-panel>p { margin:18px 0 0; color:#787878; font-family:var(--font-mono); font-size:9px; text-align:center; text-transform:uppercase }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }.feature-card { min-height:222px; padding:25px; border:1px solid var(--border); border-radius:9px; background:var(--bg); box-shadow:var(--card-shadow); transition:transform .15s,box-shadow .15s }.feature-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(16,24,40,.08) }.feature-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:20px; border:1px solid var(--border); border-radius:8px; background:var(--bg-alt); color:var(--accent) }.feature-icon svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }.feature-card h3 { margin:0 0 10px; font-family:var(--font-heading); font-size:18px; font-weight:800; letter-spacing:-.02em }.feature-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.75 }
.filter-row { display:flex; width:fit-content; max-width:100%; margin:0 auto 32px; padding:4px; overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:var(--bg-alt) }.filter { min-width:max-content; padding:7px 15px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--font-heading); font-size:12px; font-weight:700; transition:color .15s,background .15s,box-shadow .15s }.filter.active { background:var(--bg); box-shadow:var(--card-shadow); color:var(--fg) }
.demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }.demo-card { overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--bg); box-shadow:var(--card-shadow); transition:transform .15s,box-shadow .15s }.demo-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,24,40,.09) }.demo-card[hidden] { display:none }.demo-card.featured { grid-column:1/-1 }.demo-card .media { position:relative; overflow:hidden; background:#0a0a0a; aspect-ratio:16/8.4 }.demo-card:not(.featured) .media { aspect-ratio:16/9 }.demo-card video { width:100%; height:100%; border:0; background:#000; object-fit:contain; object-position:center }.media>span { position:absolute; left:13px; top:13px; padding:4px 7px; border-radius:4px; background:rgba(0,0,0,.74); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.08em; pointer-events:none }.demo-body { display:flex; align-items:center; gap:20px; padding:20px }.demo-body>div { flex:1 }.demo-body h3 { margin:0 0 5px; font-family:var(--font-heading); font-size:18px; font-weight:800; letter-spacing:-.02em }.demo-body p { margin:0; color:var(--muted); font-size:13px }.demo-body>a { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid var(--border); border-radius:7px; color:var(--muted); font-family:var(--font-mono); text-decoration:none; transition:color .15s,border .15s }.demo-body>a:hover { border-color:var(--accent); color:var(--accent) }
video:fullscreen { width:100vw; height:100vh; max-width:none; background:#000; object-fit:contain!important; object-position:center }
video:-webkit-full-screen { width:100vw; height:100vh; max-width:none; background:#000; object-fit:contain!important; object-position:center }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--bg); box-shadow:var(--card-shadow) }.metric { position:relative; min-height:200px; padding:25px; border-right:1px solid var(--border) }.metric:last-child { border-right:0 }.metric>span { color:var(--subtle); font-family:var(--font-mono); font-size:9px }.metric strong { display:block; margin-top:34px; color:var(--accent); font-family:var(--font-heading); font-size:clamp(36px,4vw,48px); font-weight:800; line-height:1; letter-spacing:-.04em }.metric strong small { margin-left:3px; font-size:14px; letter-spacing:0 }.metric p { margin:14px 0 0; color:var(--muted); font-size:12px }.reliability { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; margin-top:72px }.reliability-copy h3 { margin:0; font-family:var(--font-heading); font-size:clamp(28px,3.6vw,40px); line-height:1.2; letter-spacing:-.035em }.reliability-copy>p:last-child { max-width:530px; margin:20px 0 0; color:var(--muted); font-size:15px; line-height:1.8 }
.latency-model-label { display:block; width:fit-content; margin:0 auto 8px; padding:5px 10px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:99px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1.4 }
.calibration-chart { padding:24px 26px 20px; border:1px solid var(--border); border-radius:9px; background:var(--bg); box-shadow:var(--card-shadow) }.chart-label,.chart-foot { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--font-mono); font-size:9px }.chart-area { position:relative; height:240px; margin:12px 0; overflow:hidden; border-left:1px solid var(--border); border-bottom:1px solid var(--border); background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:25% 25% }.diagonal { position:absolute; left:0; bottom:0; width:141%; height:1px; background:var(--border-strong); transform:rotate(-45deg); transform-origin:left bottom }.chart-point { position:absolute; width:10px; height:10px; border:2px solid var(--bg); border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--accent) }.chart-point b { position:absolute; left:50%; bottom:13px; padding:2px 5px; border-radius:3px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono); font-size:8px; transform:translateX(-50%) }.p1 { left:29%; bottom:31% }.p2 { left:59%; bottom:58% }.p3 { left:89%; bottom:87% }
.api-layout { display:grid; grid-template-columns:.85fr 1.3fr; align-items:center; gap:82px }.api-copy h2 { margin-bottom:22px }.api-copy>p:not(.eyebrow) { margin:0; color:var(--muted); font-size:16px; line-height:1.8 }.api-copy ul { display:grid; gap:10px; margin:28px 0; padding:0; list-style:none }.api-copy li { display:flex; align-items:center; gap:10px; font-size:14px }.api-copy li i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--success-soft); color:var(--success); font-size:10px; font-style:normal; font-weight:800 }.text-link { color:var(--accent); font-family:var(--font-heading); font-size:13px; font-weight:800; text-decoration:none }.text-link:hover { text-decoration:underline }
.code-window { min-width:0; overflow:hidden; border:1px solid #303030; border-radius:9px; background:var(--terminal); box-shadow:var(--card-shadow-lg); color:#d4d4d4 }.copy-btn { justify-self:end; padding:4px 8px; border:1px solid #3b3b3b; border-radius:4px; background:#262626; color:#bbb; cursor:pointer; font-family:var(--font-mono); font-size:9px }.code-window pre { min-height:465px; margin:0; padding:24px; overflow:auto; font-family:var(--font-mono); font-size:11px; line-height:1.75; tab-size:2 }.tok-key { color:#c586c0 }.tok-str { color:#ce9178 }.tok-comment { color:#6a9955 }.code-status { display:flex; justify-content:space-between; padding:10px 14px; border-top:1px solid #303030; background:#151515; color:#858585; font-family:var(--font-mono); font-size:9px }.code-status span { display:flex; align-items:center; gap:8px; color:#4ade80 }.code-status strong { color:#858585; font-weight:400 }
.cta-section { padding:112px 0; border-top:1px solid var(--border) }.cta-section .container { max-width:740px }.cta-section .btn { margin-top:32px } footer { border-top:1px solid var(--border) }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1) }.reveal.visible { opacity:1; transform:none }.delay-1 { transition-delay:.08s }.delay-2 { transition-delay:.14s }.delay-3 { transition-delay:.2s }
@media (max-width:980px) { .desktop-nav,.nav-cta { display:none }.menu-btn { display:inline-grid }.window-grid { grid-template-columns:1fr }.decision-panel { border-top:1px solid #303030; border-left:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px }.decision-head,.decision-panel>p { grid-column:1/-1 }.feature-grid { grid-template-columns:repeat(2,1fr) }.metric-grid { grid-template-columns:repeat(2,1fr) }.metric:nth-child(2) { border-right:0 }.metric:nth-child(-n+2) { border-bottom:1px solid var(--border) }.reliability { gap:38px }.api-layout { grid-template-columns:1fr; gap:46px }.api-copy { max-width:650px }.code-window { width:100% } }
@media (max-width:720px) { .container { width:min(100% - 32px,1152px) } main section { padding:76px 0 }.section-tight { padding-top:10px }.brand-copy strong { font-size:12px }.brand-copy small { font-size:6.2px }.hero { padding-top:102px }.model-glyph { transform:scale(.83); margin-bottom:12px }.status-pill .divider,.status-pill .muted { display:none }.hero h1 { font-size:clamp(39px,12vw,58px) }.hero-lead { font-size:16px }.hero-facts { width:100% }.hero-facts>span { min-width:0; flex:1; padding:0 12px }.hero-facts b { font-size:16px }.hero-facts small { font-size:9px; line-height:1.4 }.video-panel,.video-panel video { min-height:0 }.decision-panel { grid-template-columns:1fr }.decision-head,.decision-panel>p { grid-column:auto }.feature-grid,.demo-grid { grid-template-columns:1fr }.demo-card.featured { grid-column:auto }.demo-card .media { aspect-ratio:16/9 }.reliability { grid-template-columns:1fr }.chart-area { height:200px } }
@media (max-width:480px) { .brand-mark { width:30px; height:30px; flex-basis:30px }.nav-actions { gap:1px }.hero-actions { width:100% }.hero-actions .btn { width:100% }.hero-facts { margin-top:38px }.metric-grid { grid-template-columns:1fr }.metric { min-height:160px; border-right:0; border-bottom:1px solid var(--border) }.metric:nth-child(3) { border-bottom:1px solid var(--border) }.metric:last-child { border-bottom:0 }.metric strong { margin-top:22px }.code-window pre { padding:18px; font-size:10px }.code-status strong { display:none } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }.reveal { opacity:1; transform:none } }

/* Research visual system */
.site-header { box-shadow:0 1px 0 rgba(49,93,220,.04) }
.brand-mark { background:linear-gradient(135deg,var(--accent),var(--cyan)) }
.brand-mark::after { background:var(--violet) }
.btn-primary { background:linear-gradient(115deg,var(--accent),var(--cyan)); box-shadow:0 8px 20px rgba(49,93,220,.18) }
.btn-primary:hover { background:linear-gradient(115deg,var(--accent-hover),var(--cyan)) }
.eyebrow { color:var(--cyan) }
.hero { position:relative; background-image:radial-gradient(circle at 14% 24%,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 26%),radial-gradient(circle at 87% 19%,color-mix(in srgb,var(--violet) 8%,transparent),transparent 25%),linear-gradient(color-mix(in srgb,var(--border) 27%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 27%,transparent) 1px,transparent 1px); background-size:auto,auto,32px 32px,32px 32px }
.hero::after { position:absolute; inset:auto 0 0; height:110px; background:linear-gradient(transparent,var(--bg)); content:""; pointer-events:none }.hero-inner { position:relative; z-index:1 }
.glyph-ring { border-color:var(--accent) }.ring-b { border-color:var(--cyan) }
.hero h1 em { background:linear-gradient(100deg,var(--accent),var(--cyan) 52%,var(--violet)); background-clip:text; color:transparent }
.status-pill { background:color-mix(in srgb,var(--bg) 88%,transparent) }
.feature-card { position:relative; overflow:hidden }.feature-card::before { position:absolute; inset:0 0 auto; height:3px; background:var(--accent); content:"" }.feature-card:nth-child(3n+2)::before { background:var(--cyan) }.feature-card:nth-child(3n)::before { background:var(--violet) }.feature-card:nth-child(3n+2) .feature-icon { color:var(--cyan); background:var(--cyan-soft) }.feature-card:nth-child(3n) .feature-icon { color:var(--violet); background:var(--violet-soft) }
.demo-card:hover,.feature-card:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--border)) }
.metric:nth-child(2) strong { color:var(--cyan) }.metric:nth-child(3) strong { color:var(--violet) }.metric:nth-child(4) strong { color:var(--amber) }
.calibration-chart { background:linear-gradient(145deg,var(--bg),var(--bg-cool)) }
.cta-section { background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 7%,var(--bg)),color-mix(in srgb,var(--cyan) 8%,var(--bg)),color-mix(in srgb,var(--violet) 6%,var(--bg))) }

/* Benchmark charts */
.benchmark-section { background:linear-gradient(180deg,var(--bg-cool),var(--bg-alt)) }.benchmark-legend { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:0 0 32px; color:var(--muted); font-family:var(--font-mono); font-size:10px }.benchmark-legend>span { display:flex; align-items:center; gap:7px }.benchmark-legend i { width:11px; height:11px; border-radius:3px; background:#4f46e5 }.benchmark-legend i.current-small { background:#25a8b5 }.benchmark-legend i.current-mid { background:#8a6ce8 }.benchmark-legend i.baseline { background:#8995a8 }.benchmark-legend i.baseline-small { border:1px solid #aeb8c6; background:#e3e8ef }.benchmark-unit { margin-left:auto }.benchmark-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }.benchmark-card { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--bg); box-shadow:var(--card-shadow) }.benchmark-card img { width:100%; aspect-ratio:1.7; padding:12px; object-fit:contain; background-color:#fbfdff; background-image:linear-gradient(#eaf0f6 1px,transparent 1px),linear-gradient(90deg,#eaf0f6 1px,transparent 1px); background-size:20px 20px }.benchmark-card figcaption { display:grid; gap:3px; padding:14px 16px; border-top:1px solid var(--border) }.benchmark-card figcaption strong { font-family:var(--font-heading); font-size:14px }.benchmark-card figcaption>span { color:var(--muted); font-size:11px }.benchmark-note { max-width:900px; margin:26px auto 0; color:var(--muted); font-size:12px; text-align:center }

/* A single page canvas: section boundaries are spacing and hairlines, not color blocks. */
body { background:#f7f9fc }
[data-theme="dark"] body { background:#09111d }
main section, .alt-section, .benchmark-section, .cta-section { background:transparent }
main section + section { border-top:1px solid var(--border) }
.hero { background:none }
.hero::after { display:none }
.showcase.section-tight { padding-top:56px }
.benchmark-card, .feature-card, .demo-card, .metric-grid, .calibration-chart { background:var(--bg) }
@media (max-width:720px) { .benchmark-grid { grid-template-columns:1fr }.benchmark-legend { align-items:flex-start; flex-wrap:wrap }.benchmark-unit { width:100%; margin:0 } }

/* Header, hero and content accents */
:root { --rose:#ce5b78; --rose-soft:#fff0f4; --amber-soft:#fff2de }
[data-theme="dark"] { --rose:#ef8ca8; --rose-soft:#3b2030; --amber-soft:#3b2a18 }
html { scroll-padding-top:74px }
.site-header { height:74px }
.nav-wrap { height:73px; gap:18px }
.brand-copy strong { font-size:16px }
.brand-copy small { font-size:8.4px }
.desktop-nav { gap:18px }
.desktop-nav a { font-size:14px; letter-spacing:.01em; text-transform:none }
.desktop-nav .external-link { color:var(--accent) }
.desktop-nav .external-link:last-child { color:var(--violet) }
.desktop-nav .external-link span { font-size:12px }
.nav-cta { min-height:38px; padding:0 15px; font-size:14px }
.mobile-nav { top:73px; max-height:calc(100vh - 73px); overflow-y:auto }
.mobile-nav a { border-bottom:1px solid var(--border); font-size:15px }
.mobile-nav a:last-child { border-bottom:0 }
.hero { padding-top:138px; padding-bottom:102px; isolation:isolate }
.hero::before { position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 22% 40%,color-mix(in srgb,var(--cyan) 13%,transparent),transparent 34%),radial-gradient(circle at 78% 25%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 34%),radial-gradient(circle at 62% 94%,color-mix(in srgb,var(--rose) 7%,transparent),transparent 37%); content:""; pointer-events:none }
.model-glyph { margin-bottom:9px }
.model-name { margin:0 0 8px; background:linear-gradient(105deg,var(--accent),var(--cyan),var(--violet)); background-clip:text; color:transparent; font-family:var(--font-heading); font-size:clamp(24px,3vw,33px); font-weight:800; letter-spacing:.015em; line-height:1.2 }
.hero h1 { font-size:clamp(26px,4.7vw,58px); font-weight:800; white-space:nowrap; letter-spacing:-.055em }
.hero h1 em { background:linear-gradient(100deg,var(--accent),var(--cyan) 48%,var(--violet)); background-clip:text }
.hero-lead { margin-top:23px }
.hero-facts b { color:var(--accent) }
.hero-facts>span:nth-child(2) b { color:var(--cyan) }
.hero-facts>span:nth-child(3) b { color:var(--violet) }
.feature-card:nth-child(6n+4)::before { background:var(--amber) }
.feature-card:nth-child(6n+4) .feature-icon { color:var(--amber); background:var(--amber-soft) }
.feature-card:nth-child(6n+5)::before { background:var(--rose) }
.feature-card:nth-child(6n+5) .feature-icon { color:var(--rose); background:var(--rose-soft) }
.demo-card { position:relative }
.demo-card::before { position:absolute; inset:0 0 auto; z-index:2; height:3px; background:var(--accent); content:"" }
.demo-card[data-category="scene"]::before { background:var(--rose) }
.demo-card[data-category="screen"]::before { background:var(--violet) }
.demo-card[data-category="game"]::before { background:var(--amber) }
.demo-card .media { aspect-ratio:16/9 }
.demo-card[data-category="embodied"] .media>span { background:var(--accent) }
.demo-card[data-category="scene"] .media>span { background:var(--rose) }
.demo-card[data-category="screen"] .media>span { background:var(--violet) }
.demo-card[data-category="game"] .media>span { background:var(--amber); color:#30200d }
#capabilities .eyebrow { color:var(--cyan) }
#demos .eyebrow { color:var(--violet) }
#benchmarks .eyebrow { color:var(--accent) }
#numbers .eyebrow { color:var(--amber) }
#about .eyebrow { color:var(--success) }
.cta-section .eyebrow { color:var(--rose) }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px }
.cta-section .cta-actions .btn { margin-top:0 }
@media (max-width:1120px) { .desktop-nav,.nav-cta { display:none }.menu-btn { display:inline-grid } }
@media (max-width:720px) { .site-header { height:66px }.nav-wrap { height:65px }.mobile-nav { top:65px; max-height:calc(100vh - 65px) }.brand-copy strong { font-size:13.5px }.brand-copy small { font-size:7px }.hero { padding-top:118px; padding-bottom:74px }.model-glyph { margin-bottom:0 }.model-name { font-size:23px }.hero h1 { font-size:clamp(23px,6.15vw,32px); letter-spacing:-.065em }html[lang="en"] .hero h1 { font-size:clamp(18px,4.7vw,25px) } }

/* Paper-project style resource links */
.desktop-nav .external-link { display:inline-flex; align-items:center; gap:5px }
.service-logo { width:17px; height:17px; flex:none }
.service-logo.hf-logo { overflow:visible }
.hero-project-links { gap:10px; margin-top:34px }
.hero-project-links .btn { min-height:46px; padding:0 18px; border-radius:999px; box-shadow:0 5px 16px rgba(31,58,89,.07) }
.hero-project-links .project-link { gap:8px; background:color-mix(in srgb,var(--bg) 90%,transparent); font-size:13px }
.hero-project-links .project-link:hover { border-color:var(--accent); background:var(--bg) }
.hero-project-links .project-link svg { width:18px; height:18px; flex:none }
.hero-project-links .project-link.quiet { color:var(--muted) }

/* Research team and site footer */
.site-footer { position:relative; overflow:hidden; border-top:0; background:linear-gradient(145deg,color-mix(in srgb,var(--bg-cool) 72%,var(--bg)),var(--bg) 46%,color-mix(in srgb,var(--violet-soft) 38%,var(--bg))) }
.site-footer::before { position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--accent),var(--cyan) 42%,var(--violet) 72%,var(--rose)); content:"" }
.footer-about { padding:76px 0 62px }
.about-layout { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.35fr); gap:48px 76px; align-items:start }
.about-intro h2 { margin:0; font-family:var(--font-heading); font-size:clamp(34px,4vw,46px); font-weight:800; line-height:1.15; letter-spacing:-.035em }
.about-intro>p:not(.eyebrow) { margin:20px 0 0; color:var(--muted); font-size:15px; line-height:1.85 }
.footer-brand { width:fit-content; margin-top:30px }
.about-label { margin:0 0 16px; color:var(--muted); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.about-team .about-label { font-size:12px; letter-spacing:.08em }
.author-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:38px }
.author-list>span { padding:13px 0; border-bottom:1px solid var(--border); font-family:var(--font-heading); font-size:20px; font-weight:800; line-height:1.3 }
.author-list sup,.role-key sup { position:relative; top:-.15em; margin-left:3px; color:var(--accent); font-family:var(--font-mono); font-size:.55em; line-height:0 }
.role-key { display:flex; flex-wrap:wrap; gap:8px 22px; padding:16px 0 0; color:var(--muted); font-family:var(--font-mono); font-size:12px; line-height:1.5 }
.role-key sup { margin-right:4px; font-size:10px }
.about-aside { grid-column:1/-1; display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:76px; min-width:0; padding-top:30px; border-top:1px solid var(--border-strong) }
.contact-block { margin:0; padding:0 }
.contact-block .about-label { margin-bottom:8px }
.contact-block>p:not(.about-label) { margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
.contact-block>a { display:inline-flex; align-items:center; gap:8px; max-width:100%; margin-top:10px; color:var(--accent); font-family:var(--font-heading); font-size:16px; font-weight:800; overflow-wrap:anywhere; text-decoration:none }
.contact-block>a:hover { text-decoration:underline }
.footer-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 26px; align-self:start }
.footer-links a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:43px; padding:0 2px; border-bottom:1px solid var(--border); color:var(--fg); font-family:var(--font-heading); font-size:12px; font-weight:750; text-decoration:none; transition:padding .15s,color .15s,border-color .15s }
.footer-links a>span:last-child { color:var(--subtle); font-family:var(--font-mono); font-size:0; opacity:.7; transition:color .15s,opacity .15s,transform .15s }
.footer-links a>span:last-child::after { font-size:11px; content:"→" }
.footer-links a.external>span:last-child::after { content:"↗" }
.footer-links a:hover { padding-left:6px; border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); color:var(--accent) }
.footer-links a:hover>span:last-child { color:var(--accent); opacity:1; transform:translateX(2px) }
.footer-links a.external:hover>span:last-child { color:var(--violet) }

/* Vertical benchmark charts */
.benchmark-section .container { width:min(100% - 96px,1400px); margin-inline:auto }
.benchmark-vertical-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:52px 34px }
.benchmark-column { display:grid; grid-template-rows:auto 1fr auto; min-width:0; min-height:385px; padding:0; background:transparent }
.benchmark-column header { display:grid; align-content:start; gap:1px; min-height:58px; padding:0 0 9px }
.benchmark-column header strong { font-family:var(--font-heading); font-size:19px; font-weight:800; line-height:1.2; letter-spacing:-.015em }
.benchmark-column header small { color:var(--muted); font-size:12px; line-height:1.45 }
.vertical-chart { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; height:270px; padding:4px 0 0; background-image:repeating-linear-gradient(to top,color-mix(in srgb,var(--border) 38%,transparent) 0 1px,transparent 1px 25%); background-size:100% calc(100% - 70px); background-repeat:no-repeat }
.vertical-series { display:grid; grid-template-rows:30px 1fr 72px; min-width:0; text-align:center }
.vertical-series.baseline-small { order:1 }.vertical-series.current-small { order:2 }.vertical-series.current-mid { order:3 }.vertical-series.baseline { order:4 }.vertical-series.current { order:5 }
.vertical-series>span { color:var(--fg); font-family:var(--font-heading); font-size:14px; font-weight:800; font-variant-numeric:tabular-nums }
.vertical-series>small { align-self:center; justify-self:center; min-width:0; padding:4px 2px; color:var(--muted); font-family:var(--font-mono); font-size:9px; line-height:1; white-space:nowrap; transform:rotate(-42deg) }
.vertical-track { display:flex; align-items:flex-end; min-height:0; border-bottom:1px solid var(--border-strong) }
.vertical-track i { width:100%; height:var(--score); min-height:3px; border-radius:10px 10px 1px 1px; background:linear-gradient(180deg,#4d5af0,#706ee9 45%,#b8bbf7); box-shadow:inset 0 1px rgba(255,255,255,.3) }
.vertical-series.current-small .vertical-track i { background:linear-gradient(180deg,#22a2b3,#67d0d5 52%,#c4eef0) }
.vertical-series.current-mid .vertical-track i { background:linear-gradient(180deg,#7857da,#9d82e8 52%,#d8cdf5) }
.vertical-series.baseline .vertical-track i { background:linear-gradient(180deg,#aab2bf,#c8cdd5 55%,#e2e5e9) }
.vertical-series.baseline-small .vertical-track i { border:0; background:linear-gradient(180deg,#d5d9e0,#e5e8ed 55%,#f2f3f5) }
.benchmark-column footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:7px 0 0; padding:0; color:var(--muted); font-family:var(--font-mono); font-size:9px }
.benchmark-column footer strong { color:var(--fg); font-size:10px; font-variant-numeric:tabular-nums }
.benchmark-update-note { max-width:920px; margin:42px auto 0; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; line-height:1.75; text-align:center }.benchmark-update-note a { color:var(--accent); font-weight:700; text-decoration:none }.benchmark-update-note a:hover { text-decoration:underline }

/* Measured latency, calibration tip and use cases */
.calibration-tip,.latency-method { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:14px 17px; border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--cyan-soft) 56%,var(--bg)) }
.calibration-tip .tip-icon,.latency-method .tip-icon { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--cyan); color:#fff; font-family:var(--font-heading); font-size:12px; font-weight:800 }
.calibration-tip p,.latency-method p { display:flex; flex-wrap:wrap; gap:4px 10px; margin:0; color:var(--muted); font-size:12px; line-height:1.7 }
.calibration-tip strong,.latency-method strong { color:var(--fg); white-space:nowrap }
.latency-method { border-color:color-mix(in srgb,var(--accent) 30%,var(--border)); background:color-mix(in srgb,var(--accent-soft) 56%,var(--bg)) }
.latency-method .tip-icon { background:var(--accent) }
.use-cases { margin-top:72px }
.use-cases.integrated { margin-top:44px }
.use-case-table { overflow:hidden; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:9px; background:var(--bg); box-shadow:var(--card-shadow) }
.use-case-row { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.55fr); gap:38px; align-items:center; min-height:70px; padding:15px 24px; border-bottom:1px solid var(--border) }
.use-case-row:last-child { border-bottom:0 }
.use-case-row:nth-child(odd):not(.use-case-header) { background:color-mix(in srgb,var(--bg-alt) 48%,var(--bg)) }
.use-case-row:not(.use-case-header):hover { background:color-mix(in srgb,var(--accent-soft) 46%,var(--bg)) }
.use-case-row>strong { display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-size:15px; line-height:1.45 }
.use-case-row>span { color:var(--muted); font-size:14px; line-height:1.65 }
.use-case-row>span:last-child { text-align:center }
.use-case-header { min-height:54px; background:color-mix(in srgb,var(--accent-soft) 72%,var(--bg))!important; color:var(--fg) }
.use-case-header>span { color:var(--fg); font-family:var(--font-heading); font-size:13px; font-weight:800; letter-spacing:0 }
.case-dot { width:9px; height:9px; flex:none; border-radius:3px; background:var(--accent) }
.case-dot.c2 { background:var(--violet) }.case-dot.c3 { background:var(--cyan) }.case-dot.c4 { background:var(--rose) }.case-dot.c5 { background:var(--success) }.case-dot.c6 { background:var(--amber) }.case-dot.c7 { background:#dc5462 }
@media (max-width:1120px) { .benchmark-section .container { width:min(100% - 48px,1400px) }.benchmark-vertical-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 30px } }
@media (max-width:980px) { .about-layout { grid-template-columns:1fr; gap:54px }.about-intro { max-width:720px }.footer-links { max-width:560px } }
@media (max-width:720px) {
  .benchmark-legend { font-size:9px }
  .use-cases,.use-cases.integrated { margin-top:36px }
  .use-case-row { grid-template-columns:1fr; gap:4px; padding:14px 15px }
  .use-case-header { display:none }
  .use-case-row>span { padding-left:0 }
  .calibration-tip p,.latency-method p { display:grid; gap:2px }
  .footer-about { padding:72px 0 62px }
  .about-layout { gap:44px }
  .about-aside { grid-template-columns:1fr; gap:30px }
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .author-list { column-gap:22px }
  .author-list>span { font-size:17px }
}
@media (max-width:520px) {
  .benchmark-section .container { width:min(100% - 32px,1600px) }
  .hero-project-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100% }
  .hero-project-links .btn { width:auto; padding:0 12px }
  .hero-project-links .btn-primary,.hero-project-links .quiet { grid-column:1/-1 }
  .benchmark-vertical-grid { grid-template-columns:1fr }
  .benchmark-column { min-height:365px }
  .vertical-chart { height:252px; gap:4px }
  .vertical-series { grid-template-rows:30px 1fr 72px }
  .vertical-series>small { padding-inline:1px; font-size:8.5px }
  .author-list { grid-template-columns:1fr }
  .footer-links { grid-template-columns:1fr }
}