:root {
  --bg: #FFFFFF;
  --bg-panel: #F6F6F7;
  --bg-panel-2: #EEEFF1;
  --border: #E6E6E9;
  --accent: #D8505E;
  --accent-dark: #B23A48;
  --accent-soft: #8CCBDB;
  --text: #33363B;
  --text-muted: #7A7D84;
  --text-secondary: #656870;
  --text-faint: #A6A9AF;
  --sketch: #C9CBD0;
  --success: #3E9E6E;
  --warn: #D8962B;
  --error: #C0392B;
  --on-accent: #FFFFFF;
  --chrome-dark: #2F3237;
  --chrome-raise: rgba(255,255,255,.09);
  --chrome-ink: #E4E5E8;
  --chrome-ink-muted: #8E9198;
  --chrome-label: #6E7178;
  --tl-close: #FF5F57;
  --tl-min: #FEBC2E;
  --tl-zoom: #28C840;
  --clear: transparent;
  --veil: rgba(20,22,26,.18);
  --font-display: "Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body: "Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-btn: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --shadow-window: 0 40px 90px rgba(20,22,26,.12),0 8px 22px rgba(20,22,26,.05);
  --shadow-float: 0 30px 80px rgba(20,22,26,.10);
  --shadow-cta: 0 10px 24px rgba(178,58,72,.20);
  --shadow-chip: 0 1px 2px rgba(20,22,26,.06);
  --gutter: 24px;
  --content-width: 1120px;
  --reading-width: 780px;
  --header-width: 1280px;
  --header-height: 64px;
  --code-lh: 21px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --duration: .24s;
  --tab-cycle: 8s;
  --size-h1: clamp(34px,3.4vw + .5rem,48px);
  --size-h2: clamp(26px,2.6vw,36px);
  --size-h3: 20px;
  --size-body: 16px;
  --weight-display: 800;
}
*,*::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;
  background:var(--bg);
  color:var(--text);
  font:var(--size-body)/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:var(--accent-dark); text-underline-offset:.2em }
a:hover { text-decoration-thickness:2px }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button,a { -webkit-tap-highlight-color:var(--clear) }
button:disabled { cursor:not-allowed }
img,svg { display:block; max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
[hidden] { display:none !important }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:var(--r-xs) }
::selection { background:var(--bg-panel-2); color:var(--text) }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; overflow-wrap:break-word }
h1 { margin:0 0 20px; font-size:var(--size-h1); font-weight:var(--weight-display); line-height:1.16; letter-spacing:-.012em }
h2 { margin:0 0 16px; font-size:var(--size-h2); font-weight:var(--weight-display); line-height:1.25; letter-spacing:-.01em }
h3 { margin:0 0 12px; font-size:var(--size-h3); line-height:1.4 }
p { margin:0 0 20px }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre {
  max-width:100%; min-width:0; overflow-x:auto;
  padding:24px; border-radius:var(--r-lg);
  background:var(--bg-panel); color:var(--text);
  font-size:13px; line-height:1.8; tab-size:2;
}
pre code { font-size:inherit; white-space:pre; overflow-wrap:normal; word-break:normal }
hr { border:0; border-top:1px solid var(--border); margin:40px 0 }
.wrap { width:100%; max-width:calc(var(--content-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:calc(var(--reading-width) + var(--gutter) * 2) }
.section { padding-top:120px; padding-bottom:120px }
.section-heading { text-align:center; margin-bottom:48px }
.section-heading p { max-width:680px; margin:0 auto; color:var(--text-secondary) }
.nowrap { white-space:nowrap }
.muted { color:var(--text-secondary) }
.mono { font-family:var(--font-mono) }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.decorated { position:relative; overflow-x:clip }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.grid > *, .editor > *, .notebook > *, .footer-grid > *, .prose, .panel, .card { min-width:0 }
.panel { padding:32px; border-radius:var(--r-2xl); background:var(--bg-panel); color:var(--text) }
.card { padding:28px; border-radius:var(--r-lg); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float) }
.card p:last-child { margin-bottom:0 }
.prose { line-height:1.9 }
.prose h2 { margin-top:64px; scroll-margin-top:100px }
.prose h3 { margin-top:32px }
.prose li { margin-bottom:8px }
.prose :not(pre) > code { background:var(--bg-panel); color:var(--accent-dark); border-radius:var(--r-xs); padding:.1em .35em }
.prose img { border-radius:var(--r-lg) }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:10px 24px; max-width:100%;
  border:0; border-radius:var(--r-btn);
  font-size:15.5px; font-weight:600; line-height:1.4; text-align:center; text-decoration:none;
  transition:background-color var(--duration),transform var(--duration) var(--ease-out),box-shadow var(--duration);
}
.btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-cta) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent); transform:translateY(-1px) }
.btn-primary:active,.btn-primary.is-active { background:var(--accent-dark); color:var(--on-accent); transform:translateY(1px); box-shadow:none }
.btn-ghost { background:var(--bg-panel); color:var(--text) }
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--bg-panel-2); color:var(--text) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-secondary); box-shadow:none; transform:none; cursor:not-allowed }
.btn-small { min-height:44px; padding:9px 18px; font-size:14px }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.skip-link { position:absolute; left:var(--gutter); top:12px; z-index:100; padding:12px 20px; background:var(--bg); color:var(--text); border-radius:var(--r-md) }
.skip-link:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* 页头独立宽版心，不继承阅读列宽度。 */
#site-header,.topbar { position:relative; z-index:40; background:var(--bg); color:var(--text) }
.topbar-inner {
  position:relative; width:100%; max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  min-height:var(--header-height); margin:0 auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; text-decoration:none; color:var(--text) }
.brand img { width:30px; height:30px; flex-shrink:0 }
.brand-name { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.005em }
.topnav { display:flex; align-items:center; min-width:0; margin-left:auto }
.navline { display:flex; align-items:center; list-style:none; margin:0; padding:0 }
.navline li { display:flex; align-items:center; flex-shrink:0 }
.navline li+li::before { content:"·"; color:var(--sketch); font-weight:700; margin:0 13px }
.navline a { position:relative; display:block; padding:4px 1px; font-size:14.5px; color:var(--text-secondary); text-decoration:none; white-space:nowrap }
.navline a:hover { color:var(--text) }
.navline a[aria-current="page"] { color:var(--text); font-weight:600 }
.navline a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--r-pill); background:var(--accent-soft) }
.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:6px;
  min-height:34px; padding:6px 13px; border:0; border-radius:var(--r-pill);
  background:var(--bg-panel); color:var(--text); font-size:13.5px; line-height:1.5;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.lang svg { width:15px; height:15px; color:var(--text-secondary) }
.lang-caret { color:var(--text-secondary); font-size:11px }
.lang-short { display:none }
.language-list {
  position:absolute; right:0; top:calc(100% + 12px); width:190px;
  margin:0; padding:8px; list-style:none; border-radius:var(--r-lg);
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); z-index:45;
}
.language-list a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); color:var(--text); text-decoration:none }
.language-list a:hover,.language-list a[aria-current] { background:var(--bg-panel); color:var(--text) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border:0; border-radius:var(--r-md); background:var(--bg-panel); color:var(--text) }
.menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.mobile-drawer {
  position:absolute; top:100%; left:0; right:0; z-index:43;
  padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--header-height));
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-float);
}
.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; color:var(--text); text-decoration:none; border-radius:var(--r-md) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel); color:var(--text) }
.drawer-label { margin:20px 16px 8px; color:var(--text-secondary); font-size:13px }
.menu-veil { position:fixed; inset:var(--header-height) 0 0; z-index:30; border:0; background:var(--veil); color:var(--text); cursor:default }

/* 页脚 */
.site-footer { padding-top:72px; padding-bottom:32px; background:var(--bg-panel); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.35fr .8fr 1.2fr .8fr; gap:40px }
.footer-brand p { max-width:290px; margin-top:18px; color:var(--text-secondary); font-size:14px }
.site-footer h2 { font-size:14px; line-height:1.6; margin-bottom:16px; font-weight:700 }
.site-footer ul { list-style:none; padding:0; margin:0 }
.site-footer li { margin-bottom:8px }
.site-footer a:not(.brand) { color:var(--text-secondary); font-size:14px; text-decoration:none }
.site-footer a:hover { color:var(--accent-dark); text-decoration:underline }
.footer-bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text-secondary) }
.footer-bottom p { margin:0 }

/* 无脚本时内容可见；仅观察器启用后隐藏待揭示节点。 */
.reveal { opacity:1; transform:none }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal-ready .reveal { transition:opacity .65s var(--ease-out),transform .65s var(--ease-out) }
.reveal.shown { opacity:1; transform:none }
@media (max-width:1100px) {
  .topbar-inner { gap:14px }
  .navline li+li::before { margin:0 9px }
}
@media (max-width:1000px) {
  .topnav { display:none }
  .menu-toggle { display:inline-flex }
  .header-tools { margin-left:auto }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preview-header .topnav { display:flex; order:4; width:100%; margin:0; overflow-x:auto; padding-bottom:8px }
  .preview-header .topbar-inner { flex-wrap:wrap; padding-top:12px; padding-bottom:12px }
}
@media (min-width:1001px) {
  .mobile-drawer,.menu-veil { display:none !important }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,4vw,30px) }
  .section { padding-top:80px; padding-bottom:80px }
  .grid { grid-template-columns:1fr }
}
@media (max-width:640px) {
  :root { --gutter:18px }
  .topbar-inner { gap:8px }
  .brand { gap:8px }
  .brand-name { font-size:15px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .lang { min-height:40px; padding:8px 11px }
  .footer-grid { grid-template-columns:1fr; gap:28px }
  .panel,.card { padding:24px }
  .tilt,[data-tilt] { transform:none !important }
  pre { padding:18px }
  .section-heading { margin-bottom:32px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}