.ql3d-host{position:relative}.ql3d-open{display:flex;align-items:center;gap:11px;width:100%;padding:10px 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ql-rarity,#d4af37) 42%,transparent);background:color-mix(in srgb,var(--ql-rarity,#d4af37) 13%,transparent);color:var(--ql-ink);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}@supports not (color:color-mix(in srgb,#fff 10%,transparent)){.ql3d-open{border-color:var(--ql-edge);background:rgba(255,255,255,.06)}}.ql3d-open:hover{background:color-mix(in srgb,var(--ql-rarity,#d4af37) 22%,transparent);border-color:color-mix(in srgb,var(--ql-rarity,#d4af37) 68%,transparent)}.ql3d-open:active{transform:translateY(1px)}.ql3d-open-i{font-size:15px;color:var(--ql-rarity,#d4af37)}.ql3d-open-t{display:flex;flex-direction:column;gap:2px;min-width:0}.ql3d-open-t b{font-size:13px;font-weight:800;letter-spacing:.01em}.ql3d-open-t em{font-style:normal;font-size:10.5px;color:var(--ql-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ql3d-open-go{margin-left:auto;font-size:11px;color:var(--ql-ink-soft)}.ql3d-open:hover .ql3d-open-go{color:var(--ql-ink)}@media (prefers-reduced-motion:reduce){.ql3d-open{transition:none}.ql3d-open:active{transform:none}}.ql3d-box{position:absolute;inset:0;display:grid;place-items:center}.ql3d-frame{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px;color-scheme:light;opacity:0;transition:opacity .25s ease}.ql3d-box[data-state=ready] .ql3d-frame{opacity:1}.ql3d-box[data-state=ready]>:not(.ql3d-frame):not(.ql3d-note),.ql3d-host:has(.ql3d-box[data-state=ready])>:not(.ql3d-box){
  /* !important, and it is the right tool rather than a shortcut.

     /browse's still is a two-layer crossfade whose opacity is an INLINE style
     — `style={{ opacity: layer.opacity }}` in BrowseQuickLookPanel, driven by
     the dwell timer as it fades between wears. An inline style beats any
     stylesheet selector regardless of specificity, so the first version of
     this rule compiled, shipped, and did nothing on the one surface that
     needed it. The weapon and the photograph stayed on top of each other.

     There is no specificity that wins here, only !important or lifting the
     embed's ready state up into both host panels to zero the inline value at
     source. The second is cleaner and is a bigger change across two
     components; this is the one line that stops the double image today. If
     that refactor happens, this !important comes out with it. */opacity:0!important;transition:opacity .25s ease}@media (prefers-reduced-motion:reduce){.ql3d-box[data-state=ready]>:not(.ql3d-frame):not(.ql3d-note),.ql3d-host:has(.ql3d-box[data-state=ready])>:not(.ql3d-box){transition:none}}@media (prefers-reduced-motion:reduce){.ql3d-frame{transition:none}}.ql3d-note{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:rgba(18,17,15,.78);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--ql-ink-soft);font-size:11px;font-weight:700;white-space:nowrap}.ql3d-note--bad{color:#e0604f}.ql3d-bar{position:absolute;top:6px;right:6px;z-index:3;display:flex;gap:5px}.ql3d-ctl{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;border:1px solid var(--ql-edge-sub);background:rgba(18,17,15,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:rgba(255,255,255,.75);font-size:10.5px;font-weight:700;line-height:1;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.ql3d-ctl:hover{color:#fff;background:rgba(18,17,15,.9);border-color:var(--ql-edge)}@media (max-width:767.98px){.ql3d-open{padding:9px 11px;gap:9px}.ql3d-open--pointer,.ql3d-open-t em{display:none}}