/* 一次関数のグラフ・数式・入力。操作位置と計算処理は変更しない。 */
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; }
/* 一次関数専用の式パネル・分数テンキー。 */
.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); }

/* 方眼の上のヒント・解説の図（右に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; }
/* 図形と動点の解説（辺ごとの小さい図＋「変域・高さ・式」の3行）は暗い背景用の色のまま。
   明るい見た目では式が白字で紙にとけて見えず、「変域」などの札も薄い黄だった。字色と見出し色にそろえる（2026-09-26） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-sec { border-top-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-row { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-lbl { 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"]) .oj-explain .oj-shape-fig svg { background: transparent; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-fig svg text[fill="#f472b6"] { fill: #be185d; } /* 点P の名前（点の桃色の濃い版） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-shape-fig svg [stroke="#22d3ee"] { stroke: var(--look-accent); } /* 底辺 AD の太線（薄い水色）を「底辺 ○」の字と同じ色に */
/* 問題のグラフの2本目の直線 m（水色 #67e8f9）と、その名前・切片の数（同じ水色の直書き）は暗い背景用で、
   明るい見た目では白い紙にとけて見えにくかった（2026-09-28 本人の指摘・交点を求める／グラフと面積）。y=ax² と同じ濃い青緑に。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box 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, .question-box svg, .answer-display svg) :is(circle, rect, path, polygon):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) :is([style*="#67e8f9"], [style*="103, 232, 249"]) { color: #14788d !important; }
/* シンプルは見出し色（--look-warm）が青なので、グラフの2本（① 黄→青・② 水色→青緑）が見分けにくい。
   シンプルだけ、① の線と名前・数をシンプルのベージュ（ボタンの茶と同じ #765d39）にする（2026-09-28） */
html[data-math-look="simple"] :is(.graph, .question-box svg, .answer-display svg) :is([stroke="#fbbf24"], [stroke="#ffd700"], [stroke="#ffd54a"]) { stroke: #765d39; }
html[data-math-look="simple"] .question-box :is(.oj-fo-item, .oj-fo-item *):is([style*="251, 191, 36"], [style*="#fbbf24"], [style*="255, 215, 0"], [style*="#ffd700"]) { color: #765d39 !important; }
/* 交点を求める（加減法）の操作枠の筆算の横線（.sg-hline）は白 55% の直書きで、明るい見た目では白地に白で見えなかった
   （2026-09-28 本人の指摘）。y=ax² と同じく字色にする */
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); }
/* グラフと面積のヒント：切片から「横に1・縦に傾き」の矢印と数（黄緑 #a3e635 の直書き）は白地で薄い。その見た目の緑に。
   ⚠️ 黒っぽい札（傾き＝…）の中の黄緑はそのまま（style に background があるものは除く） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg) [stroke="#a3e635"] { 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) [fill="#a3e635"] { fill: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box :is([style*="163, 230, 53"], [style*="#a3e635"]):not([style*="background"]) { color: var(--look-success) !important; border-color: var(--look-success) !important; }
/* グラフをよむのヒント：切片の点の横の黒っぽい札（背景 rgba(15,23,42,…)）の字は、置きかえで濃い緑になり黒地に沈んでいた。元の明るい緑に戻す */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box [style*="rgba(15, 23, 42"]:is([style*="34, 197, 94"], [style*="#22c55e"]) { color: #22c55e !important; }
/* ヒントの図の字の濃紺のふちどり（暗い背景用）は、明るい見た目では紙の色に（y=ax² と同じ） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .answer-display svg) text[stroke^="rgba(30,27,75"] { stroke: var(--look-surface); }
/* 図形と動点の最後「△APD の面積の変化を表すグラフはどれ？」の選択肢のグラフは、軸・目盛り・数が白の直書きで、
   明るい見た目では白地に白で見えずグラフの線だけが浮いていた（2026-09-29 本人の指摘・グラフを選ぶ）。軸と数は字色、目盛りは控えめな字色に */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-choices svg line:is([stroke="rgba(255,255,255,0.65)"], [stroke^="rgba(255,255,255,0.6"], [stroke^="rgba(255,255,255,0.7"], [stroke^="rgba(255,255,255,0.8"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-choices svg line:is([stroke^="rgba(255,255,255,0.5"], [stroke^="rgba(255,255,255,0.4"], [stroke^="rgba(255,255,255,0.3"], [stroke^="rgba(255,255,255,0.2"], [stroke^="rgba(255,255,255,0.1"]) { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .coord-choices svg text[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"]) .coord-choices svg text[fill="rgba(255,255,255,0.75)"] { fill: var(--look-muted); } /* 原点の O */