/* 連立方程式専用。表示色・輪郭だけを変更し、式の配置・非表示状態・ドラッグ位置は維持する。 */
.appearance-switch { margin: 20px 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(.qbox-inner, .card-inner) { color: var(--look-ink); background: var(--look-surface); border: 3px solid var(--look-ink); border-radius: 13px; box-shadow: 5px 5px 0 var(--look-shadow); }
html[data-math-look="pop"] .qbox-inner { border-top: 8px solid #149dd7; }
html[data-math-look="pop"] .card-inner { background: #e4f4fc; }
html[data-math-look="pastel"] .qbox-inner { background: linear-gradient(145deg,#fff,#fff4fb); border-color: #fff; border-radius: 28px; box-shadow: 0 6px 0 #b399d2,0 10px 25px #75559b20; }
html[data-math-look="pastel"] .card-inner { background: linear-gradient(145deg,#fff2fb,#f5eeff); border-color: #fff; border-radius: 28px; box-shadow: 0 7px 0 #b399d2,0 12px 22px #75559b24; }
html[data-math-look="pastel"] .card { margin-top: 18px !important; }
html[data-math-look="elegant"] :is(.qbox-inner, .card-inner) { background: linear-gradient(145deg,#fffefb,#fffdf7 65%,#faf1df); border: 2px solid var(--look-border); border-radius: 22px; box-shadow: inset 0 0 0 4px #fffdf7,inset 0 0 0 5px #e9d8b1,0 9px 26px #4b3a2017; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sys-eq, .sys-n, .vs-step, .vs-step-label, .dainyuu-sub-label, .trans-equals, .divide-eq, .abc-organize-label, .direct-answer-current) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.qbox-title,.sys-brace,.ask,.q-hint,.auto-calc-label,.card-title,.h-op,.subst-hint,.trans-instruction,.subst-tile-op,.subst-tile-eq,.direct-answer-pending,.abc-pending-eq,.ans-sep,.final-modal-sub,.final-hint) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.eq-factor-badge,.sys-eq.highlight,.step-eq,.calc-result,.vs-confirmed,.vs-step-final,.trans-final-ans-area,.vs-final-ans-area,.bunshou-instruction,.bunshou-resolved-note,.final-ans-inline,.bq-item-ans-line,.bunshou-hint-title,.bunshou-hint-diag-cap,.bunshou-eq-hint-msg,.divide-workspace,.tenkey-factor-num,.tenkey-title.hint,.dy-yv.attn-yellow,.dy-yv.attn-yellow i,.dy-yv.attn-yellow::before,.dy-yv.attn-yellow::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"]) #bunshouStage .bunshou-instruction { color: var(--look-warm); }
html[data-math-look="pop"] .qbox-mode-label { color: var(--look-ink); background: #c6ef42; border: 2px solid #fff; border-radius: var(--work-button-radius); box-shadow: none; }
html[data-math-look="pastel"] .qbox-mode-label { color: #734127; background: #ffe68a; border: 2px solid #fff; box-shadow: none; }
html[data-math-look="elegant"] .qbox-mode-label { color: #493516; background: var(--tool-primary); border: 1px solid #c9ab67; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-header,.bunshou-hint-btn,.hint-fill-btn,.dainyuu-sub-btn,.btn-sign-flip,.btn-final-secondary,.challenge-giveup-btn,.ai-explain-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); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-show-ans,.btn-forward-step,.btn-divide,.btn-final-primary,#btnApplyPlus) { color: var(--tool-answer-ink); background: var(--tool-answer); 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(.btn-header,.bunshou-hint-btn,.hint-fill-btn,.dainyuu-sub-btn,.btn-sign-flip,.btn-divide,.btn-final-primary,.btn-final-secondary):hover:not(:disabled) { filter: brightness(1.06); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-header,.bunshou-hint-btn,.hint-fill-btn,.dainyuu-sub-btn,.btn-sign-flip,.btn-divide):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"]) .btn-header:disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-direct-answer.active { color: var(--look-ink); 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"]) .auto-calc-track { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) body.auto-calc-on .auto-calc-track { background: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev,#btn-next,#btn-current-restart) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-current-restart { background: var(--look-surface) !important; border: 2px solid var(--look-border) !important; border-radius: 12px !important; box-shadow: 0 3px 0 var(--look-shadow) !important; }
html[data-math-look="pop"] #btn-current-restart { border-color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-box,.step-block,.subst-panel,.trans-workspace,.dainyuu-sub-bar,#substStepsBox,#substStepsRightFinalBox,.vs-final-ans-area) { 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"]) #substStepsBox.final-right-steps { background: transparent; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-choice { color: var(--look-ink); background: var(--work-choice-bg); border: 2px solid 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"]) .btn-choice:hover:not(:disabled) { 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"]) :is(.btn-choice.correct,.direct-answer-confirmed,.final-ans,.solved-var) { 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"]) .btn-choice.correct { background: var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-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"]) :is(.q-mark,.kangae-box,.divide-q) { 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"]) .h-box::after { background: var(--look-surface); 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"]) .h-box::before { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .h-line { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.h-confirmed,.h-input-active) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .h-input-active::after { background: var(--look-warm-soft) !important; box-shadow: 0 0 0 2px var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .h-error { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .attn-overlay { border-color: var(--look-warm); background: #c7922220; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .attn-arrow path { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.wrong-hint,#plusWarningArea) { color: var(--look-warm); background: var(--look-warm-soft) !important; border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.term-card,.subst-tile) { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: 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(.term-card.var-term,.subst-tile-var) { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: var(--work-zero-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.term-card.const-term-pos) { 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(.term-card.const-term-neg) { color: var(--work-negative-ink); background: var(--work-negative-bg); border-color: var(--work-negative-border); }
html[data-math-look="elegant"] :is(.term-card.var-term,.subst-tile-var) { color: var(--work-positive-ink); background: var(--work-positive-bg); border-color: var(--work-positive-border); }
html[data-math-look="elegant"] .term-card.const-term-pos { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: var(--work-zero-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .term-card.pending-combine .pending-part.const-term-pos { color: var(--work-positive-ink) !important; background: var(--work-positive-bg) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .term-card.pending-combine .pending-part.const-term-neg { color: var(--work-negative-ink) !important; background: var(--work-negative-bg) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .term-card.pending-combine { color: var(--look-ink) !important; border-color: var(--look-warm) !important; box-shadow: 0 0 0 2px var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.term-card.pending-divide-coeff,.term-card.pending-divide-rhs,.subst-tile-var.substituted) { color: var(--look-warm) !important; background: var(--look-warm-soft) !important; border-color: var(--look-warm) !important; box-shadow: 0 0 0 2px var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .flying-sub-val { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-warm); 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(.tenkey-container,.final,.bug-modal,.portrait-lock-card) { 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(.tenkey-display,.tenkey-formula-display) { 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"]) .tenkey-title { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-drag-handle::before { background: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-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"]) :is(.tenkey-btn.sign-btn,.tenkey-btn.action-btn.tenkey-frac-btn) { 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"]) .tenkey-btn.var-btn { 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"]) .tenkey-btn.action-btn:not(.tenkey-frac-btn) { color: var(--tool-action-ink); background: var(--tool-action); border-color: var(--tool-key-frame); }
html[data-math-look="elegant"] .tenkey-btn.action-btn:not(.tenkey-frac-btn) { 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"]) .tenkey-btn:hover:not(:disabled) { filter: brightness(1.06); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-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"]) .tenkey-display.h-error { color: var(--look-danger) !important; border-color: var(--look-danger) !important; background: var(--look-danger-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tenkey-display.h-success,.tenkey-display.h-success .tenkey-factor-num) { color: var(--look-success) !important; border-color: var(--look-success) !important; background: var(--look-success-soft) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-side-highlight-container.active { border-color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-x-btn { color: var(--look-muted); background: var(--tool-paper); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-peek { color: var(--look-warm); background: var(--tool-paper); border-color: var(--look-border); box-shadow: var(--tool-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-hint-table th,.bunshou-hint-table td,.kangae-eq) { color: var(--look-ink); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-hint-table th,.bunshou-hint-table .rowhead) { background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-hint-table .mvar,.kangae-blank .hint-fill) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-eq-line .bq-text,.bunshou-hint-inline,.kangae-blank) { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-bar { color: var(--tool-primary-ink); background: var(--tool-primary); 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-app-title,.portrait-lock-text,.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"]) :is(.portrait-lock-continue,.bug-modal .btn-cancel) { color: var(--look-ink); background: var(--tool-paper); 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(--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(.qbox-inner,.card-inner,.tenkey-container,.final,.oj-explain) :is([style*="color:#fff"],[style*="color: #fff"],[style*="color:rgba(255,255,255"],[style*="color: rgba(255,255,255"],[style*="color: rgba(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(.qbox-inner,.card-inner,.tenkey-container,.final,.oj-explain) :is([style*="#ffd700"],[style*="#fbbf24"],[style*="#ffd54a"],[style*="#fde68a"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.qbox-inner,.card-inner,.tenkey-container,.final,.oj-explain) :is([style*="#7dd3fc"]) { color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-formula-display [style*="background: #222"] { color: var(--look-muted) !important; background: var(--look-soft) !important; }
html[data-math-look="elegant"] body > canvas[style*="z-index: 9998"] { filter: var(--oj-light-ink-filter); }
html[data-math-look="elegant"] button[aria-label="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sys,.hissan-grid,.tenkey-btn,.subst-tile,.term-card,.final-ans,.btn-abc) i { font-family: KaTeX_Math,serif; font-style: italic; }
@media (max-width: 600px) {
.appearance-switch { margin: 16px auto 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .top-controls { gap: 6px; padding-inline: 12px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .top-controls > button { min-width: 0 !important; width: auto !important; flex: 1; font-size: .76em !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .gen-area { gap: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-gen { min-height: 52px; padding: 10px 4px; font-size: .92em; }
}

/* 解説の式・理由。寸法と式の書体を保つ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) {
  color: var(--look-ink); background: #fffaf0;
  border: 2px solid var(--look-border); border-radius: var(--tool-radius); box-shadow: var(--tool-card-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-explain-btn, .oj-explain-x) {
  color: var(--tool-hint-ink); background: var(--tool-hint); border: 2px solid var(--tool-frame);
  border-radius: var(--tool-key-radius); box-shadow: 0 2px 0 var(--look-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-explain-btn:hover, .two-num-explain .oj-explain-x:hover, .oj-explain .oj-explain-x: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(.two-num-explain, .oj-explain) :is(.ai-steps, .ai-line .katex) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) .ai-reason { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-rules, .ai-ladder) {
  color: var(--look-ink); background: var(--look-soft); border: 2px solid var(--look-border); border-radius: var(--tool-key-radius);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-rule { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-rule.now { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-fig-cap, .ai-fig-ans, .ai-ladder-cap) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-fig-labels span, .ai-ladder-body) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.neg { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.pos { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.gone::after { border-color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-fig-box { border: 2px solid var(--look-border); border-radius: var(--tool-key-radius); background: var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"], [style*="color:rgba(255,255,255"], [style*="color: rgba(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(.two-num-explain, .oj-explain) :is([style*="#fbbf24"], [style*="#ffd700"], [style*="#ffd54a"], [style*="251, 191, 36"], [style*="255, 215, 0"], [style*="255, 213, 74"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) :is([style*="#6ee7b7"], [style*="110, 231, 183"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) :is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--look-danger) !important; }

/* 結果・チャレンジも明るいカードに太枠と色の影。動的な指定色も合わせる。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-overlay, .challenge-intro-overlay, .kiroku-overlay) { background: #26374759 !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay > div, .kiroku-overlay > div) {
  color: var(--look-ink) !important; background: var(--tool-paper) !important;
  border: 4px solid var(--tool-dialog-border) !important; border-radius: var(--tool-radius) !important;
  box-shadow: var(--tool-dialog-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card :is(.solved-label, .solved-steps, .solved-hint) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card :is(.solved-ans, .win-answer-frac) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card .win-frac-num { border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card [style*="border-top"] { border-top-color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) [style*="color"] { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) :is([style*="#ffd700"], [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"]) :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) :is([style*="#7dd3fc"], [style*="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"]) .solved-card :is([style*="#7de8aa"], [style*="125, 232, 170"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) button {
  color: var(--tool-special-ink) !important; background: var(--tool-special) !important;
  border: 2px solid var(--tool-key-frame) !important; border-radius: var(--tool-key-radius) !important; box-shadow: var(--tool-key-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) button:hover:not(:disabled) {
  color: var(--look-accent) !important; background: var(--look-accent-soft) !important; filter: none;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card .win-btn-main, .challenge-intro-overlay .challenge-intro-start, .kiroku-overlay .kiroku-retry-btn),
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card button[style*="linear-gradient"] {
  color: var(--tool-primary-ink) !important; background: var(--tool-primary) !important; border-color: var(--tool-key-frame) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .solved-card a[style] {
  color: var(--look-success) !important; background: var(--look-success-soft) !important;
  border: 2px solid var(--tool-key-frame) !important; border-radius: var(--tool-key-radius) !important; box-shadow: var(--tool-key-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-bar {
  color: var(--tool-primary-ink); background: var(--tool-primary); 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"]) .challenge-giveup-btn {
  color: var(--look-ink); background: var(--tool-paper); 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"]) .challenge-giveup-btn:hover { color: var(--look-accent); background: var(--look-accent-soft); filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-giveup-btn:active { box-shadow: none; }

/* 会員案内も同じ明るい面へ。リンクと入会・ログイン操作は既存のまま。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-modal { background: #26374759; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-dialog { 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"]) .lock-benefits { 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(.lock-dialog-title, .lock-benefits-title, .lock-benefits-sub, .lock-price) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-dialog-genre, .lock-benefits li, .lock-mini-wrap .mini-t) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-dialog-lead, .lock-benefits li b, .mini-caption) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-trial { 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"]) .lock-trial b { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-btn-guide, .lock-btn-primary) { 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"]) .lock-btn-login { 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"]) .lock-btn-close { color: var(--look-muted); }

html[data-math-look="elegant"] :is(.sp-hw-main, .sp-hw-tool) {
  color: var(--elegant-ink) !important; background: var(--elegant-paper) !important;
  border-color: var(--elegant-border) !important; box-shadow: 0 2px 6px #4b3a2017 !important;
}
html[data-math-look="elegant"] body.sp-hw-on .sp-hw-main { background: #ead092 !important; }
html[data-math-look="elegant"] .sp-hw-clear::before { filter: brightness(0) saturate(100%) opacity(.8); }
html[data-math-look="elegant"] button[aria-label="消しゴム（部分消し）に切り替え"]:is([style*="background: rgb(255, 255, 255)"], [style*="background: #fff"]) {
  background: #ead092 !important; border-color: var(--elegant-gold) !important;
}
html[data-math-look="elegant"] button[aria-label="手書き色を切り替え"] {
  background: #fff !important; border-color: var(--elegant-border) !important; box-shadow: none !important;
}
html[data-math-look="elegant"] button[aria-label="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }

/* 選択中の式も、ライト背景で読みやすい濃さを保つ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sys-row.eq-tappable.eq-selected > span { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sys-row.eq-tappable.eq-selected:is(.eq-highlight-lhs,.eq-highlight-rhs) > span { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sys-row.eq-tappable.eq-selected.eq-highlight-lhs .sys-row-lhs,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sys-row.eq-tappable.eq-selected.eq-highlight-rhs .sys-row-rhs { border-color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sys-row.eq-tappable.eq-error > span { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.h-blank,.tenkey-placeholder) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .trans-equals.crossing { color: var(--look-warm); }
/* 縦スマホでは上段をラベルと操作ボタンに使い、問題の見出しを下へ分ける。 */
@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .qbox-head { padding-top: 44px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .qbox-title { font-size: .88em; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .qbox-answers { gap: 5px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .card-header { gap: 6px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .card-header .btn-header { padding: 7px 8px; font-size: .72em; white-space: nowrap; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle { gap: 4px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-label { font-size: .68em; white-space: nowrap; }
}

/* エレガント調の完了カード・チャレンジ案内・記録ウインドウ：濃紺地に明るい文字（他アプリの elegant-work.css と同じ指定）。
   これが無いと文字色（--look-ink）とボタン地（--tool-special）が同じ濃紺になり、案内ウインドウの文字が読めない（2026-09-20に指摘） */
html[data-math-look="elegant"] :is(.solved-card, .win-card, .challenge-intro-overlay > div, .kiroku-overlay > div) {
  --look-ink: #fff4d6; --look-muted: #e0d2b2; --look-accent: #f2d48b;
  --look-warm: #f2d48b; --look-success: #b7e3c3;
  color: #fff4d6 !important; background: linear-gradient(145deg, #354563, #1b2942) !important;
  border: 3px solid #d8b86e !important; box-shadow: inset 0 0 0 4px #23314a, inset 0 0 0 5px #b99b6155, 0 15px 40px #17213755 !important;
}
/* 2026-10-14：最後の答え（x＝8，y＝−6 の .final-ans-inline）は暗いデザイン用の金色 #ffd700 のままで、明るい背景だと読めなかった（本人の指摘）。上の「黄→ --look-warm」の組に入れた。 */