/* cdn.pizza site: framed console screenshots (browser / phone) and the light-dark swap. Uses the site --cp-* tokens. */
.vis{margin:0;min-width:0}
.vis-frame{position:relative;overflow:hidden;background:var(--cp-surface,#fff);border:1px solid var(--cp-border,#e6e6e8);border-radius:var(--cp-radius-xl,10px);box-shadow:var(--cp-shadow-lg,0 10px 30px rgba(47,43,61,.18))}
.vis-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--cp-surface-2,#f3f2f3);border-bottom:1px solid var(--cp-border,#e6e6e8)}
.vis-bar i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--cp-border,#e6e6e8)}
.vis-bar i+i+i{margin-right:6px}
.vis-bar span{flex:0 1 46%;margin:0 auto;padding:2px 12px;border-radius:99px;background:var(--cp-surface,#fff);color:var(--cp-text,#6d6b77);font:500 11px/1.5 var(--cp-font,system-ui,sans-serif);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis picture,.vis img{display:block;width:100%;height:auto}
.vis-phone{max-width:300px;margin-inline:auto}
.vis-phone .vis-frame{padding:9px;border:1px solid #2b2c3a;border-radius:40px;background:#16171f}
.vis-phone img{border-radius:31px}
.vis-caption{margin-top:.6rem;font-size:.8rem;line-height:1.4;color:var(--cp-text,#6d6b77);text-align:center}
.vis .vis-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .vis-dark{display:block}:root:not([data-theme=light]) .vis-light{display:none}}
:root[data-theme=dark] .vis-dark{display:block}:root[data-theme=dark] .vis-light{display:none}