# 数が増える — Style Reference
> 灰白の紙に、黒い縁と金の影を持つドラムが9本並び、光の速さ 299,792,458 m/s を桁ごとに回して数え上げる。

**Theme:** light(下の区画のみ dark)  **Series:** PARTS 066  **World:** 光の速さと、光が月や太陽に届くまでの秒数を、事実値だけで見せる。

## Concept
数字を、機械式オドメーターのように各桁が物として回る様子で見せる。下の桁は速く回ってぼけ、上の桁は1つ下の桁が 9→0 に送るときだけ動く。読み込み3秒後の静止画では、上の桁はくっきり、下の桁は回転のぼけと半分ずれた数字が見える。置く数字は定義値と、そこから割り算で出る秒数だけ。

## Signature Technique
DOM と CSS transform のみ。1桁 = `overflow:hidden` の枠 + 0〜9,0 の11個を縦に並べた帯。

- **桁の位置(オドメーター式)**
```js
function digitPos(v, k) {               // k = 桁(0 が一の位)
  if (k === 0) return v % 10;
  const d = Math.floor(v / 10 ** k) % 10;
  return d + clamp(digitPos(v, k - 1) - 9, 0, 1); // 下の桁が 9→10 の間だけ繰り上がりで回る
}
strip.style.transform = `translateY(${-pos / 11 * 100}%)`;
```
- **ぼかし**: 1フレームの移動量 × 3.2 を `filter: blur()` に(上限 2.4px)。速い桁だけぼける。
- **ヒーロー**: 読み込み 0.3 秒後から 7.5 秒、easeOutQuart で 0 → 299,792,458。
- **スクロール区画**: 230vh の区画に sticky の中身。進み具合 `sp = -top / ((高さ - 画面高) × 0.78)`。3つのカウンターは開始を 0 / 0.12 / 0.24 ずらし、easeInOutCubic の目標値へ毎フレーム 18% ずつ追う(回転に慣性が出る)。
- 小数はすべて整数で持ち、`data-dec` 桁目の前に小数点を差し込む(1.28 秒 = 128、dec 2)。
- ドラムの丸みは枠の `::after` に上下端の暗い線形グラデーション(明るい区画は α .22 → 26% で 0、暗い区画は α .55 → 28% で 0)。
- rAF 1本。動く値もぼけも無くなれば止まり、スクロールで再開。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #e9ebef | 地 |
| --card | #fbfbfc | ドラムの面(明)、暗い区画の文字 |
| --ink | #0c0d10 | 数字、枠線、暗い区画の地 |
| --mute | #5d6170 | 本文、ラベル |
| --gold | #d9b51f | ドラムの影と単位ラベル、進行バー |
| --gold-d | #a8880c | 暗い区画でのドラムの影 |
| drum-dark | #16181e | 暗い区画のドラム面 |
| rule-dark | #2b2e37 | 暗い区画の罫線、進行バーの地 |
| edge-dark | #3a3e4a | 暗い区画のドラムの枠線 |
| mute-dark | #9ba0b2 | 暗い区画の小見出しと補足、タグ(difference で重ねる) |
| --lilac | #d9d3ea | 予備(CSS 変数のみ) |

## Typography
- 数字: Archivo 850、`wdth` 72(縦長の詰まった字形)、tabular-nums、行高 1。ヒーロー clamp(44px, 11.4vw, 184px)、区画 clamp(44px, 7vw, 108px)(760px 未満 clamp(40px, 13vw, 64px))。単位ラベルは数字の 0.22em。
- 見出し: Zen Kaku Gothic New。ヒーロー 700 clamp(22px, 2.4vw, 34px) / 行間 1.3 / 字間 −0.01em、区画 500 clamp(24px, 3vw, 44px) / 行間 1.3 / 字間 −0.01em。
- 区画の行ラベル: clamp(16px, 1.5vw, 20px)、行間 1.6。補足は 12px、字間 0.06em。
- 締めの1行: 500、clamp(20px, 2.2vw, 30px)、行間 1.5、24em まで。
- ラベル・単位: IBM Plex Mono 400/500、11〜13px、字間 0.06〜0.16em(eyebrow 12px 0.16em、区画の小見出し 13px 0.14em、上端 12px 0.08em、タグ 11px 0.1em)、大文字。
- 本文: Zen Kaku Gothic New 400、15px、行間 1.85、30em まで。

## Spacing & Layout
- 左右余白 clamp(16px, 5vw, 72px)。ヒーローは 100svh の縦中央寄せ、要素間 clamp(18px, 3vh, 32px)、上 84px(+safe-area)・下 110px。
- ドラム間 0.06em、影のずれ 0.05em(字の大きさに比例)。
- 区画: sticky の中身は上下 72px、要素間 clamp(24px, 5vh, 56px)。行どうしの間と行の下余白は clamp(14px, 2.4vh, 26px)。
- 区画の行: 2列グリッド(`minmax(9em, 1fr) auto`、間隔 20px、ラベル / 数字右寄せ)、下に 1px 罫線。760px 未満は1列(間隔 10px)で数字左寄せ、上端の左ラベルを隠し、タグを縦積み。
- 締め: 上 clamp(90px, 16vh, 160px)・下 120px。

## Motion
- 自動再生はヒーローのみ、1回だけ。7.5 秒 easeOutQuart。
- スクロール区画は easeInOutCubic + 18% 追従。
- reduced-motion: ヒーローは最終値で表示、区画は入った瞬間に目標を最終値にし、18% 追従で移る。ぼかしなし。

## Components
- **hero**: 上端に定義式、ラベル、見出し、ドラム列 + 金の単位、短文。
- **track**: 黒地。見出し、進行バー、3行(赤道1周 0.13 秒 / 月 1.28 秒 / 太陽 499.0 秒)。
- **close**: 1行「太陽の光は、8分19秒前に出た光。」
- **tag**: 操作説明と `VALE / PARTS 066 / 数が増える`。

## Do / Don't
Do
- 数字は定義値か、出典の分かる値の計算結果だけにする。
- 上の桁は繰り上がりのときだけ動かす(全桁が同時に滑ると桁送りに見えない)。
- ドラムの数と最終値の桁数を一致させる。

Don't
- 「満足度 98%」のような根拠のない数字を置かない。
- 全桁をぼかさない。速い桁だけ。
- 数え上げを繰り返し再生しない。

## References
- **How Many Plants**: 一色の金と硬いオフセット影で紙の上の物に見せる考え方。クリーム地は使わず、冷たい灰白にした。
- **UGLYCASH**: すべての面を黒い細線で縁取るステッカー的な輪郭。ドラムの枠と単位ラベルに使い、蛍光色は使わない。

## Usage
1. HTML: `<span class="odo" data-to="整数値" data-dec="小数桁" data-unit="単位" data-dur="秒" data-auto></span>`。`data-auto` があれば読み込み時に再生、無ければスクロール区画 `#track` の進み具合で回る。`data-lag` で開始をずらす。
2. CSS: `.odo` `.cell` `.strip` `.sep` `.unit` を移す。暗い地では `.track .cell` の上書きも。
3. JS: IIFE をそのまま移す。`#track` と `#bar` が無いページでは該当行を削る。
4. パラメータ(`P`): `AUTO_DELAY` 再生開始の遅れ / `BLUR_MAX` ぼかし上限 / `BLUR_GAIN` 移動量→ぼかし係数 / `SCROLL_SPAN` 数え終わるまでのスクロール割合。
5. 読み上げ用に `aria-label` へ最終値を書く(ドラムは `aria-hidden`)。