:root {
  --bg:#fafafb;
  --panel:#ffffff;
  --panel-2:#f2f3f5;
  --line:#e2e3e7;
  --accent:#1a3cff;
  --accent-dark:#0b22b8;
  --ink:#121317;
  --muted:#5f626b;
  --success:#1e9e5a;
  --warn:#c98a0b;
  --error:#d23a3a;
  --on-accent:#ffffff;
  --clear:transparent;
  --accent-tint:rgb(26 60 255 / .08);
  --accent-ring:rgb(26 60 255 / .24);
  --on-accent-soft:rgb(255 255 255 / .72);
  --veil:rgb(18 19 23 / .28);
  --shadow-lift:0 12px 24px -18px rgb(18 19 23 / .32);
  --font-display:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:0px;
  --radius-device:14px;
  --radius-shot:4px;
  --radius-icon:7px;
  --radius-round:50%;
  --wrap:1216px;
  --header-width:1280px;
  --gutter:24px;
  --inset:28px;
  --bar-h:36px;
  --nav-h:64px;
  --rail:max(var(--gutter),calc(50% - var(--wrap) / 2));
  --space-section:140px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --speed:.2s;
  --weight-body:400;
  --weight-label:500;
  --weight-strong:600;
  --weight-heavy:800;
  --body-size:15px;
  --display-size:clamp(34px,3.4vw,48px);
  --heading-size:30px;
  --small-size:12.5px;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body-size);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html.nav-open { overflow:hidden }
a { color:var(--accent); text-underline-offset:3px }
a:hover { text-decoration-thickness:2px }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled,[aria-disabled="true"] { cursor:not-allowed }
button,select { max-width:100% }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
img { max-width:100% }
svg { flex-shrink:0 }
svg.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
[hidden] { display:none!important }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:var(--weight-heavy);
  line-height:1.2;
  letter-spacing:-.02em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1 { font-size:var(--display-size); line-height:1.1 }
h2 { font-size:var(--heading-size) }
h3 { font-size:21px }
p { margin-block:0 1em }
code,kbd,pre { font-family:var(--font-mono) }
code { font-size:.88em; overflow-wrap:anywhere }
pre {
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  padding:24px;
  background:var(--panel-2);
  color:var(--ink);
  border:1px solid var(--line);
  font-size:13px;
  line-height:1.8;
  tab-size:2;
}
pre code { font-size:inherit; overflow-wrap:normal; word-break:normal; white-space:pre }
hr { border:0; border-top:1px solid var(--line); margin-block:32px }
strong { font-weight:var(--weight-strong) }
.wrap {
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-width:0;
}
.header-wrap {
  width:100%;
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-width:0;
}
.page { position:relative; isolation:isolate }
.page::before,.page::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
  color:var(--ink);
  pointer-events:none;
  z-index:-1;
}
.page::before { left:var(--rail) }
.page::after { right:var(--rail) }
.section {
  padding-top:var(--space-section);
  padding-bottom:var(--space-section);
  border-bottom:1px solid var(--line);
}
.section-panel { background:var(--panel); color:var(--ink) }
.section-band { background:var(--panel-2); color:var(--ink) }
.section-in { padding-inline:var(--inset) }
.prose,.article-body { min-width:0; max-width:100%; overflow-wrap:break-word }
.prose { max-width:820px }
.prose h2,.article-body h2 { margin-top:64px; margin-bottom:24px }
.prose h3,.article-body h3 { margin-top:32px }
.prose p,.article-body p { line-height:1.9 }
.prose li,.article-body li { margin-block:10px }
.prose a,.article-body a { overflow-wrap:anywhere }
.nowrap { white-space:nowrap }
.muted { color:var(--muted) }
.hl,.kw { color:var(--accent) }
.mono { font-family:var(--font-mono) }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  padding:12px 20px;
  background:var(--panel);
  color:var(--accent);
  transform:translateY(-160%);
}
.skip-link:focus { transform:none }
.notice { min-height:var(--bar-h); background:var(--accent); color:var(--on-accent); font-size:13px; letter-spacing:.01em }
.notice-in { min-height:var(--bar-h); display:flex; align-items:center; justify-content:center; gap:18px; padding-block:6px }
.notice-in > span { min-width:0 }
.notice-sep { color:var(--on-accent-soft); flex-shrink:0 }
.notice a { color:var(--on-accent); flex-shrink:0 }
.site-head,#site-header { position:relative; z-index:30 }
.site-head { border-bottom:1px solid var(--line); background:var(--bg); color:var(--ink) }
.head-in { min-height:var(--nav-h); display:flex; align-items:stretch; position:relative }
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  margin-right:34px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:var(--weight-heavy);
  font-size:16px;
  letter-spacing:-.015em;
  white-space:nowrap;
  flex-shrink:0;
}
.brand img,.brand-mark { display:block; width:30px; height:30px; flex-shrink:0; border-radius:var(--radius-icon) }
.brand-mark { background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line) }
.brand-sub { color:var(--muted); font-weight:var(--weight-strong) }
.head-nav { display:flex; align-items:stretch; min-width:0; margin-left:auto }
.head-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:0; height:100% }
.head-nav li { height:100%; min-width:0 }
.head-nav a {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  font-size:14px;
  font-weight:var(--weight-label);
  transition:color var(--speed) var(--ease);
}
.head-nav svg { width:16px; height:16px }
.head-nav a:hover { color:var(--ink) }
.head-nav a.is-active { color:var(--accent) }
.head-nav a.is-active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--accent); color:var(--on-accent) }
.head-tools { margin-left:auto; display:flex; align-items:stretch; flex-shrink:0; border-left:1px solid var(--line); position:relative }
.lang-btn,.menu-toggle {
  appearance:none;
  border:0;
  border-radius:var(--radius);
  background:var(--clear);
  color:var(--ink);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:0 22px;
  font-size:14px;
  font-weight:var(--weight-label);
  white-space:nowrap;
  min-height:44px;
}
.lang-btn svg { width:16px; height:16px; color:var(--muted) }
.lang-btn:hover,.menu-toggle:hover { background:var(--panel); color:var(--accent) }
.lang-caret { color:var(--muted); font-size:11px }
.lang-short { display:none }
.lang-menu {
  position:absolute;
  top:100%;
  right:0;
  min-width:190px;
  padding:8px;
  margin:0;
  list-style:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  z-index:35;
}
.lang-menu a { display:flex; align-items:center; min-height:44px; padding:10px 16px; text-decoration:none; color:var(--ink) }
.lang-menu a:hover,.lang-menu a[aria-current] { background:var(--panel-2); color:var(--accent) }
.menu-toggle { display:none; min-width:44px; padding-inline:12px }
.menu-veil { position:fixed; inset:0; z-index:20; border:0; background:var(--veil); color:var(--ink) }
.mobile-nav { display:none }
.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 24px;
  border:0;
  border-radius:var(--radius);
  font:var(--weight-strong) 15px/1.4 var(--font-body);
  text-decoration:none;
  text-align:center;
  max-width:100%;
  transition:background-color var(--speed) var(--ease),color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.btn svg { width:17px; height:17px }
.btn::before {
  content:"";
  position:absolute;
  inset:-6px;
  pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) left top / 9px 1px,
    linear-gradient(var(--accent),var(--accent)) left top / 1px 9px,
    linear-gradient(var(--accent),var(--accent)) right top / 9px 1px,
    linear-gradient(var(--accent),var(--accent)) right top / 1px 9px,
    linear-gradient(var(--accent),var(--accent)) left bottom / 9px 1px,
    linear-gradient(var(--accent),var(--accent)) left bottom / 1px 9px,
    linear-gradient(var(--accent),var(--accent)) right bottom / 9px 1px,
    linear-gradient(var(--accent),var(--accent)) right bottom / 1px 9px;
  background-repeat:no-repeat;
}
.btn-primary { background:var(--accent); color:var(--on-accent) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent) }
.btn-ghost { background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line) }
.btn-ghost:hover { color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-ring) }
.btn:active,.btn.is-pressed { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line) }
.btn:disabled::before,.btn[aria-disabled="true"]::before { opacity:.4 }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:9px }
.btn-arrow { font-family:var(--font-mono); transition:transform var(--speed) var(--ease) }
.btn-ghost:hover .btn-arrow { transform:translateX(3px) }
.panel,.card { min-width:0; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--ink) }
.card h3 { margin-top:0 }
.card p:last-child { margin-bottom:0 }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); color:var(--ink); border:1px solid var(--line) }
.card-grid > * { min-width:0; border:0 }
.site-footer { border-top:1px solid var(--line); background:var(--panel-2); color:var(--ink); padding-top:64px; padding-bottom:28px }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1.3fr .8fr; gap:40px; min-width:0 }
.footer-grid > * { min-width:0 }
.footer-brand .brand { margin:0 0 20px; white-space:normal }
.footer-brand p { color:var(--muted); max-width:300px }
.footer-heading { margin:0 0 20px; font-family:var(--font-mono); font-size:13px; font-weight:var(--weight-strong) }
.footer-links { list-style:none; margin:0; padding:0 }
.footer-links a { display:inline-block; color:var(--muted); text-decoration:none; padding-block:5px; overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent); text-decoration:underline }
.footer-bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; font-size:var(--small-size); color:var(--muted) }
.footer-bottom p { margin:0 }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
html.reveal-ready .reveal.shown { opacity:1; transform:none }
.decorated,.hero,[data-hero-visual] { overflow-x:clip }
@media (max-width:1279px) {
  .head-nav { display:none }
  .head-tools { margin-left:auto }
  .menu-toggle { display:flex }
  .head-in { align-items:stretch }
  .mobile-nav {
    position:absolute;
    top:100%;
    left:var(--gutter);
    right:var(--gutter);
    display:block;
    padding:12px;
    max-height:calc(100dvh - var(--nav-h) - var(--bar-h) - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
    z-index:34;
  }
  .mobile-nav ul { list-style:none; margin:0; padding:0 }
  .mobile-nav a { display:flex; width:100%; align-items:center; gap:12px; min-height:44px; padding:12px 16px; text-decoration:none; color:var(--ink) }
  .mobile-nav a:hover,.mobile-nav a[aria-current] { color:var(--accent); background:var(--panel-2) }
  .mobile-nav svg { width:18px; height:18px }
  .mobile-languages { margin-top:12px; border-top:1px solid var(--line); padding-top:12px }
  .preview-menu { position:relative; display:block }
  .preview-menu summary { list-style:none; display:flex; align-items:center; justify-content:center; min-width:44px; height:100%; min-height:44px; cursor:pointer }
  .preview-menu .mobile-nav { width:min(85vw,380px); right:0; left:auto }
}
@media (min-width:1280px) { .preview-menu { display:none } }
@media (max-width:900px) {
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,5vw,30px) }
  h2 { font-size:26px }
}
@media (max-width:640px) {
  :root { --gutter:16px; --inset:20px }
  .wrap,.header-wrap { padding-inline:var(--gutter) }
  .brand { margin-right:10px; font-size:14px; gap:8px }
  .brand-sub { display:none }
  .lang-long { display:none }
  .lang-short { display:inline }
  .lang-btn { padding-inline:12px }
  .head-tools { margin-left:auto }
  .notice-in { justify-content:flex-start; flex-wrap:wrap; gap:4px 12px; font-size:11px }
  .notice-sep { display:none }
  .section { padding-top:80px; padding-bottom:80px }
  .section-in { padding-inline:4px }
  .card-grid,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .footer-grid { gap:28px }
  .card,.panel { padding:22px }
  .tilt,[data-tilt] { transform:none!important }
  .btn { padding-inline:18px; font-size:14px }
  .footer-bottom { margin-top:32px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  html.reveal-ready .reveal { opacity:1; transform:none }
}