@property --p{syntax:"<number>";inherits:true;initial-value:0}.scene{width:100%;height:auto;display:block}.s-line{fill:none;stroke:var(--text);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.s-white{fill:var(--bg)}.s-t100{fill:var(--teal-100)}.s-t200{fill:var(--teal-200)}.s-t300{fill:var(--teal-300)}.s-t500{fill:var(--teal-500)}.s-t800{fill:var(--teal-800)}.s-slate{fill:var(--slate)}.s-ink{fill:var(--text)}.s-orange{fill:var(--orange)}.s-none{fill:none}.s-ground{fill:var(--teal-50)}.s-stroke-t500{stroke:var(--teal-500)}.s-stroke-soft{stroke:var(--teal-300)}.s-box{transform-box:fill-box}.s-read{font-family:var(--font-mono);fill:var(--bg);font-size:26px;font-weight:500}.story-stage-frame{aspect-ratio:4/3;border-radius:var(--r-tile);background:var(--surface-raised);width:100%;max-height:64svh;box-shadow:var(--sh-1);position:relative;overflow:hidden}.stage-layer{opacity:0;--p:0;transition:opacity var(--dur-3) var(--ease-std), --p 1.5s var(--ease-out);place-items:center;display:grid;position:absolute;inset:0}.stage-layer .scene{max-height:100%}.story[data-stage="1"] .stage-layer[data-layer="1"],.story[data-stage="2"] .stage-layer[data-layer="2"],.story[data-stage="3"] .stage-layer[data-layer="3"],.story[data-stage="4"] .stage-layer[data-layer="4"],.story[data-stage="5"] .stage-layer[data-layer="5"],.story[data-stage="6"] .stage-layer[data-layer="6"]{opacity:1;--p:1}.stage-chip{border-radius:var(--r-pill);background:var(--bg-alt);width:2.75rem;height:2.75rem;color:var(--text-2);transition:background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);place-items:center;display:grid}.story[data-stage="1"] .stage-chip[data-chip="1"],.story[data-stage="2"] .stage-chip[data-chip="2"],.story[data-stage="3"] .stage-chip[data-chip="3"],.story[data-stage="4"] .stage-chip[data-chip="4"],.story[data-stage="5"] .stage-chip[data-chip="5"],.story[data-stage="6"] .stage-chip[data-chip="6"]{background:var(--btn-bg);color:var(--btn-fg)}.card-art{--p:1}@media (min-width:1069px){.story-step .reveal{opacity:1;animation:none;transform:none}}.truck-in{transform:translateX(calc((1 - var(--p)) * 200px))}.route-truck{transform:translate(350px,150px)}@supports (transform:translate(calc(sin(1deg) * 1px), 0)){.route-truck{transform:translate(calc(70px + var(--p) * 280px), calc(250px - var(--p) * 100px - sin(var(--p) * 360deg) * 40px))}}.route-dot{opacity:clamp(0, calc((var(--p) * 26 - var(--i)) * .6), 1)}.weigh-fridge{transform:translateY(calc((1 - var(--p)) * -72px))}.weigh-read{opacity:clamp(0, calc((var(--p) - .55) * 4), 1)}.weigh-needle{transform:rotate(calc(-70deg + var(--p) * 105deg));transform-origin:50% 100%;transform-box:fill-box}.tank-level{transform:scaleY(calc(.05 + var(--p) * .68));transform-origin:50% 100%;transform-box:fill-box}.flow-drop{opacity:clamp(0, calc(1 - abs(var(--p) * 5 - var(--i) - 1) * .9), 1)}.tank-done{opacity:clamp(0, calc((var(--p) - .8) * 5), 1)}.cabinet{opacity:clamp(0, calc(1 - var(--p) * 2.4), 1)}.part{opacity:clamp(0, calc((var(--p) - .08) * 4), 1)}.part-move{transform:translate(calc((1 - var(--p)) * var(--dx)), calc((1 - var(--p)) * var(--dy)))}.mat-chip{transform:translateY(calc(clamp(0, (var(--p) - var(--d)) * 3, 1) * 150px))}.new-thing{opacity:clamp(0, calc((var(--p) - .72) * 4), 1);transform:translateY(calc((1 - clamp(0, (var(--p) - .72) * 4, 1)) * 14px))}.recycle-ring{transform:rotate(calc(var(--p) * 360deg));transform-origin:240px 64px;transform-box:view-box}@keyframes story-p{0%{--p:0}to{--p:1}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.card-art{--p:0;animation:linear both story-p;animation-timeline:view();animation-range:entry 10% cover 42%}}@supports (animation-timeline:view()) and (timeline-scope:--a){@media (min-width:1069px){.story{timeline-scope:--s1, --s2, --s3, --s4, --s5, --s6}.story-step[data-step="1"]{view-timeline:--s1 block}.story-step[data-step="2"]{view-timeline:--s2 block}.story-step[data-step="3"]{view-timeline:--s3 block}.story-step[data-step="4"]{view-timeline:--s4 block}.story-step[data-step="5"]{view-timeline:--s5 block}.story-step[data-step="6"]{view-timeline:--s6 block}.stage-layer{transition:opacity var(--dur-3) var(--ease-std);animation:linear both story-p;animation-range:cover 50% cover 87%}.stage-layer[data-layer="1"]{animation-timeline:--s1;animation-range:cover 18% cover 58%}.stage-layer[data-layer="2"]{animation-timeline:--s2}.stage-layer[data-layer="3"]{animation-timeline:--s3}.stage-layer[data-layer="4"]{animation-timeline:--s4}.stage-layer[data-layer="5"]{animation-timeline:--s5}.stage-layer[data-layer="6"]{animation-timeline:--s6}}}}@media (prefers-reduced-motion:reduce){.stage-layer,.card-art{--p:1!important;transition:opacity .15s linear!important;animation:none!important}}
