:root {
  --c-bg:#FFFFFF;
  --c-panel:#F4F4F4;
  --c-panel-2:#E6F1FB;
  --c-border:#E0E0E0;
  --c-accent:#1E4FE0;
  --c-accent-dark:#1438A8;
  --c-accent-tint:#EDF3FE;
  --c-text:#161616;
  --c-muted:#5C5C5C;
  --c-success:#1F9D55;
  --c-warn:#B07D00;
  --c-error:#D42A2A;
  --c-on-accent:#FFFFFF;
  --c-clear:transparent;
  --c-field-a:#3B63D9;
  --c-field-b:#A9BEF2;
  --c-orb-violet:#8A4DF0;
  --c-orb-violet-soft:rgba(138,77,240,.46);
  --c-orb-pink:#F06BA8;
  --c-orb-pink-soft:rgba(240,107,168,.42);
  --c-orb-blue:#3B63D9;
  --c-orb-blue-soft:rgba(59,99,217,.5);
  --c-orb-deep:rgba(20,56,168,.88);
  --c-orb-deep-soft:rgba(20,56,168,.4);
  --c-glass-top:rgba(255,255,255,.44);
  --c-glass-mid:rgba(255,255,255,.14);
  --c-glass-low:rgba(255,255,255,.24);
  --c-glass-tint:rgba(30,79,224,.16);
  --c-glass-sheen:rgba(255,255,255,.26);
  --c-glass-edge:rgba(255,255,255,.55);
  --c-glass-hi:rgba(255,255,255,.95);
  --c-glass-side:rgba(255,255,255,.2);
  --c-glass-text:#FFFFFF;
  --c-glass-text-dim:rgba(255,255,255,.8);
  --c-ink-shadow:rgba(20,56,168,.45);
  --c-chrome-bg:rgba(255,255,255,.14);
  --c-chrome-line:rgba(255,255,255,.3);
  --c-ctrl-bg:rgba(22,22,22,.34);
  --c-ctrl-bg-hover:rgba(22,22,22,.56);
  --c-shade:rgba(20,56,168,.2);
  --c-veil:rgba(22,22,22,.28);
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','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;
  --r-ctrl:2px;
  --r-card:4px;
  --r-round:50%;
  --stroke-hair:1.25px;
  --head-h:56px;
  --hero-h:560px;
  --gutter:48px;
  --content-max:1440px;
  --reading-max:800px;
  --space-section:80px;
  --duration-fast:150ms;
  --duration-reveal:600ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --weight-display:300;
  --weight-body:400;
  --weight-emphasis:500;
  --size-body:16px;
  --size-small:14px;
  --size-mono:12px;
  --z-head:40;
  --z-veil:30;
  --z-fab:20;
}
*,*::before,*::after { box-sizing:border-box }
* { margin:0 }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  font-family:var(--font-body); font-size:var(--size-body); line-height:1.6;
  color:var(--c-text); background:var(--c-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main,section,article,aside,nav,div { min-width:0 }
a { color:inherit; text-decoration:none }
a,button,input,summary { -webkit-tap-highlight-color:var(--c-accent-tint) }
ul { list-style:none; padding:0 }
button,input,select,textarea { font:inherit; color:inherit }
button,summary { cursor:pointer }
button { border-radius:var(--r-ctrl) }
img,svg { display:block; max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
[hidden] { display:none !important }
:focus-visible { outline:2px solid var(--c-accent); outline-offset:3px }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-body); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:clamp(34px,3.35vw,48px); line-height:1.15; font-weight:var(--weight-display); color:var(--c-accent) }
h2 { font-size:28px; line-height:1.3; font-weight:var(--weight-display) }
h3 { font-size:21px; line-height:1.4 }
strong { font-weight:var(--weight-emphasis) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre { max-width:100%; overflow-x:auto; padding:20px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); font-size:13px; line-height:1.8; tab-size:2 }
pre code { font-size:inherit; white-space:pre; overflow-wrap:normal; word-break:normal }
hr { border:0; border-top:1px solid var(--c-border) }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip { position:absolute; left:16px; top:8px; z-index:60; padding:8px 14px; background:var(--c-accent); color:var(--c-on-accent); border-radius:var(--r-ctrl); font-size:14px }
.skip:not(:focus) { width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
.wrap { width:100%; max-width:var(--content-max); margin-inline:auto; padding-inline:var(--gutter) }
.reading { width:100%; max-width:calc(var(--reading-max) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section) }
.section__head { margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--c-border) }
.section__head p { max-width:40em; margin-top:12px; color:var(--c-muted) }
.keep { white-space:nowrap }
.muted { color:var(--c-muted) }
.mono { font-family:var(--font-mono) }
.text-link { color:var(--c-accent); text-decoration:underline; text-underline-offset:4px }
.line-ico { fill:none; stroke:currentColor; stroke-width:var(--stroke-hair); stroke-linecap:round; stroke-linejoin:round }
.actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px }
.btn {
  display:inline-flex; align-items:center; justify-content:space-between; gap:40px;
  min-width:200px; min-height:48px; padding:12px 16px; border:1px solid var(--c-clear);
  border-radius:var(--r-ctrl); font-size:15px; line-height:1.4;
  transition:background-color var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast);
}
.btn svg { width:18px; height:18px; flex:none }
.btn--solid { background:var(--c-accent); color:var(--c-on-accent) }
.btn--solid:hover,.btn--solid.is-hover { background:var(--c-accent-dark); color:var(--c-on-accent) }
.btn--line { background:var(--c-bg); border-color:var(--c-accent); color:var(--c-accent) }
.btn--line:hover,.btn--line.is-hover { background:var(--c-accent-tint); color:var(--c-accent) }
.btn:active { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-panel); color:var(--c-muted); border-color:var(--c-border); cursor:not-allowed }
.btn.is-focus { outline:2px solid var(--c-accent); outline-offset:3px }
.site-head { position:relative; z-index:var(--z-head); border-bottom:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text) }
.head-wrap { width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter) }
.site-head__inner { height:var(--head-h); display:flex; align-items:center; gap:32px }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:var(--weight-emphasis); letter-spacing:.01em; white-space:nowrap; flex-shrink:0 }
.brand__mark { width:26px; height:26px; flex-shrink:0 }
.primary-nav { margin-left:auto; min-width:0 }
.primary-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px }
.primary-nav a { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--r-ctrl); font-size:14px; color:var(--c-muted); white-space:nowrap; transition:color var(--duration-fast),background-color var(--duration-fast) }
.primary-nav a:hover { color:var(--c-text); background:var(--c-panel) }
.primary-nav a[aria-current="page"],.mobile-nav a[aria-current="page"] { background:var(--c-accent-tint); color:var(--c-accent) }
.head-tools { display:flex; align-items:center; gap:12px; flex-shrink:0 }
.language { position:relative }
.lang { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 4px 0 24px; background:var(--c-clear); border:0; cursor:pointer; font-size:14px; color:var(--c-muted); white-space:nowrap }
.lang::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--c-border) }
.lang:hover { color:var(--c-text) }
.lang svg { width:16px; height:16px }
.lang__caret { font-size:11px }
.lang__short { display:none }
.language__list { position:absolute; top:calc(100% + 12px); right:0; width:180px; padding:6px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); z-index:2 }
.language__list a { display:flex; align-items:center; min-height:44px; padding:8px 12px; font-size:14px }
.language__list a:hover,.language__list a[aria-current="true"] { background:var(--c-accent-tint); color:var(--c-accent) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text) }
.menu-toggle svg { width:20px; height:20px }
.mobile-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--c-bg); color:var(--c-text); padding:16px var(--gutter) 24px; border-bottom:1px solid var(--c-border); max-height:calc(100dvh - var(--head-h)); overflow-y:auto; overscroll-behavior:contain }
.mobile-nav a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; border-radius:var(--r-ctrl); font-size:15px }
.mobile-nav__languages { border-top:1px solid var(--c-border); margin-top:16px; padding-top:12px }
.menu-veil { position:fixed; inset:var(--head-h) 0 0; z-index:var(--z-veil); border:0; border-radius:0; background:var(--c-veil); color:var(--c-text) }
.site-foot { padding-top:56px; padding-bottom:24px; border-top:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text) }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1.4fr .8fr; gap:40px }
.footer-brand p { margin-top:20px; max-width:25em; font-size:14px; color:var(--c-muted) }
.footer-title { font-size:14px; font-weight:var(--weight-emphasis); margin-bottom:16px }
.footer-links { display:grid; gap:10px; font-size:14px; color:var(--c-muted) }
.footer-links a { display:inline-block; overflow-wrap:anywhere }
.footer-links a:hover { color:var(--c-accent); text-decoration:underline; text-underline-offset:3px }
.footer-bottom { margin-top:40px; padding-top:20px; border-top:1px solid var(--c-border); font-size:12px; color:var(--c-muted) }
.card,.panel { min-width:0; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.card p,.panel p { margin-top:16px }
.card__link { display:flex; justify-content:flex-end; margin-top:24px; color:var(--c-accent) }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px }
.prose { line-height:1.85; overflow-wrap:break-word }
.prose h2 { margin-top:56px; margin-bottom:20px; scroll-margin-top:24px }
.prose h3 { margin-top:32px; margin-bottom:14px }
.prose p,.prose pre,.prose ul,.prose ol,.prose blockquote,.prose table { margin-block:20px }
.prose ul { list-style:disc; padding-left:1.5em }
.prose ol { padding-left:1.5em }
.prose li + li { margin-top:8px }
.prose a { color:var(--c-accent); text-decoration:underline; text-underline-offset:3px }
.reveal { opacity:1; transform:none }
.reveal-pending .reveal:not(.shown) { opacity:0; transform:translateY(16px) }
.reveal-pending .reveal { transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out) }
.decorated,.hero,.manual-band { overflow-x:clip }
@media (max-width:1280px) {
  .site-head__inner { gap:20px }
  .primary-nav a { padding-inline:9px }
}
@media (max-width:1100px) {
  .primary-nav { display:none }
  .head-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-nav:not([hidden]) { display:block }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:900px) {
  :root { --gutter:20px; --space-section:56px }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,7vw,30px) }
  h2 { font-size:24px }
  .grid-2,.grid-3 { grid-template-columns:1fr }
  .actions { margin-top:24px }
  .btn { flex:1 1 180px; min-width:0; gap:24px }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .tilt,[data-tilt] { transform:none !important }
  .site-head__inner { gap:8px }
  .brand { font-size:14px; gap:8px }
  .brand__mark { width:24px; height:24px }
  .head-tools { gap:4px; margin-left:auto }
  .lang { padding-left:12px; gap:6px; min-height:44px }
  .lang__full { display:none }
  .lang__short { display:inline }
  .footer-grid,.grid-4 { grid-template-columns:1fr }
  .footer-grid { gap:32px }
  .card,.panel { padding:20px }
  pre { padding:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important; animation:none !important }
  .reveal-pending .reveal:not(.shown) { opacity:1; transform:none }
}