/* トップ・数学アプリと共通の5デザイン。
   図解本体（.jsx-host）や動画の内容には色を上書きしない。 */
.appearance-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  max-width: 100%;
}
#appearance-toggle {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #9690af;
  border-radius: 10px;
  background: #ffffff0c;
  color: #f1eefb;
  font: inherit;
  font-size: .86em;
  font-weight: 700;
  cursor: pointer;
}
#appearance-toggle:hover { background: #ffffff20; }
#appearance-toggle:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
#appearance-name { font-size: .85em; white-space: nowrap; }

html[data-math-look="pop"] {
  --mind-bg: #edf8fc; --mind-ink: #15364f; --mind-muted: #426177;
  --mind-paper: #f8fdff; --mind-soft: #e3f3fb; --mind-border: #7bafc5;
  --mind-accent: #087bbd; --mind-shadow: #b2cad4;
  --mind-action: #ffbc56; --mind-action-ink: #15364f;
  --mind-selected: #e4f6b2; --mind-card: #edf8ff;
  --mind-button-shadow: 2px 3px 0 #15364f;
}
html[data-math-look="pastel"] {
  --mind-bg: #f4deff; --mind-ink: #583179; --mind-muted: #795484;
  --mind-paper: #fffaff; --mind-soft: #f4e7fc; --mind-border: #c8a7df;
  --mind-accent: #8a3c9f; --mind-shadow: #d5b6e7;
  --mind-action: #ffe68a; --mind-action-ink: #714717;
  --mind-selected: #f1e2ff; --mind-card: #fff0f7;
  --mind-button-shadow: 0 3px 0 #d5a6d4;
}
html[data-math-look="elegant"] {
  --mind-bg: #f5eddc; --mind-ink: #25324b; --mind-muted: #6d675c;
  --mind-paper: #fffdf7; --mind-soft: #f7eedb; --mind-border: #c9ab67;
  --mind-accent: #886323; --mind-shadow: #ddcda9;
  --mind-action: linear-gradient(135deg, #b99246, #f9e8b7 27%, #dec17a 53%, #fff2c9 72%, #c5a05b);
  --mind-action-ink: #493516; --mind-selected: #f5e6be; --mind-card: #faf1df;
  --mind-button-shadow: 0 3px 0 #b39a63;
}
html[data-math-look="simple"] {
  --mind-bg: #f6f7f5; --mind-ink: #28323a; --mind-muted: #626c75;
  --mind-paper: #fff; --mind-soft: #edf3f7; --mind-border: #bbc3c9;
  --mind-accent: #365e79; --mind-shadow: #dfe3e6;
  --mind-action: #e1edf3; --mind-action-ink: #334d60;
  --mind-selected: #e1edf3; --mind-card: #fff;
  --mind-button-shadow: 0 1px 2px #28323a0c;
}

html[data-math-look]:not(:where([data-math-look="original"])) { color-scheme: light; background: var(--mind-bg); }
html[data-math-look]:not(:where([data-math-look="original"])) body { color: var(--mind-ink); background: var(--mind-bg); }
html[data-math-look="pop"] body {
  background-image: radial-gradient(#70b8d638 1.25px, transparent 1.25px), linear-gradient(135deg, #f8fdff, #e7f6fe 55%, #f0f9e8);
  background-size: 18px 18px, auto;
}
html[data-math-look="pastel"] body {
  background-image: radial-gradient(ellipse at 3% 4%, #ffcce5, transparent 47%), radial-gradient(ellipse at 100% 28%, #b9f3ff, transparent 50%), linear-gradient(180deg, #fff0f9, #dce7ff 60%, #fce5f5);
}
html[data-math-look="elegant"] body {
  background-image: radial-gradient(ellipse at 50% 0, #fffefb, transparent 65%), repeating-linear-gradient(135deg, transparent 0 72px, #b9955010 72px 73px, transparent 73px 145px), linear-gradient(120deg, #ebd9b6, #fbf5e9 28%, #f6eedc 72%, #ead6ad);
}

html[data-math-look]:not(:where([data-math-look="original"])) body > h1 {
  color: var(--mind-accent); background: none; -webkit-text-fill-color: currentColor;
}
html[data-math-look]:not(:where([data-math-look="original"])) body > h1 .h1-prefix {
  color: var(--mind-muted); -webkit-text-fill-color: currentColor;
}
html[data-math-look]:not(:where([data-math-look="original"])) :is(body > .subtitle, #appearance-name, .page-indicator) {
  color: var(--mind-muted); opacity: 1;
}
html[data-math-look="pop"] body > h1 { text-shadow: 2px 3px 0 #fff; }
html[data-math-look="pastel"] body > h1 { text-shadow: 0 3px 0 #fff; }
html[data-math-look="elegant"] body > h1 { font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; letter-spacing: .04em; }

/* ページ全体の操作だけを対象にし、図解内のボタンとは分ける。 */
html[data-math-look]:not(:where([data-math-look="original"])) #appearance-toggle,
html[data-math-look]:not(:where([data-math-look="original"])) :is(.home-btn, .page-btn, .random-scope, .diagram-step-btn, .video-cta :where(button), .diagram-versions :where(button)) {
  color: var(--mind-ink); background: var(--mind-paper); border-color: var(--mind-border);
  box-shadow: var(--mind-button-shadow); text-shadow: none;
}
html[data-math-look]:not(:where([data-math-look="original"])) #appearance-toggle:hover,
html[data-math-look]:not(:where([data-math-look="original"])) :is(.home-btn, .page-btn, .random-scope, .diagram-step-btn, .video-cta :where(button), .diagram-versions :where(button)):hover:not(:disabled) {
  color: var(--mind-ink); background: var(--mind-soft); box-shadow: var(--mind-button-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) #appearance-toggle:active,
html[data-math-look]:not(:where([data-math-look="original"])) :is(.page-btn, .diagram-step-btn, .video-cta :where(button)):active:not(:disabled) {
  transform: translateY(2px); box-shadow: 0 1px 0 var(--mind-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) :is(.page-btn, .diagram-step-btn):disabled { opacity: .4; box-shadow: none; }
html[data-math-look]:not(:where([data-math-look="original"])) .random-page-btn,
html[data-math-look]:not(:where([data-math-look="original"])) .random-page-btn:hover:not(:disabled) {
  color: var(--mind-action-ink); background: var(--mind-action);
}
html[data-math-look]:not(:where([data-math-look="original"])) .random-scope-track { background: var(--mind-border); }
html[data-math-look]:not(:where([data-math-look="original"])) .random-scope[aria-checked="true"] { color: var(--mind-accent); border-color: var(--mind-accent); }
html[data-math-look]:not(:where([data-math-look="original"])) .random-scope[aria-checked="true"] .random-scope-track { background: var(--mind-accent); }

html[data-math-look]:not(:where([data-math-look="original"])) .cat-tabs {
  color: var(--mind-ink); background: var(--mind-paper); border-color: var(--mind-border);
}
html[data-math-look]:not(:where([data-math-look="original"])) .cat-tab { color: var(--mind-muted); }
html[data-math-look]:not(:where([data-math-look="original"])) .cat-tab:hover:not(.active) { color: var(--mind-ink); background: var(--mind-soft); }
html[data-math-look]:not(:where([data-math-look="original"])) .cat-tab.active {
  color: var(--mind-ink); background: var(--mind-selected); box-shadow: inset 0 0 0 2px var(--mind-accent);
}
html[data-math-look]:not(:where([data-math-look="original"])) .concept-btn {
  color: var(--mind-ink); background: var(--mind-card); border-color: var(--mind-border);
  box-shadow: 0 3px 0 var(--mind-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) .concept-btn:hover:not(:disabled) { background: var(--mind-soft); }
html[data-math-look="pop"] .concept-btn { border-color: var(--mind-ink); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--mind-ink), 2px 3px 0 var(--mind-ink); }
html[data-math-look="pop"] .concept-btn:nth-child(3n + 2) { --mind-card: #edf9df; }
html[data-math-look="pop"] .concept-btn:nth-child(3n) { --mind-card: #fff2d4; }
html[data-math-look="pastel"] .concept-btn { background: linear-gradient(160deg, var(--mind-paper), var(--mind-card)); border-color: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px #fff, 0 3px 0 #bca3d2; }
html[data-math-look="pastel"] .concept-btn:nth-child(5n + 2) { --mind-card: #ffeace; }
html[data-math-look="pastel"] .concept-btn:nth-child(5n + 3) { --mind-card: #f1e2ff; }
html[data-math-look="pastel"] .concept-btn:nth-child(5n + 4) { --mind-card: #d7eaff; }
html[data-math-look="pastel"] .concept-btn:nth-child(5n) { --mind-card: #dcf8e9; }
html[data-math-look="elegant"] .concept-btn {
  background: linear-gradient(145deg, #fffefb, #fffdf7 60%, #faf1df);
  box-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px #e9d8b1, 0 3px 0 var(--mind-shadow);
}
html[data-math-look="simple"] .concept-btn { border-radius: 10px; box-shadow: 0 1px 2px #28323a0c; }
html[data-math-look]:not(:where([data-math-look="original"])) .concept-btn.active,
html[data-math-look]:not(:where([data-math-look="original"])) .concept-btn.active:hover {
  color: var(--mind-ink); background: var(--mind-selected); border-color: var(--mind-accent);
  box-shadow: inset 0 0 0 2px var(--mind-accent), 0 3px 0 var(--mind-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) .concept-btn:disabled { background: var(--mind-soft); box-shadow: none; }

html[data-math-look]:not(:where([data-math-look="original"])) body > .panel {
  color: var(--mind-ink); background: var(--mind-paper); border-color: var(--mind-border);
  box-shadow: 0 3px 0 var(--mind-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) :is(.panel-header h2, .diagram-header h2) { color: var(--mind-muted); }
html[data-math-look]:not(:where([data-math-look="original"])) :is(.panel-title, #concept-area) { color: var(--mind-ink); }
html[data-math-look]:not(:where([data-math-look="original"])) #diagram-area:not(.mounted) { color: var(--mind-muted); }
html[data-math-look="pop"] body > .panel { border-color: var(--mind-ink); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--mind-ink), 3px 4px 0 var(--mind-shadow); }
html[data-math-look="pastel"] body > .panel { border-color: #fff; border-radius: 24px; box-shadow: inset 0 0 0 2px #fff, 0 5px 0 #bca3d2; }
html[data-math-look="elegant"] body > .panel { box-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px #e9d8b1, 0 3px 0 var(--mind-shadow); }
html[data-math-look="simple"] body > .panel { border-radius: 10px; box-shadow: 0 1px 2px #28323a0c; }

html[data-math-look]:not(:where([data-math-look="original"])) .diagram-versions button[aria-pressed="true"] {
  color: var(--mind-ink); background: var(--mind-selected); border-color: var(--mind-accent);
  box-shadow: inset 0 0 0 1px var(--mind-accent);
}
html[data-math-look]:not(:where([data-math-look="original"])) .video-cta .play-mark { background: var(--mind-accent); }
html[data-math-look]:not(:where([data-math-look="original"])) .video-cta .play-mark::before { border-left-color: var(--mind-paper); }
html[data-math-look]:not(:where([data-math-look="original"])) #video-modal .box {
  max-width: 100%; padding: 12px; border: 1px solid var(--mind-border); border-radius: 18px;
  color: var(--mind-ink); background: var(--mind-paper);
}
html[data-math-look]:not(:where([data-math-look="original"])) #video-modal video { max-width: 100%; max-height: 78vh; }
html[data-math-look]:not(:where([data-math-look="original"])) #video-modal .cap { color: var(--mind-ink); }
html[data-math-look]:not(:where([data-math-look="original"])) #video-close {
  color: var(--mind-ink); background: var(--mind-paper); border-color: var(--mind-border);
  box-shadow: var(--mind-button-shadow);
}
html[data-math-look]:not(:where([data-math-look="original"])) #video-close:hover { background: var(--mind-soft); }

html[data-math-look="pop"] #appearance-toggle { border-color: var(--mind-ink); }
html[data-math-look="pastel"] #appearance-toggle { border-radius: 999px; }
html[data-math-look="elegant"] #appearance-toggle { color: var(--mind-action-ink); background: var(--mind-action); }
html[data-math-look="simple"] :is(#appearance-toggle, .random-page-btn, .random-page-btn:hover) { transform: none; box-shadow: none; }
html[data-math-look]:not(:where([data-math-look="original"])) :is(#appearance-toggle, .home-btn, .cat-tab, .page-btn, .random-scope, .concept-btn, .diagram-step-btn, .video-cta button, .diagram-versions button, #video-close):focus-visible {
  outline: 3px solid var(--mind-accent); outline-offset: 2px;
}
@media (max-width: 640px) {
  .appearance-switch { gap: 8px; margin-bottom: 20px; }
  #appearance-toggle { font-size: .8em; padding: 8px 12px; }
  #appearance-name { font-size: .8em; }
}
@media (prefers-reduced-motion: reduce) {
  #appearance-toggle { transition: none; }
}

/* 縦スマホの「縦版／横版」切りかえ：明るいデザインでは、選んでいないほうの字が白っぽく背景にとけていた（2026-10-14 本人の指示）。
   選んでいないほう＝デザインの字の色（--mind-muted）を紙の色の上に、選んだほう＝アクセント色に白い字 */
html[data-math-look]:not(:where([data-math-look="original"])) .layout-toggle {
  border: 2px solid var(--mind-border); background: var(--mind-paper);
}
html[data-math-look]:not(:where([data-math-look="original"])) .layout-toggle button { color: var(--mind-muted); }
html[data-math-look]:not(:where([data-math-look="original"])) .layout-toggle button[aria-pressed="true"] { background: var(--mind-accent); color: #fff; }