:root {
  --c-ink-night:#140A45;
  --c-cobalt:#2B0F86;
  --c-violet:#7B3DF5;
  --c-lilac:#B79CFF;
  --c-lavender:#CDBDFF;
  --c-lavender-hi:#D9CCFF;
  --c-lime:#C4F24A;
  --bg:#FFFFFF;
  --bg-panel:#F6F5FA;
  --bg-panel2:#EEEDF4;
  --border:#E4E2EC;
  --accent:#7B3DF5;
  --accent-dark:#2B0F86;
  --text:#140F2B;
  --text-muted:#5E5A70;
  --text-faint:#8C889E;
  --success:#1E9E5A;
  --warn:#C98A06;
  --error:#D93A4A;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.80);
  --on-dark-3:rgba(255,255,255,.62);
  --glass-1:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.15);
  --glass-line:rgba(255,255,255,.34);
  --glass-line-soft:rgba(255,255,255,.18);
  --clear:rgba(255,255,255,0);
  --ring:rgba(205,189,255,.38);
  --ring-line:rgba(255,255,255,.48);
  --ghost-bg:rgba(43,15,134,.66);
  --ghost-bg-hi:rgba(123,61,245,.44);
  --ghost-row:rgba(205,189,255,.14);
  --ghost-line:rgba(205,189,255,.34);
  --ghost-text:#EDE6FF;
  --ghost-muted:rgba(237,230,255,.66);
  --halo:rgba(217,204,255,.58);
  --halo-2:rgba(183,156,255,.26);
  --shadow-deep:rgba(20,10,69,.55);
  --shadow-mid:rgba(20,10,69,.30);
  --shadow-violet:rgba(43,15,134,.52);
  --shadow-soft:rgba(20,15,43,.08);
  --lime-glow:rgba(196,242,74,.42);
  --lime-halo:rgba(196,242,74,.22);
  --lime-edge:rgba(255,255,255,.55);
  --grad-field:linear-gradient(180deg,var(--c-ink-night) 0,var(--c-cobalt) 34%,var(--c-violet) 66%,var(--c-lavender) calc(100% - 160px),var(--bg) 100%);
  --grad-title:linear-gradient(95deg,var(--on-dark) 0%,var(--on-dark) 20%,var(--c-lavender) 70%,var(--c-lilac) 100%);
  --grad-accent:linear-gradient(90deg,var(--c-cobalt) 0%,var(--c-violet) 55%,var(--c-lilac) 100%);
  --grad-stage:linear-gradient(35deg,var(--c-cobalt),var(--c-violet) 45%,var(--c-lavender-hi));
  --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;
  --r-pill:999px;
  --r-round:50%;
  --r-ring:38px;
  --r-card:28px;
  --r-stage:32px;
  --r-ghost:20px;
  --r-row:10px;
  --r-small:4px;
  --r-hair:1px;
  --bar-h:76px;
  --gutter:40px;
  --reading-width:1120px;
  --wide-width:1280px;
  --text-size:16px;
  --text-small:14px;
  --text-lead:18px;
  --h1-size:clamp(34px,2.2vw + 16px,48px);
  --h2-size:clamp(26px,2.5vw,40px);
  --h3-size:22px;
  --section-space:100px;
  --ease:200ms ease;
  --shadow-card:0 2px 6px var(--shadow-soft),0 22px 52px -30px var(--shadow-mid);
  --shadow-window:0 4px 12px var(--shadow-soft),0 24px 60px -16px var(--shadow-deep),0 60px 90px -42px var(--shadow-violet);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:28px }
html.nav-open { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--text); font:var(--text-size)/1.75 var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
img,svg { display:block; max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
a { color:var(--accent-dark); text-underline-offset:4px }
a:hover { text-decoration-thickness:2px }
button,a,input,summary,textarea,select,[tabindex]:focus-visible { -webkit-tap-highlight-color:var(--clear) }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
[hidden] { display:none !important }
h1,h2,h3,h4,p,ul,ol,blockquote,figure { margin-top:0 }
h1,h2,h3 { font-family:var(--font-display); font-weight:900; line-height:1.2; letter-spacing:-.02em; text-wrap:balance }
h1 { font-size:var(--h1-size); line-height:1.14 }
h2 { font-size:var(--h2-size) }
h3 { font-size:var(--h3-size) }
p { margin-bottom:1.25em }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:24px; border-radius:var(--r-ghost); background:var(--bg-panel); color:var(--text); line-height:1.7 }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre }
hr { border:0; border-top:1px solid var(--border); margin-block:40px }
:where(main,section,article,aside,nav,div,li) { min-width:0 }
.wrap,.shell,.header-shell { width:100%; margin-inline:auto; padding-inline:var(--gutter) }
.wrap { max-width:calc(var(--reading-width) + var(--gutter) * 2) }
.shell { max-width:calc(var(--wide-width) + var(--gutter) * 2) }
.header-shell { max-width:min(100%,calc(1280px + var(--gutter) * 2)) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.stack > * + * { margin-top:24px }
.grid { display:grid; gap:24px }
.grid--two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > * { min-width:0 }
.keep { white-space:nowrap }
.muted { color:var(--text-muted) }
.mono { font-family:var(--font-mono) }
.lead { font-size:var(--text-lead); color:var(--text-muted); max-width:40em }
.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:fixed; top:12px; left:16px; z-index:100; padding:10px 20px; border-radius:var(--r-pill); background:var(--bg); color:var(--text); transform:translateY(-160%) }
.skip-link:focus { transform:none }
.eyebrow { margin:0 0 14px; font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark) }
.hl { background:var(--grad-accent); color:var(--accent-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:var(--clear) }
.panel,.card { background:var(--bg-panel); color:var(--text); border-radius:var(--r-card); padding:32px }
.panel { border-radius:var(--r-stage); padding:48px }
.panel--second { background:var(--bg-panel2); color:var(--text) }
.card--raised { background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); border:1px solid var(--border) }
.card h3 { margin-bottom:12px }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.prose { max-width:78ch; overflow-wrap:break-word }
.prose h2 { margin-top:2.4em; margin-bottom:.75em; scroll-margin-top:32px }
.prose h3 { margin-top:1.75em }
.prose :where(ul,ol) { padding-left:1.5em }
.prose li + li { margin-top:.5em }
.prose a { overflow-wrap:anywhere }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px 0 24px; border:1px solid var(--clear); border-radius:var(--r-pill); background:var(--bg-panel2); color:var(--text); font-size:16px; font-weight:700; letter-spacing:-.005em; line-height:1.4; text-align:center; text-decoration:none; transition:transform var(--ease),box-shadow var(--ease),background-color var(--ease) }
.btn svg,.textlink svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn--lime { background:var(--c-lime); color:var(--text); box-shadow:inset 0 1px 0 var(--lime-edge),0 2px 6px var(--shadow-mid),0 14px 32px -12px var(--lime-glow) }
.btn--lime:hover,.btn--lime.is-hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--lime-edge),0 4px 10px var(--shadow-mid),0 18px 40px -12px var(--lime-glow) }
.btn--ghost { padding:0 24px 0 26px; background:var(--c-cobalt); color:var(--on-dark); border:1.5px solid var(--glass-line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.btn--ghost:hover { background:var(--c-ink-night); color:var(--on-dark) }
.btn--outline { background:var(--bg); color:var(--accent-dark); border-color:var(--border) }
.btn--outline:hover { background:var(--bg-panel); color:var(--accent-dark) }
.btn:active,.btn.is-pressed { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel2); color:var(--text-muted); box-shadow:none; transform:none; pointer-events:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:4px }
.textlink { display:inline-flex; align-items:center; gap:8px; color:var(--accent-dark); font-weight:700; font-size:16px; text-decoration:none }
.field { position:relative; isolation:isolate; overflow:hidden; min-height:860px; display:flex; flex-direction:column; background:var(--grad-field); color:var(--on-dark) }
.field::before { content:""; position:absolute; z-index:-1; top:-260px; right:-200px; width:900px; height:660px; border-radius:var(--r-round); background:radial-gradient(closest-side,var(--halo) 0%,var(--halo-2) 46%,var(--clear) 100%); pointer-events:none }
.decorated { position:relative; overflow-x:clip }
.topbar { position:relative; z-index:50; min-height:var(--bar-h); display:flex; align-items:center; gap:20px }
#site-header { position:relative; z-index:50; background:var(--bg); color:var(--text) }
.field #site-header { background:var(--clear); color:var(--on-dark) }
.brandmark { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--text); text-decoration:none; font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.015em; line-height:1.3 }
.brandmark-glyph { width:30px; height:30px; flex-shrink:0 }
.field .brandmark { color:var(--on-dark) }
.navrail { margin-left:auto; min-width:0 }
.navrail ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px }
.navrail a { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px; border-radius:var(--r-pill); color:var(--text-muted); font-size:14.5px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background-color var(--ease),color var(--ease) }
.navrail a:hover,.navrail a[aria-current="page"] { background:var(--bg-panel2); color:var(--accent-dark) }
.field .navrail a { color:var(--on-dark-2) }
.field .navrail a:hover { background:var(--glass-1); color:var(--on-dark) }
.field .navrail a[aria-current="page"] { background:var(--glass-2); color:var(--on-dark); box-shadow:inset 0 0 0 1px var(--glass-line-soft) }
.navrail svg,.langpick svg,.menu-toggle svg,.mobile-drawer svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.language-control { position:relative }
.langpick { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 14px 0 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text); font-size:14px; font-weight:500; white-space:nowrap }
.field .langpick { border-color:var(--glass-line-soft); background:var(--c-cobalt); color:var(--on-dark) }
.field .langpick:hover { background:var(--c-ink-night); color:var(--on-dark) }
.langpick-caret { font-size:11px }
.lang-short { display:none }
.language-menu { position:absolute; top:calc(100% + 10px); right:0; width:196px; padding:8px; border:1px solid var(--border); border-radius:var(--r-ghost); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); z-index:55 }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-row); color:var(--text); text-decoration:none }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel2); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text) }
.menu-toggle svg { width:22px; height:22px }
.field .menu-toggle { border-color:var(--glass-line); background:var(--glass-1); color:var(--on-dark) }
.mobile-drawer { display:none }
.nav-veil { position:fixed; inset:var(--bar-h) 0 0; z-index:40; border:0; background:var(--shadow-deep); color:var(--on-dark) }
.hero { position:relative; z-index:2; flex:1; display:grid; grid-template-columns:minmax(0,500px) minmax(0,1fr); column-gap:40px; align-items:center; padding-bottom:150px }
.hero-title { margin:24px 0 0; font-family:var(--font-display); font-weight:900; font-size:var(--h1-size); line-height:1.14; letter-spacing:-.035em; color:var(--on-dark) }
.hero-title > span { display:block }
.hero-title .glow-line { padding-bottom:.05em; background:var(--grad-title); color:var(--on-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:var(--clear) }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:32px; max-width:100%; padding:5px 15px 5px 12px; border-radius:var(--r-pill); background:var(--glass-1); border:1px solid var(--glass-line-soft); color:var(--on-dark-2); font-family:var(--font-mono); font-size:12.5px; line-height:1.6; letter-spacing:.02em }
.badge-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-lime); box-shadow:0 0 0 4px var(--lime-halo) }
.lede { margin:28px 0 0; max-width:30em; font-size:16.5px; line-height:1.75; color:var(--on-dark-2) }
.lede strong { color:var(--on-dark); font-weight:700 }
.platforms { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.platforms a { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px 0 13px; border-radius:var(--r-pill); background:var(--glass-1); border:1px solid var(--glass-line-soft); color:var(--on-dark); font-size:14px; font-weight:600; text-decoration:none; transition:background-color var(--ease),border-color var(--ease) }
.platforms a:hover { background:var(--glass-2); color:var(--on-dark); border-color:var(--glass-line) }
.platforms svg { width:15px; height:15px }
.field :focus-visible { outline-color:var(--c-lavender) }
.after { padding-top:16px; padding-bottom:120px }
.after-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:32px; padding:64px 72px; border-radius:var(--r-stage); background:var(--bg-panel); color:var(--text) }
.after h2 { margin:0; font-size:clamp(24px,1.4vw + 14px,34px) }
.after p { margin:14px 0 0; max-width:36em; font-size:16px; line-height:1.75; color:var(--text-muted) }
.site-footer { padding-top:72px; padding-bottom:112px; border-top:1px solid var(--border); background:var(--bg); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1.3fr; gap:56px }
.footer-brand p { max-width:28em; margin-top:20px; color:var(--text-muted); font-size:14px }
.footer-title { font-size:15px; font-weight:800; margin-bottom:16px }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; list-style:none; padding:0; margin:0 }
.footer-links a { color:var(--text-muted); font-size:14px; text-decoration:none }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline }
.footer-languages { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:40px }
.footer-languages a { color:var(--text-muted); font-size:14px }
.footer-languages a[aria-current="true"] { color:var(--accent-dark); font-weight:700 }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:28px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px }
.footer-bottom p { margin:0 }
.footer-bottom a { color:var(--text-muted) }
.reveal { opacity:1; transform:none }
.reveal-pending { opacity:0; transform:translateY(18px); transition:opacity 650ms ease,transform 650ms ease }
.reveal.shown { opacity:1; transform:none }
@media (max-width:1280px) {
  .navrail a { padding:0 9px; gap:6px; font-size:14px }
}
@media (max-width:1240px) {
  .hero { grid-template-columns:minmax(0,440px) minmax(0,1fr) }
}
@media (max-width:1180px) {
  .navrail { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) { display:block; position:absolute; top:100%; left:var(--gutter); right:var(--gutter); padding:16px; max-height:calc(100dvh - var(--bar-h) - 16px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:var(--r-ghost); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); z-index:52 }
  .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-row); background:var(--bg); color:var(--text); text-decoration:none; font-size:15px }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel2); color:var(--accent-dark) }
  .drawer-languages { margin-top:12px !important; padding-top:12px !important; border-top:1px solid var(--border) }
}
@media (max-width:980px) {
  .field { min-height:0 }
  .hero { grid-template-columns:minmax(0,1fr); row-gap:44px; padding-top:36px; padding-bottom:140px }
  .after-panel { grid-template-columns:minmax(0,1fr); padding:44px 32px }
  .footer-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px }
  .footer-brand { grid-column:1 / -1 }
}
@media (max-width:768px) {
  :root { --h1-size:28px; --h2-size:28px; --section-space:64px }
  .hero-title { font-size:28px; letter-spacing:-.02em }
  .grid--three { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .topbar { gap:10px }
  .brandmark { font-size:16px; gap:8px }
  .brandmark-glyph { width:26px; height:26px }
  .header-tools { margin-left:auto; gap:6px }
  .langpick { min-height:44px; padding-inline:10px; gap:5px }
  .langpick > svg { display:none }
  .lang-full { display:none }
  .lang-short { display:inline }
  .hero .actions .btn { flex:1 1 auto; justify-content:center }
  .lede { font-size:15.5px }
  .grid--two,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .footer-brand { grid-column:auto }
  .panel,.card { padding:24px }
  .after-panel { padding:32px 24px }
  .tilt,[data-tilt] { transform:none !important }
  .platforms { gap:8px }
  .platforms a { padding-inline:12px; font-size:13px }
  .badge { font-size:11px }
  .section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
}
@media (max-width:359px) {
  :root { --gutter:16px }
  .brandmark { font-size:14px; gap:6px }
  .brandmark-glyph { width:24px; height:24px }
  .langpick { padding-inline:8px }
  .hero-title { font-size:26px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  .reveal,.reveal-pending { opacity:1; transform:none }
}