:root {
  --bg:#F6F7F9;
  --panel:#FFFFFF;
  --panel-2:#EDF0F4;
  --side:#F2F4F8;
  --border:#DFE3EA;
  --accent:#E5197A;
  --accent-2:#FF5FA2;
  --accent-dark:#B30F5E;
  --text:#0E1116;
  --text-2:#2B313B;
  --muted:#5A6270;
  --muted-2:#8A93A1;
  --success:#16A05A;
  --warn:#D98A0B;
  --error:#D7263D;
  --sky:#BFDDFB;
  --sky-mid:#E3EFFC;
  --wall-1:#CFE4FB;
  --wall-2:#E7F1FD;
  --wall-3:#F4F8FC;
  --alu-1:#EEF1F5;
  --alu-2:#C9CED6;
  --alu-3:#B3B9C3;
  --bezel:#14171C;
  --bezel-edge:#2A2F37;
  --candy-sky:#D9E9FC;
  --candy-sky-2:#ECF4FE;
  --candy-mint:#D5F0E3;
  --candy-mint-2:#EAF8F1;
  --candy-pink:#FADDEB;
  --candy-pink-2:#FDEFF6;
  --candy-apricot:#FBE6D0;
  --candy-apricot-2:#FEF3E8;
  --candy-lilac:#E3E0EF;
  --candy-lilac-2:#F0EEF7;
  --candy-navy:#0E2A52;
  --candy-navy-2:#1B4B88;
  --tl-red:#FF5F57;
  --tl-yellow:#FEBC2E;
  --tl-green:#28C840;
  --flag-white:#FFFFFF;
  --flag-jp:#BC002D;
  --flag-us-red:#B22234;
  --flag-us-blue:#3C3B6E;
  --flag-hk:#DE2910;
  --flag-sg:#EF3340;
  --flag-nl-red:#AE1C28;
  --flag-nl-blue:#21468B;
  --flag-uk-blue:#012169;
  --flag-uk-red:#C8102E;
  --w-100:#FFFFFF;
  --w-90:rgba(255,255,255,.9);
  --w-72:rgba(255,255,255,.72);
  --w-60:rgba(255,255,255,.6);
  --w-40:rgba(255,255,255,.4);
  --w-14:rgba(255,255,255,.14);
  --w-0:rgba(255,255,255,0);
  --sky-a40:rgba(191,221,251,.45);
  --sky-a0:rgba(191,221,251,0);
  --shadow-sky-10:rgba(46,128,214,.10);
  --shadow-sky-12:rgba(46,128,214,.12);
  --shadow-sky-22:rgba(46,128,214,.22);
  --shadow-pink-8:rgba(229,25,122,.08);
  --shadow-pink-18:rgba(229,25,122,.18);
  --ink-40:rgba(14,17,22,.4);
  --ink-12:rgba(14,17,22,.12);
  --ink-06:rgba(14,17,22,.06);
  --elev-sky:0 26px 60px -18px var(--shadow-sky-12),0 6px 16px -8px var(--shadow-sky-10);
  --elev-pink:0 22px 52px -14px var(--shadow-pink-8),0 6px 18px -10px var(--shadow-sky-10);
  --hl-edge:inset 0 0 0 1px var(--w-90);
  --font-display:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-card:28px;
  --r-float:22px;
  --r-window:16px;
  --r-tile:13px;
  --r-box:11px;
  --r-brand:10px;
  --r-small:8px;
  --r-flag:3px;
  --r-pill:999px;
  --r-circle:50%;
  --gutter:24px;
  --content:1184px;
  --reading:800px;
  --header-height:64px;
  --toc-offset:80px;
  --anchor-offset:156px;
  --space-section:88px;
  --size-body:16px;
  --size-small:14px;
  --size-h1:clamp(52px,4.45vw,64px);
  --size-h2:clamp(30px,3.4vw,46px);
  --size-h3:24px;
  --weight-display:900;
  --ease:200ms ease;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-padding-top:80px; scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font:var(--size-body)/1.6 var(--font-body); -webkit-font-smoothing:antialiased }
h1,h2,h3,h4,p,figure { margin:0 }
h1,h2,h3 { font-family:var(--font-display); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:var(--size-h1); font-weight:var(--weight-display); line-height:1.1; letter-spacing:-.02em }
h2 { font-size:var(--size-h2); font-weight:800; line-height:1.2; letter-spacing:-.02em }
h3 { font-size:var(--size-h3); font-weight:750; line-height:1.3 }
p + p { margin-top:16px }
a { color:inherit; text-underline-offset:4px }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button,a,summary { -webkit-tap-highlight-color:var(--shadow-pink-8) }
button { border:0 }
button:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; opacity:.5; pointer-events:none }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--accent-dark); outline-offset:4px }
img { max-width:100%; height:auto; display:block }
svg { flex-shrink:0 }
ul { padding-left:24px }
pre { max-width:100%; overflow-x:auto; padding:24px; background:var(--panel-2); border-radius:var(--r-window); font-family:var(--font-mono) }
code { font-family:var(--font-mono); overflow-wrap:anywhere }
pre code { overflow-wrap:normal; white-space:pre }
table { border-collapse:collapse }
[hidden] { display:none !important }
:where(.grid,.topbar,.footer-grid,.win-body,.tiles) > * { min-width:0 }
.wrap { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section) }
.section-head { max-width:800px; margin:0 auto 32px; text-align:center }
.section-head p { margin-top:16px; color:var(--muted); font-size:18px }
.grid { display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr)) }
.panel,.card { padding:32px; border-radius:var(--r-card); background:var(--panel); box-shadow:var(--hl-edge),var(--elev-sky) }
.muted { color:var(--muted) }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.no-break { white-space:nowrap }
.sprite { position:absolute; width:0; height:0; overflow:hidden }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.icon { width:24px; height:24px; display:inline-block; vertical-align:middle }
.prose { max-width:var(--reading); margin-inline:auto; min-width:0; overflow-wrap:break-word }
.prose h2 { margin-top:48px; margin-bottom:20px; font-size:32px }
.prose h3 { margin-top:32px; margin-bottom:16px }
.prose p,.prose li { line-height:1.85 }
.prose li + li { margin-top:8px }
.prose section { margin-bottom:40px }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 32px; border:0; border-radius:var(--r-pill); font:600 17px/1.2 var(--font-body); text-decoration:none; text-align:center; flex-shrink:0; white-space:nowrap; transition:transform var(--ease),box-shadow var(--ease),background-color var(--ease) }
.btn:hover { transform:translateY(-1px) }
.btn-solid,.btn-primary { background:var(--text); color:var(--panel); box-shadow:inset 0 1px 0 var(--w-14),0 12px 26px -12px var(--ink-40) }
.btn-ghost,.btn-secondary { background:var(--panel); color:var(--text); box-shadow:inset 0 0 0 1.5px var(--text),0 10px 24px -14px var(--shadow-sky-22) }
.btn-small { min-height:36px; padding:8px 18px; font-size:var(--size-small) }
.btn-inverse { background:var(--panel); color:var(--text) }
.btn-outline-inverse { background:var(--text); color:var(--panel); box-shadow:inset 0 0 0 1px var(--panel) }
.cta-row { margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
#site-header { position:relative; z-index:50; min-height:var(--header-height) }
.topbar { position:relative; z-index:53; max-width:1240px; height:var(--header-height); margin:0 auto; padding:0 32px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:24px }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; min-height:44px }
.brand-logo { width:34px; height:34px; border-radius:var(--r-brand); flex-shrink:0 }
.brand-name { font:900 20px/1 var(--font-display); letter-spacing:-.02em; color:var(--text) }
.brand-sub { font-size:13px; font-weight:500; color:var(--muted) }
.dotnav { flex:1; min-width:0; display:flex; justify-content:center }
.dotnav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:0 }
.dotnav li { display:flex; align-items:center; font-size:14.5px; line-height:1; white-space:nowrap }
.dotnav li + li::before { content:"·"; margin:0 12px; color:var(--muted-2); font-weight:700; flex-shrink:0 }
.dotnav a { display:inline-flex; align-items:center; min-height:32px; text-decoration:none; color:var(--text-2); font-weight:500; padding:6px 0 }
.dotnav a:hover,.dotnav a[aria-current="page"] { color:var(--text); font-weight:700 }
.topbar-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language-picker { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; width:auto; height:38px; padding:0 12px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--text-2); font:500 14px/1 var(--font-body); white-space:nowrap }
.lang:hover { background:var(--w-60) }
.lang svg { width:16px; height:16px }
.lang-label { white-space:nowrap }
.lang-caret { font-size:11px; color:var(--muted) }
.language-panel { position:absolute; right:0; top:calc(100% + 10px); z-index:60; width:180px; padding:8px; background:var(--panel); border-radius:var(--r-window); box-shadow:var(--hl-edge),var(--elev-sky) }
.language-panel a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-small); text-decoration:none }
.language-panel a:hover,.language-panel a[aria-current="true"] { background:var(--panel-2); color:var(--accent-dark) }
.btn-login { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 22px; border-radius:var(--r-pill); background:var(--text); color:var(--panel); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; box-shadow:0 8px 18px -10px var(--ink-40) }
.menu-button { display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-width:44px; min-height:44px; padding:10px; border-radius:var(--r-pill); background:var(--panel); color:var(--text) }
.menu-line { display:block; width:20px; height:2px; background:currentColor; flex-shrink:0 }
.nav-drawer { position:fixed; z-index:52; inset:var(--header-height) 0 auto; height:calc(100dvh - var(--header-height)); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; background:var(--panel); padding:16px var(--gutter) 40px }
.nav-drawer ul { list-style:none; margin:0; padding:0 }
.nav-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; text-decoration:none; border-radius:var(--r-box) }
.nav-drawer a:hover,.nav-drawer a[aria-current="page"] { background:var(--panel-2); color:var(--accent-dark) }
.drawer-languages { border-top:1px solid var(--border); margin-top:16px; padding-top:16px }
.nav-veil { position:fixed; z-index:51; inset:var(--header-height) 0 0; background:var(--ink-40) }
html.nav-open { overflow:hidden }
.site-footer { padding-top:64px; padding-bottom:28px; background:var(--panel-2); border-radius:var(--r-card) var(--r-card) 0 0 }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1.3fr; gap:48px }
.footer-brand p { margin-top:20px; max-width:330px; color:var(--muted) }
.footer-title { font-size:16px; font-weight:750; margin-bottom:16px }
.footer-links { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px }
.footer-links a,.footer-languages a,.footer-legal a { display:inline-flex; align-items:center; min-height:32px; padding-block:4px; text-decoration:none; color:var(--text-2) }
.footer-links a:hover,.footer-languages a:hover,.footer-legal a:hover { color:var(--accent-dark) }
.footer-languages { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border) }
.footer-bottom { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 32px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.reveal { transition:opacity 350ms ease,transform 350ms ease }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { position:relative; display:block; width:100%; min-width:0; min-height:48px; max-width:100%; overflow:hidden; margin-block:24px }
#server-status + * { margin-top:24px }
.decoration-region { position:relative; overflow-x:clip; max-width:100% }
@media (max-width:1200px) {
  .topbar { gap:16px; padding-inline:24px }
  .dotnav li { font-size:13px }
  .dotnav li + li::before { margin-inline:8px }
  .topbar-tools { gap:6px }
}
@media (max-width:1080px) {
  .dotnav { display:none }
  .menu-button { display:inline-flex }
  .topbar-tools { margin-left:auto }
}
@media (max-width:768px) {
  :root { --space-section:56px; --size-h1:clamp(28px,6vw,40px); --size-h2:30px }
  .grid { grid-template-columns:minmax(0,1fr) }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:32px }
  .panel,.card { padding:24px }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .no-break { white-space:normal }
  .topbar { padding-inline:var(--gutter); gap:8px }
  .brand { gap:7px }
  .brand-name { font-size:17px }
  .brand-logo { width:29px; height:29px }
  .topbar-tools { margin-left:auto; gap:4px }
  .lang { padding-inline:7px; font-size:12px; gap:4px }
  .lang svg { display:none }
  .btn-login { padding-inline:13px; font-size:13px }
  .menu-button { min-width:44px; padding:8px }
  .btn { padding-inline:24px; font-size:16px }
  .tilt,.decorative-tilt { transform:none }
  .decoration-region > * { max-width:100% }
  .prose h2 { font-size:28px }
  pre { padding:16px }
  .footer-bottom { align-items:flex-start; flex-direction:column }
}
@media (min-width:1081px) {
  .nav-drawer,.nav-veil { display:none !important }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none }
}