:root {
  color-scheme: light;
  --bg: #FAFAFA;
  --bg-panel: #FFFFFF;
  --bg-panel-2: #F2F2F4;
  --border: #E5E5E8;
  --accent: #E0457B;
  --accent-dark: #B02C5C;
  --text: #19191D;
  --text-muted: #66666F;
  --text-faint: #8E8E97;
  --success: #1E9A5F;
  --warn: #D4870F;
  --error: #D23A3A;
  --grape: #8C6CFF;
  --grape-soft: #C9BBFF;
  --apricot: #FF9A62;
  --dot-gray: #D3D3D8;
  --clear: transparent;
  --mask-on: #000000;
  --shadow-near: rgba(25,25,29,.06);
  --shadow-far: rgba(25,25,29,.13);
  --accent-glow: rgba(224,69,123,.26);
  --success-ring: rgba(30,154,95,.16);
  --glass: rgba(255,255,255,.5);
  --glass-edge: rgba(255,255,255,.88);
  --nav-veil: rgba(250,250,250,.86);
  --scrim: rgba(25,25,29,.28);
  --grad-accent: linear-gradient(90deg,var(--grape) 0%,var(--accent) 100%);
  --grad-tri: linear-gradient(180deg,var(--grape),var(--accent) 70%,var(--apricot));
  --grad-field: linear-gradient(180deg,var(--grape-soft) 0%,var(--grape) 34%,var(--grape) 66%,var(--accent) 90%,var(--apricot) 100%);
  --font-display: 'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-body: 'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lede: 18px;
  --fs-h3: 22px;
  --fs-h2: clamp(26px,3vw,36px);
  --fs-h1: clamp(34px,3.25vw,48px);
  --fs-hero: clamp(28px,3.25vw,48px);
  --fs-mobile-h1: clamp(24px,4.5vw,30px);
  --fs-brand: 17px;
  --fs-nav: 14.5px;
  --fs-chip: 13px;
  --fs-hero-lede: 16.5px;
  --fs-button: 15.5px;
  --fs-os: 13.5px;
  --fs-setting: 12.5px;
  --fs-key: 11.5px;
  --fs-tiny: 11px;
  --fs-legend: 10.5px;
  --fs-app-head: 20px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-rim: 35px;
  --r-pill: 999px;
  --r-group: 18px;
  --r-segment: 12px;
  --r-segment-inner: 9px;
  --r-memo: 16px;
  --r-mobile-app: 23px;
  --r-circle: 50%;
  --gutter: 60px;
  --content-max: 1320px;
  --reading-max: 820px;
  --header-max: 1320px;
  --wrap: min(1320px,calc(100% - 120px));
  --copy-w: 500px;
  --nav-h: 72px;
  --section-space: 96px;
  --shadow-panel: 0 2px 6px var(--shadow-near),0 20px 50px var(--shadow-near);
  --shadow-window: 0 2px 6px var(--shadow-near),0 30px 80px var(--shadow-far);
  --ease: cubic-bezier(.2,.65,.3,1);
  --speed: .2s;
  --reveal-speed: .6s;
  --tab-cycle: 7s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px) }
html.nav-open { overflow:hidden }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[hidden] { display:none!important }
img,svg { display:block; max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
a { color:inherit; text-underline-offset:.2em }
a:hover { text-decoration-thickness:2px }
button,a,input,summary,select,textarea { -webkit-tap-highlight-color:var(--clear) }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px }
::selection { background:var(--grape-soft); color:var(--text) }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:1.2; text-wrap:balance }
h1 { font-size:var(--fs-h1); letter-spacing:-.01em }
h2 { font-size:var(--fs-h2); margin:0 0 24px }
h3 { font-size:var(--fs-h3); margin:0 0 16px }
p { margin:0 0 20px }
strong { font-weight:500 }
small { font-size:var(--fs-xs) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
:not(pre) > code { background:var(--bg-panel-2); color:var(--text); padding:.12em .35em; border-radius:var(--r-xs) }
pre {
  max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
  margin:20px 0; padding:20px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--bg-panel-2); color:var(--text); line-height:1.7; font-size:var(--fs-sm);
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:inherit }
hr { border:0; border-top:1px solid var(--border); margin:40px 0 }
.wrap {
  width:100%; max-width:calc(var(--content-max) + var(--gutter)*2);
  margin-inline:auto; padding-inline:var(--gutter);
}
.reading { max-width:calc(var(--reading-max) + var(--gutter)*2) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section + .section { border-top:1px solid var(--border) }
.section-head { max-width:720px; margin-bottom:40px }
.section-head p,.muted { color:var(--text-muted) }
.mono { font-family:var(--font-mono) }
.keep { white-space:nowrap }
.grid { display:grid; gap:24px }
.grid > *, .split > *, .footer-grid > *, .app-body > *, .feature-browser > * { min-width:0 }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.panel,.card {
  min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-panel);
}
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.card h3 a { text-decoration:none }
.card h3 a:hover { color:var(--accent-dark) }
.pill-btn,.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:10px 24px; border:1px solid var(--clear);
  border-radius:var(--r-pill); font-size:var(--fs-button); line-height:1.4;
  font-family:var(--font-body); text-align:center; text-decoration:none;
  background:var(--bg-panel-2); color:var(--text);
  transition:background-color var(--speed),transform var(--speed);
}
.pill-btn svg,.button svg { width:16px; height:16px }
.is-ink { background:var(--text); color:var(--bg-panel); box-shadow:0 1px 2px var(--shadow-near),0 8px 20px var(--shadow-far) }
.is-ink:hover,.is-ink.is-hover { background:var(--accent-dark); color:var(--bg-panel) }
.is-mist { background:var(--bg-panel-2); color:var(--text) }
.is-mist:hover,.is-mist.is-hover { background:var(--border); color:var(--text) }
.is-outline { background:var(--bg-panel); color:var(--text); border-color:var(--border) }
.is-outline:hover { border-color:var(--text-muted) }
.pill-btn:hover,.button:hover { transform:translateY(-1px) }
.button:active,.pill-btn:active,.button.is-pressed { transform:translateY(1px) }
.button:disabled,.button[aria-disabled="true"] { cursor:not-allowed; background:var(--bg-panel-2); color:var(--text-muted); box-shadow:none; transform:none }
.button.is-focus { outline:2px solid var(--accent-dark); outline-offset:3px }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.topline,#site-header {
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:var(--nav-veil); color:var(--text); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px);
}
.header-shell {
  width:100%; max-width:min(100%,calc(var(--header-max) + var(--gutter)*2));
  margin-inline:auto; height:100%; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.brandmark { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--text); text-decoration:none; font-size:var(--fs-brand); font-weight:500 }
.brandmark img { width:30px; height:30px; flex-shrink:0 }
.desktop-nav { min-width:0; margin-left:auto }
.routes { display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none }
.routes a {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--clear);
  font-size:var(--fs-nav); color:var(--text-muted); text-decoration:none; white-space:nowrap;
  transition:color var(--speed),background-color var(--speed);
}
.routes svg { width:16px; height:16px }
.routes a:hover { color:var(--text); background:var(--bg-panel-2) }
.routes a[aria-current="page"] { color:var(--text); background:var(--bg-panel); border-color:var(--border); box-shadow:0 1px 2px var(--shadow-near) }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language-box { position:relative }
.lang-pick,.menu-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text); font-size:var(--fs-sm);
}
.lang-pick svg { width:16px; height:16px; color:var(--text-muted) }
.caret { color:var(--text-muted); font-size:var(--fs-tiny) }
.lang-short { display:none }
.language-menu {
  position:absolute; right:0; top:calc(100% + 12px); width:200px; padding:8px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-window);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; text-decoration:none; border-radius:var(--r-sm) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--bg-panel-2); color:var(--text) }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px }
.menu-toggle svg { width:20px; height:20px }
.mobile-drawer { display:none }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:40; border:0; background:var(--scrim); color:var(--text) }
.skip-link { position:fixed; left:16px; top:8px; z-index:100; padding:10px 18px; transform:translateY(-160%); background:var(--text); color:var(--bg-panel); border-radius:var(--r-sm) }
.skip-link:focus { transform:none }
.site-footer { border-top:1px solid var(--border); padding-top:64px; padding-bottom:28px; background:var(--bg); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1.3fr .8fr; gap:40px }
.footer-brand p { max-width:310px; margin-top:20px; font-size:var(--fs-sm); color:var(--text-muted) }
.footer-title { margin:0 0 16px; font-size:var(--fs-sm); font-weight:500 }
.footer-links { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; font-size:var(--fs-sm); color:var(--text-muted) }
.footer-links a { text-decoration:none; overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.prose { min-width:0; overflow-wrap:break-word; line-height:1.85 }
.prose h2 { margin-top:56px; scroll-margin-top:calc(var(--nav-h) + 24px) }
.prose h3 { margin-top:32px }
.prose li { margin-block:8px }
.prose a { color:var(--accent-dark) }
.reveal { opacity:1; transform:none }
.reveal.reveal-ready:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal.reveal-ready { transition:opacity var(--reveal-speed) var(--ease),transform var(--reveal-speed) var(--ease) }
.decorated,.hero,.crest { position:relative; overflow-x:clip }
@media (max-width:1280px) {
  .header-shell { gap:16px }
  .routes a { padding-inline:9px }
}
@media (max-width:1100px) {
  .desktop-nav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-drawer {
    position:absolute; top:var(--nav-h); left:0; right:0; z-index:2;
    display:block; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
    overscroll-behavior:contain; padding:16px var(--gutter) 28px;
    border-bottom:1px solid var(--border); background:var(--bg-panel); color:var(--text);
  }
  .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; text-decoration:none; border-radius:var(--r-sm) }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel-2); color:var(--text) }
  .mobile-drawer svg { width:18px; height:18px }
  .drawer-languages { margin-top:16px; border-top:1px solid var(--border); padding-top:16px }
  .drawer-label { padding-inline:12px; font-size:var(--fs-xs); color:var(--text-muted) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  h1 { font-size:var(--fs-mobile-h1) }
  .grid-three { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  :root { --gutter:16px; --wrap:calc(100% - 32px); --nav-h:64px; --section-space:56px }
  .header-shell { gap:10px }
  .header-tools { margin-left:auto; gap:6px }
  .lang-text { display:none }
  .lang-short { display:inline }
  .lang-pick { min-height:44px; padding-inline:10px }
  .brandmark { font-size:var(--fs-body); gap:7px }
  .brandmark img { width:28px; height:28px }
  .grid-two,.grid-three,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .panel,.card { padding:22px }
  .footer-grid { gap:28px }
  .tilt,[data-tilt] { transform:none!important }
  .section-head { margin-bottom:28px }
  pre { padding:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .reveal.reveal-ready:not(.shown) { opacity:1; transform:none }
  .pill-btn:hover,.button:hover { transform:none }
}