.branni-3d{position:relative;width:clamp(280px,72vw,480px);aspect-ratio:2822/480;flex-shrink:0}.branni-3d-canvas,.branni-3d-poster{display:block;position:absolute;inset:0;width:100%;height:100%}.branni-3d-canvas{opacity:0;touch-action:pinch-zoom;cursor:grab;transition:opacity .35s ease-out .15s}.branni-3d-poster{object-fit:contain;padding:10px 13.5%;pointer-events:none;transition:opacity .15s ease-out}.branni-3d[data-state=ready] .branni-3d-canvas{opacity:1}.branni-3d[data-state=ready] .branni-3d-poster{opacity:0}.branni-3d[data-dragging=true] .branni-3d-canvas{cursor:grabbing}.branni-3d-hint{position:absolute;top:calc(100% + 10px);left:40px;right:40px;color:#777;font-size:9px;line-height:14px;letter-spacing:.1em;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease-out}.branni-3d:focus-within .branni-3d-hint{opacity:1}.branni-3d[data-state=error] .branni-3d-hint{opacity:0}.branni-3d-retry{position:absolute;top:100%;left:50%;transform:translate(-50%);white-space:nowrap;padding:10px;background:transparent;color:#888;border:0;font:inherit;font-size:9px;cursor:pointer}.branni-3d-qa{position:fixed;z-index:9999;left:8px;top:8px;background:#111;color:#ddd;padding:12px;max-width:320px;font:11px/1.4 monospace}.branni-3d-qa label{display:block;margin-top:8px}@media(hover:hover)and (pointer:fine){.branni-3d:hover .branni-3d-hint{opacity:1}}@media(hover:none){.branni-3d-hint{opacity:.65}}@media(prefers-reduced-motion:reduce){.branni-3d-canvas,.branni-3d-poster,.branni-3d-hint{transition:none}}.branni-3d-toggle{display:none}.branni-3d-canvas:focus{outline:none}.branni-3d[data-input=keyboard] .branni-3d-canvas:focus-visible,.branni-3d-retry:focus-visible{outline:1px solid #aaa;outline-offset:4px}