/* B.Duck theme: bright lemon accents, near-white yellow surfaces and neutral ink.
   Shared layout tokens carry readable text; fills and lines use the yellow scale. */
body {
  --bd-accent-fill: #f3dc43;
  --bd-accent-mid: #fae982;
  --bd-accent-soft: #fff7bc;
  --bd-accent-tint: #fffce8;
  --bd-accent-line: #d9cb38;
  --bd-accent-border: #eee39a;
  --bd-accent-wash: rgba(243, 220, 67, .18);
  --bd-accent-ink: #30363b;
  --bd-muted-ink: #626a70;
  --bd-body-size: 16px;
  --bd-body-leading: 1.6;
  --bd-content-gap: 44px;
  /* 柠檬黄在白底上读不了（1.4:1），章名与编号用深一档的琥珀黄，
     对位 canvo 的紫：同样是主题色本身在承担标题，不靠高亮块。 */
  --bd-accent-deep: #c08a00;
  /* Yellow surfaces share the Design Judgment pill foreground. */
  --bd-accent-on-fill: var(--bd-accent-deep);
  --token-7cbca512-b5c6-4555-b418-4fbe2df8fc9a: var(--bd-accent-deep);
  --token-c4ece689-c50c-4150-9ac6-a1501e869801: rgba(192, 138, 0, .6);
  --local-tag-bg: var(--bd-accent-soft);
}


/* Explanatory copy and image captions share the page's body-text scale. */
.bd-planning-path p,
.bd-planning-prompts,
.bd-outcome-case > p,
.bd-evidence figcaption,
.bd-workspace-detail figcaption,
.bd-workspace-detail h4,
.bd-workspace-detail p,
.bd-training-path h5,
.bd-training-path p {
  font-size: var(--bd-body-size);
  line-height: var(--bd-body-leading);
}

.local-ds-highlight { background-color: var(--bd-accent-tint); color: var(--bd-accent-deep); }

/* Preserve the supplied workspace recording's full frame. */
.framer-ghRYx .bd-workspace-video { aspect-ratio: 2940 / 1652; }

/* Shared frame borders follow the yellow scale. */
.framer-ghRYx .framer-1tpw74r,
.framer-ghRYx .framer-wveedm,
.framer-ghRYx .framer-14y0aze,
.framer-ghRYx .framer-1r2uzt7 { --border-color: var(--bd-accent-border); }
/* Shared callout surfaces use the same pale yellow as native components. */
.framer-ghRYx .framer-4s5ujr,
.framer-ghRYx .framer-rudvi3,
.framer-ghRYx .framer-ak45hb,
.framer-ghRYx .framer-1eprj7n,
.framer-ghRYx .framer-1ch0h3t,
.framer-ghRYx .framer-1sx38ny,
.framer-ghRYx .framer-2n2fo2,
.framer-ghRYx .framer-19rj5jk,
.framer-ghRYx .framer-12vkgol,
.framer-ghRYx .framer-s4p7bj,
.framer-ghRYx .framer-8mbqrp,
.framer-ghRYx .framer-1t990lg,
.framer-ghRYx .framer-76fpsr,
.framer-ghRYx .framer-alzbqc,
.framer-ghRYx .framer-vuxnr4,
.framer-ghRYx .framer-mb389w,
.framer-ghRYx .framer-1d766mm,
.framer-ghRYx .framer-1glaaf4,
.framer-ghRYx .framer-nb5lc7,
.framer-ghRYx .framer-10iwm40 { background-color: var(--bd-accent-tint); }

/* The case follows business applications, quality review and adoption. */
.bd-section-content,
.bd-decision { width: 100%; min-width: 0; }
.bd-section-content { display: grid; gap: 28px; }
.bd-section-content > p,
.bd-decision > p.framer-text,
.bd-decision > h3 { margin: 0; }
/* Problem cards reuse Canvo's markup, shared geometry and responsive rules. */
.bd-problem-icon { display: block; flex: none; width: 90px; height: 90px; object-fit: contain; }
.bd-strategies { display: grid; }
.bd-strategy { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid rgba(12, 19, 27, .12); }
.bd-strategy h3 { margin: 0 0 12px; }
.bd-strategy p { margin: 0 0 14px; }
.bd-section-link { color: var(--bd-accent-ink); font-size: 14px; line-height: 1.6; text-underline-offset: 4px; }
.bd-section-link:focus-visible { outline: 2px solid var(--bd-accent-ink); outline-offset: 5px; }
.bd-decision { display: flex; flex-direction: column; gap: var(--bd-content-gap); scroll-margin-top: 48px; }
.bd-decision + .bd-decision { padding-top: 48px; border-top: 1px solid rgba(12, 19, 27, .12); }
.bd-decision > .local-dec-media { margin: 0; }
.bd-decision .local-lora-defects { margin: 0; }
.bd-planning-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bd-planning-path > li { min-width: 0; padding: 24px; border: 1px solid #e0e2e6; border-radius: 16px; background: #fff; }
.bd-number-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bd-accent-tint); color: var(--bd-accent-deep); font-size: 14px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.bd-planning-index { margin-bottom: 24px; }
.bd-planning-path h4 { margin: 0 0 16px; color: var(--bd-accent-ink); font-size: 18px; font-weight: 500; line-height: 1.5; }
.bd-planning-path p,
.bd-planning-prompts { margin: 0; padding: 0; color: var(--bd-muted-ink); list-style: none; }
@media (max-width: 599px) {
  .bd-planning-path { grid-template-columns: 1fr; gap: 16px; }
  .bd-planning-path > li { padding: 24px; }
  .bd-planning-index { margin-bottom: 18px; }
  .bd-planning-path h4 { margin-bottom: 12px; }
}
.bd-table-wrap { width: 100%; }
.bd-scene-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: rgba(12, 19, 27, .72); font-size: 14px; line-height: 1.65; }
.bd-scene-table caption { text-align: left; padding: 0 0 14px; font-size: 13px; color: rgba(12, 19, 27, .6); }
.bd-scene-table th,
.bd-scene-table td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid rgba(12, 19, 27, .12); overflow-wrap: break-word; }
.bd-scene-table th { font-weight: 500; color: #0c131b; }
.bd-scene-table th:first-child { width: 23%; }
.bd-scene-table th:nth-child(2) { width: 30%; }
.bd-scene-table td:last-child,
.bd-scene-table th:last-child { padding-right: 0; }
.bd-test-findings { border-top: 1px solid rgba(12, 19, 27, .12); padding-top: 24px; }
.bd-minor-heading { margin: 0 0 12px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #0c131b; }
.bd-test-findings ul { margin: 0; padding-left: 20px; color: rgba(12, 19, 27, .6); font-size: 16px; line-height: 1.7; }
.bd-test-findings li + li { margin-top: 8px; }
@media (max-width: 809px) {
  .bd-strategy { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .bd-decision + .bd-decision { padding-top: 32px; }
  .bd-scene-table { font-size: 13px; }
  .bd-scene-table th,
  .bd-scene-table td { padding-right: 12px; }
}

/* ── 4.1 的四步流程图 ───────────────────────────────────────────── */
.local-flow-figure { align-self: stretch; width: 100%; margin: 0; }
.local-flow-figure svg { max-width: 100%; }
.local-dec-media { align-self: stretch; width: 100%; margin: 20px 0 0; }
.local-dec-media > figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(12, 19, 27, 0.55);
}

/* ── 4.2 的通用模型 vs 自研模型对照 ─────────────────────────────── */
.local-lora { align-self: stretch; width: 100%; margin: 0; }
.local-lora-lead,
.local-lora-note {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(12, 19, 27, 0.6);
}
.local-lora-note { margin: 14px 0 0; }
.local-lora-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.local-lora-shot { position: relative; }
.local-lora-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(12, 19, 27, 0.1);
}
.local-lora-shot--pass img { border-color: var(--bd-accent-fill); border-width: 2px; }
.local-lora-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(12, 19, 27, 0.78);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}
.local-lora-shot--pass .local-lora-tag {
  background: #fff;
  color: var(--bd-accent-ink);
  border: 1px solid var(--bd-accent-border);
}
.local-lora-defects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.local-lora-defects li {
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(12, 19, 27, 0.14);
  background: rgba(12, 19, 27, 0.03);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(12, 19, 27, 0.72);
}

/* 05 pairs observed workflow improvements with a physical prototyping case. */
.bd-outcomes { display: grid; gap: 48px; width: 100%; min-width: 0; }
.bd-outcome-cases { display: grid; gap: 36px; }
.bd-outcome-case { min-width: 0; scroll-margin-top: 48px; }
.bd-outcome-case h4 { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--bd-accent-fill); color: var(--bd-accent-ink); font-size: 16px; font-weight: 500; line-height: 1.5; }
.bd-outcome-case > p { margin: 0 0 18px; color: var(--bd-muted-ink); }
.bd-outcome-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bd-outcome-pair .bd-visual { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; }
.bd-outcome-case--material .bd-visual { aspect-ratio: 1; }
.bd-outcome-pair figcaption { text-align: center; }
@media (max-width: 479px) {
  .bd-outcome-pair { grid-template-columns: 1fr; gap: 20px; }
}
.bd-prototype-evidence { display: grid; grid-template-columns: .8fr 1.6fr 1.6fr; gap: 16px; margin-top: 8px; }
.bd-prototype-evidence > .bd-evidence { display: grid; grid-template-rows: auto 1fr; align-content: start; }
.bd-evidence .bd-prototype-label { margin: 12px 0 0; color: #515963; text-align: center; }
.bd-prototype-evidence .bd-zoom { aspect-ratio: 16 / 9; box-sizing: border-box; }
.bd-prototype-evidence > .bd-evidence:first-child .bd-zoom { aspect-ratio: 8 / 9; }
.bd-prototype-evidence .bd-visual { height: 100%; object-fit: contain; }
.bd-prototype-evidence img.bd-visual { object-fit: cover; }
@media (max-width: 599px) {
  .bd-prototype-evidence { grid-template-columns: .8fr 1.6fr 1.6fr; gap: 8px; }
  .bd-evidence .bd-prototype-label { margin-top: 12px; }
  .bd-prototype-index { display: block; }
}

/* Retained styles for existing source-work examples. */
.local-cases {
  align-self: stretch;
  width: 100%;
  display: grid;
  gap: 22px;
  margin: 6px 0 0;
}
.local-case { margin: 0; }
.local-case img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(12, 19, 27, 0.1);
  background: #fff;
}
.local-case figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 10px 2px 0;
}
.local-case figcaption b { font-size: 15px; font-weight: 600; color: #23233c; }
.local-case figcaption > span {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(12, 19, 27, 0.6);
}
@media (max-width: 809px) {
  .local-lora-pair { grid-template-columns: 1fr; }
  .local-case figcaption { display: block; }
  .local-case figcaption > span { display: block; margin-top: 4px; }
}

/* Reuse Canvo's interactive strategy pyramid; retain its geometry and responsive layout. */
.bd-strategy-pyramid.ds_R6ujkelp { --accent: var(--bd-accent-ink); }
.bd-strategy-pyramid .pyramidSvg { filter: none; }
.bd-strategy-pyramid .pyramidText { fill: var(--bd-accent-on-fill); }
.bd-strategy-pyramid .cardNumber1 { background: var(--bd-accent-fill); color: var(--bd-accent-deep); }
.bd-strategy-pyramid .cardNumber2 { background: var(--bd-accent-mid); color: var(--bd-accent-deep); }
.bd-strategy-pyramid .cardNumber3 { background: var(--bd-accent-soft); color: var(--bd-accent-deep); }
.bd-strategy-pyramid .local-tier:focus-visible { stroke: var(--bd-accent-ink); }
.bd-strategy-pyramid .bd-section-link { font-size: inherit; line-height: inherit; }
.framer-ghRYx #designdecisions { overflow: visible; }

/* 统计卡片沿用原有的响应式布局。 */
@media (min-width: 1400px) {
  .bd-reference-metrics { --bd-stat-number-size: 48px; }
  /* Follow the overview copy before Framer's order:2 role section. */
  #background > #bd-rollout { order: 1; }
}

/* Source images lead each decision; captions explain the design implication. */
.bd-evidence,
.bd-brand-comparison figure,
.bd-workspace-detail { margin: 0; min-width: 0; }
.bd-evidence-wide { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; }
.bd-evidence figcaption,
.bd-source-note { margin: 12px 0 0; color: #697078; }
.bd-source-note { font-size: var(--bd-body-size); line-height: var(--bd-body-leading); }
.bd-zoom { display: block; position: relative; min-width: 0; background: #f7f8fa; border: 1px solid #e6e8eb; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.bd-zoom:focus-visible,
.bd-evidence-tabs button:focus-visible,
.bd-lightbox-close:focus-visible { outline: 2px solid var(--bd-accent-ink); outline-offset: 4px; }
.bd-visual { display: block; width: 100%; height: auto; background: #fff; }
.bd-workspace-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bd-workspace-detail .bd-zoom { height: 260px; background: #17191f; }
.bd-workspace-detail .bd-visual { height: 100%; object-fit: contain; background: #17191f; }
.bd-workspace-detail figcaption { display: flex; gap: 12px; margin-top: 16px; }

.bd-workspace-detail h4 { display: flex; align-items: center; min-height: 36px; font-weight: 500; margin: 0 0 7px; color: #242b33; }
.bd-workspace-detail p { margin: 0; color: #697078; }
/* Canvo supplies the comparison layout, pills, captions and mobile stacking.
   Preserve the complete square source images inside its shared media frame. */
.framer-ghRYx .bd-brand-comparison .local-composer-media { aspect-ratio: 1; border: 0; }
.bd-brand-comparison .bd-visual { height: 100%; object-fit: contain; border-radius: inherit; }
/* Match Canvo's fine leaders and pale note boxes in the platform accent. */
.bd-annotated-model { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: inherit; container-type: inline-size; }
.bd-model-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bd-model-focus, .bd-model-lines { stroke: var(--bd-accent-line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bd-model-focus { stroke: var(--bd-accent-line); fill: var(--bd-accent-wash); }
.bd-model-dots { fill: var(--bd-accent-line); }
.bd-model-note { position: absolute; left: 65%; width: 32%; padding: 7px 8px; box-sizing: border-box; transform: translateY(-50%); border: 1px solid var(--bd-accent-border); border-radius: 8px; background: var(--bd-accent-tint); color: var(--bd-accent-deep); font-family: "Inter Display", Inter, system-ui, sans-serif; font-size: clamp(12px, 3.5cqw, 14px); line-height: 1.45; text-align: left; text-wrap: balance; overflow-wrap: anywhere; }
.bd-model-note-eyes { top: 22%; }
.bd-model-note-beak { top: 45%; }
.bd-model-note-body { top: 65%; left: 67%; width: 30%; }
.bd-model-note-feet { top: 84%; }
.bd-lightbox-content .bd-annotated-model { width: min(100%, 68vh); margin: 0 auto; }
.bd-lightbox-content .bd-annotated-model .bd-visual { width: 100%; height: auto; max-height: none; border-radius: inherit; }
.bd-review { padding-top: 28px; }
.bd-evidence-tabs { display: flex; gap: 24px; border-bottom: 1px solid #e6e8eb; margin: 20px 0 24px; }
.bd-evidence-tabs button { position: relative; border: 0; padding: 0 0 12px; background: transparent; font: inherit; font-size: 14px; color: #697078; cursor: pointer; }
.bd-evidence-tabs button[aria-selected="true"] { color: var(--bd-accent-ink); }
.bd-evidence-tabs button[aria-selected="true"]::after { content: ''; position: absolute; height: 2px; bottom: -1px; left: 0; right: 0; background: var(--bd-accent-fill); }
.bd-review-panel[hidden] { display: none; }
.bd-review-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.bd-review-pair .bd-visual { height: 320px; object-fit: contain; }
.bd-review-panel > figure > .bd-zoom .bd-visual { height: 320px; }
.bd-review-panel figcaption { color: #444e59; }
.bd-training { padding-top: 26px; }
.bd-training-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bd-training-header .bd-source-note { margin: 0; }
.bd-training-path { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 28px 0 32px; padding: 0; list-style: none; }
/* 每格自带一段线，换行时各自成段；末段向右渐隐，标记流程到此为止。 */
.bd-training-path li { position: relative; padding: 0 26px 0 0; }
.bd-training-path li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2px;
  background: var(--bd-accent-fill); transform-origin: left;
}
.bd-training-path li:last-child::before {
  background: linear-gradient(to right, var(--bd-accent-fill) 0%, transparent 62%);
}
/* 编号落在节点里，线从节点中线穿过。 */
.bd-training-node {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bd-accent-tint); border: 1.5px solid var(--bd-accent-border);
  color: var(--bd-accent-deep); font-size: 12px; font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bd-training-path li:hover .bd-training-node {
  border-color: var(--bd-accent-fill); color: var(--bd-accent-deep); box-shadow: 0 0 0 5px var(--bd-accent-wash);
}
.bd-training-path li:hover h5 { color: var(--bd-accent-ink); }
.bd-training-path h5 { margin: 13px 0 7px; color: #222c36; font-weight: 500; transition: color .18s ease; }
.bd-training-path p { margin: 0; color: #697078; }
/* 进入视口后走一次：节点亮起，线段随后推进。脚本未生效或降低动效时保持静止可见。 */
.bd-training-path.is-armed li::before { transform: scaleX(0); }
.bd-training-path.is-armed .bd-training-node,
.bd-training-path.is-armed .bd-training-body { opacity: 0; }
.bd-training-path.is-running li::before { animation: bd-path-draw .3s ease-out forwards; }
.bd-training-path.is-running .bd-training-node { animation: bd-node-pop .4s cubic-bezier(.34, 1.3, .64, 1) forwards; }
.bd-training-path.is-running .bd-training-body { animation: bd-node-rise .45s ease forwards; }
.bd-training-path.is-running li:nth-child(1) .bd-training-node { animation-delay: .05s; }
.bd-training-path.is-running li:nth-child(1) .bd-training-body { animation-delay: .13s; }
.bd-training-path.is-running li:nth-child(1)::before { animation-delay: .15s; }
.bd-training-path.is-running li:nth-child(2) .bd-training-node { animation-delay: .35s; }
.bd-training-path.is-running li:nth-child(2) .bd-training-body { animation-delay: .43s; }
.bd-training-path.is-running li:nth-child(2)::before { animation-delay: .45s; }
.bd-training-path.is-running li:nth-child(3) .bd-training-node { animation-delay: .65s; }
.bd-training-path.is-running li:nth-child(3) .bd-training-body { animation-delay: .73s; }
.bd-training-path.is-running li:nth-child(3)::before { animation-delay: .75s; }
.bd-training-path.is-running li:nth-child(4) .bd-training-node { animation-delay: .95s; }
.bd-training-path.is-running li:nth-child(4) .bd-training-body { animation-delay: 1.03s; }
.bd-training-path.is-running li:nth-child(4)::before { animation-delay: 1.05s; }
@keyframes bd-path-draw { to { transform: scaleX(1); } }
@keyframes bd-node-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes bd-node-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.bd-training-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* The image opens inside this page; native dialog supplies focus trapping and Escape. */
.bd-lightbox { border: 1px solid #e6e8eb; border-radius: 16px; width: min(1200px,92vw); max-width: 92vw; max-height: 92vh; padding: 16px; background: #fff; color: #242b33; box-shadow: 0 20px 80px rgba(0,0,0,.18); box-sizing: border-box; }
.bd-lightbox::backdrop { background: rgba(18,24,32,.68); }
.bd-lightbox-toolbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.bd-lightbox-close { border: 0; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: #303943; cursor: pointer; }
.bd-lightbox-content { min-height: 0; }
.bd-lightbox-content .bd-visual { width: 100%; max-height: 72vh; object-fit: contain; }
body:has(.bd-lightbox[open]) { overflow: hidden; }

@media (max-width: 809px) {
  .bd-workspace-details { grid-template-columns: 1fr; gap: 24px; }
  .bd-workspace-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: center; }
  .bd-workspace-detail .bd-zoom { height: 160px; }
  .bd-workspace-detail figcaption { margin: 0; }
  .bd-workspace-detail-2 { grid-template-columns: 1fr; }
  .bd-workspace-detail-2 .bd-zoom { height: auto; }
  .bd-workspace-detail-2 .bd-visual { height: auto; }
  .bd-evidence-tabs { gap: 20px; }
  .bd-evidence-tabs button { font-size: 13px; }
  .bd-review-pair { gap: 12px; }
  .bd-review-pair .bd-visual,
  .bd-review-panel > figure > .bd-zoom .bd-visual { height: 210px; }
  .bd-training-path { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .bd-training-path li:nth-child(2)::before { background: linear-gradient(to right, var(--bd-accent-fill) 0%, transparent 62%); }
  .bd-training-docs { grid-template-columns: 1fr; gap: 24px; }
  .bd-lightbox { padding: 10px; }
}