:root {
  --c-bg:#ffffff;
  --c-panel:#f2f2f2;
  --c-ink:#1a1b17;
  --c-ink-raise:#22241e;
  --c-screen-top:#0d0e0b;
  --c-screen-bottom:#13281a;
  --c-bezel:#060706;
  --c-metal-hi:#a3a69d;
  --c-metal:#585a52;
  --c-metal-lo:#2a2b26;
  --c-border:#e3e3e3;
  --c-border-soft:#e3e3e1;
  --c-sep:#b5b7b3;
  --c-lime:#c5f23d;
  --c-lime-hover:#d4f86a;
  --c-lime-deep:#4f7a10;
  --c-text:#17181a;
  --c-muted:#5e6062;
  --c-on-ink:#f5f6f1;
  --c-on-ink-soft:#b8bab1;
  --c-on-ink-faint:#8b8e85;
  --c-success:#2f9e5b;
  --c-warn:#c98a0a;
  --c-error:#d6453d;
  --c-clear:transparent;
  --a-ink-lift:rgba(255,255,255,.04);
  --a-line-ink:rgba(245,246,241,.14);
  --a-line-ink-strong:rgba(245,246,241,.38);
  --a-fill-ink:rgba(245,246,241,.05);
  --a-fill-ink-hover:rgba(245,246,241,.09);
  --a-lime-glow-1:rgba(197,242,61,.20);
  --a-lime-glow-2:rgba(197,242,61,.06);
  --a-lime-band:rgba(197,242,61,.30);
  --a-lime-edge:rgba(197,242,61,.40);
  --a-lime-ring:rgba(197,242,61,.08);
  --a-sheen:rgba(255,255,255,.08);
  --a-rim:rgba(255,255,255,.22);
  --a-island-ring:rgba(255,255,255,.06);
  --a-veil:rgba(6,7,6,.48);
  --sh-card:0 1px 2px rgba(6,7,5,.20),0 8px 16px -6px rgba(6,7,5,.35),0 26px 48px -18px rgba(6,7,5,.60);
  --sh-card-light:0 1px 2px rgba(23,24,26,.05),0 16px 36px -16px rgba(23,24,26,.20);
  --sh-phone:0 50px 90px -24px rgba(0,0,0,.70),0 18px 30px -12px rgba(0,0,0,.45);
  --sh-btn:0 12px 28px -12px rgba(197,242,61,.60);
  --sh-node:0 0 0 7px var(--c-bg);
  --r-panel:32px;
  --r-cabin:40px;
  --r-card:16px;
  --r-pill:999px;
  --r-shot:8px;
  --r-mark:9px;
  --r-key:5px;
  --r-focus:6px;
  --r-phone:52px;
  --r-round:50%;
  --f-display:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --f-body:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --size-body:16px;
  --size-small:14px;
  --size-caption:13px;
  --size-h1:clamp(34px,2.2vw + 16px,48px);
  --size-h2:clamp(26px,1.4vw + 14px,36px);
  --size-h3:26px;
  --tracking-title:-.02em;
  --tracking-latin:-.025em;
  --gutter:24px;
  --pad:72px;
  --header-h:72px;
  --reading-width:1120px;
  --wide-width:1280px;
  --ease-out:cubic-bezier(.2,.75,.25,1);
  --duration-fast:.2s;
  --duration-reveal:.6s;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
html.nav-open { overflow:hidden; }
body { margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--f-body); font-size:var(--size-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button,a { -webkit-tap-highlight-color:var(--c-clear); }
img { max-width:100%; }
svg { display:block; flex-shrink:0; }
button svg,a svg { flex-shrink:0; }
[hidden] { display:none!important; }
h1,h2,h3,h4,p,figure { margin-top:0; }
h1,h2,h3 { font-family:var(--f-display); font-weight:var(--weight-bold); letter-spacing:var(--tracking-title); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:var(--size-h1); line-height:1.14; }
h2 { font-size:var(--size-h2); line-height:1.25; }
h3 { font-size:var(--size-h3); line-height:1.35; }
code,kbd,pre { font-family:var(--f-mono); }
code { overflow-wrap:anywhere; }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:20px; background:var(--c-ink); color:var(--c-on-ink); border-radius:var(--r-card); font-size:var(--size-small); line-height:1.8; }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
:focus-visible { outline:2px solid var(--c-lime-deep); outline-offset:3px; border-radius:var(--r-focus); }
.panel :focus-visible { outline-color:var(--c-lime); }
::selection { background:var(--c-lime); color:var(--c-text); }
.wrap { width:100%; max-width:calc(var(--reading-width) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide { max-width:calc(var(--wide-width) + var(--gutter)*2); }
.section { padding-top:72px; padding-bottom:72px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid>* , .panel>*, .cabin>*, .footer-grid>* { min-width:0; }
.stack-flow>*+* { margin-top:20px; }
.nowrap { white-space:nowrap; }
.muted { color:var(--c-muted); }
.accent { color:var(--c-lime-deep); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:absolute; left:16px; top:12px; z-index:100; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border-radius:var(--r-pill); background:var(--c-text); color:var(--c-bg); font-size:var(--size-small); }
.skip:focus { width:auto; height:auto; padding:8px 14px; overflow:visible; clip-path:none; }
.prose { min-width:0; line-height:1.85; }
.prose p,.prose li { overflow-wrap:break-word; }
.prose h2 { margin-top:56px; margin-bottom:22px; }
.prose h3 { margin-top:32px; margin-bottom:16px; }
.prose a:not(.btn):not(.store-btn) { color:var(--c-lime-deep); text-decoration:underline; text-underline-offset:4px; }
.prose img { height:auto; }
.prose ul,.prose ol { padding-inline-start:24px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 26px; border:1px solid var(--c-clear); border-radius:var(--r-pill); font-family:var(--f-body); font-size:var(--size-body); font-weight:var(--weight-semibold); line-height:1.5; text-align:center; max-width:100%; transition:transform var(--duration-fast) var(--ease-out),background-color var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast); }
.btn svg { width:18px; height:18px; }
.btn--lime { background:var(--c-lime); color:var(--c-text); }
.btn--lime:hover,.btn--lime.is-hover { background:var(--c-lime-hover); color:var(--c-text); transform:translateY(-1px); box-shadow:var(--sh-btn); }
.btn--line { border-color:var(--c-border-soft); background:var(--c-bg); color:var(--c-text); }
.btn--line:hover { border-color:var(--c-muted); background:var(--c-panel); color:var(--c-text); }
.btn--ghost { border-color:var(--a-line-ink-strong); background:var(--c-clear); color:var(--c-on-ink); }
.btn--ghost:hover { background:var(--a-fill-ink-hover); color:var(--c-on-ink); border-color:var(--c-on-ink-soft); }
.btn--sm { min-height:46px; padding:10px 24px; font-size:15px; }
.btn:active,.btn.is-active { transform:translateY(1px); box-shadow:none; }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; background:var(--c-panel); color:var(--c-muted); border-color:var(--c-border-soft); box-shadow:none; transform:none; }
.card { padding:28px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); min-width:0; }
.panel-light { padding:48px; border:1px solid var(--c-border-soft); border-radius:var(--r-cabin); background:var(--c-panel); color:var(--c-text); min-width:0; }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px); }
.reveal.shown { opacity:1; transform:none; transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out); }

/* 页头有独立的宽版心，工具区不参与导航收缩。 */
#site-header { position:relative; z-index:50; background:var(--c-bg); color:var(--c-text); border-bottom:1px solid var(--c-border-soft); }
.masthead { position:relative; z-index:52; display:flex; align-items:center; gap:28px; min-height:var(--header-h); width:100%; max-width:min(100%,calc(1280px + var(--gutter)*2)); margin-inline:auto; padding-inline:var(--gutter); background:var(--c-bg); color:var(--c-text); }
.brand { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; font-family:var(--f-display); font-weight:var(--weight-bold); font-size:18px; letter-spacing:-.01em; }
.brand__mark { display:block; width:36px; height:36px; flex-shrink:0; border-radius:var(--r-mark); background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border-soft); }
.dotnav { margin-left:auto; min-width:0; }
.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:15px; color:var(--c-muted); white-space:nowrap; }
.dotnav li+li::before { content:"·"; margin:0 13px; color:var(--c-sep); font-weight:var(--weight-bold); }
.dotnav a { display:block; padding:4px 1px; }
.dotnav a:hover { color:var(--c-text); }
.dotnav a[aria-current="page"] { color:var(--c-text); font-weight:var(--weight-semibold); background:linear-gradient(var(--c-lime),var(--c-lime)) 0 86%/100% 6px no-repeat; }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.language { position:relative; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:6px 14px; border:1px solid var(--c-border-soft); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-text); font-size:var(--size-small); white-space:nowrap; }
.lang svg { width:16px; height:16px; color:var(--c-muted); }
.lang__short { display:none; }
.lang__caret { font-size:11px; color:var(--c-muted); }
.language-menu { position:absolute; top:calc(100% + 10px); right:0; width:190px; padding:8px; margin:0; list-style:none; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-focus); }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--c-panel); color:var(--c-text); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--c-border-soft); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-text); }
.menu-toggle svg { width:20px; height:20px; }
.mobile-nav { position:absolute; z-index:53; top:100%; left:0; right:0; max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; padding:16px var(--gutter) 24px; border-bottom:1px solid var(--c-border-soft); background:var(--c-bg); color:var(--c-text); }
.mobile-nav ul { list-style:none; margin:0; padding:0; }
.mobile-nav a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r-focus); }
.mobile-nav a:hover,.mobile-nav a[aria-current] { background:var(--c-panel); color:var(--c-text); }
.mobile-nav__languages { margin-top:16px!important; border-top:1px solid var(--c-border-soft); padding-top:12px!important; }
.nav-veil { position:fixed; z-index:49; inset:var(--header-h) 0 0; border:0; background:var(--a-veil); color:var(--c-on-ink); cursor:pointer; }
.footer { margin-top:48px; padding-top:56px; padding-bottom:32px; border-top:1px solid var(--c-border-soft); background:var(--c-panel); color:var(--c-text); }
.footer-grid { display:grid; grid-template-columns:1.4fr .7fr 1fr .7fr; gap:40px; }
.footer h2 { font-size:var(--size-body); margin-bottom:16px; }
.footer p { margin-top:18px; max-width:30em; color:var(--c-muted); font-size:var(--size-small); }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li+li { margin-top:9px; }
.footer a:not(.brand) { font-size:var(--size-small); }
.footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { margin-top:40px; padding-top:24px; border-top:1px solid var(--c-border-soft); font-size:var(--size-caption); color:var(--c-muted); }
@media(max-width:1280px) {
  .masthead { gap:20px; }
  .dotnav li+li::before { margin-inline:9px; }
}
@media(max-width:1240px) { :root { --pad:56px; } }
@media(max-width:1100px) {
  .masthead>.dotnav { display:none; }
  .masthead>.brand { flex:0 1 auto; min-width:0; }
  .masthead>.brand>span { min-width:0; overflow-wrap:anywhere; }
  .menu-toggle { display:inline-flex; }
  .header-tools { margin-left:auto; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1101px) { .mobile-nav,.nav-veil { display:none!important; } }
@media(max-width:768px) {
  :root { --gutter:20px; --pad:22px; --size-h1:clamp(24px,5.5vw,30px); }
  .grid { grid-template-columns:minmax(0,1fr); }
  .section { padding-top:48px; padding-bottom:48px; }
  .panel-light { padding:28px 22px; }
}
@media(max-width:640px) {
  :root { --gutter:16px; }
  .brand { font-size:16px; gap:8px; }
  .brand__mark { width:32px; height:32px; }
  .masthead { gap:10px; }
  .header-tools { margin-left:auto; gap:6px; }
  .lang { padding-inline:10px; min-height:44px; }
  .lang__full { display:none; }
  .lang__short { display:inline; }
  .lang svg { display:none; }
  .btn { min-height:48px; padding:11px 22px; font-size:15px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .tilt,[data-tilt] { transform:none!important; }
}
@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; }
}