/* 高校数学6アプリ共通：問題・操作・途中式・図形。
   色と表面だけを切り替え、数式・採点・ドラッグの配置は元のまま使う。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) {
  --hs-blue: #166e9f;
  --hs-violet: #73419a;
  --hs-green: #1c7049;
  --hs-orange: #9b5411;
  --hs-pink: #ad3562;
  --hs-var-bg: #e6dbfa;
  --hs-var-ink: #59327c;
  --hs-const-bg: #c9edfc;
  --hs-const-ink: #195878;
  --hs-term-bg: #fff0be;
  --hs-term-ink: #7d5010;
  --hs-card-shadow: 2px 3px 0 var(--look-shadow);
  --hs-button-bg: #a6e6ff;
  --hs-button-ink: #15364f;
  --hs-button-next-bg: #ffce77;
  --hs-button-next-ink: #673b0e;
  --hs-button-border: #fff;
  --hs-button-radius: 8px;
  --hs-button-shadow: 2px 3px 0 #15364f;
}
html[data-math-look="pastel"] {
  --hs-var-bg: #f1e2ff;
  --hs-const-bg: #d2f6ff;
  --hs-button-bg: #c6f0ff;
  --hs-button-ink: #316781;
  --hs-button-next-bg: #ffe68a;
  --hs-button-next-ink: #714717;
  --hs-button-radius: 14px;
  --hs-button-shadow: 0 4px 0 #d5a6d4;
  --hs-card-shadow: 0 4px 0 #c4a4d8, inset 0 2px #fff;
}
html[data-math-look="elegant"] {
  --hs-blue: #315e86;
  --hs-violet: #684d80;
  --hs-green: #2c694e;
  --hs-orange: #875617;
  --hs-pink: #963e61;
  --hs-var-bg: linear-gradient(135deg, #c8a459, #fff0b9 27%, #ead291 52%, #ffedb0 70%, #bc9748);
  --hs-var-ink: #513910;
  --hs-const-bg: linear-gradient(135deg, #b2bdc8, #f5f7fb 27%, #d5dce6 52%, #f8f9fc 72%, #a5b0bf);
  --hs-const-ink: #304054;
  --hs-term-bg: linear-gradient(135deg, #c7926b, #ffe4ce 27%, #ddb18d 52%, #ffe5cf 72%, #bd855d);
  --hs-term-ink: #61391f;
  --hs-button-bg: #243149;
  --hs-button-ink: #f9e5b0;
  --hs-button-next-bg: linear-gradient(130deg, #c2a05a, #ffedb8 25%, #fae8b2 56%, #c7a351);
  --hs-button-next-ink: #513910;
  --hs-button-border: #c9aa62;
  --hs-button-radius: 11px;
  --hs-button-shadow: 0 3px 0 #a38a54, 0 5px 10px #60451216;
  --hs-card-shadow: 0 4px 0 #ac945e, inset 0 0 0 2px #ffffff5c, inset 0 0 0 4px #b6975140;
}
html[data-math-look="simple"] {
  --hs-var-bg: #f0edf8;
  --hs-var-ink: #51416b;
  --hs-const-bg: #e6f1f7;
  --hs-const-ink: #2c5d77;
  --hs-term-bg: #fbf1dc;
  --hs-term-ink: #72521e;
  --hs-button-bg: #e5f0f7;
  --hs-button-ink: #315d75;
  --hs-button-next-bg: #e3efe8;
  --hs-button-next-ink: #35674e;
  --hs-button-border: #aac0cf;
  --hs-button-radius: 8px;
  --hs-button-shadow: 0 1px 2px #20354712;
  --hs-card-shadow: 0 1px 2px #20354718;
}

/* 学習の3つの枠。パステルも影の下に既存の間隔を残す。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .game-area-wrap, .steps-box) {
  color: var(--look-ink);
  background: var(--look-surface);
  border: 3px solid var(--look-ink);
  border-radius: 14px;
  box-shadow: 4px 5px 0 var(--look-shadow);
  text-shadow: none;
}
html[data-math-look="pop"] .question-box { border-top: 8px solid #149dd7; }
html[data-math-look="pop"] .game-area-wrap { background: #e4f4fc; }
html[data-math-look="pastel"] .question-box {
  background: linear-gradient(145deg, #fff, #fff4fb);
  border-color: #fff; border-radius: 28px;
  box-shadow: 0 6px 0 #b399d2, 0 10px 25px #75559b20;
}
html[data-math-look="pastel"] :is(.game-area-wrap, .steps-box) {
  background: linear-gradient(145deg, #fff2fb, #f5eeff);
  border-color: #fff; border-radius: 28px;
  box-shadow: 0 6px 0 #b399d2, 0 10px 22px #75559b20;
}
html[data-math-look="elegant"] :is(.question-box, .game-area-wrap, .steps-box) {
  background: linear-gradient(145deg, #fffefa 36%, #faf4e5);
  border: 2px solid #c9aa62; border-radius: 23px;
  box-shadow: inset 0 0 0 4px #fffefa, inset 0 0 0 5px #e4cf9e, 0 4px 14px #7c613415;
}
html[data-math-look="simple"] :is(.question-box, .game-area-wrap, .steps-box) {
  background: var(--look-surface);
  border: 1px solid var(--look-border); border-radius: 12px;
  box-shadow: 0 2px 6px #2337480a;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-chip {
  color: var(--hs-button-next-ink); background: var(--hs-button-next-bg);
  border: 1px solid var(--look-border); box-shadow: none;
}
html[data-math-look="pop"] .mode-chip { color: var(--look-ink); background: #c6ef42; border-color: #fff; border-radius: 7px; }
html[data-math-look="pastel"] .mode-chip { border-color: #fff; }

/* 押せるボタンは立体的に。ラベルや数式の寸法・書体は変更しない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer, .btn-manual-answer, .btn-koshiki, .btn-undo, .btn-step-forward, .ai-explain-btn, .inshu-right-top button, .kf-swap, .tl-subst-btn, .suu1-answer-btn) {
  color: var(--hs-button-ink); background: var(--hs-button-bg);
  border: 2px solid var(--hs-button-border); border-radius: var(--hs-button-radius);
  box-shadow: var(--hs-button-shadow); text-shadow: none;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer, .btn-step-forward, .inshu-right-top .inshu-step-forward-btn, .tl-subst-btn) {
  color: var(--hs-button-next-ink); background: var(--hs-button-next-bg);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer, .btn-manual-answer, .btn-koshiki, .btn-undo, .btn-step-forward, .ai-explain-btn, .inshu-right-top button, .kf-swap, .tl-subst-btn, .suu1-answer-btn):hover:not(:disabled) {
  filter: brightness(1.04);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer, .btn-manual-answer, .btn-koshiki, .btn-undo, .btn-step-forward, .ai-explain-btn, .inshu-right-top button, .kf-swap, .tl-subst-btn, .suu1-answer-btn):active:not(:disabled) {
  box-shadow: inset 0 2px 4px #2233482b; transform: translateY(2px);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-undo, .btn-step-forward, .inshu-right-top button, .suu1-answer-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #koshiki-panel .kf-swap {
  color: var(--hs-button-ink); background: var(--hs-button-bg);
  border: 2px solid var(--hs-button-border); border-radius: var(--hs-button-radius); box-shadow: var(--hs-button-shadow);
}

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.auto-calc-toggle-wrap, .k1-auto-control) {
  color: var(--look-muted); background: var(--look-surface); border-color: var(--look-border);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .slider { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) input:checked + .slider { background: var(--look-success); }

/* 問題・式・説明文と、薄い補助文字。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .game-area, .step-chain, .tb-op, .paren, .op, .tl-div-paren) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-lead, .q-note, .question-expr .prompt, .game-hint, .step-empty, .suu1-progress, .st-note, .ku-tenkey-note, .fp-cap, .tl-sym.tl-tag .tag-dots) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.steps-title, .st-label, .tl-nav, .tl-choice-q, .tl-choice-hint, .tl-x-hit, .tl-line.tl-final .tl-term, .fp-lab, .tl-div .tl-div-rem .katex) {
  color: var(--look-warm); text-shadow: none;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tl-fly, .tb-rain) { color: var(--look-warm); text-shadow: 0 1px 2px #ffffffaa; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tl-arc { stroke: var(--look-warm); filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-banner, .inshu-question, .inshu-hint, .ku-hint, .suu1-answer-shown, .suu1-step.st-final) {
  color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.inshu-left, .ku-trail, .suu1-step, .fp-box) {
  color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tl-cur, .tl-slot, .placeholder, .ku-blank, .ld-box) {
  color: var(--look-warm); border-color: var(--look-border); background: var(--look-surface);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tl-cur, .ku-blank.active, .ld-box) {
  color: var(--look-warm); border-color: var(--look-warm); background: var(--look-warm-soft);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tl-term.tl-src, .tb-op.drop-side) {
  color: var(--look-warm); background: var(--look-warm-soft); box-shadow: inset 0 0 0 2px var(--look-warm);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tl-term.tl-click { text-decoration-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tl-term.tl-click:hover { background: var(--look-warm-soft); }

/* タイル：文字項＝紫、定数＝青。エレガントでは金・銀・銅。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.panel, .tb-card) {
  background: var(--hs-const-bg); color: var(--hs-const-ink);
  border: 2px solid var(--look-border); box-shadow: var(--hs-card-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.panel.outer, .tb-card.var-term) { background: var(--hs-var-bg); color: var(--hs-var-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.panel.term, .float-products .panel.float) { background: var(--hs-term-bg); color: var(--hs-term-ink); box-shadow: var(--hs-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tb-card.const-term, .tb-card.tb-empty) { background: var(--hs-const-bg); color: var(--hs-const-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tb-card.tb-zero { background: var(--look-soft); color: var(--look-muted); }
html[data-math-look="pop"] :is(.panel, .tb-card) { border-color: #15364f; box-shadow: 2px 3px 0 #15364f; }
html[data-math-look="pastel"] :is(.panel, .tb-card) { border-color: #b89bd0; }
html[data-math-look="elegant"] :is(.panel.outer, .tb-card.var-term) { border-color: #a68034; }
html[data-math-look="elegant"] :is(.panel, .tb-card.const-term, .tb-card.tb-empty) { border-color: #8996a8; }
html[data-math-look="elegant"] .panel.term { border-color: #a7714f; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tb-card.drop-ready, .tb-card.tb-flying.tb-flipped, .tb-pill) { box-shadow: 0 0 0 3px var(--look-warm), 0 5px 12px #24314925; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tb-card.ins-before::before, .tb-card.ins-after::after) { background: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tb-pill .tb-card { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tb-card.tb-shake { box-shadow: 0 0 0 3px var(--look-danger); }

/* 選択肢は正解・不正解の意味を色の明暗とは別に保つ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .tl-choice-btn, .inshu-choice, .ku-choice-btn) {
  color: var(--look-ink); background: var(--look-surface); border: 2px solid var(--look-border); box-shadow: var(--hs-card-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .tl-choice-btn, .inshu-choice, .ku-choice-btn):hover:not(:disabled):not(.locked):not(.correct):not(.wrong) { background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .tl-choice-btn, .inshu-choice, .ku-choice-btn).correct {
  color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .tl-choice-btn, .inshu-choice, .ku-choice-btn).wrong {
  color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tl-choice-done .tl-choice-ans, .ku-filled, .ku-done) { color: var(--look-success); }

/* 解答札・公式・説明にもライト配色を引き継ぐ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-reveal, #koshiki-panel, #tenkai2-koshiki-panel, .oj-explain, .oj-explain.open) {
  color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border); box-shadow: 0 3px 12px #24314920;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-reveal .ans-tag, .oj-explain .ex-title, .oj-explain .ex-note, .oj-explain .ai-reason) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .ai-steps { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.oj-explain .ex-close, .oj-explain .oj-explain-x) { color: var(--look-muted); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#koshiki-panel .kf-maru, .oj-explain .oj-maru, .k1-mark.circle) { color: var(--hs-orange); border-color: var(--hs-orange); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#koshiki-panel .kf-sankaku, .oj-explain .oj-sankaku, .k1-mark.triangle) { color: var(--hs-green); border-color: var(--hs-green); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#koshiki-panel .combo-box, .k1-mark.box) { color: var(--hs-violet); border-color: var(--hs-violet); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .k1-mark.triangle::before { filter: brightness(.58) saturate(1.2); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hl, .k1-hl, .fp-box.fp-hi, #koshiki-panel .kf-hit) { background: var(--look-warm-soft); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #koshiki-panel .kf-hit.kf-label { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .k1-hl-blue { background: var(--look-accent-soft); border-color: var(--hs-blue); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fp-box.fp-pair { background: var(--look-success-soft); border-color: var(--hs-green); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fp-box.fp-pair2 { background: var(--look-danger-soft); border-color: var(--hs-pink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fp-lab.fp-cross span { background: var(--look-surface); }

/* 表・筆算・はしご算。ペアの色は元の5色の意味を保って濃くする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.suu1-q table.q-table th, .suu1-q table.q-table td, .tl-div .tl-div-top, .tl-div .tl-div-under, .ld-dividend::after) { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .suu1-q table.q-table th { background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-f.ld-click:hover { background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-f.ld-sel { background: var(--look-warm-soft); outline-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-f.ld-paired { color: var(--hs-pair-color) !important; outline-color: var(--hs-pair-color) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-paired[style*="#facc15"] { --hs-pair-color: #85610a; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-paired[style*="#6ee7b7"] { --hs-pair-color: var(--hs-green); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-paired[style*="#60a5fa"] { --hs-pair-color: var(--hs-blue); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-paired[style*="#f59e0b"] { --hs-pair-color: var(--hs-orange); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ld-paired[style*="#a855f7"] { --hs-pair-color: var(--hs-violet); }

/* SVGの図やグラフ。mask/clipPath の白黒は演算用なので書き換えない。
   白い中抜き点は背景色に、白い文字・線・矢印は濃い色にする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .fp svg, .t2k-svg) :is([stroke="#fff"], [stroke="#ffffff"], [stroke^="rgba(255,255,255"], [stroke^="rgba(255, 255, 255"]):not(mask *):not(clipPath *) { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .fp svg, .t2k-svg) :is(text, polygon, path, g):is([fill="#fff"], [fill="#ffffff"], [fill^="rgba(255,255,255"], [fill^="rgba(255, 255, 255"]):not(mask *):not(clipPath *) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is(circle, rect):is([fill="#fff"], [fill="#ffffff"], [fill="#0d1120"]):not(mask *):not(clipPath *) { fill: var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn) circle[fill="#fff"]:not([stroke]):not(mask *):not(clipPath *) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([stroke="#ffd54a"], [stroke="#fbbf24"], [stroke="#ffd700"], [stroke^="rgba(255,213,74"], [stroke^="rgba(251,191,36"]):not(mask *):not(clipPath *) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([fill="#ffd54a"], [fill="#fbbf24"], [fill="#ffd700"], text[fill^="rgba(255,213,74"], text[fill^="rgba(251,191,36"]):not(mask *):not(clipPath *) { fill: var(--look-warm); }
/* 図の「黄色の形」（点・帯・塗った部分・線）は、明るい見た目でも黄色に見えるこはく色で描く（2026-09-26）。
   解説の文が「頂点（黄色）」「重なる部分（黄色）」「黄色の点＝反例」のように色を名指ししているのに、上の規則で
   見出し色（パステル＝茶・シンプル＝青灰）に置きかわり、文と図の色が食いちがっていた。字（text）は今のまま見出し色で読みやすく。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is(g, path, rect, circle, ellipse, polygon, polyline):is([fill="#fbbf24"], [fill="#ffd54a"], [fill="#ffd700"]):not(mask *):not(clipPath *) { fill: #f2b400; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is(g, path, rect, circle, ellipse, polygon, polyline, line):is([stroke="#fbbf24"], [stroke="#ffd54a"], [stroke="#ffd700"], [stroke^="rgba(255,213,74"], [stroke^="rgba(251,191,36"]):not(mask *):not(clipPath *) { stroke: #e0a200; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) circle:is([fill="#fbbf24"], [fill="#ffd54a"], [fill="#ffd700"]):not([stroke]) { stroke: #8a6100; stroke-width: 1.3px; } /* 白い紙の上でも点の形が分かるよう、濃い金のふち */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) g:is([fill="#fbbf24"], [fill="#ffd54a"], [fill="#ffd700"]) text:not([fill]) { fill: var(--look-warm); } /* 黄色の組の中の字は、こはく色を受けつがず読める色に */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([stroke="#60a5fa"], [stroke="#7dd3fc"], [stroke="#3b82f6"]):not(mask *):not(clipPath *) { stroke: var(--hs-blue); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([fill="#60a5fa"], [fill="#7dd3fc"], [fill="#3b82f6"]):not(mask *):not(clipPath *) { fill: var(--hs-blue); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([stroke="#34d399"], [stroke="#6ee7b7"]):not(mask *):not(clipPath *) { stroke: var(--hs-green); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([fill="#34d399"], [fill="#6ee7b7"]):not(mask *):not(clipPath *) { fill: var(--hs-green); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) [stroke="#fb923c"]:not(mask *):not(clipPath *) { stroke: var(--hs-orange); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) [fill="#fb923c"]:not(mask *):not(clipPath *) { fill: var(--hs-orange); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([stroke="#ec4899"], [stroke="#f472b6"]):not(mask *):not(clipPath *) { stroke: var(--hs-pink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(svg.numline, svg.q-fig, svg.venn, .t2k-svg) :is([fill="#ec4899"], [fill="#f472b6"]):not(mask *):not(clipPath *) { fill: var(--hs-pink); }
/* 数直線の青・桃の番号丸は、丸の上だけ白い番号を保つ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) svg.numline text[fill="#fff"][font-size="11"][font-weight="700"] { fill: #fff; }

/* KaTeX の中で \textcolor / \color / \fcolorbox に暗い背景用の色を直書きしている所（いま入力する枠の黄色い「?」・約分の斜線・移動のヒントなど）。
   明るい見た目ではその見た目の色に置きかえる。KaTeX は style="color:#fbbf24" の形で出すので、16進と rgb() の両方で拾う（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="#fbbf24"], [style*="251, 191, 36"], [style*="#ffd700"], [style*="255, 215, 0"], [style*="#ffd54a"], [style*="255, 213, 74"], [style*="#fde047"], [style*="253, 224, 71"], [style*="#fde68a"], [style*="253, 230, 138"]) { color: var(--look-warm) !important; border-color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="#60a5fa"], [style*="96, 165, 250"], [style*="#7dd3fc"], [style*="125, 211, 252"], [style*="#38bdf8"], [style*="56, 189, 248"]) { color: var(--look-accent) !important; border-color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="#34d399"], [style*="52, 211, 153"], [style*="#6ee7b7"], [style*="110, 231, 183"], [style*="#7de8aa"], [style*="125, 232, 170"]) { color: var(--look-success) !important; border-color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="#f87171"], [style*="248, 113, 113"], [style*="#fca5a5"], [style*="252, 165, 165"], [style*="#fb7185"], [style*="251, 113, 133"]) { color: var(--look-danger) !important; border-color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="color:white"], [style*="color: white"], [style*="#fff"], [style*="255, 255, 255"]) { color: var(--look-ink) !important; }
/* 黄色い \boxed{?}（いま入力する枠）は、字色を落ち着かせたぶん、枠の中を薄い暖色にして「ここ」と分かるようにする */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .katex :is([style*="#fbbf24"], [style*="251, 191, 36"]) .boxpad { background: var(--look-warm-soft); }

/* 連結待ちの2枚（.tb-pill）を1枚に見せる（2026-10-15 本人「同類項を計算する際に結合されたパネルの境目の線は、あっても極力めだたないように」。中学の同類項マスターと同じ）。
   ・明るい見た目：札の太い枠が境目で2本重なって太い線に見えた → 境目の枠の幅を0に（外側の枠は残す）
   ・グラデーションの札（いつもの・エレガント）：2枚それぞれで色が始まり、境目で色がとんだ → 背景を2枚合わせた幅で描き、右の札はずらす（幅は boardRenderPill が入れる） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tb-pill .tb-card.join-left { border-right-width: 0 !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tb-pill .tb-card.join-right { border-left-width: 0 !important; }
.tb-pill[style*="--pill-w"] .tb-card { background-size: var(--pill-w) 100% !important; background-repeat: no-repeat !important; }
.tb-pill[style*="--pill-w"] .tb-card.join-left { background-position: 0 0 !important; }
.tb-pill[style*="--pill-w"] .tb-card.join-right { background-position: var(--pill-x) 0 !important; }