.scene-field{--p-bg: #c9e6f8}.scene-truck{--p-bg: #d8ecf8}.scene-wash{--p-bg: #e6f5fb}.scene-cut{--p-bg: #f9ecdd}.scene-cup{--p-bg: #ffe9ed}.proc-lead{color:var(--ink-3);margin-top:-6px}.proc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.proc-track{height:calc(100vh + var(--n) * 80vh);height:calc(100dvh + var(--n) * 80vh);margin:12px -8px 0}.proc-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:calc(76px + env(safe-area-inset-top,0px)) 0 16px}.proc-stage{position:relative;flex:1;min-height:0;border-radius:28px;overflow:hidden;background:var(--p-bg);box-shadow:var(--shadow-1);transition:background-color .7s var(--ease-ios)}.scene-cup:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(70% 55% at 50% 60%,#fff5f7,#ffe3e8 70%,#ffd9df)}.proc-scene{position:absolute;top:0;right:0;bottom:0;left:0;animation:p-scene var(--dur-gentle) var(--ease-gentle) both}.proc-svg,.proc-canvas{display:block;width:100%;height:100%}.proc-canvas{position:absolute;top:0;right:0;bottom:0;left:0}@keyframes p-scene{0%{opacity:0;transform:scale(.94) translateY(14px)}}.proc-panel{display:grid;gap:6px;padding:16px 18px 18px;border-radius:24px}.proc-panel h3{font:800 24px/28px var(--font-display);letter-spacing:-.02em;animation:p-copy var(--dur-pop) var(--ease-pop) both}.proc-panel p{color:var(--ink-3);font-size:16px;line-height:22px;min-height:44px;animation:p-copy var(--dur-pop) var(--ease-pop) 60ms both}.proc-count{font:600 12px/16px var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--fresa-deep)}.proc-bar{display:flex;gap:4px;margin-bottom:6px}.proc-bar span{flex:1;height:4px;border-radius:2px;background:var(--seg-bg);transition:background-color .4s var(--ease-ios)}.proc-bar span.on{background:var(--fresa)}@keyframes p-copy{0%{opacity:0;transform:translateY(10px)}}.proc-static,.proc-static ol{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:20px}.proc-static li{display:grid;align-content:start;gap:8px}.proc-static .proc-stage{aspect-ratio:1}.proc-static-cup .proc-stage{aspect-ratio:4 / 5}.proc-static-cup ol{margin:0;gap:4px}.proc-static-cup ol .proc-panel p{min-height:0}.proc-static .proc-scene,.proc-static .proc-svg *,.proc-static .proc-panel *{animation:none!important}.proc-end{margin-top:20px;padding:24px;border-radius:28px;display:grid;gap:10px;justify-items:start}.proc-end h3{font:800 24px/28px var(--font-display);letter-spacing:-.02em}.proc-end p{color:var(--ink-3);margin-bottom:6px}@media(min-width:900px){.proc-track{margin:16px 0 0}.proc-sticky{flex-direction:row;gap:32px;padding:88px 0 28px}.proc-sticky .proc-panel{order:-1;width:360px;align-self:center;padding:24px}.proc-panel h3{font-size:34px;line-height:38px}.proc-panel p{font-size:18px;line-height:26px}.proc-static{grid-template-columns:repeat(3,1fr)}.proc-static-cup{grid-column:1 / -1;grid-template-columns:1fr 1fr;align-items:center}.proc-static-cup .proc-stage{aspect-ratio:1}.proc-end{grid-template-columns:1fr auto;align-items:center}.proc-end p{margin:0}.proc-end .btn-wa{grid-area:1 / 2 / 3 / 3}}.p-plant,.p-pop,.p-sun,.p-farmer,.p-spin,.p-flow,.p-wobble,.p-bob,.p-whole,.p-split-l,.p-split-r,.p-knife,.p-ride,.p-ripen{transform-box:fill-box;transform-origin:center}.p-plant{transform-origin:50% 100%;animation:p-grow var(--dur-bounce) var(--ease-bounce) both;animation-delay:calc(var(--i) * 45ms)}.p-pop,.p-ripen{animation:p-pop var(--dur-pop) var(--ease-pop) both;animation-delay:calc(.42s + var(--i) * 45ms)}.p-skin{animation:p-ripen .9s var(--ease-ios) both;animation-delay:calc(.56s + var(--i) * 45ms)}.p-sun{animation:p-breathe 3s ease-in-out infinite alternate}.p-farmer{animation:p-bob 1.6s ease-in-out infinite alternate}.p-cloud{animation:p-cloud 24s linear infinite;animation-delay:calc(var(--i, 0) * -8s)}.p-bird{animation:p-bird 14s linear infinite}@keyframes p-grow{0%{transform:scale(0)}}@keyframes p-pop{0%{transform:scale(0);opacity:0}}@keyframes p-ripen{0%{fill:#b9d98c}}@keyframes p-breathe{to{transform:scale(1.1);opacity:.8}}@keyframes p-bob{to{transform:translateY(-4px) rotate(2deg)}}@keyframes p-cloud{0%{transform:translate(80px)}to{transform:translate(-380px)}}@keyframes p-bird{0%{transform:translate(120px,20px)}to{transform:translate(-220px,-30px)}}.p-truck{animation:p-arrive var(--dur-gentle) var(--ease-gentle) both}.p-ride{animation:p-jiggle .55s ease-in-out infinite alternate}.p-spin{animation:p-spin .7s linear infinite}.p-dash{animation:p-dash .5s linear infinite}.p-far{animation:p-far 30s linear infinite}.p-mid{animation:p-mid 9s linear infinite}.p-puff{animation:p-puff 1.1s ease-out infinite;animation-delay:calc(var(--i, 0) * .55s)}@keyframes p-arrive{0%{transform:translate(-360px)}}@keyframes p-jiggle{to{transform:translateY(-1.5px)}}@keyframes p-spin{to{transform:rotate(360deg)}}@keyframes p-dash{to{stroke-dashoffset:-52}}@keyframes p-far{to{transform:translate(-160px)}}@keyframes p-mid{to{transform:translate(-180px)}}@keyframes p-puff{0%{transform:translate(0) scale(.4);opacity:.5}to{transform:translate(-40px,-18px) scale(1.6);opacity:0}}.p-flow{transform-origin:50% 0;animation:p-flow var(--dur-drop) var(--ease-drop) both}.p-wobble{animation:p-wobble .35s ease-in-out infinite alternate}.p-drop{animation:p-drop .9s ease-out infinite;animation-delay:calc(var(--i, 0) * .3s)}.p-bob{animation:p-bob 1.8s ease-in-out infinite alternate}.p-alt{animation-delay:-.9s}.p-bubble{animation:p-bubble 2.2s ease-in infinite;animation-delay:calc(var(--i, 0) * .4s)}@keyframes p-flow{0%{transform:scaleY(0)}}@keyframes p-wobble{to{transform:scaleX(1.18)}}@keyframes p-drop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-30px);opacity:0}}@keyframes p-bubble{0%{transform:translateY(0);opacity:0}15%{opacity:.9}to{transform:translateY(-70px);opacity:0}}.p-whole{opacity:0;animation:p-hide 1ms step-end .5s both}.p-split-l{transform:translate(-14px,2px) rotate(-9deg);animation:p-split-l var(--dur-bounce) var(--ease-bounce) .5s both}.p-split-r{transform:translate(26px,2px) rotate(10deg);animation:p-split-r var(--dur-bounce) var(--ease-bounce) .5s both}.p-knife{transform-origin:80% 50%;transform:translateY(-16px) rotate(-3deg);animation:p-knife .9s var(--ease-drop) both}@keyframes p-hide{0%{opacity:1}to{opacity:0}}@keyframes p-split-l{0%{transform:none;opacity:0}2%{opacity:1}}@keyframes p-split-r{0%{transform:none;opacity:0}2%{opacity:1}}@keyframes p-knife{0%{transform:translateY(-120px) rotate(-8deg)}55%{transform:translate(0) rotate(0)}to{transform:translateY(-16px) rotate(-3deg)}}