:root {
  --c-bg:#ffffff;
  --c-panel:#f6f7fb;
  --c-panel-2:#eef0fc;
  --c-line:#e6e7ec;
  --c-ink:#2a2f5c;
  --c-ink-deep:#1a1d3d;
  --c-text:#17181c;
  --c-muted:#6b6f7b;
  --c-ok:#1f9e6b;
  --c-warn:#c98a1a;
  --c-err:#d2423a;
  --c-on-ink:#ffffff;
  --c-halo-a:#dfe3ff;
  --c-halo-b:#ece6ff;
  --c-screen-top:#f4f5fe;
  --c-bezel:#17181c;
  --c-metal:#d6d8e0;
  --c-sheen:rgba(255,255,255,.09);
  --c-camera:#2b2d37;
  --c-camera-ring:#3b3e4b;
  --c-leader:#a8abc3;
  --c-gutter:#b7bac5;
  --c-ink-ring:rgba(42,47,92,.28);
  --c-veil:rgba(23,24,28,.22);
  --c-clear:transparent;

  --sh-near:0 1px 2px rgba(23,24,28,.04);
  --sh-float:0 30px 90px rgba(42,47,92,.06);
  --sh-mid:0 10px 30px rgba(42,47,92,.07);
  --sh-btn:0 1px 0 rgba(255,255,255,.14) inset,0 8px 22px rgba(42,47,92,.20);
  --sh-ipad:0 0 0 1px var(--c-metal),0 2px 6px rgba(23,24,28,.10),0 24px 48px rgba(42,47,92,.10),0 30px 90px rgba(42,47,92,.06);

  --f-display:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans','Apple SD Gothic Neo','Microsoft YaHei',sans-serif;
  --f-body:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans','Apple SD Gothic Neo','Microsoft YaHei',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --tracking-heading:-.03em;
  --tracking-cjk:-.02em;

  --r-xs:6px;
  --r-sm:8px;
  --r-mark:9px;
  --r-shot:10px;
  --r-btn:12px;
  --r-card:24px;
  --r-device:28px;
  --r-screen:8px;
  --r-section:32px;
  --r-device-mobile:20px;
  --r-caret:1px;
  --r-pill:999px;
  --r-round:50%;

  --gutter:24px;
  --content-width:1140px;
  --reading-width:780px;
  --header-width:1280px;
  --header-height:64px;
  --space-section:96px;
  --space-card:32px;
  --gap:24px;
  --duration:.2s;
  --duration-reveal:.6s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ipad-w:min(1080px,92vw);
  --ipad-ratio:1.43;
  --note-w:232px;
  --row-h:35px;
}
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 24px);
}
html.nav-open { overflow:hidden; }
body {
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
img,svg { max-width:100%; }
img { display:block; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:var(--c-ink); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
button,a { -webkit-tap-highlight-color:var(--c-clear); }
:focus-visible {
  outline:2px solid var(--c-ink);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
h1,h2,h3,h4 {
  font-family:var(--f-display);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-heading);
  line-height:1.25;
  text-wrap:balance;
  overflow-wrap:break-word;
}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3 { letter-spacing:var(--tracking-cjk); }
h1 { font-size:clamp(34px,3.2vw,46px); line-height:1.16; }
h2 { font-size:clamp(26px,3vw,36px); }
h3 { font-size:24px; }
p { margin:0 0 1.2em; }
strong { font-weight:var(--weight-medium); }
code,kbd,pre { font-family:var(--f-mono); }
code { overflow-wrap:anywhere; word-break:normal; font-size:.9em; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-panel);
  color:var(--c-text);
  line-height:1.8;
  -webkit-overflow-scrolling:touch;
}
pre code { white-space:pre; overflow-wrap:normal; word-break:normal; font-size:13px; }
figure { margin:0; }
button:disabled,.btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.wrap {
  width:100%;
  max-width:calc(var(--content-width) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading {
  width:100%;
  max-width:calc(var(--reading-width) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section { padding-top:var(--space-section); padding-bottom:var(--space-section); }
.section-head { max-width:740px; margin-bottom:40px; }
.section-head h2 { margin:0 0 18px; }
.section-head p,.muted { color:var(--c-muted); }
.nowrap { white-space:nowrap; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip {
  position:absolute; left:16px; top:-64px; z-index:100;
  padding:8px 14px;
  border-radius:var(--r-sm);
  background:var(--c-ink); color:var(--c-on-ink);
  text-decoration:none; font-size:14px;
}
.skip:focus { top:12px; }
.ico {
  width:20px; height:20px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico .dotfill { fill:currentColor; stroke:none; }
.apple { fill:currentColor; stroke:none; flex-shrink:0; }
.grid-2,.grid-3 { display:grid; gap:var(--gap); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 > *,.grid-3 > *, .prose,.prose > * { min-width:0; }
.card {
  min-width:0;
  padding:var(--space-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  background:var(--c-bg); color:var(--c-text);
  box-shadow:var(--sh-float);
}
.card h3 { margin:0 0 16px; }
.card p:last-child { margin-bottom:0; }
.panel {
  min-width:0;
  padding:48px;
  border-radius:var(--r-section);
  background:var(--c-panel); color:var(--c-text);
}
.gradient-band {
  position:relative;
  overflow-x:clip;
  background:linear-gradient(180deg,var(--c-panel-2),var(--c-bg));
  color:var(--c-text);
}
.decorative-region { position:relative; overflow-x:clip; }
.actions { margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px;
  border:1px solid var(--c-clear);
  border-radius:var(--r-btn);
  font-size:15px; font-weight:var(--weight-medium);
  text-decoration:none; white-space:normal; text-align:center;
  transition:background-color var(--duration) ease,border-color var(--duration) ease,transform var(--duration) ease;
}
.btn .apple { width:17px; height:17px; margin-top:-2px; }
.btn--primary {
  background:var(--c-ink); color:var(--c-on-ink); box-shadow:var(--sh-btn);
}
.btn--primary:hover,.btn--primary.is-hover {
  background:var(--c-ink-deep); color:var(--c-on-ink); transform:translateY(-1px);
}
.btn--ghost {
  background:var(--c-bg); color:var(--c-text);
  border-color:var(--c-line); box-shadow:var(--sh-near);
}
.btn--ghost:hover,.btn--ghost.is-hover {
  border-color:var(--c-gutter); transform:translateY(-1px);
}
.btn__arrow { color:var(--c-muted); font-weight:var(--weight-regular); }
.btn.is-focus { outline:2px solid var(--c-ink); outline-offset:3px; }

.topbar {
  position:sticky; top:0; z-index:60;
  background:var(--c-bg); color:var(--c-text);
  border-bottom:1px solid var(--c-line);
}
.topbar__inner {
  position:relative;
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin:0 auto; height:var(--header-height);
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.brand {
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--c-text);
  font-size:15px; font-weight:var(--weight-medium); letter-spacing:-.01em;
  margin-right:auto; white-space:nowrap; flex-shrink:0;
}
.brand__mark {
  flex-shrink:0; width:32px; height:32px;
  border-radius:var(--r-mark);
}
.brand__mark--placeholder {
  background:linear-gradient(150deg,var(--c-bg),var(--c-panel-2));
  color:var(--c-text);
  box-shadow:inset 0 0 0 1px var(--c-line),var(--sh-near);
}
.mainnav { min-width:0; }
.mainnav ul {
  display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px;
}
.mainnav a {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:var(--r-sm);
  color:var(--c-muted); text-decoration:none; font-size:14px; white-space:nowrap;
  transition:color var(--duration) ease,background-color var(--duration) ease;
}
.mainnav a .ico { width:16px; height:16px; flex-shrink:0; }
.mainnav a:hover,.mainnav a[aria-current="page"] {
  color:var(--c-text); background:var(--c-panel);
}
.mainnav a[aria-current="page"] .ico { color:var(--c-ink); }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.language { position:relative; }
.lang {
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:0 12px;
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  background:var(--c-bg); color:var(--c-text);
  font:inherit; font-size:13.5px; cursor:pointer; white-space:nowrap;
  box-shadow:var(--sh-near);
}
.lang .ico { width:15px; height:15px; color:var(--c-muted); }
.lang__caret { color:var(--c-muted); font-size:11px; }
.lang__short { display:none; }
.language-menu {
  position:absolute; right:0; top:calc(100% + 10px);
  width:200px; padding:8px;
  background:var(--c-bg); color:var(--c-text);
  border:1px solid var(--c-line); border-radius:var(--r-btn);
  box-shadow:var(--sh-mid);
}
.language-menu a {
  display:flex; align-items:center; width:100%; min-height:44px; padding:8px 12px;
  color:var(--c-text); text-decoration:none; border-radius:var(--r-sm);
}
.language-menu a:hover,.language-menu a[aria-current="true"] {
  background:var(--c-panel); color:var(--c-ink);
}
.menu-toggle {
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  background:var(--c-bg); color:var(--c-text);
}
.menu-toggle .ico { width:20px; height:20px; }
.mobile-drawer,.nav-veil { display:none; }

.site-footer {
  position:relative; overflow-x:clip;
  padding-top:72px; padding-bottom:96px;
  border-top:1px solid var(--c-line);
  background:linear-gradient(180deg,var(--c-panel-2),var(--c-bg));
  color:var(--c-text);
}
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px; }
.footer-grid > * { min-width:0; }
.footer-brand p { max-width:360px; margin-top:20px; color:var(--c-muted); font-size:14px; }
.footer-title { margin:0 0 16px; font-size:15px; font-weight:var(--weight-medium); }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links a {
  display:inline-block; padding-top:5px; padding-bottom:5px;
  color:var(--c-muted); text-decoration:none; font-size:14px;
}
.footer-links a:hover { color:var(--c-ink); text-decoration:underline; }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:36px; }
.footer-languages a { color:var(--c-muted); font-size:13px; min-height:32px; padding-top:6px; }
.footer-languages a[aria-current="true"] { color:var(--c-ink); }
.footer-bottom {
  margin-top:24px; padding-top:24px;
  border-top:1px solid var(--c-line);
  color:var(--c-muted); font-size:12px;
}
.footer-bottom p { margin-bottom:8px; }
.prose { line-height:1.9; }
.prose h2 { margin-top:64px; margin-bottom:24px; }
.prose h3 { margin-top:36px; margin-bottom:16px; }
.prose li { margin-bottom:10px; }
.prose img { max-width:100%; height:auto; }
.prose :is(h2,h3,section) { scroll-margin-top:calc(var(--header-height) + 24px); }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(16px); }
html.reveal-ready .reveal {
  transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease);
}
html.reveal-ready .reveal.shown { opacity:1; transform:none; }

@media (max-width:1100px) {
  :root { --note-w:180px; }
}
@media (max-width:1000px) {
  .mainnav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .mobile-drawer {
    position:absolute; top:100%; left:0; right:0; z-index:3;
    padding:16px var(--gutter) 24px;
    border-bottom:1px solid var(--c-line);
    background:var(--c-bg); color:var(--c-text);
    max-height:calc(100dvh - var(--header-height));
    overflow-y:auto; overscroll-behavior:contain;
    box-shadow:var(--sh-mid);
  }
  .mobile-drawer:not([hidden]) { display:block; }
  .mobile-drawer ul { list-style:none; margin:0; padding:0; }
  .mobile-drawer a {
    display:flex; align-items:center; gap:12px; width:100%; min-height:48px;
    padding:12px 16px; border-radius:var(--r-sm);
    color:var(--c-text); text-decoration:none; font-size:15px;
  }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] {
    background:var(--c-panel); color:var(--c-ink);
  }
  .mobile-drawer__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--c-line); }
  .mobile-drawer__label { padding-inline:16px; font-size:12px; color:var(--c-muted); }
  .nav-veil:not([hidden]) {
    display:block; position:fixed;
    top:var(--header-height); right:0; bottom:0; left:0; z-index:1;
    border:0; padding:0; width:100%;
    background:var(--c-veil); color:var(--c-text);
  }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:768px) {
  :root { --space-section:64px; --space-card:24px; }
  h1 { font-size:clamp(24px,5vw,30px); }
  .grid-3 { grid-template-columns:1fr; }
  .panel { padding:28px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; --gap:20px; }
  .wrap,.reading { padding-inline:var(--gutter); }
  .grid-2,.footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-grid { gap:32px; }
  .topbar__inner { gap:10px; }
  .brand { gap:8px; font-size:13px; }
  .brand__mark { width:28px; height:28px; }
  .header-tools { margin-left:auto; gap:6px; }
  .lang { min-height:44px; padding-inline:9px; gap:5px; }
  .lang__full { display:none; }
  .lang__short { display:inline; }
  .lang .ico { display:none; }
  .panel { padding:24px 20px; }
  .tilt,[data-tilt] { transform:none !important; }
  .site-footer { padding-top:56px; padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}
@supports not (overflow:clip) {
  .decorative-region,.gradient-band,.site-footer { overflow-x:hidden; }
}