/* Hallmark · macrostructure: Split Studio · theme: custom 墨金 · pre-emit critique: P4 H4 E3 S4 R4 V4
 * Source review only; live viewport review not performed. User-directed system Chinese fonts and gold rules.
 */
@import url('/tokens.css');
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none!important; }
html { overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; overflow-x:clip; background:var(--color-paper); color:var(--color-body); font-family:var(--font-body); font-size:var(--text-base); line-height:1.8; }
button,input { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:var(--color-clear); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--color-accent-soft); }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid var(--color-focus); outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,h4 { color:var(--color-ink); font-weight:500; font-style:normal; margin:0; overflow-wrap:anywhere; min-width:0; }
h1,h2 { font-family:var(--font-display); }
h2 { font-size:var(--text-heading); line-height:1.45; }
h3 { font-size:1.25rem; line-height:1.6; }
p { margin:0 0 1.25rem; }
ul,ol { padding-inline-start:1.5rem; }
figure { margin:0; }
strong { color:var(--color-ink); font-weight:600; }
::selection { background:var(--color-accent); color:var(--color-paper); }
.container { width:min(100% - 3rem, 76rem); margin-inline:auto; }
.skip { position:fixed; top:.5rem; left:1rem; z-index:var(--z-sticky); background:var(--color-ink); color:var(--color-paper); padding:.5rem 1rem; transform:translateY(-180%); }
.skip:focus { transform:none; }
.topbar { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.wordmark { display:inline-flex; align-items:center; gap:.875rem; color:var(--color-ink); white-space:nowrap; min-height:44px; }
.wordmark span:first-child { font-family:var(--font-display); font-size:1.75rem; letter-spacing:.04em; }
.wordmark small { font-size:.75rem; line-height:1.65; color:var(--color-muted); border-inline-start:1px solid var(--color-rule-strong); padding-inline-start:.875rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.75rem; min-height:48px; padding:.625rem 1.375rem; border:1px solid var(--color-rule-strong); color:var(--color-ink); font-weight:500; white-space:nowrap; transition:transform var(--dur-micro) var(--ease-out); }
.btn:hover { background:var(--color-paper-3); color:var(--color-accent-soft); border-color:var(--color-accent); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--color-accent); color:var(--color-paper); border-color:var(--color-accent); }
.btn-primary:hover { background:var(--color-accent-soft); color:var(--color-paper); }
.arrow { display:inline-block; font-family:var(--font-body); font-size:1.25rem; line-height:1; }
.mainnav { border-block:1px solid var(--color-rule); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.navlinks { display:flex; flex-wrap:wrap; column-gap:2.125rem; }
.navlinks a { display:flex; align-items:center; min-height:52px; font-size:.875rem; color:var(--color-muted); white-space:nowrap; }
.navlinks a:hover,.navlinks a[aria-current=page] { color:var(--color-accent-soft); }
.navlinks a[aria-current=page] { text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; }
.navnote { font-size:.75rem; letter-spacing:.1em; color:var(--color-muted); white-space:nowrap; }
.hero { padding:3.5rem 0 2.5rem; display:grid; gap:2.5rem; align-items:center; }
.hero-copy { position:relative; z-index:1; }
.identity { font-size:.875rem; letter-spacing:.08em; color:var(--color-accent); margin-bottom:1.5rem; display:flex; align-items:center; gap:.75rem; }
.identity::before { content:''; width:1.5rem; height:1px; background:var(--color-accent); }
.hero h1 { font-size:var(--text-display); line-height:1.2; letter-spacing:.02em; }
.hero h1 .ai { font-size:.5em; margin-inline-end:.2em; letter-spacing:-.04em; }
.gift-link { display:inline-flex; align-items:center; gap:.75rem; font-size:clamp(1rem,1.55vw,1.25rem); color:var(--color-accent-soft); margin:1.5rem 0 1.375rem; padding-bottom:.5rem; border-bottom:1px solid var(--color-accent); line-height:1.7; }
.gift-link .arrow { flex-shrink:0; }
.hero-lede { max-width:31rem; font-size:1.0625rem; line-height:1.95; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:1.5rem; }
.text-link { display:inline-flex; align-items:center; gap:.625rem; min-height:44px; color:var(--color-accent-soft); font-size:.9375rem; white-space:nowrap; }
.fine { font-size:.8125rem; color:var(--color-muted); line-height:1.8; }
.hero .fine { margin:1rem 0 0; max-width:32rem; }
.hero-art { position:relative; aspect-ratio:1; width:100%; padding:.75rem; border:1px solid var(--color-rule); }
.hero-art::before { content:''; position:absolute; inset:.75rem; border:1px solid var(--color-rule-strong); pointer-events:none; z-index:1; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:50% 28%; filter:brightness(.72) saturate(.7); }
.art-caption { position:absolute; bottom:2rem; left:2rem; right:2rem; color:var(--color-ink); padding:1rem; background:var(--color-overlay); }
.art-caption strong { display:block; font-family:var(--font-display); font-size:1.5rem; letter-spacing:.06em; font-weight:400; }
.art-caption span { font-size:.8125rem; color:var(--color-body); }
.quicklinks { display:grid; border-block:1px solid var(--color-rule); margin-bottom:1rem; }
.quicklinks a { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.125rem 0; }
.quicklinks a+a { border-top:1px solid var(--color-rule); }
.quicklinks strong { font-weight:400; font-size:1.0625rem; }
.quicklinks small { display:block; color:var(--color-muted); font-size:.8125rem; }
.quicklinks .arrow { color:var(--color-accent); }
.section { padding-block:var(--space-section); }
.section-head { margin-bottom:2.5rem; max-width:45rem; }
.section-head p { margin:1rem 0 0; }
.intro-grid,.split { display:grid; gap:2.5rem; align-items:start; }
.intro-text p { margin-top:1.5rem; max-width:35rem; }
.feature-lines { margin:0; }
.feature-lines > div { padding:1.375rem 0; border-bottom:1px solid var(--color-rule); }
.feature-lines > div:first-child { padding-top:0; }
.feature-lines dt { color:var(--color-ink); font-size:1.1875rem; margin-bottom:.375rem; }
.feature-lines dd { margin:0; color:var(--color-muted); font-size:.9375rem; }
.entry-section { background:var(--color-paper-2); border-block:1px solid var(--color-rule); padding-block:3.5rem; }
.entry-panel h2 { margin-bottom:1rem; }
.entry-domain { font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.5rem); color:var(--color-accent-soft); line-height:1.4; overflow-wrap:anywhere; }
.entry-panel .fine { margin:.5rem 0 1.25rem; }
.entry-list { margin:0; }
.entry-list div { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--color-rule); font-size:.875rem; }
.entry-list dt { color:var(--color-muted); }
.entry-list dd { margin:0; overflow-wrap:anywhere; color:var(--color-ink); }
.section-pair { display:grid; gap:2rem; }
.steps { list-style:none; counter-reset:steps; margin:0; padding:0; }
.steps li { counter-increment:steps; position:relative; padding:0 0 2rem 3.5rem; }
.steps li::before { content:counter(steps,decimal-leading-zero); position:absolute; left:0; top:.15rem; font-family:var(--font-display); color:var(--color-accent); font-size:1.5rem; }
.steps li p { margin:.5rem 0 0; font-size:.9375rem; }
.sample { background:var(--color-paper-2); padding:1.75rem; }
.sample-label { margin:0 0 1rem; font-size:.8125rem; color:var(--color-accent); }
.sample blockquote { margin:0; font-family:var(--font-display); font-size:1.375rem; line-height:1.9; color:var(--color-ink); }
.sample .fine { margin:1.5rem 0 0; }
.bonus-strip { border-block:1px solid var(--color-rule); padding-block:2.5rem; display:grid; gap:1.5rem; align-items:center; }
.bonus-strip h2 { font-size:1.75rem; margin-bottom:.625rem; }
.bonus-strip p { margin:0; font-size:.9375rem; max-width:43rem; }
.article-grid { display:grid; gap:1.5rem; }
.article-card { border:1px solid var(--color-rule); padding:1.75rem; display:flex; flex-direction:column; align-items:flex-start; }
.article-card .category { color:var(--color-accent); font-size:.8125rem; margin:0 0 1rem; }
.article-card h3 { font-family:var(--font-display); font-size:1.5rem; }
.article-card p { color:var(--color-muted); font-size:.9375rem; margin:1rem 0; }
.article-card .text-link { margin-top:auto; }
.article-card:hover { border-color:var(--color-rule-strong); }
.faq-block { display:grid; gap:2rem; }
.faq-list details { border-bottom:1px solid var(--color-rule); }
.faq-list details:first-child { border-top:1px solid var(--color-rule); }
.faq-list summary { cursor:pointer; padding:1.25rem 2rem 1.25rem 0; color:var(--color-ink); position:relative; list-style:none; min-height:48px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; position:absolute; right:0; top:1.2rem; color:var(--color-accent); font-size:1.25rem; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { font-size:.9375rem; padding:0 1.5rem 1rem 0; margin:0; }
.faq-list p a { text-decoration:underline; text-underline-offset:4px; color:var(--color-accent-soft); }
.footer { border-top:1px solid var(--color-rule); padding-block:3rem 1.5rem; }
.footer-lead { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; padding-bottom:2.5rem; }
.footer-sentence { font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.75rem); color:var(--color-ink); line-height:1.5; margin:0; }
.footer-links { display:flex; flex-wrap:wrap; column-gap:1.5rem; margin-bottom:1rem; }
.footer-links a { font-size:.875rem; min-height:44px; display:flex; align-items:center; white-space:nowrap; }
.footer-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; padding-top:1.25rem; border-top:1px solid var(--color-rule); }
.footer-meta p { margin:0; font-size:.75rem; color:var(--color-muted); }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem; padding-block:1.5rem; color:var(--color-muted); font-size:.8125rem; }
.crumbs a { min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.page-header { padding:1.25rem 0 2.75rem; max-width:54rem; }
.page-header h1 { font-size:clamp(2rem,4.5vw,3.5rem); line-height:1.45; }
.page-header .lede { font-size:1.125rem; margin:1.25rem 0 1.5rem; }
.page-meta { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.8125rem; color:var(--color-muted); }
.document-grid { display:grid; gap:2.5rem; padding-bottom:var(--space-section); }
.toc { border-top:1px solid var(--color-rule-strong); padding-top:1rem; }
.toc p { font-size:.875rem; color:var(--color-accent); margin-bottom:.5rem; }
.toc a { display:block; padding:.375rem 0; font-size:.875rem; min-height:44px; }
.prose { min-width:0; max-width:49rem; }
.prose h2 { font-family:var(--font-display); font-size:1.75rem; margin:3rem 0 1.125rem; }
.prose section:first-child h2 { margin-top:0; }
.prose h3 { margin:1.75rem 0 .75rem; }
.prose p,.prose li { line-height:1.95; }
.prose li { margin-bottom:.5rem; }
.prose a { color:var(--color-accent-soft); text-decoration:underline; text-underline-offset:4px; }
.prose .btn { text-decoration:none; }
.prose .btn-primary { color:var(--color-paper); }
.note { background:var(--color-paper-2); padding:1.25rem 1.5rem; margin:1.5rem 0; }
.note p:last-child { margin-bottom:0; }
.template-box { background:var(--color-paper-2); padding:1.5rem; margin:1.5rem 0; }
.template-box pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-family:var(--font-body); font-size:.9375rem; line-height:1.9; }
.copy-action { margin-top:1rem; background:none; cursor:pointer; font-size:.875rem; }
.copy-status { font-size:.875rem; margin-top:.75rem; color:var(--color-accent-soft); min-height:1.8em; }
.comparison { border-collapse:collapse; width:100%; margin:1.5rem 0; font-size:.9375rem; }
.comparison th,.comparison td { padding:1rem; text-align:left; border-bottom:1px solid var(--color-rule); vertical-align:top; }
.comparison th { color:var(--color-ink); font-weight:500; background:var(--color-paper-2); }
.source-note { border-top:1px solid var(--color-rule); margin-top:2.5rem; padding-top:1.5rem; font-size:.875rem; color:var(--color-muted); }
.related { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.related a { font-size:.875rem; padding:.5rem 0; }
.error-page { padding-block:6rem; max-width:43rem; }
.error-page h1 { font-size:3rem; margin-bottom:1.5rem; }
@media(min-width:40rem) {
  .container { width:min(100% - 5rem,76rem); }
  .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quicklinks { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .quicklinks a { padding:1.5rem; }
  .quicklinks a:first-child { padding-left:0; }
  .quicklinks a+a { border-top:0; border-left:1px solid var(--color-rule); }
  .hero-art { max-width:36rem; margin-inline:auto; }
}
@media(min-width:60rem) {
  .hero { grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:3rem; padding:3.5rem 0; }
  .hero-art { max-width:none; }
  .intro-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:7rem; }
  .split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem; align-items:center; }
  .section-pair { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem; }
  .bonus-strip { grid-template-columns:minmax(0,1fr) auto; }
  .faq-block { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6rem; }
  .document-grid { grid-template-columns:13rem minmax(0,1fr); gap:4rem; }
  .toc { position:sticky; top:2rem; align-self:start; }
}
@media(max-width:39.99rem) {
  .topbar { min-height:80px; gap:1rem; }
  .wordmark { gap:.5rem; }
  .wordmark span:first-child { font-size:1.5rem; }
  .wordmark small { display:none; }
  .topbar .btn { font-size:.8125rem; padding:.5rem .875rem; }
  .navlinks { width:100%; justify-content:space-between; gap:.25rem; }
  .navlinks a { font-size:.8125rem; }
  .navnote { display:none; }
  .hero { padding-top:2.5rem; }
  .hero h1 { font-size:4.5rem; }
  .hero-art { aspect-ratio:1.15; }
  .hero-lede { font-size:1rem; }
  .gift-link { gap:.5rem; font-size:1rem; }
  .gift-link .arrow { display:none; }
  .hero-actions { gap:.5rem 1.25rem; }
  .hero .fine { font-size:.75rem; }
  .art-caption { bottom:1.25rem; left:1.25rem; right:1.25rem; padding:.75rem; }
  .article-card { padding:1.5rem; }
  .comparison th,.comparison td { padding:.75rem .5rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}