/* D · Agent 工作台（Jarvis）：只有这一页用的模块。公共版式在 ../../case-kit.css。
   方案见 docs/PLAN-D页Agent工作台落站-2026-10-20.md；封面窗口照 C 页 ai.css。
   蓝色只给前后对比用（蓝图动画、进化时间轴的“改了什么”），其余沿用站点红。 */
:root{--cvw:clamp(560px,min(62vw,92vh),1040px);--bp:var(--red);--bp-soft:rgba(172,64,80,.1)}

/* ============ 00 封面：一扇窗口放完整任务录屏 ============ */
.cover{position:relative;padding-top:0;background:var(--cream)}
.cover-stage{position:relative;padding-bottom:clamp(24px,4vh,48px)}
.cover-head{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding-top:clamp(64px,9vh,104px);text-align:center}
.cover-title{font-size:min(var(--fs-hero),13vw);white-space:nowrap;line-height:1.04;font-weight:700;letter-spacing:-.025em;margin:.3em 0 .35em}
.cover-concl{max-width:24em;margin-inline:auto;text-wrap:balance;font-size:24px;line-height:1.5;font-weight:500;color:#3b3a3a}
.cover-concl em{font-style:normal;color:var(--red);font-weight:700}
.cv{position:relative;z-index:2;width:var(--cvw);margin:clamp(28px,5vh,56px) auto 0}
.cover-info{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding:clamp(40px,8vh,90px) 0 clamp(110px,18vh,200px)}
/* 本文件在 case-kit 之后加载，会盖掉它 ≥1240 时给左侧目录让出的 240px，这里补回，和下方正文对齐 */
@media (min-width:1240px){.cover-head,.cover-info{width:min(var(--w),100% - 480px)}}
.lede{max-width:30em;font-size:20px;line-height:1.8;color:#3b3a3a}
.proto-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:#8b8f95}
.proto-note::before{content:"";width:6px;height:6px;border-radius:50%;background:#8b8f95}

/* 窗口：录屏和截图共用 */
.win{position:relative;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(17,18,20,.08),0 30px 60px rgba(40,20,16,.16),0 8px 20px rgba(40,20,16,.1)}
.cv .win{animation:cvrise 1.5s var(--ease) .1s both}
.win img,.win video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#fafafa}
.win-bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#EEECE8;border-bottom:1px solid rgba(17,18,20,.06)}
.win-bar b{width:9px;height:9px;border-radius:50%;background:#D3CFC9}
.win-bar em{margin-left:auto;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.12em;color:#8b8f95}
@keyframes cvrise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}

/* ============ 01 问题：解剖标注（交互照 anatomy-mode-kit，配色用站点红） ============ */
.anat{--ac:var(--red);--ac-30:color-mix(in oklab,var(--ac) 34%,transparent);--ac-15:color-mix(in oklab,var(--ac) 16%,transparent);--ac-06:color-mix(in oklab,var(--ac) 7%,transparent);
  --an-line:rgba(17,18,20,.09);
  position:relative;max-width:1080px;margin-top:56px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--an-line),0 24px 48px -24px rgba(40,20,16,.18)}
.an-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--an-line)}
.an-t{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--c3)}
.an-r{display:flex;align-items:center;gap:10px}
.an-hint{font-size:12px;color:var(--c3);white-space:nowrap;opacity:0;transition:opacity .2s}
.anat.on .an-hint{opacity:1}
.an-ghost,.an-sw{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;font-size:12.5px;color:var(--c2);
  box-shadow:inset 0 0 0 1px var(--an-line);transition:color .2s,box-shadow .2s}
.an-ghost:hover,.an-sw:hover{color:var(--c1);box-shadow:inset 0 0 0 1px rgba(17,18,20,.2)}
.an-ghost:focus-visible,.an-sw:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.an-ghost svg{width:10px;height:10px;fill:currentColor}
.an-sw{padding:0 4px 0 10px}
.an-sw i{position:relative;width:30px;height:18px;border-radius:99px;background:#d9d6d1;transition:background .25s}
.an-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.34,1.5,.64,1)}
.an-sw[aria-checked=true] i{background:var(--ac)}
.an-sw[aria-checked=true] i::after{transform:translateX(12px)}
.an-stage{position:relative}
.an-stage img{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#fafafa}
.an-layer{position:absolute;inset:0;pointer-events:none}
.an-box{position:absolute;left:calc(var(--x) - 4px);top:calc(var(--y) - 4px);width:calc(var(--w) + 8px);height:calc(var(--h) + 8px);border-radius:8px;
  border:1px dashed var(--ac-30);opacity:0;transition:opacity .18s var(--ease),border-color .18s,background-color .18s,box-shadow .18s}
.an-badge{position:absolute;left:calc(var(--x) - 4px);top:calc(var(--y) - 4px);min-width:20px;height:20px;padding:0 5px;border-radius:6px;
  font:600 11px/20px var(--mono);text-align:center;color:#fff;background:var(--ac-30);opacity:0;transform:translate(-55%,-55%) scale(.3);
  transition:background .18s,opacity .18s,box-shadow .18s;will-change:transform}
.anat.on .an-box{opacity:1;pointer-events:auto;cursor:pointer}
.anat.on .an-badge{opacity:1;transform:translate(-55%,-55%) scale(1)}
/* 焦点态：其余淡出，当前实线 + 光晕 + 浅底 */
.anat.focus .an-box{opacity:.25}
.anat.focus .an-badge{opacity:.35}
.an-box.act{opacity:1!important;border:1.5px solid var(--ac);background:var(--ac-06);box-shadow:0 0 0 3px var(--ac-15)}
.an-badge.act{opacity:1!important;background:var(--ac)}
/* 点击固定：双层光晕；悬停别处时，固定项留一层淡实线 */
.an-box.pin{border:1.5px solid var(--ac)}
.an-box.pin.act{box-shadow:0 0 0 3px var(--ac-15),0 0 0 6px var(--ac-06)}
.anat.focus .an-box.pin:not(.act){opacity:.55!important}
.an-badge.pin{opacity:1!important;background:var(--ac);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ac)}
/* 图例：编号 + 等宽部件名 + 说明，三栏 */
.an-legend{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--an-line)}
.an-legend > li{display:flex;gap:12px;padding:16px 18px;cursor:pointer;outline:none;transition:background .16s,box-shadow .16s}
.an-legend > li+li{border-left:1px solid var(--an-line)}
.an-legend > li.act,.an-legend > li:focus-visible{background:#faf7f4}
.an-legend > li.pin{background:#faf7f4;box-shadow:inset 2px 0 0 var(--ac)}
.an-legend .no{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font:600 11px/1 var(--mono);color:#fff;background:var(--ac);margin-top:2px}
.an-legend b{display:block;margin-bottom:4px;font:500 12.5px/1.4 var(--mono);color:var(--c1)}
.an-legend p{font-size:var(--fs-card);line-height:1.65;color:var(--c2)}
/* 细节栏：图例下方固定一块，跟着当前标注换内容（同 E 页 sa.css） */
.an-more{display:none}
.an-detail{display:flex;align-items:center;min-height:206px;padding:24px 28px;border-top:1px solid var(--an-line);border-radius:0 0 16px 16px;background:#faf7f4}
.an-d-hint{width:100%;text-align:center;font-size:var(--fs-cap);color:var(--c3)}
.an-detail.has{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;align-items:start}
.an-d-h .no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font:600 11px/1 var(--mono);color:#fff;background:var(--ac);vertical-align:2px;margin-right:8px}
.an-d-h b{font:500 13px/1.4 var(--mono);color:var(--c1)}
.an-d-h span:last-child{display:block;margin-top:8px;font-size:var(--fs-cap);line-height:1.65;color:var(--c2)}
.an-detail ul{list-style:none;display:grid;gap:10px}
.an-detail ul li{position:relative;padding-left:16px;font-size:var(--fs-card);line-height:1.7;color:var(--c1)}
.an-detail ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ac)}
@media (prefers-reduced-motion:no-preference){.an-detail.has ul li{animation:anIn .32s cubic-bezier(.2,.8,.2,1) both}.an-detail.has ul li:nth-child(2){animation-delay:.04s}.an-detail.has ul li:nth-child(3){animation-delay:.08s}}
@keyframes anIn{from{opacity:0;transform:translateY(4px)}}
/* 自动导览的假光标 */
.an-cursor{position:fixed;left:0;top:0;z-index:60;width:20px;height:20px;pointer-events:none;opacity:0;transition:opacity .2s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* ============ 图示（自画 SVG） ============ */
.dg{max-width:1080px;margin-top:56px}
.dg svg{display:block;width:100%;height:auto;overflow:visible}
.dg .t-name{font:600 16px var(--sans);fill:var(--c1)}
.dg .t-node{font:600 13.5px var(--sans);fill:var(--c1)}
.dg .t-sub{font:400 12.5px var(--sans);fill:var(--c3)}
.dg .t-row{font:600 13px var(--sans);fill:var(--c2)}
.dg .t-me{font:600 13.5px var(--sans);fill:var(--red)}
.dg .t-mono{font:500 10px var(--mono);letter-spacing:.14em;fill:var(--c3)}
.dg .t-note{font:500 12px var(--sans);fill:var(--c3)}
.dg .t-bad{font:500 12px var(--sans);fill:var(--red)}
.dg figcaption{margin-top:16px;text-align:center;font-size:var(--fs-cap);line-height:1.6;color:var(--c3)}
.dg-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:72px}
/* 窄屏横滑看图，不压缩字号 */
.dg-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}

/* ============ 04 前后对比（蓝） ============ */
.bp-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:5px 12px;border-radius:99px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--c2);background:rgba(17,18,20,.06)}
.bp-tag i{width:6px;height:6px;border-radius:50%;background:var(--c3)}
.cx-sec .two.bp .b{color:var(--c1)}
.cx-sec .two.bp .b em{font-style:normal;color:var(--bp)}
.bpv{max-width:1200px;margin-top:56px;border-radius:20px;overflow:hidden;background:#F2F2F2;box-shadow:0 0 0 1px rgba(172,64,80,.18),0 18px 40px rgba(172,64,80,.1)}
.bpv video{display:block;width:100%;height:auto;aspect-ratio:4/3}
.bp-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:1200px;margin-top:24px}
.bp-steps li{padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(172,64,80,.16);font-size:13.5px;line-height:1.6;color:var(--c2)}
.bp-steps b{display:block;margin-bottom:4px;font:600 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--bp)}

/* ============ 05 / 07 录屏墙 ============ */
.wall{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);margin-top:48px}
.wall figure{margin:0;min-width:0}
.wall .win{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 14px 28px rgba(40,20,16,.1)}
.wall figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.wall figcaption b{color:var(--c1);font-weight:700;margin-right:6px}
.wall-h{margin-top:88px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--c3)}
.wall-h + .wall{margin-top:20px}
/* 宣传片：通栏，点了才播，带声音 */
/* 首屏宣传片：16:9，不要仿窗口顶栏；右下角暂停、声音两个按钮（自动播放超过 5 秒必须能停） */
.cv-film video{aspect-ratio:16/9;background:#fff}
.cv-ctl{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}
.cv-ctl button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(18,18,20,.6);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.cv-ctl button:hover{background:rgba(18,18,20,.82)}
.cv-ctl button:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.cv-ctl .i-play,.cv-ctl .i-on,.cv-play.is-paused .i-pause,.cv-snd.is-on .i-off{display:none}
.cv-play.is-paused .i-play,.cv-snd.is-on .i-on{display:block}
.open-proto{display:inline-flex;align-items:center;gap:10px;margin-top:48px;padding:12px 20px;border-radius:99px;background:var(--c1);color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.open-proto svg{width:14px;height:14px}
/* 录屏灯箱：按视频原尺寸显示，超出视口时等比缩小（规则同 case-kit 的 .lightbox img） */
.lightbox video{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);border-radius:10px;background:#fafafa;box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* ============ 06 GUI 进化：时间轴横滑 ============ */
.evo{position:relative;margin-top:56px}
.evo-track{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,34vw,460px);gap:clamp(16px,2vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);overscroll-behavior-x:contain;padding:8px var(--g) 36px;margin-inline:calc(var(--g) * -1);scrollbar-width:none}
.evo-track::-webkit-scrollbar{display:none}   /* 原生滚动条藏掉，进度看下面的 .evo-bar */
.evo-track.dragging{scroll-snap-type:none;user-select:none;cursor:grabbing}
/* 日期在上，圆点压在线上，线从圆点右侧接出去，不穿过文字 */
.evo-track li{scroll-snap-align:start;min-width:0;position:relative;padding-top:48px}
.evo-track li::before{content:"";position:absolute;left:14px;right:calc(-1 * clamp(16px,2vw,28px));top:28px;height:1px;background:rgba(17,18,20,.12)}
.evo-track li:last-child::before{right:0}
.evo-track li::after{content:"";position:absolute;left:0;top:23.5px;width:9px;height:9px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--c3)}
.evo-track li.now::after{background:var(--bp);box-shadow:0 0 0 4px var(--bp-soft)}
.evo-track .d{position:absolute;left:0;top:0;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--c3)}
.evo-track .win{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 12px 22px rgba(40,20,16,.1)}
.evo-track .win img{aspect-ratio:16/10}
.evo-track h3{margin-top:16px;font-size:16px;font-weight:700;line-height:1.4}
.evo-track p{margin-top:4px;font-size:var(--fs-cap);line-height:1.7;color:var(--c2)}
.evo-track p em{font-style:normal;color:var(--bp);font-weight:600}
/* 进度细线 + 两个裸箭头，同一行 */
.evo-nav{display:flex;align-items:center;gap:4px;margin-top:4px}
.evo-bar{position:relative;flex:1;height:2px;margin-right:16px;border-radius:2px;background:rgba(17,18,20,.08);overflow:hidden}
.evo-bar i{position:absolute;inset:0 auto 0 0;width:var(--bw,30%);transform:translateX(var(--bx,0));border-radius:2px;background:rgba(17,18,20,.42)}   /* 不加过渡：跟着滚动按帧走，加了会拖在后面 */
.evo-nav button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--c2);cursor:pointer;transition:color .2s,background .2s}
.evo-nav button:hover:not(:disabled){color:var(--c1);background:rgba(17,18,20,.05)}
.evo-nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.evo-nav button:disabled{opacity:.28;cursor:default}
.evo-nav svg{width:16px;height:16px}

/* ============ 08 组件库：Figma 导出的组件实例，放在浅灰底板上 ============ */
.ds-num{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1080px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(17,18,20,.1)}
.ds-num strong{display:block;font-size:clamp(36px,3.6vw,52px);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ds-num span{display:block;margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.ds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin-top:56px}
.ds-grid figure{margin:0;min-width:0}
.ds-grid .ds-w{grid-column:1 / -1}
.ds-t{display:flex;align-items:center;justify-content:center;min-height:200px;padding:clamp(24px,4vw,56px);border-radius:16px;background:#F1EFEC}
.ds-t img{display:block;max-width:100%;height:auto;max-height:420px;width:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(17,18,20,.06),0 12px 24px rgba(40,20,16,.08)}
.ds-w .ds-t img{max-height:none;width:min(100%,720px)}
.ds-grid figure:not(.ds-w) .ds-t{aspect-ratio:1}
.ds-grid figcaption,.ds-pair figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.ds-grid figcaption b,.ds-pair figcaption b{font:600 12.5px/1.4 var(--mono);color:var(--c1);margin-right:8px}
.ds-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3fr);gap:20px;align-items:end;max-width:1080px;margin-top:20px}
.ds-pair figure{margin:0;min-width:0}
.ds-pair .win img{aspect-ratio:auto}

.c-out .quote{margin-top:120px}

@media (max-width:820px){
  :root{--cvw:calc(100vw - var(--g) * 2)}
  .win,.wall .win{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 10px 18px rgba(40,20,16,.14)}
  .an-hint{display:none}
  .an-legend{grid-template-columns:minmax(0,1fr)}
  .an-legend > li+li{border-left:0;border-top:1px solid var(--an-line)}
  .an-detail.has{grid-template-columns:minmax(0,1fr);gap:16px}
  .an-badge{min-width:18px;height:18px;line-height:18px;font-size:10px}
  .anat{box-shadow:0 0 0 1px var(--an-line),0 10px 18px -8px rgba(40,20,16,.16)}
  .wall{--cols:1}
  .bp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-steps li:last-child{grid-column:1 / -1}
  .bpv{box-shadow:0 0 0 1px rgba(172,64,80,.18),0 8px 14px rgba(172,64,80,.1)}
  .dg-scroll svg{width:820px;max-width:none}
  .evo-track{grid-auto-columns:78vw}
  .open-proto{display:none}   /* 手机端只看录屏 */
  .lightbox{padding:72px 12px 40px}   /* 左右 80px 留白在手机上只剩 200 多宽，收窄 */
  .lightbox video{box-shadow:0 4px 8px rgba(0,0,0,.4)}   /* 两侧只剩 12px，阴影要收在里面 */
}

@media (prefers-reduced-motion:reduce){
  .cv .win{animation:none}
}