:root {
  --bg:#f8f9f4;
  --panel:#ffffff;
  --panel-2:#ecede6;
  --border:#dfe1d8;
  --line-strong:#c4c7bb;
  --accent:#3e5c9a;
  --accent-dark:#2b4170;
  --text:#141513;
  --text-hover:#2c2e2a;
  --muted:#5d6058;
  --success:#3f7a4f;
  --warn:#a8741a;
  --error:#b3261e;
  --tone-mist:#8ea6d4;
  --tone-olive:#a7a67c;
  --tone-wine:#6b1d1a;
  --ink-mist:#2c3c61;
  --sheet-mist:#7a92c2;
  --on-ink:#eef1f8;
  --on-ink-soft:#b5c3e0;
  --on-ink-line:#6f83ad;
  --ink-key:#b9cdf5;
  --ink-olive:#49452f;
  --sheet-olive:#939267;
  --on-olive:#f0ebcb;
  --on-olive-soft:#c3be97;
  --on-olive-line:#7d7857;
  --paper:#fdfdfa;
  --sheet-wine:#561613;
  --wine-soft:#9a5a55;
  --wine-line:#e4d3cf;
  --grid-line:#e6e8e0;
  --mask-solid:#000000;
  --clear:transparent;
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Apple SD Gothic Neo','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --font-serif:'Iowan Old Style','Palatino Linotype','Georgia','Times New Roman',serif;
  --size-body:16px;
  --size-small:13px;
  --size-h1:clamp(34px,3.4vw,48px);
  --size-h2:clamp(26px,3vw,38px);
  --size-h3:22px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --r-pill:999px;
  --r-slab:32px;
  --r-panel:36px;
  --r-card:24px;
  --r-sheet:4px;
  --r-shot:10px;
  --r-mark:50%;
  --gutter:56px;
  --space-section:160px;
  --space-card:28px;
  --wrap-width:1120px;
  --reading-width:760px;
  --header-width:1280px;
  --header-height:64px;
  --card-w:580px;
  --card-h:470px;
  --print-w:340px;
  --print-h:340px;
  --duration-fast:150ms;
  --duration-reveal:550ms;
  --ease-standard:cubic-bezier(.2,.7,.2,1);
  --layer-header:30;
  --layer-drawer:32;
  --layer-floating:40;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.nav-open { overflow:hidden; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden] { display:none !important; }
img,svg { max-width:100%; }
img { display:block; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { color:var(--accent-dark); }
button,a { -webkit-tap-highlight-color:var(--clear); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent); color:var(--panel); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-bold); line-height:1.2; text-wrap:balance; }
h1 { font-size:var(--size-h1); line-height:1.1; letter-spacing:-.02em; }
h2 { font-size:var(--size-h2); letter-spacing:-.02em; }
h3 { font-size:var(--size-h3); letter-spacing:-.01em; }
p,li,dd { overflow-wrap:break-word; }
h1,h2,h3,p,figure { margin-top:0; }
.nowrap { white-space:nowrap; }
.muted { color:var(--muted); }
.text-link { color:var(--accent); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link { position:absolute; left:var(--gutter); top:8px; z-index:var(--layer-floating); padding:12px 20px; background:var(--text); color:var(--bg); border-radius:var(--r-pill); }
.skip-link:not(:focus) { width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
.wrap { width:100%; max-width:calc(var(--wrap-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.reading { max-width:calc(var(--reading-width) + var(--gutter) * 2); }
.section { padding-top:var(--space-section); }
.section:last-child { padding-bottom:var(--space-section); }
.section-heading { max-width:720px; margin:0 auto 48px; text-align:center; }
.section-heading p { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid > *, .split > *, .footer-grid > *, .feature-stage > *, .plat-grid > * { min-width:0; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.panel { padding:48px; border-radius:var(--r-panel); background:var(--panel-2); color:var(--text); }
.card { padding:var(--space-card); border-radius:var(--r-card); background:var(--panel); color:var(--text); }
.card h3 { margin-bottom:12px; }
.card p:last-child { margin-bottom:0; }
.prose { min-width:0; }
.prose h2 { margin-top:80px; margin-bottom:24px; }
.prose h3 { margin-top:40px; }
.prose p,.prose ul,.prose ol { margin-bottom:24px; }
.prose li + li { margin-top:8px; }
.prose :is(h2,h3,h4,[id]) { scroll-margin-top:32px; }
code,kbd,pre { font-family:var(--font-mono); }
code { font-size:.88em; overflow-wrap:anywhere; }
:not(pre) > code { color:var(--accent-dark); }
pre {
  max-width:100%; min-width:0; overflow-x:auto; padding:24px;
  border-radius:var(--r-shot); background:var(--panel-2); color:var(--text);
  line-height:1.8; overscroll-behavior-x:contain;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
.btn-solid,.btn-line,.btn-store {
  min-height:52px; padding:12px 28px; display:inline-flex; justify-content:center;
  align-items:center; gap:10px; border-radius:var(--r-pill);
  font-size:var(--size-body); font-weight:var(--weight-semibold);
  line-height:1.35; letter-spacing:-.005em; text-decoration:none; text-align:center;
  border:1px solid var(--clear); max-width:100%;
  transition:background-color var(--duration-fast),border-color var(--duration-fast);
}
.btn-solid { background:var(--text); color:var(--bg); }
.btn-solid:hover,.btn-solid.is-hover { background:var(--text-hover); color:var(--bg); }
.btn-line { background:var(--clear); border-color:var(--line-strong); color:var(--text); }
.btn-line:hover,.btn-line.is-hover { border-color:var(--text); color:var(--text); }
.btn-solid svg,.btn-line svg,.btn-store svg { flex-shrink:0; width:18px; height:18px; }
button:disabled,.btn-solid[aria-disabled="true"],.btn-line[aria-disabled="true"] { cursor:not-allowed; background:var(--panel-2); color:var(--muted); border-color:var(--border); }
.is-focus { outline:2px solid var(--accent); outline-offset:3px; }
#site-header { position:relative; z-index:var(--layer-header); }
.masthead {
  width:100%; max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  min-height:var(--header-height); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  position:relative;
}
.mast-brand {
  display:inline-flex; align-items:center; gap:11px; flex-shrink:0;
  font-family:var(--font-display); font-size:var(--size-body); font-weight:var(--weight-bold);
  letter-spacing:-.01em; color:var(--text); text-decoration:none;
}
.mast-mark { width:32px; height:32px; flex-shrink:0; border-radius:var(--r-mark); }
.mast-mark-placeholder { background:var(--panel); color:var(--text); border:1px solid var(--border); display:grid; place-items:center; }
.mast-mark-placeholder::after { content:""; width:12px; height:12px; border-radius:var(--r-sheet); background:var(--tone-mist); color:var(--text); }
.mast-nav { min-width:0; }
.mast-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:30px; }
.mast-nav a { display:block; padding-block:12px; color:var(--muted); text-decoration:none; font-size:15px; font-weight:var(--weight-medium); white-space:nowrap; }
.mast-nav a:hover,.mast-nav a[aria-current="page"] { color:var(--text); }
.mast-nav a[aria-current="page"] { font-weight:var(--weight-bold); }
.mast-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang-picker { position:relative; }
.mast-lang {
  padding:7px 16px; min-height:36px; white-space:nowrap;
  background:var(--clear); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-pill); font-size:14px; font-weight:var(--weight-medium);
}
.mast-lang:hover { border-color:var(--line-strong); }
.lang-short { display:none; }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0; width:190px;
  padding:8px; margin:0; list-style:none; border:1px solid var(--border);
  border-radius:var(--r-shot); background:var(--panel); color:var(--text);
  z-index:var(--layer-drawer);
}
.lang-menu a { display:block; min-height:44px; padding:10px 14px; text-decoration:none; color:var(--text); border-radius:var(--r-sheet); }
.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--panel-2); color:var(--text); }
.mast-toggle { display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center; background:var(--clear); color:var(--text); border:1px solid var(--border); border-radius:var(--r-pill); }
.mast-toggle svg { width:20px; height:20px; }
.mast-drawer { display:none; }
.site-footer { margin-top:var(--space-section); padding-top:64px; padding-bottom:40px; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr 1fr; gap:64px; }
.footer-brand p { margin-top:24px; color:var(--muted); max-width:360px; }
.footer-title { margin-bottom:20px; font-size:var(--size-body); font-weight:var(--weight-semibold); }
.footer-list { list-style:none; margin:0; padding:0; }
.footer-list a { display:inline-block; padding-block:6px; color:var(--muted); text-decoration:none; }
.footer-list a:hover { color:var(--accent); }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:48px; }
.footer-languages a { padding-block:8px; color:var(--muted); text-decoration:none; }
.footer-languages a[aria-current="true"] { color:var(--text); font-weight:var(--weight-bold); }
.footer-bottom { margin-top:32px; padding-top:24px; border-top:1px solid var(--border); color:var(--muted); font-size:var(--size-small); }
.reveal { opacity:1; transform:none; }
.reveal.is-observed { opacity:0; transform:translateY(16px); transition:opacity var(--duration-reveal) var(--ease-standard),transform var(--duration-reveal) var(--ease-standard); }
.reveal.shown { opacity:1; transform:none; }
.decorated,[data-hero-visual] { position:relative; overflow-x:clip; }
@media (max-width:1280px) {
  .masthead { gap:20px; }
  .mast-nav ul { gap:20px; }
}
@media (max-width:1180px) {
  :root { --gutter:32px; --card-w:46vw; --print-w:310px; }
  .mast-nav { display:none; }
  .mast-tools { margin-left:auto; }
  .mast-toggle { display:inline-flex; }
  .mast-drawer:not([hidden]) {
    display:block; position:absolute; top:100%; left:0; right:0;
    max-height:calc(100dvh - var(--header-height)); overflow-y:auto;
    overscroll-behavior:contain; padding:20px var(--gutter) 32px;
    background:var(--bg); color:var(--text); border-bottom:1px solid var(--border);
    z-index:var(--layer-drawer);
  }
  .mast-drawer ul { list-style:none; padding:0; margin:0; }
  .mast-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 8px; color:var(--text); text-decoration:none; }
  .mast-drawer a[aria-current] { font-weight:var(--weight-bold); color:var(--accent); }
  .drawer-languages { border-top:1px solid var(--border); margin-top:16px !important; padding-top:16px !important; }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,5vw,30px); }
  .grid,.split { grid-template-columns:minmax(0,1fr); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
  .footer-brand { grid-column:1 / -1; }
  .panel { padding:28px; }
}
@media (max-width:640px) {
  :root { --gutter:20px; --space-card:24px; --card-w:300px; --print-w:264px; --print-h:330px; --card-h:400px; }
  .wrap { padding-inline:var(--gutter); }
  .masthead { gap:8px; min-height:var(--header-height); }
  .mast-brand { font-size:12px; gap:7px; flex-shrink:1; min-width:0; }
  .mast-brand > span { min-width:0; overflow-wrap:anywhere; }
  .mast-mark { width:28px; height:28px; }
  .mast-lang { padding-inline:12px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .mast-tools { gap:6px; margin-left:auto; }
  .tilt,.tilt-left,.tilt-right,[data-tilt] { transform:none !important; }
  .panel { padding:24px; }
  pre { padding:18px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-brand { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal.is-observed { opacity:1; transform:none; }
}