:root {
  --ink: #202124;
  --muted: #8a8f95;
  --line: #ececec;
  --accent: #476d60;
  --accent-soft: #f3f7f5;
  --serif: "Songti SC", "Noto Serif SC", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8fa99f; outline-offset: 3px; }
.progress { position: fixed; inset: 0 0 auto; z-index: 20; height: 2px; background: transparent; }
.progress span { display: block; width: 0; height: 100%; background: var(--accent); }
main { width: min(100%, 760px); margin: 0 auto; }
.article { padding: max(28px, env(safe-area-inset-top)) 20px 80px; }
.article-head { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 13px; letter-spacing: .08em; }
h1 { margin: 0; font: 700 clamp(30px, 8vw, 44px)/1.28 var(--serif); letter-spacing: .02em; }
.summary { margin: 18px 0 16px; color: #555b59; font: 17px/1.75 var(--serif); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: var(--muted); font-size: 13px; }
.article-body { padding-top: 28px; font: 17px/1.95 var(--sans); letter-spacing: .025em; }
.article-body > p { margin: 0 0 1.55em; text-align: justify; }
.article-body h2 { margin: 2.5em 0 1em; font: 700 23px/1.55 var(--serif); letter-spacing: .02em; }
blockquote { margin: 2.4em 0; padding: 18px 18px 18px 20px; border-left: 3px solid var(--accent); color: #3f5f55; background: var(--accent-soft); font: 600 18px/1.9 var(--serif); }
.question { margin-top: 3.2em; padding: 30px 22px; border-top: 1px solid #dfe7e3; border-bottom: 1px solid #dfe7e3; text-align: center; background: #fafcfb; }
.question p { margin: 0; color: #69716e; font-size: 14px; line-height: 1.8; }
.question h2 { margin: 14px 0; color: #29483f; font-size: 26px; }
.signature { margin-top: 52px; text-align: right; }
.signature p, .signature small { display: block; margin: 0; color: var(--muted); font-size: 13px; }
.signature strong { display: block; margin: 12px 0 5px; color: #29483f; font: 600 25px/1.2 var(--serif); letter-spacing: .1em; }
.back-top { position: fixed; right: max(15px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 10; width: 42px; height: 42px; border: 1px solid rgba(71,109,96,.22); border-radius: 50%; color: #fff; background: rgba(47,76,67,.88); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 760px) { .article { padding: 56px 54px 100px; border-inline: 1px solid #f0f0f0; } }
@media (max-width: 390px) { .article { padding-inline: 18px; } .article-body { font-size: 16.5px; } .question { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }