html,body{margin:0;padding:0;overflow:hidden}canvas{display:block}#viewer{position:relative;display:inline-block;line-height:0}#viewer canvas{display:block}.lock-btn{position:absolute;top:12px;left:12px;padding:10px 16px;font-size:14px;font-family:system-ui,sans-serif;font-weight:500;line-height:1.2;color:#fff;background:#00000073;border:1px solid rgba(255,255,255,.18);border-radius:8px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px #00000040;transition:background .2s ease,transform .1s ease,opacity .2s ease;z-index:20;max-width:50%}.lock-btn:hover:not(:disabled){background:#0009}.lock-btn:active:not(:disabled){transform:translateY(1px)}.lock-btn:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}.lock-btn:disabled{opacity:.4;cursor:not-allowed}.hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 22px;background:#00000073;color:#fff;font-size:14px;font-family:system-ui,sans-serif;line-height:1.2;border-radius:8px;pointer-events:none;transition:opacity .4s ease;z-index:10}.hint.is-hidden{opacity:0}