.mbcam-toggle {
  position: fixed; z-index: 96; right: var(--gutter, 20px); bottom: 22px;
  display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .95rem 0 .8rem;
  border-radius: 999px; border: 1px solid rgba(245, 245, 242, .16); background: rgba(11, 11, 13, .78); color: #F5F5F2;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  transition: border-color .3s, background-color .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.mbcam-toggle:hover { border-color: rgba(217, 14, 67, .7); transform: translateY(-2px); }
.mbcam-toggle:focus-visible { outline: 2px solid #D90E43; outline-offset: 3px; }
.mbcam-toggle__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(245, 245, 242, .45); transition: background-color .3s, box-shadow .3s; }
.mbcam-on .mbcam-toggle { border-color: rgba(217, 14, 67, .8); }
.mbcam-on .mbcam-toggle__dot { background: #D90E43; box-shadow: 0 0 10px 2px rgba(217, 14, 67, .7); animation: mbcam-blink 1s steps(1) infinite; }
@keyframes mbcam-blink { 50% { opacity: .25; } }

.mbcam { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  color: #F5F5F2; font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .38) 100%); }
.mbcam-on .mbcam { opacity: 1; visibility: visible; }
.mbcam, .mbcam * { direction: ltr; }

.mbcam__grid i { position: absolute; background: rgba(245, 245, 242, .16); }
.mbcam__grid i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.mbcam__grid i:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.mbcam__grid i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.mbcam__grid i:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

.mbcam__corners { position: absolute; inset: calc(var(--header-height, 84px) + 6px) 16px 16px 16px; }
.mbcam__corners i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(245, 245, 242, .85); }
.mbcam__corners i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.mbcam__corners i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.mbcam__corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.mbcam__corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.mbcam__hud { position: absolute; display: flex; align-items: center; gap: .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.mbcam__hud--tl { top: calc(var(--header-height, 84px) + 22px); left: 34px; }
.mbcam__hud--tr { top: calc(var(--header-height, 84px) + 22px); right: 34px; }
.mbcam__hud--bl { bottom: 30px; left: 34px; opacity: .85; }
.mbcam__hud--br { bottom: 78px; right: 34px; opacity: .85; }
.mbcam__rec { display: inline-flex; align-items: center; gap: .45rem; color: #fff; }
.mbcam__rec i { width: 10px; height: 10px; border-radius: 50%; background: #D90E43; box-shadow: 0 0 10px 2px rgba(217, 14, 67, .75); animation: mbcam-blink 1s steps(1) infinite; }
.mbcam__bat { position: relative; width: 26px; height: 12px; border: 1.5px solid rgba(245, 245, 242, .9); border-radius: 2px; }
.mbcam__bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: rgba(245, 245, 242, .9); }
.mbcam__bat i { position: absolute; inset: 1.5px; right: 28%; background: rgba(245, 245, 242, .9); }

.mbcam__cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: linear-gradient(rgba(245, 245, 242, .6), rgba(245, 245, 242, .6)) center / 100% 1px no-repeat,
              linear-gradient(rgba(245, 245, 242, .6), rgba(245, 245, 242, .6)) center / 1px 100% no-repeat; }

.mbcam__focus { position: absolute; left: 0; top: 0; width: 72px; height: 72px; will-change: transform, width, height; }
.mbcam__focus i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(245, 245, 242, .95); transition: border-color .2s; }
.mbcam__focus i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.mbcam__focus i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.mbcam__focus i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.mbcam__focus i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.mbcam__af { position: absolute; left: 0; top: -18px; font-size: .6rem; font-weight: 700; letter-spacing: .14em; opacity: 0; transition: opacity .2s; }
.mbcam__focus.is-lock i { border-color: #3DDC84; }
.mbcam__focus.is-lock .mbcam__af { opacity: 1; color: #3DDC84; }

@media (max-width: 899px) {
  .mbcam-toggle { bottom: 16px; right: 16px; height: 34px; }
  .mbcam__hud--tl, .mbcam__hud--tr { top: calc(var(--header-height, 72px) + 14px); }
  .mbcam__hud--tl { left: 26px; } .mbcam__hud--tr { right: 26px; }
  .mbcam__hud--bl { bottom: 66px; left: 26px; font-size: .6rem; }
  .mbcam__hud--br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mbcam-on .mbcam-toggle__dot, .mbcam__rec i { animation: none; }
}