:root {
  --bg: #0f1724;
  --panel: #172036;
  --panel-2: #1d2a47;
  --border: #2c3d63;
  --text: #e8eef9;
  --muted: #9fb0cf;
  --amber: #f5b942;
  --blue: #5a96ff;
  --cyan: #3dd6f5;
  --violet: #b18cff;
  --green: #5fd38d;
  --red: #ff6b6b;
  color-scheme: dark; /* 選択欄・スクロールバーなどの標準の部品も、暗い配色にする */
}

* { box-sizing: border-box; }

/* hidden 属性を、他の display 指定より優先する（交流専用のスライダーなどを隠すため） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px 64px; }

header.site { padding: 20px 0 8px; }
header.site .crumb { font-size: 13px; color: var(--muted); }
header.site .crumb a { color: var(--muted); }
h1 { font-size: 28px; line-height: 1.3; margin: 6px 0 8px; }
h2 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: 16px; margin: 20px 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--cyan); }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  color: var(--amber);
  vertical-align: middle;
}

.lead { color: var(--muted); font-size: 15px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.panel canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #0b1220;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.caption { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
}
.controls label { display: inline-flex; align-items: center; gap: 8px; }
.controls input[type="range"] { width: 150px; accent-color: var(--amber); }
.controls .val { color: var(--amber); min-width: 4.5em; display: inline-block; }
.controls select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15, 23, 36, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

button {
  font: inherit;
  font-size: 14px;
  color: #1a1204;
  background: var(--amber);
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); /* ボタンらしく、少し浮かせる */
  transition: filter 0.12s, transform 0.05s;
}
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
button.secondary { background: linear-gradient(#2a3d68, #1d2a47); color: var(--text); border: 1px solid #6b86c4; font-weight: 600; } /* 枠を明るく・やや浮かせて、押せるボタンだと分かるように（261010） */
/* 使えない（無効の）ボタンも、「ボタンの形」は残す: 暗い面・破線の枠・薄い文字・影なし。押せる状態（明るい面・実線の枠・影つき）と、見分けがつく */
button:disabled { cursor: not-allowed; background: #151e33; color: #7f8fb0; border: 1px dashed #5a6fa0; box-shadow: none; font-weight: 500; filter: none; transform: none; }
/* スイッチ（電源の ON／OFF）: ページのいちばんの操作なので、大きく・光らせる。ON のとき（aria-pressed ＝ true）は、緑 */
#btnStart { padding: 10px 22px; font-size: 15px; font-weight: 700; border: 2px solid #ffe29a; box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.28), 0 4px 16px rgba(245, 185, 66, 0.45); }
#btnStart[aria-pressed="true"] { background: var(--green); border-color: #c9ffe0; box-shadow: 0 0 0 3px rgba(95, 211, 141, 0.3), 0 4px 16px rgba(95, 211, 141, 0.5); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* 狭い画面で、長い選択肢の選択欄が、画面からはみ出さない */
select, input[type="text"], textarea { max-width: 100%; }

.seg { display: inline-flex; gap: 6px; } /* 切り替え（ラジオ）: 選ばれていない側も、色つきの縁取りで「押せるボタン」だと分かるように（261010） */
.seg label { padding: 6px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); background: linear-gradient(#2a3d68, #1d2a47); border: 2px solid #6b9dff; border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); transition: filter 0.12s; }
.seg label:hover { filter: brightness(1.15); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + span { color: #1a1204; }
.seg label:has(input:checked) { background: var(--amber); color: #1a1204; border-color: #ffe29a; box-shadow: 0 0 0 2px rgba(245, 185, 66, 0.28), 0 2px 8px rgba(245, 185, 66, 0.4); } /* 選ばれている側は、琥珀色に塗って光らせる */
.seg label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: -3px; } /* キーボードで、どれを選んでいるかが見える */

.bridge {
  border-left: 4px solid var(--cyan);
  background: var(--panel-2);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 8px 0;
  font-size: 15px;
}
.bridge b { color: var(--amber); }

table.readout { width: 100%; border-collapse: collapse; font-size: 14px; }
table.readout th, table.readout td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.readout th { font-weight: 500; color: var(--muted); }
table.readout tbody th { width: 48%; } /* 行の見出し（左の列）だけ広く。表の頭（thead の th）は、幅を決めない（4 列の表の、右の列がつぶれない） */
table.readout.wide4 tbody th { width: 34%; } table.readout.wide4 td:last-child { width: 26%; } table.readout.wide4 td { overflow-wrap: anywhere; } /* 4 列の表（量・いま・変えたとき・変わり方） */
table.readout td b { color: var(--amber); font-size: 15px; }
table.readout td small { color: var(--muted); }

.summary li, .assume li { margin-bottom: 6px; }
.note { font-size: 13px; color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }
.card { display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.card:hover { border-color: var(--amber); }
.card .tag { font-size: 12px; color: var(--cyan); }
.card h3 { margin: 4px 0; }

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .controls input[type="range"] { width: 120px; }
  table.readout tbody th { width: 42%; }
  table.readout.wide4 tbody th { width: 30%; }
  /* 長い選択肢の選択欄が、ラベルの幅を押し広げて、画面からはみ出さない（画面の幅を基準に、上限をかける） */
  select { max-width: calc(100vw - 40px); }
  .controls label { flex-wrap: wrap; max-width: 100%; }
  table.map { display: block; overflow-x: auto; } /* 対応表は、表の中でスクロールする（ページ全体が横に揺れない） */
}

@media (prefers-reduced-motion: reduce) {
  /* アニメーションは学習内容そのものなので止めない。一時停止ボタンで止められる。 */
}

/* 相互作用のループ */
.loop { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.loop li { flex: 1 1 200px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.6; position: relative; }
.loop li b { color: var(--amber); display: block; margin-bottom: 2px; }
.loop li small { color: var(--muted); }
.loop-back { font-size: 13px; color: var(--muted); margin: 6px 2px 0; }

/* たとえ話・回路図 */
.analogy-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.analogy-grid figure { margin: 0; background: #0b1220; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.analogy-grid figcaption { font-size: 13px; color: var(--muted); padding: 4px 4px 0; }
.analogy-grid svg { width: 100%; height: auto; display: block; color: var(--text); }
table.map { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
table.map th, table.map td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.map th { color: var(--muted); font-weight: 500; font-size: 13px; }
.formula-line { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--amber); font-size: 14px; margin: 10px 0 0; }
.sw-note { color: var(--muted); font-size: 13px; }

/* 3層構成 */
.depth-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.layer { margin-top: 28px; }
.layer-title { font-size: 22px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
.layer-no { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 6px; background: var(--amber); color: #1a1204; vertical-align: middle; margin-right: 6px; }
.layer2 .layer-no { background: var(--cyan); }
.layer3 .layer-no { background: var(--violet); }
body[data-depth="1"] .layer2, body[data-depth="1"] .layer3 { display: none; }
body[data-depth="2"] .layer3 { display: none; }

/* 式（MathML）。式を見たくない人は、画面上部のスイッチで非表示にできる */
body[data-eq="off"] .eq { display: none !important; }
.eq-block { background: var(--panel-2); border-left: 4px solid var(--violet); padding: 6px 14px 8px; border-radius: 0 8px 8px 0; margin: 10px 0; overflow-x: auto; }
.eq-block math { font-size: 1.2em; margin: 6px 0; display: block; }
.eq-block[data-verified]::after { content: "✓ 検算済み: " attr(data-verified); display: block; font-size: 12px; color: var(--green); margin-top: 2px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.chk input { accent-color: var(--violet); width: 16px; height: 16px; }
.fig { margin: 0; background: #0b1220; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.fig svg { width: 100%; height: auto; display: block; color: var(--text); }
.fig figcaption { font-size: 13px; color: var(--muted); padding: 4px 4px 0; }

.eq-block[data-note]::after { content: "ⓘ " attr(data-note); display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.answer { border-left: 4px solid var(--green); background: var(--panel-2); border-radius: 0 8px 8px 0; padding: 10px 16px; margin: 12px 0; }
.answer b { color: var(--green); }

details.quiz { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; margin: 6px 0 14px; }
details.quiz > summary { cursor: pointer; color: var(--amber); font-weight: 600; padding: 4px 0; }
details.quiz[open] > summary { margin-bottom: 8px; }

.probe-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.probe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.probe-row .chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; color: #0b1220; }
.probe-row input[type="range"] { width: 200px; accent-color: var(--amber); }
.probe-row select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
#probeTable th, #probeTable td { width: auto; white-space: nowrap; }
@media (max-width: 640px) { #probeTable th, #probeTable td { white-space: normal; padding: 6px 6px; } } /* 狭い画面では、折り返して、横にはみ出さない */

/* 折りたたみ（<details class="fold">）: 題名を、枠で囲んで目立たせる。どのページでも使う（circuitlab.html から移した） */
details.fold { margin: 10px 0; }
details.fold > summary { cursor: pointer; display: block; padding: 8px 14px; font-size: 14px; font-weight: 700; color: #fff3d6; background: rgba(245,185,66,0.14); border: 2px solid var(--amber); border-radius: 8px; user-select: none; list-style: none; } /* 題名を、枠で囲んで目立たせる */
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▶'; display: inline-block; margin-right: 10px; color: #ff4fa3; font-size: 16px; text-shadow: 0 0 8px rgba(255,79,163,0.85); transition: transform 0.15s; } /* 折りたたんだ印の三角は、派手な色で */
details.fold[open] > summary::before { content: '▼'; color: #3de8ff; text-shadow: 0 0 8px rgba(61,232,255,0.85); }
details.fold > summary:hover { background: rgba(245,185,66,0.28); }
details.fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.fold > .fbody { padding: 8px 14px 12px; border: 2px solid var(--amber); border-top: 0; border-radius: 0 0 8px 8px; background: var(--panel-2); }
details.fold > .fbody > p { margin: 6px 0; }

/* 式の下の「ここでの記号」の欄（eqsym.js）と、式変形の説明の番号つきの列（ol.why） */
.eqsym { font-size: 13px; color: var(--muted); margin: -4px 0 14px; padding: 6px 0 6px 14px; border-left: 4px solid var(--border); line-height: 1.6; }
.eqsym .eqsym-h { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.eqsym ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2px 18px; }
.eqsym li { margin: 2px 0; overflow-wrap: anywhere; }
.eqsym li .s { color: var(--text); font-size: 14px; }  /* 記号の表示。太字にしない（太字 ＝ ベクトル、の約束を、欄の中でも守る） */
.eqsym li b { color: var(--text); }
.eqsym sub, .eqsym sup { font-size: .85em; }
ol.why { margin: 4px 0 10px; padding-left: 1.6em; }
ol.why li { margin: 3px 0; }
.gist { background: var(--panel-2); border-left: 4px solid var(--amber); padding: 6px 12px; border-radius: 0 8px 8px 0; margin: 8px 0 12px; }

/* 公開版の帯（α版） */
.alpha-note{background:#1b2740;border-bottom:1px solid #31456e;color:#c9d6f0;font-size:13px;line-height:1.5;padding:6px 14px;text-align:center}
.alpha-note a{color:#9ec1ff}
.ad-slot{margin:22px auto;max-width:728px;text-align:center;opacity:.9}.ad-label{font-size:11px;opacity:.5;margin:0 0 4px}
.soon{color:#8a97b3;border-bottom:1px dotted #5d6b8c;cursor:help}