*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      width: 100%;
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      background-color: #0b0c10;
      color: #e6edf3;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }

    .viewport {
      width: 100%;
      height: 100%;
      height: 100dvh;
      perspective: 1600px;
      -webkit-perspective: 1600px;
      overflow: hidden;
      position: relative;
    }

    .surface {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      will-change: transform;
      cursor: grab;
    }

    .surface:active {
      cursor: grabbing;
    }

    .face {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 100dvh;
      box-sizing: border-box;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      background-color: #0b0c10;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .front-face {
      transform: rotateY(0deg) translateZ(1px);
    }

    .back-face {
      transform: rotateY(180deg) translateZ(1px);
      gap: 0;
    }

    .qr-frame {
      width: min(80vw, 340px);
      height: min(80vw, 340px);
      max-height: 52vh;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      border-radius: 14px;
      padding: 12px;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .qr-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
      -webkit-user-drag: none;
      image-rendering: -webkit-optimize-contrast;
    }

    .message-group {
      max-width: min(88vw, 420px);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0;
    }

    .msg-primary {
      margin: 0;
      font-size: clamp(1.05rem, 4.2vw, 1.25rem);
      font-weight: 600;
      line-height: 1.45;
      color: #f0f6fc;
    }

    .msg-secondary {
      margin: 0;
      font-size: clamp(0.9rem, 3.6vw, 1.05rem);
      font-weight: 400;
      line-height: 1.45;
      color: #8b949e;
    }