/* The preview stays at the page edge; the studio's main actions stay clear. */
.demo-peek{--peek-visible:100px;position:fixed;z-index:29;left:50%;bottom:-1px;width:min(390px,calc(100vw - 40px));height:210px;display:none;overflow:hidden;isolation:isolate;color:#292923;background:#f5f3ee;border:1px solid #bdbdaf;border-radius:12px 12px 0 0;box-shadow:0 -7px 28px #25251f12;text-decoration:none;transform:translate(-50%,calc(100% - var(--peek-visible))) rotate(-1.5deg);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
body[data-scene=studio] .demo-peek{display:block;animation:demo-peek-hello 4.8s ease-in-out both}
.demo-peek-bar{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.015em;border-bottom:1px solid #bdbdaf80;background:#f8f6ef}.demo-peek-bar strong{font-weight:500}.demo-peek-bar span{font-size:10px;color:#68675f}.demo-peek img{width:100%;height:170px;object-fit:cover;object-position:center 28%;display:block}.demo-peek:after{content:'Open Still Yard demo ↗';position:absolute;bottom:17px;right:14px;padding:10px 14px;border-radius:30px;background:#f8f6ef;color:#292923;font-size:11px;box-shadow:0 2px 8px #0001}
body[data-scene=studio] .demo-peek:focus-visible{animation:none;transform:translate(-50%,0) rotate(0);outline:2px solid #a13a26;outline-offset:4px;box-shadow:0 -10px 35px #25251f24}
body[data-scene=studio] .foot .progress-label{visibility:hidden}.foot{pointer-events:none}.foot a,.foot button{pointer-events:auto}
@keyframes demo-peek-hello{0%{transform:translate(-50%,100%) rotate(-3deg)}18%,36%{transform:translate(-50%,calc(100% - var(--peek-visible) - 18px)) rotate(-1deg)}52%{transform:translate(-50%,calc(100% - var(--peek-visible))) rotate(-1.5deg)}70%{transform:translate(-50%,calc(100% - var(--peek-visible) - 10px)) rotate(-.5deg)}100%{transform:translate(-50%,calc(100% - var(--peek-visible))) rotate(-1.5deg)}}
@media(hover:hover){body[data-scene=studio] .demo-peek:hover{animation:none;transform:translate(-50%,0) rotate(0);box-shadow:0 -10px 35px #25251f24}}
@media(max-width:720px){.demo-peek{--peek-visible:82px;width:250px;height:195px;bottom:43px}.demo-peek img{height:155px}.demo-peek-bar{height:40px;padding:0 12px}.demo-peek-bar strong{font-size:10px}.demo-peek-bar span{font-size:9px}.demo-peek:after{font-size:10px;padding:8px 10px;bottom:10px;right:10px}body[data-scene=studio] .folder{bottom:calc(12% + 28px)}.foot{z-index:30;min-height:43px}}
@media(max-height:600px){.demo-peek{--peek-visible:44px;width:270px;height:205px;bottom:0}.demo-peek img{height:165px}.demo-peek-bar{height:40px}.demo-peek-bar strong{font-size:10px}.demo-peek-bar span{font-size:9px}body[data-scene=studio] .folder{bottom:12%}}
@media(prefers-reduced-motion:reduce){body[data-scene=studio] .demo-peek{animation:none;transition:none}}

@media(min-width:721px){body[data-scene=studio] .foot{background:transparent}}
@media(max-width:360px){.demo-peek{height:160px}.demo-peek img{height:120px}}
@media(max-height:600px){body[data-scene=studio] .demo-peek:hover,body[data-scene=studio] .demo-peek:focus-visible{transform:translate(-50%,calc(100% - var(--peek-visible))) rotate(0)}}