:root {
  --bg:#3D3D3C;
  --bg-panel:#2F2F2E;
  --bg-panel-2:#3E3D3B;
  --border:#545453;
  --accent:#F4C02E;
  --accent-dark:#C99A12;
  --accent-soft:rgba(244,192,46,.34);
  --text:#F2F2F0;
  --text-muted:#A9A9A6;
  --success:#5FBF7A;
  --warn:#E8A33D;
  --error:#E5604F;
  --ink:#1F1F1E;
  --ink-soft:#4A4A48;
  --ink-muted:#6B6B69;
  --ink-faint:#8E8E8B;
  --paper:#FFFFFF;
  --line-light:#E4E4E2;
  --line-mid:#D2D2CF;
  --sym:#A6A6A3;
  --device-black:#151515;
  --device-edge:#3A3A39;
  --screen:#FFFFFF;
  --screen-side:#F4F4F3;
  --screen-hi:#E7E7E5;
  --screen-line:#F0F0EE;
  --code-key:#3A3A39;
  --code-val:#8B8B88;
  --code-num:#B9B9B6;
  --track:#E2E2E0;
  --knob:#FFFFFF;
  --alu:#DADAD8;
  --alu-edge:#C3C3C0;
  --keycap:#FCFCFB;
  --key-ink:#5C5C5A;
  --dot-close:#EC6A5E;
  --dot-min:#F4BF4F;
  --dot-max:#61C554;
  --tab-active:#4A4A49;
  --float-paper:rgba(255,255,255,.92);
  --veil:rgba(0,0,0,.32);
  --transparent:transparent;
  --shadow-near:0 2px 6px rgba(0,0,0,.08);
  --shadow-far:0 30px 60px rgba(0,0,0,.14);
  --shadow-far-lg:0 34px 70px rgba(0,0,0,.2);
  --shadow-btn:0 10px 24px rgba(0,0,0,.08);
  --knob-shadow:0 1px 3px rgba(0,0,0,.2);
  --key-shadow:0 1px 0 #BEBEBB,0 1.5px 2px rgba(0,0,0,.1);
  --r-device:36px;
  --r-phone:44px;
  --r-phone-screen:35px;
  --r-card:24px;
  --r-card-sm:20px;
  --r-card-lg:28px;
  --r-btn:14px;
  --r-small:12px;
  --r-field:11px;
  --r-item:9px;
  --r-focus:6px;
  --r-dot:50%;
  --r-tiny:3px;
  --r-pill:999px;
  --f-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --nav-h:72px;
  --strip-h:92px;
  --gutter:56px;
  --wrap:1320px;
  --reading:860px;
  --section-space:88px;
  --ease:cubic-bezier(.2,.65,.3,1);
  --fast:180ms;
  --reveal-time:550ms;
}
*,*::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;font-family:var(--f-body);font-size:16px;line-height:1.75;color:var(--text);background:var(--bg-panel-2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg {max-width:100%;vertical-align:middle}
img {height:auto}
button,input,select,textarea {font:inherit}
button,a {-webkit-tap-highlight-color:var(--transparent)}
button {cursor:pointer}
a {color:inherit;text-underline-offset:.22em}
a:hover {text-decoration-thickness:2px}
:focus-visible {outline:2px solid currentColor;outline-offset:4px;border-radius:var(--r-focus)}
[hidden] {display:none!important}
h1,h2,h3 {font-family:var(--f-display);font-weight:800;line-height:1.25;letter-spacing:-.012em;text-wrap:balance}
h1 {font-size:clamp(34px,3.3vw,48px)}
h2 {font-size:clamp(26px,2.5vw,36px)}
h3 {font-size:22px}
p {margin:0 0 1.2em}
code,kbd,pre {font-family:var(--f-mono)}
code {overflow-wrap:anywhere}
pre {max-width:100%;overflow-x:auto;margin:20px 0;padding:24px;border-radius:var(--r-small);background:var(--screen-side);color:var(--code-key);font-size:13px;line-height:1.8;tab-size:2}
pre code {overflow-wrap:normal;word-break:normal;white-space:pre}
svg,.dot,.ic,.app-icon {flex-shrink:0}
.wrap {width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.reading {width:100%;max-width:calc(var(--reading) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.section {padding-top:var(--section-space);padding-bottom:var(--section-space)}
.section-dark {background:var(--bg);color:var(--text)}
.section-light {background:var(--bg-panel-2);color:var(--text)}
.section-white {background:var(--paper);color:var(--ink)}
.decorated,.hero {overflow-x:clip;position:relative}
.grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid>* , .feature-browser>* , .footer-grid>* {min-width:0}
.flow>*+* {margin-top:24px}
.keep {white-space:nowrap}
.muted {color:var(--ink-muted)}
.section-dark .muted {color:var(--text-muted)}
.eyebrow {margin:0;font:500 12.5px var(--f-mono);color:var(--ink-muted);letter-spacing:.02em}
.section-dark .eyebrow,.hero .eyebrow,.hero .plats-label,.section-light > .wrap > .muted {color:var(--text-muted)}
.hero .btn-ghost {color:var(--text);border-color:var(--text)}
.hero .btn-ghost:hover {background:var(--text);color:var(--ink)}
body > main.prose > .muted,body > main > .prose > .muted {color:var(--text-muted)}
.lead {font-size:20px;line-height:1.75}
.prose {min-width:0}
.prose h2 {margin-top:2.4em}
.prose h3 {margin-top:1.8em}
.prose p,.prose li {overflow-wrap:break-word}
.prose a {font-weight:600}
.prose :not(pre)>code {padding:.12em .35em;background:var(--screen-hi);color:var(--ink-soft);border-radius:var(--r-tiny);font-size:.88em}
.prose img {max-width:100%}
.card,.panel {min-width:0;padding:28px;border:1px solid var(--line-light);border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-near),var(--shadow-far)}
.card h3,.panel h3 {margin:0 0 14px}
.card p:last-child,.panel p:last-child {margin-bottom:0}
.panel-dark {background:var(--bg-panel);color:var(--text);border-color:var(--border)}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border:1.5px solid var(--transparent);border-radius:var(--r-btn);font:700 16px/1.4 var(--f-body);text-align:center;text-decoration:none;transition:background-color var(--fast),color var(--fast),border-color var(--fast);max-width:100%}
.btn svg {width:17px;height:17px}
.btn-primary {background:var(--accent);color:var(--ink);box-shadow:var(--shadow-near),var(--shadow-btn)}
.btn-primary:hover,.btn-primary.is-hover {background:var(--accent-dark);color:var(--ink)}
.btn-ghost {background:var(--transparent);color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover,.btn-ghost.is-hover {background:var(--ink);color:var(--paper)}
.section-dark>.wrap>.btn-ghost,.section-light>.wrap>.ctas>.btn-ghost,.panel-dark .btn-ghost {color:var(--text);border-color:var(--text)}
.btn-sm {min-height:44px;padding:10px 20px;font-size:15px;border-radius:var(--r-small)}
.btn:disabled,.btn[aria-disabled="true"] {background:var(--line-light);color:var(--ink-muted);border-color:var(--line-mid);box-shadow:none;cursor:not-allowed}
.btn.is-focus {outline:2px solid var(--ink);outline-offset:4px}
.ctas {display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.chips {display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 26px;padding:0}
.chip,.badge,.tag {display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:4px 12px;border:1px solid var(--line-light);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-muted);font-size:12.5px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.chip {min-height:28px}
.chip code {font:400 12px var(--f-mono);color:var(--ink-soft)}
.topbar,#site-header {position:relative;z-index:50;background:var(--paper);color:var(--ink)}
.topbar-in {height:var(--nav-h);max-width:min(100%,calc(1280px + var(--gutter) * 2));margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:36px}
.brand {display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0;color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;line-height:1.4;letter-spacing:-.005em}
.brand img {width:34px;height:34px;flex-shrink:0}
.tabs {min-width:0}
.tabs ul {display:flex;align-items:center;list-style:none;margin:0;padding:0;height:var(--nav-h)}
.tab {position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:44px;padding:0 18px;color:var(--ink-muted);text-decoration:none;font-size:15.5px;font-weight:500;white-space:nowrap}
.tab::after {content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:var(--r-tiny) var(--r-tiny) 0 0;background:var(--line-mid);transform:scaleX(0);transition:transform var(--fast) var(--ease)}
.tab:hover {color:var(--ink)}
.tab:hover::after {transform:scaleX(1)}
.tab.is-current {color:var(--ink);font-weight:650}
.tab.is-current::after {background:var(--accent);transform:scaleX(1)}
.header-tools {display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.language {position:relative}
.lang {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 14px;font:500 14px var(--f-body);color:var(--ink-muted);background:var(--transparent);border:1px solid var(--line-light);border-radius:var(--r-pill);white-space:nowrap}
.lang svg {width:15px;height:15px}
.lang-short {display:none}
.language-menu {position:absolute;right:0;top:calc(100% + 12px);width:190px;padding:8px;list-style:none;margin:0;border:1px solid var(--line-light);border-radius:var(--r-small);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-near),var(--shadow-far)}
.language-menu a {display:flex;align-items:center;min-height:44px;padding:8px 12px;text-decoration:none;border-radius:var(--r-focus)}
.language-menu a:hover,.language-menu [aria-current] {background:var(--screen-hi);color:var(--ink)}
.menu-toggle {display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line-light);border-radius:var(--r-small);background:var(--paper);color:var(--ink)}
.menu-toggle svg {width:22px;height:22px}
.mobile-drawer {display:none}
.menu-veil {position:fixed;inset:var(--nav-h) 0 0;z-index:1;border:0;background:var(--veil);color:var(--paper)}
.site-footer {padding-top:64px;padding-bottom:28px;background:var(--bg-panel);color:var(--text)}
.footer-grid {display:grid;grid-template-columns:1.25fr .8fr 1.5fr .8fr;gap:40px}
.site-footer .brand {color:var(--text);margin-bottom:20px}
.site-footer p {font-size:14px;color:var(--text-muted)}
.site-footer h2 {font-size:14px;font-weight:650;margin:0 0 18px;color:var(--text)}
.footer-links {list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer-links a {font-size:14px;color:var(--text-muted);text-decoration:none;overflow-wrap:anywhere}
.footer-links a:hover {color:var(--text);text-decoration:underline}
.footer-bottom {display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)}
.footer-bottom a {margin-left:auto}
.reveal {opacity:1;transform:none}
.reveal-pending .reveal:not(.shown) {opacity:0;transform:translateY(16px)}
.reveal-pending .reveal {transition:opacity var(--reveal-time) var(--ease),transform var(--reveal-time) var(--ease)}
@media (max-width:1279px) {
  .topbar-in {gap:20px}
  .desktop-nav {display:none}
  .menu-toggle {display:inline-flex}
  .header-tools {margin-left:auto}
  .mobile-drawer:not([hidden]) {display:block;position:absolute;top:var(--nav-h);left:0;right:0;z-index:3;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) 24px;background:var(--paper);color:var(--ink);border-top:1px solid var(--line-light)}
  .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 16px;text-decoration:none;border-radius:var(--r-item);color:var(--ink)}
  .mobile-drawer a[aria-current="page"] {background:var(--screen-hi);color:var(--ink);font-weight:700}
  .drawer-languages {margin-top:16px!important;padding-top:16px!important;border-top:1px solid var(--line-light)}
}
@media (max-width:860px) {
  :root {--gutter:20px;--section-space:56px}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media (max-width:768px) {
  h1 {font-size:clamp(24px,6.4vw,30px)}
  h2 {font-size:26px}
}
@media (max-width:640px) {
  :root {--gutter:20px}
  .grid,.footer-grid {grid-template-columns:minmax(0,1fr)}
  .topbar-in > .brand {min-width:0;flex-shrink:1}
  .topbar-in > .brand span {overflow-wrap:anywhere}
  .brand {font-size:14px;gap:8px}
  .brand img {width:30px;height:30px}
  .topbar-in {gap:8px}
  .header-tools {gap:6px;margin-left:auto}
  .lang {padding-inline:10px;min-height:44px}
  .lang-full {display:none}
  .lang-short {display:inline}
  .card,.panel {padding:22px}
  .tilt,[data-tilt] {transform:none!important}
  .chips {flex-direction:row;flex-wrap:wrap}
  .lead {font-size:18px}
  pre {padding:18px}
  .footer-bottom a {margin-left:0}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
  .reveal-pending .reveal:not(.shown) {opacity:1;transform:none}
}