.browser-frame{background:#e7e9f1;border-radius:14px;width:100%;position:relative;overflow:hidden;box-shadow:0 1px 2px #0f0f0f12,0 30px 60px -24px #0f0f0f52}.browser-frame__bar{background:#eef0f6;border-bottom:1px solid #0f0f0f0f;align-items:center;gap:.85rem;height:2.35rem;padding-inline-start:.85rem;padding-inline-end:.85rem;display:flex}.browser-frame__dots{flex-shrink:0;gap:.4rem;display:flex}.browser-frame__dot{border-radius:50%;width:9px;height:9px}.browser-frame__dot--red{background:#ff5f57}.browser-frame__dot--amber{background:#febc2e}.browser-frame__dot--green{background:#28c840}.browser-frame--scrollable .browser-frame__screen{overflow:hidden}.browser-frame--scrollable:hover .browser-frame__scroll-hint,.browser-frame--scrollable:hover:after{opacity:0}.browser-frame--scrollable:after{content:"";pointer-events:none;background:linear-gradient(#fff0,#ffffffeb);height:4.5rem;transition:opacity .3s;position:absolute;bottom:.62rem;left:.62rem;right:.62rem}@media (hover:none){.browser-frame--scrollable .browser-frame__scroll-hint{display:none}}@media (prefers-reduced-motion:reduce){.browser-frame--scrollable .browser-frame__screen img,.browser-frame--scrollable:hover .browser-frame__screen img{filter:none;transition:none;transform:none}}.browser-frame__scroll-hint{z-index:2;color:#1118279e;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;background:#ffffffe0;border:1px solid #11182714;border-radius:999px;align-items:center;gap:.35rem;padding:.45rem .65rem;font-size:.66rem;font-weight:800;line-height:1;transition:opacity .26s;display:inline-flex;position:absolute;bottom:1rem;right:1rem;box-shadow:0 12px 28px -20px #1118276b}.browser-frame__scroll-hint:before{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:.38rem;height:.38rem;transform:rotate(45deg)translateY(-1px)}.browser-frame__url{color:#0f0f0f8c;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;background:#0f0f0f0d;border-radius:999px;align-items:center;gap:.4rem;min-width:0;max-width:min(72%,360px);margin-inline-start:auto;margin-inline-end:auto;padding:.28rem .9rem;font-family:SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;display:inline-flex;overflow:hidden}.browser-frame__url svg{flex-shrink:0}.browser-frame__url>span{text-overflow:ellipsis;min-width:0;overflow:hidden}.browser-frame__screen{max-height:var(--bf-max-height,34rem);background:#fff;line-height:0;overflow:hidden}.browser-frame__screen img{width:100%;height:auto;display:block}