:root{
  --c-bg:#ffffff;
  --c-panel:#f4f6f9;
  --c-border:#dde2ea;
  --c-text:#1c1f26;
  --c-muted:#5a6271;
  --c-navy:#0f2554;
  --c-navy-deep:#081838;
  --c-navy-2:#16306b;
  --c-cobalt:#1f43a8;
  --c-cobalt-hi:#3c66d6;
  --c-green:#1d5c44;
  --c-green-line:#3f8f6d;
  --c-green-wash:rgba(29,92,68,.38);
  --c-yellow:#f2c230;
  --c-yellow-halo:rgba(242,194,48,.26);
  --c-error:#b93a32;
  --c-on-dark:#ffffff;
  --c-on-dark-soft:#c3d0f0;
  --c-on-dark-2:rgba(255,255,255,.78);
  --c-on-dark-3:rgba(255,255,255,.65);
  --c-line-dark:rgba(255,255,255,.16);
  --c-hover-dark:rgba(255,255,255,.08);
  --c-charcoal:#26282d;
  --c-graphite:#26292f;
  --c-graphite-rim:#464b55;
  --c-ink:#0b0d11;
  --c-slab:#b7c2d4;
  --c-screen-line:rgba(255,255,255,.72);
  --c-mask:#000000;
  --c-clear:transparent;
  --c-veil:rgba(8,24,56,.48);

  --f-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --f-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,"Noto Sans SC",monospace;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semi:600;
  --weight-bold:700;
  --text-body:16px;
  --text-small:14px;
  --text-micro:12px;
  --text-h1:clamp(34px,3.3vw,48px);
  --text-h2:clamp(26px,3vw,36px);
  --text-h3:22px;
  --track-tight:-.025em;
  --track-cjk:-.02em;
  --r-canvas:36px;
  --r-section:32px;
  --r-float:18px;
  --r-pill:999px;
  --r-shot:8px;
  --r-icon:10px;
  --r-tag:6px;
  --r-circle:50%;
  --r-arch:50% 50% 0 0;
  --r-phone:46px;
  --r-screen:38px;
  --r-key-left:2px 0 0 2px;
  --r-key-right:0 2px 2px 0;
  --gutter:24px;
  --canvas-edge:24px;
  --bar-h:76px;
  --width-reading:1168px;
  --width-header:1280px;
  --section-gap:140px;
  --space-card:32px;
  --line:1px;
  --focus-ring:3px;
  --duration:.2s;
  --duration-reveal:.55s;
  --ease:ease;
  --shadow-rule:0 7px 0 0 var(--c-slab);
  --shadow-phone:inset 0 0 0 1.5px var(--c-graphite-rim);
  --z-header:40;
  --z-veil:30;
  --z-fab:20;
  --z-tip:60;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--weight-normal) var(--text-body)/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
html.nav-open{overflow:hidden}
main,section,article,aside,nav,header,footer,div,figure{min-width:0}
img,svg{max-width:100%;vertical-align:middle}
img{height:auto}
svg{flex-shrink:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button,a{-webkit-tap-highlight-color:var(--c-clear)}
button{color:inherit}
a{color:var(--c-navy);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
button:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
:focus-visible{outline:var(--focus-ring) solid var(--c-cobalt);outline-offset:3px}
::selection{background:var(--c-yellow);color:var(--c-text)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:var(--weight-bold);line-height:1.25;letter-spacing:var(--track-cjk);text-wrap:balance}
h1{font-size:var(--text-h1);color:var(--c-navy);line-height:1.15}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}
p,ul,ol{margin-top:0}
p{margin-bottom:1.2em}
strong{font-weight:var(--weight-semi)}
code,kbd,pre{font-family:var(--f-mono)}
code{overflow-wrap:anywhere}
pre{max-width:100%;overflow-x:auto;padding:24px;border:var(--line) solid var(--c-border);border-radius:var(--r-float);background:var(--c-panel);color:var(--c-text);font-size:14px;line-height:1.8;tab-size:2}
pre code{overflow-wrap:normal;word-break:normal;white-space:pre}
hr{border:0;border-top:var(--line) solid var(--c-border);margin:32px 0}
.wrap{width:100%;max-width:calc(var(--width-reading) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{margin-top:var(--section-gap)}
.section-pad{padding-top:64px;padding-bottom:64px}
.flow>*+*{margin-top:24px}
.muted{color:var(--c-muted)}
.mono{font-family:var(--f-mono)}
.nowrap{white-space:nowrap}
.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:absolute;left:24px;top:0;transform:translateY(-130%);z-index:var(--z-tip);padding:12px 20px;border-radius:var(--r-pill);background:var(--c-navy);color:var(--c-on-dark)}
.skip-link:focus{transform:translateY(8px)}
.prose{max-width:78ch;line-height:1.85}
.prose h2{margin-top:2.3em}
.prose h3{margin-top:1.8em}
.prose li+li{margin-top:.5em}
.prose :where(div,section,article){max-width:100%}
.grid-two,.grid-three{display:grid;gap:24px}
.grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-two>*,.grid-three>*{min-width:0}
.card,.panel{padding:var(--space-card);border:var(--line) solid var(--c-border);border-radius:var(--r-section);background:var(--c-bg);color:var(--c-text)}
.panel{background:var(--c-panel);color:var(--c-text)}
.dark-panel{position:relative;overflow-x:clip;padding:64px;border-radius:var(--r-section);background:var(--c-navy);color:var(--c-on-dark)}
.charcoal-panel{background:var(--c-charcoal);color:var(--c-on-dark)}
.dark-panel h2,.dark-panel h3{color:var(--c-on-dark)}
.dark-panel .card h2,.dark-panel .card h3{color:var(--c-navy)}
.dark-panel a:not(.btn){color:var(--c-on-dark)}
.dark-panel .muted{color:var(--c-on-dark-2)}
.arch-heading::before{content:"";display:inline-block;width:12px;height:18px;margin-right:12px;border-radius:var(--r-arch);background:currentColor;vertical-align:baseline}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:12px 26px;border:var(--line) solid var(--c-clear);border-radius:var(--r-pill);background:var(--c-navy);color:var(--c-on-dark);font:var(--weight-semi) 15.5px/1.4 var(--f-body);text-align:center;text-decoration:none;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease);max-width:100%}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover,.btn.is-hover{background:var(--c-navy-deep);color:var(--c-on-dark)}
.btn-secondary{border-color:var(--c-border);background:var(--c-bg);color:var(--c-navy)}
.btn-secondary:hover{background:var(--c-panel);color:var(--c-navy)}
.btn-solid{background:var(--c-on-dark);color:var(--c-navy)}
.btn-solid:hover{background:var(--c-panel);color:var(--c-navy)}
.btn-line{border:1.5px solid var(--c-on-dark);background:var(--c-clear);color:var(--c-on-dark)}
.btn-line:hover{background:var(--c-hover-dark);color:var(--c-on-dark)}
.btn:focus-visible,.stage a:focus-visible{outline:2px solid var(--c-yellow);outline-offset:3px}

#site-header{position:relative;z-index:var(--z-header);background:var(--c-bg);color:var(--c-text)}
.topbar{height:var(--bar-h);display:flex;align-items:center;gap:24px;width:100%;max-width:min(100%,calc(var(--width-header) + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter)}
.preview-topbar{max-width:none;padding-inline:calc(var(--canvas-edge) + 24px)}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:var(--c-text)}
.brand-mark{display:block;width:34px;height:34px;border-radius:var(--r-icon);flex:none}
.brand-placeholder{background:var(--c-panel);color:var(--c-text);border:var(--line) solid var(--c-border)}
.brand-name{font-family:var(--f-display);font-weight:var(--weight-bold);font-size:17px;letter-spacing:var(--track-tight)}
.mainnav{margin-left:auto;min-width:0}
.mainnav ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:34px}
.mainnav a{display:block;padding-top:12px;padding-bottom:12px;text-decoration:none;font-size:15px;font-weight:var(--weight-medium);color:var(--c-muted);white-space:nowrap;transition:color var(--duration) var(--ease)}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--c-navy)}
.mainnav a[aria-current="page"]{font-weight:var(--weight-bold)}
.header-tools{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative}
.lang{min-height:38px;padding:8px 16px;border:var(--line) solid var(--c-border);border-radius:var(--r-pill);background:var(--c-bg);color:var(--c-text);font:var(--weight-medium) 14px/1.4 var(--f-body);white-space:nowrap}
.lang:hover{border-color:var(--c-navy)}
.lang-caret{margin-left:6px;color:var(--c-muted)}
.lang-short{display:none}
.language-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:180px;margin:0;padding:8px;list-style:none;border:var(--line) solid var(--c-border);border-radius:var(--r-float);background:var(--c-bg);color:var(--c-text);z-index:2}
.language-menu a{display:block;min-height:44px;padding:10px 14px;border-radius:var(--r-icon);text-decoration:none;color:var(--c-text)}
.language-menu a:hover,.language-menu a[aria-current="true"]{background:var(--c-panel);color:var(--c-navy)}
.menu-toggle{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:var(--line) solid var(--c-border);border-radius:var(--r-pill);background:var(--c-bg);color:var(--c-navy)}
.menu-toggle svg{width:22px;height:22px}
.mobile-drawer{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--bar-h));overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) 24px;border-bottom:var(--line) solid var(--c-border);background:var(--c-bg);color:var(--c-text)}
.mobile-drawer ul{list-style:none;margin:0;padding:0}
.mobile-drawer a{display:flex;align-items:center;min-height:48px;width:100%;padding:12px 16px;text-decoration:none;color:var(--c-text);border-bottom:var(--line) solid var(--c-border)}
.mobile-drawer a[aria-current]{font-weight:var(--weight-bold);color:var(--c-navy)}
.drawer-label{margin:24px 16px 8px;color:var(--c-muted);font-size:13px}
.nav-veil{position:fixed;inset:var(--bar-h) 0 0;z-index:var(--z-veil);border:0;background:var(--c-veil);color:var(--c-on-dark);cursor:pointer}
.site-footer{margin-top:var(--section-gap);padding-top:64px;padding-bottom:32px;border-top:var(--line) solid var(--c-border);background:var(--c-panel);color:var(--c-text)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr;gap:40px}
.footer-grid>*{min-width:0}
.footer-brand p{margin-top:20px;max-width:28em;color:var(--c-muted);font-size:14px}
.footer-title{margin:0 0 16px;font-size:15px;font-weight:var(--weight-bold)}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links a{display:inline-block;padding-top:6px;padding-bottom:6px;text-decoration:none;color:var(--c-muted);font-size:14px;overflow-wrap:anywhere}
.footer-links a:hover{color:var(--c-navy)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:24px;border-top:var(--line) solid var(--c-border);font-size:13px;color:var(--c-muted)}
.legal-links{display:flex;flex-wrap:wrap;gap:20px}
.legal-links a{color:var(--c-muted)}
.reveal{opacity:1;transform:none}
html.reveal-ready .reveal:not(.shown){opacity:0;transform:translateY(16px)}
html.reveal-ready .reveal{transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease)}
.reveal.shown{opacity:1;transform:none}
.decorated,.hero,.stage{position:relative;overflow-x:clip}
.decorative-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(min-width:1101px){
  .mobile-drawer,.nav-veil{display:none!important}
}
@media(max-width:1100px){
  .topbar{gap:16px}
  #site-header .mainnav{display:none}
  .header-tools{margin-left:auto}
  .menu-toggle{display:inline-flex}
  .mainnav ul{gap:22px}
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  h1{font-size:clamp(24px,5.5vw,30px)}
}
@media(max-width:640px){
  :root{--gutter:16px;--space-card:24px}
  .wrap{padding-inline:var(--gutter)}
  .topbar{gap:8px}
  .brand{gap:8px}
  .brand-name{font-size:14px}
  .brand-mark{width:30px;height:30px}
  .lang{padding:8px 12px}
  .lang-full{display:none}
  .lang-short{display:inline}
  .header-tools{margin-left:auto}
  .grid-two,.grid-three,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .dark-panel{padding:32px 24px}
  .section-pad{padding-top:40px;padding-bottom:40px}
  .btn{min-height:48px;padding:12px 22px;font-size:15px}
  .tilt,[data-tilt]{transform:none!important}
  .footer-grid{gap:28px}
  .site-footer{padding-bottom:96px}
}
@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}
}