:root {
  --bg:#f6f5f2;
  --bg-panel:#ffffff;
  --bg-panel2:#0d3f41;
  --border:#e3e1dc;
  --accent:#6a47b8;
  --accent-dark:#4c3091;
  --accent-soft:#efebf8;
  --accent-tint:#c9b9ef;
  --on-accent:#ffffff;
  --text:#1d2122;
  --text-muted:#5f6566;
  --success:#1f8a6b;
  --warn:#b7791f;
  --error:#c23b3b;
  --hero-ink:#102326;
  --hero-line:rgba(255,255,255,.09);
  --hero-line-strong:rgba(255,255,255,.26);
  --hero-text-strong:#ffffff;
  --hero-text-mid:#8fb0ac;
  --hero-text-soft:#a9bebb;
  --field-deep:#1f6f6a;
  --field-main:#2f8f83;
  --field-glow:rgba(118,186,170,.62);
  --field-shade:rgba(16,74,72,.55);
  --field-violet:rgba(106,71,184,.36);
  --demo-surface:#739392;
  --device-frame:#2a2f31;
  --device-edge:#4b5356;
  --device-cam:#14181a;
  --screen:#eef3f1;
  --screen-fade:rgba(205,222,217,.55);
  --screen-ink:#1d2122;
  --veil:rgba(16,35,38,.42);
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","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,"SF Mono",Menlo,Consolas,monospace;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --r-device:22px;
  --r-xl:28px;
  --r-shot:10px;
  --r-pill:999px;
  --r-round:50%;
  --shadow-soft:0 1px 2px rgba(16,35,38,.06),0 6px 18px rgba(16,35,38,.07);
  --shadow-float:0 2px 6px rgba(8,38,40,.12),0 22px 54px rgba(8,38,40,.28);
  --shadow-device:0 10px 24px rgba(6,30,32,.26),0 40px 90px rgba(6,30,32,.42);
  --shadow-btn:0 1px 2px rgba(20,10,48,.28),0 8px 22px rgba(76,48,145,.34);
  --nav-h:64px;
  --gutter:56px;
  --content-max:1328px;
  --reading-max:820px;
  --header-max:calc(1280px + var(--gutter) * 2);
  --section-gap:140px;
  --hero-h:clamp(680px,calc(100vh - var(--nav-h) - 56px),780px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --duration-fast:150ms;
  --duration-reveal:600ms;
}

*,*::before,*::after { box-sizing:border-box }
* { margin:0 }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
body { font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility }
a { color:inherit;text-decoration:none }
button,input,select,textarea { font:inherit;color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { max-width:100%;vertical-align:middle }
img { height:auto }
svg { flex-shrink:0 }
button,a { -webkit-tap-highlight-color:var(--clear) }
[hidden] { display:none!important }
:focus-visible { outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm) }
::selection { background:var(--accent-soft);color:var(--accent-dark) }
h1,h2,h3,h4 { font-family:var(--font-display);font-weight:400;line-height:1.25;text-wrap:balance;overflow-wrap:break-word }
h1 { font-size:clamp(34px,3.35vw,48px);line-height:1.18;letter-spacing:-.012em }
h2 { font-size:clamp(26px,2.5vw,36px);letter-spacing:-.01em }
h3 { font-size:22px }
small { font-size:13px }
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:1px solid var(--border);border-radius:var(--r-md);background:var(--screen);color:var(--screen-ink);line-height:1.8;tab-size:2 }
pre code { overflow-wrap:normal;word-break:normal;white-space:pre;font-size:14px }
hr { border:0;border-top:1px solid var(--border) }
.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);margin-inline:auto;padding-inline:var(--gutter) }
.section { padding-top:var(--section-gap);padding-bottom:var(--section-gap) }
.section + .section { padding-top:0 }
.section-head { margin-bottom:40px;max-width:820px }
.section-head h2 { margin-top:12px }
.section-head p + p { margin-top:16px }
.eyebrow { font-size:13px;letter-spacing:.02em;color:var(--text-muted) }
.muted { color:var(--text-muted) }
.nowrap { 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 }
.skip-link { position:fixed;left:16px;top:12px;z-index:100;transform:translateY(-150%);padding:10px 16px;background:var(--bg-panel);color:var(--accent-dark);border-radius:var(--r-sm) }
.skip-link:focus { transform:none }
.grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px }
.grid > *, .wrap > *, .reading > *, .hero > * { min-width:0 }
.stack > * + * { margin-top:20px }
.prose,.article-body { min-width:0 }
.prose p,.article-body p { margin-block:18px;line-height:1.85 }
.prose h2,.article-body h2 { margin-top:64px;margin-bottom:24px;scroll-margin-top:28px }
.prose h3,.article-body h3 { margin-top:36px;margin-bottom:16px }
.prose ul,.prose ol,.article-body ul,.article-body ol { padding-left:1.5em;margin-block:18px }
.prose li + li,.article-body li + li { margin-top:10px }
.prose a:not([class]),.article-body a:not([class]) { color:var(--accent);text-decoration:underline;text-underline-offset:4px }
.prose pre,.article-body pre { margin-block:24px }
.btn-primary,.button,.appstore-button { display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:50px;max-width:100%;padding:12px 22px 12px 20px;border:0;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-size:15.5px;font-weight:500;line-height:1.5;text-align:center;box-shadow:var(--shadow-btn);transition:background-color var(--duration-fast) ease }
.btn-primary:hover,.button:hover,.appstore-button:hover,.button.is-hover { background:var(--accent-dark);color:var(--on-accent) }
.btn-primary svg,.button svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.button--secondary { background:var(--bg-panel);color:var(--accent-dark);border:1px solid var(--border);box-shadow:none }
.button--secondary:hover { background:var(--accent-soft);color:var(--accent-dark) }
.button:disabled,.button[aria-disabled="true"] { background:var(--border);color:var(--text-muted);box-shadow:none;pointer-events:none }
.button.is-focus { outline:2px solid var(--accent);outline-offset:3px }
.btn-text { display:inline-flex;align-items:center;gap:6px;min-height:50px;font-size:15px;color:var(--accent) }
.btn-text svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-fast) ease }
.btn-text span { border-bottom:1px solid var(--clear) }
.btn-text:hover span { border-bottom-color:var(--accent-tint) }
.btn-text:hover svg { transform:translateX(2px) }
.card,.panel { padding:32px;border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
.card { border:1px solid var(--border) }
.card p,.panel p { margin-top:14px }
.panel--deep { background:var(--bg-panel2);color:var(--hero-text-strong) }
.panel--deep .muted { color:var(--hero-text-soft) }
.decorative-region { position:relative;overflow-x:clip }
.reveal { opacity:1;transform:none }
html.reveal-ready .reveal { opacity:0;transform:translateY(18px);transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease) }
html.reveal-ready .reveal.shown { opacity:1;transform:none }

/* Shared header */
.topbar { position:relative;z-index:50;height:var(--nav-h);background:var(--bg-panel);color:var(--text);border-bottom:1px solid var(--border) }
.topbar__in { height:100%;max-width:min(100%,var(--header-max));margin-inline:auto;display:flex;align-items:center;gap:40px;padding-inline:var(--gutter) }
.brand { display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text) }
.brand__mark { display:block;flex-shrink:0;width:30px;height:30px;border-radius:var(--r-sm) }
.brand__placeholder { border:1px solid var(--border);background:linear-gradient(145deg,var(--bg-panel),var(--accent-soft));color:var(--text);box-shadow:var(--shadow-soft) }
.mainnav { flex:1;min-width:0 }
.mainnav ul { display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0 }
.mainnav a { position:relative;display:flex;align-items:center;gap:7px;height:var(--nav-h);padding-inline:12px;font-size:14px;white-space:nowrap;color:var(--text-muted);transition:color var(--duration-fast) ease }
.mainnav svg,.drawer svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
.mainnav a:hover,.mainnav a[aria-current="page"] { color:var(--text) }
.mainnav a[aria-current="page"] svg { color:var(--accent) }
.mainnav a[aria-current="page"]::after { content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:var(--r-sm);background:var(--accent) }
.header-tools { margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0 }
.language-picker { position:relative }
.lang { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:6px 12px;font-size:13.5px;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);white-space:nowrap }
.lang svg { width:15px;height:15px;fill:none;stroke:var(--text-muted);stroke-width:1.6;stroke-linecap:round }
.lang:hover { border-color:var(--text-muted) }
.lang__caret { font-size:11px;color:var(--text-muted) }
.lang__short { display:none }
.language-menu { position:absolute;right:0;top:calc(100% + 10px);min-width:176px;padding:8px;list-style:none;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
.language-menu a { display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:var(--r-sm) }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--accent-soft);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-md);background:var(--bg-panel);color:var(--text) }
.menu-toggle svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round }
.drawer { position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) 24px;background:var(--bg-panel);color:var(--text);border-bottom:1px solid var(--border) }
.drawer ul { list-style:none;margin:0;padding:0 }
.drawer a { display:flex;width:100%;align-items:center;gap:12px;min-height:48px;padding:12px 16px;border-radius:var(--r-sm) }
.drawer a:hover,.drawer a[aria-current] { background:var(--accent-soft);color:var(--accent-dark) }
.drawer__languages { margin-top:16px;padding-top:16px;border-top:1px solid var(--border) }
.nav-veil { position:fixed;inset:var(--nav-h) 0 0;z-index:-1;border:0;background:var(--veil);color:var(--text) }
html.nav-open { overflow:hidden }

/* Approved mirrored hero */
.hero { display:grid;grid-template-columns:52fr 48fr;height:var(--hero-h);overflow-x:clip }
.hero__copy { grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;padding:56px var(--gutter) 60px 72px;background:var(--hero-ink);color:var(--hero-text-mid) }
.hero__tag { position:relative;padding-bottom:18px;font-size:13px;letter-spacing:.02em;color:var(--hero-text-soft);border-bottom:1px solid var(--hero-line) }
.hero__tag::after { content:"";position:absolute;left:0;bottom:-1px;width:128px;height:1px;background:var(--hero-line-strong) }
.hero__title { font-weight:400;font-size:clamp(30px,3.35vw,48px);line-height:1.18;letter-spacing:-.012em;color:var(--hero-text-mid) }
.hero__title b { font-weight:400;color:var(--hero-text-strong) }
.hero__desc { max-width:34em;margin-top:22px;font-size:16px;line-height:1.78;color:var(--hero-text-soft) }
.hero__desc strong { font-weight:500;color:var(--hero-text-strong) }
.hero__actions { display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px }
.hero .btn-text { color:var(--hero-text-strong) }
.hero__note { margin-top:14px;font-size:13px;color:var(--hero-text-soft) }
.hero__note .ver { font-family:var(--font-mono);font-size:12.5px;color:var(--hero-text-strong) }
.hero__platforms { margin-top:36px;padding-top:22px;border-top:1px solid var(--hero-line) }
.platforms { display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0 }
.platforms li,.platforms a { display:flex;align-items:center;gap:8px;font-size:14px;line-height:1;color:var(--hero-text-mid) }
.platforms a { min-height:20px }
.platforms svg { width:16px;height:16px;flex-shrink:0 }
.ico-line { fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round }
.price-pill { display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:30px;max-width:100%;margin-top:18px;padding:5px 14px;border:1px solid var(--hero-line-strong);border-radius:var(--r-pill);font-size:12.5px;color:var(--hero-text-soft) }
.price-pill b { font-family:var(--font-mono);font-weight:500;color:var(--hero-text-strong) }
.price-pill i { font-style:normal;color:var(--hero-text-soft) }
.hero__visual { grid-column:1;grid-row:1;position:relative;overflow:hidden;background:radial-gradient(46% 40% at 82% 16%,var(--field-glow) 0%,var(--clear) 72%),radial-gradient(58% 52% at 22% 38%,var(--field-shade) 0%,var(--clear) 76%),radial-gradient(44% 38% at 6% 98%,var(--field-violet) 0%,var(--clear) 74%),linear-gradient(152deg,var(--field-deep),var(--field-main));color:var(--screen-ink) }
.stage { position:absolute;right:0;bottom:0;width:820px;height:780px }
.device { position:absolute;left:-40px;top:150px;width:760px;height:520px;padding:14px;border-radius:var(--r-device);background:var(--device-frame);color:var(--hero-text-strong);box-shadow:inset 0 0 0 1px var(--device-edge),var(--shadow-device);animation:rise .9s var(--ease) both }
.device::before { content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:var(--r-round);background:var(--device-cam) }
.screen { position:relative;height:100%;overflow:hidden;border-radius:var(--r-shot);background:var(--screen);color:var(--screen-ink);padding:86px 40px 0 150px }
.screen::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--clear) 58%,var(--screen-fade)) }
.code { list-style:none;padding:0;font-family:var(--font-mono);font-size:19px;line-height:46px;white-space:pre;color:var(--screen-ink) }
.code .sec,.code .pol { color:var(--text-muted) }
.code li:nth-child(1) { opacity:.7 }
.code li:nth-child(3) { opacity:.68 }
.code li:nth-child(4) { opacity:.44 }
.code li:nth-child(5) { opacity:.24 }
.hit { position:relative;display:inline-block;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:7px }
.hit::before { content:"";position:absolute;top:33px;right:-7px;width:7px;height:7px;border-radius:var(--r-round);background:var(--accent) }
.hit::after { content:"";position:absolute;top:41px;left:calc(100% + 3px);width:1px;height:252px;background:repeating-linear-gradient(to bottom,var(--accent) 0 4px,var(--clear) 4px 9px) }
.note-wrap { position:absolute;left:440px;top:560px;width:300px;z-index:3;animation:drift 7s 1.4s ease-in-out infinite alternate }
.note { padding:16px 20px 14px;border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-float);animation:rise .9s .22s var(--ease) both }
.note__head { display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--text-muted) }
.note__dot { width:7px;height:7px;flex-shrink:0;border-radius:var(--r-round);background:var(--accent) }
.note__body { margin:10px 0 14px;font-size:15px;line-height:1.62;color:var(--text) }
.note__body code { font-family:var(--font-mono);font-size:13.5px;color:var(--accent-dark) }
.note__foot { display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border) }
.note__src { font-family:var(--font-mono);font-size:12px;color:var(--text-muted) }
@keyframes rise { from { opacity:0;transform:translateY(16px) } to { opacity:1;transform:translateY(0) } }
@keyframes drift { from { transform:translateY(0) } to { transform:translateY(-6px) } }

/* Footer */
.site-footer { padding-top:72px;padding-bottom:32px;border-top:1px solid var(--border);background:var(--bg-panel);color:var(--text) }
.footer-grid { display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:56px }
.footer-grid > * { min-width:0 }
.footer-brand p { max-width:34em;margin-top:20px;font-size:14px;color:var(--text-muted) }
.footer-heading { margin-bottom:16px;font-size:15px;font-weight:500 }
.footer-links { list-style:none;padding:0 }
.footer-links a { display:inline-block;padding-block:6px;font-size:14px;color:var(--text-muted) }
.footer-links a:hover { color:var(--accent) }
.footer-languages { display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:40px }
.footer-languages a { padding-block:8px;font-size:14px;color:var(--text-muted) }
.footer-languages a[aria-current] { color:var(--accent) }
.footer-bottom { display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-muted) }
.footer-bottom a { color:var(--accent) }

@media (max-width:1240px) {
  .topbar__in { gap:24px }
  .mainnav a { padding-inline:9px }
  .mainnav a[aria-current="page"]::after { left:9px;right:9px }
}
@media (max-width:1100px) {
  .mainnav { display:none }
  .menu-toggle { display:flex }
  .header-tools { margin-left:auto }
  .hero__copy { padding-left:48px }
}
@media (min-width:1101px) {
  html.nav-open { overflow:auto }
  .drawer,.nav-veil { display:none!important }
}
@media (max-width:960px) {
  :root { --gutter:24px }
  .hero { grid-template-columns:minmax(0,1fr);height:auto }
  .hero__copy { grid-column:1;grid-row:1;padding:44px var(--gutter) 48px;gap:56px }
  .hero__visual { grid-column:1;grid-row:2;height:480px }
  .stage { transform:scale(.62);transform-origin:right bottom }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:32px }
  .footer-brand { grid-column:1 / -1 }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,5vw,30px) }
  .hero__title { font-size:30px }
}
@media (max-width:640px) {
  :root { --gutter:20px;--section-gap:96px }
  .topbar__in { gap:14px }
  .topbar__in .brand { flex:1;min-width:0 }
  .topbar__in .brand__name { min-width:0;overflow-wrap:anywhere;line-height:1.3 }
  .brand__name { font-size:14px }
  .lang__full { display:none }
  .lang__short { display:inline }
  .lang { min-height:44px;padding-inline:10px }
  .header-tools { gap:6px;margin-left:auto }
  .hero__title { font-size:clamp(24px,7vw,30px) }
  .hero__desc { font-size:15px }
  .hero__copy { gap:32px }
  .hero__visual { height:400px }
  .stage { transform:scale(.52) }
  .hero__platforms { margin-top:28px }
  .platforms { gap:14px 20px }
  .grid { grid-template-columns:minmax(0,1fr) }
  .card,.panel { padding:24px }
  .tilt,[data-tilt] { transform:none!important }
  .footer-grid { gap:32px 20px }
  .footer-languages { gap:6px 20px }
  .section-head { margin-bottom:28px }
}
@media (max-width:360px) {
  .brand { gap:6px }
  .brand__name { font-size:12px }
  .topbar__in { gap:8px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important;transition:none!important }
  html.reveal-ready .reveal { opacity:1;transform:none }
}