/* Layout: home = hero copy beside a delivery card with one of its findings, then a two-lane workflow diagram, then capability pairs.
   Guide = chapter list on the left + one reading column, prev/next at the bottom. System fonts only: the site must load in mainland China. */
:root {
  --bg: #f6f6f9;
  --panel: #ffffff;
  --ink: #1b1b22;
  --muted: #565864;
  --faint: #6f717c;
  --line: rgba(27, 27, 34, .10);
  --line-strong: rgba(27, 27, 34, .18);
  --accent: #4868b2;
  --on-accent: #ffffff;
  --accent-soft: #efecfc;
  --code: #f0f0f4;
  --lens: #ebe9e8;
  --red: #c42f2a; --red-soft: #fdeceb;
  --amber: #a35406; --amber-soft: #fdf1e3;
  --grey: #565864; --grey-soft: #ededf1;
  --c-s: #1d7f4e; --c-k: #4868b2; --c-v: #a35406;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --step--1: .8125rem; --step-0: .9375rem; --step-1: 1.125rem; --step-2: 1.5rem; --step-3: 2.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15151a; --panel: #1d1d24; --ink: #ececf1; --muted: #a6a8b3; --faint: #8f919c; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
    --accent: #7aaaff; --on-accent: #15151a; --accent-soft: rgba(122, 170, 255, .14); --code: #26262e; --lens: #2c2e35;
    --red: #f08a85; --red-soft: #3a2224; --amber: #e8a15a; --amber-soft: #382a1c; --grey: #a6a8b3; --grey-soft: #2a2a32;
    --c-s: #6fcf9a; --c-k: #7aaaff; --c-v: #e8a15a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15151a; --panel: #1d1d24; --ink: #ececf1; --muted: #a6a8b3; --faint: #8f919c; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --accent: #7aaaff; --on-accent: #15151a; --accent-soft: rgba(122, 170, 255, .14); --code: #26262e; --lens: #2c2e35;
  --red: #f08a85; --red-soft: #3a2224; --amber: #e8a15a; --amber-soft: #382a1c; --grey: #a6a8b3; --grey-soft: #2a2a32;
  --c-s: #6fcf9a; --c-k: #7aaaff; --c-v: #e8a15a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--step-0)/1.75 var(--font-sans); -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; line-height: 1.3; }
code { font: .85em var(--font-mono); background: var(--code); padding: .1em .4em; border-radius: 4px; }

/* Header */
.bar { max-width: 1080px; margin: 0 auto; padding-block: 20px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mark { width: 30px; height: 30px; flex: none; }
.mk-tile { fill: var(--panel); stroke: var(--line-strong); stroke-width: 6; }
.mk-ink { stroke: var(--ink); }
.mk-handle { stroke: var(--accent); }
.mk-lens { fill: var(--lens); stroke: var(--ink); }
.bar nav { margin-left: auto; display: flex; gap: 20px; font-size: var(--step--1); }
.bar nav a { color: var(--muted); text-decoration: none; padding-block: 4px; }
.bar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.bar nav a:hover { color: var(--ink); }

/* Home: hero */
.hero { max-width: 1080px; margin: 0 auto; padding-block: 40px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.hero h1 { font-size: var(--step-3); margin: 0 0 16px; letter-spacing: -.01em; }
.lead { font-size: var(--step-1); color: var(--muted); margin: 0 0 28px; max-width: 30em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background-color .15s, border-color .15s, filter .15s; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--panel); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note { font-size: var(--step--1); color: var(--faint); margin: 16px 0 0; }

/* Home: demo cards (mirror the product's delivery card and finding card) */
.demo { display: grid; min-width: 0; }
.card { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card.delivery .t { font-weight: 600; }
.card .meta { font: var(--step--1) var(--font-mono); color: var(--faint); margin: 4px 0 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: var(--step--1); line-height: 22px; padding: 0 8px; border-radius: 4px; white-space: nowrap; }
.pill::before { content: "● "; }
.pill.red { color: var(--red); background: var(--red-soft); }
.pill.grey { color: var(--grey); background: var(--grey-soft); }
.card .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.card .foot a { text-decoration: none; }
.card .enter { color: var(--ink); font-weight: 600; }
.card.finding { margin: 12px 0 0; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .35); border-left: 3px solid var(--amber); display: grid; gap: 8px; }
.finding .h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--step--1); }
.finding p { margin: 0; font-size: var(--step--1); color: var(--ink); }
.finding .k { color: var(--faint); font-weight: 600; margin-right: 6px; }
.tag { font-size: 12px; padding: 0 6px; border-radius: 4px; background: var(--grey-soft); color: var(--muted); }
.tag.p1 { background: var(--amber-soft); color: var(--amber); }
.quote { background: var(--code); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.qh { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.quote pre { margin: 0; font: 12.5px/1.6 var(--font-mono); overflow-x: auto; white-space: pre; color: var(--ink); }
.c-s { color: var(--c-s); } .c-k { color: var(--c-k); } .c-v { color: var(--c-v); }

/* Home: bands */
section.band { max-width: 1080px; margin: 0 auto; padding-block: 48px; border-top: 1px solid var(--line); }
section.band h2 { font-size: var(--step-2); margin: 0 0 8px; }
section.band > p { color: var(--muted); margin: 0 0 24px; max-width: 40em; }
.flow svg { display: block; width: 100%; height: auto; }
.flow-narrow { display: none !important; max-width: 360px; margin: 0 auto; }
.flow-steps { color: var(--faint); font-size: var(--step--1); margin: 16px 0 0; }
.fl-lane { fill: var(--panel); stroke: var(--line); }
.fl-lane-t { fill: var(--faint); font: 600 13px var(--font-sans); }
.fl-node { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; }
.fl-node-key { fill: var(--accent-soft); stroke: var(--accent); }
.fl-node-loop { stroke: var(--accent); stroke-dasharray: 4 3; }
.fl-t { fill: var(--ink); font: 600 14px var(--font-sans); }
.fl-s { fill: var(--faint); font: 12px var(--font-sans); }
.fl-arrow { stroke: var(--faint); stroke-width: 1.5; fill: none; }
.fl-loop { stroke: var(--accent); stroke-width: 1.75; fill: none; }
.fl-head { fill: var(--faint); }
.fl-head-loop { fill: var(--accent); }
.fl-label { fill: var(--muted); font: 12px var(--font-sans); }
.fl-label-loop { fill: var(--accent); font-weight: 600; }
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.caps h3 { font-size: var(--step-1); margin: 0 0 4px; }
.caps p { margin: 0; color: var(--muted); }

/* Guide */
.doc { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-block: 8px 56px; }
.toc { position: sticky; top: 24px; align-self: start; font-size: var(--step--1); padding-top: 6px; }
.toc ol, .toc ul, .chapters ol { list-style: none; margin: 0; padding: 0; }
.toc > ol > li { margin-bottom: 4px; }
.toc a { display: block; padding: 5px 10px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); }
.toc li.on > a { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }
.toc ul a { padding: 3px 10px 3px 22px; font-size: 12.5px; }
.chapters { display: none; }
article { min-width: 0; max-width: 46rem; }
.doc-header { margin-bottom: 8px; }
article h1 { font-size: var(--step-3); margin: 0 0 12px; }
article .lead { font-size: var(--step-1); color: var(--muted); margin: 0 0 16px; }
article h2 { font-size: var(--step-1); margin: 36px 0 10px; scroll-margin-top: 20px; }
article ul, article ol { padding-left: 1.3em; }
article li { margin: 4px 0; }
.table { overflow-x: auto; margin: 16px 0; }
article table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
article th, article td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
article th { color: var(--muted); font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; background: var(--panel); }
.pager a:hover { border-color: var(--accent); }
.pager small { color: var(--faint); font-weight: 400; font-size: 12px; }
.pager .next { text-align: right; grid-column: 2; }

footer.site { max-width: 1080px; margin: 0 auto; padding-block: 24px 40px; border-top: 1px solid var(--line); color: var(--faint); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 24px 48px; }
  .caps { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .chapters { display: block; margin: 0 0 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
  .chapters summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: var(--step--1); }
  .chapters ol { padding: 0 14px 10px; }
  .chapters a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; }
  .chapters a[aria-current="page"] { color: var(--accent); font-weight: 600; }
}
@media (max-width: 640px) {
  .flow-wide { display: none !important; }
  .flow-narrow { display: block !important; }
  .flow-steps { display: none; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: var(--step-2); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; text-align: left; }
}

/* Native plugin captures and local, user-initiated playback. */
.product-preview { margin: 0; min-width: 0; }
.product-preview img, .workflow-recording video, .theme-pair img, .guide-capture img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel);
}
.product-preview img { box-shadow: 0 16px 48px rgba(0, 0, 0, .10); }
.product-preview figcaption, .workflow-recording figcaption, .theme-pair figcaption, .guide-capture figcaption { margin-top: 10px; color: var(--muted); font-size: var(--step--1); }
.product-preview figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.workflow-recording { margin: 24px 0; }
.workflow-recording video { aspect-ratio: 8 / 5; }
.media-page { max-width: 1080px; margin: 24px auto 80px; }
.media-page > header { max-width: 760px; margin-bottom: 32px; }
.eyebrow { color: var(--accent); font-size: var(--step--1); letter-spacing: .04em; }
.media-step { margin-top: 56px; }
.media-step h2 { margin-bottom: 8px; }
.media-step > p { color: var(--muted); }
.theme-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.theme-pair figure, .guide-capture { margin: 0; min-width: 0; }
.guide-capture { margin-block: 24px; }
.guide-capture a { display: block; }
@media (max-width: 720px) { .theme-pair { grid-template-columns: minmax(0, 1fr); } }