/* 2乗に比例専用。出題・判定・グラフ座標・ドラッグ処理は変更しない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-giveup-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-giveup-btn:hover,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain.open,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .ai-steps,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .ai-line .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-explain-x:hover,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .two-num-explain .oj-explain-x:hover,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-text,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #ans-input-btn.active,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .blank.filled,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .kt .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .blank.filled .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-hint-table table,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table table,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table td.y-cell .ph.active,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-text.coord-mode .eq-line,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-work .orig-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-work .subst-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-work .final-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-autocalc-toggle,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-chip-const,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .strike-red,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .add-vert,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .click-tooltip { color:var(--look-ink); text-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .rotate-hint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-undo,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table td.dots,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table td.y-cell .ph,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table td.y-cell.passed,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-text.coord-mode .ask-line,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-work .subst-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-zero-faint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-tip,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-note { color:var(--look-muted); text-shadow:none; }
/* 5問チャレンジの帯（.challenge-bar）はこの組に入れない。帯の色と字の色は natural-tools.css の --tool-primary／--tool-primary-ink で決める（ほかのアプリと同じ）。
   ⚠️ ここで --look-warm にしていたら、シンプルは --look-warm が帯と同じ青（#365e79）なので字が消えていた（2026-10-10） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-alt-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-explain-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-alt-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-fig figcaption,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-explain-x,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .two-num-explain .oj-explain-x,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .ai-reason,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-display,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hl-yellow,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #read-hint-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .blank,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-hint-table td.minmax-min,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-hint-table .markers .min-mark,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table td.y-cell.filled,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table .min-label,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-prompt.coord-prompt-pos,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-work .placeholder-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-slot,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .flying-token,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-prompt .prompt-blank,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .intersect-line-label .pill,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .graph-line-label .pill,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-text,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-tip .key,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-note .key { 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"]) .range-hint-table td.minmax-max,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-hint-table .markers .max-mark,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-table .max-label,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-final-ans,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-final-ans .ans-tex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-slot.received,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-chip-x,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice.correct,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-ans { color:var(--look-success); text-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .range-wrong-hint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .flip-btn.active,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .add-red,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice.wrong { color:var(--look-danger); text-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-choices .coord-swap-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .eq-tap,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-chip,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .flip-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-label { color:var(--look-accent); text-shadow:none; }
/* 2乗に比例のグラフ・数式・入力。操作位置と計算処理は変更しない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-instruction, .work-trail-title, .work-trail-item.dim, .eq-work-line.dim, .eq-hirei-note, .eq-autocalc-toggle, .solved-hint, .solved-tip) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-hint, .hint-text, .step-prompt, .eq-work-line.final, .eq-shortcut-text, .eq-shortcut-formula, .eq-shortcut-formula .katex, .eq-shortcut-formula .katex *, .graph-read-fraction-part.active) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.eq-shortcut-formula, .eq-work-line.shortcut) { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-shortcut-arrow, .eq-hirei-cancel-part::after { background: var(--look-warm); box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-shortcut-arrow::before { border-right-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-fly-token { color: var(--look-warm); text-shadow: 0 1px 0 var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw { background: var(--look-border); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw.on { background: var(--look-accent); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw-dot { background: #fff; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .work-trail { 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(.graph-read-hint-btn, #ans-input-btn) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid #fff; border-radius: var(--tool-key-radius); box-shadow: var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-hint-btn, #ans-input-btn):active:not(:disabled) { transform: translateY(1px); box-shadow: var(--tool-control-pressed-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-hint-btn, #ans-input-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice, .eq-hirei-action) { color: var(--look-ink); background: var(--work-choice-bg); border-color: var(--work-choice-border); border-radius: var(--work-card-radius); box-shadow: var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice, .eq-hirei-action):hover:not(:disabled) { color: var(--look-ink); background: var(--work-choice-hover); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-hirei-action.data { 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"]) .eq-hirei-action.formula { color: var(--look-accent); background: var(--look-accent-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(.eq-hirei-action.final, .choice.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"]) .choice.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"]) .eq-hirei-action.is-inert { background: transparent; border-color: transparent; box-shadow: none; }
html[data-math-look="elegant"] .eq-hirei-action { background: var(--work-zero-bg); color: var(--work-zero-ink); border-color: var(--work-zero-border); }
html[data-math-look="elegant"] .eq-hirei-action.formula { background: var(--work-positive-bg); color: var(--work-positive-ink); border-color: var(--work-positive-border); }
html[data-math-look="elegant"] .eq-hirei-action.data { background: var(--work-negative-bg); color: var(--work-negative-ink); border-color: var(--work-negative-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey, .eq-calc-tenkey) { color: var(--look-ink); background: var(--tool-panel); border: 2px solid var(--tool-frame); border-radius: var(--tool-radius); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-title, .eq-calc-tenkey-titlebar, .eq-calc-tenkey-close) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-input, .eq-calc-tenkey-input) { color: var(--look-ink); background: var(--tool-display); border: 2px solid var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn) { color: var(--look-ink); background: var(--tool-key); border-color: var(--tool-key-frame); border-radius: var(--tool-key-radius); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn):is(.sign, .symbol) { color: var(--tool-special-ink); background: var(--tool-special); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn).action { color: var(--tool-action-ink); background: var(--tool-action); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn):hover { color: var(--look-ink); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-input, .eq-calc-tenkey-input).error { 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"]) .graph-read-tenkey-input.ok { 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(.read-hint-box, .read-hint-box .hint-badge, .graph-line-label .pill) { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border); box-shadow: 0 3px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.read-hint-box .hint-formula, .read-hint-box .hint-note) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-label, .solved-ans) { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) { background: var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="rgba(255,255,255,0.15)"], [stroke="rgba(255,255,255,0.13)"]) { stroke: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="rgba(255,255,255,0.7)"], [stroke="rgba(255,255,255,0.6)"], [stroke="#fff"], [stroke="#ffffff"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [fill^="rgba(255,255,255"] { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="#fbbf24"], [stroke="#ffd700"], [stroke="#ffd54a"]) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([fill="#fbbf24"], [fill="#fde68a"], [fill="#ffd700"], [fill="#fff"], [fill="#ffffff"]) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [stroke="#22c55e"] { stroke: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [fill="#22c55e"] { fill: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .eq-fly-token) :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .eq-fly-token) :is([style*="color:#ffd700"], [style*="color: #ffd700"], [style*="color: rgb(255, 215, 0)"], [style*="color:#fbbf24"], [style*="color: rgb(251, 191, 36)"]) { color: var(--look-warm) !important; }
/* 2乗に比例専用の式パネル・分数テンキー。 */
.appearance-switch { margin: 0 auto 24px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .subtitle { opacity: 1; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-restart-top { color: var(--look-ink) !important; background: var(--look-surface) !important; border: 2px solid var(--look-border) !important; box-shadow: 0 3px 0 var(--look-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev, .shape-nav-next) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text, .coord-work .orig-eq, .coord-work .subst-eq, .coord-work .final-eq, .target-eq, .question-text.coord-mode .eq-line, .read-formula .kt .katex, .read-formula .blank.filled .katex) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text.coord-mode .ask-line, .coord-work .subst-note, .coord-panel-tip, .solved-tip, .graph-read-left-title, #ai-tk-display .ai-q-dim, .coord-autocalc-toggle) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hl-yellow, #question-text .q-hl, .coord-work .placeholder-eq, .coord-action .ac-token, .target-eq .te-slot, .target-eq .te-x, .coord-work .te-slot, .graph-read-left-title .prompt-blank, .read-formula .blank.active) { color: var(--look-warm); 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"]) :is(.coord-work, .target-eq-host, .graph-read-left-panel) { 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(.flying-token, .target-eq .reduce-mini, #ai-tk-display .ai-q, .coord-tenkey .ctk-prefix, .coord-tenkey .ctk-frac-disp .cf.active, .oj-explain .oj-shape-head, .oj-explain .oj-shape-why) { 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(.target-eq .te-frac-line, .coord-tenkey .ctk-frac-disp .cfl) { background: currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.coord-action, .target-eq .te-action, .target-eq .te-swap-btn, .coord-choices .coord-swap-btn, .graph-read-plus-helper .grph-plus-btn, .oj-explain .oj-method-btn) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid var(--tool-frame); border-radius: var(--work-button-radius); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.coord-action, .target-eq .te-action, .target-eq .te-swap-btn, .coord-choices .coord-swap-btn):active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 3px #0002; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.target-eq .te-chip, .target-eq .te-chip-const) { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: var(--work-zero-border); box-shadow: var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .te-chip-x { color: var(--work-positive-ink); background: var(--work-positive-bg); border-color: var(--work-positive-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.target-eq .te-chip-zero, .target-eq .te-zero-faint) { color: var(--look-muted); background: transparent; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.target-eq .te-final, .target-eq .te-slot.received, .target-eq .te-x.received, .coord-work .te-slot.received, .read-formula .blank.filled) { 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"]) .coord-autocalc-toggle { 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"]) .coord-autocalc-toggle .ac-switch { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-autocalc-toggle.on .ac-switch { background: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey { color: var(--look-ink); background: var(--tool-panel); border: 2px solid var(--tool-frame); border-radius: var(--tool-radius); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.coord-tenkey .ctk-head, .coord-tenkey .ctk-close, .graph-read-tenkey-title.hint) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-formula { 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"]) .coord-tenkey .ctk-display { color: var(--look-ink); background: var(--tool-display); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key { color: var(--look-ink); background: var(--tool-key); border: 2px solid var(--tool-key-frame); border-radius: var(--tool-key-radius); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key.ctk-var { color: var(--look-success); background: var(--look-success-soft); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key.ctk-var .katex { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key:is(.ctk-op, .ctk-frac) { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key:is(.ctk-back, .ctk-clear) { color: var(--tool-action-ink); background: var(--tool-action); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-frac-ic i { border-color: currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-frac-ic::after { background: currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key:hover { filter: brightness(1.06); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key:active { transform: translateY(2px); box-shadow: inset 0 2px 3px #0002; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-display.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"]) .coord-tenkey .ctk-display.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(#area-hint-btn, #move-p-btn) { color: var(--tool-special-ink) !important; background: var(--tool-special) !important; border: 2px solid #fff !important; box-shadow: var(--tool-control-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#area-hint-btn, #move-p-btn):active { transform: translateY(2px); box-shadow: var(--tool-control-pressed-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #area-hint-btn.active { color: var(--look-warm) !important; background: var(--look-warm-soft) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-line-label, .click-tooltip) { 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"]) .graph-read-left-panel .read-formula { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .blank { 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"]) .mode-chip { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .flying-token, .oj-explain) :is([style*="color: rgb(253, 230, 138)"], [style*="color: rgb(255, 213, 74)"], [style*="color: rgb(252, 211, 77)"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [stroke^="rgba(255,255,255,0."] { stroke: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="rgba(255,255,255,0.7)"], [stroke="rgba(255,255,255,0.6)"], [stroke="rgba(255,255,255,0.65)"], [stroke="rgba(255,255,255,0.55)"], [stroke="rgba(135,206,250,0.85)"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) text[stroke="rgba(15,23,42,0.9)"] { stroke: var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) foreignObject [style*="color: rgba(255, 255, 255"] { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) circle[fill="#22c55e"] { fill: #22c55e; stroke: #000; stroke-width: 1.5; }
html[data-math-look="elegant"] .coord-tenkey .ctk-key:is(.ctk-back, .ctk-clear) { border-color: #a26b4c; box-shadow: inset 0 1px #fff0e0,0 3px #a26b4c; }
@media (max-width: 600px) {
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row > button { width: auto !important; min-width: 0 !important; flex: 1; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top: 64px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-autocalc-toggle { font-size: .68em; padding: 5px 7px; left: 8px; gap: 4px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-box-controls { gap: 5px; right: 8px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-box-controls .btn-undo { font-size: .68em; padding-inline: 8px; }
}

/* 図形の経路・面積の文字は、塗りや正解の点とは別に濃くする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) [style*="color: rgb(34, 197, 94)"] { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) [style*="color: rgb(236, 72, 153)"] { color: #ae2167 !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-tip .key { color: var(--look-warm); }

html[data-math-look="pastel"] .mode-btn-4 { --candy-top:#e9fbf1; --candy-bottom:#dcf8e9; --candy-shadow:#d5a6d4; --mode-ink:#195d40; }
html[data-math-look="pastel"] .mode-btn-9 { --candy-top:#e9fbf1; --candy-bottom:#dcf8e9; --candy-shadow:#d5a6d4; --mode-ink:#195d40; }
html[data-math-look="pastel"] .mode-btn-1 { --candy-top:#fff7e9; --candy-bottom:#ffeace; --candy-shadow:#d5a6d4; --mode-ink:#865017; }
html[data-math-look="pastel"] .mode-btn-6 { --candy-top:#f8efff; --candy-bottom:#f1e2ff; --candy-shadow:#d5a6d4; --mode-ink:#583179; }
html[data-math-look="pastel"] .mode-btn-7 { --candy-top:#f8efff; --candy-bottom:#f1e2ff; --candy-shadow:#d5a6d4; --mode-ink:#583179; }
html[data-math-look="pastel"] .mode-btn-5 { --candy-top:#e7f3ff; --candy-bottom:#d7eaff; --candy-shadow:#d5a6d4; --mode-ink:#345a7e; }
html[data-math-look="pastel"] .mode-btn-3 { --candy-top:#fff0f7; --candy-bottom:#ffe2ed; --candy-shadow:#d5a6d4; --mode-ink:#98436b; }
html[data-math-look="pastel"] .mode-btn-2 { --candy-top:#dcf7ff; --candy-bottom:#c6f0ff; --candy-shadow:#d5a6d4; --mode-ink:#316781; }
html[data-math-look="pastel"] .mode-btn-8 { --candy-shadow:#d5a6d4; --mode-ink:#714717; background:linear-gradient(180deg,#fff0ac,#ffe68a); }
html[data-math-look="elegant"] .mode-btn-9 { --jewel-top:#426754; --jewel-base:#254537; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn .katex { color:inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#q-instruction,#q-hint) { color:var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #q-hint { color:var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#read-hint-btn,.oj-alt-btn,.flip-btn) { color:var(--tool-special-ink); background:var(--tool-special); border:2px solid var(--tool-key-frame); border-radius:var(--tool-key-radius); box-shadow:var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#read-hint-btn,.oj-alt-btn,.flip-btn):active { box-shadow:var(--tool-control-pressed-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-proceed { color:var(--tool-answer-ink); background:var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.range-hint-table,.range-table) { color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.range-hint-table td,.range-table td) { border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.range-hint-table td.head,.range-table td.head) { color:var(--look-ink); background:var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.range-table td.y-cell .ph,.step-prompt .prompt-blank,.hl-yellow) { 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(.range-final-ans,.range-wrong-hint) { 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"]) .range-final-ans .ans-tex { color:var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .read-formula .blank.active { color:var(--look-warm); 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"]) .read-formula .blank.filled { color:var(--look-ink); background:var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-layout.coord-v2 > .coord-work { background:none; border:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-head-label.hint { color:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-tenkey .ctk-key.ctk-pass { color:var(--tool-special-ink); background:var(--tool-special); border-color:var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.target-eq .eq-tap,.coord-work .placeholder-eq) { color:var(--work-zero-ink); background:var(--work-zero-bg); border-color:var(--work-zero-border); box-shadow:var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .target-eq .rate-frac .rf-bar { border-color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-grid .sg-hline { background:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.strike-red,.add-vert) { color:var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-cancel::after { background:var(--look-danger); box-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .flying-token { 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"]) .intersect-line-label .pill { color:var(--look-accent); background:var(--look-surface); border-color:var(--look-border); box-shadow:0 3px var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-display { 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"]) .solved-note { color:var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-note .key { color:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) { background:var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) [stroke^="rgba(255,255,255"] { stroke:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) [stroke="rgba(255,255,255,0.15)"] { stroke:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) [fill^="rgba(255,255,255"] { fill:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) :is([stroke="#ffd700"],[stroke="#fbbf24"]) { stroke:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) :is([fill="#ffd700"],[fill="#fbbf24"]) { fill:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) text:is([fill="#86efac"],[fill="#22c55e"],[fill="#5eead4"]) { fill:var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) text[stroke^="rgba(30,27,75"] { stroke:var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.range-hint-table svg,.oj-shape-fig svg,.answer-display svg) foreignObject [style*="color: rgb(94, 234, 212)"] { color:var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box,.answer-box,.oj-explain) [style*="color: rgb(125, 211, 252)"] { color:var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bug-modal,.portrait-lock-card) { 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"]) .bug-modal textarea { color:var(--look-ink); 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"]) .portrait-lock { color:var(--look-ink); background:var(--look-bg); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.portrait-lock-title,.portrait-lock-app-title strong,.bug-modal h3) { color:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.portrait-lock-text,.portrait-lock-app-title,.portrait-lock-continue span) { color:var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .portrait-lock-continue { color:var(--tool-primary-ink); background:var(--tool-primary); border:2px solid var(--tool-key-frame); }

/* 直線・動点Qのシアンは、明るい紙の上でも見える青緑にする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.oj-shape-fig svg,.answer-display svg) :is([stroke="#67e8f9"],[stroke="#22d3ee"],[stroke="#5eead4"]) { stroke:#14788d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph,.range-hint-fig svg,.oj-shape-fig svg,.answer-display svg) :is([fill="#67e8f9"],[fill="#22d3ee"],[fill="#5eead4"]) { fill:#14788d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box,.answer-box,.oj-explain) :is([style*="color: rgb(103, 232, 249)"],[style*="color: rgb(34, 211, 238)"]) { color:#14788d !important; }

/* 方眼の上のヒント・解説の図（右に5／下に3 など）は「黄色い字＋濃紺のふちどり」＝暗い背景用。
   明るい見た目では字だけ見出し色に変わり、濃紺のふちどりが残って不自然だった。ふちどりは紙の色（白）にする（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) svg text.oj-fig { stroke: #fff !important; }

/* グラフをよむ・かくのヒントで方眼に置く格子点の座標（水色 #67e8f9 の svg 文字）は暗い背景用。
   明るい見た目では強調色にして、方眼の線の上でも読めるよう白いふちどりを付ける（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) svg text[fill="#67e8f9"] { fill: var(--look-accent); stroke: #fff; stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }