.vault-fragment { min-height: 420px; display: grid; place-items: center; border-bottom: 1px solid var(--playrs-border); position: relative; }
.vault-stage { position: relative; width: min(100%, 480px); height: 420px; display: grid; place-items: center; perspective: 1000px; }
.vault-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vault-projection { width: 144px; height: 144px; transform: scale(.42); transform-style: preserve-3d; transition: transform .38s cubic-bezier(.22,.75,.22,1); pointer-events: none; }
.vault-solid { position: relative; width: 144px; height: 144px; transform-style: preserve-3d; transform: rotateX(-7.45deg) rotateY(12.61deg); transition: transform .18s ease-out; }
.vault-face { position: absolute; width: 144px; height: 144px; box-sizing: border-box; background: #111; border: 1px solid #777770; backface-visibility: hidden; }
.vault-face.front { transform: translateZ(72px); }
.vault-face.right { transform: rotateY(90deg) translateZ(72px); background: #171717; }
.vault-face.back { transform: rotateY(180deg) translateZ(72px); }
.vault-face.left { transform: rotateY(270deg) translateZ(72px); background: #222; }
.vault-face.top { transform: rotateX(90deg) translateZ(72px); background: #292929; }
.vault-face.bottom { transform: rotateX(-90deg) translateZ(72px); background: #0e0e0e; }
html:not([data-playrs-theme="light"]) .vault-face { background: #d2d0ca; border-color: #888880; }
html:not([data-playrs-theme="light"]) .vault-face.top { background: #e6e4de; }
html:not([data-playrs-theme="light"]) .vault-face.right { background: #aaa8a1; }
.vault-fragment[data-renderer="webgl"] .vault-projection { visibility: hidden; }
.vault-manipulator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 104px; height: 104px; border: 0; padding: 0; background: transparent; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; user-select: none; }
.vault-manipulator:active { cursor: grabbing; }
.vault-manipulator:focus { outline: none; }
.vault-stage:has(.vault-manipulator:focus-visible) { filter: brightness(1.12); }
.vault-fragment[data-active="true"] .vault-manipulator { width: min(100%, 420px); height: 390px; }
.vault-status { position: absolute; bottom: 12px; left: 16px; right: 16px; text-align: center; margin: 0; font-size: 11px; color: var(--playrs-text-muted); }
.vault-fragment.opening .vault-stage { opacity: .25; transition: opacity .5s; }
@media (max-width: 600px) { .vault-fragment { min-height: 350px; } .vault-stage { height: 350px; } .vault-fragment[data-active="true"] .vault-manipulator { width: 84%; height: 300px; } }
@media (prefers-reduced-motion: reduce) { .vault-projection, .vault-solid, .vault-fragment.opening .vault-stage { transition: none; } }