/* 展開・因数分解の表示。出題・判定・アニメーションの位置とタイミングは維持する。 */
.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"]) .mode-chip { box-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .combo-main { color:inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .combo-sub { border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .combo-sub-btn { color:inherit; background:#ffffff25; border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .combo-sub-btn:hover { background:#ffffff45; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .combo-sub-btn.active { background:#25324b18; box-shadow:inset 0 3px 5px #25324b50, inset 0 -1px #fff8; }
html[data-math-look="pop"] .mode-btn-koshiki4 { --mode-paper: #73e1dd; }
html[data-math-look="pastel"] .mode-btn-koshiki4 { --candy-top: #fff0f7; --candy-bottom: #ffe2ed; --candy-shadow: #d5a6d4; --mode-ink: #98436b; }
html[data-math-look="elegant"] .mode-btn-koshiki4 { --jewel-top: #835463; --jewel-base: #542f3d; }
html[data-math-look="pop"] .mode-btn-bunkou { --mode-paper: #ffb65c; }
html[data-math-look="pastel"] .mode-btn-bunkou { --candy-top: #fff7e9; --candy-bottom: #ffeace; --candy-shadow: #d5a6d4; --mode-ink: #865017; }
html[data-math-look="elegant"] .mode-btn-bunkou { --jewel-top: #735746; --jewel-base: #483a32; }
html[data-math-look="pop"] .mode-btn-koshikiuse { --mode-paper: #c4ed48; }
html[data-math-look="pastel"] .mode-btn-koshikiuse { --candy-top: #f8efff; --candy-bottom: #f1e2ff; --candy-shadow: #d5a6d4; --mode-ink: #583179; }
html[data-math-look="elegant"] .mode-btn-koshikiuse { --jewel-top: #655375; --jewel-base: #40334e; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev,#btn-restart-top,.btn-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); border:2px solid var(--look-border); box-shadow:0 3px var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-next .nav-shape path { fill:var(--look-accent-soft); stroke:var(--look-border); filter:drop-shadow(0 3px 0 var(--look-shadow)); }
html[data-math-look="pop"] .btn-next .nav-shape path { fill:#c4ed48; stroke:#15364f; }
html[data-math-look="elegant"] .btn-next .nav-shape path { fill:#e5c983; stroke:#a98239; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr,.step-chain,.paren,.op,.inshu-left,.ku-trail,.k1-mark.box,.k1-mark.circle,.k1-mark.triangle) { color:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr .prompt,.game-hint,.step-chain .step-empty,.ku-tenkey-note,.inshu-state-line .placeholder,.result-label,.result-hint,.result-steps) { color:var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.steps-title,.tenkey-title.hint,.tenkey-qbox,.inshu-question .placeholder,.ku-blank.active) { color:var(--look-warm); border-color:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-banner,.inshu-question,.inshu-hint,.ku-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"]) :is(.inshu-left,.ku-trail,.tenkey-plus-nudge,.ku-blank) { 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(.auto-calc-toggle-wrap,.k1-auto-control) { color:var(--look-muted); 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"]) .slider { background:var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) input:checked + .slider { background:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer,.btn-manual-answer,.btn-koshiki,.btn-step-forward,.btn-undo,.inshu-right-top button,.kf-swap,.result-btn,.result-extra-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(.btn-answer,.btn-step-forward,.inshu-right-top .inshu-step-forward-btn,.result-btn.primary) { 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(.btn-answer,.btn-manual-answer,.btn-koshiki,.btn-step-forward,.btn-undo,.inshu-right-top button,.kf-swap,.result-btn,.result-extra-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(.btn-answer,.btn-manual-answer,.btn-koshiki,.btn-step-forward,.btn-undo,.inshu-right-top button,.kf-swap,.result-btn,.result-extra-btn):disabled { box-shadow:none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-reveal { color:var(--look-warm); background:var(--look-warm-soft); 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(#koshiki-panel,#tenkai2-koshiki-panel) { color:var(--look-ink); background:var(--look-surface); border:2px solid 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"]) #koshiki-panel .combo-box { color: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"]) #koshiki-panel .kf-swap { 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"]) #koshiki-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"]) #koshiki-panel .kf-hit.kf-label { color:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#koshiki-panel .kf-maru,.oj-explain .oj-maru) { color:#b35b16; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#koshiki-panel .kf-sankaku,.oj-explain .oj-sankaku) { color:#237b51; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkai2-koshiki-panel [fill="#f1f5f9"] { fill:var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkai2-koshiki-panel [fill="#7dd3fc"] { fill:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkai2-koshiki-panel [stroke="#7dd3fc"] { stroke:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkai2-koshiki-panel [fill="#0d1120"] { fill:var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .panel { 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"]) .panel.outer { 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"]) .panel.term { color:var(--work-negative-ink); background:var(--work-negative-bg); border-color:var(--work-negative-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .float-products .panel.float { 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(.inshu-choice,.ku-choice-btn) { color:var(--look-ink); background:var(--work-choice-bg); border:2px solid var(--work-choice-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"]) :is(.inshu-choice.correct,.ku-choice-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(.inshu-choice.wrong,.ku-choice-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(.ku-filled,.ku-done,.result-answer) { color:var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-fraction-view { 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(.tenkey-close-btn,.tenkey-plus-message) { 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"]) .tenkey-plus-add { color:var(--tool-primary-ink); background:var(--tool-primary); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn:is(.var-btn,.mul-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.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:is(.undo-btn,.backspace-btn) { color:var(--tool-action-ink); background:var(--tool-action); border-color:var(--tool-key-frame); }
html[data-math-look="elegant"] .tenkey-btn:is(.undo-btn,.backspace-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-input-wrap.error :is(input,.tenkey-fraction-view) { color:var(--look-danger); border-color:var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .result-modal { color:var(--look-ink); background:var(--look-surface); border:3px solid var(--tool-dialog-border); box-shadow:var(--tool-dialog-shadow); }
html[data-math-look="elegant"] .result-modal { --look-ink:#fff4d6; --look-muted:#e0d2b2; --look-success:#b7e3c3; color:#fff4d6; background:linear-gradient(145deg,#354563,#1b2942); border-color:#d8b86e; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .k1-ghost { color:var(--look-warm) !important; border-color:var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-area-wrap,.question-expr,.step-chain,.oj-explain,.tenkey-expr-display) :is([style*="#fff"],[style*="255, 255, 255"],[style*="237, 233, 254"],[style*="217, 255, 232"]) { color:var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-area-wrap,.question-expr,.step-chain,.oj-explain,.tenkey-expr-display) :is([style*="#ffd700"],[style*="#fbbf24"],[style*="#ffd54a"],[style*="255, 215, 0"],[style*="251, 191, 36"],[style*="255, 248, 215"]) { color:var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-area-wrap,.question-expr,.step-chain,.oj-explain,.tenkey-expr-display) :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(.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"]) :is(.btn-answer,.btn-manual-answer,.btn-koshiki,.btn-step-forward,.btn-undo,.inshu-right-top button,.kf-swap,.result-btn,.result-extra-btn):hover:not(:disabled) { color:var(--look-ink); background:var(--look-soft); }
@media(max-width:600px){
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .top-controls > button { width:auto; min-width:0; flex:1; }
}
/* (a+b)(c+d) の右下の小さな注（「本来おきかえの問題ですが…」）は白 38% の直書き。明るい紙では消えるので、薄めの字色に（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkai2-inshu-note { color: var(--look-muted) !important; opacity: .8; }