:root {
  --bg:#FAFBFC;
  --panel:#FFFFFF;
  --panel-2:#EEF1F5;
  --border:#D5D9E0;
  --ink:#1E2128;
  --muted:#5B616E;
  --on-dark:#FFFFFF;
  --on-indigo-soft:#C8CAF0;
  --accent:#1070F0;
  --accent-dark:#0A4FB8;
  --indigo:#33369C;
  --mint:#4FE0C8;
  --yellow:#FFC929;
  --orange:#FF9F43;
  --pink:#FF7AC6;
  --green:#7BE495;
  --success:#1FAF6B;
  --warn:#E8990F;
  --error:#E0413A;
  --clear:transparent;
  --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,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --radius:0;
  --radius-dot:50%;
  --stroke:1.5px;
  --line:1px;
  --nav-h:68px;
  --peek:88px;
  --ride:64px;
  --gutter:48px;
  --hero-gutter:max(48px, calc(50% - 624px));
  --content-width:1248px;
  --reading-width:800px;
  --header-width:1280px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:72px;
  --space-7:96px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lead:20px;
  --title-1:clamp(34px,3.4vw,48px);
  --title-2:clamp(26px,2.5vw,36px);
  --title-3:22px;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-brand:800;
  --weight-heavy:900;
  --leading-body:1.6;
  --leading-title:1.2;
  --fast:150ms;
  --reveal-time:450ms;
  --ease:ease;
  --focus-gap:3px;
  --plate-offset:10px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--space-3); }
html,body { margin:0; padding:0; }
html.nav-open { overflow:hidden; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; border-radius:var(--radius); }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
svg { flex-shrink:0; }
button svg,a svg { flex-shrink:0; }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:var(--focus-gap); }
::selection { background:var(--accent-dark); color:var(--on-dark); }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; overflow-wrap:break-word; }
h1 { margin:0 0 var(--space-3); font-size:var(--title-1); line-height:1.14; font-weight:var(--weight-heavy); }
h2 { margin:0 0 var(--space-3); font-size:var(--title-2); line-height:var(--leading-title); font-weight:var(--weight-heavy); }
h3 { margin:0 0 var(--space-2); font-size:var(--title-3); line-height:1.35; }
p { margin:0 0 var(--space-2); }
p:last-child { margin-bottom:0; }
strong { font-weight:var(--weight-bold); }
small { font-size:var(--text-sm); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:var(--space-3);
  background:var(--panel-2);
  color:var(--ink);
  border:var(--line) solid var(--border);
  border-radius:var(--radius);
  line-height:1.7;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
hr { border:0; border-top:var(--line) solid var(--border); margin-block:var(--space-4); }
.wrap {
  width:100%;
  max-width:calc(var(--content-width) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-width:0;
}
.reading { max-width:calc(var(--reading-width) + var(--gutter) * 2); }
.section { padding-top:var(--space-6); padding-bottom:var(--space-6); }
.section-soft { background:var(--panel-2); color:var(--ink); }
.section-white { background:var(--panel); color:var(--ink); }
.section-dark { background:var(--indigo); color:var(--on-dark); }
.section-dark .muted { color:var(--on-indigo-soft); }
.muted { color:var(--muted); }
.lead { font-size:var(--text-lead); line-height:1.7; }
.mono { font-family:var(--font-mono); }
.keep-word { white-space:nowrap; }
.text-link { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.stack > * + * { margin-top:var(--space-3); }
.grid { display:grid; gap:var(--space-3); }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid > *, .grid-two > *, .grid-three > *, .wrap > *, .prose, .prose * { min-width:0; }
.prose { line-height:1.85; }
.prose h2 { margin-top:var(--space-6); }
.prose h3 { margin-top:var(--space-4); }
.prose p,.prose ul,.prose ol { margin-bottom:var(--space-3); }
.prose a:not([class*="btn"]):not([class*="button"]) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.prose li + li { margin-top:var(--space-1); }
.prose blockquote { margin-inline:0; }
.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:var(--space-2);
  top:var(--space-2);
  transform:translateY(-200%);
  z-index:50;
  padding:var(--space-2);
  background:var(--ink);
  color:var(--on-dark);
}
.skip-link:focus { transform:none; }
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:10px 26px;
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  line-height:1.4;
  border-radius:var(--radius);
  border:var(--stroke) solid var(--ink);
  background:var(--panel);
  color:var(--ink);
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--ink); color:var(--on-dark); }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-dark); border-color:var(--accent-dark); }
.btn-secondary { background:var(--panel); color:var(--ink); }
.btn-secondary:hover,.btn-secondary.is-hover { background:var(--panel-2); color:var(--ink); }
.btn:active,.btn.is-active { background:var(--accent-dark); color:var(--on-dark); border-color:var(--accent-dark); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); border-color:var(--border); }
.btn-small { min-height:44px; padding:8px 18px; font-size:var(--text-sm); }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.panel,.card {
  min-width:0;
  padding:var(--space-4);
  background:var(--panel);
  color:var(--ink);
  border:var(--stroke) solid var(--ink);
  border-radius:var(--radius);
}
.card h3 a:hover { color:var(--accent-dark); }
.card-footer { margin-top:var(--space-3); padding-top:var(--space-2); border-top:var(--line) solid var(--border); }
.decorated-section { position:relative; overflow-x:clip; }
.decoration { pointer-events:none; }
.background-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.reveal { opacity:1; }
.reveal.is-observed { opacity:0; transform:translateY(14px); transition:opacity var(--reveal-time) var(--ease),transform var(--reveal-time) var(--ease); }
.reveal.shown { opacity:1; transform:none; }

/* 页头使用独立宽版心，不与阅读版心共用。 */
.topbar { position:relative; z-index:30; height:var(--nav-h); background:var(--bg); color:var(--ink); border-bottom:var(--line) solid var(--border); }
.topbar-inner {
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:100%;
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  height:100%;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; font-family:var(--font-display); font-weight:var(--weight-brand); font-size:17px; letter-spacing:0.005em; color:var(--ink); }
.brand-mark { width:32px; height:32px; flex-shrink:0; }
.desktop-nav { min-width:0; margin-left:auto; }
.nav-list { display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
.nav-link { display:block; padding:8px 16px; color:var(--muted); font-size:15px; font-weight:var(--weight-medium); border-radius:var(--radius); white-space:nowrap; transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease); }
.nav-link:hover { color:var(--ink); }
.nav-link[aria-current="page"] { background:var(--panel-2); color:var(--ink); font-weight:var(--weight-bold); }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:4px; }
.language-picker { position:relative; }
.lang {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:6px 14px;
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  background:var(--panel);
  color:var(--ink);
  border:var(--stroke) solid var(--ink);
  border-radius:var(--radius);
  white-space:nowrap;
}
.lang svg { width:16px; height:16px; }
.lang .caret { font-size:11px; color:var(--muted); }
.lang-short { display:none; }
.language-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:180px; margin:0; padding:var(--space-1); list-style:none; background:var(--panel); color:var(--ink); border:var(--stroke) solid var(--ink); z-index:35; }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 14px; }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--panel-2); color:var(--ink); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; border:var(--stroke) solid var(--ink); background:var(--panel); color:var(--ink); }
.menu-toggle svg { width:22px; height:22px; }
.mobile-drawer { display:none; }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:20; border:0; background:var(--panel-2); color:var(--ink); }
.preview-head .topbar-inner { max-width:none; padding-inline:var(--hero-gutter); justify-content:space-between; }
.preview-head .header-tools { margin-left:4px; }
.preview-head .desktop-nav { margin-left:auto; }

/* 页脚 */
.site-footer { background:var(--panel-2); color:var(--ink); border-top:var(--stroke) solid var(--ink); padding-top:var(--space-6); padding-bottom:var(--space-4); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:var(--space-4); }
.footer-grid > * { min-width:0; }
.footer-brand p { margin-top:var(--space-3); max-width:310px; color:var(--muted); font-size:var(--text-sm); }
.footer-heading { margin:0 0 var(--space-2); font-size:var(--text-sm); font-weight:var(--weight-bold); }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0; padding:0; list-style:none; font-size:var(--text-sm); }
.footer-links a { overflow-wrap:anywhere; }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-5); padding-top:var(--space-3); border-top:var(--line) solid var(--border); color:var(--muted); font-size:var(--text-sm); }
.legal-links { display:flex; flex-wrap:wrap; gap:var(--space-3); }

@media (max-width:1279px) {
  .desktop-nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:flex; }
  .mobile-drawer:not([hidden]) {
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:var(--space-2) var(--gutter) var(--space-3);
    background:var(--panel);
    color:var(--ink);
    border-bottom:var(--stroke) solid var(--ink);
    z-index:32;
  }
  .mobile-drawer ul { list-style:none; margin:0; padding:0; }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--panel-2); color:var(--ink); }
  .drawer-languages { margin-top:var(--space-2); border-top:var(--line) solid var(--border); padding-top:var(--space-2); }
  .drawer-label { display:block; padding:var(--space-2); color:var(--muted); font-size:var(--text-sm); }
  .preview-head .desktop-nav { display:block; }
}
@media (max-width:1100px) {
  .preview-head .desktop-nav { display:none; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  :root { --gutter:24px; --title-1:clamp(24px,4vw,30px); --space-6:56px; --space-7:72px; }
  .grid-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-head .topbar-inner { padding-inline:var(--gutter); }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .topbar-inner { gap:8px; }
  .header-tools { gap:8px; margin-left:auto; }
  .brand { font-size:15px; gap:8px; }
  .brand-mark { width:28px; height:28px; }
  .lang { min-height:44px; padding-inline:10px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .grid-two,.grid-three,.footer-grid { grid-template-columns:minmax(0,1fr); }
  .panel,.card { padding:var(--space-3); }
  .tilt,.is-tilted,[data-tilt] { transform:none !important; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
  .cta-row { gap:10px; }
  .btn { padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal.is-observed { opacity:1; transform:none; }
}