/* Only the recorded example's container and navigation differ from the widget. */
html,body{margin:0;width:100%;height:100%;background:#f5f6f8;color-scheme:light}
.w{position:static;inset:auto;max-width:none;width:100%;height:100%;gap:0;display:block}
.w .p.open{position:static;inset:auto;width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;transform:none;animation:none}
.w .p .hd{flex:none;padding:12px 18px;gap:8px}
.w .p .log{min-height:0;padding:20px;gap:0;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-top:20px}
.replay-step{display:flex;flex-direction:column;gap:18px;padding-bottom:32px;scroll-margin-top:0}
.replay-step+.replay-step{border-top:1px solid var(--line);padding-top:28px}
.replay-step:last-child{padding-bottom:120px}
.narrow button:disabled,.card-choose:disabled,.card-compare:disabled{opacity:1;cursor:default}
.card-ext{pointer-events:none}
.narrow button:disabled:hover,.card-choose:disabled:hover{filter:none;background:var(--accent-soft)}
.new span{font-size:11px}
button:focus-visible,a:focus-visible,.log:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.w .p .log{padding:14px}.w .p .hd{padding:10px 14px}.replay-footer{padding:10px 14px;font-size:10px}.replay-footer>span{max-width:190px}.replay-step:last-child{padding-bottom:90px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.replay-step[hidden]{display:none}
#selection-bars{flex:none;min-width:0}
@media(max-width:600px){#selection-bars .cmpbar{flex-wrap:wrap;gap:6px}#selection-bars .bar-text{flex:1;min-width:120px}#selection-bars .bar-actions{margin-left:auto}#selection-bars .bar-btn{min-height:36px}}
/* A quiet first-use cue preserves the widget's original circular send button. */
.replay-send-hint{margin:0 2px 8px;font-size:11.5px;line-height:1.5;color:var(--soft)}
.replay-send-hint[hidden]{display:none}
.w .p .i .send{position:relative}
.send-attention::before,.send-attention::after{content:"";position:absolute;inset:0;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;animation:send-ring 2.4s ease-out infinite}
.send-attention::after{animation-delay:1.2s;opacity:0}
@keyframes send-ring{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.75);opacity:0}}
@media(max-width:600px){.replay-send-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){.send-attention::before,.send-attention::after{display:none;animation:none}}