@layer components{.browser-mockup_wrap{--_u:1cqw;--_glow:var(--brand-500);--_ratio:3 / 2;--_screen:9 / 10;--_tilt:-4deg;--_grain:.35;--_blur:0;--_focus:50%;--_axis:to bottom;--_width:52;--_top:6;width:100%;aspect-ratio:var(--_ratio);border-radius:var(--radius-main);background-color:var(--light-100);position:relative;overflow:clip;container-type:inline-size}.browser-mockup_wrap.bare{background-color:#0000;border-radius:0}.browser-mockup_glow{background-image:radial-gradient(42% 52% at 84% 10%, var(--_glow) 0%, color-mix(in lab, var(--_glow) 35%, transparent) 38%, transparent 72%), radial-gradient(46% 46% at 6% 76%, color-mix(in lab, var(--dark-900) 42%, transparent) 0%, transparent 70%);position:absolute;inset:-20%}.browser-mockup_grain{opacity:var(--_grain);mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.browser-mockup_scene{perspective:calc(var(--_u) * 150);perspective-origin:50% 30%;position:absolute;inset:0}.browser-mockup_window{--_radius:calc(var(--_u) * .9);top:calc(var(--_u) * var(--_top));width:calc(var(--_u) * var(--_width));translate:-50%;rotate:y var(--_tilt);border-radius:var(--_radius);background-color:var(--_chrome);box-shadow:0 calc(var(--_u) * .2) calc(var(--_u) * .6) #00000029, 0 calc(var(--_u) * 3.2) calc(var(--_u) * 7) calc(var(--_u) * -1.2) #0000006b;flex-direction:column;display:flex;position:absolute;left:50%;overflow:clip}.browser-mockup_wrap.fill{--_width:100;--_top:0}.browser-mockup_wrap.side{--_width:64;--_top:10}.browser-mockup_wrap.side .browser-mockup_window{left:auto;right:calc(var(--_u) * -7);translate:none}.browser-mockup_wrap.zoom{--_width:88;--_top:4}.browser-mockup_wrap.zoom .browser-mockup_window{left:calc(var(--_u) * 14);translate:none}.browser-mockup_focus{pointer-events:none;-webkit-backdrop-filter:blur(calc(var(--_u) * var(--_blur) * 1.6));backdrop-filter:blur(calc(var(--_u) * var(--_blur) * 1.6));mask-image:linear-gradient(var(--_axis), #000 0%, #0000 max(0%, calc(var(--_focus) - 16%)), #0000 min(100%, calc(var(--_focus) + 16%)), #000 100%);position:absolute;inset:0}.browser-mockup_wrap.bald .browser-mockup_bar{display:none}.browser-mockup_wrap.bald .browser-mockup_screen{border-radius:inherit}.browser-mockup_bar{--_light-1:#ff5f57;--_light-2:#febc2e;--_light-3:#28c840;align-items:center;gap:calc(var(--_u) * 1.1);height:calc(var(--_u) * 2.5);padding-inline:calc(var(--_u) * .9);color:var(--_chrome-ink);font-family:var(--primary-family);flex:none;display:flex}.browser-mockup_bar svg{width:calc(var(--_u) * .95);aspect-ratio:1;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;flex:none}.browser-mockup_lights{gap:calc(var(--_u) * .34);flex:none;display:flex}.browser-mockup_lights i{width:calc(var(--_u) * .46);aspect-ratio:1;background-color:var(--_light-1);border-radius:50%}.browser-mockup_lights i:nth-child(2){background-color:var(--_light-2)}.browser-mockup_lights i:nth-child(3){background-color:var(--_light-3)}.browser-mockup_tools{align-items:center;gap:calc(var(--_u) * .85);display:flex}.browser-mockup_tools.end{margin-left:auto}.browser-mockup_shield{margin-left:auto;display:flex}.browser-mockup_reload{margin-right:auto;display:flex}.browser-mockup_url{justify-content:center;align-items:center;gap:calc(var(--_u) * .3);width:calc(var(--_u) * var(--_width) * .34);height:calc(var(--_u) * 1.3);border-radius:calc(var(--_u) * .32);background-color:var(--_chrome-pill);font-size:calc(var(--_u) * .52);letter-spacing:var(--letter-spacing-tight);white-space:nowrap;flex:none;display:flex}.browser-mockup_url svg{width:calc(var(--_u) * .62);stroke-width:1.6px}.browser-mockup_screen{aspect-ratio:var(--_screen);background-color:var(--_chrome-pill);overflow:clip}.browser-mockup_screen img{object-fit:cover;object-position:top;width:100%;height:100%}.browser-mockup_wrap.theme-light{--_chrome:#edeaea;--_chrome-pill:#f8f7f7;--_chrome-ink:#6d6d71}.browser-mockup_wrap.theme-dark{--_chrome:#2b292a;--_chrome-pill:#201e1f;--_chrome-ink:#9d9a9c}@media not (min-width:48rem){.browser-mockup_wrap{--_width:78;--_top:5}.browser-mockup_window{rotate:none}.browser-mockup_wrap.zoom{--_width:104}.browser-mockup_wrap.zoom .browser-mockup_window{left:calc(var(--_u) * 6)}.browser-mockup_wrap.side{--_width:84;--_top:7}.browser-mockup_wrap.side .browser-mockup_window{left:50%;right:auto;translate:-50%}.browser-mockup_wrap.fill{--_width:100}}}