/* Decorato — small physical objects made of CSS planes. All scenes are decorative. */
.d3-scene{position:relative;isolation:isolate;container-type:inline-size;width:100%;height:100%;aspect-ratio:1;min-height:160px;color:#a91f2e;font-size:10px;pointer-events:none}
.d3-space{position:absolute;inset:0;perspective:850px;perspective-origin:50% 35%}
.d3-world{position:absolute;inset:0;transform-style:preserve-3d;font-size:clamp(8px,4.167cqw,12px);transform:translateY(-3%) rotateX(-22deg) rotateY(-31deg);animation:d3-object-float 7s ease-in-out infinite;will-change:transform}
.d3-ground{position:absolute;left:18%;right:18%;bottom:12%;height:9%;background:radial-gradient(ellipse,#6e3c2e25 0,#6e3c2e0c 40%,transparent 72%);filter:blur(2px);transform:rotate(-4deg)}
.d3-solid{position:absolute;left:calc(50% - var(--w)/2);top:calc(50% - var(--h)/2);width:var(--w);height:var(--h);transform:translate3d(var(--x,0px),var(--y,0px),var(--z,0px)) rotateY(var(--turn,0deg)) rotateZ(var(--lean,0deg));transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.d3-face{position:absolute;backface-visibility:hidden;box-sizing:border-box;border:1px solid #cdbdaf80;background:linear-gradient(135deg,#fffaf2,#e9dfd2);transform-style:preserve-3d}
.d3-front,.d3-back{inset:0;width:var(--w);height:var(--h)}.d3-front{transform:translateZ(calc(var(--d)/2))}.d3-back{transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:#d6c4b3}
.d3-right,.d3-left{left:calc((var(--w) - var(--d))/2);top:0;width:var(--d);height:var(--h)}.d3-right{transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:linear-gradient(145deg,#ddc8b3,#c8ad93)}.d3-left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:#e7d5c1}
.d3-top,.d3-bottom{left:0;top:calc((var(--h) - var(--d))/2);width:var(--w);height:var(--d)}.d3-top{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:linear-gradient(135deg,#fffdf6,#e4d3c2)}.d3-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2));background:#b99b81}
.d3-scene-label{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);max-width:94%;white-space:nowrap;font:650 9px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9a6e68;padding:7px 11px;border:1px solid #d8beb64d;background:#fff8;border-radius:6px}
/* Open moving carton: separate faces, hinges, a paper insert and physical label. */
.d3-carton{--w:12.6em;--h:9.2em;--d:10.4em;--y:2.2em}.d3-carton>.d3-top{display:none}.d3-carton>.d3-front{background:linear-gradient(110deg,#ead6bc,#dcc2a2)}.d3-carton>.d3-back{backface-visibility:visible;background:linear-gradient(140deg,#cbb08e,#b79471)}
.d3-packing-band{position:absolute;left:1.6em;top:0;bottom:0;width:1.2em;background:linear-gradient(90deg,#bf2632,#df4450);box-shadow:inset 1px 0 #ff8a8b80,inset -1px 0 #8e152654}
.d3-shipping-label{position:absolute;right:1.3em;top:2.1em;width:5.5em;height:4.7em;background:#fffdf7;box-shadow:0 1px 3px #774c301c;padding:.6em .65em;transform:rotate(-2deg)}.d3-shipping-label b{font:700 .62em/1 Arial,sans-serif;letter-spacing:.04em;display:block;color:#4d3c33}.d3-shipping-label>i{display:block;height:.18em;margin-top:.43em;background:#ad9c8c;width:75%}.d3-shipping-label>i:nth-of-type(2){width:53%}.d3-barcode{display:block;margin-top:.55em;width:100%;height:1.1em;background:repeating-linear-gradient(90deg,#4b4035 0 .1em,transparent .1em .28em,#4b4035 .28em .52em,transparent .52em .66em,#4b4035 .66em .72em,transparent .72em .95em)}
.d3-handhold{position:absolute;left:31%;right:31%;top:2em;height:.9em;background:#9c7452;border-radius:.5em;box-shadow:0 1px 0 #f9e8d2,inset 0 1px 2px #5b3e2a33}
.d3-flap{position:absolute;left:calc(50% - 6.3em);top:calc(50% - 7.6em);width:12.6em;height:5.2em;border:1px solid #ba95717a;background:linear-gradient(#f0ddc3,#d8bb98);transform-origin:center bottom;transform-style:preserve-3d;backface-visibility:visible;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.d3-flap-front{transform:translateZ(5.2em) rotateX(-62deg)}.d3-flap-back{transform:translateZ(-5.2em) rotateX(58deg);background:linear-gradient(#d1b18d,#e6cfb1)}
.d3-flap-left,.d3-flap-right{left:calc(50% - 5.2em);top:calc(50% - 8.7em);width:10.4em;height:6.3em}.d3-flap-right{transform:rotateY(90deg) translateZ(6.3em) rotateX(-52deg)}.d3-flap-left{transform:rotateY(-90deg) translateZ(6.3em) rotateX(-52deg)}
.d3-packed-sheet{position:absolute;left:calc(50% - 3.1em);top:calc(50% - 6.3em);width:6.2em;height:7.5em;background:linear-gradient(110deg,#fffef9,#eee9df);box-shadow:0 0 1px #a58b7180;transform:translateZ(-.5em) rotateZ(-8deg) rotateX(8deg);padding:1em .8em;transition:transform .8s}.d3-packed-sheet span{display:block;height:.25em;background:#d2c7b9;margin-bottom:.7em}.d3-packed-sheet span:first-child{background:#c82c38;width:45%;height:.6em;margin-bottom:1.3em}
/* Furniture shown as carefully separated panels, with one door and a shelf. */
.d3-cabinet-back{--w:11.6em;--h:13em;--d:.6em;--z:-3.8em}.d3-cabinet-back>.d3-front{background:linear-gradient(120deg,#d8c8b1,#f2e9dc)}
.d3-cabinet-side-left,.d3-cabinet-side-right{--w:.8em;--h:13em;--d:7.8em;--x:-6.2em}.d3-cabinet-side-right{--x:6.2em}
.d3-cabinet-top,.d3-cabinet-bottom,.d3-cabinet-shelf{--w:13.2em;--h:.7em;--d:8.6em;--y:-6.9em}.d3-cabinet-bottom{--y:6.9em}.d3-cabinet-shelf{--w:11.6em;--h:.5em;--d:7.6em;--y:.7em}
.d3-cabinet-top>.d3-front,.d3-cabinet-shelf>.d3-front,.d3-cabinet-bottom>.d3-front{background:#b82031;border-color:#a51c2b}
.d3-cabinet-door{--w:6em;--h:12.7em;--d:.5em;--x:3.5em;--z:5.3em;--turn:-14deg}.d3-cabinet-door>.d3-front{background:linear-gradient(120deg,#fffdf8,#ece4d8)}.d3-door-inset{position:absolute;inset:1em .8em;border:1px solid #d8cabb;box-shadow:inset 0 0 0 1px #fff6}.d3-door-handle{position:absolute;left:.9em;top:5.5em;width:.3em;height:2.1em;border-radius:1em;background:linear-gradient(90deg,#bb2330,#e14d55);box-shadow:1px 2px 2px #a7644a33}
/* Stacked storage modules with ribbed metal doors and dimensional frames. */
.d3-storage-unit{--w:8.4em;--h:6.3em;--d:7.4em}.d3-storage-1{--x:-4.7em;--y:3.4em;--z:1.6em}.d3-storage-2{--x:4.7em;--y:3.4em;--z:1.6em}.d3-storage-3{--x:0em;--y:-3.5em;--z:0em}
.d3-storage-unit>.d3-front{background:linear-gradient(90deg,#f5eee3,#fffaf4 65%,#e2d6c7);border:solid #ca2e3c;border-width:.5em .45em .35em;box-shadow:inset 0 1px 4px #73523e1c}.d3-storage-unit>.d3-right{background:repeating-linear-gradient(90deg,#ddcbbb 0 .7em,#ccbaa8 .7em .8em);border-color:#baa997}.d3-storage-unit>.d3-top{background:linear-gradient(110deg,#e64c56,#b51a2c);border-color:#c6303c}
.d3-unit-ribs{position:absolute;inset:.35em;background:repeating-linear-gradient(0deg,transparent 0 .55em,#c8bcac .55em .62em,#fffdf4 .62em .72em)}.d3-unit-handle{position:absolute;left:48%;top:.6em;bottom:.6em;width:.22em;background:#bcaa97;box-shadow:.12em 0 #fffdf4}.d3-unit-number{position:absolute;right:.5em;top:.4em;background:#fffaf2;color:#a61d2a;font:700 .7em/1.4 Arial,sans-serif;padding:.08em .35em;border:1px solid #d5c3ae}
/* A route-planning board. The street layout is intentionally schematic. */
.d3-scene-route .d3-world{transform:translateY(-5%) rotateX(32deg) rotateY(-24deg);animation-name:d3-map-float}.d3-map-board{--w:17.2em;--h:11.8em;--d:.65em;--lean:-8deg}.d3-map-board>.d3-front{background:#f1e8da;box-shadow:inset 0 0 0 .55em #fff9;overflow:hidden}.d3-map-board>.d3-right,.d3-map-board>.d3-bottom{background:#ccaa8f}.d3-street-map{display:block;width:100%;height:100%}
.d3-map-pin{position:absolute;left:calc(50% - 6.45em);top:calc(50% + .4em);width:2.1em;height:2.6em;transform:translateZ(2.4em) rotateZ(-8deg);transform-style:preserve-3d;filter:drop-shadow(.3em .45em .2em #84203324);animation:d3-pin-lift 5s ease-in-out infinite}
.d3-map-pin:before{content:"";position:absolute;left:.25em;top:.15em;width:1.65em;height:1.65em;background:linear-gradient(135deg,#e3505a,#b0192d);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:inset 1px 1px #ff8d94}.d3-map-pin span{position:absolute;left:.77em;top:.67em;width:.6em;height:.6em;border-radius:50%;background:#fff8e8}
.d3-map-origin{position:absolute;left:calc(50% - 8em);top:calc(50% + 5em);background:#fff9ec;padding:.5em .7em;transform:translateZ(1.3em) rotateZ(-8deg);font:700 .8em/1 Arial,sans-serif;letter-spacing:.06em;color:#b52735;box-shadow:0 .15em .45em #8b513a1a}
/* Paperwork: three real shallow cuboids with a printed form on the top sheet. */
.d3-scene-documentstack .d3-world{transform:translateY(-3%) rotateX(20deg) rotateY(-26deg);animation-name:d3-paper-float}.d3-paper{--w:12.4em;--h:15.5em;--d:.22em}.d3-paper-1{--x:-.8em;--y:.55em;--z:-.8em;--lean:-7deg}.d3-paper-2{--x:.65em;--y:.1em;--z:-.3em;--lean:4deg}.d3-paper-3{--z:.3em;--lean:-2deg}
.d3-paper>.d3-front{background:linear-gradient(120deg,#fffefa,#f3eee4);border-color:#d4c7b888}.d3-paper>.d3-right,.d3-paper>.d3-bottom{background:#d0bfae;border-color:#c4b19b}
.d3-document-ink{position:absolute;inset:1.2em;line-height:1.1;color:#49413b}.d3-document-kicker{display:block;font:700 .55em/1 Arial,sans-serif;letter-spacing:.15em;color:#c12b37;margin-bottom:1.3em}.d3-document-ink strong{font:700 1.2em/1 Arial,sans-serif;letter-spacing:.06em;display:block;margin-bottom:1em}.d3-document-ink>i{display:block;height:.2em;width:92%;background:#c8c0b3;margin-bottom:.6em}.d3-document-ink>i:nth-of-type(2){width:74%}.d3-document-ink>i:nth-of-type(3){width:84%}.d3-document-box{height:3.1em;margin:1em 0;border:1px solid #dbd0c3;padding:.5em}.d3-document-box>span{display:block;background:#d9cfc0;height:.18em;margin-bottom:.65em;width:74%}.d3-document-seal{position:absolute;right:.3em;bottom:.2em;width:2.4em;height:2.4em;border:.2em double #d64951;border-radius:50%;opacity:.75;transform:rotate(-17deg)}.d3-document-seal:after{content:"";position:absolute;inset:.5em;border-top:.15em solid #d64951;border-bottom:.15em solid #d64951;transform:rotate(-15deg)}
/* Motion is contextual: opening, separating, stacking and lifting. */
@media(hover:hover){*:hover>.d3-scene-packing .d3-flap-front,.d3-scene-packing:hover .d3-flap-front{transform:translateZ(5.2em) rotateX(-77deg)}*:hover>.d3-scene-packing .d3-packed-sheet,.d3-scene-packing:hover .d3-packed-sheet{transform:translate3d(0,-1.2em,-.5em) rotateZ(-5deg) rotateX(4deg)}*:hover>.d3-scene-furniture .d3-cabinet-top,.d3-scene-furniture:hover .d3-cabinet-top{--y:-8em}*:hover>.d3-scene-furniture .d3-cabinet-side-left,.d3-scene-furniture:hover .d3-cabinet-side-left{--x:-7.3em}*:hover>.d3-scene-furniture .d3-cabinet-door,.d3-scene-furniture:hover .d3-cabinet-door{--z:7.1em;--turn:-23deg}*:hover>.d3-scene-storage .d3-storage-3,.d3-scene-storage:hover .d3-storage-3{--y:-4.3em;--z:.5em}*:hover>.d3-scene-documentstack .d3-paper-1,.d3-scene-documentstack:hover .d3-paper-1{--x:-1.7em;--z:-1.1em;--lean:-10deg}*:hover>.d3-scene-documentstack .d3-paper-3,.d3-scene-documentstack:hover .d3-paper-3{--z:1.2em;--lean:1deg}}
@keyframes d3-object-float{0%,100%{transform:translateY(-3%) rotateX(-22deg) rotateY(-31deg)}50%{transform:translateY(-5%) rotateX(-20deg) rotateY(-27deg)}}
@keyframes d3-map-float{0%,100%{transform:translateY(-5%) rotateX(32deg) rotateY(-24deg)}50%{transform:translateY(-7%) rotateX(29deg) rotateY(-20deg)}}
@keyframes d3-paper-float{0%,100%{transform:translateY(-3%) rotateX(20deg) rotateY(-26deg)}50%{transform:translateY(-5%) rotateX(17deg) rotateY(-23deg)}}
@keyframes d3-pin-lift{0%,100%{transform:translateZ(2.4em) rotateZ(-8deg)}50%{transform:translateZ(3.1em) rotateZ(-8deg)}}
.motion-off .d3-world,.motion-off .d3-map-pin{animation-play-state:paused}.motion-off .d3-solid,.motion-off .d3-flap,.motion-off .d3-packed-sheet{transition:none}
@media(max-width:700px){.d3-world{animation-duration:8s}.d3-scene-label{font-size:8px;padding:5px 8px}.d3-ground{bottom:10%}}
@media(prefers-reduced-motion:reduce){.d3-world,.d3-map-pin{animation:none}.d3-solid,.d3-flap,.d3-packed-sheet{transition:none}}