html, body { margin:0; height:100%; overflow:hidden; background:#000; }
    canvas { display:block; }
    video { display:none; }
    #ui{ position:fixed; left:24px; top:24px; z-index:20; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#fff; user-select:none; pointer-events:none; }
    #panel{ pointer-events:auto; display:inline-block; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.28); backdrop-filter:blur(14px); padding:18px 20px 16px; border-radius:18px; max-width:780px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
    #title{ font-size:22px; font-weight:600; letter-spacing:1px; margin-bottom:12px; opacity:0.95; }
    #topRow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    #btn, #resetBtn, #guideBtn{ appearance:none; border:1px solid rgba(255,255,255,0.25); background:rgba(0,0,0,0.3); color:#fff; padding:13px 20px; border-radius:14px; cursor:pointer; font-size:16px; letter-spacing:0.4px; transition:all 0.2s; }
    #btn:hover, #resetBtn:hover, #guideBtn:hover{ background:rgba(255,255,255,0.1); }
    #resetBtn{ padding:10px 16px; font-size:14px; }
    #guideBtn.active{ background:rgba(255,255,255,0.12); }
    #hint{ margin-top:14px; line-height:1.35; opacity:0.9; font-size:14.5px; }
    #status{ margin-top:12px; font-size:14.5px; opacity:0.96; }
    .pill{ display:inline-block; padding:4px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.3); margin-right:8px; font-size:12.5px; font-weight:500; }
    #panel.dim{ opacity:0.3; transition:opacity 1.4s ease; }
    #panel.dim:hover{ opacity:1; }
    #captureWrap{ margin-top:14px; display:none; }
    #captureWrap.show{ display:block; }
    #captureMeta{ font-size:12px; line-height:1.35; opacity:0.88; margin-bottom:10px; }
    #qrBox{ width:152px; min-height:152px; background:rgba(255,255,255,0.96); padding:8px; border-radius:12px; }
    #qrNote{ margin-top:8px; font-size:11.5px; line-height:1.3; opacity:0.82; max-width:320px; }
    #guide916{ position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:12; pointer-events:none; border:1.5px solid rgba(255,255,255,0.88); border-radius:28px; box-shadow:0 0 0 9999px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.22); opacity:0; transition:opacity .25s ease; overflow:hidden; }
    #guide916.show{ opacity:1; }
    #safeArea{ position:absolute; inset:6.5% 9%; border:1px dashed rgba(255,255,255,0.55); border-radius:22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
    .guideLabel{ position:absolute; left:14px; padding:5px 10px; border-radius:999px; font-size:11px; letter-spacing:.4px; background:rgba(0,0,0,0.36); border:1px solid rgba(255,255,255,0.18); color:#fff; backdrop-filter:blur(8px); white-space:nowrap; }
    #guideOutLabel{ top:12px; }
    #guideSafeLabel{ bottom:12px; }
    @media (max-width: 820px){
      #ui{ left:12px; top:12px; right:12px; }
      #panel{ max-width:min(100vw - 24px, 520px); padding:14px 14px 12px; }
      #title{ font-size:18px; margin-bottom:10px; }
      #btn, #resetBtn, #guideBtn{ padding:11px 14px; font-size:14px; }
      #guide916{ border-radius:22px; }
      #safeArea{ border-radius:16px; }
    }