@property --card-angle{syntax:"<number>";inherits:false;initial-value:0}@property --card-y{syntax:"<number>";inherits:false;initial-value:0}@property --card-depth{syntax:"<number>";inherits:false;initial-value:1}@property --focus-angle{syntax:"<number>";inherits:false;initial-value:0}@property --focus-scale{syntax:"<number>";inherits:false;initial-value:1}@property --focus-x{syntax:"<number>";inherits:false;initial-value:0}@property --focus-y{syntax:"<number>";inherits:false;initial-value:0}@property --focus-perspective{syntax:"<number>";inherits:false;initial-value:1000}@property --focus-tx{syntax:"<length-percentage>";inherits:false;initial-value:0%}*{box-sizing:border-box;margin:0;padding:0}html,body{background:#0d0d0c;height:100%;overflow:hidden}.scene{height:100vh;perspective:var(--perspective,1200px);perspective-origin:50%;touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.scene:hover{cursor:grab}.scene:active{cursor:grabbing}#world{transform-style:preserve-3d;position:absolute;inset:0}.card{--card-angle:attr(data-angle type(<number>), 0);--card-y:attr(data-y type(<number>), 0);--card-depth:attr(data-depth type(<number>), 1);width:var(--card-width,225px);height:var(--card-height,155px);will-change:transform, filter;transform:translate(-50%, -50%) rotateY(calc(var(--card-angle) * 57.2958deg)) translateZ(var(--radius,420px)) translateY(calc(var(--card-y) * 1px));filter:brightness(calc(var(--brightness-floor,.12) + (1 - var(--brightness-floor,.12)) * var(--card-depth) * var(--card-depth))) blur(calc((1 - var(--card-depth)) * (1 - var(--card-depth)) * var(--max-blur,5px)));z-index:max(round(calc(var(--card-depth) * 1000)), 1);background-position:50%;background-size:cover;border-radius:10px;transition:opacity .4s ease-out;position:absolute;top:50%;left:50%}.card:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease-out;position:absolute;inset:0;box-shadow:0 0 60px 10px #ffffff4d}.card.glow:after{opacity:1;animation:9s ease-in-out infinite glow-drift}.card.focused{--focus-angle:attr(data-focus-angle type(<number>), 0);--focus-scale:attr(data-focus-scale type(<number>), 1);--focus-x:attr(data-focus-x type(<number>), 0);--focus-y:attr(data-focus-y type(<number>), 0);--focus-perspective:attr(data-focus-perspective type(<number>), 1000);--focus-tx:0%;z-index:2501;transform-origin:0 0;transform:translate(50vw, 50vh) perspective(calc(var(--focus-perspective) * 1px)) translate(-50vw, -50vh) translate(calc(var(--focus-x) * 1px), calc(var(--focus-y) * 1px)) rotateY(calc(var(--focus-angle) * 57.2958deg)) scale(var(--focus-scale)) translate(var(--focus-tx), -50%);border-radius:8px;margin:0;position:fixed;top:0;left:0}.card.focused.doorL{--focus-tx:0%}.card.focused.doorR{--focus-tx:-100%}.card.focused.center{--focus-tx:-50%}.card.focused:after{opacity:0;animation:none}.card.dimmed{opacity:.12}#lightbox{z-index:2500;opacity:0;pointer-events:none;background:#08080cf7;transition:opacity .3s ease-out;position:fixed;inset:0}#lightbox.open{opacity:1;pointer-events:auto}.vignette{pointer-events:none;background:linear-gradient(#0d0d0c 0%,#0000 18% 82%,#0d0d0c 100%),radial-gradient(90% 80%,#0000 55%,#0d0d0ce6 100%);position:absolute;inset:0}.toggle-anim{z-index:3000;color:#e7e7e3;font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0d0d0c99;border:1px solid #ffffff26;border-radius:8px;padding:8px 14px;font-size:.875rem;position:absolute;top:16px;left:16px}.toggle-anim:hover{background:#ffffff1a}.toggle-anim:active{background:#ffffff26}@media (prefers-reduced-motion:reduce){.scene{cursor:default}.scene:active{cursor:default}.card,.card:after,#lightbox{transition:none}.card.glow:after{animation:none;box-shadow:0 0 60px 12px #ffffff59}}@keyframes glow-drift{0%{box-shadow:0 0 60px 10px #ffffff4d}25%{box-shadow:22px 8px 70px 12px #ffffff6b}50%{box-shadow:0 0 80px 14px #ffffff57}75%{box-shadow:-22px -8px 70px 12px #ffffff6b}to{box-shadow:0 0 60px 10px #ffffff4d}}