.calendar-scene{margin:1rem 0;border:1px solid #e1d3ac;border-radius:1.15rem;padding:clamp(.65rem,2vw,1rem);background:#fff6de;color:#173d40;max-width:100%;min-width:0;box-sizing:border-box}.calendar-scene h3{margin:.1rem 0 .7rem;font-size:1.16rem;font-weight:700;line-height:1.3}.cs-stage{position:relative;width:100%;aspect-ratio:4/3;max-width:42.6667rem;margin-inline:auto;overflow:hidden;isolation:isolate;border-radius:.8rem;background:#22464a}.cs-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.84)}.cs-cast{position:absolute;inset:0;z-index:2}.cs-actor{position:absolute;bottom:17%;width:26%;aspect-ratio:3/4;background-size:400% 200%;background-repeat:no-repeat;filter:drop-shadow(0 .4rem .22rem #102b3566);will-change:auto}.cs-actor[data-side=left]{left:calc(19% + var(--cs-slot)*6%);--cs-enter:-150%;transform:translateX(0)}.cs-actor[data-side=right]{left:calc(27% + var(--cs-slot)*18%);--cs-enter:150%;transform:translateX(0) scaleX(-1)}.cs-dog{width:25%;bottom:17%;z-index:3}.cs-stage[data-state=ready] .cs-actor{opacity:.92}.cs-stage.is-walking .cs-actor{animation:cs-arrive-left 2.6s ease-in-out both,cs-walk-frame 1s step-end infinite}.cs-stage.is-walking .cs-actor[data-side=right]{animation-name:cs-arrive-right,cs-walk-frame}.calendar-scene:has(.cs-stage[data-state=playing]) .cs-caption{opacity:0}.cs-caption{padding:.5rem .65rem;margin:.5rem auto 0;max-width:42.6667rem;box-sizing:border-box;border-radius:.65rem;background:#133a3ce6;color:#fff6dc;text-align:center;line-height:1.35;font-size:clamp(.83rem,2vw,1.1rem);text-shadow:0 1px 1px #123}.cs-prop{position:absolute;object-fit:contain;z-index:4;filter:drop-shadow(0 0 .75rem #ffd884)}.cs-stage[data-preset=lantern-greeting] .cs-prop{width:18%;height:26%;left:41%;top:4%}.cs-stage[data-preset=lantern-greeting]:before{content:"";position:absolute;top:0;left:calc(50% - 1px);height:12%;width:2px;background:#c9a769;z-index:3}.cs-stage[data-preset=gift-light] .cs-prop{width:13%;height:12%;left:4%;bottom:2%}.cs-stage[data-state=playing] .cs-prop,.cs-stage[data-state=greeting] .cs-prop{animation:cs-warm-light 2.4s ease-in-out infinite}.cs-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.cs-actions button{min-height:48px;min-width:48px;padding:.6rem .9rem;border-radius:.7rem;border:1px solid #225458;background:#1b4b4d;color:#fff7e2;font:inherit;cursor:pointer;max-width:100%;white-space:normal}.cs-actions button:disabled{opacity:.6;cursor:default}.cs-actions button:focus-visible{outline:3px solid #a7681e;outline-offset:3px}.cs-status{margin:.65rem 0 .1rem;line-height:1.4;overflow-wrap:anywhere}.calendar-scene [hidden]{display:none!important}
@keyframes cs-arrive-left{from{transform:translateX(-150%)}to{transform:translateX(0)}}@keyframes cs-arrive-right{from{transform:translateX(150%) scaleX(-1)}to{transform:translateX(0) scaleX(-1)}}@keyframes cs-walk-frame{0%{background-position:0 0}12.5%{background-position:33.333333% 0}25%{background-position:66.666667% 0}37.5%{background-position:100% 0}50%{background-position:0 100%}62.5%{background-position:33.333333% 100%}75%{background-position:66.666667% 100%}87.5%,100%{background-position:100% 100%}}@keyframes cs-warm-light{0%,100%{filter:drop-shadow(0 0 .5rem #ffd884)}50%{filter:drop-shadow(0 0 1.2rem #ffe1a0)}}
@media(prefers-reduced-motion:reduce){.calendar-scene *{animation:none!important;transition:none!important}.cs-actor[data-side=left]{transform:none}.cs-actor[data-side=right]{transform:scaleX(-1)}}