:root {
  --c-bg:#fefefe;
  --c-panel:#f1f1f2;
  --c-panel-2:#ffffff;
  --c-lane:#f6f6f7;
  --c-border:#e3e3e7;
  --c-line:#b9bbc4;
  --c-faint:#8b8d98;
  --c-text:#1c1c21;
  --c-muted:#5d5f6b;
  --c-accent:#ffcf26;
  --c-accent-dark:#8f6b00;
  --c-violet:#5a5cf0;
  --c-violet-soft:#efefff;
  --c-violet-ink:#3d3fc9;
  --c-success:#2f9e5a;
  --c-success-soft:#e4f4ea;
  --c-success-ink:#1f6b3c;
  --c-warn:#e8822a;
  --c-warn-soft:#fff0e2;
  --c-warn-ink:#8b4610;
  --c-error:#e5486a;
  --c-error-soft:#fde7ec;
  --c-error-ink:#a82646;
  --c-note-proxy:#fff1bd;
  --c-note-proxy-edge:#efd06a;
  --c-note-direct:#dff2e6;
  --c-note-direct-edge:#a8d8b9;
  --c-note-reject:#fde2e8;
  --c-note-reject-edge:#f2b3c1;
  --c-clear:transparent;
  --c-veil:rgba(28,28,33,.24);
  --glow-lilac:rgba(132,122,250,.30);
  --glow-peach:rgba(255,176,124,.32);
  --shadow-xs:0 1px 2px rgba(28,28,33,.06);
  --shadow-sm:0 1px 2px rgba(28,28,33,.05),0 8px 18px -10px rgba(28,28,33,.18);
  --shadow-note:0 1px 0 rgba(28,28,33,.04),0 4px 10px -6px rgba(28,28,33,.16);
  --shadow-window:0 1px 3px rgba(28,28,33,.05),0 32px 72px -26px rgba(42,38,96,.24);
  --shadow-cta:0 1px 0 rgba(143,107,0,.26),0 10px 22px -12px rgba(143,107,0,.6);
  --font-display:"Inter","Noto Sans SC","PingFang SC","PingFang TC","Hiragino Sans","Apple SD Gothic Neo",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","PingFang TC","Hiragino Sans","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-xs:4px;
  --r-gate:5px;
  --r-note:6px;
  --r-sm:8px;
  --r-tile:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-mobile:28px;
  --r-xl:40px;
  --r-pill:999px;
  --r-circle:50%;
  --head-h:64px;
  --gutter:32px;
  --reading-width:1120px;
  --section-space:140px;
  --weight-regular:400;
  --weight-heading:500;
  --weight-brand:600;
  --size-body:16px;
  --size-small:13px;
  --size-h1:clamp(34px,3.4vw,48px);
  --size-h2:clamp(26px,3vw,40px);
  --size-h3:22px;
  --tracking-heading:-.02em;
  --duration-fast:.18s;
  --duration-panel:.24s;
}
*,*::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(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none!important }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
svg { flex-shrink:0 }
a { color:inherit; text-underline-offset:.2em }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
:focus-visible { outline:2px solid var(--c-text); outline-offset:3px; border-radius:var(--r-xs) }
::selection { background:var(--c-accent); color:var(--c-text) }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-heading); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:var(--size-h1); line-height:1.12; letter-spacing:var(--tracking-heading); margin:0 0 22px }
h2 { font-size:var(--size-h2); line-height:1.25; letter-spacing:var(--tracking-heading); margin:0 0 24px }
h3 { font-size:var(--size-h3); line-height:1.4; margin:0 0 14px }
p { margin:0 0 20px }
strong,b { font-weight:var(--weight-heading) }
small,.small { font-size:var(--size-small) }
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:20px; border:1px solid var(--c-border);
  border-radius:var(--r-md); background:var(--c-lane); color:var(--c-text);
  line-height:1.8; -webkit-overflow-scrolling:touch;
}
pre code { overflow-wrap:normal; white-space:pre; font-size:13px }
.wrap { width:100%; max-width:calc(var(--reading-width) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); overflow-x:clip }
.section--panel { background:var(--c-panel); color:var(--c-text); border-radius:var(--r-xl) var(--r-xl) 0 0 }
.section--white { background:var(--c-bg); color:var(--c-text) }
.stack > * + * { margin-top:24px }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid-two > *,.feature-detail > *,.footer-grid > *, .prose > *, .card > * { min-width:0 }
.nowrap { white-space:nowrap }
.muted { color:var(--c-muted) }
.center { text-align:center }
.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:16px; top:8px; z-index:50; transform:translateY(-150%); padding:10px 16px; background:var(--c-accent); color:var(--c-text); border-radius:var(--r-sm) }
.skip-link:focus { transform:none }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:10px 22px; border:1px solid var(--c-clear);
  border-radius:var(--r-md); font-family:var(--font-body); font-size:15.5px;
  font-weight:var(--weight-heading); line-height:1.4; text-decoration:none;
  text-align:center; max-width:100%;
  transition:transform var(--duration-fast) ease,box-shadow var(--duration-fast) ease;
}
.btn svg { width:18px; height:18px; flex:none }
.btn--primary { background:var(--c-accent); color:var(--c-text); box-shadow:var(--shadow-cta) }
.btn--ghost { background:var(--c-panel-2); color:var(--c-text); border-color:var(--c-border); box-shadow:var(--shadow-xs) }
.btn--ghost svg { color:var(--c-muted); width:16px; height:16px }
.btn--ink { background:var(--c-text); color:var(--c-panel-2) }
.btn--small { min-height:44px; font-size:14px; padding:10px 18px }
.btn:hover:not(:disabled),.btn.is-hover { transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.btn:active:not(:disabled),.btn.is-pressed { transform:translateY(1px); box-shadow:var(--shadow-xs) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-panel); color:var(--c-muted); border-color:var(--c-border); box-shadow:none; transform:none }
.btn.is-focus { outline:2px solid var(--c-text); outline-offset:3px }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:18px }
.card,.panel {
  min-width:0; padding:28px; background:var(--c-panel-2); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.prose { min-width:0; max-width:100%; line-height:1.9 }
.prose h2 { margin-top:64px; scroll-margin-top:24px }
.prose h3 { margin-top:36px }
.prose li + li { margin-top:8px }
.prose p,.prose li { overflow-wrap:break-word }
.prose blockquote { margin-inline:0 }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(14px) }
.reveal { transition:opacity .55s ease,transform .55s ease }
.reveal.shown { opacity:1; transform:none }

/* Header has its own wider measure; the reading measure is not reused. */
.topbar { position:relative; z-index:30; background:var(--c-bg); color:var(--c-text); border-bottom:1px solid var(--c-border) }
.topbar-in {
  width:100%; max-width:min(100%,calc(1280px + var(--gutter)*2));
  margin-inline:auto; min-height:var(--head-h); padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-weight:var(--weight-brand); font-size:16px; letter-spacing:-.01em; white-space:nowrap; flex-shrink:0 }
.brand-mark { width:30px; height:30px; flex:none; border-radius:var(--r-circle); background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); box-shadow:var(--shadow-xs) }
.brand-mark--placeholder { border-radius:var(--r-sm) }
.tabs { min-width:0; height:var(--head-h); margin-left:auto }
.tabs ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; height:100%; gap:0 }
.tabs li { height:100% }
.tabs a { position:relative; display:flex; align-items:center; height:100%; padding:0 14px; font-size:14.5px; color:var(--c-muted); text-decoration:none; white-space:nowrap; transition:color .2s ease }
.tabs a::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:var(--r-xs) var(--r-xs) 0 0; background:var(--c-accent); transform:scaleX(0); transition:transform .22s ease }
.tabs a:hover { color:var(--c-text) }
.tabs a:hover::after { transform:scaleX(.35) }
.tabs a[aria-current="page"] { color:var(--c-text); font-weight:var(--weight-heading) }
.tabs a[aria-current="page"]::after { transform:scaleX(1) }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0 }
.language-control { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 13px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text); font-size:13.5px; white-space:nowrap; text-decoration:none }
.lang svg { width:15px; height:15px; color:var(--c-muted) }
.lang-short { display:none }
.caret { font-size:11px; color:var(--c-muted) }
.language-menu { position:absolute; top:calc(100% + 12px); right:0; min-width:176px; margin:0; padding:6px; list-style:none; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel-2); color:var(--c-text); box-shadow:var(--shadow-sm); z-index:35 }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); text-decoration:none }
.language-menu a:hover,.language-menu a[aria-current="true"] { 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); border-radius:var(--r-sm); background:var(--c-panel-2); color:var(--c-text) }
.menu-toggle svg { width:22px; height:22px }
.mobile-drawer { position:absolute; top:100%; left:0; right:0; z-index:33; padding:16px var(--gutter) 24px; background:var(--c-panel-2); color:var(--c-text); border-top:1px solid var(--c-border); max-height:calc(100dvh - var(--head-h)); overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--shadow-sm) }
.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 14px; text-decoration:none; border-bottom:1px solid var(--c-border) }
.mobile-drawer a[aria-current] { background:var(--c-note-proxy); color:var(--c-text) }
.drawer-label { margin:24px 14px 8px; color:var(--c-muted); font-size:var(--size-small) }
.nav-veil { position:fixed; inset:0; z-index:20; background:var(--c-veil); color:var(--c-text); border:0; cursor:pointer }
.preview-menu { display:none }
.site-footer { background:var(--c-panel); color:var(--c-text); padding-top:72px; padding-bottom:32px }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px }
.footer-brand p { max-width:360px; margin-top:20px; color:var(--c-muted); font-size:14px }
.footer-heading { margin:0 0 16px; font-size:15px; font-weight:var(--weight-heading) }
.footer-links { list-style:none; margin:0; padding:0 }
.footer-links li + li { margin-top:8px }
.footer-links a { display:inline-block; padding-block:3px; color:var(--c-muted); font-size:14px; text-decoration:none }
.footer-links a:hover { color:var(--c-text); text-decoration:underline }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:40px }
.footer-languages a { padding-block:8px; color:var(--c-muted); font-size:14px }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:24px; padding-top:24px; border-top:1px solid var(--c-border); font-size:13px; color:var(--c-muted) }
.footer-legal { display:flex; gap:20px; flex-wrap:wrap }
@media (max-width:1279px) {
  .topbar-in { gap:16px }
  .topbar .tabs { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .preview-menu { display:block; position:static }
  .preview-menu summary { list-style:none }
  .preview-menu summary::-webkit-details-marker { display:none }
}
@media (min-width:1280px) {
  .mobile-drawer,.nav-veil { display:none!important }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,3.9vw,30px); --gutter:24px }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer-brand { grid-column:1/-1 }
}
@media (max-width:640px) {
  :root { --gutter:16px; --section-space:140px }
  .topbar-in { gap:8px }
  .brand { font-size:14px; gap:8px }
  .brand-mark { width:28px; height:28px }
  .header-tools { gap:8px; margin-left:auto }
  .lang { min-height:44px; padding:6px 11px }
  .lang-full,.lang svg { display:none }
  .lang-short { display:inline }
  .grid-two { grid-template-columns:minmax(0,1fr) }
  .card,.panel { padding:22px }
  .tilt,[data-tilt] { transform:none!important }
  .footer-grid { grid-template-columns:minmax(0,1fr) }
  .footer-brand { grid-column:auto }
  .section--panel { border-radius:var(--r-mobile) var(--r-mobile) 0 0 }
  pre { padding:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}