.browser-frame{border-radius:12px;width:100%;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.25)}.browser-frame-bar{align-items:center;gap:.75rem;height:40px;padding:0 14px;display:flex}.browser-frame--light .browser-frame-bar{background:#f3f4f6;border-bottom:1px solid #e5e7eb}.browser-frame--dark .browser-frame-bar{background:#21262f;border-bottom:1px solid #30363d}.browser-frame-dots{flex-shrink:0;gap:7px;display:flex}.browser-frame-dots span{border-radius:50%;width:11px;height:11px}.browser-frame-dots span:first-child{background:#ff5f57}.browser-frame-dots span:nth-child(2){background:#febc2e}.browser-frame-dots span:nth-child(3){background:#28c840}.browser-frame-url{white-space:nowrap;text-overflow:ellipsis;border-radius:999px;flex:1;justify-content:center;align-items:center;gap:6px;max-width:420px;height:24px;margin:0 auto;padding:0 12px;font-size:.72rem;font-weight:500;display:flex;overflow:hidden}.browser-frame--light .browser-frame-url{color:#6b7280;background:#fff;border:1px solid #e5e7eb}.browser-frame--dark .browser-frame-url{color:#8b949e;background:#161b22;border:1px solid #30363d}.browser-frame-bar-spacer{flex-shrink:0;width:47px}.browser-frame-body{position:relative}.browser-frame--light .browser-frame-body{background:#fff}.browser-frame--dark .browser-frame-body{background:#0d1117}.browser-frame-body--screenshot{aspect-ratio:16/10}@media (max-width:576px){.browser-frame-bar{height:32px;padding:0 10px}.browser-frame-dots span{width:9px;height:9px}.browser-frame-url{font-size:.65rem}.browser-frame-bar-spacer{width:41px}}