.box-viewer{width:100%;max-width:22rem;margin:0 auto;--box-color:#0867d1}.box-viewer--harmony{--box-color:#ffdc38}.box-viewer__scene{container-type:inline-size;position:relative;width:100%;aspect-ratio:1.12;perspective:900px;perspective-origin:50% 42%;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}.box-viewer__scene.is-dragging{cursor:grabbing}.box-viewer__box{--box-edge:74cqw;--box-depth:calc(var(--box-edge) * .22);position:absolute;top:47%;left:50%;width:var(--box-edge);height:var(--box-edge);transform:translate(-50%,-50%) rotateX(-8deg) rotateY(var(--box-rotation));transform-style:preserve-3d;transition:transform .18s ease-out}.is-dragging .box-viewer__box{transition:none}.box-viewer__face{position:absolute;backface-visibility:hidden;background-color:var(--box-color);background-repeat:no-repeat;outline:1px solid #20202b3b}.box-viewer__back,.box-viewer__front{inset:0}.box-viewer__front{transform:translateZ(calc(var(--box-depth) / 2))}.box-viewer__back{transform:rotateY(180deg) translateZ(calc(var(--box-depth) / 2))}.box-viewer__left,.box-viewer__right{top:0;left:calc(50% - var(--box-depth) / 2);width:var(--box-depth);height:var(--box-edge)}.box-viewer__left{transform:rotateY(-90deg) translateZ(calc(var(--box-edge) / 2))}.box-viewer__right{transform:rotateY(90deg) translateZ(calc(var(--box-edge) / 2))}.box-viewer__bottom,.box-viewer__top{top:calc(50% - var(--box-depth) / 2);left:0;display:flex;align-items:center;justify-content:center;width:var(--box-edge);height:var(--box-depth);color:var(--ink);font-family:var(--font-display);font-size:clamp(.6rem,4cqw,1rem);font-weight:700}.box-viewer__top{transform:rotateX(90deg) translateZ(calc(var(--box-edge) / 2))}.box-viewer__bottom{transform:rotateX(-90deg) translateZ(calc(var(--box-edge) / 2))}.box-viewer__shadow{position:absolute;bottom:5%;left:17%;width:66%;height:9%;background:#2a23402b;border-radius:50%;filter:blur(8px)}.box-viewer__controls{display:grid;gap:.5rem;text-align:center}.box-viewer__views{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.box-viewer__views button{min-height:2.75rem;padding:.35rem 1rem;border:2px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink);font-family:var(--font-display);font-weight:600;cursor:pointer}.box-viewer__views button[aria-pressed=true]{background:var(--sky)}.box-viewer__rotation{display:grid;gap:.1rem;color:var(--muted);font-size:.85rem}.box-viewer__rotation input{width:100%;min-width:0;min-height:2.75rem;margin:0;accent-color:var(--purple-ink);cursor:ew-resize}.box-viewer__rotation input:focus-visible{outline:3px solid var(--coral-hot);outline-offset:2px;border-radius:.5rem}.box-viewer__hint{margin:0;color:var(--muted);font-size:.8rem}.box-viewer__enlarge{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;color:var(--purple-ink);font-size:.85rem;text-decoration:underline;text-underline-offset:3px}.box-viewer--compact{max-width:18rem}.box-viewer--compact .box-viewer__controls{gap:.25rem}@media (prefers-reduced-motion:reduce){.box-viewer__box{transition:none}}