/* 学習の処理と配置は維持し、配色のみを各デザインへ合わせる。 */
.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"]) :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 0 var(--look-shadow) !important; }
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-text,.q-instruction,.solved-text,.kai-handle,.teiri-sheet) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.word-placeholder,.kai-placeholder,.kai-note,.work-footer) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.assumption-line,.condition-title,.cong-symbol,.feedback,.input-guide,.hint-title,.hint-circle,.total-ways-diagonal-note,.proof-variant-label,.answer-inline.bare,.ans-note,.kai-note.show) { 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(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-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(#answer-toggle,#btn-answer,#step-forward-btn,#proof-forward-btn,#teiri-forward-btn,#teiri-reset-btn) { 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(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-btn):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(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button) { 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"]) :is(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button):hover:not(:disabled) { filter: brightness(1.04); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button):active:not(:disabled) { box-shadow: inset 0 2px 3px #0002; transform: translateY(2px); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn.utility,.word-btn.utility,.numpad .clear-btn,.numpad .back-btn,.kai-numpad .kai-back) { color: var(--tool-action-ink); background: var(--tool-action); }
html[data-math-look="elegant"] :is(.key-btn.utility,.word-btn.utility,.numpad .clear-btn,.numpad .back-btn,.kai-numpad .kai-back) { border-color:#a26b4c; box-shadow:inset 0 1px #fff0e0,0 3px #a26b4c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn.submit,.word-btn.submit,#simplify-btn) { color: var(--tool-primary-ink); background: var(--tool-primary); border: 2px solid var(--tool-key-frame); 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(.tri-input,.word-answer,.property-sentence,.property-blank,:where(#proof-lines),.proof-input,.proof-fill,.answer-inline,.kai-display,.kai-slot,.fraction-slot) { 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"]) :is(.word-pill,.step-pill,.total-ways-note) { 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(.slot.active,.property-blank.active,.proof-fill.active,.fraction-slot.active,.kai-slot.active,.highlight-btn.active) { color: var(--tool-answer-ink); background: var(--tool-answer); border-color: var(--look-accent); box-shadow: 0 0 0 2px var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn.correct,.ok-badge,.kai-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"]) :is(.proof-line.done,.solved-answer,.solved-answer .katex) { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .proof-line.active { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn.wrong,.tri-input.wrong,.slot.wrong,.proof-fill.active.wrong,.kai-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"]) #kai-overlay { 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(.fraction-bar,.kai-bar) { background: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kai-numpad .kai-frac-key { 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"]) .kai-numpad .kai-frac-key .katex { color: inherit; }
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); box-shadow: var(--tool-dialog-shadow); }
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(.bug-modal h3,.portrait-lock-title,.portrait-lock-app-title strong) { 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); }
@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 { min-width:0 !important; width:auto !important; flex:1; }
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([fill="#fff"],[fill="#ffffff"],[fill="#e2e8f0"],[fill="#f8fafc"]) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([fill="#fbbf24"],[fill="#fde68a"],[fill="#ffd700"],[fill="#facc15"]) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([fill="#f472b6"],[fill="#f9a8d4"]) { fill: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) [fill^="rgba(255,255,255"] { fill: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([stroke="#fff"],[stroke="#ffffff"],[stroke="#e2e8f0"],[stroke="#f8fafc"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([stroke="#fbbf24"],[stroke="#fde68a"],[stroke="#ffd700"],[stroke="#facc15"]) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([stroke="#f472b6"],[stroke="#f9a8d4"]) { stroke: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) [stroke^="rgba(255,255,255"] { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([style*="color: #fff"],[style*="color:#fff"],[style*="color: rgba(255"],[style*="color:rgba(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(.diagram-wrap,.formula-svg,.oj-kaisetsu) :is([style*="#fbbf24"],[style*="#ffd700"],[style*="251, 191, 36"],[style*="255, 215, 0"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap :is(.shape,.book-line) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .shape { fill: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .shape.subtle { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .label { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .given-text { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap :is(.hl-a,.hl-b) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .hl-c { stroke: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-inline .ans-note.derived,.answer-inline .sim-part.derived) { color: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .teiri-title { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .line-fusen-cover { background: var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .proof-sub-btn { color: var(--look-ink); background: var(--look-surface); border: 2px solid var(--look-border); box-shadow: 0 2px 0 var(--look-shadow); backdrop-filter:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.proof-sub-btn,.teiri-shape-btn).active { color: var(--look-ink); background: var(--look-soft); box-shadow: inset 0 2px 5px #25324b45; outline:2px solid var(--look-accent); filter:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-inline.bare { background:none; border:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-title,.solved-label) { color:var(--look-warm); }

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-grid .mode-cell > .mode-btn { padding-right:60px; }
@media(max-width:600px){
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .problem-box { padding-top:60px; }
}

/* 相似専用：図形、比例式、約分・たすき掛けと入力欄。配置と計算処理は維持する。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-text,.ratio-formula-box,.prop-row,.prop-term,.prop-trail-line,.prop-eqline,.answer-box,.proof-steps,.answer-input-display .var-label) { color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.prop-hint,.rc-arrow,.souji-tenkey-hint,.answer-input-head) { color:var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.prop-colon,.prop-eq,.pc-colon,.pc-eq,.pc-times,.formula-circ,.pm.sl::after) { 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(.formula-panel,.ratio-formula-box,.answer-box) { 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"]) .formula-panel .kf-hit { background:var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.prop-slot,.answer-input-display,.souji-tenkey-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"]) :is(.prop-slot.active,.answer-input-display .frac .frac-part.active) { color:var(--tool-answer-ink); background:var(--tool-answer); border-color:var(--look-accent); box-shadow:0 0 0 2px var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .prop-slot.reducing::after { background:var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.prop-op-btn,.formula-show-btn,.answer-input-key,.souji-tenkey-grid button) { color:var(--look-ink); background:var(--tool-key); border:2px solid var(--tool-key-frame); 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(.prop-op-btn,.formula-show-btn,.answer-input-key,.souji-tenkey-grid button):hover:not(:disabled) { filter:brightness(1.04); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.prop-op-btn,.formula-show-btn,.answer-input-key,.souji-tenkey-grid button):active:not(:disabled) { 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(.prop-op-btn.cross,.prop-op-btn.cross:hover,.prop-solve-btn,.souji-tenkey-grid .stk-submit) { color:var(--tool-primary-ink); background:var(--tool-primary); border:2px solid var(--tool-key-frame); 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(.formula-show-btn,.souji-tenkey-grid .stk-util,.answer-input-key.frac-key) { 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"]) .formula-show-btn.active { color:var(--look-ink); background:var(--look-soft); box-shadow:inset 0 2px 5px #25324b45; border-color:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-input-pad,.souji-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"]) .souji-tenkey-header { color:var(--look-warm); background:transparent; border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .souji-tenkey-hint { 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"]) .souji-tenkey-grid .stk-var { 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"]) :is(.souji-tenkey-grid .stk-del,.souji-tenkey-grid .stk-clear,.answer-input-key.back-key) { color:var(--tool-action-ink); background:var(--tool-action); }
html[data-math-look="elegant"] :is(.souji-tenkey-grid .stk-del,.souji-tenkey-grid .stk-clear,.answer-input-key.back-key) { border-color:#a26b4c; box-shadow:inset 0 1px #fff0e0,0 3px #a26b4c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-input-key.frac-key :is(.num,.den) { border-color:currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-input-key.frac-key .line { background:currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-input-display .frac-line { background:var(--look-ink); border-color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.souji-tenkey-display.wrong,.answer-input-display.wrong,.prop-slot.wrong,.tri-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"]) .answer-input-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"]) .autocalc-toggle { 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"]) .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"]) .autocalc-toggle.on { color:var(--look-success); border-color:var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .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"]) .pc-item { 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"]) .pc-prod { color:var(--work-positive-ink); background:var(--work-positive-bg); border-color:var(--work-positive-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"]) .diagram-wrap .hl-b { stroke:#14788d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .diagram-wrap .solved-given { fill:var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg) :is([fill="#38bdf8"],[fill="#60a5fa"]) { fill:#14788d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.diagram-wrap,.formula-svg) :is([stroke="#38bdf8"],[stroke="#60a5fa"]) { stroke:#14788d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .formula-svg [fill="#10b981"] { fill:var(--look-success); }

/* 図中のKaTeXと動く計算結果にも、薄い黄色を残さない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box,.answer-panel,.oj-explain) :is([style*="color:#fde68a"],[style*="color: #fde68a"],[style*="color:#fbbf24"],[style*="color:#ffd54a"],[style*="color: rgb(253, 230, 138)"]) { color:var(--look-warm) !important; }

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-input-key.frac-key :is(.num,.den) { background:transparent; outline:1.5px solid currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-input-display .frac .frac-part { 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"]) .answer-input-display .frac .frac-part.active { color:var(--tool-answer-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-inline .ans-note { color:var(--look-warm); border-left-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-inline .ans-note.derived { color:#b23d79; border-left-color:#b23d79; }

/* 2026-10-15：答えの画面で、暗いデザイン用の直書きの色が明るい背景にとけていた（本人「答え表示時にみにくくなる問題がないか点検して」）。
   ①「正解！ x＝16（AB＝16）」「OK！次は相似条件を選ぼう」の黄緑 #86efac → 成功の色
   ② 解答の「相似条件：…」・問題の「（図中の印を仮定とする）」の白（rgba(255,255,255,…)）→ 字の色。
   今までの白の置きかえは図と解説の中だけ、黄色の置きかえは問題・答えの枠の中だけで、この2つが漏れていた。16進と rgb() の両方を書く */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box,.answer-panel,.oj-explain) :is([style*="color:#86efac"],[style*="color: #86efac"],[style*="color: rgb(134, 239, 172)"]) { 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-panel) :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)"]):not(button) { color: var(--look-ink) !important; }