:root {
  --bg:#FFFFFF;
  --bg-panel:#F3F4F3;
  --bg-panel-2:#121512;
  --border:#E3E5E2;
  --accent:#C3F03E;
  --accent-dark:#4B7F0E;
  --text:#141714;
  --text-muted:#5E655E;
  --success:#2E9E58;
  --warn:#C98A06;
  --error:#D2433A;
  --on-dark:#FFFFFF;
  --on-dark-muted:#AEB4AD;
  --on-dark-line:rgb(255 255 255 / .16);
  --on-dark-line-strong:rgb(255 255 255 / .55);
  --on-dark-fill:rgb(255 255 255 / .06);
  --ink-deep:#070907;
  --ink-soft:#252A25;
  --lamp:#F1FAD6;
  --clear:transparent;
  --veil:rgb(7 9 7 / .48);
  --font-display:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-body:400;
  --weight-medium:500;
  --weight-label:600;
  --weight-bold:700;
  --weight-title:800;
  --r-canvas:32px;
  --r-card:16px;
  --r-btn:14px;
  --r-pill:999px;
  --shadow-float:0 1px 1px rgb(7 9 7 / .10),0 8px 18px -6px rgb(7 9 7 / .30),0 30px 64px -14px rgb(7 9 7 / .60);
  --shadow-card:0 2px 4px rgb(7 9 7 / .03),0 20px 48px -16px rgb(7 9 7 / .18);
  --shadow-btn:0 1px 0 rgb(255 255 255 / .35) inset,0 10px 24px -10px rgb(195 240 62 / .55);
  --gutter:24px;
  --inset:72px;
  --content-width:1184px;
  --header-width:1280px;
  --header-height:76px;
  --space-section:88px;
  --duration-fast:.2s;
  --duration-reveal:.65s;
  --ease-reveal:cubic-bezier(.2,.7,.2,1);
  --size-body:17px;
  --size-small:14px;
  --size-h1:clamp(34px,calc(1.6vw + 25px),48px);
  --size-h2:clamp(26px,calc(2vw + 6px),36px);
  --size-h3:24px;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:var(--weight-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
[hidden] { display:none !important }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
button,input,select,textarea { font:inherit }
button,a { -webkit-tap-highlight-color:var(--clear) }
button { cursor:pointer }
a { color:inherit; text-underline-offset:.2em }
a:hover { text-decoration-thickness:2px }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:4px }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:var(--weight-title);
  line-height:1.25;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1 { font-size:var(--size-h1); line-height:1.16 }
h2 { font-size:var(--size-h2) }
h3 { font-size:var(--size-h3) }
h1,h2,h3,p { margin-top:0 }
p { margin-bottom:1.2em }
strong { font-weight:var(--weight-bold) }
em.key,.section-title .key { color:var(--accent-dark); font-style:normal }
.keep { white-space:nowrap }
.muted { color:var(--text-muted) }
.mono,code,pre,kbd { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.88em }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  background:var(--bg-panel-2);
  color:var(--on-dark);
  border-radius:var(--r-card);
  font-size:14px;
  line-height:1.8;
  tab-size:2;
}
pre code { overflow-wrap:normal; white-space:pre; font-size:inherit }
hr { border:0; border-top:1px solid var(--border); margin-block:32px }
.wrap { width:100%; max-width:calc(var(--content-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section) }
.section-head { max-width:760px; margin:0 auto 40px; text-align:center }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid-two > *, .canvas > *, .footer-grid > *, .flow-card > * { min-width:0 }
.panel,.card { background:var(--bg-panel); color:var(--text); border-radius:var(--r-canvas); padding:32px }
.card { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card) }
.card h3 { margin-bottom:12px }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.prose { min-width:0; max-width:820px; margin-inline:auto }
.prose :is(div,section,article,figure) { min-width:0; max-width:100% }
.prose figure { margin-inline:0 }
.prose :is(h2,h3) { scroll-margin-top:32px; margin-top:2em }
.prose li { margin-block:.5em }
.prose a { overflow-wrap:anywhere }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 24px;
  border:1px solid var(--clear);
  border-radius:var(--r-btn);
  background:var(--bg-panel);
  color:var(--text);
  text-decoration:none;
  font-size:16px;
  font-weight:var(--weight-bold);
  line-height:1.25;
  text-align:center;
  transition:transform var(--duration-fast),opacity var(--duration-fast),background-color var(--duration-fast);
}
.btn svg { width:18px; height:18px; flex-shrink:0 }
.btn:hover,.btn.is-hover { transform:translateY(-1px) }
.btn:active { transform:translateY(1px) }
.btn-primary { background:var(--accent); color:var(--text); box-shadow:var(--shadow-btn) }
.btn-secondary { background:var(--bg); color:var(--text); border-color:var(--border) }
.btn-ghost { background:var(--clear); color:var(--on-dark); border:1.5px solid var(--on-dark-line-strong); padding-inline:22px }
.btn:focus-visible,.btn.is-focus { outline:2px solid var(--accent-dark); outline-offset:3px }
.canvas .btn:focus-visible { outline-color:var(--accent) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel); color:var(--text-muted); box-shadow:none; cursor:not-allowed; transform:none }
.cta-row,.chip-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.cta-row { margin-top:32px }
.topbar {
  height:var(--header-height);
  width:100%;
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
#site-header { position:relative; z-index:50; background:var(--bg); color:var(--text) }
.brand {
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:var(--weight-title);
  font-size:17px;
  letter-spacing:-.01em;
  flex-shrink:0;
}
.brand-mark { display:block; width:40px; height:21px; flex-shrink:0; object-fit:contain }
.mainnav { min-width:0 }
.mainnav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px }
.mainnav a {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:8px 17px;
  border-radius:var(--r-pill);
  text-decoration:none;
  font-size:15px;
  font-weight:var(--weight-label);
  line-height:1.4;
  white-space:nowrap;
  color:var(--text-muted);
}
.mainnav a:hover { color:var(--text) }
.mainnav a[aria-current="page"] { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-bold) }
.header-tools { justify-self:end; display:flex; align-items:center; gap:8px; flex-shrink:0 }
.language { position:relative }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px 7px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg); color:var(--text);
  text-decoration:none; font-size:14px; font-weight:var(--weight-label); line-height:1.4;
  white-space:nowrap;
}
.lang svg { width:16px; height:16px; color:var(--text-muted); flex-shrink:0 }
.lang-caret { color:var(--text-muted); font-size:11px }
.lang-short { display:none }
.lang-menu {
  position:absolute; top:calc(100% + 12px); right:0; min-width:180px;
  padding:8px; border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); z-index:5;
}
.lang-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; text-decoration:none; border-radius:var(--r-btn) }
.lang-menu a:hover,.lang-menu a[aria-current] { background:var(--bg-panel); color:var(--text) }
.menu-toggle {
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:10px;
  border:1px solid var(--border); border-radius:var(--r-btn);
  background:var(--bg); color:var(--text);
}
.menu-toggle svg { width:22px; height:22px }
.mobile-drawer { display:none }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; background:var(--veil); color:var(--on-dark); border:0; z-index:-1 }
.skip-link { position:absolute; top:8px; left:var(--gutter); transform:translateY(-160%); z-index:10; padding:10px 16px; background:var(--bg); color:var(--text); border-radius:var(--r-btn) }
.skip-link:focus { transform:none }
.hero-wrap { padding:4px var(--gutter) 0 }
.canvas {
  position:relative;
  height:clamp(620px,calc(100svh - 160px),860px);
  background:var(--bg-panel-2); color:var(--on-dark);
  border-radius:var(--r-canvas);
  overflow:hidden;
  display:grid;
  grid-template-columns:44fr 56fr;
  isolation:isolate;
}
.hero-copy { align-self:center; padding:0 24px 0 var(--inset); max-width:640px; color:var(--on-dark); position:relative; z-index:2 }
.badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 15px 6px 12px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--bg-panel); color:var(--text);
  font-size:13.5px; font-weight:var(--weight-label); line-height:1.4;
  max-width:100%; overflow-wrap:anywhere;
}
.canvas .badge { border-color:var(--on-dark-line); background:var(--on-dark-fill); color:var(--on-dark) }
.badge-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-pill); background:var(--accent); color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,var(--clear)) }
.hero-title { margin:26px 0 0; font-size:clamp(30px,calc(1.6vw + 25px),48px); color:var(--on-dark); letter-spacing:-.015em }
.hero-title > span { display:block }
.hero-title .key { color:var(--accent) }
.lede { margin:20px 0 0; max-width:30em; font-size:17px; line-height:1.75; color:var(--on-dark-muted) }
.lede strong { color:var(--on-dark); font-weight:var(--weight-label) }
.platforms { margin-top:40px }
.platforms-label { margin:0 0 12px; font-size:12.5px; font-weight:var(--weight-label); letter-spacing:.08em; line-height:1.4; color:var(--on-dark-muted) }
.platforms ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.platforms a {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px 7px 12px; border:1px solid var(--on-dark-line); border-radius:var(--r-pill);
  text-decoration:none; font-size:13.5px; font-weight:var(--weight-label); line-height:1.3; color:var(--on-dark);
}
.platforms a:hover { background:var(--on-dark-fill); color:var(--on-dark); border-color:var(--on-dark-line-strong) }
.platforms svg { width:15px; height:15px; flex-shrink:0 }
.hero-scene { position:relative; min-height:0; overflow-x:clip }
.scene-svg { position:absolute; inset:0; width:100%; height:100%; display:block }
.stop-warm { stop-color:var(--lamp) }
.stop-lime { stop-color:var(--accent) }
.f-ink { fill:var(--ink-deep) }
.f-soft { fill:var(--ink-soft) }
.f-lamp { fill:var(--lamp) }
.f-accent { fill:var(--accent) }
.s-faint { stroke:var(--on-dark); fill:none }
.s-soft { stroke:var(--ink-soft); fill:none }
.s-accent { stroke:var(--accent); fill:none }
.s-ink { stroke:var(--ink-deep); fill:none }
.chat-slot { position:absolute; z-index:3 }
.slot-1 { top:61%; left:38% }
.slot-2 { top:71%; right:5% }
.slot-3 { top:81%; left:45% }
.chat {
  width:264px; max-width:100%;
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-card); padding:12px 16px 14px; box-shadow:var(--shadow-float);
}
.slot-2 .chat { width:300px }
.chat-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; font-weight:var(--weight-label); line-height:1; color:var(--text-muted) }
.avatar { width:22px; height:22px; border-radius:var(--r-pill); display:inline-grid; place-items:center; flex-shrink:0 }
.avatar svg { width:12px; height:12px }
.av-req { background:var(--bg-panel); color:var(--text-muted); border:1px solid var(--border) }
.av-rule { background:var(--accent); color:var(--text) }
.av-rule img { width:15px; height:10px }
.av-group { background:var(--bg-panel-2); color:var(--on-dark) }
.chat-body { font-size:15px; font-weight:var(--weight-label); line-height:1.45; overflow-wrap:anywhere }
.chat-body.mono { font-size:13.5px; font-weight:var(--weight-medium) }
.chat-body .arrow { color:var(--text-muted); padding-inline:3px }
.flow-intro { text-align:center; padding:36px var(--gutter) 0 }
.flow-intro h2 { margin:0 }
.flow-intro p { margin:16px auto 0; max-width:40em; color:var(--text-muted) }
.flow-intro .btn { margin-top:28px }
.flow-node { margin:48px auto 0; width:56px; height:56px; border-radius:var(--r-pill); background:var(--accent-dark); color:var(--accent); display:grid; place-items:center }
.flow-node svg { width:22px; height:22px }
.flow-line { width:1px; height:72px; margin-inline:auto; background:var(--border); color:var(--text) }
.flow-chain { position:relative; overflow-x:clip }
.flow-chain::before { content:""; position:absolute; inset:0 auto 0 50%; width:1px; background:var(--border); color:var(--text) }
.flow-card {
  position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center;
  padding:56px; margin-bottom:48px; border-radius:var(--r-canvas);
  background:color-mix(in srgb,var(--bg-panel) 96%,var(--clear)); color:var(--text);
}
.flow-card:nth-child(even) .flow-copy { order:2 }
.flow-card:nth-child(even) .flow-prop { order:1 }
.flow-card h3 { font-size:28px; margin-bottom:20px }
.flow-card p { color:var(--text-muted); margin-bottom:0 }
.flow-prop { padding:24px; min-width:0 }
.flow-prop .chat { width:100%; box-shadow:var(--shadow-card) }
.flow-prop .chat + .chat { margin-top:20px; margin-left:20px; width:calc(100% - 20px) }
.site-footer { background:var(--bg-panel); color:var(--text); margin-top:64px; padding-top:64px; padding-bottom:28px; border-radius:var(--r-canvas) var(--r-canvas) 0 0 }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.3fr 1fr; gap:40px }
.footer-brand p { max-width:25em; color:var(--text-muted); font-size:15px; margin-top:20px }
.site-footer h2 { font-size:15px; margin-bottom:16px }
.footer-links { list-style:none; padding:0; margin:0 }
.footer-links a { display:inline-block; padding-block:5px; color:var(--text-muted); text-decoration:none; font-size:14px }
.footer-links a:hover { color:var(--text); text-decoration:underline }
.footer-bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px }
.reveal { opacity:1 }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal-ready .reveal { transition:opacity var(--duration-reveal) var(--ease-reveal),transform var(--duration-reveal) var(--ease-reveal) }
.reveal.shown { opacity:1; transform:none }
@media (max-width:1279px) {
  .topbar { grid-template-columns:auto 1fr auto; gap:16px }
  .mainnav { display:none }
  .header-tools { margin-left:auto; grid-column:3 }
  .menu-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) {
    display:block; position:absolute; top:100%; left:0; right:0; z-index:4;
    max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain;
    padding:16px var(--gutter) 24px; background:var(--bg); color:var(--text); border-top:1px solid var(--border);
  }
  .mobile-drawer ul { list-style:none; margin:0; padding:0 }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; text-decoration:none; border-radius:var(--r-btn); font-size:16px }
  .mobile-drawer a[aria-current],.mobile-drawer a:hover { background:var(--bg-panel); color:var(--text) }
  .drawer-label { margin:20px 16px 8px; font-size:13px; color:var(--text-muted) }
}
@media (max-width:1023px) {
  :root { --inset:28px; --space-section:64px }
  .canvas { height:auto; grid-template-columns:minmax(0,1fr) }
  .hero-copy { padding:48px var(--inset) 36px }
  .hero-scene { height:520px }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .flow-card { gap:24px; padding:32px }
}
@media (max-width:768px) {
  h1,.hero-title { font-size:30px }
  .grid-two { grid-template-columns:minmax(0,1fr) }
  .flow-card { grid-template-columns:minmax(0,1fr) }
  .flow-card:nth-child(even) .flow-copy,.flow-card:nth-child(even) .flow-prop { order:initial }
}
@media (max-width:640px) {
  :root { --gutter:16px; --inset:24px; --space-section:48px }
  .brand { font-size:14px; gap:7px }
  .brand-mark { width:32px }
  .topbar { gap:8px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .lang { padding-inline:10px }
  .header-tools { gap:6px; margin-left:auto }
  .hero-copy { padding:36px var(--inset) 24px }
  .hero-title { font-size:clamp(24px,6.5vw,30px) }
  .hero-title > span { white-space:nowrap }
  .hero-copy .badge { font-size:12px }
  .lede { font-size:16px }
  .cta-row { gap:10px; margin-top:24px }
  .btn { padding-inline:18px; font-size:15px }
  .platforms { margin-top:28px }
  .platforms a { padding-inline:10px; font-size:12px }
  .hero-scene { height:460px }
  .slot-1 { left:5% }
  .slot-2 { right:5% }
  .slot-3 { left:12% }
  .chat,.slot-2 .chat { width:min(290px,74vw) }
  .slot-3 { top:80% }
  .panel,.card,.flow-card { padding:24px }
  .flow-prop { padding:0 }
  .flow-card h3 { font-size:24px }
  .flow-prop .chat { width:100% }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px }
  .tilt,[class*="tilt-"] { transform:none !important }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}