.spin-stage{perspective:1300px;perspective-origin:50% 35%;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;position:relative}.spin-stage:active{cursor:grabbing}.spin-box{--ry:-32deg;width:var(--s);height:var(--s);transform-style:preserve-3d;position:relative}.spin-cube{--edge-hi:color-mix(in oklab, var(--paint) 72%, #fff);--edge-lo:color-mix(in oklab, var(--paint) 80%, #000);width:var(--cs);height:var(--cs);transform-style:preserve-3d;position:absolute}.spin-cube>div{backface-visibility:hidden;outline:1px solid #0000;position:absolute}.spin-cube>div:after{content:"";z-index:4;pointer-events:none;background:rgb(0 0 0/var(--shade,0));position:absolute;inset:0}.spin-front,.spin-back{inset:0}.spin-front{--shade:calc(.12 - .12 * cos(var(--ry) + 20deg));transform:translateZ(calc(var(--d) / 2))}.spin-back{--shade:calc(.2 - .14 * cos(var(--ry) + 200deg));transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:var(--paint)}.spin-left,.spin-right{height:calc(100% + 2px);width:calc(var(--d) + 1px);top:-1px;left:calc(50% - var(--d) / 2 - .5px)}.spin-right{--shade:max(0, calc(.32 - .32 * cos(var(--ry) + 110deg)));transform:rotateY(90deg) translateZ(calc(var(--cs) / 2));background:linear-gradient(to right, var(--edge-hi), var(--paint) 28%, var(--edge-lo))}.spin-left{--shade:max(0, calc(.32 - .32 * cos(var(--ry) - 70deg)));transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2));background:linear-gradient(to left, var(--edge-hi), var(--paint) 28%, var(--edge-lo))}.spin-top,.spin-bottom{width:calc(100% + 2px);height:calc(var(--d) + 1px);left:-1px;top:calc(50% - var(--d) / 2 - .5px)}.spin-top{transform:rotateX(90deg) translateZ(calc(var(--cs) / 2));background:linear-gradient(to top, var(--edge-hi), var(--paint) 30%, var(--edge-lo))}.spin-top:after{background:#ffffff1a}.spin-bottom{--shade:.42;transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2));background:linear-gradient(to bottom, var(--edge-hi), var(--paint) 30%, var(--edge-lo))}.spin-edge{overflow:hidden}.spin-front .cv-weave{opacity:.3}.spin-bars{inset:var(--fold);box-shadow:inset 0 0 0 1px #00000029, inset 0 0 calc(var(--bar) * .3) #50321440;background:repeating-linear-gradient(90deg,#6e462314 0 1px,#0000 1px 6px),linear-gradient(#cda979,#b48c5c);position:absolute}.spin-linen{inset:calc(var(--fold) + var(--bar));box-shadow:inset 0 0 calc(var(--bar) * .6) #0003;background:#ebe4d4;position:absolute}.spin-linen:after{content:"";mix-blend-mode:multiply;opacity:.3;background-image:url(/textures/canvas-weave.png);background-size:144px;position:absolute;inset:0}.spin-brace{background:repeating-linear-gradient(0deg,#6e462314 0 1px,#0000 1px 6px),linear-gradient(90deg,#cda979,#b48c5c);position:absolute;box-shadow:0 0 0 1px #0000001f}.spin-fold{width:calc(var(--fold) + var(--bar) * .95);height:calc(var(--fold) + var(--bar) * .95);background:linear-gradient(135deg, var(--paint), var(--edge-lo));position:absolute}.spin-fold.tl{clip-path:polygon(0 0,100% 0,0 100%);top:0;left:0}.spin-fold.tr{clip-path:polygon(0 0,100% 0,100% 100%);top:0;right:0}.spin-fold.bl{clip-path:polygon(0 0,0 100%,100% 100%);bottom:0;left:0}.spin-fold.br{clip-path:polygon(100% 0,100% 100%,0 100%);bottom:0;right:0}.spin-staple{width:calc(var(--fold) * .9);background:linear-gradient(#b9bdc2,#7d8186);border-radius:1px;height:2px;position:absolute}.spin-hanger{top:calc(var(--fold) + var(--bar) * .3);width:20%;height:calc(var(--bar) * .32);background:repeating-linear-gradient(90deg,#73777c 0 1.5px,#b3b7bc 1.5px 3.5px);border-radius:1px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 1px 1px #00000040}.spin-label{right:calc(var(--fold) + var(--bar) + 6%);bottom:calc(var(--fold) + var(--bar) + 6%);color:#3b3833;font-size:max(5px, calc(var(--cs) * .034));letter-spacing:.06em;white-space:nowrap;background:#fffdf8;padding:.35em .6em;font-weight:700;line-height:1.2;position:absolute;box-shadow:0 1px 1px #00000026}.spin-shadow{pointer-events:none;background:radial-gradient(closest-side,#00000047,#0000);height:18px;position:absolute;bottom:-10px;left:4%;right:4%}.spin-cube.is-framed .spin-edge,.spin-cube.is-framed .spin-back{background:#1b1a18}.spin-cube.is-framed .spin-fold{display:none}.spin-front .cv-frame{box-shadow:none;background:#1b1a18;border-radius:0}.spin-front .cv-frame:before,.spin-front .cv-face,.spin-front .cv-gloss{border-radius:0}.spin-cube.is-metal .spin-edge{background:linear-gradient(90deg,#d7dade 0 12%,#2a2b2e 12%)}.spin-cube.is-metal .spin-top,.spin-cube.is-metal .spin-bottom{background:linear-gradient(#d7dade 0 12%,#2a2b2e 12%)}.spin-cube.is-metal .spin-left,.spin-cube.is-metal .spin-right{background:linear-gradient(90deg,#eef0f3 0 14%,#2a2b2e 14%)}.spin-cube.is-metal .spin-back{background:#b7bbc1}.spin-cube.is-metal .spin-bars,.spin-cube.is-metal .spin-linen,.spin-cube.is-metal .spin-brace,.spin-cube.is-metal .spin-staple,.spin-cube.is-metal .spin-fold,.spin-cube.is-metal .spin-hanger{display:none}.spin-mount{background:#2a2b2e;position:absolute;inset:16%;box-shadow:inset 0 0 0 1px #ffffff14}.spin-front .cv-metal .cv-face{box-shadow:inset 0 0 0 .15cqi #ffffff38}.spin-front .cv-gloss{background-color:#0000;background-image:linear-gradient(112deg,#0000 36%,#ffffff9e 47%,#ffffff24 53%,#0000 63%),linear-gradient(#ffffff24,#0000 45%);background-position:0 0,0 0;background-repeat:no-repeat;background-size:280% 100%,100% 100%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;background-position:calc(50% + sin(var(--ry)) * 36%) 0, 0 0;opacity:calc(.5 + .5 * cos(var(--ry) + 25deg))}