:root {
  --bg:#f5fafd;
  --bg-top:#eef1fd;
  --panel:#ffffff;
  --panel-2:#edf3f9;
  --border:#dfe7f0;
  --border-soft:#e8eef5;
  --border-strong:#cdd8e5;
  --line:#c3cfdf;
  --accent:#3b51d9;
  --accent-dark:#2a3cae;
  --text:#121826;
  --muted:#5d6878;
  --faint:#8b95a5;
  --success:#2f9e6a;
  --warn:#c98a16;
  --error:#d6455d;
  --success-ink:#23764f;
  --warn-ink:#805809;
  --error-ink:#ac2840;
  --on-accent:#ffffff;
  --accent-wash:#e9ecfc;
  --accent-wash-2:#f2f4fe;
  --success-wash:#e2f3ea;
  --error-wash:#fbe7eb;
  --neutral-wash:#edf3f9;
  --note-bg:#fafcfe;
  --grad-a:#c56fe9;
  --grad-b:#6b8af4;
  --fog:rgba(107,138,244,0.17);
  --fog-edge:rgba(107,138,244,0);
  --btn-hl:rgba(255,255,255,0.26);
  --veil:rgba(18,24,38,0.28);
  --clear:transparent;
  --shadow-lg:0 24px 60px rgba(59,81,217,0.08),0 2px 6px rgba(18,24,38,0.04);
  --shadow-sm:0 1px 2px rgba(18,24,38,0.04),0 4px 14px rgba(59,81,217,0.05);
  --shadow-note:0 1px 2px rgba(18,24,38,0.03),0 3px 10px rgba(59,81,217,0.04);
  --shadow-btn:0 1px 2px rgba(18,24,38,0.14),0 8px 20px rgba(59,81,217,0.22);
  --r-board:32px;
  --r-float:20px;
  --r-cell:14px;
  --r-note:12px;
  --r-btn:12px;
  --r-icon:8px;
  --r-shot:8px;
  --r-check:4px;
  --r-pill:999px;
  --r-logo:28%;
  --r-circle:50%;
  --f-display:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --f-body:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:600;
  --size-body:16px;
  --size-small:13px;
  --size-h1:clamp(34px,3.4vw + 12px,48px);
  --size-h2:clamp(24px,1.6vw + 10px,34px);
  --size-h3:21px;
  --container:1180px;
  --reading:780px;
  --header-span:1280px;
  --gutter:24px;
  --header-h:64px;
  --section-space:160px;
  --lane-gap:28px;
  --note-h:54px;
  --note-gap:18px;
  --ease:cubic-bezier(.2,.65,.3,1);
  --fast:150ms;
  --slow:600ms;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,main,section,article,aside,nav,div,figure { min-width:0; }
img { max-width:100%; }
svg { flex-shrink:0; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a,input,summary,select { -webkit-tap-highlight-color:var(--clear); }
button { border:0; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--f-display); font-weight:var(--weight-regular); text-wrap:balance; }
h1 { font-size:var(--size-h1); line-height:1.15; letter-spacing:-.02em; }
h2 { font-size:var(--size-h2); line-height:1.25; letter-spacing:-.02em; }
h3 { font-size:var(--size-h3); line-height:1.4; }
ul,ol { margin:0; padding-left:1.5em; }
strong,b { font-weight:var(--weight-bold); }
code,kbd,pre { font-family:var(--f-mono); }
code { overflow-wrap:anywhere; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--r-note);
  background:var(--note-bg);
  color:var(--text);
  font-size:13px;
  line-height:1.8;
  overscroll-behavior-inline:contain;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
[hidden] { display:none !important; }
::selection { background:var(--accent-wash); color:var(--text); }
.wrap { width:100%; max-width:var(--container); 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); }
.nowrap { white-space:nowrap; }
.muted { color:var(--muted); }
.mono { font-family:var(--f-mono); }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link { position:absolute; left:var(--gutter); top:-100px; z-index:100; padding:12px 20px; background:var(--panel); color:var(--accent); }
.skip-link:focus { top:8px; }
.stack > * + * { margin-top:20px; }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.grid-two > *, .grid-three > * { min-width:0; }
.band { position:relative; padding-top:var(--section-space); padding-bottom:var(--section-space); }
.band--white { background:var(--panel); color:var(--text); }
.band--blue { background:var(--panel-2); color:var(--text); }
.band--after-board { padding-top:calc(120px + var(--section-space)); }
.qhead { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:40px; }
.qhead p { max-width:640px; font-size:15.5px; color:var(--muted); }
.qhead p strong { color:var(--text); }
.qno,.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--accent-wash-2);
  color:var(--accent-dark);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:var(--weight-medium);
  overflow-wrap:anywhere;
}
.card,.panel { padding:28px; border:1px solid var(--border-soft); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
.panel { border-radius:var(--r-board); box-shadow:var(--shadow-lg); }
.card > * + *, .panel > * + * { margin-top:16px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  max-width:100%;
  padding:11px 22px;
  border:1px solid var(--clear);
  border-radius:var(--r-btn);
  font-size:15.5px;
  font-weight:var(--weight-medium);
  line-height:1.5;
  text-align:center;
  letter-spacing:-.005em;
  transition:background-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn svg { width:18px; height:18px; }
.btn--primary { background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--btn-hl),var(--shadow-btn); }
.btn--primary:hover,.btn--primary.is-hover { background:var(--accent-dark); color:var(--on-accent); }
.btn--ghost { background:var(--panel); color:var(--text); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); border-color:var(--border); box-shadow:none; cursor:not-allowed; }
.text-link { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.stage { position:relative; background:linear-gradient(180deg,var(--bg-top) 0,var(--bg) 560px,var(--bg) 100%); color:var(--text); overflow-x:clip; }
.masthead,#site-header { position:relative; z-index:40; min-height:var(--header-h); }
.masthead__row {
  position:relative;
  width:100%;
  max-width:min(100%,calc(var(--header-span) + var(--gutter)*2));
  min-height:var(--header-h);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:16px; font-weight:var(--weight-medium); letter-spacing:-.01em; }
.brand img,.logo-slot { display:block; flex-shrink:0; width:30px; height:30px; border-radius:var(--r-logo); }
.logo-slot { background:linear-gradient(150deg,var(--panel),var(--accent-wash-2)); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.logo-slot--mini { width:18px; height:18px; box-shadow:none; }
.desktop-nav { margin-left:auto; min-width:0; }
.dotnav { display:flex; align-items:center; list-style:none; margin:0; padding:0; font-size:14.5px; color:var(--muted); }
.dotnav li { display:inline-flex; align-items:center; flex-shrink:0; }
.dotnav li + li::before { content:"·"; margin-inline:14px; color:var(--faint); }
.dotnav a { display:block; padding-block:8px; transition:color var(--fast) var(--ease); }
.dotnav a:hover,.dotnav a[aria-current="page"] { color:var(--text); }
.dotnav a[aria-current="page"] { font-weight:var(--weight-medium); }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.language { position:relative; }
.lang { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:5px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--muted); font-size:13.5px; white-space:nowrap; }
.lang svg { width:14px; height:14px; }
.lang__caret { font-size:11px; }
.lang__short { display:none; }
.language-menu { position:absolute; right:0; top:calc(100% + 10px); width:190px; padding:8px; border:1px solid var(--border); border-radius:var(--r-cell); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-icon); }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--accent-wash-2); color:var(--accent-dark); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--panel); color:var(--text); }
.menu-toggle svg { width:22px; height:22px; }
.mobile-drawer { display:none; position:absolute; left:0; right:0; top:100%; max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; padding:20px var(--gutter) 28px; border-bottom:1px solid var(--border); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); }
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:flex; width:100%; align-items:center; min-height:48px; padding:12px 10px; border-bottom:1px solid var(--border-soft); }
.mobile-drawer a[aria-current] { color:var(--accent-dark); }
.drawer-label { margin-top:24px; padding-inline:10px; color:var(--muted); font-size:var(--size-small); }
.menu-veil { position:fixed; inset:var(--header-h) 0 0; z-index:30; background:var(--veil); color:var(--text); }
html.nav-open { overflow:hidden; }
.hero { position:relative; padding-top:28px; }
.hero__copy { display:flex; flex-direction:column; align-items:center; text-align:center; }
.kicker { display:inline-flex; align-items:center; gap:8px; min-height:30px; max-width:100%; padding:3px 13px 3px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--muted); box-shadow:var(--shadow-sm); font-size:13px; margin-bottom:18px; }
.kicker__dot { flex-shrink:0; width:6px; height:6px; border-radius:var(--r-circle); background:var(--accent); }
.kicker strong { color:var(--text); font-weight:var(--weight-medium); }
.hero__title { font-size:var(--size-h1); font-weight:var(--weight-regular); line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; }
.grad { background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); -webkit-background-clip:text; background-clip:text; color:var(--clear); }
.hero__lede { max-width:680px; font-size:16px; line-height:1.65; color:var(--muted); margin-bottom:22px; }
.hero__lede strong { color:var(--text); }
.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.platforms { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 22px; list-style:none; margin:0; padding:0; }
.platforms li,.platforms a { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); }
.platforms svg { width:16px; height:16px; }
.price-pill { display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; min-height:30px; max-width:100%; padding:4px 13px; margin-left:6px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--text); font-size:12.5px; }
.price-pill b { font-family:var(--f-mono); font-weight:var(--weight-medium); font-size:12px; color:var(--accent); margin-inline:3px; }
.prose { overflow-wrap:break-word; }
.prose p,.prose ul,.prose ol,.prose pre,.prose figure,.prose .table-scroll { margin-block:20px; }
.prose h2 { margin-top:64px; margin-bottom:24px; }
.prose h3 { margin-top:36px; margin-bottom:16px; }
.prose li + li { margin-top:10px; }
.prose a:not(.btn):not(.appstore-button) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.prose :not(pre) > code { padding:2px 5px; border-radius:var(--r-check); background:var(--panel-2); color:var(--text); font-size:.88em; }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px); }
.reveal { transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease); }
.site-footer { padding-top:80px; padding-bottom:36px; border-top:1px solid var(--border); background:var(--bg); color:var(--text); }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1.3fr; gap:48px; }
.footer-brand p { max-width:360px; margin-top:18px; color:var(--muted); font-size:14px; }
.footer-title { font-size:14px; font-weight:var(--weight-medium); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:12px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:14px; }
.footer-links a:hover { color:var(--accent-dark); }
.footer-languages { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:48px; color:var(--muted); font-size:13px; }
.footer-languages a { padding-block:6px; }
.footer-languages [aria-current] { color:var(--accent-dark); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-top:24px; padding-top:24px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px; }
@media (max-width:1100px) {
  .desktop-nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .mobile-drawer:not([hidden]) { display:block; }
}
@media (max-width:960px) {
  .grid-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:768px) {
  h1,.hero__title { font-size:clamp(24px,4vw,30px); }
  .grid-two,.grid-three { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  :root { --gutter:18px; --section-space:120px; }
  .masthead__row { gap:8px; }
  .brand { gap:7px; font-size:13px; }
  .brand img,.brand .logo-slot { width:26px; height:26px; }
  .header-tools { margin-left:auto; gap:8px; }
  .lang { padding-inline:9px; min-height:36px; }
  .lang__full { display:none; }
  .lang__short { display:inline; }
  .hero__lede { font-size:15px; }
  .actions { width:100%; }
  .actions .btn { flex:1 1 100%; }
  .platforms { gap:8px 16px; }
  .price-pill { margin-left:0; }
  .card,.panel { padding:22px; }
  .panel { border-radius:var(--r-float); }
  .band--after-board { padding-top:200px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-brand { grid-column:auto; }
  .tilt,[data-tilt] { transform:none !important; }
}
@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; }
}