:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#102b45; background:#f7fafc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
button { font:inherit; }
a { color:inherit; }
.shell { width:min(100% - 48px,1080px); margin-inline:auto; }
.lang-zh { display:none; }
html[data-lang="zh"] .lang-en { display:none; }
html[data-lang="zh"] .lang-zh { display:inline; }
.skip-link { position:absolute; z-index:5; top:-60px; left:16px; padding:10px 14px; border-radius:8px; background:#07589b; color:#fff; }
.skip-link:focus { top:10px; }
.site-header { border-bottom:1px solid #e3eaf1; background:rgba(255,255,255,.95); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:82px; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:#07589b; color:#fff; font-size:.96rem; font-weight:850; letter-spacing:-.05em; }
.brand-wordmark { display:flex; flex-direction:column; line-height:1.08; letter-spacing:.02em; }
.brand-wordmark strong { font-size:1rem; white-space:nowrap; }
.brand-wordmark > span { color:#5c7185; font-size:.75rem; font-weight:750; }
.header-actions { display:flex; align-items:center; gap:12px; }
.back-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px; color:#145583; font-size:.87rem; font-weight:700; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.language-toggle { min-width:68px; min-height:44px; padding:7px 12px; border:1px solid #d2dfeb; border-radius:10px; background:#fff; color:#154a78; cursor:pointer; font-size:.86rem; font-weight:750; }
:is(.back-link,.language-toggle,.download,.footer-inner a):focus-visible { outline:3px solid #0b77bd; outline-offset:3px; }
.intro { padding:51px 0 38px; }
.eyebrow { margin:0; color:#0c5a94; font-size:.71rem; font-weight:850; letter-spacing:.13em; }
.intro h1 { max-width:710px; margin:11px 0 13px; font-size:clamp(2rem,4.1vw,3.1rem); line-height:1.12; letter-spacing:-.035em; }
.lead { margin:0; color:#52687b; font-size:1.02rem; line-height:1.65; }
.apps-section { padding:30px 0 68px; border-top:1px solid #e1e9f0; scroll-margin-top:20px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-heading h2 { margin:6px 0 0; font-size:1.62rem; line-height:1.25; letter-spacing:-.025em; }
.section-heading > p { margin:0 0 3px; color:#5c7081; font-size:.9rem; line-height:1.5; text-align:right; }
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.app-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #dce5ee; border-radius:18px; background:#fff; box-shadow:0 6px 24px rgba(7,46,80,.065); }
.app-art { display:grid; place-items:center; height:186px; padding:25px; border-bottom:1px solid #e1e9f1; background:linear-gradient(145deg,#f8fbfe,#f1f6fb); }
.app-art img { display:block; width:100%; max-width:420px; height:100%; min-height:0; object-fit:contain; }
.app-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:22px 24px 21px; }
.app-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; width:100%; }
.app-heading h2 { margin:0; font-size:1.42rem; line-height:1.3; }
.status { padding:5px 9px; border:1px solid #c9deef; border-radius:999px; background:#edf6ff; color:#0f568f; font-size:.7rem; font-weight:750; line-height:1.3; }
.description { margin:13px 0 17px; color:#53687b; font-size:.9rem; line-height:1.65; }
.metadata { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; color:#496176; font-size:.77rem; font-weight:700; }
.metadata span { padding:5px 9px; border:1px solid #dbe5ed; border-radius:7px; background:#f7fafc; }
.download { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-top:17px; padding:10px 17px; border-radius:9px; background:#07589b; color:#fff; font-size:.86rem; font-weight:750; line-height:1.2; text-decoration:none; transition:background-color .2s ease,box-shadow .2s ease; }
.download:hover { background:#03477f; box-shadow:0 4px 14px rgba(7,70,127,.2); }
.download svg { flex:none; }
.release-note { margin:10px 0 0; color:#657688; font-size:.75rem; line-height:1.5; }
.site-footer { border-top:1px solid #e3eaf1; background:#fff; }
.footer-inner { display:flex; justify-content:space-between; gap:16px; padding-block:22px; color:#67798a; font-size:.78rem; }
.footer-inner a { color:#145583; text-decoration:none; }
.footer-inner a:hover { text-decoration:underline; }
@media (max-width:768px) {
  .shell { width:min(100% - 32px,620px); }
  .header-inner { min-height:72px; }
  .intro { padding:39px 0 32px; }
  .apps-section { padding-top:26px; padding-bottom:52px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:8px; text-align:left; }
  .app-grid { grid-template-columns:minmax(0,1fr); }
  .app-art { height:162px; }
}
@media (max-width:480px) {
  .header-actions { gap:2px; }
  .back-link { max-width:126px; padding-inline:6px; font-size:.76rem; line-height:1.2; }
  .brand-mark { width:38px; height:38px; }
  .brand-wordmark strong { font-size:.9rem; }
  .intro h1 { font-size:clamp(1.85rem,8vw,2.3rem); }
  .app-art { height:146px; padding:20px; }
  .app-body { padding:18px; }
  .footer-inner { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .download { transition:none; } }