:root {
  --c-bg:#1F558F;
  --c-bg-deep:#1B4B80;
  --c-arc-1:#255F9C;
  --c-arc-2:#2B69A8;
  --c-arc-3:#3274B4;
  --c-panel:#FFFFFF;
  --c-panel-2:#F8F4EE;
  --c-border:#DCE5EF;
  --c-accent:#1E7BE0;
  --c-accent-dark:#0C55A6;
  --c-text:#14243A;
  --c-muted:#5A6B80;
  --c-success:#1F9D6B;
  --c-warn:#E9A400;
  --c-error:#D6455D;
  --c-sky:#8FD0FF;
  --c-sun:#FFC41F;
  --c-blossom:#FF9EC4;
  --c-blossom-fold:#E97FAB;
  --c-accent-soft:#E5F1FE;
  --c-surface:#F4F7FB;
  --c-surface-2:#EBF1F8;
  --c-track:#C9D3DF;
  --c-chrome-dot:#D2D9E2;
  --c-phone-frame:#153A64;
  --c-clear:transparent;
  --rgb-white:255 255 255;
  --rgb-shadow:8 30 60;
  --rgb-sky:143 208 255;
  --rgb-veil:16 46 84;
  --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;
  --fs-small:13px;
  --fs-label:14px;
  --fs-body:16px;
  --fs-lede:17px;
  --fs-h3:24px;
  --fs-h2:36px;
  --fs-h1:clamp(34px,3.4vw,48px);
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --r-btn:12px;
  --r-field:8px;
  --r-group:14px;
  --r-card:20px;
  --r-panel:28px;
  --r-win:22px;
  --r-tray:32px;
  --r-phone:40px;
  --r-section:40px;
  --r-pill:999px;
  --r-mark:11px;
  --r-lang:10px;
  --r-seg:9px;
  --r-seg-item:7px;
  --r-phone-card:16px;
  --r-circle:50%;
  --shadow-tray:0 2px 6px rgb(var(--rgb-shadow) / .20),0 12px 26px rgb(var(--rgb-shadow) / .15),0 30px 60px rgb(var(--rgb-shadow) / .11),0 64px 120px rgb(var(--rgb-shadow) / .08);
  --shadow-phone:0 3px 8px rgb(var(--rgb-shadow) / .30),0 16px 32px rgb(var(--rgb-shadow) / .25),0 36px 70px rgb(var(--rgb-shadow) / .20),0 70px 130px rgb(var(--rgb-shadow) / .14);
  --shadow-btn:inset 0 1px 0 rgb(var(--rgb-white) / .20),0 2px 4px rgb(var(--rgb-shadow) / .18),0 10px 24px rgb(var(--rgb-shadow) / .26);
  --shadow-knob:0 1px 2px rgb(var(--rgb-shadow) / .28);
  --shadow-card:0 4px 12px rgb(var(--rgb-shadow) / .04),0 18px 40px rgb(var(--rgb-shadow) / .07);
  --wrap:1240px;
  --reading:860px;
  --gutter:32px;
  --mast-h:68px;
  --space-section:88px;
  --motion-fast:180ms;
  --motion-reveal:600ms;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px }
html.nav-open { overflow:hidden }
body {
  margin:0; position:relative; font-family:var(--font-body); font-size:var(--fs-body);
  line-height:1.75; color:var(--c-text); background:var(--c-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main { background:var(--c-panel) }
[hidden] { display:none !important }
img,svg,video { max-width:100%; vertical-align:middle }
img { height:auto }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
a { color:var(--c-accent-dark); text-underline-offset:4px }
a:hover { text-decoration-thickness:2px }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:var(--c-clear) }
:focus-visible { outline:2px solid var(--c-accent-dark); outline-offset:4px }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--c-text); line-height:1.3; text-wrap:balance }
h1 { font-size:var(--fs-h1); font-weight:var(--weight-display); line-height:1.16; letter-spacing:-.005em }
h2 { font-size:var(--fs-h2); font-weight:var(--weight-display); letter-spacing:-.005em }
h3 { font-size:var(--fs-h3); font-weight:var(--weight-bold) }
p { margin:0 0 1.2em }
h1,h2,h3,h4 { margin:0 0 .7em }
ul,ol { padding-inline-start:1.5em }
li + li { margin-top:.3em }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre {
  max-width:100%; overflow-x:auto; padding:24px; border-radius:var(--r-group);
  background:var(--c-surface); color:var(--c-text); line-height:1.7;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:var(--fs-label) }
hr { border:0; border-top:1px solid var(--c-border); margin:32px 0 }
::selection { background:var(--c-sky); color:var(--c-text) }
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.reading { width:100%; max-width:var(--reading); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section) }
.prose { min-width:0; overflow-wrap:break-word }
.prose h2 { margin-top:2em }
.prose h3 { margin-top:1.6em }
.prose p,.prose li { line-height:1.9 }
.prose img { max-width:100% }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px }
.grid > *, .footer-grid > *, .feature-band > *, .pane-grid > * { min-width:0 }
.flex-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.text-muted { color:var(--c-muted) }
.kw,.eyebrow { color:var(--c-accent-dark) }
.eyebrow { font-size:var(--fs-small); font-weight:var(--weight-bold); letter-spacing:.06em }
.keep { white-space:nowrap }
.center { text-align:center }
.section-head { max-width:800px; margin:0 auto 56px; text-align:center }
.section-head p { color:var(--c-muted); font-size:var(--fs-lede) }
.icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.skip {
  position:absolute; left:16px; top:-80px; z-index:100;
  padding:10px 16px; border-radius:var(--r-btn); background:var(--c-panel);
  color:var(--c-accent-dark); font-weight:var(--weight-semibold); text-decoration:none;
}
.skip:focus { top:12px }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:196px; min-height:52px; padding:12px 28px; border:1px solid var(--c-clear);
  border-radius:var(--r-btn); font-family:var(--font-body); font-size:var(--fs-body);
  font-weight:var(--weight-bold); line-height:1.4; letter-spacing:.02em; text-decoration:none;
  transition:transform var(--motion-fast) ease,background var(--motion-fast) ease;
}
.btn:hover,.btn.is-hover { transform:translateY(-1px) }
.btn svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:var(--c-accent); color:var(--c-panel); box-shadow:var(--shadow-btn) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--c-accent-dark); color:var(--c-panel) }
.btn-secondary { background:var(--c-accent-soft); color:var(--c-accent-dark); border-color:var(--c-border) }
.btn-secondary:hover { background:var(--c-surface-2); color:var(--c-accent-dark) }
.btn-ghost { background:var(--c-clear); color:var(--c-panel); border:1.5px solid rgb(var(--rgb-white) / .7) }
.btn-ghost:hover { background:rgb(var(--rgb-white) / .10); color:var(--c-panel); border-color:var(--c-panel) }
.btn:active,.btn.is-pressed { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-surface-2); color:var(--c-muted); border-color:var(--c-border); box-shadow:none; cursor:not-allowed; transform:none }
.btn-small { min-width:0; min-height:44px; padding:9px 18px; font-size:var(--fs-label) }
.text-link { font-weight:var(--weight-semibold); color:var(--c-accent-dark); text-decoration:none; border-bottom:1.5px solid var(--c-border); padding-bottom:2px }
.text-link:hover { border-color:var(--c-accent) }
.card { padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-card); min-width:0 }
.panel { padding:40px; border-radius:var(--r-panel); background:var(--c-panel-2); color:var(--c-text); min-width:0 }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.masthead {
  position:relative; z-index:30; height:var(--mast-h);
  background:var(--c-bg-deep); color:var(--c-panel);
  border-bottom:1px solid rgb(var(--rgb-white) / .08);
}
.home-view .masthead { position:absolute; top:0; left:0; right:0; background:rgb(var(--rgb-veil) / .42); color:var(--c-panel) }
.masthead-in {
  max-width:min(100%,calc(1280px + var(--gutter) * 2)); height:100%;
  margin:0 auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:28px;
}
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--c-panel); flex-shrink:0 }
.brand img { width:34px; height:34px; flex-shrink:0 }
.brand-name { font-family:var(--font-display); font-size:17px; font-weight:var(--weight-display); letter-spacing:.01em }
.primary { margin-left:auto; min-width:0 }
.primary ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px }
.primary li { margin:0 }
.primary a {
  display:inline-flex; align-items:center; justify-content:center; padding:8px 15px;
  border-radius:var(--r-pill); font-size:14.5px; line-height:1.4; text-decoration:none;
  color:rgb(var(--rgb-white) / .82); white-space:nowrap;
}
.primary a:hover { color:var(--c-panel) }
.primary a.is-current { color:var(--c-panel); font-weight:var(--weight-semibold); background:rgb(var(--rgb-white) / .15); box-shadow:inset 0 0 0 1px rgb(var(--rgb-white) / .14) }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language { position:relative }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px;
  padding:7px 12px; border-radius:var(--r-lang); font:500 13.5px/1.4 var(--font-body);
  color:rgb(var(--rgb-white) / .92); background:var(--c-clear);
  border:1px solid rgb(var(--rgb-white) / .26); cursor:pointer; white-space:nowrap;
}
.lang svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; flex-shrink:0 }
.lang:hover { border-color:rgb(var(--rgb-white) / .5); color:var(--c-panel) }
.lang-short { display:none }
.lang-menu {
  position:absolute; top:calc(100% + 12px); right:0; width:190px; padding:8px;
  border:1px solid var(--c-border); border-radius:var(--r-group);
  background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-card);
}
.lang-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; text-decoration:none; color:var(--c-text); border-radius:var(--r-field) }
.lang-menu a:hover,.lang-menu a[aria-current] { background:var(--c-accent-soft); color:var(--c-accent-dark) }
.menu-toggle {
  display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  border:1px solid rgb(var(--rgb-white) / .26); border-radius:var(--r-lang);
  background:var(--c-clear); color:var(--c-panel);
}
.menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8 }
.mobile-drawer {
  position:absolute; top:var(--mast-h); left:0; right:0; z-index:32;
  max-height:calc(100dvh - var(--mast-h)); overflow-y:auto; overscroll-behavior:contain;
  padding:18px var(--gutter) 28px; background:var(--c-panel); color:var(--c-text);
  box-shadow:var(--shadow-card);
}
.mobile-drawer ul { list-style:none; margin:0; padding:0 }
.mobile-drawer li { margin:0 }
.mobile-drawer a {
  display:flex; align-items:center; width:100%; min-height:48px; padding:10px 16px;
  border-radius:var(--r-btn); color:var(--c-text); text-decoration:none;
}
.mobile-drawer a:hover,.mobile-drawer a.is-current,.mobile-drawer a[aria-current] { background:var(--c-accent-soft); color:var(--c-accent-dark) }
.drawer-languages { border-top:1px solid var(--c-border); margin-top:16px; padding-top:12px }
.drawer-languages p { margin:0 16px 4px; font-size:var(--fs-small); color:var(--c-muted) }
.nav-veil { position:fixed; inset:var(--mast-h) 0 0; z-index:29; background:rgb(var(--rgb-shadow) / .45); color:var(--c-panel); border:0 }
.masthead :focus-visible { outline-color:var(--c-sky) }
.site-footer { padding-top:72px; padding-bottom:28px; background:var(--c-bg-deep); color:var(--c-panel); overflow-x:clip }
.footer-grid { display:grid; grid-template-columns:1.2fr .9fr 1.4fr .8fr; gap:40px }
.footer-brand p { margin-top:20px; color:rgb(var(--rgb-white) / .82); font-size:var(--fs-label) }
.site-footer h2 { font-size:var(--fs-label); color:var(--c-panel); margin-bottom:18px; font-weight:var(--weight-bold) }
.site-footer ul { list-style:none; margin:0; padding:0 }
.site-footer li { margin:0 0 8px }
.site-footer a { color:rgb(var(--rgb-white) / .88); text-decoration:none }
.site-footer a:hover { color:var(--c-panel); text-decoration:underline }
.footer-keywords { display:flex; flex-wrap:wrap; gap:8px 16px }
.footer-keywords li { font-size:var(--fs-small) }
.copyright { margin-top:48px; padding-top:24px; border-top:1px solid rgb(var(--rgb-white) / .18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:var(--fs-small); color:rgb(var(--rgb-white) / .82) }
.copyright p { margin:0 }
.legal-links { display:flex; flex-wrap:wrap; gap:20px }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease }
@media (max-width:1279px) {
  .primary { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
}
@media (min-width:1280px) {
  .mobile-drawer,.nav-veil { display:none !important }
}
@media (max-width:900px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  :root { --fs-h1:clamp(24px,4vw,30px); --fs-h2:28px; --fs-h3:22px; --space-section:60px; --gutter:24px }
  .grid { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .masthead-in { gap:12px }
  .masthead .brand { gap:8px; min-width:0; flex-shrink:1 }
  .masthead .brand-name { min-width:0; font-size:14px; line-height:1.4; overflow-wrap:anywhere }
  .brand img { width:30px; height:30px }
  .lang-full,.lang svg { display:none }
  .lang-short { display:inline }
  .header-tools { gap:8px; margin-left:auto }
  .lang { min-height:44px; padding:8px 10px }
  .card,.panel { padding:24px }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px }
  .section-head { margin-bottom:36px }
  .tilt,[data-tilt] { transform:none !important }
  pre { padding:18px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}