要素の並び順と兄弟要素の総数を<integer>として返すCSSの関数です。並び順に応じたアニメーションの遅延や、項目数から逆算するレイアウトをCSSだけで書けます。
style、script、display:noneの項目を含むリストに、sibling-index()の値を表示しています。画面に出ない要素も番号を消費するので、見えている番号が飛びます。
見えているものだけだと番号は2、3、5、7と飛びます。スイッチを入れると、1の<style>、4のdisplay: noneな項目、6の<script>が現れて番号がつながります。コメントとテキストノードは番号を消費しません。
animation-delayをsibling-index()から計算しています。項目数を変えても、インラインのstyleで番号を配り直すことなく遅延が付き直します。
遅延はanimation-delay: calc(sibling-index() * 90ms)、行頭の番号はcounter-resetに渡したsibling-index()です。項目数を変えても、マークアップ側で番号を配り直す必要はありません。
幅をsibling-count()で等分し、高さをsibling-index()から決めています。先頭に項目を追加すると、後続の番号が繰り上がって高さが変わります。
幅はcalc(100% / sibling-count())、高さは@propertyで登録した--scid-bar-indexにsibling-index()を入れて内側のバーへ渡しています。ラベルの数字もcounter-resetに渡したsibling-index()です。先頭に追加すると後続の番号が繰り上がり、高さがそのまま追従します。