/* Keep the shared case layout and typography; scope the blue accent to /craft. */
.craft-page {
  --craft-accent: #5b8def;
  --craft-accent-soft: #5b8def99;
  --craft-accent-tint: #5b8def4d;
  --local-tag-bg: rgb(206, 221, 250);
  --token-7cbca512-b5c6-4555-b418-4fbe2df8fc9a: var(--craft-accent);
  --token-c4ece689-c50c-4150-9ac6-a1501e869801: var(--craft-accent-soft);
}
.craft-page .framer-ghRYx :is(.framer-1tpw74r, .framer-wveedm, .framer-14y0aze, .framer-1r2uzt7) {
  --border-color: var(--craft-accent-soft);
}
.craft-page :focus-visible { outline-color: var(--craft-accent) !important; }

/* Native, responsive Skill architecture. Relationships remain readable as text. */
.craft-skill-system {
  --skill-ink: #263547;
  --skill-muted: #66758a;
  --skill-line: #c9d8ee;
  --skill-border: #e1e7f0;
  --skill-blue: #edf3fd;
  --skill-grey: #f4f6fa;
  --skill-arrow: #7f97bb;
  --skill-gap: 24px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 28px;
  box-sizing: border-box;
  border: 1px solid var(--skill-border);
  border-radius: 16px;
  background: #fcfdff;
  color: var(--skill-ink);
  font: 13px/1.6 "Inter Display", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  container-type: inline-size;
  scroll-margin-top: 100px;
}
.craft-skill-system * { box-sizing: border-box; min-width: 0; }
.craft-skill-system :is(h3, p, ul, ol) { margin: 0; padding: 0; }
.craft-skill-system :is(ul, ol) { list-style: none; }
.craft-skill-system h3 { font: inherit; font-size: 14px; font-weight: 600; color: var(--skill-ink); }
.craft-skill-system strong { font-weight: 600; }
.craft-skill-secondary { color: var(--skill-muted); font-size: 12px; line-height: 1.6; }
.craft-skill-row-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
/* 顶部：创作判断 */
.craft-skill-direction { padding: 18px 20px; border: 1px solid var(--skill-line); border-radius: 10px; background: var(--skill-blue); }
.craft-skill-intent { margin-top: 6px; font-size: 14px; }
.craft-skill-down { display: flex; justify-content: center; align-items: center; height: 36px; color: var(--skill-arrow); font-size: 16px; line-height: 1; }
/* 五步流程：箭头宽度等于间距，保证居中 */
.craft-skill-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--skill-gap); }
.craft-skill-flow li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; border: 1px solid var(--skill-border); border-radius: 10px; background: var(--skill-grey); }
.craft-skill-flow li:nth-child(n+4) { background: var(--skill-blue); border-color: var(--skill-line); }
.craft-skill-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(-1 * var(--skill-gap) - 1px); width: var(--skill-gap); text-align: center; transform: translateY(-50%); color: var(--skill-arrow); }
.craft-skill-step { margin-bottom: 4px; color: #8a9bb3; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.craft-skill-flow strong { font-size: 14px; line-height: 1.4; }
/* 专业方法 */
.craft-skill-craft { margin-top: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--skill-border); }
.craft-skill-craft .craft-skill-secondary::before { content: "↑ "; color: var(--skill-arrow); }
.craft-skill-craft ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.craft-skill-craft li { padding: 8px 10px; text-align: center; background: #fff; border: 1px solid var(--skill-line); border-radius: 8px; }
/* 共享基准 / 审核与修正：两张等高卡片，说明文字贴底对齐 */
.craft-skill-mechanisms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--skill-gap); margin-top: 28px; }
.craft-skill-mechanisms section { display: flex; flex-direction: column; padding: 18px 20px 20px; border: 1px solid var(--skill-border); border-radius: 12px; background: #fff; }
.craft-skill-mechanisms h3 { margin-bottom: 14px; }
.craft-skill-mechanisms section > p { margin-top: auto; padding-top: 16px; }
.craft-skill-baseline { padding: 11px 12px; border: 1px solid var(--skill-line); border-radius: 8px; background: var(--skill-blue); text-align: center; }
.craft-skill-shared-shots, .craft-skill-branch { --shot-gap: 20px; }
.craft-skill-branch { position: relative; height: 32px; }
.craft-skill-branch::before { content: ""; position: absolute; left: 50%; top: 0; height: 12px; border-left: 1px solid #a3b7d4; }
.craft-skill-branch::after { content: ""; position: absolute; top: 12px; left: calc((100% - 2 * var(--shot-gap)) / 6); right: calc((100% - 2 * var(--shot-gap)) / 6); border-top: 1px solid #a3b7d4; }
.craft-skill-branch i { position: absolute; top: 12px; bottom: 1px; border-left: 1px solid #a3b7d4; }
.craft-skill-branch i:nth-child(1) { left: calc((100% - 2 * var(--shot-gap)) / 6); }
.craft-skill-branch i:nth-child(2) { left: 50%; }
.craft-skill-branch i:nth-child(3) { left: calc(100% - (100% - 2 * var(--shot-gap)) / 6 - 1px); }
.craft-skill-branch i::after { content: ""; position: absolute; bottom: 0; left: -3.5px; width: 6px; height: 6px; border-right: 1px solid #a3b7d4; border-bottom: 1px solid #a3b7d4; transform: rotate(45deg); }
.craft-skill-shared-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shot-gap); }
.craft-skill-shared-shots span { position: relative; padding: 10px 4px; background: var(--skill-grey); border: 1px solid var(--skill-border); border-radius: 8px; text-align: center; }
.craft-skill-shared-shots span:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(-1 * var(--shot-gap) - 1px); width: var(--shot-gap); text-align: center; transform: translateY(-50%); color: var(--skill-arrow); }
.craft-skill-check { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; padding: 11px 14px; border: 1px solid #e2def1; border-radius: 8px; background: #f6f4fc; }
.craft-skill-check-arrow { display: flex; justify-content: center; align-items: center; height: 32px; color: #9486bb; line-height: 1; }
/* 交付 */
.craft-skill-delivery { margin-top: 24px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--skill-line); border-radius: 10px; background: var(--skill-blue); }
.craft-skill-delivery > strong { font-size: 14px; }
.craft-skill-links { display: flex; flex-direction: column; gap: 9px; }
.framer-ghRYx .craft-skill-links p { margin: 0; }
@container (max-width: 720px) {
  .craft-skill-mechanisms { grid-template-columns: 1fr; }
  .craft-skill-craft ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .craft-skill-flow { grid-template-columns: 1fr; gap: 20px; }
  .craft-skill-flow li { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 12px 14px; }
  .craft-skill-step { margin: 0; }
  .craft-skill-flow li:not(:last-child)::after { content: "↓"; top: auto; right: auto; left: 50%; bottom: -20px; width: auto; height: 20px; line-height: 20px; transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .craft-skill-system { padding: 18px; }
  .craft-skill-mechanisms section { padding: 16px; }
}
.framer-ghRYx .craft-content-block {
  align-items: stretch;
  min-width: 0;
  overflow: visible;
}
/* 与 Canvo 正文块同一节奏：块内 24px gap，段落与小标题不再叠加 Framer 的 20px 段距。
   Framer 的 p.framer-text:not(:first-child) 是 (0,2,1)，这里要带上根类才压得过。 */
.framer-ghRYx .craft-content-block > .framer-text { width: 100%; margin: 0; }
.framer-ghRYx .craft-shots-single { grid-template-columns: minmax(0, 1fr); }
.craft-media, .craft-image-link { display: block; width: 100%; min-width: 0; }
.craft-media img, .craft-media video { display: block; width: 100%; height: auto; }
.craft-image-link img { display: block; width: 100%; height: auto; }
.craft-director-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.framer-ghRYx .craft-director-strip { border-radius: 0; background: transparent; }
#visual-development > .local-shots { order: 0; }
.craft-page .craft-phase > .local-shots,
.craft-page .craft-study > .local-shots { order: 0; }
.craft-study { display: flex; flex-direction: column; gap: 16px; min-width: 0; width: 100%; scroll-margin-top: 96px; }
.framer-ghRYx .craft-study > .framer-text { margin: 0; }
.craft-page .craft-study-title { font-weight: 500; color: var(--token-8056d279-4388-496c-b0ab-8ec93edb0b33, #0c131b); }
.craft-asset-transfer { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 2fr); gap: 12px; align-items: center; min-width: 0; }
.craft-asset-references { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.craft-asset-references .craft-image-link { border-radius: 8px; }
.craft-asset-references img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.craft-transfer-arrow { color: var(--craft-accent); text-align: center; font: 18px/1 sans-serif; }
@media (max-width: 767px) {
  .craft-asset-transfer { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .craft-asset-references { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .craft-transfer-arrow { transform: rotate(90deg); }
}
.craft-media video { aspect-ratio: 16 / 9; object-fit: contain; }
.craft-media [hidden] { display: none !important; }
.craft-image-link:focus-visible { outline: 2px solid var(--craft-accent); outline-offset: -2px; }

[data-craft-generated][hidden], [data-craft-output][hidden] { display: none !important; }
.craft-content-block[id] { scroll-margin-top: 96px; }

/* 首屏两支成片：图注与正文同字号（16px/1.6），并相对各自视频居中。 */
.craft-page .framer-fsj2kd .local-shots figcaption {
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* 思路卡片直接复用 Canvo 的「取舍 / 方案」卡片结构与样式；
   只有标签底色在 canvo.css 里写死成紫色，这里换成本页的蓝色。 */
.craft-page .craft-note-card .framer-1t990lg { background-color: var(--craft-accent-tint); }

/* Original canvas pixels stay intact; annotations share its coordinate system. */
.craft-canvas { width: 100%; min-width: 0; scroll-margin-top: 100px; }
.craft-canvas-frame { display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.craft-canvas-image { display: block; position: relative; width: 100%; container-type: inline-size; color: #285ba9; transform: scale(1.07); transform-origin: 50% 8%; }
.craft-canvas-image > img { display: block; width: 100%; height: auto; }
.craft-canvas-region { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px dashed #467ddd; border-radius: 4px; background: #d9e9ffb8; }
.craft-canvas-region-label { display: block; max-width: 100%; box-sizing: border-box; padding: 3px 5px; font-family: "Inter Display", "Inter", sans-serif; font-size: calc(16px / 1.07); line-height: 1.4; text-align: center; text-shadow: 0 1px 3px #f7faff; }
.craft-canvas-region-label strong { display: block; font-weight: 550; }
.craft-canvas-number { position: absolute; top: -.5em; left: 4px; padding: 0 2px; background: #d9e9ff; color: #6b8fcb; font-size: .75em; line-height: 1; font-variant-numeric: tabular-nums; }
.craft-canvas-region-purpose { display: block; color: #466283; font-size: .75em; line-height: 1.4; margin-top: 3px; }
@container (max-width: 700px) {
  .craft-canvas-region-purpose { display: none; }
  .craft-canvas-region-label { padding: 2px 3px; }
}

/* 3D 镜头预演：四段预演一行排开；窄屏两两一行。 */
.framer-ghRYx .craft-previs-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 809.98px) {
  .framer-ghRYx .craft-previs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* 首屏成片轮播：整组不超出正文栏。所有片子等高——高度取横版 16:9 占栏宽 78% 时的高度，
   宽度按各自比例；左右缩略图缩到 0.6 倍、与主视频垂直居中，水平位置由 craft-media.js
   按相邻片子宽度算好写进 --reel-x。伸出栏外的部分被裁掉，栏两侧用渐隐遮罩过渡。 */
.craft-page .framer-fsj2kd .local-shots { order: 0; }
.craft-reel {
  --reel-center: 78cqw;
  --reel-height: calc(var(--reel-center) * 9 / 16);
  --reel-gap: 16px;
  --reel-scale: .6;
  --reel-fade: 9%;
  container-type: inline-size;
  position: relative;
  width: 100%;
}
.craft-reel-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
}
.framer-ghRYx .craft-reel .craft-reel-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
}
.craft-reel .craft-reel-slide {
  grid-area: 1 / 1;
  align-self: start;
  width: calc(var(--reel-height) * var(--reel-aspect, 16 / 9));
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--reel-x, 0px)) scale(var(--reel-scale));
  /* 以视频中心缩放，图注不参与居中。 */
  transform-origin: 50% calc(var(--reel-height) / 2);
}
.craft-reel .craft-reel-slide .craft-media { height: var(--reel-height); }
.craft-reel .craft-reel-slide video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* 竖版片子很窄，图注放宽到整栏再居中，免得被挤成好几行。 */
.craft-reel .craft-reel-slide figcaption { width: 100cqw; margin-inline: calc(50% - 50cqw); }
.craft-reel.is-ready .craft-reel-slide {
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), opacity 500ms cubic-bezier(.22, 1, .36, 1);
}
.craft-reel.is-ready .craft-reel-slide.is-jumping { transition: opacity 300ms ease; }
.craft-reel .craft-reel-slide[data-reel-position="0"] {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.craft-reel .craft-reel-slide[data-reel-position="-1"],
.craft-reel .craft-reel-slide[data-reel-position="1"] {
  z-index: 1;
  opacity: .45;
  pointer-events: auto;
  cursor: pointer;
}
.craft-reel .craft-reel-slide[data-reel-position="-1"]:hover,
.craft-reel .craft-reel-slide[data-reel-position="1"]:hover,
.craft-reel .craft-reel-slide[role="button"]:focus-visible { opacity: .7; }
.craft-reel .craft-reel-slide:not([data-reel-position="0"]) video { pointer-events: none; }
.craft-reel .craft-reel-slide:not([data-reel-position="0"]) figcaption { visibility: hidden; }
/* 箭头压在两侧缩略图上，与视频中心对齐。 */
.craft-reel-arrow {
  position: absolute;
  top: calc(var(--reel-height) / 2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* 无底按钮：箭头与描边同色，悬停一起加深。 */
  border: 1px solid var(--craft-accent-soft);
  border-radius: 100px;
  background: transparent;
  color: var(--craft-accent-soft);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
}
.craft-reel-arrow svg { width: 16px; height: 16px; }
.craft-reel-arrow:hover { color: var(--craft-accent); border-color: var(--craft-accent); }
.craft-reel-arrow:active { transform: translateY(-50%) scale(.94); }
.craft-reel-prev { left: 0; }
.craft-reel-next { right: 0; }
@media (max-width: 809.98px) {
  .craft-reel { --reel-center: 80cqw; --reel-gap: 12px; --reel-fade: 8%; }
  .craft-reel-arrow { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-reel.is-ready .craft-reel-slide { transition: opacity 200ms ease; }
}

/* 阶段小节：首句结论加粗，下面一排「锁定 / 检查 / 修正」胶囊复用 02 的职责标签样式，
   长说明收进 details，图和视频保持原位。 */
.craft-page .craft-lead { font-weight: 500; color: var(--token-8056d279-4388-496c-b0ab-8ec93edb0b33, #0c131b); }
.craft-page .craft-phase-tags li { gap: 0; font-size: 14px; padding: 4px 12px; }
.craft-page .craft-phase-tags strong { font-weight: 500; }
.craft-more { width: 100%; min-width: 0; }
.craft-more-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--token-3175e621-00d0-4a31-966e-23433a978eb9, #0c131b99);
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  transition: color .2s ease;
}
.craft-more-summary::-webkit-details-marker { display: none; }
.craft-more-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--token-74082fba-a04b-494b-9929-23114b8064f7, #0c131b1a);
  border-radius: 50%;
  transition: color .2s ease, border-color .2s ease;
}
.craft-more-icon svg { width: 12px; height: 12px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.craft-more-summary:hover,
.craft-more[open] .craft-more-summary { color: var(--craft-accent); }
.craft-more-summary:hover .craft-more-icon,
.craft-more[open] .craft-more-icon { border-color: currentColor; }
.craft-more[open] .craft-more-icon svg { transform: rotate(180deg); }
.craft-more-summary:focus-visible { outline: 2px solid var(--craft-accent); outline-offset: 2px; border-radius: 4px; }
.craft-more-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.framer-ghRYx .craft-more-body > .framer-text { margin: 0; }
@media (prefers-reduced-motion: reduce) { .craft-more-icon svg { transition: none; } }