.cl-sheet{--sq:40px;--ride:45vh}@media (min-width:768px){.cl-sheet{--sq:56px}}.cl-move{grid-template-columns:var(--sq) minmax(0, 1fr);column-gap:20px;display:grid}@media (min-width:768px){.cl-move{column-gap:40px}}.cl-file{position:relative}.cl-file:after{content:"";top:var(--sq);background:var(--color-ink);width:1px;position:absolute;bottom:0;left:calc(50% - .5px)}.cl-start .cl-file:after{display:none}.cl-square{--tone:var(--color-sand-200);width:var(--sq);height:var(--sq);border:1px solid var(--color-ink);background:var(--tone);display:block}.cl-move:nth-child(2n) .cl-square{--tone:var(--color-sand-400)}.cl-rider{width:var(--sq);pointer-events:none;z-index:1;position:absolute;inset:0 auto 0 0}.cl-rider--trail{overflow:clip}.cl-slot{top:var(--ride);height:var(--sq);justify-content:center;align-items:flex-end;display:flex;position:sticky}.cl-slot picture{height:calc(var(--sq) * 1.5);margin-bottom:calc(var(--sq) * .2);display:block}.cl-rider--trail .cl-slot:before{content:"";background:var(--color-cobalt-600);width:2px;height:400vh;position:absolute;bottom:50%;left:calc(50% - 1px)}@media (prefers-reduced-motion:reduce){.cl-slot{position:relative;top:0}.cl-rider--trail{display:none}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.cl-square{animation:linear both cl-light;animation-timeline:view()}.cl-entry{animation:linear both cl-in;animation-timeline:view();animation-range:entry entry 30%}}}@keyframes cl-light{0%,48%{background:var(--tone)}50%,to{background:var(--color-cobalt-600)}}@keyframes cl-in{0%{opacity:0;transform:translateY(16px)}}