html,body{height:100dvh;padding:0;margin:0}body{display:flex;justify-content:center;align-items:center;position:relative;background-color:#000}[data-top-menu]{position:absolute;top:0;left:0;width:100%;z-index:100;padding:var(--size-020)}[data-top-menu] h2{color:#fff}[data-scan-qr-code-panel]{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}[data-scan-qr-code-panel] video{width:100%;height:100%}[data-scan-qr-code-panel] canvas{position:absolute;top:0;left:0;opacity:0;pointer-events:none}[data-scan-qr-code-panel] [data-qr-code-viewfinder]{display:block;position:absolute;z-index:50;height:50%;aspect-ratio:1/1;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);box-shadow:0 0 0 100vmax rgba(0,0,0,0.7);border:1px solid hsl(0,0%,100%);border-radius:22px}[data-scan-qr-code-panel] [data-qr-code-messages]{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);background-color:#fff;padding:var(--size-040);color:hsl(var(--color-950));border-radius:4px}[data-scan-qr-code-panel]:not([data-state="error"]) [data-qr-code-messages]{display:none}