:root {
  --bg:#F7F8FA;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#EEF1F6;
  --border:#E3E7EE;
  --border-strong:#D3D9E3;
  --accent:#1B62F2;
  --accent-dark:#0F3FB8;
  --accent-soft:#E9F0FE;
  --accent-ring:rgba(27,98,242,.28);
  --accent-glow:rgba(27,98,242,.20);
  --accent-glow-mid:rgba(27,98,242,.07);
  --accent-glow-0:rgba(27,98,242,0);
  --text:#0E1220;
  --text-muted:#5A6475;
  --text-faint:#8C95A5;
  --on-accent:#FFFFFF;
  --success:#22A06B;
  --success-text:#13754C;
  --success-soft:#E2F4EB;
  --success-ring:rgba(34,160,107,.18);
  --warn:#D98E04;
  --warn-text:#805200;
  --warn-soft:#FFF3D7;
  --error:#D9363E;
  --error-text:#AF222B;
  --error-soft:#FBE8E9;
  --ink-panel:#0A1328;
  --term-bg:#0D1424;
  --term-line:#1E2A44;
  --term-bar:#F1F3F7;
  --term-text:#C9D4E8;
  --term-dim:#8D9DBA;
  --term-key:#6F9CFF;
  --term-cyan:#86D9EA;
  --term-prompt:#4FCB94;
  --dot-r:#FF5F57;
  --dot-y:#FEBC2E;
  --dot-g:#28C840;
  --veil:rgba(10,19,40,.38);
  --clear:transparent;

  --font-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --radius-xl:24px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --radius-pill:999px;
  --radius-round:50%;

  --shadow-card:0 1px 2px rgba(14,18,32,.04),0 10px 28px -14px rgba(14,18,32,.12);
  --shadow-card-hover:0 1px 2px rgba(14,18,32,.05),0 18px 36px -16px rgba(14,18,32,.18);
  --shadow-term:0 2px 6px rgba(10,19,40,.08),0 34px 64px -26px rgba(10,19,40,.42);
  --shadow-btn:0 1px 1px rgba(15,63,184,.20),0 8px 18px -8px rgba(27,98,242,.55);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.18);

  --nav-h:68px;
  --peek:44px;
  --wrap:1320px;
  --reading:840px;
  --gutter:clamp(20px,4vw,60px);
  --section-space:88px;
  --card-pad:28px;
  --space-xs:6px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:32px;
  --space-xl:48px;
  --text-sm:14px;
  --text-base:16px;
  --text-lead:20px;
  --text-h1:clamp(34px,3.05vw,44px);
  --text-h2:clamp(26px,2.5vw,36px);
  --text-h3:22px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --motion-fast:.18s;
  --motion-base:.25s;
  --motion-reveal:.6s;
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main { position:relative; min-width:0; overflow-x:clip }
section { min-width:0 }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button,svg,.brand-mark { flex-shrink:0 }
button:disabled { cursor:not-allowed }
ul,ol { margin:0; padding:0 }
p,h1,h2,h3,h4,figure,blockquote { margin:0 }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:var(--weight-normal);
  line-height:1.25;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1 { font-size:var(--text-h1) }
h2 { font-size:var(--text-h2) }
h3 { font-size:var(--text-h3) }
strong { font-weight:var(--weight-strong) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; white-space:pre; tab-size:2 }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre }
[hidden] { display:none !important }
::selection { background:var(--accent-soft); color:var(--accent-dark) }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-xs) }
.wrap {
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:var(--reading) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-white { background:var(--bg-panel); color:var(--text) }
.section-ink { background:var(--ink-panel); color:var(--term-text) }
.section-head { margin-bottom:var(--space-lg) }
.section-head p { margin-top:var(--space-sm); max-width:44em; color:var(--text-muted) }
.grid { display:grid; gap:var(--space-md) }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > *, .bento > *, .mini > *, .footer-grid > *, .topbar-in > * { min-width:0 }
.stack > * + * { margin-top:var(--space-md) }
.nowrap { white-space:nowrap }
.muted { color:var(--text-muted) }
.t-accent,.eyebrow { color:var(--accent) }
.eyebrow { font-size:13.5px }
.icon { width:20px; height:20px; flex:none }
.skip-link {
  position:fixed; top:8px; left:var(--gutter); z-index:100;
  padding:12px 18px; background:var(--bg-panel); color:var(--accent-dark);
  border-radius:var(--radius-sm); transform:translateY(-150%);
}
.skip-link:focus { transform:none }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:10px 22px;
  max-width:100%;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.4;
  font-weight:var(--weight-medium);
  text-align:center;
  border:1px solid var(--clear);
  border-radius:var(--radius-sm);
  transition:transform var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
}
.btn svg { width:17px; height:17px; flex:none }
.btn-primary {
  color:var(--on-accent); background:var(--accent); border-color:var(--accent-dark);
  box-shadow:var(--inset-hi),var(--shadow-btn);
}
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent); transform:translateY(-1px) }
.btn-ghost { color:var(--text); background:var(--bg-panel); border-color:var(--border-strong) }
.btn-ghost:hover,.btn-ghost.is-hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px) }
.btn-ghost svg { transition:transform var(--motion-fast) ease }
.btn-ghost:hover svg { transform:translateX(3px) }
.btn:active,.btn.is-pressed { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] {
  background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border);
  box-shadow:none; transform:none;
}
.btn.is-focus { outline:2px solid var(--accent); outline-offset:3px }
.text-link { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px }

.topbar { position:relative; z-index:30; height:var(--nav-h); background:var(--bg); color:var(--text); border-bottom:1px solid var(--border) }
.topbar-in { height:100%; display:flex; align-items:center; gap:28px }
.header-wrap { width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter) }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-family:var(--font-display); font-size:16px; font-weight:var(--weight-medium); letter-spacing:-.005em; color:var(--text) }
.brand-mark { width:28px; height:28px; flex:none }
.mainnav { margin-left:auto; min-width:0 }
.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:"·"; margin-inline:14px; color:var(--text-faint); font-weight:var(--weight-medium) }
.navline a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--text-muted); padding-block:6px; transition:color var(--motion-fast) ease }
.navline a:hover,.navline a[aria-current="page"] { color:var(--text) }
.navline a[aria-current="page"] { font-weight:var(--weight-medium) }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:6px 12px; font-size:14px; color:var(--text); background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm) }
.lang svg { width:15px; height:15px; color:var(--text-muted) }
.lang-caret { font-size:11px; color:var(--text-muted) }
.lang-short { display:none }
.language-menu {
  position:absolute; right:0; top:calc(100% + 10px); z-index:5; min-width:180px; padding:8px;
  list-style:none; background:var(--bg-panel); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card-hover);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--radius-xs) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--accent-soft); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); background:var(--bg-panel) }
.menu-toggle svg { width:20px; height:20px }
.mobile-drawer { display:none }
.menu-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:1; border:0; background:var(--veil); color:var(--text) }

.card,.panel {
  padding:var(--card-pad);
  background:var(--bg-panel); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
}
.card { transition:transform var(--motion-base) ease,box-shadow var(--motion-base) ease }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card-hover) }
.panel-quiet { background:var(--bg-panel-2); color:var(--text) }
.panel-ink { background:var(--ink-panel); color:var(--term-text); border-color:var(--term-line) }
.panel-ink p { color:var(--term-text) }
.prose { min-width:0; line-height:1.85 }
.prose > * + *, .article-body > * + * { margin-top:var(--space-md) }
.prose h2,.article-body h2 { margin-top:var(--space-xl); margin-bottom:var(--space-md); scroll-margin-top:24px }
.prose h3,.article-body h3 { margin-top:var(--space-lg); margin-bottom:var(--space-sm) }
.prose p,.article-body p { overflow-wrap:break-word }
.prose ul,.prose ol,.article-body ul,.article-body ol { padding-left:1.5em }
.prose li + li { margin-top:8px }
.prose a,.article-body a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.prose :not(pre) > code,.article-body :not(pre) > code { background:var(--bg-panel-2); color:var(--text); padding:2px 5px; border-radius:var(--radius-xs); font-size:.9em }
.prose pre,.article-body pre { padding:20px; border:1px solid var(--term-line); border-radius:var(--radius-md); background:var(--term-bg); color:var(--term-text); font-size:13px }
.prose pre code,.article-body pre code { background:var(--clear); color:inherit; padding:0 }
.reveal { opacity:1; transform:none }
.reveal-enabled .reveal:not(.shown) { opacity:0; transform:translateY(16px) }
.reveal-enabled .reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease }

.site-footer { border-top:1px solid var(--border); background:var(--bg-panel-2); color:var(--text); padding-top:56px; padding-bottom:28px }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr 1.4fr .8fr; gap:36px }
.footer-brand p { margin-top:16px; max-width:28em; color:var(--text-muted); font-size:14px }
.footer-heading { font-size:16px; font-weight:var(--weight-medium); margin-bottom:16px }
.footer-links { list-style:none; display:grid; gap:8px }
.footer-links a { display:inline-block; padding-block:3px; color:var(--text-muted); font-size:14px; overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent-dark) }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:22px; border-top:1px solid var(--border-strong); font-size:13px; color:var(--text-muted) }

@media (min-width:1440px) {
  .wrap { max-width:calc(var(--wrap) + var(--gutter) * 2) }
}
@media (max-width:1279px) {
  .mainnav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-drawer {
    position:absolute; top:var(--nav-h); left:0; right:0; z-index:2;
    padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto; overscroll-behavior:contain;
    background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border);
  }
  .mobile-drawer:not([hidden]) { display:block }
  .mobile-drawer ul { list-style:none }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 14px; border-radius:var(--radius-xs); color:var(--text) }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--accent-soft); color:var(--accent-dark) }
  .drawer-languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }
}
@media (max-width:900px) {
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  :root { --text-h1:clamp(24px,7vw,30px); --section-space:56px; --card-pad:22px }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .topbar-in { gap:12px }
  .brand { font-size:14px; gap:7px }
  .brand-mark { width:25px; height:25px }
  .header-tools { margin-left:auto; gap:6px }
  .lang { padding-inline:9px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .grid-2,.grid-3,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .tilt,[data-tilt] { transform:none !important }
  .footer-grid { gap:28px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  .reveal-enabled .reveal:not(.shown) { opacity:1; transform:none }
  .card:hover,.btn:hover { transform:none }
}