読了プログレスバー Scroll progress bar

「読了プログレスバー（Scroll progress bar）」の動きを実装してください。
OmochiX Learn の動く見本 #015（スクロール演出）です。

頼み方の例: 記事ページの上に、読んだ割合を示す細いプログレスバーを付けて。
どんな動きか: どこまで読んだかが上部の線で分かる
見本で起きること: ページが下へ流れるのに合わせて、上端の細い線が左から右へ伸びていきます。
仕様:
- position: fixed; top: 0 の高さ3〜4pxの線。幅は transform: scaleX() で変える（widthを変えない）
- 進捗 = scrollY / (document高さ − 画面高さ)。scrollイベント（passive）か、CSSの animation-timeline: scroll() が使えるならそれを優先
- 色はアクセントカラー。本文の邪魔にならない太さにする
- role="progressbar" と aria-valuenow を付ける
使いどころ: 長文記事・ドキュメント・チュートリアルの読了感。
調整した値:
- バーの色: #6e4bff（既定）
- バーの太さは4px（既定）
- 読み始めから読み終わりまでの1周期は4.5s（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/scroll-progress/

<!-- 読了プログレスバー (Scroll progress bar) | OmochiX Learn 動く見本 #015 | https://omochix.com/learn/motion/scroll-progress/ -->

<style>
.sp{position:relative;width:240px;height:160px;overflow:hidden;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.sp__bar{position:absolute;z-index:1;top:0;left:0;height:var(--p-thick,4px);width:100%;background:var(--p-color,var(--primary));transform-origin:left;animation:sp-bar var(--p-cycle,4.5s) cubic-bezier(.65,0,.35,1) infinite}
.sp__page{display:grid;gap:10px;padding:18px 16px;animation:sp-scroll var(--p-cycle,4.5s) cubic-bezier(.65,0,.35,1) infinite}
.sp__page i{display:block;height:10px;border-radius:5px;background:var(--line)}
.sp__page i:nth-child(3n){width:70%}
@keyframes sp-scroll{0%,12%{transform:translateY(0)}72%,88%{transform:translateY(-120px)}100%{transform:translateY(0)}}
@keyframes sp-bar{0%,12%{transform:scaleX(0)}72%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
</style>

<div class="sp"><span class="sp__bar"></span><div class="sp__page"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>