/* Five little stages, performed by Rocco. Everything stays inside the story. */
.theatre{min-height:180px;max-height:380px;width:100%;display:block}.set{position:absolute;inset:0;isolation:isolate}.sample-label{position:absolute;top:0;left:0;font-size:7px;letter-spacing:1px;color:#5b675e}.actor{position:absolute;width:43%;left:4%;bottom:9%;z-index:4}.actor-rocco{width:100%;height:auto;display:block}.paw{transform-box:view-box}.paw-left{transform-origin:72px 153px}.paw-right{transform-origin:166px 153px}.actor-line{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;color:#28533f;font-weight:600}.room-line{position:absolute;bottom:12%;width:100%;height:1px;background:#cad9c4}.list-board{position:absolute;right:0;top:16%;width:53%;padding:16px 13px;background:#fffdf8;box-shadow:4px 8px 0 #cad9c4;border-radius:5px;transform:rotate(4deg);font-size:11px}.list-board>span,.list-board small{font-size:8px;letter-spacing:1px;display:block}.list-board b{display:flex;justify-content:space-between;border-bottom:1px solid #e6ede3;padding:12px 0}.list-board i{font-style:normal;color:#356650}.list-board small{margin-top:14px;letter-spacing:0;color:#5b675e}.flying-note{position:absolute;font-size:9px;padding:8px 10px;border-radius:2px;box-shadow:0 5px 12px #30362c13;z-index:5;opacity:0}.note-dinners{left:7%;top:15%;background:#e6ede3;transform:rotate(-12deg)}.note-soap{left:0;top:38%;background:#dff28d;transform:rotate(8deg)}.note-wash{left:14%;top:57%;background:#f5a9bc;transform:rotate(-5deg)}.theatre-1 .paw-right{transform:rotate(-32deg)}
.capacity{position:absolute;top:12%;font-size:12px;display:grid;gap:5px}.capacity span{font-size:9px;color:#5b675e}.cap-left{left:0}.cap-right{right:0;text-align:right}.balance-rig{position:absolute;left:2%;right:2%;top:30%;height:28%}.balance-beam{position:absolute;left:7%;right:7%;height:5px;background:#356650;border-radius:6px;transform-origin:50% 50%}.pan{position:absolute;top:8%;width:38%;height:90%;border-bottom:4px solid #356650;border-radius:0 0 40% 40%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding-bottom:9px}.pan:before,.pan:after{content:'';position:absolute;width:1px;height:100%;background:#70977a;top:0}.pan:before{left:8%;transform:rotate(13deg)}.pan:after{right:8%;transform:rotate(-13deg)}.pan-left{left:0}.pan-right{right:0}.pan span{font-size:9px;background:#fffdf4;border-radius:6px;padding:5px 12px;z-index:1}.pan-right span{background:#e6ede3}.theatre-2 .actor{left:31%;width:39%;bottom:6%}.theatre-2 .paw-left{transform:rotate(45deg)}.theatre-2 .paw-right{transform:rotate(-45deg)}.moving-task{position:absolute;left:9%;top:45%;background:#dff28d;padding:6px 10px;font-size:10px;border-radius:5px;z-index:6;opacity:0}
.consent{position:absolute;top:11%;width:44%;border-radius:12px;padding:11px 9px;background:#fffdf8;z-index:2;box-shadow:0 5px 16px #3040210b}.consent-left{left:0}.consent-right{right:0}.consent span{display:block;font-size:8px;letter-spacing:1px;margin-bottom:7px}.consent b{font-size:10px;font-weight:500;display:flex;justify-content:space-between}.consent i{font-style:normal;color:#356650}.routine-paper{position:absolute;left:5%;top:35%;width:62%;background:#fffdf9;border-radius:4px;padding:14px 11px;box-shadow:-4px 5px 0 #cad9c4;transform:rotate(-5deg);font-size:10px}.routine-paper>span{font-size:7px;letter-spacing:1px;display:block}.routine-paper b{display:block;font-size:13px;margin:8px 0 5px}.routine-paper small{font-size:8px}.routine-paper div{margin-top:12px;letter-spacing:2px;color:#356650;font-size:9px}.routine-paper em{display:block;margin-top:8px;font-size:8px;font-style:normal}.theatre-3 .actor{width:42%;left:58%;bottom:6%}.theatre-3 .paw-left{transform:rotate(40deg)}.agreed-stamp{position:absolute;left:14%;bottom:11%;font-size:11px;font-weight:700;letter-spacing:1px;color:#28533f;border:2px solid #28533f;padding:8px;transform:rotate(-12deg);z-index:6;background:#dff28de6}
.handoff-person{position:absolute;top:18%;display:grid;justify-items:center;gap:6px;font-size:10px}.person-left{left:4%}.person-right{right:4%}.handoff-person b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dff28d;font-size:14px}.person-right b{background:#e6ede3}.handoff-request,.handoff-yes{position:absolute;top:6%;background:#fffdf8;border-radius:12px 12px 12px 2px;padding:9px 10px;font-size:9px;z-index:2}.handoff-request{left:0;max-width:52%}.handoff-yes{right:0;top:37%;background:#dff28d;border-radius:12px 12px 2px 12px}.handoff-path{position:absolute;left:15%;right:15%;top:59%;height:1px;border-top:2px dashed #70977a}.courier{position:absolute;left:43%;bottom:8%;width:43%;height:59%;z-index:4}.courier .actor{left:0;bottom:0;width:100%}.courier .paw-left{transform:rotate(25deg)}.courier .paw-right{transform:rotate(-25deg)}.laundry-basket{position:absolute;left:14%;right:5%;bottom:6%;height:32%;background:repeating-linear-gradient(0deg,#bc9366 0 4px,#d6b58c 4px 8px);border:4px solid #bd966c;border-radius:4px 4px 17px 17px;z-index:5;display:grid;place-items:center}.laundry-basket span{font-size:7px;letter-spacing:1px;background:#fff6dc;padding:4px}.laundry-basket i{position:absolute;top:-13px;left:10%;width:38%;height:13px;background:#b2c4ac;border-radius:8px 8px 0 0;z-index:-1}.laundry-basket i:nth-child(2){left:45%;background:#a3baab;top:-18px;height:18px}.laundry-basket i:nth-child(3){left:25%;background:#f4edd9;top:-11px}
.theatre-5 .actor{left:0;width:38%;bottom:11%}.theatre-5 .paw-right{transform:rotate(-30deg)}.sofa{position:absolute;left:31%;right:0;bottom:17%;height:46%}.sofa-back{position:absolute;inset:0 4% 15%;border-radius:22px 22px 4px 4px;background:#a1c7ae;box-shadow:inset 0 5px 0 #e6ede3}.sofa-seat{position:absolute;left:0;right:0;height:35%;bottom:0;background:#7dab8c;border:7px solid #a1c7ae;border-radius:9px;box-shadow:0 8px 0 -4px #356650}.cushion{position:absolute;width:31%;height:42%;background:#dff28d;top:18%;border-radius:7px;box-shadow:inset 0 0 0 3px #ffffff21}.cushion-one{left:17%;transform:rotate(-8deg)}.cushion-two{right:13%;background:#f5a9bc;transform:rotate(8deg)}.unfolded-shirt{position:absolute;left:46%;bottom:38%;width:30%;height:28%;background:#aab8af;clip-path:polygon(22% 0,38% 8%,62% 8%,78% 0,100% 28%,81% 41%,77% 100%,23% 100%,19% 41%,0 28%);z-index:3;opacity:0}.folded-towels{position:absolute;left:22%;bottom:12%;width:21%;z-index:5;display:flex;flex-direction:column-reverse}.folded-towels i{height:9px;border-radius:4px;background:#efe4c7;border-bottom:2px solid #c8b998}.folded-towels i:nth-child(2){background:#a9b8ae;border-color:#8b9b91}.folded-towels i:nth-child(3){background:#b3c4a9;border-color:#869d7a}.thank-you{position:absolute;right:0;top:10%;font-size:10px;padding:11px 13px;background:#fffdf7;border-radius:17px 17px 3px 17px;box-shadow:0 5px 10px #35452f09;z-index:6}
.scene.is-active .note-dinners{animation:collect 1.1s .05s both}.scene.is-active .note-soap{animation:collect 1.1s .45s both}.scene.is-active .note-wash{animation:collect 1.1s .85s both}.scene.is-active .list-board b i{animation:approval .4s 1.6s both}.scene.is-active .theatre-1 .paw-right{animation:gather 2.7s both}.scene.is-active .balance-beam{animation:level 2.7s both}.scene.is-active .moving-task{animation:rebalance 2.7s both}.scene.is-active .theatre-2 .paw-right{animation:balance-paw 2.7s both}.scene.is-active .consent-left i{animation:approval .35s .65s both}.scene.is-active .consent-right i{animation:approval .35s 1.3s both}.scene.is-active .agreed-stamp{animation:stamp .5s 1.9s both}.scene.is-active .theatre-3 .paw-left{animation:stamp-paw 2.7s both}.scene.is-active .courier{animation:deliver 2.7s both}.scene.is-active .handoff-yes{animation:approval .3s 1.15s both}.scene.is-active .unfolded-shirt{animation:fold 2.3s both}.scene.is-active .folded-towels{animation:approval .4s 1.65s both}.scene.is-active .theatre-5 .paw-right{animation:gather 2.3s both}.scene.is-active .thank-you{animation:approval .4s 2s both}.story-paused .set *{animation-play-state:paused!important}
@keyframes collect{0%,25%{opacity:1;translate:0 0}85%{opacity:1;translate:100px -12px;scale:.65}100%{opacity:0;translate:120px -12px;scale:.4}}@keyframes gather{0%,100%{rotate:0deg}25%,65%{rotate:-28deg}45%,85%{rotate:10deg}}@keyframes level{0%,25%{rotate:-12deg}70%,100%{rotate:0deg}}@keyframes rebalance{0%,20%{opacity:1;translate:0 0}65%{opacity:1;translate:160% -25px}85%,100%{opacity:0;translate:190% 5px}}@keyframes balance-paw{0%,20%{rotate:20deg}60%,100%{rotate:0deg}}@keyframes approval{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}@keyframes stamp{0%{opacity:0;scale:1.3;rotate:-8deg}65%{opacity:1;scale:.96}100%{opacity:1;scale:1}}@keyframes stamp-paw{0%,40%{rotate:-20deg}65%{rotate:15deg}80%,100%{rotate:0deg}}@keyframes deliver{0%,48%{translate:-85% 0}85%,100%{translate:0 0}}@keyframes fold{0%,25%{opacity:1;translate:0 0;scale:1}60%{opacity:1;translate:-50px 30px;scale:.5}80%,100%{opacity:0;translate:-70px 50px;scale:.3}}
@media(max-height:700px){.theatre{min-height:155px}.list-board{padding:10px}.list-board b{padding:8px 0}.list-board small{margin-top:8px}.routine-paper{padding:9px}.routine-paper b{font-size:11px;margin:5px 0}.routine-paper div{margin-top:7px}.routine-paper em{margin-top:5px}.consent{padding:8px}.actor-line{font-size:9px}.agreed-stamp{font-size:9px;padding:6px}}
@media(max-height:620px){.theatre{min-height:125px}.sample-label{font-size:6px}.capacity{top:12%;font-size:10px}.capacity span{font-size:7px}.actor-line{font-size:8px}.list-board{top:12%;font-size:9px;padding:8px}.list-board>span,.list-board small{font-size:6px}.list-board b{padding:6px 0}.flying-note{font-size:8px;padding:6px}.consent{padding:6px}.consent span{font-size:6px;margin-bottom:4px}.consent b{font-size:8px}.routine-paper{top:37%;padding:8px}.routine-paper b{font-size:10px;margin:4px 0}.routine-paper small,.routine-paper em{font-size:6px}.routine-paper div{font-size:7px;letter-spacing:1px;margin-top:5px}.agreed-stamp{font-size:7px;padding:5px;left:11%;bottom:7%}.handoff-request,.handoff-yes,.thank-you{font-size:8px;padding:7px}.handoff-person b{width:29px;height:29px}.handoff-person{font-size:8px}.pan span{font-size:7px;padding:3px 8px}.pan{gap:3px;padding-bottom:5px}.moving-task{font-size:8px;padding:5px}.laundry-basket span{font-size:5px}.folded-towels i{height:7px}}
@media(prefers-reduced-motion:reduce){.set *{animation:none!important}}

.actor{height:74%;display:flex;align-items:flex-end;justify-content:center}.actor-rocco{height:100%;width:100%;object-fit:contain}.courier .actor{height:100%}

.scene.is-active .pan-right span:nth-child(2){animation:approval .2s 1.9s both}@media(prefers-reduced-motion:reduce){.scene.is-active .pan-right span:nth-child(2){animation:none!important}}