:root{
  --bg:#fbfaf8; --fg:#1f2328; --muted:#5a6472; --line:#e3e0da;
  /* 表の枠線。--line は区切りとして目立たせない濃さにしているため（地色比
     約1.1）、格子を組むと表の形が見えない。枠線は地色比 約2.9 を取る。 */
  --line-strong:#9a948a;
  --accent:#2f6f6a; --accent-weak:#e8f1f0;
  /* 機能を示す帯（.feature）。地色との差を保ちつつ、面積が広いので
     まぶしくならない濃さにする。明暗で別々に持つ。 */
  --feature-bg:#2f6f6a; --feature-fg:#f4fbfa;
  /* 行全体を塗る用（面積が広いので淡く） */
  --ins-bg:#dcf3e4; --ins-fg:#1a7f37; --del-bg:#fbdfe1; --del-fg:#b3202c;
  /* 文中の数文字を塗る用（面積が狭いので濃く） */
  --ins-mark-bg:#83d9a4; --ins-mark-fg:#08381a;
  --del-mark-bg:#f9a8b2; --del-mark-fg:#4a0d14;
  --max:44rem;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#16181c; --fg:#e8e6e3; --muted:#9aa3ad; --line:#2c3037;
         /* 暗い配色でも同じだけ差を取る（地色比 約2.8）。--muted より暗くし、
            文字より枠が前に出ないようにしている。 */
         --line-strong:#5a616d;
         --accent:#7fc9c1; --accent-weak:#1e2a29;
         /* 暗い地に明るい塗りを広く敷くとまぶしいため、ダークでは塗りを沈めて
            文字を明るくする（地色比 約8.9、文字との比 約8.4）。 */
         --feature-bg:#24403d; --feature-fg:#dbeeec;
         --ins-bg:#14331d; --ins-fg:#6fd68c; --del-bg:#3b191d; --del-fg:#f2909a;
         /* 暗い地に暗い塗りを重ねると輪郭が出ないため、ダークだけ明暗を反転させ、
            明るい塗りに濃い文字を載せる。地色比は 5.7 前後（3.0 では埋もれ、
            8.0 では蛍光ペンのようにうるさくなるため、その中間を取っている）。
            赤と緑で明るさを揃え、片方だけが浮かないようにしている。 */
         --ins-mark-bg:#3aa571; --ins-mark-fg:#00220f;
         --del-mark-bg:#e0707c; --del-mark-fg:#3a0009; }
}
*{box-sizing:border-box}
/* hidden 属性は本来 UA の [hidden]{display:none} で効くが、
   .row>div のように display を指定した規則の方が強く、打ち消されてしまう。
   入力欄を差し替えるツールがあるため、属性側を優先させる。 */
[hidden]{display:none !important}
/* リンクの既定色（濃い青）は暗い地の上でほとんど読めないため、明暗どちらでも
   地色との差が保てるアクセント色にする。個別に色を持つリンクは後の指定で上書きする。 */
a{color:var(--accent)}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.75; font-size:16px;
}
main{max-width:var(--max); margin:0 auto; padding:1.5rem 1.1rem 4rem}
h1{font-size:1.5rem; line-height:1.4; margin:.4rem 0 .6rem}
h2{font-size:1.15rem; margin:2.2rem 0 .7rem; padding-bottom:.3rem; border-bottom:1px solid var(--line)}
.lead{color:var(--muted); margin:0 0 1rem}
.privacy{
  background:var(--accent-weak); border-left:3px solid var(--accent);
  padding:.7rem .9rem; border-radius:0 6px 6px 0; font-size:.9rem; margin:0 0 1.4rem;
}
.site-header{border-bottom:1px solid var(--line); padding:.9rem 1.1rem}
.brand{color:var(--fg); text-decoration:none; font-weight:600}
.site-footer{border-top:1px solid var(--line); padding:1.4rem 1.1rem; color:var(--muted); font-size:.85rem}

.tool{
  border:1px solid var(--line); border-radius:10px;
  padding:1.1rem; background:color-mix(in srgb, var(--bg) 92%, var(--fg) 8%);
}
.tool label{display:block; font-size:.88rem; color:var(--muted); margin:.9rem 0 .25rem}
.tool input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),.tool select,.tool textarea{
  width:100%; padding:.6rem .7rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--fg);
}
.tool textarea{min-height:8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem}
.tool input[type="checkbox"],.tool input[type="radio"]{
  width:1.05em; height:1.05em; flex:0 0 auto; margin:0;
}
/* 文字色を白で固定すると、ダークの明るいアクセント色の上で沈む（対比 約1.9）。
   地色を文字色に使うと、明暗どちらでも塗りとの差が保てる（5.6 / 9.5）。 */
.tool button{
  margin-top:1rem; padding:.65rem 1.2rem; font-size:1rem; font-family:inherit;
  background:var(--accent); color:var(--bg); border:0; border-radius:7px; cursor:pointer;
}
.tool button:hover{filter:brightness(1.08)}
.tool output,.result{display:block; margin-top:1rem; font-size:.95rem}
.row{display:flex; gap:.8rem; flex-wrap:wrap}
.row>*{flex:1 1 9rem}
/* 画面が狭いと長いラベルだけが2行になり、隣と入力欄の高さがずれる。
   列を縦のフレックスにして入力欄を下端に寄せると、ラベルが何行でも揃う。 */
.row>div{display:flex; flex-direction:column}
.row>div>input,.row>div>select,.row>div>textarea{margin-top:auto}
/* 入力欄と違いラベルは文字数がまちまちなので、.row>* の等幅指定を打ち消して内容幅で並べる。
   等幅のままだと長いラベルだけが割り当て幅に収まらず、ラベル内部で改行される。
   折り返しはラベル単位（flex-wrap）で行い、1つでも1行に収まらない極端に狭い画面でのみ
   縮んで内部改行する（flex-shrink を 1 のままにしているのはそのため）。 */
.row.flags label{
  display:flex; align-items:center; gap:.4rem;
  flex:0 1 auto;
  margin:0; font-size:.88rem; color:var(--fg);
}

.tool-list{list-style:none; padding:0; margin:0}
.tool-list li{padding:.7rem 0; border-bottom:1px solid var(--line)}
.tool-list a{display:block; color:var(--accent); text-decoration:none; font-weight:600}
.tool-list span{display:block; color:var(--muted); font-size:.85rem; margin-top:.15rem}

details{border-bottom:1px solid var(--line); padding:.6rem 0}
summary{cursor:pointer; font-weight:600; font-size:.95rem}
details p{margin:.5rem 0 0; color:var(--muted); font-size:.92rem}

/* 使い方の手順。手順名を1行立てて説明を下に落とす。
   説明が数文になるツールでは、番号付きの段落が続くだけだと
   「まず何をするか」を拾い読みできないため。 */
.howto ol{padding-left:1.4rem}
.howto li{margin-bottom:1.1rem}
.howto li:last-child{margin-bottom:0}
.step-name{display:block; font-weight:600; margin-bottom:.1rem}
.howto li p{margin:.35rem 0 0; color:var(--muted); font-size:.92rem}

/* ツール本体に置く補足。入力欄のすぐ近くに置きつつ、
   普段は畳んで入力の邪魔をしないようにする。 */
.tool .explain{border:1px solid var(--line); border-radius:7px; padding:.55rem .8rem; margin-top:.7rem}
.tool .explain summary{font-size:.88rem; font-weight:600; color:var(--accent)}
.tool .explain p{font-size:.88rem}
.tool .explain > :last-child{margin-bottom:0}
.notes{color:var(--muted); font-size:.85rem; margin-top:2rem}
.ad{margin:2rem 0; min-height:1px}

.tool h3{font-size:.95rem; margin:1.3rem 0 .5rem; color:var(--muted)}
.muted{color:var(--muted)}
.highlight-box{
  border:1px solid var(--line); border-radius:7px; padding:.8rem .9rem;
  background:var(--bg); white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem;
  overflow-x:auto;
}
.highlight-box mark{
  background:#ffd54f; color:#1f2328; border-radius:3px; padding:0 .1em;
}
.highlight-box mark:empty{display:inline-block; width:.3em; height:1em; vertical-align:middle}
.match-item{border-bottom:1px solid var(--line); padding:.6rem 0; font-size:.85rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-word}
.match-item:last-child{border-bottom:none}
.match-head{font-weight:600; margin-bottom:.2rem; font-family:inherit}

/* 入力が増えたツールの区切り。境目を引いて、どこまでが1つのまとまりかを示す。
   罫線だけだと何のまとまりか分からないので見出しと対にする。 */
.tool .group{border-top:1px solid var(--line); margin-top:1.5rem; padding-top:.2rem}
.tool .group:first-child{border-top:0; margin-top:0; padding-top:0}
.tool .group > h3:first-child{margin-top:1rem}
.tool .group:first-child > h3:first-child{margin-top:0}

/* 任意の機能をたたんで置くための枠。既定では閉じておき、使う人だけ開く。
   補足（.explain）と違い中身が操作なので、見出しを本文色にして弱く見せない。 */
.tool .optional{
  border:1px solid var(--line); border-radius:8px;
  padding:.6rem .9rem; margin-top:1.5rem;
}
.tool .optional > summary{font-size:.95rem; color:var(--fg)}
.tool .optional[open]{padding-bottom:1rem}
.tool .optional[open] > summary{margin-bottom:.2rem}

/* ラジオ・チェックボックス群の見出し。label と違い対象の入力を1つに定められないため p を使う */
.field-label{display:block; font-size:.88rem; color:var(--muted); margin:.9rem 0 .25rem}

/* 差分表示（text-diff） */
.pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem}
.pair label{margin-top:0}
.diff-box{
  border:1px solid var(--line); border-radius:7px; padding:.6rem .7rem;
  background:var(--bg); overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; line-height:1.65;
}
/* 文字単位は1つの流れとして表示する。塗りに余白を持たせるぶん行間を広げる */
.diff-box.is-char{white-space:pre-wrap; word-break:break-word; line-height:2}
.diff-row{display:flex; gap:.5rem; align-items:flex-start; min-height:1.65em; border-radius:3px}
.diff-num{flex:0 0 2.6rem; text-align:right; color:var(--muted);
  user-select:none; font-variant-numeric:tabular-nums}
.diff-sign{flex:0 0 1ch; user-select:none; font-weight:700}
.diff-text{flex:1 1 auto; white-space:pre-wrap; word-break:break-word}
.diff-del{background:var(--del-bg)}
.diff-del .diff-sign{color:var(--del-fg)}
.diff-ins{background:var(--ins-bg)}
.diff-ins .diff-sign{color:var(--ins-fg)}
.diff-fold{color:var(--muted); font-size:.8rem; padding:.15rem 0 .15rem 6.2rem}
/* 文字単位の差分は文中に数文字ずつ散らばるため、行単位より強く塗る。
   削除にだけ取り消し線を引く。追加は塗りのみ（下線は塗りの余白と重なって
   途切れて見えるため引かない）。線の有無が色以外の手掛かりになる。 */
.diff-box del{
  background:var(--del-mark-bg); color:var(--del-mark-fg);
  text-decoration:line-through; text-decoration-thickness:2px;
  padding:.12em .25em; border-radius:3px;
}
.diff-box ins{
  background:var(--ins-mark-bg); color:var(--ins-mark-fg);
  text-decoration:none;
  padding:.12em .25em; border-radius:3px;
}
.btn-row{display:flex; gap:.6rem; flex-wrap:wrap}
/* 同じ対象への操作をまとめる箱。行が折り返しても、この中では分断させない。
   ボタンが4つ並ぶツールで「履歴をコピー」と「履歴を消す」の間にだけ改行が入ると、
   どれが同じ対象への操作なのか並びから読み取れなくなる。まとめて次の行へ送る。
   .color-pair と同じ考え方だが、あちらは .row の等幅指定を打ち消す必要があるのに対し、
   こちらは .btn-row が内容幅で並ぶため、折り返しの単位を変えるだけでよい。
   1組が1行に収まらない極端に狭い画面でのみ中のボタンが縮む（flex-shrink は 1 のまま）。 */
.btn-row .btn-group{display:flex; gap:.6rem; flex:0 1 auto; flex-wrap:nowrap}
/* 実行ボタンの脇に置く補助操作。塗りを外して主従を保つ。
   枠線は --line ではなく --line-strong を使う。--line は区切りとして目立たせない
   濃さ（地色比 約1.1）のため、塗りの無いボタンに使うと枠が地色に沈み、
   押せるものだと分からない（明暗のどちらでも起きる）。主従は塗りの有無で足りている。 */
.tool button.sub{
  background:transparent; color:var(--accent); border:1px solid var(--line-strong);
  padding:.5rem .9rem; font-size:.9rem;
}
.tool button.sub:hover{background:var(--accent-weak); filter:none}

/* ファイルのドラッグ&ドロップ（templates/lib/file-drop.js）。
   受け取れる範囲を枠で示す。枠が無いと、どこへ落とせばよいか分からない。 */
.dropzone{
  border:1px dashed var(--line); border-radius:8px;
  padding:.8rem .9rem; margin-top:.9rem;
  transition:background-color .12s, border-color .12s;
}
.dropzone label{margin-top:0}
/* 案内文は file-drop.js が配線できたときだけ出す。
   ドラッグ&ドロップの使えない環境で「できます」と書かないため。 */
.dropzone .drop-hint{display:none; margin:.45rem 0 0; color:var(--muted); font-size:.85rem}
.dropzone[data-drop="ready"] .drop-hint{display:block}
/* 受け取り結果の文言。file-drop.js 専用の置き場で、ツール側は書き込まない。
   同じ要素を共用すると、change を受けたツールの案内と潰し合う。 */
.drop-note:empty{display:none}
.drop-note{margin:.45rem 0 0; font-size:.85rem; color:var(--fg)}
/* ドラッグ中。枠を実線に変えることで、色だけに頼らずに状態が分かるようにする */
.dropzone.is-dragover{
  border-style:solid; border-color:var(--accent); background:var(--accent-weak);
}

/* ページ上部で機能を示す帯。共通の注意書き（.privacy）と並ぶため、
   塗りと文字色を反転させて役割の違いを見た目でも分ける。 */
.feature{
  background:var(--feature-bg); color:var(--feature-fg);
  padding:.75rem .95rem; border-radius:8px; margin:0 0 1.1rem;
  font-size:.95rem; font-weight:600; line-height:1.6;
}

/* 入力欄のすぐ下に置く記入例・書式の説明。
   ラベルと同じ色・字送りにして、入力欄に付随する情報であることを示す。 */
.tool .hint{color:var(--muted); font-size:.85rem; line-height:1.7; margin:.45rem 0 0}
.tool .hint code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em;
  background:var(--accent-weak); color:var(--fg); padding:.05em .3em; border-radius:4px;
}

/* ダイスロール（dice-roller） */
/* 定型の式を選ぶだけのボタンなので、実行ボタン（塗り）より弱い見た目にして
   「振る」との主従を保つ。数が多いため上下の余白も詰める。 */
.preset-row{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.25rem}
/* 枠線の濃さは .tool button.sub と同じ理由で --line-strong を取る */
.preset-row button{
  margin-top:0; padding:.3rem .65rem; font-size:.85rem;
  background:transparent; color:var(--accent); border:1px solid var(--line-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.preset-row button:hover{background:var(--accent-weak); filter:none}
.dice-result{margin-top:1rem}
.roll-line{
  display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
.roll-line:last-child{border-bottom:none}
.roll-index{flex:0 0 2.2rem; color:var(--muted); font-size:.8rem;
  text-align:right; font-variant-numeric:tabular-nums}
.roll-total{font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:2.5rem}
.roll-detail{display:flex; gap:.25rem; flex-wrap:wrap; align-items:center; font-size:.85rem}
.die{
  display:inline-block; min-width:1.9em; padding:.05em .35em; text-align:center;
  border:1px solid var(--line); border-radius:5px; background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;
}
/* 判定の分かれ目になりやすい最大値・最小値。差分表示と同じ緑／赤を使い、
   サイト内で「良い側／悪い側」の色の意味を揃える。 */
.die.is-max{border-color:var(--ins-fg); color:var(--ins-fg); font-weight:700}
.die.is-min{border-color:var(--del-fg); color:var(--del-fg)}
/* kh・kl で落とされたダイス。色覚に依存しないよう、取り消し線と破線枠も併用する */
.die.is-dropped{opacity:.5; text-decoration:line-through; border-style:dashed; color:var(--muted)}
.die.is-const{border-style:none; color:var(--muted)}
.dice-op{color:var(--muted)}
.history-list{list-style:none; padding:0; margin:0; font-size:.85rem}
.history-list li{display:flex; gap:.6rem; padding:.35rem 0; border-bottom:1px solid var(--line)}
.history-time{flex:0 0 4.5rem; color:var(--muted); font-variant-numeric:tabular-nums}
.history-expr{flex:0 0 auto; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.history-vals{flex:1 1 6rem; word-break:break-word; font-variant-numeric:tabular-nums}

/* QRコード作成（qr-code） */
/* 色見本は他の入力欄と違い全幅にしない。横に伸ばしても選べる情報は増えず、
   ボタンのように見えて押し間違いを誘うため、見本の大きさに留める。 */
.tool input[type="color"]{
  width:4rem; height:2.4rem; padding:.15rem; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:var(--bg);
}
/* 保存は生成済みの画像へのリンクだが、役割は並びの実行ボタンと同じなので見た目を揃える */
.btn-link{
  display:inline-flex; align-items:center; margin-top:1rem; padding:.65rem 1.2rem;
  font-size:1rem; border-radius:7px; text-decoration:none;
  background:var(--accent); color:var(--bg);
}
.btn-link:hover{filter:brightness(1.08)}
.btn-link[hidden]{display:none}
/* 画像そのものが結果なので枠は付けない。淡い側の色を白以外にしたときに
   枠と塗りの境目が二重に見えるのを避ける。 */
.qr-preview{margin-top:1rem}
.qr-preview canvas{max-width:100%; height:auto}
.qr-detail{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .8rem;
  margin:1rem 0 0; font-size:.85rem;
}
.qr-detail dt{color:var(--muted)}
.qr-detail dd{margin:0; font-variant-numeric:tabular-nums}
/* 書式の一覧。長い書式は折り返す必要があるため、横並びの定義リストにはしない */
.format-list{margin:.6rem 0 0}
.format-list dt{margin-top:.5rem}
.format-list dt code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem;
  background:var(--accent-weak); color:var(--fg);
  padding:.1em .35em; border-radius:4px; word-break:break-all;
}
.format-list dd{margin:.15rem 0 0; color:var(--muted); font-size:.85rem}
/* 表の枠（共通）。下罫線を1本引くだけでは表の範囲が地色に沈み、
   数字の列がただ並んでいるようにしか見えない（罫線の色は地色との差を
   小さく取っているため、特に明るい配色で消える）。外枠・列の区切り・
   見出しの地色で表の形を示し、1行おきの薄い塗りで横に目を追えるようにする。
   文字の寄せ方と余白の広さは表ごとに決めるので、ここでは持たない。 */
.calc-table,.ecc-table{border-collapse:collapse; width:100%; border:1px solid var(--line-strong)}
.calc-table th,.calc-table td,.ecc-table th,.ecc-table td{
  border-bottom:1px solid var(--line-strong); padding:.4rem .55rem;
}
/* 2列目以降に縦の区切りを入れる。見出し列が th の表でも同じように効く */
.calc-table tr > * + *,.ecc-table tr > * + *{border-left:1px solid var(--line-strong)}
.calc-table thead th,.ecc-table thead th{
  background:var(--accent-weak); color:var(--fg); font-weight:600; font-size:.8rem;
}
/* 未対応の環境では縞なし。罫線があるので読めなくはならない */
.calc-table tbody tr:nth-child(even),.ecc-table tbody tr:nth-child(even){
  background:color-mix(in srgb, var(--fg) 4%, transparent);
}
/* 最下行の罫線は外枠と重なる */
.calc-table tbody tr:last-child > *,.ecc-table tbody tr:last-child > *{border-bottom:none}

.ecc-table{margin:.7rem 0 0; font-size:.85rem}
.ecc-table th,.ecc-table td{text-align:left}
.ecc-table tbody th{width:3.5rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ecc-table td:last-child{font-variant-numeric:tabular-nums; white-space:nowrap}
/* 復元できる割合の帯。幅は割合に比例させている（1% = 0.2rem） */
.ecc-bar{
  display:inline-block; height:.6em; margin-right:.45rem;
  background:var(--accent); border-radius:2px; vertical-align:middle;
}
.ecc-bar.is-l{width:1.4rem}
.ecc-bar.is-m{width:3rem}
.ecc-bar.is-q{width:5rem}
.ecc-bar.is-h{width:6rem}
/* 2色は対で意味を持つ設定なので、行が折り返しても間で分断させない。
   .row>* の等幅指定を打ち消し、2つまとめて次の行へ送る。 */
.color-pair{display:flex; gap:.8rem; flex:0 1 auto; flex-wrap:nowrap}
.color-pair > div{flex:0 0 auto}
/* 2色の組は横並びのまま。上の .row>div（縦積み）に負けないよう明示する */
.row > .color-pair{flex-direction:row; align-items:flex-end}

/* 項目名と値の対（gacha-probability / level-curve）。項目名が文の形になるため、qr-code の2列固定（.qr-detail）では
   狭い画面で値が押し出される。行ごとの折り返しにして、収まらないときだけ値を次の行に送る。 */
.stat-list{margin:.8rem 0 0}
.stat-list > div{
  display:flex; flex-wrap:wrap; gap:.1rem .9rem; align-items:baseline;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
.stat-list > div:last-child{border-bottom:none}
.stat-list dt{flex:1 1 14rem; color:var(--muted); font-size:.88rem}
.stat-list dd{flex:0 1 auto; margin:0; font-variant-numeric:tabular-nums}
/* 最初の1行はこのツールの答えそのものなので、他の項目より大きく出す */
.stat-main dd{font-size:1.3rem; font-weight:700}

/* 折れ線グラフ（共通）。SVGの中身は templates/lib/line-chart.js が組み立て、
   色と線の太さはここが持つ。描き直さずに明暗の切り替えへ追従させるため。 */
/* グラフだけ地色を変えて面を分ける。ツールの枠と同じ地色の上では、
   目盛りの線が枠線と同じ濃さになって沈む（特に暗い配色で見えなくなる）。
   .highlight-box や .diff-box と同じ「内側の面」の作り方に合わせている。 */
.chart{
  margin:1rem 0 0; padding:.6rem .4rem .2rem;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
}
/* 縦のドラッグは画面送りに渡し、横のなぞりだけをグラフの読み取りに使う */
.chart svg{display:block; width:100%; height:auto; touch-action:pan-y}
/* 目盛りは地色ではなく文字色から作る。明暗のどちらでも同じ濃さに見え、
   暗い配色で線だけが消えることがなくなる（color-mix 未対応の環境は罫線色になる） */
.chart-grid line{stroke:var(--line); stroke:color-mix(in srgb, var(--fg) 22%, transparent); stroke-width:1}
/* 0%の位置は目盛りではなく軸なので、他の線よりはっきり引く */
.chart-grid .chart-base{stroke:var(--muted); stroke:color-mix(in srgb, var(--fg) 45%, transparent)}
.chart-axis{fill:var(--muted); font-size:11px}
.chart-line{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
/* 2本目の系列。色だけで分けると見分けられない人がいるため、破線も併せる。
   目印（.chart-mark）とは太さで区別がつく */
.chart-line.is-2{stroke:var(--muted); stroke-dasharray:7 4}
.chart-dot.is-2{fill:var(--muted)}
/* 入力した回数の位置。曲線と区別がつくよう、色ではなく破線で示す */
.chart-mark{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 3}
.chart-cursor{stroke:var(--accent); stroke-width:1}
.chart-dot{fill:var(--accent)}
/* なぞった位置の読み取り結果。文字数で高さが変わると表が上下するため、行数ぶんを確保する */
.chart-read{margin:.5rem 0 0; padding:0 .5rem; font-size:.9rem; min-height:3em;
  font-variant-numeric:tabular-nums}
/* 2本以上を重ねたときの凡例。線の見た目をそのまま縮めて示す */
.chart-legend{display:flex; gap:1.1rem; flex-wrap:wrap;
  margin:.4rem 0 0; padding:0 .5rem; font-size:.85rem; color:var(--muted)}
.legend-key{display:inline-flex; align-items:center; gap:.4rem}
.legend-key::before{content:""; width:1.5rem; border-top:2.5px solid var(--accent)}
.legend-key.is-2::before{border-top-style:dashed; border-color:var(--muted)}

/* 桁を見比べる表なので数字は右に寄せる。枠は上の共通指定が持つ */
.calc-table{margin:.6rem 0 0; font-size:.9rem}
.calc-table th,.calc-table td{text-align:right}
/* 数字ではなく言葉を並べる表。右寄せだと語の頭が揃わず読みにくいので左に寄せる */
.calc-table.is-left th,.calc-table.is-left td{text-align:left}
/* 1列目が短い名前（「多項式」「段階倍率」など）の表。
   表の幅は width:100% で決まるため、3列目に長い説明があると1列目が痩せ、
   3〜4文字の語が2行に割れる。語の途中で切れるのは読み取りの妨げになるので、
   1列目だけ折り返さず、そのぶんを説明の列から取る。 */
.calc-table.is-terms tr > *:first-child{white-space:nowrap}
.calc-table td{font-variant-numeric:tabular-nums}
.calc-table + .muted{font-size:.85rem; margin:.6rem 0 0}
/* 1列目が名前、残りが数値の表。数値は桁を見比べるため右のまま、
   1列目だけ左に寄せる。名前を右寄せにすると、長さの違う語の頭がばらつき、
   どの行を読んでいるのか追えなくなる。 */
.calc-table.is-mixed tr > *:first-child{text-align:left}
/* 列の多い表。セルの途中で折り返ると「20字×16(改行)行」のように語が割れ、
   何を指す値なのか読めなくなる。セルは折り返さず、幅が足りなければ表ごと横に送る。 */
.table-wrap{overflow-x:auto}
.table-wrap .calc-table th,.table-wrap .calc-table td{white-space:nowrap}
/* 「1.0枚（切り上げて1枚）」のように括弧で補う値を、括弧の途中で割らせない。
   値が割れるより、見出しの側が折り返るほうが読み取りやすい。 */
.stat-list.is-nowrap dd{white-space:nowrap}