.saas-qr-camera{align-items:flex-start;gap:var(--saas-space-sm);flex-direction:column;display:flex}.saas-qr-camera__view{aspect-ratio:4/3;border-radius:var(--saas-radius-lg);background:var(--saas-inverse-surface);inline-size:min(100%,420px);position:relative;overflow:hidden}.saas-qr-camera__video{object-fit:cover;block-size:100%;inline-size:100%}.saas-qr-camera__frame{border:3px solid var(--saas-brand-on-primary);border-radius:var(--saas-radius-md);box-shadow:0 0 0 999px color-mix(in srgb, var(--saas-inverse-surface) 45%, transparent);position:absolute;inset:18%}.saas-qr-camera__hint{color:var(--saas-inverse-text);font-size:var(--saas-font-body-sm);text-align:center;position:absolute;inset-block-end:var(--saas-space-sm);inset-inline:0}.saas-qr-camera__problem{color:var(--saas-status-warning);font-size:var(--saas-font-body-sm);margin:0}.saas-qr-camera__close{align-items:center;gap:var(--saas-space-2xs);min-block-size:34px;padding-inline:var(--saas-space-sm);border:1px solid var(--saas-border-default);border-radius:var(--saas-radius-full);background:var(--saas-bg-surface);color:var(--saas-text-primary);font-family:var(--saas-font-family);font-size:var(--saas-font-body-sm);cursor:pointer;display:inline-flex}.saas-qr-camera__close:focus-visible{box-shadow:var(--saas-focus-ring);outline:none}@media (width<=599px){.saas-qr-camera__close{min-block-size:44px}}