/* Shared stage geometry prevents layout shifts when switching capture modes. */
.video-stage{display:none}
#workflow-panel .demo-screen{height:520px}
#workflow-panel .step-description{min-height:3.2em}
.demo-screen[data-mode=video]>.sample-document,.demo-screen[data-mode=video]>.selection-box,.demo-screen[data-mode=video]>.result-card,.demo-screen[data-mode=video]>.real-bar{display:none!important}
.demo-screen[data-mode=video] .video-stage{display:block;position:absolute;inset:0;color:var(--ink)}
.video-area{position:absolute;left:14%;top:12%;width:72%;height:58%}
.video-page{position:absolute;inset:0;box-sizing:border-box;border:1px solid #cbd4c2;border-radius:10px;background:#fffef9;padding:24px 30px;overflow:hidden;box-shadow:0 12px 32px #173e3210}
.video-window-dots{color:#bccbae;font-size:12px;letter-spacing:5px}
.video-page h3{font-size:clamp(20px,2.2vw,30px);margin:22px 0 14px;letter-spacing:-.03em}
.video-page-lines{display:grid;gap:9px;margin-bottom:22px}.video-page-lines i{height:8px;background:#e3e8da;border-radius:3px;width:80%}.video-page-lines i+ i{width:55%}
.video-demo-button{display:inline-block;border-radius:8px;padding:10px 16px;background:#173e32;color:white;font-size:14px}
.video-detail{position:absolute;right:8%;bottom:14%;padding:16px 22px;background:#e5efda;border:1px solid #c8d7b7;border-radius:10px;font-size:18px;opacity:0}
.video-pointer{display:none;position:absolute;font-size:30px;text-shadow:1px 1px white;z-index:3}
.video-frame{position:absolute;inset:0;border:2px solid #486d4e;box-shadow:0 0 0 1000px #1b302c32;pointer-events:none;border-radius:3px;box-sizing:border-box}
.video-frame>span{position:absolute;top:-30px;left:0;background:#173e32;color:white;border-radius:5px;padding:3px 8px;font-size:12px}
.video-frame i{position:absolute;width:7px;height:7px;background:white;border:1px solid #486d4e}.video-frame i:nth-of-type(1){left:-4px;top:-4px}.video-frame i:nth-of-type(2){right:-4px;top:-4px}.video-frame i:nth-of-type(3){left:-4px;bottom:-4px}.video-frame i:nth-of-type(4){right:-4px;bottom:-4px}
.video-record-bar{display:none;position:absolute;right:0;top:calc(100% + 12px);align-items:center;gap:14px;padding:7px 10px 7px 16px;background:#f8f3e9;border:1px solid #ddd5c6;border-radius:30px;box-shadow:0 6px 18px #173e321a;font-size:16px;z-index:5}
.video-clock{height:24px;line-height:24px;overflow:hidden;font-variant-numeric:tabular-nums;font-weight:600}.video-clock>span{display:block}
.video-bar-tools{display:flex;align-items:center;gap:13px;color:#51442d}.video-bar-tools svg{width:18px;height:18px}
.video-stop{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#e9e2d5;color:#51442d;font-size:21px;cursor:pointer}.video-stop:focus-visible{outline:3px solid #486d4e;outline-offset:3px}
.video-stop-tip{position:absolute;right:0;top:calc(100% + 10px);padding:7px 11px;border-radius:8px;background:#173e32;color:white;white-space:nowrap;font-size:13px;pointer-events:none}
.demo-screen[data-mode=video][data-step="2"] .video-record-bar{display:flex}
.demo-screen[data-mode=video][data-step="2"] .video-frame{box-shadow:none;border-color:#86a078}
.demo-screen[data-mode=video][data-step="2"] .video-frame>*{display:none}
#workflow-panel .demo-screen[data-mode=video][data-step="2"] .demo-top{display:none}
.demo-screen[data-mode=video][data-step="2"] .video-pointer{display:block}
.scene-running[data-mode=video][data-step="0"] .video-frame{animation:record-frame 2.6s both;transform-origin:top left}
.scene-running[data-mode=video][data-step="0"] .demo-shortcut{animation:demo-key-press .65s .3s both}
.scene-running[data-mode=video][data-step="1"] .demo-shortcut{animation:demo-key-press .65s 1s both}
.scene-running[data-mode=video][data-step="2"] .video-clock>span{animation:record-time 5s steps(5,end) both}
.scene-running[data-mode=video][data-step="2"] .video-pointer{animation:record-pointer 5.8s ease-in-out both}
.scene-running[data-mode=video][data-step="2"] .video-demo-button{animation:record-click 6.5s both}
.scene-running[data-mode=video][data-step="2"] .video-detail{animation:demo-status-in .4s 2.3s both}
.scene-running[data-mode=video][data-step="2"] .video-stop-tip{animation:demo-status-in .3s 4.4s both}
.scene-running[data-mode=video][data-step="2"] .video-stop{animation:record-stop 6.5s both}
.video-review,.video-chat{display:none;position:absolute;box-sizing:border-box;left:50%;top:42%;width:66%;max-width:500px;transform:translate(-50%,-50%);background:#fffef9;border:1px solid #cbd5bf;border-radius:16px;padding:22px;box-shadow:0 12px 32px #173e321a}
.video-review-label,.video-chat-label{font-size:14px;color:var(--muted)}
.video-thumbnail{display:grid;place-items:center;height:120px;margin:14px 0;background:#e5efda;border-radius:8px;color:#486d4e;font-size:32px}.video-file-note{font-size:15px}
.video-attachment{display:flex;align-items:center;gap:16px;margin-top:20px;border:1px solid #cbd5bf;border-radius:10px;padding:18px;background:#f1f5e9;font-size:17px}.video-attachment>span{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#dce9ca}.video-attachment small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.video-share-note{margin:16px 0 0;color:#486d4e;font-size:14px}
.demo-screen[data-mode=video][data-step="3"] .video-area{display:none}
.demo-screen[data-mode=video][data-step="3"] .video-review,.demo-screen[data-mode=video][data-step="3"] .video-chat{display:block}
.scene-running[data-mode=video][data-step="3"] .video-review{animation:record-review 5s both}
.scene-running[data-mode=video][data-step="3"] .video-chat{animation:demo-status-in .4s 2.2s both}
.scene-running[data-mode=video][data-step="3"] .video-attachment{animation:demo-paste-in .45s 2.6s both}
.scene-running[data-mode=video][data-step="3"] .demo-shortcut{animation:demo-key-press .65s 2.3s both}
@keyframes record-frame{0%,22%{opacity:0;clip-path:inset(0 100% 100% 0)}25%{opacity:1}80%,100%{opacity:1;clip-path:inset(-35px -5px -5px -5px)}}
@keyframes record-time{to{transform:translateY(-120px)}}
@keyframes record-pointer{0%,15%{left:78%;top:25%}32%,40%{left:20%;top:73%}70%{left:70%;top:60%}95%,100%{left:96%;top:109%}}
@keyframes record-click{0%,29%,42%,100%{box-shadow:none}34%,38%{box-shadow:0 0 0 8px #abc58b77;transform:scale(.97)}}
@keyframes record-stop{0%,88%{background:#e9e2d5}94%,100%{background:#dfeacb;box-shadow:0 0 0 4px #b5ce9266}}
@keyframes record-review{0%,36%{opacity:1;visibility:visible}44%,100%{opacity:0;visibility:hidden}}
@media(max-width:640px){
 #workflow-panel .demo-screen{height:500px}
 #workflow-panel .step-description{min-height:6.4em}
 .video-area{left:7%;width:86%;top:12%;height:57%}.video-page{padding:20px}.video-page h3{font-size:21px;margin-top:22px}.video-detail{right:6%;bottom:8%;font-size:15px;padding:10px 14px}
 .video-record-bar{gap:10px;padding-left:12px}.video-bar-tools{gap:9px}.video-bar-tools svg{width:16px;height:16px}
 .video-review,.video-chat{width:88%;padding:18px}
 #workflow-panel .step-list{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
 #workflow-panel .step-list li{font-size:12px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
 #workflow-panel.scene-running[data-mode=video] *{animation:none!important;transition:none!important}
 .demo-screen[data-mode=video][data-step="2"] .video-detail{opacity:1}
 .demo-screen[data-mode=video][data-step="2"] .video-pointer{display:none}
 .demo-screen[data-mode=video][data-step="3"] .video-review{display:none}
}