/*
 * Made by tools/meshcss (go run ./tools/meshcss > assets/static/mesh.css): do not edit by hand. The home page's "How a
 * message gets there", played out with CSS only (assets/templates/mesh.html): Play all, or one step chosen.
 */
.mesh-sim { margin-top: 28px; }
/* On a phone the picture stays in view while the steps scroll under it, so a step tapped plays where it can be seen
   (the 8 px ring is the band's colour, hiding the text that passes under). Side by side from 880 px. */
@media (max-width: 879.98px) { .mesh-stage { position: sticky; top: 8px; z-index: 1; box-shadow: 0 0 0 8px var(--surface); } }
@media (min-width: 880px) {
  .mesh-sim { display: grid; gap: 20px 40px; align-items: start; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .mesh-stage { grid-row: span 2; }
  .mesh-sim .mesh-steps, .mesh-sim .mesh-ctl { margin-top: 0; }
}
/* The radios stay in the middle of the window: tapping a step never scrolls the page to them (they sit before the picture). */
.mesh-sim > input.sr { position: fixed; top: 50%; left: 0; }
.mesh-stage { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; }
.mesh-stage text { font: 600 13px "IBM Plex Sans", system-ui, sans-serif; fill: var(--text2); text-anchor: middle; }
.mesh-stage .mphone rect { fill: var(--surface2); stroke: var(--line); stroke-width: 1.5; }
.mesh-stage .mphone.you rect { stroke: var(--accent); }
.mesh-stage .mphone.other rect { fill: var(--surface); }
.mesh-stage .link { stroke: var(--line); stroke-width: 2; stroke-dasharray: 1; }
.mesh-stage .r3 { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 1; }
.mesh-stage .ring { stroke: var(--teal); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.mesh-stage .glow { fill: var(--green); fill-opacity: 0.3; }
.mesh-stage .bubble { fill: var(--accent); }
.mesh-stage .bubble.carried { fill: var(--amber); }
.mesh-stage .ride .bubble { fill: var(--amber); }
.mesh-stage .lock rect { fill: var(--amber); }
.mesh-stage .lock path { stroke: var(--amber); stroke-width: 1.6; }
.mesh-stage .clock circle { fill: var(--bg); stroke: var(--warn); stroke-width: 1.6; }
.mesh-stage .clock path { stroke: var(--warn); stroke-width: 1.6; stroke-linecap: round; }
.mesh-stage .tick circle { fill: var(--green); }
.mesh-stage .tick path { stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mesh-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.mesh-steps li { display: block; }
.mesh-steps label { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; }
.mesh-steps label:hover { border-color: var(--line); }
.mesh-steps .n { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid; display: grid; place-items: center; font-weight: 600; }
.mesh-steps .t { display: grid; gap: 3px; }
.mesh-steps strong { font-size: 18px; font-weight: 600; color: var(--text); }
.mesh-steps .t span { color: var(--text2); }
.mesh-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mesh-ctl label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); cursor: pointer; font-weight: 600; }
.mesh-ctl .playing, .mesh-ctl .stopped { display: none; }
#mesh-all:checked ~ .mesh-ctl .mesh-all-btn, #mesh-stop:checked ~ .mesh-ctl .mesh-stop-btn { color: var(--muted); cursor: default; }
#mesh-all:checked ~ .mesh-ctl .play, #mesh-stop:checked ~ .mesh-ctl .stop { display: none; }
#mesh-all:checked ~ .mesh-ctl .playing, #mesh-stop:checked ~ .mesh-ctl .stopped { display: inline; }
#mesh-all:focus-visible ~ .mesh-ctl .mesh-all-btn, #mesh-stop:focus-visible ~ .mesh-ctl .mesh-stop-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
.mesh-stage .ring-a { transform:scale(1);opacity:0; }
@keyframes all-ra { 0% { transform:scale(1);opacity:0; } 1.29% { transform:scale(1);opacity:0; } 1.774% { transform:scale(1);opacity:0.8; } 5.806% { transform:scale(2.6);opacity:0; } 6.452% { transform:scale(1);opacity:0; } 6.935% { transform:scale(1);opacity:0.8; } 10.968% { transform:scale(2.6);opacity:0; } 19.355% { transform:scale(2.6);opacity:0; } 19.387% { transform:scale(1);opacity:0; } 100% { transform:scale(1);opacity:0; } }
@keyframes one-ra { 0% { transform:scale(1);opacity:0; } 6.667% { transform:scale(1);opacity:0; } 9.167% { transform:scale(1);opacity:0.8; } 30% { transform:scale(2.6);opacity:0; } 33.333% { transform:scale(1);opacity:0; } 35.833% { transform:scale(1);opacity:0.8; } 56.667% { transform:scale(2.6);opacity:0; } 100% { transform:scale(1);opacity:0; } }
#mesh-all:checked ~ .mesh-stage .ring-a { animation: all-ra 31s ease-in-out infinite; }
#mesh-1:checked ~ .mesh-stage .ring-a { animation: one-ra 6s ease-in-out infinite; }
.mesh-stage .ring-b { transform:scale(1);opacity:0; }
@keyframes all-rb { 0% { transform:scale(1);opacity:0; } 3.226% { transform:scale(1);opacity:0; } 3.71% { transform:scale(1);opacity:0.8; } 7.742% { transform:scale(2.6);opacity:0; } 8.387% { transform:scale(1);opacity:0; } 8.871% { transform:scale(1);opacity:0.8; } 12.903% { transform:scale(2.6);opacity:0; } 19.355% { transform:scale(2.6);opacity:0; } 19.387% { transform:scale(1);opacity:0; } 100% { transform:scale(1);opacity:0; } }
@keyframes one-rb { 0% { transform:scale(1);opacity:0; } 16.667% { transform:scale(1);opacity:0; } 19.167% { transform:scale(1);opacity:0.8; } 40% { transform:scale(2.6);opacity:0; } 43.333% { transform:scale(1);opacity:0; } 45.833% { transform:scale(1);opacity:0.8; } 66.667% { transform:scale(2.6);opacity:0; } 100% { transform:scale(1);opacity:0; } }
#mesh-all:checked ~ .mesh-stage .ring-b { animation: all-rb 31s ease-in-out infinite; }
#mesh-1:checked ~ .mesh-stage .ring-b { animation: one-rb 6s ease-in-out infinite; }
.mesh-stage .link { stroke-dashoffset:0;opacity:1; }
@keyframes all-ln { 0% { stroke-dashoffset:1;opacity:1; } 3.871% { stroke-dashoffset:1;opacity:1; } 10.323% { stroke-dashoffset:0;opacity:1; } 19.355% { stroke-dashoffset:0;opacity:1; } 19.387% { stroke-dashoffset:0;opacity:1; } 100% { stroke-dashoffset:0;opacity:1; } }
@keyframes one-ln { 0% { stroke-dashoffset:1;opacity:1; } 20% { stroke-dashoffset:1;opacity:1; } 53.333% { stroke-dashoffset:0;opacity:1; } 100% { stroke-dashoffset:0;opacity:1; } }
#mesh-all:checked ~ .mesh-stage .link { animation: all-ln 31s ease-in-out infinite; }
#mesh-1:checked ~ .mesh-stage .link { animation: one-ln 6s ease-in-out infinite; }
.mesh-stage .m2 { opacity:0;transform:translate(48px,112px); }
@keyframes all-m2 { 0% { opacity:0;transform:translate(48px,112px); } 20.935% { opacity:0;transform:translate(48px,112px); } 20.968% { opacity:0;transform:translate(48px,112px); } 21.935% { opacity:1;transform:translate(48px,112px); } 21.935% { opacity:1;transform:translate(48px,112px); } 23.226% { opacity:1;transform:translate(48px,112px); } 27.097% { opacity:1;transform:translate(130px,50px); } 28.71% { opacity:1;transform:translate(130px,50px); } 29.677% { opacity:0;transform:translate(130px,50px); } 38.71% { opacity:0;transform:translate(130px,50px); } 38.742% { opacity:0;transform:translate(48px,112px); } 100% { opacity:0;transform:translate(48px,112px); } }
@keyframes one-m2 { 0% { opacity:0;transform:translate(48px,112px); } 8.333% { opacity:0;transform:translate(48px,112px); } 13.333% { opacity:1;transform:translate(48px,112px); } 13.333% { opacity:1;transform:translate(48px,112px); } 20% { opacity:1;transform:translate(48px,112px); } 40% { opacity:1;transform:translate(130px,50px); } 48.333% { opacity:1;transform:translate(130px,50px); } 53.333% { opacity:0;transform:translate(130px,50px); } 100% { opacity:0;transform:translate(48px,112px); } }
#mesh-all:checked ~ .mesh-stage .m2 { animation: all-m2 31s ease-in-out infinite; }
#mesh-2:checked ~ .mesh-stage .m2 { animation: one-m2 6s ease-in-out infinite; }
.mesh-stage .glow-maya { opacity:0; }
@keyframes all-g2 { 0% { opacity:0; } 26.419% { opacity:0; } 26.452% { opacity:0; } 27.419% { opacity:1; } 29.677% { opacity:1; } 30.645% { opacity:0; } 38.71% { opacity:0; } 38.742% { opacity:0; } 100% { opacity:0; } }
@keyframes one-g2 { 0% { opacity:0; } 36.667% { opacity:0; } 41.667% { opacity:1; } 53.333% { opacity:1; } 58.333% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .glow-maya { animation: all-g2 31s ease-in-out infinite; }
#mesh-2:checked ~ .mesh-stage .glow-maya { animation: one-g2 6s ease-in-out infinite; }
.mesh-stage .tick2 { opacity:0; }
@keyframes all-t2 { 0% { opacity:0; } 28.032% { opacity:0; } 28.065% { opacity:0; } 29.032% { opacity:1; } 36.774% { opacity:1; } 37.742% { opacity:0; } 38.71% { opacity:0; } 38.742% { opacity:0; } 100% { opacity:0; } }
@keyframes one-t2 { 0% { opacity:0; } 45% { opacity:0; } 50% { opacity:1; } 90% { opacity:1; } 95% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .tick2 { animation: all-t2 31s ease-in-out infinite; }
#mesh-2:checked ~ .mesh-stage .tick2 { animation: one-t2 6s ease-in-out infinite; }
.mesh-stage .m3 { opacity:0;transform:translate(48px,112px); }
@keyframes all-m3 { 0% { opacity:0;transform:translate(48px,112px); } 39.645% { opacity:0;transform:translate(48px,112px); } 39.677% { opacity:0;transform:translate(48px,112px); } 40.645% { opacity:1;transform:translate(48px,112px); } 40.645% { opacity:1;transform:translate(48px,112px); } 41.935% { opacity:1;transform:translate(48px,112px); } 45.161% { opacity:1;transform:translate(132px,170px); } 47.742% { opacity:1;transform:translate(132px,170px); } 50.968% { opacity:1;transform:translate(220px,114px); } 53.548% { opacity:1;transform:translate(220px,114px); } 56.774% { opacity:1;transform:translate(312px,52px); } 58.065% { opacity:1;transform:translate(312px,52px); } 59.032% { opacity:0;transform:translate(312px,52px); } 67.742% { opacity:0;transform:translate(312px,52px); } 67.774% { opacity:0;transform:translate(48px,112px); } 100% { opacity:0;transform:translate(48px,112px); } }
@keyframes one-m3 { 0% { opacity:0;transform:translate(48px,112px); } 3.333% { opacity:0;transform:translate(48px,112px); } 6.667% { opacity:1;transform:translate(48px,112px); } 6.667% { opacity:1;transform:translate(48px,112px); } 11.111% { opacity:1;transform:translate(48px,112px); } 22.222% { opacity:1;transform:translate(132px,170px); } 31.111% { opacity:1;transform:translate(132px,170px); } 42.222% { opacity:1;transform:translate(220px,114px); } 51.111% { opacity:1;transform:translate(220px,114px); } 62.222% { opacity:1;transform:translate(312px,52px); } 66.667% { opacity:1;transform:translate(312px,52px); } 70% { opacity:0;transform:translate(312px,52px); } 100% { opacity:0;transform:translate(48px,112px); } }
#mesh-all:checked ~ .mesh-stage .m3 { animation: all-m3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .m3 { animation: one-m3 9s ease-in-out infinite; }
.mesh-stage .r3a { stroke-dashoffset:1;opacity:0; }
@keyframes all-ra3 { 0% { stroke-dashoffset:1;opacity:0; } 41.581% { stroke-dashoffset:1;opacity:0; } 41.613% { stroke-dashoffset:1;opacity:1; } 45.161% { stroke-dashoffset:0;opacity:1; } 65.161% { stroke-dashoffset:0;opacity:1; } 66.774% { stroke-dashoffset:0;opacity:0; } 67.742% { stroke-dashoffset:0;opacity:0; } 67.774% { stroke-dashoffset:1;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
@keyframes one-ra3 { 0% { stroke-dashoffset:1;opacity:0; } 10% { stroke-dashoffset:1;opacity:1; } 22.222% { stroke-dashoffset:0;opacity:1; } 91.111% { stroke-dashoffset:0;opacity:1; } 96.667% { stroke-dashoffset:0;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
#mesh-all:checked ~ .mesh-stage .r3a { animation: all-ra3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .r3a { animation: one-ra3 9s ease-in-out infinite; }
.mesh-stage .r3b { stroke-dashoffset:1;opacity:0; }
@keyframes all-rb3 { 0% { stroke-dashoffset:1;opacity:0; } 47.387% { stroke-dashoffset:1;opacity:0; } 47.419% { stroke-dashoffset:1;opacity:1; } 50.968% { stroke-dashoffset:0;opacity:1; } 65.161% { stroke-dashoffset:0;opacity:1; } 66.774% { stroke-dashoffset:0;opacity:0; } 67.742% { stroke-dashoffset:0;opacity:0; } 67.774% { stroke-dashoffset:1;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
@keyframes one-rb3 { 0% { stroke-dashoffset:1;opacity:0; } 30% { stroke-dashoffset:1;opacity:1; } 42.222% { stroke-dashoffset:0;opacity:1; } 91.111% { stroke-dashoffset:0;opacity:1; } 96.667% { stroke-dashoffset:0;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
#mesh-all:checked ~ .mesh-stage .r3b { animation: all-rb3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .r3b { animation: one-rb3 9s ease-in-out infinite; }
.mesh-stage .r3c { stroke-dashoffset:1;opacity:0; }
@keyframes all-rc3 { 0% { stroke-dashoffset:1;opacity:0; } 53.194% { stroke-dashoffset:1;opacity:0; } 53.226% { stroke-dashoffset:1;opacity:1; } 56.774% { stroke-dashoffset:0;opacity:1; } 65.161% { stroke-dashoffset:0;opacity:1; } 66.774% { stroke-dashoffset:0;opacity:0; } 67.742% { stroke-dashoffset:0;opacity:0; } 67.774% { stroke-dashoffset:1;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
@keyframes one-rc3 { 0% { stroke-dashoffset:1;opacity:0; } 50% { stroke-dashoffset:1;opacity:1; } 62.222% { stroke-dashoffset:0;opacity:1; } 91.111% { stroke-dashoffset:0;opacity:1; } 96.667% { stroke-dashoffset:0;opacity:0; } 100% { stroke-dashoffset:1;opacity:0; } }
#mesh-all:checked ~ .mesh-stage .r3c { animation: all-rc3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .r3c { animation: one-rc3 9s ease-in-out infinite; }
.mesh-stage .lock-c1 { opacity:0; }
@keyframes all-l1 { 0% { opacity:0; } 44.484% { opacity:0; } 44.516% { opacity:0; } 45.484% { opacity:1; } 65.806% { opacity:1; } 66.774% { opacity:0; } 67.742% { opacity:0; } 67.774% { opacity:0; } 100% { opacity:0; } }
@keyframes one-l1 { 0% { opacity:0; } 20% { opacity:0; } 23.333% { opacity:1; } 93.333% { opacity:1; } 96.667% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .lock-c1 { animation: all-l1 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .lock-c1 { animation: one-l1 9s ease-in-out infinite; }
.mesh-stage .lock-c2 { opacity:0; }
@keyframes all-l2 { 0% { opacity:0; } 50.29% { opacity:0; } 50.323% { opacity:0; } 51.29% { opacity:1; } 65.806% { opacity:1; } 66.774% { opacity:0; } 67.742% { opacity:0; } 67.774% { opacity:0; } 100% { opacity:0; } }
@keyframes one-l2 { 0% { opacity:0; } 40% { opacity:0; } 43.333% { opacity:1; } 93.333% { opacity:1; } 96.667% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .lock-c2 { animation: all-l2 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .lock-c2 { animation: one-l2 9s ease-in-out infinite; }
.mesh-stage .glow-tomas { opacity:0; }
@keyframes all-g3 { 0% { opacity:0; } 56.097% { opacity:0; } 56.129% { opacity:0; } 57.097% { opacity:1; } 59.355% { opacity:1; } 60.323% { opacity:0; } 67.742% { opacity:0; } 67.774% { opacity:0; } 100% { opacity:0; } }
@keyframes one-g3 { 0% { opacity:0; } 60% { opacity:0; } 63.333% { opacity:1; } 71.111% { opacity:1; } 74.444% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .glow-tomas { animation: all-g3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .glow-tomas { animation: one-g3 9s ease-in-out infinite; }
.mesh-stage .tick3 { opacity:0; }
@keyframes all-t3 { 0% { opacity:0; } 57.71% { opacity:0; } 57.742% { opacity:0; } 58.71% { opacity:1; } 65.806% { opacity:1; } 66.774% { opacity:0; } 67.742% { opacity:0; } 67.774% { opacity:0; } 100% { opacity:0; } }
@keyframes one-t3 { 0% { opacity:0; } 65.556% { opacity:0; } 68.889% { opacity:1; } 93.333% { opacity:1; } 96.667% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .tick3 { animation: all-t3 31s ease-in-out infinite; }
#mesh-3:checked ~ .mesh-stage .tick3 { animation: one-t3 9s ease-in-out infinite; }
.mesh-stage .m4 { opacity:0;transform:translate(48px,112px); }
@keyframes all-m4 { 0% { opacity:0;transform:translate(48px,112px); } 68.677% { opacity:0;transform:translate(48px,112px); } 68.71% { opacity:0;transform:translate(48px,112px); } 69.677% { opacity:1;transform:translate(48px,112px); } 69.677% { opacity:1;transform:translate(48px,112px); } 79.355% { opacity:1;transform:translate(48px,112px); } 81.29% { opacity:1;transform:translate(30px,180px); } 81.29% { opacity:1;transform:translate(30px,180px); } 82.258% { opacity:0;transform:translate(30px,180px); } 100% { opacity:0;transform:translate(48px,112px); } }
@keyframes one-m4 { 0% { opacity:0;transform:translate(48px,112px); } 3% { opacity:0;transform:translate(48px,112px); } 6% { opacity:1;transform:translate(48px,112px); } 6% { opacity:1;transform:translate(48px,112px); } 36% { opacity:1;transform:translate(48px,112px); } 42% { opacity:1;transform:translate(30px,180px); } 42% { opacity:1;transform:translate(30px,180px); } 45% { opacity:0;transform:translate(30px,180px); } 100% { opacity:0;transform:translate(48px,112px); } }
#mesh-all:checked ~ .mesh-stage .m4 { animation: all-m4 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .m4 { animation: one-m4 10s ease-in-out infinite; }
.mesh-stage .clock { opacity:0; }
@keyframes all-ck { 0% { opacity:0; } 69.968% { opacity:0; } 70% { opacity:0; } 70.968% { opacity:1; } 79.355% { opacity:1; } 80.323% { opacity:0; } 100% { opacity:0; } }
@keyframes one-ck { 0% { opacity:0; } 7% { opacity:0; } 10% { opacity:1; } 36% { opacity:1; } 39% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .clock { animation: all-ck 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .clock { animation: one-ck 10s ease-in-out infinite; }
.mesh-stage .walker { opacity:0;transform:translate(-24px,200px); }
@keyframes all-wk { 0% { opacity:0;transform:translate(-24px,200px); } 70.613% { opacity:0;transform:translate(-24px,200px); } 70.645% { opacity:0;transform:translate(-24px,200px); } 71.613% { opacity:1;transform:translate(-24px,200px); } 78.065% { opacity:1;transform:translate(30px,180px); } 81.935% { opacity:1;transform:translate(30px,180px); } 85.806% { opacity:1;transform:translate(90px,204px); } 90.323% { opacity:1;transform:translate(264px,210px); } 97.742% { opacity:1;transform:translate(264px,210px); } 99.032% { opacity:0;transform:translate(264px,210px); } 100% { opacity:0;transform:translate(-24px,200px); } }
@keyframes one-wk { 0% { opacity:0;transform:translate(-24px,200px); } 9% { opacity:0;transform:translate(-24px,200px); } 12% { opacity:1;transform:translate(-24px,200px); } 32% { opacity:1;transform:translate(30px,180px); } 44% { opacity:1;transform:translate(30px,180px); } 56% { opacity:1;transform:translate(90px,204px); } 70% { opacity:1;transform:translate(264px,210px); } 93% { opacity:1;transform:translate(264px,210px); } 97% { opacity:0;transform:translate(264px,210px); } 100% { opacity:0;transform:translate(-24px,200px); } }
#mesh-all:checked ~ .mesh-stage .walker { animation: all-wk 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .walker { animation: one-wk 10s ease-in-out infinite; }
.mesh-stage .ride { opacity:0; }
@keyframes all-rd { 0% { opacity:0; } 81.258% { opacity:0; } 81.29% { opacity:0; } 81.613% { opacity:1; } 90.968% { opacity:1; } 91.29% { opacity:0; } 100% { opacity:0; } }
@keyframes one-rd { 0% { opacity:0; } 42% { opacity:0; } 43% { opacity:1; } 72% { opacity:1; } 73% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .ride { animation: all-rd 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .ride { animation: one-rd 10s ease-in-out infinite; }
.mesh-stage .walk-lock { opacity:0; }
@keyframes all-wl { 0% { opacity:0; } 80.935% { opacity:0; } 80.968% { opacity:0; } 81.935% { opacity:1; } 90.968% { opacity:1; } 91.935% { opacity:0; } 100% { opacity:0; } }
@keyframes one-wl { 0% { opacity:0; } 41% { opacity:0; } 44% { opacity:1; } 72% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .walk-lock { animation: all-wl 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .walk-lock { animation: one-wl 10s ease-in-out infinite; }
.mesh-stage .m4b { opacity:0;transform:translate(264px,210px); }
@keyframes all-m4b { 0% { opacity:0;transform:translate(264px,210px); } 90.29% { opacity:0;transform:translate(264px,210px); } 90.323% { opacity:0;transform:translate(264px,210px); } 91.29% { opacity:1;transform:translate(264px,210px); } 91.29% { opacity:1;transform:translate(264px,210px); } 91.613% { opacity:1;transform:translate(264px,210px); } 93.548% { opacity:1;transform:translate(312px,178px); } 94.516% { opacity:1;transform:translate(312px,178px); } 95.484% { opacity:0;transform:translate(312px,178px); } 100% { opacity:0;transform:translate(264px,210px); } }
@keyframes one-m4b { 0% { opacity:0;transform:translate(264px,210px); } 70% { opacity:0;transform:translate(264px,210px); } 73% { opacity:1;transform:translate(264px,210px); } 73% { opacity:1;transform:translate(264px,210px); } 74% { opacity:1;transform:translate(264px,210px); } 80% { opacity:1;transform:translate(312px,178px); } 83% { opacity:1;transform:translate(312px,178px); } 86% { opacity:0;transform:translate(312px,178px); } 100% { opacity:0;transform:translate(264px,210px); } }
#mesh-all:checked ~ .mesh-stage .m4b { animation: all-m4b 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .m4b { animation: one-m4b 10s ease-in-out infinite; }
.mesh-stage .glow-lena { opacity:0; }
@keyframes all-g4 { 0% { opacity:0; } 92.871% { opacity:0; } 92.903% { opacity:0; } 93.871% { opacity:1; } 96.129% { opacity:1; } 97.097% { opacity:0; } 100% { opacity:0; } }
@keyframes one-g4 { 0% { opacity:0; } 78% { opacity:0; } 81% { opacity:1; } 88% { opacity:1; } 91% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .glow-lena { animation: all-g4 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .glow-lena { animation: one-g4 10s ease-in-out infinite; }
.mesh-stage .tick4 { opacity:0; }
@keyframes all-t4 { 0% { opacity:0; } 94.484% { opacity:0; } 94.516% { opacity:0; } 95.484% { opacity:1; } 98.71% { opacity:1; } 99.677% { opacity:0; } 100% { opacity:0; } }
@keyframes one-t4 { 0% { opacity:0; } 83% { opacity:0; } 86% { opacity:1; } 96% { opacity:1; } 99% { opacity:0; } 100% { opacity:0; } }
#mesh-all:checked ~ .mesh-stage .tick4 { animation: all-t4 31s ease-in-out infinite; }
#mesh-4:checked ~ .mesh-stage .tick4 { animation: one-t4 10s ease-in-out infinite; }
@keyframes all-step1 { 0% { background-color:transparent;border-color:transparent; } 0% { background-color:var(--surface2);border-color:var(--line); } 19.323% { background-color:var(--surface2);border-color:var(--line); } 19.355% { background-color:transparent;border-color:transparent; } 100% { background-color:transparent;border-color:transparent; } }
#mesh-all:checked ~ .mesh-steps li:nth-child(1) label { animation: all-step1 31s step-end infinite; }
#mesh-1:checked ~ .mesh-steps li:nth-child(1) label { background-color:var(--surface2);border-color:var(--line); }
#mesh-1:focus-visible ~ .mesh-steps label[for="mesh-1"] { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes all-step2 { 0% { background-color:transparent;border-color:transparent; } 19.323% { background-color:transparent;border-color:transparent; } 19.355% { background-color:var(--surface2);border-color:var(--line); } 38.677% { background-color:var(--surface2);border-color:var(--line); } 38.71% { background-color:transparent;border-color:transparent; } 100% { background-color:transparent;border-color:transparent; } }
#mesh-all:checked ~ .mesh-steps li:nth-child(2) label { animation: all-step2 31s step-end infinite; }
#mesh-2:checked ~ .mesh-steps li:nth-child(2) label { background-color:var(--surface2);border-color:var(--line); }
#mesh-2:focus-visible ~ .mesh-steps label[for="mesh-2"] { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes all-step3 { 0% { background-color:transparent;border-color:transparent; } 38.677% { background-color:transparent;border-color:transparent; } 38.71% { background-color:var(--surface2);border-color:var(--line); } 67.71% { background-color:var(--surface2);border-color:var(--line); } 67.742% { background-color:transparent;border-color:transparent; } 100% { background-color:transparent;border-color:transparent; } }
#mesh-all:checked ~ .mesh-steps li:nth-child(3) label { animation: all-step3 31s step-end infinite; }
#mesh-3:checked ~ .mesh-steps li:nth-child(3) label { background-color:var(--surface2);border-color:var(--line); }
#mesh-3:focus-visible ~ .mesh-steps label[for="mesh-3"] { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes all-step4 { 0% { background-color:transparent;border-color:transparent; } 67.71% { background-color:transparent;border-color:transparent; } 67.742% { background-color:var(--surface2);border-color:var(--line); } 99.968% { background-color:var(--surface2);border-color:var(--line); } }
#mesh-all:checked ~ .mesh-steps li:nth-child(4) label { animation: all-step4 31s step-end infinite; }
#mesh-4:checked ~ .mesh-steps li:nth-child(4) label { background-color:var(--surface2);border-color:var(--line); }
#mesh-4:focus-visible ~ .mesh-steps label[for="mesh-4"] { outline: 3px solid var(--accent); outline-offset: 2px; }
#mesh-stop:checked ~ .mesh-stage .r3 { stroke-dashoffset: 0; opacity: 1; }
#mesh-stop:checked ~ .mesh-stage .lock-c1, #mesh-stop:checked ~ .mesh-stage .lock-c2 { opacity: 1; }
/* Still, for those who ask for less motion: the links, the carried route and its locks; the steps as plain text. */
@media (prefers-reduced-motion: reduce) {
  .mesh-stage * { animation: none !important; }
  .mesh-stage .r3 { stroke-dashoffset: 0; opacity: 1; }
  .mesh-stage .lock-c1, .mesh-stage .lock-c2 { opacity: 1; }
  .mesh-steps label { animation: none !important; cursor: default; background-color: transparent !important; border-color: transparent !important; }
  .mesh-sim > input.sr, .mesh-ctl { display: none; }
}