/* v6 box: kraft cuboid, drag to rotate */
.bx-scene{--w:27rem;--h:19rem;--d:17rem;position:relative;width:calc(var(--w)*1.55);height:calc(var(--h)*1.75);margin:0 auto;perspective:2600px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bx-scene.drag{cursor:grabbing}
.bx-float{position:absolute;left:50%;top:50%;width:0;height:0;animation:bxf 6s ease-in-out infinite}
@keyframes bxf{0%,100%{transform:translateY(-4px)}50%{transform:translateY(8px)}}
.bx{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.bx-s{position:absolute;left:50%;bottom:6%;width:calc(var(--w)*1.15);height:calc(var(--w)*.2);margin-left:calc(var(--w)*-.575);background:radial-gradient(ellipse,rgba(70,48,14,.3),transparent 68%);pointer-events:none}
.bf{position:absolute;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(90,62,24,.35);background:linear-gradient(135deg,#dbbe94,#d0b087)}
.bf::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(80,52,16,.05) 0 1px,transparent 1px 4px);pointer-events:none}
.bf.f,.bf.k{width:var(--w);height:var(--h);left:calc(var(--w)/-2);top:calc(var(--h)/-2)}
.bf.f{transform:translateZ(calc(var(--d)/2))}
.bf.k{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.bf.r,.bf.l{width:var(--d);height:var(--h);left:calc(var(--d)/-2);top:calc(var(--h)/-2);background:linear-gradient(180deg,#c9a977,#bf9f6e)}
.bf.r{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.bf.l{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.bf.t,.bf.b{width:var(--w);height:var(--d);left:calc(var(--w)/-2);top:calc(var(--d)/-2)}
.bf.t{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:linear-gradient(160deg,#e8d0ae,#dcc29b)}
.bf.b{transform:rotateX(-90deg) translateZ(calc(var(--h)/2));background:#a8895c}
.bx-tape{position:absolute;left:0;right:0;top:calc(50% - var(--d)*.09);height:calc(var(--d)*.18);background:rgba(255,248,232,.38);border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(120,90,40,.12)}
.bx-tape.v{left:calc(50% - var(--w)*.045);right:auto;width:calc(var(--w)*.09);top:0;height:calc(var(--h)*.2);border:0;border-bottom:1px solid rgba(120,90,40,.12)}
.bx-tape.vd{left:calc(50% - var(--d)*.045);width:calc(var(--d)*.09);right:auto;top:0;height:calc(var(--h)*.2);border:0}
.bx-lab{position:absolute;left:5%;top:14%;width:50%;background:#f4f1e6;border:3px solid #111;padding:calc(var(--w)*.02) calc(var(--w)*.03);display:flex;align-items:center;gap:.5rem;transform:rotate(-3deg);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.bx-lab img{height:calc(var(--w)*.075);width:auto;flex:none}
.bx-lab b{font-family:"EB Garamond",Georgia,serif;font-style:normal;font-weight:500;font-size:calc(var(--w)*.063);line-height:.98;color:#111;letter-spacing:-.005em}
.bx-st{position:absolute;left:61%;top:27%;border:3px solid #a3201d;color:#a3201d;font-family:"Courier New",monospace;font-weight:700;font-size:calc(var(--w)*.058);padding:.05rem .45rem;transform:rotate(14deg);letter-spacing:.14em;opacity:.88;line-height:1.15;border-radius:2px}
.bx-ct{position:absolute;left:7%;bottom:12%;font-family:"Courier New",monospace;font-size:calc(var(--w)*.045);line-height:1.4;letter-spacing:.09em;color:#3a2a12;text-transform:uppercase}
.bx-sh{position:absolute;right:6%;bottom:7%;width:42%;background:#fff;padding:calc(var(--w)*.014) calc(var(--w)*.018);transform:rotate(4deg);box-shadow:0 2px 0 rgba(0,0,0,.14);font-family:"Courier New",monospace;font-size:calc(var(--w)*.027);letter-spacing:.04em;white-space:nowrap;color:#111;text-transform:uppercase}
.bx-bar{height:calc(var(--w)*.075);margin:.2rem 0;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px,#111 8px 11px,#fff 11px 12px)}
.bx-ln{height:4px;background:#c4c4c4;margin:.2rem 0;width:92%}
.bx-sd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Courier New",monospace;font-size:calc(var(--w)*.037);line-height:1.5;letter-spacing:.12em;color:#3a2a12;text-transform:uppercase;padding:0 12%}
.bx-sd.rot{transform:rotate(-8deg)}
@media(max-width:600px){.bx-scene{--w:16.5rem;--h:11.6rem;--d:10.4rem}}
@media(min-width:1900px){.bx-scene{--w:34rem;--h:24rem;--d:21rem}}
@media(prefers-reduced-motion:reduce){.bx-float{animation:none}}
.panel .bx-scene{--w:19rem;--h:13.4rem;--d:12rem;margin:.2rem auto}
@media(max-width:600px){.panel .bx-scene{--w:14rem;--h:9.9rem;--d:8.8rem}}
