/* Match CaptureEditor: 312×164 pt visible surface, 12 pt insets, 30 pt controls. */
.demo-stage{--selection-right:7%;--selection-bottom:14%;--selection-width:51%;--selection-height:42%}
.capture-shade{display:none}
.selection-region{right:var(--selection-right);bottom:var(--selection-bottom);width:var(--selection-width);height:var(--selection-height);box-shadow:0 0 0 2000px rgb(0 0 0 / .42);z-index:1;border-radius:0}
.annotation-panel{position:absolute;width:min(312px,calc(100% - 24px));height:164px;left:12px;top:12px;right:auto;transform:none;padding:12px;background:#141414;border:0;border-radius:18px;box-shadow:0 0 0 1px #ffffff1f,0 12px 25px -12px #0005;z-index:2;color:#fff}
.panel-heading{display:flex;align-items:center;gap:8px;height:30px;margin:0 0 8px}
.drag-grip{display:flex;align-items:center;color:#595959;width:14px;height:14px}
.drag-grip svg{width:14px;height:14px}
.panel-number{display:grid;place-items:center;flex:none;border-radius:50%;width:26px;height:26px;background:#ff9f0a;color:white;font-size:12px;font-weight:700}
.panel-close{display:grid;place-items:center;width:32px;height:30px;background:#ffffff0f;border-radius:8px;padding:0;color:#e6e6e6;font-size:16px}
.panel-close svg{width:12px;height:12px}
.panel-comment{height:64px;padding:6px 11px;background:#ffffff0f;border-radius:8px;color:#eee;font-size:12px;line-height:1.5;letter-spacing:0}
.panel-tools{display:flex;align-items:center;gap:8px;margin-top:8px;height:30px}
.tool-icon{display:grid;place-items:center;min-width:32px;width:32px;height:30px;border-radius:8px;background:#ffffff0f;color:#eee}
.tool-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool-icon.pen{background:#ff9f0a;color:#171717}
.tool-icon.undo{color:#ddd}
.panel-confirm{border:0;padding:0;font-weight:600;line-height:30px;width:32px;height:30px;border-radius:8px;background:#ff9f0a;color:#141414;font-size:16px;display:grid;place-items:center}
.panel-confirm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.floating-bar{z-index:3}
.demo-stage[data-step=paste] .selection-region{visibility:hidden}
/* A short, repeatable selection → annotation → confirmation sequence. */
.selection-region{right:auto;bottom:auto;transition:none;will-change:width,height;overflow:visible}
.demo-stage[data-phase=select] .annotation-panel{opacity:0;pointer-events:none}
.demo-stage[data-phase=select] .floating-bar{opacity:0}
.demo-stage[data-phase=review] .selection-region{visibility:hidden}
.demo-stage[data-phase=review] .example-window{opacity:1;filter:none}
.demo-stage[data-phase=confirm] .panel-confirm{transform:scale(.88);background:#ffd290}
.pen-mark{width:90%;height:calc(100% - 10px);right:3%;bottom:5px}
.pen-mark path{stroke-dasharray:600;stroke-dashoffset:calc(600 * (1 - var(--mark-progress,1)))}
.demo-stage[data-phase=select] .pen-mark{opacity:0}
.demo-controls{position:relative}
.demo-playback{border:0;background:transparent;color:#8a8378;width:28px;height:28px;display:grid;place-items:center;margin-left:5px;padding:6px}
.demo-playback svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.demo-playback .play-icon{fill:currentColor;stroke-width:0}
.demo-playback[data-playing=true] .play-icon,.demo-playback[data-playing=false] .pause-icon{display:none}
@media(max-width:600px){.demo-controls{gap:8px}.demo-playback{margin-left:0}}
.selection-cursor{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;color:white;filter:drop-shadow(0 1px 1px #000);opacity:0}
.selection-cursor:before,.selection-cursor:after{content:"";position:absolute;background:currentColor}
.selection-cursor:before{width:18px;height:1px;top:8px;left:0}.selection-cursor:after{width:1px;height:18px;left:8px;top:0}
.demo-stage[data-phase=select] .selection-cursor{opacity:1}
.panel-space{flex:1}.caret{height:12px;width:1px;display:inline-block;background:#f39958;vertical-align:-2px;margin-left:2px}
.panel-confirm:hover{background:#ffb630}

.example-settings{min-width:0;flex:1;width:auto}
@media(max-width:600px){.example-window{min-width:0}.example-save .fake-save{margin-left:auto}}