.stack-demo{display:grid;justify-items:center;gap:10px}
.stack-scene{width:165px;height:105px;perspective:600px}
.stack-scene .stack-card{display:grid;place-items:center;inset:8px 22px;border-radius:12px;color:#29442a;font-weight:800;font-size:22px;background:linear-gradient(145deg,#f7fbf3,#b9d2ae);box-shadow:0 8px 14px #263a2430}
.stack-scene .stack-card--back{transform:translate3d(13px,-10px,-50px) scale(.94);background:linear-gradient(145deg,#dcebd4,#a6c29a)}
.stack-scene .stack-card--middle{transform:translate3d(7px,-5px,-25px) scale(.97);background:linear-gradient(145deg,#e9f4e3,#b5cfaa)}
.stack-scene .stack-card--front{transform:translate3d(0,0,0);z-index:2}
.stack-scene.is-cycling .stack-card--front{animation:stack-front 480ms cubic-bezier(.2,.7,.25,1) both}
.stack-scene.is-cycling .stack-card--middle{animation:stack-middle 480ms ease both}
.stack-scene.is-cycling .stack-card--back{animation:stack-back 480ms ease both}
@keyframes stack-front{0%{transform:translate3d(0,0,0);opacity:1}45%{transform:translate3d(-45px,-15px,45px) rotate(-9deg);opacity:.85}100%{transform:translate3d(13px,-10px,-50px) scale(.94);opacity:.4}}
@keyframes stack-middle{from{transform:translate3d(7px,-5px,-25px) scale(.97)}to{transform:translate3d(0,0,0)}}
@keyframes stack-back{from{transform:translate3d(13px,-10px,-50px) scale(.94)}to{transform:translate3d(7px,-5px,-25px) scale(.97)}}

.overflow-demo{position:relative}
.overflow-trigger{display:grid;place-items:center;width:42px;height:42px;border:1px solid #cddbc6;border-radius:11px;background:#fff;color:#354d2a;font-size:24px;line-height:1;box-shadow:0 2px 5px #273b2414}
.overflow-trigger:hover,.overflow-trigger[aria-expanded=true]{background:#eaf2e4;border-color:#9bb391}
.overflow-panel{position:absolute;top:calc(100% + 8px);left:50%;z-index:5;min-width:148px;padding:5px;border:1px solid #d4e0ce;border-radius:10px;background:#fff;box-shadow:0 10px 24px #263b2533;transform-origin:top center;animation:overflow-in 180ms cubic-bezier(.2,.8,.2,1) both}
.overflow-panel.is-closing{animation:overflow-out 160ms ease-in both}
.overflow-panel button{display:block;width:100%;padding:9px 11px;border:0;border-radius:6px;background:transparent;color:#33472f;font-size:12px;text-align:left}
.overflow-panel button:hover,.overflow-panel button:focus-visible{background:#eef5e9}
@keyframes overflow-in{from{opacity:0;transform:translate(-50%,-7px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes overflow-out{from{opacity:1;transform:translate(-50%,0) scale(1)}to{opacity:0;transform:translate(-50%,-5px) scale(.96)}}

.lever-control{display:grid;grid-template-columns:auto 74px auto;align-items:center;gap:9px}
.lever-control .feedback{grid-column:1/-1;text-align:center}
.lever-label{font:700 10px ui-monospace,monospace;color:#6d8065;letter-spacing:.08em}
.lever-switch{position:relative;width:74px;height:108px;padding:0;border:1px solid #8ca184;border-radius:37px;background:linear-gradient(145deg,#f7fbf4,#b8caae);box-shadow:inset 0 2px 2px #fff,0 5px 0 #819779,0 9px 14px #263b2430}
.lever-switch:hover{filter:brightness(1.04)}
.lever-track{position:absolute;left:22px;top:17px;width:30px;height:70px;border-radius:17px;background:linear-gradient(90deg,#526849,#819775 50%,#526849);box-shadow:inset 0 3px 6px #263b2466}
.lever-stem{position:absolute;left:12px;top:31px;width:7px;height:28px;border-radius:5px;background:linear-gradient(90deg,#80917a,#f3f8ef 45%,#788b72);transform-origin:50% 90%;transform:rotate(28deg);transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
.lever-knob{position:absolute;left:-9px;top:-15px;width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff,#d6e1d0 38%,#78916d);box-shadow:0 4px 5px #23372055}
.lever-switch[aria-checked=true] .lever-stem{transform:rotate(-28deg)}
.lever-switch[aria-checked=true]{box-shadow:inset 0 2px 2px #fff,0 5px 0 #6b8960,0 9px 14px #263b2430,0 0 0 3px #d2e7c9}

.cover-scene.slide-next{animation:cover-next 320ms ease both}
.cover-scene.slide-previous{animation:cover-previous 320ms ease both}
@keyframes cover-next{0%{opacity:1;transform:translateX(0)}48%{opacity:.55;transform:translateX(-24px)}100%{opacity:1;transform:translateX(0)}}
@keyframes cover-previous{0%{opacity:1;transform:translateX(0)}48%{opacity:.55;transform:translateX(24px)}100%{opacity:1;transform:translateX(0)}}
.orbit-ring span{transition:transform .4s}
.fold-panel.is-closing{animation:fold-out 220ms ease-in both}
.pop-panel.is-closing{animation:pop-out 220ms ease-in both}
@keyframes fold-out{from{opacity:1;transform:perspective(400px) rotateX(0)}to{opacity:0;transform:perspective(400px) rotateX(-85deg)}}
@keyframes pop-out{from{opacity:1;transform:perspective(400px) translateZ(0)}to{opacity:0;transform:perspective(400px) translateZ(-80px)}}

.book-demo{position:relative;perspective:550px;filter:drop-shadow(0 6px 6px #273b2426)}
.book-demo span{display:grid;place-items:center;background:linear-gradient(90deg,#efe7cf,#fffdf4 16% 90%,#e3dac2);border-color:#c1b497;font-weight:700;color:#5c624d}
.book-flipping-sheet{position:absolute;left:50%;top:0;width:50%;height:100%;display:grid;place-items:center;background:linear-gradient(90deg,#e8dfc6,#fffdf4);border:1px solid #c1b497;transform-origin:left center;backface-visibility:hidden;visibility:hidden}
.book-demo.turn-forward .book-flipping-sheet{visibility:visible;animation:book-forward 520ms ease-in-out both}
.book-demo.turn-backward .book-flipping-sheet{visibility:visible;animation:book-backward 520ms ease-in-out both}
.button-group button[aria-disabled=true]{opacity:.4;cursor:default}
@keyframes book-forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes book-backward{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}

@media(prefers-reduced-motion:reduce){
  .stack-scene.is-cycling .stack-card,.overflow-panel,.cover-scene.slide-next,.cover-scene.slide-previous{animation:none!important}
  .book-demo.turn-forward .book-flipping-sheet,.book-demo.turn-backward .book-flipping-sheet{animation:none!important}
  .fold-panel.is-closing,.pop-panel.is-closing{animation:none!important}
  .orbit-ring span{transition:none!important}
  .lever-stem{transition:none!important}
}