:root {
    --paper: #f4f7f8;
    --surface: #ffffff;
    --ink: #17232b;
    --muted: #68777f;
    --line: #d9e2e5;
    --signal: #087e8b;
    --green: #2b8a66;
    --coral: #d85b43;
}
* { box-sizing: border-box; }
html { color-scheme: light; background: var(--paper); }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
}
a { color: inherit; }
.site-bar {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 0 max(18px, calc((100% - 920px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(244, 247, 248, .96);
}
.brand { font: 700 13px/1 Consolas, monospace; text-decoration: none; }
.level { color: var(--signal); font: 700 12px/1 Consolas, monospace; }
.article-shell { max-width: 920px; margin: 0 auto; padding: 54px 24px 72px; }
.article-head { display: block; max-width: 760px; text-decoration: none; }
.topic { margin: 0 0 15px; color: var(--signal); font: 700 12px/1.2 Consolas, monospace; }
h1 {
    max-width: 16em;
    margin: 0;
    font-family: SimSun, STSong, serif;
    font-size: clamp(32px, 6vw, 58px);
    line-height: 1.16;
    letter-spacing: 0;
}
.dek { max-width: 650px; margin: 20px 0 0; color: #53636b; font-size: 18px; line-height: 1.8; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.reading-line { height: 5px; margin: 38px 0; background: linear-gradient(90deg, var(--signal) 0 38%, var(--green) 38% 68%, var(--coral) 68% 84%, var(--line) 84%); }
.article-body { max-width: 720px; }
.article-body h2 { margin: 42px 0 12px; font-family: SimSun, STSong, serif; font-size: 25px; line-height: 1.35; }
.article-body p { margin: 0 0 22px; }
.fact {
    margin: 32px 0;
    padding: 18px 20px;
    border-left: 4px solid var(--signal);
    background: #e9f1f2;
    font-size: 15px;
}
.next-section { margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line); }
.next-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 16px; }
.next-head h2 { margin: 0; font-family: SimSun, STSong, serif; font-size: 25px; }
.next-head span { color: var(--muted); font: 12px/1.4 Consolas, monospace; }
.journey-frame { width: 100%; height: 310px; border: 1px solid var(--line); border-top: 3px solid var(--signal); background: #fff; }
.restart { display: inline-flex; padding: 11px 16px; border: 1px solid var(--signal); color: var(--signal); font-weight: 700; text-decoration: none; }
.restart:focus-visible, .brand:focus-visible { outline: 3px solid #97d3d8; outline-offset: 3px; }
body:has(#preview:target) { background: var(--surface); }
body:has(#preview:target) .site-bar, body:has(#preview:target) .article-body, body:has(#preview:target) .reading-line, body:has(#preview:target) .next-section { display: none; }
body:has(#preview:target) .article-shell { min-height: 258px; padding: 24px 22px; }
body:has(#preview:target) h1 { font-size: 25px; line-height: 1.28; }
body:has(#preview:target) .dek { display: -webkit-box; overflow: hidden; margin-top: 12px; font-size: 14px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
body:has(#preview:target) .meta { margin-top: 16px; font-size: 12px; }
body:has(#preview:target) .article-head::after { display: inline-block; margin-top: 16px; color: var(--signal); font-size: 13px; font-weight: 700; content: "阅读全文 →"; }
@media (max-width: 720px) {
    .article-shell { padding: 38px 18px 56px; }
    .journey-frame { height: 560px; }
    .next-head { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }