/* 二次方程式専用の配色。数式・判定・配置・ドラッグの処理は既存のまま。 */
.appearance-switch { margin:20px auto 24px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-judge-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .seiri-flip-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-kp-prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-kp-prompt .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .seiri-kp-close:hover,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-kp-grip,
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"]) .question-text,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-panel-eq .katex,
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"]) .choice,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-term,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-subst-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-word,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-template,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-radicand-action,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-slot,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-inline-result,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-input,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-header .calc-keypad-grip,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-display,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-plus-add,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kp-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-steps,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-btn-primary { 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"]) .heiho-q-pre,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-pre,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .seiri-kp-close,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-auto-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .seiri-panel-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .play-area.formula-single .steps-list::before,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .corner-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-line.prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-line .eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .placeholder-box,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-eq,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .avalab-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step-line.avalab-lead,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .avalab-alt-note,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-reduce-part.is-slashed,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-help,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle-wrap,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-input.is-empty,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-header,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-close,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-question,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-hint { color:var(--look-muted); text-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-len-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-hint-btn,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-kp-prompt.is-hint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heiho-kp-prompt.is-hint .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .board-side-note,
/* 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"]) .ai-explain-btn,
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-reveal,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .placeholder-box.mini,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .wrong-hint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice-prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-subst-val,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-subst-val .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-eq-x.aval-x-hit,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-eq-a.aval-x-hit,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-eq-x.aval-x-hit .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-eq-a.aval-x-hit .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-fly,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .aval-fly .katex,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-manip-prompt,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-slot.is-action,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-slot.is-input-target,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manip-help.flash,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-question.is-hint,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-plus-message,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kp-btn.kp-frac { 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"]) .bunshou-judge-btn.correct,
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"]) .manip-answer,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-display.kp-correct,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-ans,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-alt { 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"]) .bunshou-judge-btn.wrong,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice.wrong,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .calc-keypad-display.kp-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"]) .bunshou-lead,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-pair-label,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-formula,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-panel-label,
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; }
html[data-math-look="pop"] .mode-btn-6 { --mode-paper:#73e1dd; }
html[data-math-look="pastel"] .mode-btn-6 { --candy-top:#dcf7ff; --candy-bottom:#c6f0ff; --candy-shadow:#d5a6d4; --mode-ink:#316781; }
html[data-math-look="elegant"] .mode-btn-6 { --jewel-top:#426172; --jewel-base:#263e50; }
html[data-math-look="pop"] .mode-btn-7 { --mode-paper:#b0e66f; }
html[data-math-look="pastel"] .mode-btn-7 { --candy-top:#e9fbf1; --candy-bottom:#dcf8e9; --candy-shadow:#d5a6d4; --mode-ink:#195d40; }
html[data-math-look="elegant"] .mode-btn-7 { --jewel-top:#426754; --jewel-base:#254537; }
html[data-math-look="pop"] .mode-btn-8 { --mode-paper:#ffb65c; }
html[data-math-look="pastel"] .mode-btn-8 { --candy-top:#fff7e9; --candy-bottom:#ffeace; --candy-shadow:#d5a6d4; --mode-ink:#865017; }
html[data-math-look="elegant"] .mode-btn-8 { --jewel-top:#735746; --jewel-base:#483a32; }
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"]) .subtitle { opacity:1; }
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(#btn-prev,#btn-restart-top,.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"]) #btn-restart-top { background:var(--look-surface) !important; border:2px solid var(--look-border) !important; box-shadow:0 3px var(--look-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-panel,.formula-manip-card,.oj-explain.open,.manip-board) { 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"]) .play-divider { background:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-formula,.corner-btn,.aval-subst-btn,.seiri-flip-btn,.zukei-hint-btn,.zukei-len-btn,.bunshou-judge-btn,.calc-plus-add) { 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(.btn-formula,.corner-btn,.aval-subst-btn,.seiri-flip-btn,.zukei-hint-btn,.zukei-len-btn,.bunshou-judge-btn,.calc-plus-add):hover:not(:disabled) { filter:brightness(1.05); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-formula,.corner-btn,.aval-subst-btn,.seiri-flip-btn,.zukei-hint-btn,.zukei-len-btn,.bunshou-judge-btn,.calc-plus-add):active:not(:disabled) { 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(.btn-formula,.corner-btn,.aval-subst-btn,.seiri-flip-btn,.zukei-hint-btn,.zukei-len-btn,.bunshou-judge-btn,.calc-plus-add):disabled { box-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-forward { 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(.choice,.seiri-term,.seiri-ghost,.manip-term.is-action,.manip-term.is-solved,.manip-term.manip-answer,.formula-slot,.formula-radicand-action) { color:var(--work-zero-ink); background:var(--work-zero-bg); border:2px solid var(--work-zero-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:hover:not(.disabled),.manip-term.is-action:hover,.formula-slot.is-action:hover) { color:var(--look-ink); background:var(--look-soft); border-color:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.seiri-term[data-d="1"],.formula-slot.is-filled,.manip-term.is-solved) { 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(.choice.correct,.bunshou-judge-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.wrong,.bunshou-judge-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(.placeholder-box,.calc-input,.formula-slot.is-input-target) { 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"]) .calc-input.is-error { color:var(--look-danger); border-color:var(--look-danger); background:var(--look-danger-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manip-drop-rhs.drop-ready,.seiri-term.drop-ready) { border-color:var(--look-accent); background:var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .seiri-merge-part + .seiri-merge-part { border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-bar { border-color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-root-mark :is(polyline,line) { stroke:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-reduce-part.is-slashed::after { border-color:var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.aval-fly,.aval-fly .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(.calc-keypad,.heiho-kp) { color:var(--look-ink); background:var(--tool-panel); border:3px 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(.calc-keypad-header,.heiho-kp-handle) { color:var(--look-accent); border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-keypad-grip,.heiho-kp-grip) { color:var(--look-muted); background:transparent; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-keypad-question,.heiho-kp-prompt) { color:var(--look-ink); background:var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-keypad-question.is-hint,.heiho-kp-prompt.is-hint) { 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"]) .calc-keypad-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"]) .kp-btn { 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"]) .kp-btn:hover { filter:brightness(.98); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kp-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"]) :is(.kp-btn.kp-frac,.kp-btn[data-key="sqrt"],.kp-btn[data-key="pm"],.kp-btn[data-key="+"],.kp-btn[data-key="-"],.kp-btn[data-key="times"],.kp-btn[data-key="sq"],.kp-btn[onclick*="sqrt"],.kp-btn[onclick*="sq"],.kp-btn[onclick*="'+'"],.kp-btn[onclick*="'-'"]) { 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(.kp-btn[data-key="a"],.kp-btn[data-key="x"],.kp-btn[onclick*="'x'"]) { color:var(--look-success); background:var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kp-btn.kp-del { 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"]) .calc-keypad-display.kp-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"]) .calc-keypad-display.kp-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"]) .zukei-label { fill:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-label.yl { fill:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-label.rd { fill:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.zukei-svg,.zukei-arrow-svg) [style*="stroke:rgba(255"] { stroke:var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.zukei-svg,.zukei-arrow-svg) [stroke^="rgba(255"] { stroke:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.zukei-svg,.zukei-arrow-svg) [fill="#fff"], html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-arrow-svg [fill^="rgba(255"] { fill:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-svg [style*="fill:rgba(255"] { fill:var(--look-soft) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-svg [style*="fill:rgba(251"] { fill:var(--look-warm-soft) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .zukei-svg [style*="stroke:#fbbf24"] { stroke:var(--look-warm) !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:2px solid 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); }

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-btn { color:var(--look-ink); background:var(--look-soft); border:2px solid var(--look-border); box-shadow:var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-btn-primary { color:var(--tool-primary-ink); background:var(--tool-primary); }
html[data-math-look="elegant"] .solved-btn:not(.solved-btn-primary) { color:#f7e5b5; background:#25324b; }

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card { color:var(--look-ink); background:var(--tool-paper); border:3px solid var(--tool-dialog-border); border-radius:var(--tool-radius); box-shadow:var(--tool-dialog-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.kp-btn[onclick*="'pm'"],.kp-btn[onclick*="'times'"]) { color:var(--tool-special-ink); background:var(--tool-special); }
/* エレガントは「x＝−3 を代入」のボタンが濃紺なので、中の値（見出し色の茶）が読めない。ボタンの字色に合わせた金に（2026-09-25） */
html[data-math-look="elegant"] .aval-subst-btn :is(.aval-subst-val, .aval-subst-val .katex) { color: #f2d48b; }