.care-scene{max-width:820px;margin:32px auto 40px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);overflow:hidden;text-align:center}
.care-art{display:block;width:100%;height:auto;color:#757b80}
.care-art .outline{fill:#fff;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.care-art .detail{fill:none;stroke:#bdc1c5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.care-art .accent{stroke:var(--orange);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.care-window{fill:#f4f5f6;transition:fill .5s}.care-scene[data-phase="0"] .care-window{fill:#ffe5ac}
.care-action{display:none}.care-scene[data-phase="0"] .care-inspect,.care-scene[data-phase="1"] .care-water,.care-scene[data-phase="2"] .care-wash,.care-scene[data-phase="3"] .care-send{display:block}
.care-inspect{animation:careInspect 3s ease-in-out infinite}
.care-drops{animation:careWater 1.2s linear infinite}
.care-sponge{animation:careWash 2s ease-in-out infinite}
.care-sparkles{animation:careShine 2s ease-in-out infinite}
.care-envelope{animation:careSend 3s ease-in-out infinite}
.care-delivered{animation:careDelivered 3s ease-in-out infinite}
.care-scene figcaption{font-size:1.15rem;font-weight:700;margin:0 16px 12px;color:var(--dark)}
.care-status{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 24px;margin:0 0 20px}
.care-counter{flex:none;color:var(--orange);font-size:.8rem;font-weight:700;border:1px solid #efd1d2;border-radius:99px;padding:7px 10px;background:#fff6f5}
.care-caption{font-size:.95rem;line-height:1.5;text-align:left;color:#41464c}
.care-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 24px;list-style:none;margin:0}
.care-steps li{display:flex}.care-step{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;border:1px solid #e3e4e5;border-radius:12px;background:#fff;color:var(--dark);font:inherit;font-size:.78rem;font-weight:600;line-height:1.4;cursor:pointer}
.care-step[aria-pressed="true"]{border-color:var(--orange);background:#fff6f5}.care-step:hover{border-color:var(--orange)}
.care-steps svg{width:21px;height:21px;flex:none;color:var(--orange);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.care-toggle{display:inline-flex;align-items:center;gap:7px;margin:16px auto;padding:8px 12px;border:0;border-radius:8px;color:#60666c;background:transparent;font:inherit;font-size:.75rem;cursor:pointer}
.care-toggle:hover{background:#eee}.care-toggle:focus-visible,.care-step:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.care-toggle svg{width:14px;height:14px;fill:currentColor}.care-play{display:none}
.care-scene.is-paused .care-pause{display:none}.care-scene.is-paused .care-play{display:inline}
.care-scene.is-paused *,.care-scene.is-offscreen *{animation-play-state:paused!important}
.care-scene.is-paused .care-envelope{animation:none;opacity:1;transform:translate(225px,-25px)}
.care-scene.is-paused .care-delivered{animation:none;opacity:1}
@keyframes careInspect{0%,15%,100%{transform:translateX(0)}45%,65%{transform:translateX(164px)}}
@keyframes careWater{0%{opacity:0;transform:translateY(-5px)}25%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes careWash{0%,100%{transform:translateX(0)}50%{transform:translateX(62px)}}
@keyframes careShine{0%,40%,100%{opacity:.1}65%,85%{opacity:1}}
@keyframes careSend{0%,10%{opacity:0;transform:translate(0,0)}20%{opacity:1}70%{opacity:1;transform:translate(225px,-25px)}85%,100%{opacity:0;transform:translate(225px,-25px)}}
@keyframes careDelivered{0%,65%{opacity:0}75%,95%{opacity:1}100%{opacity:0}}
@media(max-width:600px){.care-scene{margin:24px auto 28px;border-radius:18px}.care-art{width:130%;max-width:none;margin-left:-15%}.care-scene figcaption{font-size:1rem}.care-status{padding:0 14px;gap:9px;min-height:88px}.care-caption{font-size:.86rem}.care-steps{grid-template-columns:1fr 1fr;padding:0 12px;gap:8px}.care-step{font-size:.72rem;padding:10px 6px}.care-side-detail{display:none}}
@media(prefers-reduced-motion:reduce){.care-scene *{animation:none!important;transition:none!important}.care-envelope{transform:translate(225px,-25px)}.care-delivered{opacity:1}}