:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #1a202c;
  background: #fff;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #ffe0cc; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* header / footer */
.site-header { border-bottom: 1px solid #edf1f6; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { font-weight: 800; font-size: 15.5px; color: #1a202c; letter-spacing: .2px; }
.brand:hover { text-decoration: none; }
.site-header .muted { font-size: 12.5px; color: #8a97a5; letter-spacing: .06em; }
.site-footer { border-top: 1px solid #edf1f6; padding: 22px 0 46px; color: #8a97a5; font-size: 12.5px; }

/* home */
.hero { padding: 52px 0 4px; }
.hero h1 { font-size: 33px; line-height: 1.32; margin: 0 0 10px; letter-spacing: .3px; }
.hero .tagline { color: #e8590c; font-weight: 700; font-size: 14.5px; letter-spacing: .12em; margin: 0 0 16px; }
.hero .sub { color: #4a5568; font-size: 15.5px; margin: 0; }
.hero .upd { color: #8a97a5; font-size: 13px; margin: 12px 0 0; letter-spacing: .02em; }
.cards { display: flex; flex-direction: column; gap: 16px; padding: 34px 0 56px; }
.card { display: flex; border: 1px solid #e6eaf0; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .16s ease, transform .16s ease; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
.card:hover { box-shadow: 0 12px 32px rgba(26, 32, 44, .09); transform: translateY(-1px); }
.card .thumb { flex: 0 0 170px; background: #f6f8fa; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { padding: 16px 18px 14px; min-width: 0; flex: 1; }
.card h2 { font-size: 17.5px; line-height: 1.45; margin: 0 0 8px; color: #1a202c; }
.card .desc { color: #4a5568; font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; }
.card .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card .meta .date { margin-left: auto; color: #5b6b7e; font-size: 12.5px; font-weight: 600; }
.pill { display: inline-block; background: #fff1e6; color: #e8590c; border-radius: 999px; padding: 1.5px 10px; font-size: 12px; line-height: 1.7; }

/* article */
.article-header { padding: 46px 0 6px; }
.article-header h1 { font-size: 27px; line-height: 1.42; margin: 0 0 16px; letter-spacing: .2px; }
.article-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid #edf1f6; font-size: 13px; color: #8a97a5; }
.article-meta time { margin-left: auto; }
.content { padding: 8px 0 36px; overflow-wrap: break-word; }
.content h2 { font-size: 20px; line-height: 1.45; margin: 42px 0 14px; padding-left: 12px; border-left: 4px solid #ffcba8; }
.content h3 { font-size: 16.5px; margin: 28px 0 10px; }
.content p { margin: 14px 0; }
.content ul, .content ol { margin: 14px 0; padding-left: 24px; }
.content li { margin: 6px 0; }
.content blockquote { margin: 20px 0; padding: 15px 18px; background: #fff8f3; border: 1px solid #ffe3d1; border-radius: 12px; }
.content blockquote p { margin: 0; }
.content code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .86em; background: #f6f8fa; border: 1px solid #e6eaf0; border-radius: 5px; padding: 1px 6px; }
.content pre { background: #f8fafc; border: 1px solid #e6eaf0; border-left: 3px solid #ffcba8; border-radius: 10px; padding: 14px 16px; margin: 18px 0; white-space: pre-wrap; word-break: break-word; }
.content pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.table-wrap { overflow-x: auto; margin: 18px 0; }
.content table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.6; }
.content th, .content td { border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left; vertical-align: top; }
.content th { background: #f1f5f9; font-weight: 700; }
.content figure { margin: 24px 0; }
.content figure img { width: 100%; height: auto; display: block; border: 1px solid #e6eaf0; border-radius: 12px; }
.content figcaption { text-align: center; color: #8a97a5; font-size: 12.5px; margin-top: 8px; }
.content hr { border: none; border-top: 1px solid #edf1f6; margin: 30px 0; }
.article-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #edf1f6; padding: 20px 0 56px; font-size: 13.5px; color: #8a97a5; }

@media (max-width: 640px) {
  .site-header .muted { display: none; }
  .hero { padding-top: 38px; }
  .hero h1 { font-size: 26px; }
  .article-header { padding-top: 34px; }
  .article-header h1 { font-size: 22px; }
  .card { flex-direction: column; }
  .card .thumb { flex: none; height: 150px; }
  .content h2 { margin-top: 34px; }
}

/* subscribe */
.navwrap { display: flex; align-items: center; gap: 14px; }
.site-nav a { font-size: 13px; font-weight: 700; color: #e8590c; }
.hero .hero-cta { margin: 18px 0 0; }
.btn-sub { display: inline-block; background: #fff1e6; border: 1px solid #ffd8bf; color: #e8590c; font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; }
.btn-sub:hover { text-decoration: none; background: #ffe8d7; }
.narrow { max-width: 640px; }
.sub-hero { padding-bottom: 8px; }
.sub-card { border: 1px solid #e6eaf0; border-radius: 16px; padding: 22px 20px 20px; margin: 26px 0 8px; }
.plans { display: flex; gap: 10px; margin-bottom: 16px; }
.plan { flex: 1; padding: 12px 10px; border: 1.5px solid #e6eaf0; background: #fff; border-radius: 12px; font-size: 15px; font-weight: 700; color: #4a5568; cursor: pointer; font-family: inherit; }
.plan.on { border-color: #e8590c; background: #fff8f3; color: #e8590c; }
.plan .badge { font-size: 11.5px; background: #e8590c; color: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 4px; font-weight: 600; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: #5b6b7e; margin-bottom: 6px; font-weight: 600; }
.field input { width: 100%; font-size: 16px; padding: 11px 14px; border: 1.5px solid #dbe2ea; border-radius: 12px; font-family: inherit; }
.field input:focus { outline: none; border-color: #e8590c; }
.btn.primary { width: 100%; border: none; background: #e8590c; color: #fff; font-size: 16px; font-weight: 700; padding: 13px 0; border-radius: 12px; cursor: pointer; font-family: inherit; }
.btn.primary:hover { background: #d24e06; }
.btn.primary:disabled { opacity: .6; cursor: default; }
.hint { color: #8a97a5; font-size: 12.5px; margin: 12px 0 0; line-height: 1.7; }
.qrbox { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e6eaf0; text-align: center; }
.qr { display: inline-block; padding: 10px; border: 1px solid #e6eaf0; border-radius: 12px; }
.qr img { display: block; }
.qr-price { font-size: 14px; margin: 12px 0 4px; }
.qr-status { color: #5b6b7e; font-size: 13px; margin: 0 0 4px; }
.qrbox.paid .qr-status { color: #1a9e5c; font-weight: 700; }
.sub-why h2 { font-size: 17px; margin: 30px 0 10px; }
.sub-why ul { margin: 12px 0; padding-left: 22px; color: #4a5568; font-size: 14.5px; }
.sub-why li { margin: 8px 0; }

@media (max-width: 640px) {
  .plans { flex-direction: column; }
}

/* 配置图鉴：分层披露（details/summary） */
.acc { border: 1px solid #e6eaf0; border-radius: 14px; margin: 18px 0; background: #fff; transition: box-shadow .15s ease; }
.acc:hover { box-shadow: 0 8px 24px rgba(26, 32, 44, .06); }
.acc > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 15px 18px; font-size: 15.5px; font-weight: 700; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "＋"; flex: none; color: #e8590c; font-weight: 800; font-size: 15px; }
.acc[open] > summary::before { content: "－"; }
.acc[open] > summary { border-bottom: 1px solid #f1f5f9; background: #fffaf6; }
.acc > summary .s-price { margin-left: auto; flex: none; font-size: 13px; color: #e8590c; background: #fff1e6; border-radius: 999px; padding: 2px 12px; font-weight: 800; }
.acc-body { padding: 4px 18px 16px; }
.acc-body > p { margin: 10px 0; font-size: 14.5px; color: #3d4a58; }
.acc-body figure { margin: 16px 0; }
.acc-alert { margin: 14px 0 2px; background: #fff8f3; border: 1px solid #ffe3d1; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: #8a4a1e; line-height: 1.7; }
.acc-alert b { color: #c2410c; }
.live-row { display: flex; gap: 12px; margin: 16px 0; }
.live-row figure { flex: 1; margin: 0; }
.live-row figcaption { margin-top: 7px; }
@media (max-width: 640px) { .live-row { flex-direction: column; } }