.visit-demo{margin:24px 0;--v-time:10s;--v-chrome:#e7e5df;--v-blue:#2852b7;--v-paper:#fffef8;font-size:12px;line-height:1.4}
.visit-visual{pointer-events:none;user-select:none}
.visit-visual img{width:19px;height:16px;object-fit:contain;flex:none}
.v-browser{position:relative;border:1px solid #929087;border-radius:5px;overflow:hidden;background:var(--v-paper)}
.v-toolbar{height:35px;padding:6px 8px;display:flex;align-items:center;gap:8px;background:var(--v-chrome);font-size:10px;color:#77736c}
.v-dots{font-size:6px;letter-spacing:2px;white-space:nowrap}
.v-address{flex:1;min-width:0;height:23px;padding:4px 8px;border:1px solid #cfcdc7;border-radius:3px;background:#fff;font:11px/14px ui-monospace,monospace;animation:v-address-focus var(--v-time) infinite}
.v-typed{display:inline-block;width:11ch;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:middle;font-family:ui-monospace,monospace;border-right:1px solid currentColor;animation:v-type var(--v-time) steps(11,end) infinite}
.v-bookmarks{height:33px;display:flex;align-items:center;gap:9px;padding:4px 8px;background:var(--v-chrome);border-bottom:1px solid #c9c7c1;font:9px/1 Arial,sans-serif}
.v-fake{display:inline-flex;align-items:center;gap:4px;color:#68655e;white-space:nowrap}.v-fake i{width:7px;height:7px;background:#7b8b9b;border-radius:1px}.v-fake:nth-child(2) i{background:#aa7565}
.v-bookmark{display:inline-flex;align-items:center;gap:5px;padding:4px 5px;white-space:nowrap;border-radius:3px;color:#171717;background:transparent;animation:v-bookmark-click var(--v-time) infinite}
.v-bookmarks .v-bookmark{margin-left:auto;font-size:10px}
.v-bookmark img{width:16px;height:13px}
.v-canvas{position:relative;height:237px;padding:18px;background:var(--v-paper)}
.v-website{animation:v-site var(--v-time) infinite}
.v-website>span{display:block;font-size:8px;letter-spacing:1px;color:#77736c}.v-website>b{display:block;font-size:24px;line-height:1.1;letter-spacing:-.6px;margin:12px 0 18px}
.v-website>i{display:block;height:5px;background:#ddd9c9;width:85%;margin:7px 0}.v-website>i:nth-last-child(2){width:62%}.v-website>em{display:block;width:70px;height:20px;background:#c0c7ad;margin-top:17px}
.v-popup{background:#f4f1e9;color:#171717;border:1px solid #171717;box-shadow:3px 3px #171717;padding:12px;box-sizing:border-box;text-align:left}
.v-brand{display:flex;align-items:center;gap:7px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid #b9b6ad}.v-brand strong{font-size:13px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.v-popup>b{display:block;font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.5px}
.step .v-popup p{font-size:11px;line-height:1.4;margin:8px 0 12px}
.v-confirm{position:relative;display:block;background:#171717;color:white;text-align:center;padding:9px 5px;font-size:11px;font-weight:700;animation:v-confirm-click var(--v-time) infinite}
.v-canvas>.v-popup{position:absolute;right:12px;bottom:14px;width:calc(100% - 24px);max-width:236px;animation:v-popup-show var(--v-time) infinite}
.v-finish{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f4f1e9;color:#3b654e;font-size:17px;font-weight:600;opacity:0;animation:v-finish var(--v-time) infinite}
.v-cursor{position:absolute;z-index:5;width:30px;height:36px;filter:drop-shadow(0 1px 1px #0005);transform-origin:3px 2px}
.visit-visual .v-cursor img{display:block;width:100%;height:100%}
.v-browser>.v-cursor{animation:v-pointer var(--v-time) infinite}
.v-captions{height:33px;position:relative;margin-top:10px;font-size:11px;font-weight:500;text-align:center}
.v-captions>span{position:absolute;inset:0;opacity:0;animation: v-first var(--v-time) infinite}
.v-captions>span:nth-child(2){animation-name:v-second}.v-captions>span:nth-child(3){animation-name:v-third}

/* The URL completes in 0.8 seconds; the popup keeps time for reading. */
@keyframes v-type{0%,2%{width:0}10%,96%{width:11ch}98%,100%{width:0}}
@keyframes v-address-focus{0%,13%{outline:2px solid #2852b7;outline-offset:1px}17%,100%{outline:2px solid transparent;outline-offset:1px}}
@keyframes v-site{0%,13%{opacity:0}18%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes v-bookmark-click{0%,23%,40%,100%{background:transparent;box-shadow:0 0 0 2px transparent;transform:scale(1)}28%,37%{background:#d8e2ff;box-shadow:0 0 0 2px #2852b7}32%,34%{background:#c6d4f7;transform:scale(.96)}}
@keyframes v-confirm-click{0%,71%,83%,100%{background:#171717;transform:scale(1)}76%,80%{background:#2852b7;transform:scale(.97)}}
@keyframes v-popup-show{0%,43%{opacity:0;transform:translateY(9px)}49%,89%{opacity:1;transform:translateY(0)}93%,100%{opacity:0;transform:translateY(0)}}
@keyframes v-finish{0%,84%{opacity:0}88%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes v-pointer{0%,15%{left:60%;top:21px;opacity:0;transform:scale(1)}20%{left:70%;top:33px;opacity:1}29%,38%{left:78%;top:53px;opacity:1}32%,34%{left:78%;top:53px;opacity:1;transform:scale(.8)}49%{left:65%;top:220px;opacity:1;transform:scale(1)}56%,100%{left:65%;top:264px;opacity:0;transform:scale(1)}}
@keyframes v-first{0%,18%{opacity:1;transform:translateY(0)}22%,96%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes v-second{0%,19%{opacity:0;transform:translateY(5px)}24%,41%{opacity:1;transform:translateY(0)}45%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes v-third{0%,43%{opacity:0;transform:translateY(5px)}49%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes v-review-pointer{0%,64%{opacity:0;transform:translate(10px,10px)}72%,84%{opacity:1;transform:translate(0,0) scale(1)}76%,78%{opacity:1;transform:translate(0,0) scale(.8)}90%,100%{opacity:0;transform:translate(0,0)}}
.v-confirm>.v-cursor{top:45%;right:10px;animation:v-review-pointer var(--v-time) infinite}
@media(max-width:980px) and (min-width:651px){.v-dots{display:none}.v-bookmarks>.v-fake:nth-child(2){display:none}.v-bookmarks{gap:3px;padding-left:4px;padding-right:4px}.v-bookmarks .v-bookmark{font-size:9px;gap:3px;padding:4px 2px}.v-bookmarks .v-bookmark img{width:13px}.v-popup .v-brand strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.visit-visual *{animation:none!important}.v-typed{width:11ch;border-right:0}.v-website,.v-canvas>.v-popup{opacity:1;transform:none}.v-cursor,.v-finish,.v-captions{display:none}}
