/* Light CSS 3D for the sector demos: boxes with animated position and size, drag or buttons to rotate. */
@property --x{syntax:'<length>';inherits:true;initial-value:0px}@property --y{syntax:'<length>';inherits:true;initial-value:0px}@property --z{syntax:'<length>';inherits:true;initial-value:0px}
@property --w{syntax:'<length>';inherits:true;initial-value:10px}@property --d{syntax:'<length>';inherits:true;initial-value:10px}@property --h{syntax:'<length>';inherits:true;initial-value:10px}
.s3d{position:relative;height:300px;overflow:hidden;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#f8fafc,#e2e8f0);perspective:1100px;cursor:grab;touch-action:pan-y;user-select:none}
.s3d:active{cursor:grabbing}
.s3d-w{position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--rx,58deg)) rotateZ(var(--rz,-38deg)) scale(var(--sc,1));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.s3d.drag .s3d-w{transition:none}
.b3{position:absolute;left:0;top:0;width:var(--w);height:var(--d);transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z));transition:--x .9s cubic-bezier(.2,.8,.2,1),--y .9s cubic-bezier(.2,.8,.2,1),--z .9s cubic-bezier(.2,.8,.2,1),--w .7s,--d .7s,--h .9s cubic-bezier(.2,.8,.2,1),opacity .5s}
.b3>i{position:absolute;display:block;box-sizing:border-box;background:var(--c,#3b82f6);border:1px solid rgba(15,23,42,.12);transition:background .4s}
.b3>.tp{left:0;top:0;width:100%;height:100%;transform:translateZ(var(--h));background:color-mix(in srgb,var(--c,#3b82f6) 82%,white);display:flex;align-items:center;justify-content:center;font:700 10px/1.1 "Segoe UI",system-ui,sans-serif;color:#0f172a;text-align:center;overflow:hidden;padding:1px}
.b3>.fr{left:0;top:100%;width:100%;height:var(--h);transform-origin:top;transform:rotateX(90deg);background:color-mix(in srgb,var(--c,#3b82f6) 92%,black)}
.b3>.bk{left:0;top:0;width:100%;height:var(--h);transform-origin:top;transform:rotateX(90deg);background:color-mix(in srgb,var(--c,#3b82f6) 70%,black)}
.b3>.lf{left:0;top:0;width:var(--h);height:100%;transform-origin:left;transform:rotateY(-90deg);background:color-mix(in srgb,var(--c,#3b82f6) 76%,black)}
.b3>.rt{left:100%;top:0;width:var(--h);height:100%;transform-origin:left;transform:rotateY(-90deg);background:color-mix(in srgb,var(--c,#3b82f6) 84%,black)}
.b3.flat>.fr,.b3.flat>.bk,.b3.flat>.lf,.b3.flat>.rt{display:none}
.b3.glow>i{border:2px solid #b91c1c}.b3.glow>.tp{animation:k3blink 1s ease-in-out infinite alternate}@keyframes k3blink{from{background:#fca5a5}to{background:#ef4444}}
.b3.sel>.tp{outline:3px solid #0f172a;outline-offset:-3px}
.b3.hide{opacity:0}
.b3.btn{cursor:pointer}
.s3c{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;z-index:2}.s3c button{font:inherit;font-size:.9rem;width:32px;height:32px;border-radius:8px;border:1px solid #cbd5e1;background:rgba(255,255,255,.9);cursor:pointer}
.s3c button:focus-visible{outline:3px solid #f59e0b}
.s3t{position:absolute;left:10px;top:8px;z-index:2;font-size:.74rem;color:#475569;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:8px}
@media(max-width:560px){.s3d{height:250px}}
@media (prefers-reduced-motion:reduce){.b3,.s3d-w{transition:none}}
.s3l{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:10px;flex-wrap:wrap;font-size:.72rem;color:#334155;background:rgba(255,255,255,.88);padding:3px 8px;border-radius:8px}.s3l i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.s3k{margin:6px 0 10px}
@property --spw{syntax:'<length>';inherits:true;initial-value:0px}@property --sph{syntax:'<length>';inherits:true;initial-value:0px}
/* sprites: an image standing on top of a box and always facing the camera (counter-rotates the scene) */
.b3{transition:--x .9s cubic-bezier(.2,.8,.2,1),--y .9s cubic-bezier(.2,.8,.2,1),--z .9s cubic-bezier(.2,.8,.2,1),--w .7s,--d .7s,--h .9s cubic-bezier(.2,.8,.2,1),--spw .6s cubic-bezier(.2,.8,.2,1),--sph .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.b3>.sp{position:absolute;left:50%;top:50%;width:var(--spw);height:var(--sph);margin-left:calc(var(--spw)/-2);margin-top:calc(var(--sph)*-1);transform-origin:50% 100%;transform:translateZ(calc(var(--h) + 1px)) rotateZ(calc(var(--rz,-38deg)*-1)) rotateX(calc(var(--rx,58deg)*-1));display:block;pointer-events:auto}
.b3>.sp svg{width:100%;height:100%;display:block;overflow:visible}
.b3>.sp .em{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;font-size:calc(var(--sph)*.82);line-height:1}