*{box-sizing:border-box}body{margin:0;background:#f7fafc;color:#17324a;font-family:"Segoe UI","Microsoft YaHei",sans-serif}main{max-width:1280px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:12px}small{font-size:11px;color:#647b8c}canvas{display:block;width:100%;height:auto;border-radius:12px;background:#fff}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}#caption{font-size:15px;font-weight:600}.controls{display:flex;gap:8px}button{font:inherit;font-size:12px;border:1px solid #cbd9e3;background:transparent;border-radius:20px;color:#17324a;padding:7px 12px;cursor:pointer}button:focus-visible{outline:2px solid #0788df;outline-offset:3px}#error{color:#a32c2c} .bar{height:2px;background:#dfe8ee;margin-top:12px}.bar i{display:block;height:100%;background:#0788df;transform-origin:left;transform:scaleX(0)}@media(max-width:520px){main{padding:10px 6px}header{font-size:12px}small{font-size:10px}#caption{font-size:12px}button{padding:6px 9px}}
/* 操作提示跟随截图目标位置，独立叠加，不改动原图与固定镜头。 */
.demo-stage{position:relative}
.action-hint{position:absolute;z-index:2;left:clamp(96px,var(--hint-x),calc(100% - 96px));top:var(--hint-y);transform:translate(-50%,-100%);padding:7px 11px;border-radius:7px;background:#17324a;color:#fff;font-size:14px;line-height:1.5;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(23,50,74,.14)}
.action-hint::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom:0;border-top-color:#17324a}
/* 文字先渐显，再单独渐显区域框，透明填充保持原界面可读。 */
.action-area{position:absolute;z-index:1;box-sizing:border-box;border:2px solid #0788df;border-radius:6px;background:rgba(7,136,223,.08);box-shadow:0 0 0 3px rgba(7,136,223,.10);pointer-events:none}
.action-area[hidden],.action-hint[hidden]{display:none}
@media(max-width:520px){.action-area{border-width:1.5px;border-radius:4px;box-shadow:0 0 0 2px rgba(7,136,223,.10)}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
footer{justify-content:flex-end}
@media(max-width:520px){.action-hint{padding:6px 9px;font-size:11px;border-radius:6px}}

/* 允许用户亲自悬停或键盘聚焦结果，播放同一预览素材。 */
.preview-hover-zone{position:absolute;z-index:1;border:0!important;border-radius:0!important;padding:0!important;margin:0;background:transparent!important;box-shadow:none;cursor:pointer}
.preview-hover-zone[hidden]{display:none}
.preview-hover-zone:focus-visible{outline:2px solid #0788df;outline-offset:2px}