.BrowserFrame-module__zg0Ohq__root{--hair:1px;--ease:cubic-bezier(.2, .8, .2, 1);--t-color:calc(.3s * var(--slow,1));--t-ui:calc(.35s * var(--slow,1));--bar-top:#f8f8f7;--bar-bottom:#f1f1ef;--bar-edge:#0000001f;--field:#0000000b;--label:#4a4d49;--light-rest:#dad9d5;width:100%;box-shadow:0 0 0 var(--hair) #00000024, 0 1px 2px #1416140a, 0 12px 32px -16px #14161429;pointer-events:none;transition:box-shadow var(--t-ui) var(--ease);border-radius:12px;position:relative;container-type:inline-size}@media (min-resolution:2x){.BrowserFrame-module__zg0Ohq__root{--hair:.5px}}.BrowserFrame-module__zg0Ohq__root[data-live]{box-shadow:0 0 0 var(--hair) #00000029, 0 2px 4px #1416140d, 0 22px 44px -20px #1416143d}.BrowserFrame-module__zg0Ohq__clip{isolation:isolate;border-radius:inherit;background:#fff;position:relative;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}.BrowserFrame-module__zg0Ohq__bar{box-sizing:border-box;height:clamp(28px,22px + 1.6cqi,40px);border-bottom:var(--hair) solid var(--bar-edge);background:linear-gradient(var(--bar-top), var(--bar-bottom));grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:round(clamp(28px,22px + 1.6cqi,40px),1px);padding-inline:clamp(10px,6px + .8cqi,14px);display:grid}.BrowserFrame-module__zg0Ohq__lights{gap:clamp(5px,3px + .45cqi,8px);display:flex}.BrowserFrame-module__zg0Ohq__lights i{width:clamp(8px,4px + .72cqi,12px);aspect-ratio:1;background:var(--light-rest);width:round(clamp(8px,4px + .72cqi,12px),1px);transition:background-color var(--t-color) var(--ease);border-radius:50%;box-shadow:inset 0 0 0 .5px #00000014}.BrowserFrame-module__zg0Ohq__root[data-live] .BrowserFrame-module__zg0Ohq__lights i:first-child{background:#ff5f57;transition-delay:0s}.BrowserFrame-module__zg0Ohq__root[data-live] .BrowserFrame-module__zg0Ohq__lights i:nth-child(2){transition-delay:calc(40ms * var(--slow,1));background:#febc2e}.BrowserFrame-module__zg0Ohq__root[data-live] .BrowserFrame-module__zg0Ohq__lights i:nth-child(3){transition-delay:calc(80ms * var(--slow,1));background:#28c840}.BrowserFrame-module__zg0Ohq__root[data-live] .BrowserFrame-module__zg0Ohq__lights i{box-shadow:inset 0 0 0 .5px #00000024}.BrowserFrame-module__zg0Ohq__address{width:clamp(150px,54cqi,440px);height:clamp(19px,15.5px + 1cqi,26px);background:var(--field);height:round(clamp(19px,15.5px + 1cqi,26px),1px);color:var(--label);letter-spacing:-.01em;white-space:nowrap;border-radius:clamp(5px,3px + .4cqi,7px);justify-content:center;align-items:center;padding-inline:10px;font:500 clamp(10px,9px + .28cqi,12px)/1 ui-monospace,SF Mono,Menlo,monospace;display:flex;overflow:hidden}.BrowserFrame-module__zg0Ohq__address span{text-overflow:ellipsis;overflow:hidden}.BrowserFrame-module__zg0Ohq__viewport{background:var(--viewport-bg,#fff);position:relative;overflow:hidden}.BrowserFrame-module__zg0Ohq__viewport>picture,.BrowserFrame-module__zg0Ohq__viewport>picture img,.BrowserFrame-module__zg0Ohq__viewport>video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.BrowserFrame-module__zg0Ohq__playback{--cursor-x:50%;--cursor-y:50%;z-index:4;color:#141614b8;cursor:pointer;pointer-events:auto;width:44px;height:44px;transition:opacity var(--t-color) var(--ease);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;bottom:10px;right:10px}.BrowserFrame-module__zg0Ohq__playbackIndicator{background:#fafaf9e6;border:1px solid #00000021;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 3px 12px #1416141f}.BrowserFrame-module__zg0Ohq__playback:hover .BrowserFrame-module__zg0Ohq__playbackIndicator,.BrowserFrame-module__zg0Ohq__playback:focus-visible .BrowserFrame-module__zg0Ohq__playbackIndicator{background:#fffffff7}.BrowserFrame-module__zg0Ohq__playback:focus-visible{outline-offset:2px;outline:2px solid #76618fb8}.BrowserFrame-module__zg0Ohq__playback svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.BrowserFrame-module__zg0Ohq__playback svg path[d$=Z]{fill:currentColor;stroke:none}@media (max-width:640px){.BrowserFrame-module__zg0Ohq__root{border-radius:10px}.BrowserFrame-module__zg0Ohq__playback{bottom:8px;right:8px}}@media (hover:hover) and (pointer:fine){.BrowserFrame-module__zg0Ohq__playback{cursor:none;border-radius:0;width:100%;height:100%;inset:0}.BrowserFrame-module__zg0Ohq__playbackIndicator{left:var(--cursor-x);top:var(--cursor-y);opacity:0;width:clamp(46px,7cqi,58px);height:clamp(46px,7cqi,58px);transition:opacity var(--t-color) var(--ease);position:absolute;transform:translate(-50%,-50%)}.BrowserFrame-module__zg0Ohq__playback:hover .BrowserFrame-module__zg0Ohq__playbackIndicator,.BrowserFrame-module__zg0Ohq__playback:focus-visible .BrowserFrame-module__zg0Ohq__playbackIndicator{opacity:1}.BrowserFrame-module__zg0Ohq__playback:focus-visible{outline-offset:-3px}}@media (prefers-reduced-motion:reduce){.BrowserFrame-module__zg0Ohq__root,.BrowserFrame-module__zg0Ohq__lights i,.BrowserFrame-module__zg0Ohq__playback{transition:none}}