:root{
  color-scheme:light;
  --line:#e3e7ee; --accent:#0a8a5f; --accent-ink:#07724f; --accent-soft:rgba(10,160,110,.10); --on-accent:#ffffff;
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef1f6;
  --ink:#1b2231; --muted:#5c6779; --faint:#79839a;
  --discord:#5865f2; --discord-ink:#4149c4; --discord-soft:rgba(88,101,242,.10);
  --danger:#d92d4b; --danger-soft:rgba(217,45,75,.09); --warn:#96600a; --warn-soft:rgba(150,96,10,.10);
  --link:#1558d6; --link-hover:#0f47b0;
  /* ★★印の文字色。**薄い色を敷いた上に載る文字**は、明暗で入れ替えないと読めなくなる
     （見張り役が実測：黒にすると 2.4〜2.7 まで落ちて読めなかった）。 */
  --pl-web-ink:#2a5fc4; --pl-form-ink:#96590a; --ai-ink:#0b6ea8; --on-danger:#ffffff;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 10px 28px rgba(20,30,50,.08);
  --shadow-sm:0 1px 2px rgba(20,30,50,.07); --radius:16px;
  --sans:"Noto Sans JP",system-ui,"Segoe UI",sans-serif;
  --round:"M PLUS Rounded 1c","Noto Sans JP",system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --line:#252c3a; --accent:#2ee6a6; --accent-ink:#74f2c6; --accent-soft:rgba(46,230,166,.12); --on-accent:#052a1e;
  --bg:#0c1016; --surface:#151a24; --surface-2:#1c2330;
  --ink:#e9eef6; --muted:#94a2b6; --faint:#7a8799;
  --discord:#8b93ff; --discord-ink:#adb3ff; --discord-soft:rgba(139,147,255,.14);
  --danger:#fb7185; --danger-soft:rgba(251,113,133,.13); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12);
  --link:#8fb4ff; --link-hover:#b3ccff;
  --pl-web-ink:#a9c4ff; --pl-form-ink:#ffca7a; --ai-ink:#7dd3fc; --on-danger:#3a0712;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
/* リンク。★色を決めないとブラウザ既定の濃い青になり、暗い面の上で読めない。
   色だけに頼らず下線も出す。画像を包むリンクには下線を出さない。 */
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
a:has(> img),a:has(> video){text-decoration:none}

/* 白/黒の切り替えボタン。どのページでも同じ見た目にする。 */
.thm-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-family:inherit;
  cursor:pointer;line-height:1;white-space:nowrap;text-decoration:none}
.thm-btn:hover{color:var(--ink);border-color:var(--faint)}
.thm-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 白のときは「黒にする（月）」、黒のときは「白にする（太陽）」だけを出す。 */
.thm-btn .thm-moon{display:inline-flex}
.thm-btn .thm-sun{display:none}
:root[data-theme="dark"] .thm-btn .thm-moon{display:none}
:root[data-theme="dark"] .thm-btn .thm-sun{display:inline-flex}
.thm-btn .thm-lbl::after{content:"黒くする"}
:root[data-theme="dark"] .thm-btn .thm-lbl::after{content:"白くする"}