.mech{fill:none;width:100%;height:auto;stroke:var(--on-dark);stroke-width:2px;stroke-linecap:square;stroke-linejoin:round;overflow:visible}.mech .m-ground{stroke:var(--line-strong);stroke-dasharray:3 9}.mech .m-truck{stroke:var(--muted-dark)}.mech .m-cut{stroke-dasharray:10 8}.mech .m-floor{stroke:var(--line-strong)}.mech .m-pile{stroke:var(--on-dark);stroke-width:2px}.mech .m-heap{stroke:var(--on-dark);transform-box:view-box;transform-origin:1100px 452px;display:none}.mech .m-sheet{fill:none;stroke:var(--on-dark);stroke-width:8px;transform-origin:1094px 370px}.mech .m-treads{transform-origin:1094px 370px;stroke:var(--ink);stroke-width:4px;stroke-linecap:butt;stroke-dasharray:14 26;stroke-opacity:.85}.mech .m-drum,.mech .m-brace,.mech .m-bracket{stroke:var(--amber);stroke-width:3px}.mech .m-bracket,.mech .m-drum circle:first-child{fill:var(--ink)}.mech .m-drum{transform-origin:1072px 382px}.mech .m-remote rect{fill:var(--ink);stroke:var(--on-dark);stroke-width:3px}.mech .m-btn{fill:var(--amber);stroke:none}.mech .m-signal{stroke:var(--amber);stroke-width:2px;stroke-dasharray:4 12}.mech .m-label path{stroke:var(--on-dark);stroke-width:1.5px}.mech .m-label circle{fill:var(--ink);stroke:var(--amber);stroke-width:2.5px}.mech .m-label text{fill:var(--on-dark);stroke:none;font-family:var(--mono);text-anchor:middle;font-size:22px;font-weight:500}.how-track{position:relative}.how-stage{gap:clamp(1.5rem,4vw,3rem);padding-block:1rem 2rem;display:grid}.how-diagram{border-block:1px solid var(--line);padding-block:1.5rem;overflow:hidden}.how-diagram .mech{width:max(100%,46rem);max-width:none;margin-left:min(0px,100% - 46rem)}.how-steps{gap:2rem;display:grid}.how-step{grid-template-columns:auto 1fr;align-items:start;column-gap:1.25rem;display:grid}.how-n{color:#0000;-webkit-text-stroke:2px var(--amber);grid-row:span 2;font-size:clamp(3.2rem,8vw,6rem)}.how-step .lead{grid-column:2;margin-top:.5rem}.how-legend{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);gap:.4rem 2rem;margin-top:2rem;font-size:.8rem;display:grid}.how-legend b{border:2px solid var(--amber);width:1.5rem;height:1.5rem;color:var(--on-dark);border-radius:50%;place-items:center;margin-right:.5rem;font-weight:500;display:inline-grid}.how-note{letter-spacing:.06em;color:var(--muted-dark);margin-top:1rem;font-size:.78rem}@media (width>=52rem){.how-legend{grid-template-columns:1fr 1fr}}@media (width>=70rem){.how-stage{grid-template-columns:1.15fr .85fr;align-items:center}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.how-track{view-timeline:--how block;height:440vh}.how-stage{top:var(--header-h);height:calc(100svh - var(--header-h));grid-template-rows:minmax(0,auto) auto;grid-template-columns:1fr;align-content:center;padding-block:.5rem;position:sticky}.how-diagram{align-self:end}.how-copy{position:relative}.how-steps{min-height:11.5rem;display:block;position:relative}.how-step{opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--how;animation-range:cover 19.2% cover 80.8%;position:absolute;inset:0 0 auto}.how-step-1{animation-name:step-1}.how-step-2{animation-name:step-2}.how-step-3{animation-name:step-3}.how-step-4{animation-name:step-4}.how-legend{grid-template-columns:1fr 1fr;margin:1rem 0 0;font-size:.68rem}.how-note{margin-top:.75rem;font-size:.66rem}@media (width>=70rem){.how-stage{grid-template-rows:auto;grid-template-columns:1.25fr .75fr;align-items:center}.how-diagram{align-self:center}.how-steps{min-height:13rem}.how-legend{grid-template-columns:1fr;margin-top:2rem;font-size:.78rem}.how-note{margin-top:1.5rem;font-size:.74rem}}.how-stage .mech :is(.m-mount,.m-sheet,.m-pile-g,.m-heap,.m-drum,.m-treads,.m-label){animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--how;animation-range:cover 19.2% cover 80.8%}.how-stage .mech .m-mount{animation-name:m-mount}.how-stage .mech .m-sheet{animation-name:m-sheet}.how-stage .mech .m-pile-g{animation-name:m-pile-g}.how-stage .mech .m-heap{animation-name:m-heap;display:inline}.how-stage .mech .m-treads{animation-name:m-treads}.how-stage .mech .m-drum{animation-name:m-drum}.how-stage .mech .m-label-a,.how-stage .mech .m-label-c{animation-name:m-label-ac}.how-stage .mech .m-label-b{animation-name:m-label-b}.how-stage .mech .m-label-d{animation-name:m-label-d}.how-stage .mech .m-signal{animation:1.2s linear infinite m-signal}}}@keyframes step-1{0%{opacity:0;transform:translateY(1.5rem)}3%,19%{opacity:1;transform:none}22%,to{opacity:0;transform:translateY(-1.5rem)}}@keyframes step-2{0%,24%{opacity:0;transform:translateY(1.5rem)}28%,41%{opacity:1;transform:none}44%,to{opacity:0;transform:translateY(-1.5rem)}}@keyframes step-3{0%,47%{opacity:0;transform:translateY(1.5rem)}51%,58%{opacity:1;transform:none}61%,to{opacity:0;transform:translateY(-1.5rem)}}@keyframes step-4{0%,64%{opacity:0;transform:translateY(1.5rem)}68%,to{opacity:1;transform:none}}@keyframes m-mount{0%{opacity:0;transform:translate(150px)}18%,to{opacity:1;transform:none}}@keyframes m-sheet{0%,22%{transform:scaleX(0)}44%,to{transform:scaleX(1)}}@keyframes m-treads{0%,22%{stroke-dashoffset:0;transform:scaleX(0)}44%,62%{stroke-dashoffset:0;transform:scaleX(1)}to{stroke-dashoffset:-520px;transform:scaleX(1)}}@keyframes m-pile-g{0%,46%{opacity:0;transform-origin:590px 324px;transform:scaleY(0)}58%{opacity:1;transform-origin:590px 324px;transform:scaleY(1)}64%{opacity:1;transform-origin:590px 324px;transform:translate(0)scaleY(1)}97%,to{opacity:0;transform-origin:590px 324px;transform:translate(430px)scaleY(.25)}}@keyframes m-heap{0%,66%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes m-drum{0%,62%{transform:rotate(0)}to{transform:rotate(1080deg)}}@keyframes m-label-ac{0%,16%{opacity:0}22%,to{opacity:1}}@keyframes m-label-b{0%,40%{opacity:0}46%,to{opacity:1}}@keyframes m-label-d{0%,60%{opacity:0}66%,to{opacity:1}}@keyframes m-signal{to{stroke-dashoffset:-32px}}