model-viewer{--poster-color:transparent;background:radial-gradient(120% 90% at 50% 30%,#232326 0%,#121215 55%,#0b0b0c 100%);width:100%;height:100%;position:fixed;inset:0}.hotspot{background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid;position:relative}.hotspot:before{content:"";border:3px solid var(--canvas);background:#f5f1e8eb;border-radius:50%;width:22px;height:22px;transition:transform .15s,background .15s;box-shadow:0 0 0 2px #f5f1e88c,0 3px 10px #00000080}.hotspot:hover:before{background:#fff;transform:scale(1.15)}.hotspot[data-visible=false],.hotspot:not([data-visible]){opacity:.35}.hotspot.solved:before{background:var(--ok)}.hotspot.good:after,.hotspot.bad:after{content:"";border:3px solid var(--ok);pointer-events:none;border-radius:50%;animation:.7s ease-out forwards ring;position:absolute;inset:0}.hotspot.bad:after{border-color:var(--bad)}.hotspot.bad:before{animation:.35s nope}@keyframes ring{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}@keyframes nope{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.hs-label{white-space:nowrap;font:700 12px/1 var(--text);background:var(--canvas);border:1px solid var(--ok);pointer-events:none;padding:6px 8px;display:none;position:absolute;top:50%;left:40px;transform:translateY(-50%)}.hotspot.solved .hs-label{display:block}.ar-btn{z-index:21;border:1px solid var(--signal);min-height:44px;color:var(--ink);background:#0b0b0cd9;padding:0 16px;font-weight:700;position:absolute;top:56px;left:50%;transform:translate(-50%)}.ar-btn:before{content:"◱ ";color:var(--signal)}.qr{z-index:20;border:1px solid var(--line);background:#121215f0;width:200px;padding:12px;position:absolute;top:64px;right:16px;box-shadow:6px 6px #0006}.qr canvas{margin-bottom:8px;display:block;width:132px!important;height:132px!important}.qr p{color:var(--ink-dim);margin:6px 0;font-size:12px}.qr code{font:11px var(--mono);color:var(--ink-dim);word-break:break-all}@media (min-width:1000px){.card{width:440px;bottom:24px;left:24px;transform:none}.card.shake{animation-name:shake-left}}@keyframes shake-left{20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}@media (max-width:760px){.qr{display:none}}