/* 溯源案例沿用正式网站的限宽、排版与材料；只改变本案例，不缩放页面或共享导航。 */
.trace-preview { margin-top:30px; }
.trace-preview-figure { max-width:730px; margin-inline:auto; scroll-margin-top:90px; }
.trace-preview-figure img { width:100%; border-radius:10px; border:1px solid var(--line); }
.trace-preview-figure figcaption { padding:12px 0; color:var(--soft); font-size:12px; }
.trace-preview-journey { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:8px 0 0; border-top:1px solid var(--line); }
.trace-preview-journey li { border-bottom:1px solid var(--line); }
.trace-preview-journey a { display:flex; align-items:center; gap:12px; padding:14px 10px; min-height:48px; font-size:13px; }
.trace-preview-journey a:hover { color:var(--deep); background:#fff5ef; }
.trace-preview-journey span { color:var(--deep); font-size:12px; }
.trace-preview-journey svg { margin-left:auto; width:16px; height:16px; }
.trace-preview .project-close h2 { white-space:pre-line; }
.trace-detail { width:min(86%,1120px); margin:auto; }
.trace-section { padding-block:52px; scroll-margin-top:85px; }
.trace-reading { max-width:1000px; margin-inline:auto; }
.trace-opening { padding-top:28px; padding-bottom:0; }
.trace-eyebrow { color:var(--deep); font-size:12px; font-weight:550; letter-spacing:.05em; margin-bottom:16px; }
.trace-hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:42px; align-items:center; padding:32px 0 20px; }
.trace-hero h1 { font-size:44px; line-height:1.35; }
.trace-hero-statement { font-size:22px; line-height:1.65; color:var(--ink); font-weight:550; margin-top:20px; }
.trace-hero-statement span { color:var(--deep); }
.trace-hero-description { font-size:15px; white-space:pre-line; margin-top:16px; max-width:28em; }
.trace-hero-copy .button { margin-top:22px; }
.trace-hero-figure { min-width:0; }
.trace-hero-figure img { width:100%; border-radius:10px; border:1px solid var(--line); }
.trace-hero-figure figcaption { margin-top:12px; font-size:12px; color:var(--soft); }
.trace-detail .chapter-nav { flex-wrap:wrap; justify-content:flex-start; gap:0 30px; }
.trace-detail .chapter-nav a { display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:13px; }
.trace-detail .chapter-nav svg { width:14px; height:14px; }
.trace-heading h2 { font-size:30px; line-height:1.5; white-space:pre-line; }
.trace-heading>p:last-child:not(.trace-eyebrow) { font-size:14px; margin-top:14px; max-width:55em; }
.trace-problem,.trace-boundary { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:60px; }
.trace-problem>div:last-child p { font-size:15px; margin-bottom:16px; white-space:pre-line; }
.trace-problem .trace-emphasis { font-weight:550; color:var(--deep); margin:24px 0 0; }
/* 任务目录与媒体独立：演示图不上满屏，文字说明在图下保持可读，手机自动单列。 */
.trace-evidence { max-width:1000px; margin:auto; padding:32px; background:var(--lilac); border:1px solid var(--line); border-radius:12px; }
.trace-gallery-layout { display:grid; grid-template-columns:170px minmax(0,1fr); gap:26px; margin-top:26px; align-items:start; }
.trace-step-list { display:grid; gap:4px; }
.trace-step { display:flex; align-items:center; gap:10px; min-height:58px; text-align:left; padding:12px 10px; border:0; border-bottom:1px solid #cdc5df; background:transparent; border-radius:5px 5px 0 0; }
.trace-step span { color:var(--soft); font-size:12px; }
.trace-step strong { font-size:13px; font-weight:550; }
.trace-step:hover { background:#ffffff90; }
.trace-step.is-active { color:var(--deep); background:#fff5ef; border-bottom-color:var(--deep); }
.trace-step.is-active span { color:var(--deep); }
.trace-step-view { min-width:0; }
.trace-illustration { max-width:730px; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.trace-image-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 12px; background:#fff; border-bottom:1px solid var(--line); font-size:12px; color:var(--soft); }
.trace-image-toolbar a { display:inline-flex; align-items:center; gap:7px; min-height:44px; flex-shrink:0; color:var(--deep); }
.trace-image-toolbar svg { width:16px; height:16px; }
.trace-illustration img { width:100%; height:auto; }
.trace-illustration figcaption { padding:10px 12px; border-top:1px solid var(--line); font-size:12px; color:var(--soft); }
.trace-illustration .image-error { padding:28px; min-height:160px; }
.trace-step-narrative { padding-top:22px; }
.trace-step-narrative h3 { font-size:22px; }
.trace-step-narrative p { margin-top:10px; font-size:15px; line-height:1.85; }
.trace-step-narrative ul { padding-left:18px; margin:14px 0 0; color:var(--soft); font-size:14px; }
.trace-step-narrative li+li { margin-top:8px; }
.trace-step-navigation { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:20px; }
.trace-position { margin-right:auto; font-size:12px; color:var(--deep); }
.trace-control { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; background:#fff; border:1px solid #b9b0cb; border-radius:6px; font-size:13px; }
.trace-control:hover:not(:disabled) { color:var(--deep); border-color:var(--deep); }
.trace-control svg { width:16px; height:16px; }
.trace-capability-list { margin:26px 0 0; padding:0; border-top:1px solid var(--line); }
.trace-capability-list>div { display:grid; grid-template-columns:190px minmax(0,1fr); gap:32px; padding:20px 0; border-bottom:1px solid var(--line); }
.trace-capability-list dt { font-size:17px; font-weight:550; }
.trace-capability-list dd { margin:0; font-size:15px; color:var(--soft); }
.trace-architecture { max-width:1000px; margin:auto; background:#fff4ed; border-radius:12px; padding:34px 32px; }
.trace-architecture-layers { list-style:none; counter-reset:layer; padding:0; margin:26px 0 0; }
.trace-architecture-layers li { counter-increment:layer; display:grid; grid-template-columns:22px 110px minmax(0,1fr); gap:12px 24px; padding:20px 0; border-top:1px solid #e2c9bb; align-items:baseline; }
.trace-architecture-layers li::before { content:'0' counter(layer); color:var(--deep); font-size:12px; }
.trace-architecture-layers h3 { font-size:16px; }
.trace-architecture-layers strong { font-size:15px; font-weight:550; overflow-wrap:anywhere; }
.trace-architecture-layers p { grid-column:3; font-size:14px; }
.trace-note { font-size:12px; margin-top:20px; }
.trace-boundary ul { margin:0; padding-left:18px; color:var(--soft); font-size:14px; }
.trace-boundary li { margin-bottom:14px; padding-left:4px; }
.trace-ending { display:flex; align-items:center; justify-content:space-between; gap:40px; border-top:1px solid var(--line); }
.trace-ending .button { flex-shrink:0; }
@media(max-width:1180px) {
  .trace-hero { gap:28px; }.trace-hero h1 { font-size:38px; }.trace-hero-statement { font-size:20px; }
  .trace-heading h2 { font-size:27px; }.trace-evidence,.trace-architecture { padding-inline:26px; }
  .trace-gallery-layout { grid-template-columns:150px minmax(0,1fr); gap:20px; }
  .trace-problem,.trace-boundary { gap:36px; }
}
@media(max-width:700px) {
  #project-render.is-traceability .project-intro { order:0; margin-top:14px; }
  #traceability-content { order:1; }.trace-preview { margin-top:22px; }
  .trace-preview-journey { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trace-preview-journey a { gap:8px; padding-inline:6px; }.trace-preview-journey svg { display:none; }
  .trace-detail { width:calc(100% - 40px); }.trace-section { padding-block:36px; }.trace-opening { padding-top:24px; padding-bottom:0; }
  .trace-hero { grid-template-columns:1fr; gap:24px; padding:26px 0 14px; }.trace-hero h1 { font-size:34px; }
  .trace-hero-statement { font-size:19px; margin-top:16px; }.trace-hero-figure { max-width:560px; }
  .trace-detail .chapter-nav { column-gap:19px; }.trace-detail .chapter-nav a { font-size:12px; }.trace-detail .chapter-nav svg { display:none; }
  .trace-heading h2 { font-size:25px; }.trace-problem,.trace-boundary { grid-template-columns:1fr; gap:24px; }
  .trace-evidence { padding:24px 16px; }.trace-gallery-layout { grid-template-columns:1fr; gap:20px; margin-top:22px; }
  .trace-step-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .trace-step { gap:7px; min-height:50px; padding:9px 7px; border:1px solid #b9b0cb; border-radius:5px; }
  .trace-step strong { font-size:12px; }.trace-image-toolbar { padding-inline:10px; align-items:center; gap:8px; }
  .trace-image-toolbar svg { display:none; }.trace-illustration figcaption { padding:10px; }
  .trace-step-narrative h3 { font-size:20px; }.trace-step-narrative ul { font-size:14px; }
  .trace-step-navigation { gap:8px; }.trace-control { font-size:12px; padding-inline:9px; }.trace-control svg { width:14px; }
  .trace-capability-list>div { grid-template-columns:1fr; gap:8px; padding-block:17px; }
  .trace-architecture { padding:26px 20px; }.trace-architecture-layers li { grid-template-columns:22px minmax(0,1fr); gap:8px 12px; }
  .trace-architecture-layers li strong,.trace-architecture-layers li p { grid-column:2; }
  .trace-ending { display:block; }.trace-ending .button { margin-top:24px; }
}
@media(min-width:701px) and (max-width:960px) { .trace-detail { width:min(calc(100% - 64px),760px); } }
@media(max-width:360px) { .trace-position { width:100%; }.trace-hero-statement { font-size:18px; }.trace-heading h2 br { display:none; } }