.fill-demo-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;margin:30px 0}
.fill-demo-controls>div{display:flex;flex-wrap:wrap;gap:8px}
.fill-demo-controls [aria-pressed=true]{background:var(--button);color:white}
.fill-demo-controls[hidden],.fill-demo-path[hidden]{display:none!important}
.fill-demo-path{margin:35px 0}
.fill-scene{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:24px 5px;margin:0;perspective:1500px}
.fill-scene>li{padding:26px 20px;background:#f0e9e5;border:1px solid #d2c9c5;border-radius:16px;box-shadow:5px 7px 0 #d2c9c455,0 18px 40px #4f16540b;transform:rotateY(-5deg);transition:transform .5s ease,background .5s ease,box-shadow .5s ease;min-width:0;transform-style:preserve-3d}
.fill-scene>li:nth-child(even){background:#ece3de}
.fill-scene>li.is-current{transform:translateY(-12px) rotateY(0deg) translateZ(20px);background:#ede4df;box-shadow:5px 10px 0 #c9c0bc88,0 22px 35px #4f165418;border-color:#a159a8}
.fill-stage{font-size:.65rem;letter-spacing:.09em;color:#656370}
.fill-scene h4{font-size:1.25rem;font-weight:550;line-height:1.3;margin:25px 0 16px;letter-spacing:-.02em}
.studio-document .fill-scene p{font-size:.875rem;line-height:1.75}
.fill-object{display:grid;gap:7px;margin-top:25px;transform:translateZ(10px);pointer-events:none}
.fill-object span{font-size:.7rem;line-height:1.5;padding:10px 12px;border:1px solid #cbc2bd;background:#fdf6f2;box-shadow:3px 4px 0 #d4a6d744;border-radius:7px}
.fill-object span:nth-child(2){margin-left:8px}.fill-object span:nth-child(3){margin-left:16px}
.studio-document .fill-demo-status{padding:18px 22px;border-left:3px solid #a15da8;background:#f3eae5;font-size:.875rem}
@media(max-width:1050px){.fill-scene{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.fill-scene>li{transform:none}}
@media(max-width:560px){.fill-scene{grid-template-columns:1fr;padding:12px 4px}.fill-demo-controls{display:grid}.fill-demo-controls .btn{flex:1}.fill-scene>li.is-current{transform:translateY(-4px)}.fill-object{grid-template-columns:1fr;max-width:300px}.fill-demo-ready .fill-scene>li:not(.is-current){display:none}.fill-demo-ready .fill-scene>li{min-height:360px}}
@media(prefers-reduced-motion:reduce){.fill-scene>li,.fill-scene>li.is-current{transform:none;transition:none}}