/* Local product screenshots keep their full frame at every viewport. */
#build-preview .build-media-screen:has(.showcase-screenshot),#sync-demo .build-media-screen:has(.showcase-screenshot){aspect-ratio:3456 / 2168;background:#f4f7fb}
#build-preview .showcase-screenshot,#sync-demo .showcase-screenshot{display:block;width:100%;height:100%;object-fit:contain}
#sync-demo .showcase-tabs{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid #e5eef8;background:#f8fbff}
#sync-demo .showcase-tabs button{appearance:none;min-height:44px;min-width:96px;padding:9px 16px;border:1px solid #dbe9f8;border-radius:8px;background:#fff;color:#52718b;font:inherit;font-size:13px;cursor:pointer}
#sync-demo .showcase-tabs button[aria-selected="true"]{background:#087bff;color:#fff;border-color:#087bff}
#sync-demo .showcase-tabs button:focus-visible{outline:3px solid #93c7ff;outline-offset:3px}
@media(max-width:540px){#sync-demo .showcase-tabs{padding:10px 14px}#sync-demo .showcase-tabs button{flex:1;min-width:0}}

/* 首页「自研 Agent」区块（2026-10-20 改版）：整块锁定一屏（扣除悬浮导航占去的 92px：顶距 16 + 高 76），左栏文案、右栏演示视频；
   视频宽度 = min(右栏宽, (右栏高 − 面板头) × 3436/2060)，按剩余高度反推，任何桌面分辨率都不出屏；900px 以下改上下堆叠。 */
.home-page #build.agent-showcase{--agent-nav:92px;--agent-head:50px;height:max(600px,calc(100svh - var(--agent-nav)));display:grid;padding-top:clamp(24px,5vh,64px);padding-bottom:clamp(24px,5vh,64px)}
.agent-layout{max-width:1440px;width:100%;margin:auto;height:100%;min-height:0;display:grid;grid-template-columns:minmax(300px,.62fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);align-items:center}
.agent-copy{min-width:0}
.agent-copy .eyebrow{margin-bottom:0}
.agent-copy h2{font-size:clamp(28px,2.6vw,40px);line-height:1.35;font-weight:650;letter-spacing:-1px;margin-top:clamp(12px,2vh,20px);text-wrap:balance}
.agent-copy h2 em{background:linear-gradient(105deg,#0755ff 0%,#087bff 48%,#00b7d7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.agent-copy>p{color:var(--muted);line-height:1.85;margin-top:clamp(12px,2vh,18px);font-size:15px;max-width:420px}
.agent-copy .mini-label{margin:clamp(18px,3.4vh,34px) 0 0}
.agent-points{list-style:none;margin:clamp(8px,1.4vh,14px) 0 0;padding:0;display:grid}
.agent-points li{display:flex;gap:14px;padding:clamp(10px,1.6vh,15px) 0;border-top:1px solid var(--line)}
.agent-points li:last-child{border-bottom:1px solid var(--line)}
.agent-points b{font-size:13px;color:var(--blue);padding-top:3px;font-variant-numeric:tabular-nums}
.agent-points strong{display:block;font-size:16px;font-weight:600}
.agent-points small{display:block;font-size:13px;line-height:1.55;margin-top:4px;color:var(--muted)}
.agent-stage{height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.agent-panel{margin:0;width:min(100cqw,(100cqh - var(--agent-head)) * 3436 / 2060);overflow:hidden;border:1px solid #dbe9f8;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 20px 65px #2379bd14}
.agent-panel-head{height:var(--agent-head);padding:0 20px;display:flex;align-items:center;border-bottom:1px solid #e5eef8;font-size:13px;color:#57768f}
.agent-panel-head>span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.agent-panel-head .kimpo-ai-brand{width:92px}
.agent-screen{position:relative;aspect-ratio:3436 / 2060;background:#f3f9ff;cursor:pointer;outline:none}
.agent-screen video{display:block;width:100%;height:100%;object-fit:cover}
/* 2026-10-23 演示视频换为网页动画（agent-demo.js），画面挂在此宿主的 Shadow DOM 里，按 cover 铺满 */
.agent-screen .agent-demo-host{position:absolute;inset:0}
.agent-screen:focus-visible{box-shadow:inset 0 0 0 3px #00a4f5}
/* 点击瞬时反馈：中心圆标淡出（播放=三角，暂停=双竖条） */
.agent-flash{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#202d43b3;opacity:0;pointer-events:none}
.agent-flash.on{animation:agent-flash .6s ease-out}
.agent-flash::before{content:"";position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.agent-screen.is-paused .agent-flash::before{left:23px;top:21px;width:6px;height:22px;border:0;background:#fff;box-shadow:12px 0 0 #fff}
@keyframes agent-flash{0%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.15)}}
.agent-paused{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#202d43cc;color:#fff;font-size:12px;pointer-events:none}
.agent-paused::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.agent-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#087bff1f;pointer-events:none}
.agent-progress i{display:block;height:100%;background:#087bff;transform:scaleX(0);transform-origin:left}
@media(max-width:900px){
 .home-page #build.agent-showcase{height:auto;padding-top:56px;padding-bottom:56px}
 .agent-layout{grid-template-columns:1fr;height:auto;gap:32px}
 .agent-stage{height:auto;container-type:normal}
 .agent-panel{width:100%}
 .agent-copy>p{max-width:none}
}
@media(max-width:540px){.agent-panel-head{padding:0 12px;font-size:12px}.agent-panel-head .kimpo-ai-brand{width:76px}.agent-panel{border-radius:12px 12px 0 0}}
@media(prefers-reduced-motion:reduce){.agent-flash.on{animation:none}}