.sf-demo{--sf-paper:#edece5;--sf-ink:#272b25;--sf-color:#c4d4a1;position:relative;background:var(--sf-paper);color:var(--sf-ink);font:13px/1.5 'Helvetica Neue',Arial,sans-serif;overflow:hidden;border-radius:6px}
.sf-demo *{box-sizing:border-box}.sf-stage{height:350px;display:grid;place-items:center;perspective:900px;overflow:hidden}.sf-object{transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.sf-demo-controls{position:relative;display:flex;justify-content:center;gap:8px;padding:0 16px}.sf-demo-controls button{border:1px solid #9a9e92;background:#f9faf5;color:#272b25;border-radius:6px;padding:0 12px;min-height:36px;font:inherit;cursor:pointer}.sf-demo-controls button:hover{background:#dfe5d4}.sf-demo-controls button:focus-visible{outline:2px solid #272b25;outline-offset:3px}.sf-demo-status{text-align:center;font-size:11px;color:#596051;margin:8px 0 16px}
.sf-ticket{width:270px;height:250px;background:#c4d4a1;border:1px solid #7e9060;border-radius:10px;padding:20px;transform:rotateX(8deg) rotateY(-16deg);box-shadow:12px 18px 0 #292e2420}.sf-ticket-top,.sf-ticket-bottom{display:flex;justify-content:space-between;font-size:11px}.sf-ticket-top{border-bottom:1px solid #758060;padding-bottom:10px}.sf-display{position:absolute;left:20px;bottom:54px;font-size:34px;line-height:1.02;letter-spacing:-1.5px;transform:translateZ(35px)}.sf-ticket-bottom{position:absolute;bottom:16px;left:20px;right:20px;transform:translateZ(14px)}.sf-orbit-mark{position:absolute;right:24px;top:66px;width:78px;height:78px;transform:translateZ(26px)}.sf-orbit-mark i{position:absolute;inset:0;border:1px solid #35422d;border-radius:50%;transform:rotateY(55deg)}.sf-orbit-mark i:nth-child(2){transform:rotateY(-55deg)}.sf-orbit-mark i:nth-child(3){transform:rotateX(65deg)}
[data-demo=product-box]{--sf-paper:#e5e6e2}.sf-box{position:relative;width:170px;height:220px;transform:rotateX(-18deg) rotateY(-28deg)}.sf-box-face{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:20px;background:#e3e4ce;border:1px solid #7e8267;backface-visibility:hidden}.sf-box-front,.sf-box-back{width:170px;height:220px}.sf-box-front{transform:translateZ(55px)}.sf-box-back{transform:rotateY(180deg) translateZ(55px);background:#bdc59d}.sf-box-face strong{font-size:26px;line-height:1.05;letter-spacing:-1px}.sf-box-face small,.sf-box-face span{font-size:10px}.sf-box-left,.sf-box-right{width:110px;height:220px;left:30px;background:#adb58d}.sf-box-right{transform:rotateY(90deg) translateZ(85px)}.sf-box-left{transform:rotateY(-90deg) translateZ(85px)}.sf-box-top,.sf-box-bottom{width:170px;height:110px;top:55px;background:#d3d7bc}.sf-box-top{transform:rotateX(90deg) translateZ(110px)}.sf-box-bottom{transform:rotateX(-90deg) translateZ(110px)}
[data-demo=orbital-gallery]{--sf-paper:#242a26;--sf-ink:#fff}.sf-carousel{position:relative;width:136px;height:194px}.sf-poster{position:absolute;inset:0;padding:12px;background:#e8eadc;color:#252a24;transform:rotateY(calc(var(--i)*72deg)) translateZ(160px);backface-visibility:hidden;border:1px solid #9da38d;display:flex;flex-direction:column;justify-content:space-between}.sf-poster small{font-size:10px}.sf-poster strong{font-size:22px;letter-spacing:-1px}.sf-poster-art{height:105px;position:relative;overflow:hidden}.sf-poster-art i{position:absolute;width:80px;height:80px;left:15px;top:10px;border-radius:50%;border:14px solid #738b57}.sf-poster-art i:nth-child(2){transform:translate(22px,30px);border-color:#a6b88b}.sf-poster-art i:nth-child(3){transform:translate(-24px,-20px);border-color:#35472d}.art-1 i{border-radius:0;transform:rotate(35deg)}.art-2 i{border-radius:50% 50% 0 0}.art-3 i{border-width:2px}.art-4 i{border-radius:0 50% 50% 50%}.sf-demo[data-demo=orbital-gallery] .sf-demo-status{color:#d2d8cc}
.sf-fold{display:flex;width:330px;transform:rotateX(10deg) rotateY(-8deg)}.sf-fold-leaf{position:relative;flex:0 0 110px;height:218px;padding:14px 10px;background:#e5e9d9;border:1px solid #909b7b;display:flex;flex-direction:column;justify-content:space-between;transition:transform .65s ease,background .65s}.sf-fold-leaf strong{font-size:24px;line-height:1.05;letter-spacing:-1px}.sf-fold-leaf small,.sf-fold-leaf span{font-size:10px}.sf-fold-center{background:#c4d4a1}.sf-fold-left{transform-origin:right;transform:rotateY(-53deg);background:#b4c08f}.sf-fold-right{transform-origin:left;transform:rotateY(53deg);background:#a7b887}.sf-unfolded .sf-fold-leaf{transform:rotateY(0)}
[data-demo=layered-stack]{--sf-paper:#e2e5dc}.sf-stack{position:relative;width:244px;height:230px;transform:rotateX(13deg) rotateY(-15deg)}.sf-stack-card{position:absolute;inset:0;padding:20px;background:#f4f4ec;border:1px solid #8d9582;border-radius:8px;transform:translate3d(calc(var(--position)*18px),calc(var(--position)*-16px),calc(var(--position)*-45px));transition:transform .65s ease;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden}.sf-stack-card:nth-child(2){background:#d5dfc4}.sf-stack-card:nth-child(3){background:#b9cba0}.sf-stack-card strong{font-size:21px;letter-spacing:-.7px}.sf-stack-card small,.sf-stack-card span{font-size:11px}.sf-stack-art{height:70px;display:flex;align-items:center;justify-content:center}.sf-stack-art i{display:block;width:64px;height:64px;border-radius:50%;border:1px solid #576b45;margin-left:-22px}.sf-stack-art i:nth-child(2){background:#92a778}.sf-stack-art i:nth-child(3){background:#536547}
@media(max-width:600px){.sf-stage{height:320px}.sf-demo-controls button{min-height:44px}.sf-fold{transform:scale(.88) rotateX(10deg) rotateY(-8deg)}.sf-carousel{transform-origin:center}.sf-stage{perspective:1000px}}
@media(prefers-reduced-motion:reduce){.sf-demo *{transition:none!important;animation:none!important}}