/* Same six-plane CSS renderer as the Fontes e Drivers task. Its printed faces
   are supplied by the existing generators, not screenshots or invented artwork. */
.packaging-3d-stage,#driverSection #preview-stage.has-box3d{height:clamp(420px,48vw,680px);padding:44px 18px 45px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0}
.box3d-viewport{position:relative;width:100%;height:100%;perspective:1200px;perspective-origin:50% 50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.box3d-viewport.is-dragging{cursor:grabbing}
.box3d-fit,.box3d-model{position:absolute;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0}
.box3d-fit{left:50%;top:50%}
.box3d-model{left:0;top:0}
.box3d-face{position:absolute;transform-origin:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;background:#fff}
.box3d-face--top,.box3d-face--bottom{background:var(--green)}
.box3d-face--left,.box3d-face--right{background:#000}
.box3d-face>svg{display:block;width:100%;height:100%;overflow:hidden}
.box3d-face::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgb(0 0 0 / var(--face-shade,0));box-shadow:inset 0 0 0 .22px #00000018}
.box3d-shadow{position:absolute;left:18%;right:18%;top:75%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#0000001a,transparent 70%);filter:blur(9px);pointer-events:none}
.viewer-3d-controls{padding:15px 0 3px}
.viewer-3d-controls>p{font-size:11px;line-height:1.5;color:var(--slate)}
.viewer-3d-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:10px}
.viewer-3d-faces{display:flex;gap:5px;flex-wrap:wrap}
.viewer-3d-controls button{min-height:36px;border:1px solid #D7DACF;border-radius:6px;background:#fff;padding:7px 11px;font-size:11px}
.viewer-3d-controls button:hover{background:var(--green);border-color:var(--green)}
.viewer-3d-controls button[aria-pressed="true"]{background:var(--paper);border-color:#000}
.viewer-3d-zoom{display:flex;align-items:center;gap:9px}
.viewer-3d-zoom button{width:36px;padding:0;font-size:19px}
.viewer-3d-zoom output{min-width:35px;text-align:center;font-size:10px;color:var(--slate);font-variant-numeric:tabular-nums}
@media(max-width:500px){.packaging-3d-stage,#driverSection #preview-stage.has-box3d{height:400px;padding:44px 10px}.viewer-3d-controls>p{font-size:10px}.viewer-3d-controls button{min-height:40px;padding-inline:10px}.viewer-3d-actions{gap:12px}.viewer-3d-faces{gap:6px}.viewer-3d-zoom{margin-left:auto}}
@media print{.packaging-3d-stage,.viewer-3d-controls{display:none!important}#viewArea[hidden]{display:block!important}}