/* ダーク⇄ライトの切り替えスイッチ（全ツール共通）
   どのツールに置いても同じ見た目・同じ操作になるよう、色はこのファイルで完結させる
   （各ツールのCSS変数には依存しない）。ページ側は右上に <div id="themesw"></div> を置くだけ。
   月＝紺・太陽＝金。押している側だけがその色で点灯する（全ツール共通のタブの作り）。 */
.themesw{display:flex;gap:2px;flex-shrink:0;flex-wrap:nowrap}
.themesw button{font:inherit;font-size:1rem;line-height:1;font-weight:800;padding:7px 11px;cursor:pointer;flex:0 0 auto;
  border:1px solid #2a3560;background:linear-gradient(180deg,#1e2850,#151d38);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease,box-shadow .12s ease}
.themesw button:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.themesw button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
#thDark{border-radius:11px 5px 5px 11px}
#thLight{border-radius:5px 11px 11px 5px}
/* ライトのときの未選択の土台（白系）。点灯中の見た目はテーマによらず同じ */
:root.light .themesw button{border-color:#dfe6f5;background:linear-gradient(180deg,#fff,#eff3fc);
  box-shadow:0 2px 0 rgba(30,40,90,.13),inset 0 1px 0 #fff}
:root.light .themesw button:hover{box-shadow:0 4px 0 rgba(30,40,90,.13),inset 0 1px 0 #fff}
#thDark[aria-pressed="true"]{border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(160deg,#7b8ae0 0%,#4453b0 45%,#2b3576 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#thLight[aria-pressed="true"]{border-color:transparent;transform:translateY(-1px);
  background:linear-gradient(160deg,#ffd873 0%,#f0a827 45%,#c47f10 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
@media (max-width:430px){.themesw button{padding:6px 9px;font-size:.92rem}}