:root {
  --teal:#009688;
  --teal-dark:#00695c;
  --teal-light:#e0f2f1;
  --ink:#1f2937;
  --muted:#64748b;
  --line:#e2e8f0;
  --paper:#fff;
  --bg:#f8fafc;
  --shadow:0 10px 25px -5px rgb(15 23 42 / .08)}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
a {
  color:var(--teal-dark);
  text-decoration:none}
a:hover {
  text-decoration:underline}
button,input {
  font:inherit}
button,a {
  touch-action:manipulation}
button {
  cursor:pointer}
img {
  max-width:100%;
  height:auto}
h1,h2,h3,p {
  margin:0 0 16px}
h1,h2,h3 {
  line-height:1.35;
  text-wrap:balance}
h1 {
  font-size:clamp(28px,4vw,40px)}
h2 {
  font-size:22px}
h3 {
  font-size:18px}
p {
  color:var(--muted)}
:focus-visible {
  outline:3px solid #fbbf24;
  outline-offset:4px}
section[id],h2[id] {
  scroll-margin-top:24px}
[hidden] {
  display:none!important}
.site-container {
  width:min(1200px,100% - 48px);
  margin-inline:auto}
.gradient-bg {
  background:linear-gradient(135deg,#009688,#4db6ac)}
.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  padding:12px 20px;
  background:#fff;
  z-index:20}
.skip-link:focus {
  top:12px}
.site-header {
  color:#fff;
  box-shadow:0 2px 10px #00695c20}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px}
.site-brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  font-size:21px;
  font-weight:700;
  white-space:nowrap}
.site-brand img {
  border-radius:10px}
.site-menu {
  display:flex;
  gap:24px;
  align-items:center}
.site-menu a {
  color:#fff;
  font-size:15px}
.site-menu a[aria-current] {
  text-decoration:underline;
  text-underline-offset:7px}
.site-menu .nav-download,.contact-button {
  padding:8px 17px;
  border-radius:24px;
  background:#fff;
  color:var(--teal-dark);
  border:0;
  font-weight:600}
.contact-button {
  background:#00695c;
  color:#fff}
.menu-toggle {
  display:none;
  background:transparent;
  color:white;
  border:1px solid #ffffff80;
  border-radius:8px;
  padding:7px 12px}
.page-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:32px;
  padding-block:48px 72px}
.page-primary,.page-sidebar {
  min-width:0}
.page-sidebar {
  padding-top:8px}
.page-heading {
  margin-bottom:30px}
.page-heading p {
  max-width:65ch}
.content-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
  overflow:hidden}
.panel-title {
  padding:20px 24px;
  margin:0;
  border-bottom:1px solid #edf2f7;
  font-size:19px}
.panel-content {
  padding:24px;
  overflow-wrap:anywhere}
.panel-content ul {
  padding-left:22px;
  margin:0}
.panel-content li+li {
  margin-top:8px}
.panel-content h3 {
  margin-top:24px;
  color:var(--teal-dark)}
.panel-content h3:first-child {
  margin-top:0}
.notice {
  background:#f0fdfa;
  padding:16px;
  border-left:3px solid var(--teal);
  margin-top:20px}
.notice-danger {
  color:#b91c1c}
.text-center {
  text-align:center}
.related-links {
  padding:4px 24px}
.related-links a {
  display:block;
  padding:15px 0;
  border-bottom:1px solid #f1f5f9;
  color:var(--ink);
  font-size:15px;
  overflow-wrap:anywhere}
.related-links a:last-child {
  border:0}
.related-links a:hover {
  color:var(--teal-dark)}
.tag-cloud {
  padding:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.tag {
  display:inline-block;
  padding:4px 12px;
  border-radius:20px;
  background:#f0fdfa;
  color:var(--teal-dark);
  font-size:13px}
.tag:hover,.tag.is-active {
  background:var(--teal-dark);
  color:white;
  text-decoration:none}
.article-card {
  display:flex;
  gap:24px;
  align-items:flex-start}
.article-thumb {
  width:160px;
  height:116px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0}
.article-card .article-content {
  min-width:0;
  flex:1}
.article-title {
  font-size:22px;
  color:var(--ink);
  overflow-wrap:anywhere}
.article-card a:hover .article-title {
  color:var(--teal-dark)}
.article-description {
  font-size:15px;
  margin-bottom:12px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden}
.article-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.article-card-meta {
  padding:10px 24px;
  background:#f8fafc;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid #edf2f7;
  font-variant-numeric:tabular-nums}
.article-view {
  padding:32px}
.article-view>.article-title {
  font-size:clamp(26px,3vw,36px)}
.article-info {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  list-style:none;
  padding:0;
  margin:0 0 24px;
  color:var(--muted);
  font-size:14px}
.article-thumbnail {
  margin:0 0 24px}
.article-thumbnail img {
  border-radius:10px;
  max-height:460px;
  object-fit:contain}
.article-summary {
  padding:20px;
  background:#f0fdfa;
  border-left:3px solid var(--teal);
  margin:24px 0;
  color:var(--teal-dark)}
.article-view .article-content {
  line-height:1.9;
  overflow-wrap:anywhere}
.article-content p {
  color:#475569}
.article-content h2,.article-content h3 {
  margin:28px 0 16px}
.article-content img {
  height:auto!important;
  max-width:100%!important}
.article-content table,.legal-document table {
  display:block;
  max-width:100%;
  overflow:auto;
  border-collapse:collapse}
.article-content td,.article-content th,.legal-document td {
  border:1px solid var(--line);
  padding:10px}
.article-content pre {
  overflow:auto;
  padding:16px;
  background:#f1f5f9;
  border-radius:8px}
.article-pagination {
  margin-top:32px}
.pagination {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  justify-content:center}
.pagination a,.pagination span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff}
.pagination .active a,.pagination .active span {
  background:var(--teal-dark);
  color:#fff;
  border-color:var(--teal-dark)}
.pagination .disabled {
  color:var(--muted);
  pointer-events:none}
.jpq-banner {
  padding:52px 0;
  background:linear-gradient(135deg,#009688,#4db6ac);
  color:#fff}
.jpq-banner h1 {
  margin-bottom:12px}
.jpq-banner p {
  color:#fff}
.banner-lead {
  font-size:21px}
.content-container {
  padding-block:40px 64px}
.jpq-list {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px}
.jpq-link {
  color:var(--ink)}
.jpq-item {
  height:100%;
  margin:0;
  text-align:center;
  transition:box-shadow .2s}
.jpq-item:hover {
  box-shadow:0 12px 32px #00968825}
.jpq-item img {
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:18px;
  display:block;
  margin:0 auto 16px}
.jpq-item span {
  font-weight:600;
  overflow-wrap:anywhere}
.jpq-view {
  max-width:900px;
  margin:0 auto}
.jpq-download {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  padding:0 24px 56px}
.site-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:10px 24px;
  background:var(--teal-dark);
  color:#fff;
  border:0;
  border-radius:10px;
  font-weight:600}
.site-button:hover {
  background:#004d40;
  color:#fff;
  text-decoration:none}
.site-button img {
  width:24px;
  height:24px}
.button-dark {
  background:#1f2937}
.legal-document {
  max-width:900px;
  margin-block:48px 64px;
  padding:40px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow-wrap:anywhere}
.legal-document p {
  color:#475569}
.legal-document h1 {
  font-size:30px;
  margin-bottom:28px}
.legal-document .section {
  margin-top:24px}
.legal-document ul {
  padding-left:24px}
.webview-page .legal-document {
  margin-block:16px;
  box-shadow:none}
.webview-blank {
  display:none}
.site-footer {
  background:#111827;
  color:#cbd5e1;
  padding:40px 0 28px}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.footer-top p {
  margin:0;
  color:#cbd5e1;
  font-size:14px}
.footer-links,.friend-links,.footer-legal {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:24px}
.site-footer a {
  color:inherit}
.footer-legal {
  border-top:1px solid #334155;
  padding-top:24px;
  font-size:12px;
  color:#aab8ca}
.friend-links {
  font-size:13px}
.contact-dialog {
  border:0;
  border-radius:16px;
  padding:32px;
  max-width:min(440px,calc(100% - 32px));
  box-shadow:0 20px 60px #0f172a30}
.contact-dialog::backdrop {
  background:#0f172a90}
.contact-dialog h2 {
  padding-right:32px}
.dialog-close {
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  color:var(--muted);
  border:0;
  border-radius:8px;
  font-size:26px;
  line-height:1;
  width:36px;
  height:36px}
.dialog-close:hover {
  background:var(--teal-light);
  color:var(--teal-dark)}
.download-tips {
  position:fixed;
  inset:0;
  background:#0f172af2;
  z-index:50;
  color:#fff;
  padding:32px;
  display:grid;
  align-content:start;
  gap:24px;
  overscroll-behavior:contain}
.download-tips p {
  color:white;
  font-size:20px;
  max-width:600px}
.tips-close {
  justify-self:end;
  background:#fff;
  border:0;
  padding:10px 20px;
  border-radius:8px}
.empty-state {
  padding:48px 24px;
  text-align:center;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted)}
.support-page {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(135deg,#e0f2f1,#f8fafc)}
.support-status {
  background:white;
  padding:40px;
  border-radius:16px;
  max-width:560px;
  text-align:center;
  box-shadow:var(--shadow)}
.support-status #load {
  color:var(--teal-dark);
  margin-bottom:16px}
.brand {
  position:fixed;
  bottom:12px;
  font-size:12px;
  color:var(--muted)}

@media(min-width:1400px) {
  .site-container {
  width:min(1280px,100% - 64px)}
}

@media(max-width:1000px) {
  .site-menu {
  gap:16px}
.page-layout {
  grid-template-columns:minmax(0,1fr) 250px;
  gap:24px}
.jpq-list {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.site-brand {
  font-size:19px}
}

@media(max-width:800px) {
  .site-container {
  width:calc(100% - 32px)}
.site-nav {
  flex-wrap:wrap;
  gap:0;
  min-height:72px;
  padding-block:14px}
.menu-toggle {
  display:block}
.site-menu {
  display:none;
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  padding-top:16px}
.site-menu.is-open {
  display:flex}
.site-menu a,.site-menu button {
  padding:12px 16px}
.page-layout {
  grid-template-columns:minmax(0,1fr);
  padding-block:32px 48px}
.page-sidebar {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.page-sidebar .content-panel {
  margin:0}
.jpq-list {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-top {
  align-items:flex-start;
  flex-direction:column;
  gap:12px}
.legal-document {
  padding:24px;
  margin-block:24px}
.article-view {
  padding:24px}
.jpq-banner {
  padding:36px 0}
.panel-title {
  padding:18px 20px}
.panel-content {
  padding:20px}
}

@media(max-width:480px) {
  .article-card {
  flex-direction:column;
  gap:16px}
.article-thumb {
  width:100%;
  height:170px}
.article-title {
  font-size:20px}
.page-sidebar {
  grid-template-columns:minmax(0,1fr)}
.jpq-list {
  gap:16px}
.jpq-item .panel-content {
  padding:20px 12px}
.jpq-item img {
  width:100%;
  height:auto}
.jpq-download {
  flex-direction:column}
.jpq-download .site-button {
  width:100%}
.article-view {
  padding:20px}
.legal-document h1 {
  font-size:26px}
.footer-links {
  gap:12px 20px}
.support-status {
  padding:28px 20px}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important}
}