:root {
  --c-bg:#FFFFFF;
  --c-panel:#F4F4F5;
  --c-block-green:#EEF9DF;
  --c-block-violet:#F1EDFF;
  --c-border:#E6E6E8;
  --c-border-strong:#CFCFD4;
  --c-slash:#C9C9CE;
  --c-accent:#EF4A23;
  --c-accent-dark:#C2371A;
  --c-ink:#111111;
  --c-ink-2:#2B2B2E;
  --c-muted:#6B6B70;
  --c-success:#12A06A;
  --c-warn:#D98E04;
  --c-error:#D92D20;
  --c-violet:#6E4CF5;
  --c-cobalt:#2D6BFF;
  --c-lime:#D4F25A;
  --c-mint:#8EE3C2;
  --c-on-color:#FFFFFF;
  --c-on-color-soft:rgba(255,255,255,.74);
  --c-on-color-line:rgba(255,255,255,.45);
  --c-veil:rgba(255,255,255,.9);
  --c-hair:rgba(17,17,17,.10);
  --c-ink-soft:rgba(17,17,17,.42);
  --c-grid-line:rgba(255,255,255,.16);
  --c-toggle-off:#D9D9DE;
  --c-win-dot:#D4D4D9;
  --c-clear:transparent;
  --c-overlay:rgba(17,17,17,.32);

  --f-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --f-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --weight-normal:400;
  --weight-medium:500;
  --size-body:16px;
  --size-small:14px;
  --size-caption:13px;
  --size-h1:clamp(34px,3.4vw,48px);
  --size-h2:clamp(26px,3vw,40px);
  --size-h3:22px;

  --r-xl:28px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;
  --r-xs:6px;
  --r-line:2px;
  --r-pill:999px;
  --r-round:50%;
  --r-panel:1.25em;
  --r-field:.5em;
  --r-cursor:.45em;
  --r-sticker:1.6em;

  --gutter:64px;
  --width-shell:1440px;
  --width-reading:920px;
  --width-header-content:1280px;
  --nav-h:72px;
  --peek:48px;
  --space-section:104px;
  --space-card:28px;
  --gap-grid:24px;
  --ease-quick:150ms ease;
  --ease-reveal:550ms ease;
  --z-veil:30;
  --z-header:40;
  --z-fab:25;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
html,body { margin:0; }
html.nav-open { overflow:hidden; }
body {
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:var(--size-body);
  font-weight:var(--weight-normal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
button { color:var(--c-ink); }
img,svg,video { max-width:100%; }
img { display:block; height:auto; }
svg { flex-shrink:0; }
button svg,a svg { flex-shrink:0; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--c-accent-dark);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
h1,h2,h3,h4 {
  font-family:var(--f-display);
  font-weight:var(--weight-normal);
  line-height:1.25;
  text-wrap:balance;
}
h1 { font-size:var(--size-h1); line-height:1.16; letter-spacing:-.02em; }
h2 { font-size:var(--size-h2); letter-spacing:-.02em; }
h3 { font-size:var(--size-h3); }
p { margin:0 0 1.25em; }
strong { font-weight:var(--weight-medium); }
code,kbd,pre { font-family:var(--f-mono); }
code { overflow-wrap:anywhere; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  background:var(--c-panel);
  color:var(--c-ink);
  font-size:var(--size-small);
  line-height:1.8;
  overscroll-behavior-inline:contain;
}
pre code { white-space:pre; overflow-wrap:normal; word-break:normal; }
:where(section,article,main,aside,div) { min-width:0; }
:where([id]) { scroll-margin-top:24px; }
.shell,.wrap {
  width:100%;
  max-width:var(--width-shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:var(--width-reading); }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section); }
.section-head { margin-bottom:40px; }
.section-head p { max-width:42em; color:var(--c-muted); }
.section-head h2 { margin:0 0 20px; }
.muted { color:var(--c-muted); }
.keep { 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;
}
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.grid { display:grid; gap:var(--gap-grid); }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cta { display:flex; flex-wrap:wrap; gap:12px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:12px 28px;
  max-width:100%;
  border:1px solid var(--c-clear);
  border-radius:var(--r-md);
  background:var(--c-bg);
  color:var(--c-ink);
  font-size:17px;
  line-height:1.4;
  text-align:center;
  transition:background-color var(--ease-quick),border-color var(--ease-quick);
}
.btn svg { width:18px; height:18px; }
.btn--primary { background:var(--c-ink); color:var(--c-on-color); }
.btn--primary:hover,.btn--primary.is-hover { background:var(--c-ink-2); color:var(--c-on-color); }
.btn--ghost { border-color:var(--c-border-strong); background:var(--c-bg); color:var(--c-ink); }
.btn--ghost:hover,.btn--ghost.is-hover { border-color:var(--c-ink); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-panel); color:var(--c-muted); border-color:var(--c-border); }
.btn.is-focus { outline:2px solid var(--c-accent-dark); outline-offset:3px; }
.text-link,.prose a {
  text-decoration:underline;
  text-decoration-color:var(--c-accent);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.text-link:hover,.prose a:hover { color:var(--c-accent-dark); }
.topbar {
  position:relative;
  z-index:var(--z-header);
  height:var(--nav-h);
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
  color:var(--c-ink);
}
.header-shell {
  width:100%;
  max-width:min(100%,calc(var(--width-header-content) + var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.topbar__row { height:100%; display:flex; align-items:center; gap:32px; }
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:17px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.brand__mark { width:30px; height:30px; flex-shrink:0; }
.brand__sub { color:var(--c-muted); }
.nav { display:flex; align-items:center; min-width:0; margin-left:auto; }
.nav__list { display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.nav__list li { display:flex; align-items:center; }
.nav__list li+li::before { content:"/"; color:var(--c-slash); margin:0 14px; font-size:15px; }
.nav__link { position:relative; font-size:15px; padding:6px 0; white-space:nowrap; transition:color var(--ease-quick); }
.nav__link:hover { color:var(--c-accent-dark); }
.nav__link[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--c-accent); color:var(--c-ink); border-radius:var(--r-line);
}
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.language { position:relative; }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:6px 14px; white-space:nowrap;
  font-size:14px; line-height:1.6;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-muted);
}
.lang:hover { color:var(--c-ink); border-color:var(--c-border-strong); }
.lang__short { display:none; }
.language-menu {
  position:absolute; top:calc(100% + 10px); right:0; width:190px;
  padding:8px; margin:0; list-style:none;
  border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-bg); color:var(--c-ink);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; 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-border); border-radius:var(--r-sm);
  background:var(--c-bg); color:var(--c-ink);
}
.menu-toggle svg { width:22px; height:22px; }
.mobile-nav { display:none; }
.nav-veil {
  position:fixed; inset:var(--nav-h) 0 0; z-index:var(--z-veil);
  border:0; background:var(--c-overlay); color:var(--c-ink);
}
.site-footer {
  padding-top:64px; padding-bottom:32px;
  border-top:1px solid var(--c-border);
  background:var(--c-bg); color:var(--c-ink);
}
.footer-grid { display:grid; grid-template-columns:1.25fr .8fr 1.6fr; gap:48px; }
.footer-brand p { max-width:28em; margin-top:20px; color:var(--c-muted); font-size:14px; }
.footer-heading { margin:0 0 20px; font-size:15px; font-weight:var(--weight-medium); }
.footer-links { display:grid; gap:12px; list-style:none; margin:0; padding:0; font-size:14px; }
.footer-links a:hover,.footer-languages a:hover { color:var(--c-accent-dark); text-decoration:underline; }
.footer-search { grid-template-columns:repeat(2,minmax(0,1fr)); }
.footer-languages { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:48px; font-size:14px; }
.footer-languages [aria-current="true"] { text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:5px; }
.footer-bottom { margin-top:28px; padding-top:24px; border-top:1px solid var(--c-border); font-size:13px; color:var(--c-muted); }
.card,.surface {
  border:1px solid var(--c-border); border-radius:var(--r-xl);
  padding:var(--space-card); background:var(--c-bg); color:var(--c-ink);
}
.card h3 { margin:0 0 16px; }
.card p:last-child { margin-bottom:0; }
.block-green,.block-violet { border-radius:var(--r-xl); overflow-x:clip; }
.block-green { background:var(--c-block-green); color:var(--c-ink); }
.block-violet { background:var(--c-block-violet); color:var(--c-ink); }
.prose { line-height:1.9; }
.prose h2 { margin-top:2.5em; margin-bottom:1em; }
.prose h3 { margin-top:2em; }
.prose :where(ul,ol) { padding-left:1.5em; }
.prose li+li { margin-top:.5em; }
.prose :not(pre)>code { padding:.12em .35em; border-radius:var(--r-xs); background:var(--c-panel); color:var(--c-ink); font-size:.9em; }
.reveal { opacity:1; transform:none; }
.reveal.reveal-pending { opacity:0; transform:translateY(18px); transition:opacity var(--ease-reveal),transform var(--ease-reveal); }
.reveal.shown { opacity:1; transform:none; }
.hero { overflow-x:clip; }
.hero__grid {
  display:grid; grid-template-columns:42fr 58fr; column-gap:24px; align-items:center;
  min-height:640px;
  min-height:max(640px,calc(100svh - var(--nav-h) - var(--peek)));
}
.copy { padding:40px 8px 40px 0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--c-muted); }
.eyebrow__dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-accent); color:var(--c-ink); }
.title { margin:22px 0 34px; font-size:clamp(32px,3.4vw,48px); line-height:1.16; }
.title>span { display:block; }
.lede { margin:30px 0 0; max-width:31em; font-size:17px; line-height:1.75; color:var(--c-muted); }
.lede strong { color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-decoration-thickness:2px; text-underline-offset:5px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.chip,.badge,.tag {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; max-width:100%; padding:4px 13px;
  border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-ink);
  font-size:13px; line-height:1.5; overflow-wrap:anywhere;
}
.platforms { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin-top:34px; padding-top:20px; border-top:1px solid var(--c-border); }
.platforms__label { font-size:13px; color:var(--c-muted); }
.platforms__list { display:flex; flex-wrap:wrap; gap:12px 20px; list-style:none; margin:0; padding:0; }
.platforms__link { display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.platforms__link svg { width:17px; height:17px; }
.platforms__link:hover { color:var(--c-accent-dark); }
@media (max-width:1279px) {
  .topbar__row { gap:20px; }
  .topbar .nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .mobile-nav:not([hidden]) {
    display:block; position:absolute; top:100%; inset-inline:0;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
    overscroll-behavior:contain; padding:20px var(--gutter) 28px;
    border-bottom:1px solid var(--c-border);
    background:var(--c-bg); color:var(--c-ink);
  }
  .mobile-nav ul { list-style:none; margin:0; padding:0; }
  .mobile-nav a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 8px; }
  .mobile-nav a[aria-current="page"] { color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:5px; }
  .mobile-nav__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--c-border); }
}
@media (max-width:1180px) {
  :root { --gutter:40px; }
  .footer-grid { gap:32px; }
}
@media (max-width:900px) {
  :root { --gutter:20px; --space-section:72px; }
  .hero__grid { grid-template-columns:minmax(0,1fr); min-height:0; align-items:start; }
  .copy { padding:36px 0 28px; }
  .title { font-size:clamp(26px,7.4vw,30px); margin:18px 0 26px; }
  .btn { min-height:52px; padding:12px 22px; font-size:16px; }
  .lede { font-size:16px; }
  .grid--3 { grid-template-columns:minmax(0,1fr); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,5vw,30px); }
}
@media (max-width:640px) {
  :root { --gutter:16px; --space-section:56px; --space-card:22px; --gap-grid:16px; }
  .grid--2,.footer-grid { grid-template-columns:minmax(0,1fr); }
  .brand { font-size:14px; gap:7px; }
  .brand__mark { width:26px; height:26px; }
  .brand__sub { display:none; }
  .header-tools { margin-left:auto; gap:7px; }
  .lang { padding:6px 10px; }
  .lang__full { display:none; }
  .lang__short { display:inline; }
  .tilt,[data-tilt],.sticker { transform:none !important; }
  .chips { flex-direction:row; flex-wrap:wrap; }
  .footer-search { grid-template-columns:minmax(0,1fr); }
  pre { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal.reveal-pending { opacity:1; transform:none; }
}