/* Hallmark · shape: catalog workspace · genre: editorial · theme: Specimen (deal 3/3, seed lkquanpifumeihuagw-net-e8ff·51c26525·2026-11-07·r0) · job: try · draw: target-specific
 * hero: Banner with indexed screen ledger · nav: two-tier masthead · footer: ruled colophon · imagery: real product screenshots 2 plus system-status note · signature: tool archive ledger
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, kept surfaces flat and differentiated through rules and density · hero-review: ship, in-thread · finish-review: ship, in-thread · gap: none */
:root {
  --paper: oklch(97% 0.006 245);
  --paper-alt: oklch(94% 0.009 245);
  --paper-deep: oklch(90% 0.011 245);
  --ink: oklch(18% 0.014 255);
  --ink-soft: oklch(34% 0.016 250);
  --muted: oklch(48% 0.012 248);
  --rule: oklch(80% 0.014 250);
  --rule-strong: oklch(58% 0.025 250);
  --accent: oklch(43% 0.14 257);
  --accent-ink: oklch(97% 0.006 245);
  --focus: oklch(52% 0.18 257);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;
  --sp-4xl: 144px;
  --page: 1240px;
  --gutter: 32px;
  --display: 54px;
  --section: 44px;
  --title: 23px;
  --body: 16px;
  --small: 14px;
  --dur-fast: 120ms;
  --dur-state: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-size: var(--body); line-height: 1.65; letter-spacing: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; min-width: 0; color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: 0; overflow-wrap: break-word; text-wrap: balance; }
h1 { max-width: 15ch; font-size: var(--display); }
h2 { max-width: 18ch; font-size: var(--section); }
h3 { font-size: var(--title); }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button { font: inherit; }
.page-width, .masthead-top, .site-links, .hero-frame { width: min(calc(100% - (var(--gutter) * 2)), var(--page)); margin-inline: auto; }
.skip { position: fixed; z-index: 600; left: var(--sp-md); top: var(--sp-md); padding: var(--sp-xs) var(--sp-md); background: var(--ink); color: var(--paper); transform: translateY(-160%); transition: transform var(--dur-fast) var(--ease-out); }
.skip:focus { transform: translateY(0); }
.masthead { border-bottom: 1px solid var(--rule-strong); background: var(--paper); }
.masthead-top { min-height: 70px; display: flex; align-items: center; justify-content: center; position: relative; }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp-sm); color: var(--ink); font-family: var(--font-display); font-size: 21px; text-decoration: none; white-space: nowrap; }
.wordmark img { width: 44px; height: 44px; }
.site-links { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--sp-2xl); border-top: 1px solid var(--rule); }
.site-links a { padding-block: var(--sp-sm); color: var(--ink-soft); text-decoration: none; }
.site-links a:hover, .site-links a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.site-links .nav-download { margin-left: auto; color: var(--ink); }
.nav-button { display: none; width: 44px; height: 44px; padding: var(--sp-sm); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.nav-button i { display: block; height: 1px; margin-block: var(--sp-xs); background: currentColor; transition: transform var(--dur-state) var(--ease-out); }
.catalog-hero { border-bottom: 1px solid var(--rule); }
.hero-frame { min-height: 654px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-2xl); align-items: center; padding-block: var(--sp-2xl); }
.hero-text p { max-width: 43ch; margin-top: var(--sp-lg); font-size: 18px; }
.platform-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--sp-lg); border: 1px solid var(--ink); color: var(--ink); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.action:hover { transform: translateY(-1px); }
.action:active { transform: translateY(1px); }
.action-dark { background: var(--ink); color: var(--paper); }
.action-dark:hover { background: var(--accent); color: var(--accent-ink); }
.action-line { background: transparent; }
.action-line:hover { background: var(--paper-alt); }
.screen-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); align-items: end; border-top: 3px double var(--rule-strong); padding-top: var(--sp-lg); }
.ledger-entry { margin: 0; border: 1px solid var(--rule); background: var(--paper-alt); }
.ledger-entry img { width: 100%; max-width: 400px; }
.ledger-entry figcaption { padding: var(--sp-sm); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--small); text-align: center; }
.ledger-note { min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-lg); }
.ledger-note strong { color: var(--ink); font-family: var(--display); font-size: var(--title); font-weight: 400; }
.ledger-note p { margin-top: var(--sp-md); }
.ledger-note span { margin-top: var(--sp-xl); padding-top: var(--sp-sm); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--small); }
.ledger-main { transform: translateY(-24px); }
.section-block { padding-block: var(--sp-4xl); }
.split-title { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-2xl); align-items: end; margin-bottom: var(--sp-2xl); }
.section-note { max-width: 48ch; }
.ruled-list { margin: 0; border-top: 3px double var(--rule-strong); }
.ruled-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--sp-2xl); padding-block: var(--sp-lg); border-bottom: 1px solid var(--rule); }
.ruled-list dt { color: var(--ink); font-weight: 700; }
.ruled-list dd { margin: 0; }
.ruled-list dd:last-child { color: var(--muted); }
.paper-band { background: var(--paper-alt); }
.workflow-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-2xl); align-items: start; }
.workflow-grid > div:first-child .section-note { max-width: 32ch; margin-top: var(--sp-lg); }
.process-switch { border-top: 3px double var(--rule-strong); }
.tab-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.tab-buttons button { min-height: 48px; border: 0; border-right: 1px solid var(--rule); background: transparent; color: var(--ink-soft); cursor: pointer; }
.tab-buttons button:last-child { border-right: 0; }
.tab-buttons button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tab-panel { min-height: 210px; padding: var(--sp-xl); background: var(--paper); }
.tab-panel p { margin-top: var(--sp-md); max-width: 54ch; }
.gallery h2 { margin-bottom: var(--sp-2xl); }
.gallery-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2xl); align-items: start; }
.gallery-row figure { margin: 0; }
.gallery-row img { width: 100%; max-width: 400px; max-height: 430px; object-fit: contain; object-position: top; border: 1px solid var(--rule); background: var(--paper-alt); }
.gallery-row figcaption { max-width: 34ch; padding-top: var(--sp-md); color: var(--muted); }
.gallery-note { min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-xl); background: var(--paper-alt); border-top: 3px double var(--rule-strong); }
.gallery-note p { margin-top: var(--sp-md); max-width: 45ch; }
.ink-band { background: var(--ink); color: var(--paper-alt); }
.ink-band h2, .ink-band h3 { color: var(--paper); }
.scenario-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--sp-2xl); }
.scenario-notes { border-top: 1px solid var(--rule-strong); }
.scenario-notes article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--sp-2xl); padding-block: var(--sp-xl); border-bottom: 1px solid var(--rule-strong); }
.route-section { padding-block: var(--sp-3xl); }
.route-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--sp-2xl); align-items: center; }
.route-grid > a { min-height: 120px; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-lg); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
.route-grid > a:hover { color: var(--accent); }
.route-grid span { margin-top: var(--sp-xs); color: var(--muted); }
.route-actions { display: flex; justify-content: flex-end; gap: var(--sp-sm); }
.footer-ledger { padding-block: var(--sp-3xl); border-top: 3px double var(--rule-strong); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); color: var(--ink); }
.footer-top div { display: flex; flex-wrap: wrap; gap: var(--sp-xl); }
.disclaimer { max-width: 54rem; margin: var(--sp-xl) auto 0; color: var(--muted); text-align: center; }
.copyright { margin-top: var(--sp-md); color: var(--muted); text-align: center; }
.document-head { min-height: 570px; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.document-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--sp-2xl); align-items: center; padding-block: var(--sp-2xl); }
.document-head-grid > div > p { max-width: 52ch; margin-top: var(--sp-lg); font-size: 18px; }
.document-head figure { margin: 0; justify-self: end; }
.document-head figure img { max-width: 400px; max-height: 390px; object-fit: contain; border: 1px solid var(--rule); }
.document-head figcaption { max-width: 28ch; margin-top: var(--sp-sm); color: var(--muted); font-size: var(--small); }
.manual { padding-block: var(--sp-4xl); }
.manual-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--sp-2xl); align-items: start; }
.manual-nav { position: sticky; top: var(--sp-xl); display: grid; border-top: 3px double var(--rule-strong); }
.manual-nav a { padding-block: var(--sp-md); border-bottom: 1px solid var(--rule); }
.manual-copy { max-width: 72ch; }
.manual-copy section + section { margin-top: var(--sp-3xl); padding-top: var(--sp-xl); border-top: 1px solid var(--rule); }
.manual-copy h2 { font-size: 38px; }
.manual-copy p, .manual-copy ol { margin-top: var(--sp-lg); }
.manual-copy li + li { margin-top: var(--sp-sm); }
.question-index { padding-block: var(--sp-4xl); }
.question-heading { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-2xl); align-items: end; margin-bottom: var(--sp-2xl); }
.question-heading p { max-width: 46ch; }
.question-list { border-top: 3px double var(--rule-strong); }
.question-list details { border-bottom: 1px solid var(--rule); }
.question-list summary { padding: var(--sp-lg) 0; color: var(--ink); font-family: var(--font-display); font-size: 20px; cursor: pointer; }
.question-list details p { max-width: 72ch; padding: 0 0 var(--sp-lg); }
.question-close { margin-top: var(--sp-2xl); padding-top: var(--sp-xl); border-top: 1px solid var(--ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
body { caret-color: var(--focus); scrollbar-color: var(--muted) var(--paper-alt); }
.action:disabled, .action[aria-disabled="true"], .nav-button:disabled, .tab-buttons button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

@media (max-width: 920px) {
  :root { --display: 46px; --section: 38px; --gutter: 24px; }
  .masthead-top { justify-content: space-between; }
  .nav-button { display: block; }
  .site-links { display: none; min-height: 0; align-items: stretch; gap: 0; flex-direction: column; padding-block: var(--sp-sm); }
  .site-links.is-open { display: flex; }
  .site-links a { padding: var(--sp-sm) 0; }
  .site-links .nav-download { margin-left: 0; }
  .hero-frame, .workflow-grid, .scenario-layout, .document-head-grid, .manual-grid { grid-template-columns: minmax(0, 1fr); }
  .screen-ledger { max-width: 680px; }
  .ledger-main { transform: none; }
  .manual-nav { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --display: 36px; --section: 32px; --gutter: 18px; }
  .masthead-top { min-height: 64px; }
  .wordmark { font-size: 18px; }
  .wordmark img { width: 38px; height: 38px; }
  .hero-frame { min-height: 0; gap: var(--sp-xl); padding-block: var(--sp-xl); }
  .platform-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-ledger { gap: var(--sp-xs); padding-top: var(--sp-md); }
  .ledger-entry figcaption { padding: var(--sp-xs) var(--sp-2xs); }
  .ledger-note { min-height: 0; justify-content: flex-start; padding: var(--sp-xs); }
  .ledger-note strong { font-family: var(--body); font-size: var(--small); }
  .ledger-note p { display: none; }
  .ledger-note span { margin-top: auto; padding-top: var(--sp-xs); }
  .section-block { padding-block: var(--sp-3xl); }
  .split-title, .question-heading { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  .ruled-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
  .ruled-list dd:last-child { margin-top: var(--sp-xs); }
  .gallery-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xl); }
  .gallery-row figure { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-lg); align-items: start; }
  .gallery-note { min-height: 240px; }
  .gallery-row img { max-height: 280px; }
  .scenario-notes article { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
  .route-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  .route-actions { justify-content: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .document-head { min-height: 0; }
  .document-head-grid { padding-block: var(--sp-xl); gap: var(--sp-xl); }
  .document-head figure { justify-self: center; }
  .document-head figure img { max-height: 230px; }
  .manual, .question-index { padding-block: var(--sp-3xl); }
  .manual-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-copy h2 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}