:root { --primary: #0f766e; --background: #f0fdfa; --text: #134e4a; --accent: #14b8a6; --line: color-mix(in srgb, var(--text) 16%, transparent); --muted: color-mix(in srgb, var(--text) 63%, transparent); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Microsoft YaHei", sans-serif; line-height: 1.7; }
a { color: inherit; }
.archive-header { max-width: 1320px; margin: 0 auto; padding: 1.15rem 2rem .9rem; display: grid; grid-template-columns: 1fr auto; gap: .7rem 2rem; border-bottom: 1px solid var(--line); }
.archive-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.archive-brand small { padding-left: .55rem; border-left: 1px solid var(--line); font-size: .6rem; letter-spacing: .14em; color: var(--muted); }
.brand-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.archive-tools { display: flex; align-items: center; gap: .45rem; }
.site-search { position: relative; }.site-search input { width: 180px; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--text); font: inherit; font-size: .82rem; }
.site-search-results { position: absolute; right: 0; top: calc(100% + .35rem); width: 300px; max-height: 320px; overflow-y: auto; z-index: 10; background: var(--background); border: 1px solid var(--line); box-shadow: 0 12px 24px color-mix(in srgb, var(--text) 12%, transparent); }.site-search-result { display: block; padding: .65rem; text-decoration: none; border-bottom: 1px solid var(--line); }.site-search-result-title { display:block; font-weight: 700; font-size:.85rem; }.site-search-result-summary { display:block; color:var(--muted); font-size:.76rem; }
.nav-toggle { display: none; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; }.nav-toggle::before { content: "☰"; font-size: 1rem; }.nav-toggle[aria-expanded="true"]::before { content: "×"; font-size: 1.25rem; }.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.archive-nav { grid-column: 1 / -1; display: flex; gap: 1.25rem; overflow-x: auto; padding-top: .1rem; }.archive-nav a { text-decoration: none; font-size: .83rem; font-weight: 650; white-space: nowrap; color: var(--muted); }.archive-nav a:hover { color: var(--primary); }
main { max-width: 1120px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; color: var(--muted); font-size: .78rem; }.breadcrumb a { text-decoration: none; }.breadcrumb b { font-weight: 400; }
.section-label { margin: 0 0 .75rem; color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.archive-hero { max-width: 780px; padding: 2.5rem 0 4.5rem; }.archive-kicker { color: var(--muted); font-size: .86rem; }.archive-hero h1 { max-width: 12ch; margin: .4rem 0 1rem; font-size: clamp(2.8rem, 8vw, 6.2rem); letter-spacing: -.065em; line-height: .98; }.archive-hero > p:not(.archive-kicker) { max-width: 56ch; color: var(--muted); font-size: 1.06rem; }.archive-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 2rem; color: var(--muted); font-size: .78rem; }.archive-stats span + span { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.lead-record { border-top: 2px solid var(--text); padding-top: 1rem; }.lead-record-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 1px; background: var(--line); }.lead-record-item { min-height: 210px; padding: 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; background: var(--background); text-decoration: none; }.lead-record-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }.lead-record-item strong,.lead-record-item span { position: relative; }.lead-record-item strong { max-width: 19ch; font-size: 1.1rem; line-height: 1.3; }.lead-record-item span { margin-bottom: .5rem; color: var(--muted); font-size: .76rem; }.lead-record-item.is-featured { min-height: 300px; }.lead-record-item:hover strong { color: var(--primary); }
.archive-index { margin-top: 5rem; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); }.section-heading span { color:var(--muted); font-size:.8rem; }.archive-category { display:grid; grid-template-columns: minmax(240px,.65fr) 1.35fr; gap: 2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }.archive-category header { display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; align-content:start; }.archive-number { grid-row:span 3; color:var(--primary); font-size:.74rem; font-weight:800; }.archive-category h2 { margin:0; font-size:1.25rem; }.archive-category p { margin:.35rem 0 1rem; color:var(--muted); font-size:.9rem; }.archive-category header a { font-size:.8rem; font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }.archive-category ol { margin:0; padding:0; list-style:none; }.archive-category li { display:flex; gap:1rem; justify-content:space-between; padding:.6rem 0; border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent); }.archive-category li a { text-decoration:none; font-weight:650; }.archive-category li a:hover { color:var(--primary); }.archive-category time { color:var(--muted); font-size:.75rem; white-space:nowrap; }
.tag-index { display:flex; align-items:baseline; flex-wrap:wrap; gap:.55rem; margin-top:4rem; }.tag-index .section-label { width:100%; }.tag-index span { padding:.25rem .55rem; border:1px solid var(--line); border-radius:999px; font-size:.82rem; }.tag-index small { color:var(--muted); }.archive-faq { max-width:760px; margin-top:4rem; }.archive-faq details { border-top:1px solid var(--line); padding:.9rem 0; }.archive-faq summary { cursor:pointer; font-weight:700; }.archive-faq p { color:var(--muted); }
.category-header { max-width:700px; padding:1rem 0 3rem; border-bottom:2px solid var(--text); }.category-header h1 { margin:.25rem 0; font-size:clamp(2.4rem,6vw,4.5rem); letter-spacing:-.055em; line-height:1; }.category-header p:not(.section-label) { color:var(--muted); }.record-list article { display:grid; grid-template-columns:70px 1fr; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }.record-no { color:var(--primary); font-size:.8rem; font-weight:800; }.record-list h2 { margin:0; font-size:clamp(1.15rem,2vw,1.5rem); }.record-list h2 a { text-decoration:none; }.record-list h2 a:hover { color:var(--primary); }.record-list time { color:var(--muted); font-size:.78rem; }.pagination { display:flex; gap:.4rem; margin-top:2rem; }.pagination a,.pagination span { min-width:2rem; padding:.35rem .6rem; border:1px solid var(--line); text-align:center; text-decoration:none; }.pagination span { background:var(--text); color:var(--background); }
.archive-article { max-width:900px; }.archive-article header { max-width:820px; }.archive-article h1 { margin:.2rem 0 1rem; font-size:clamp(2.25rem,5vw,4.5rem); line-height:1.06; letter-spacing:-.055em; }.article-meta { color:var(--muted); font-size:.82rem; }.article-cover { width:100%; max-height:520px; margin-top:2rem; object-fit:cover; }.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:3.5rem; margin-top:3rem; }.article-body { font-size:1.04rem; }.article-body h2 { margin:2.8rem 0 .8rem; font-size:1.55rem; letter-spacing:-.025em; }.article-body h3 { margin:2rem 0 .6rem; }.article-body a { color:var(--primary); text-underline-offset:3px; }.article-toc { position:sticky; top:1rem; align-self:start; border-left:1px solid var(--line); padding-left:1rem; font-size:.8rem; }.article-toc p { margin-top:0; font-weight:800; }.article-toc ol { margin:0; padding-left:1rem; }.article-toc a { text-decoration:none; color:var(--muted); }.download-note { margin-top:1.5rem; padding:.9rem 1rem; border-left:3px solid var(--primary); background:color-mix(in srgb,var(--primary) 7%,transparent); }.download-note a { font-weight:800; color:var(--primary); }.article-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:2rem; }.article-tags span { color:var(--muted); font-size:.78rem; }.article-tags span:not(:last-child)::after { content:"/"; margin-left:.45rem; }.author-box { display:flex; gap:.8rem; align-items:flex-start; margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--line); }.author-avatar,.comment-avatar { width:2.5rem; height:2.5rem; flex:0 0 2.5rem; border-radius:50%; object-fit:cover; }.author-box p { margin:0 0 .2rem; font-weight:800; }.author-box small { color:var(--muted); }.related-records { display:grid; gap:.7rem; margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--line); }.related-records a { text-decoration:none; font-weight:650; }.related-records a:hover { color:var(--primary); }.comments,.comment-compose { margin-top:3rem; padding-top:1.2rem; border-top:2px solid var(--text); }.comments h2 { font-size:1.1rem; }.comment,.comment-reply { display:flex; gap:.7rem; padding:1rem 0; }.comment { border-bottom:1px solid var(--line); }.comment > div { flex:1; }.comment b { font-size:.85rem; }.comment time { margin-left:.5rem; color:var(--muted); font-size:.74rem; }.comment p { margin:.35rem 0 0; }.comment-reply { margin-top:.65rem; border-top:1px solid var(--line); }.comment-reply .comment-avatar { width:1.9rem; height:1.9rem; flex-basis:1.9rem; }.comment-compose form { display:flex; gap:.7rem; }.comment-compose-fields { flex:1; display:grid; gap:.7rem; }.comment-compose label { display:grid; gap:.3rem; font-size:.8rem; font-weight:700; }.comment-compose input,.comment-compose textarea { width:100%; border:1px solid var(--line); padding:.6rem; background:transparent; color:var(--text); font:inherit; }.comment-compose-actions { display:flex; justify-content:space-between; gap:.8rem; align-items:center; }.comment-compose-actions p { margin:0; color:var(--muted); font-size:.78rem; }.comment-compose-actions button { border:0; padding:.55rem .9rem; background:var(--text); color:var(--background); font:inherit; font-weight:750; cursor:pointer; }.static-document { max-width:760px; }.archive-footer { max-width:1320px; margin:0 auto; padding:1.4rem 2rem; display:flex; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.76rem; }.archive-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.8rem 1.2rem; }.archive-footer a { text-decoration:none; }
@media (max-width:760px) { .archive-header { padding:.9rem 1rem; grid-template-columns:1fr auto; }.archive-brand small { display:none; }.nav-toggle { display:inline-grid; place-items:center; }.archive-nav { display:none; grid-column:1/-1; padding:.75rem 0 .1rem; border-top:1px solid var(--line); flex-wrap:wrap; gap:.55rem 1rem; }.archive-nav.is-open { display:flex; }.archive-hero { padding:1.5rem 0 3rem; }.lead-record-grid { grid-template-columns:1fr; }.lead-record-item,.lead-record-item.is-featured { min-height:190px; }.archive-category { grid-template-columns:1fr; gap:1.25rem; }.archive-category li { display:block; }.archive-category time { display:block; margin-top:.2rem; }.article-layout { grid-template-columns:1fr; gap:1.5rem; }.article-toc { position:static; order:-1; }.archive-footer { padding:1.2rem 1rem; flex-direction:column; }.archive-footer nav { justify-content:flex-start; } main { padding:2.2rem 1rem 4rem; } }
:root {
  --primary: #0f766e;
  --bg: #f0fdfa;
  --text: #134e4a;
  --accent: #14b8a6;
}
.card {
  background: var(--bg);
  border: 1px solid #ccfbf1;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.1);
}
.button {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: 8px;
  transition: transform 0.2s;
}
.button:hover { transform: translateY(-1px); }