/* 式の説明専用。数式、解答判定、図の位置、入力の配置は元のまま。 */
.appearance-switch { margin: 0 0 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .appearance-switch { margin: 0 0 20px; }
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-title { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card.active { outline: 2px solid var(--look-accent); outline-offset: 3px; }
html[data-math-look="elegant"] .mode-card { padding: 0; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card.challenge :is(.mode-title, .grade) { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-row { background: transparent; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-btn { color: inherit; background: #ffffff18; border: 1px solid #ffffff30; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-btn.active { color: var(--look-ink); background: var(--look-soft); box-shadow: inset 0 3px 5px #15364f42; border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev, .shape-nav-next, #btn-restart-top) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [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"]) :is(.question-text, .trail-line, .trail-line.conclusion, .cal-cell) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-instruction, .work-trail-title, .cal-header, .solved-label, .solved-tip, .solved-hint, .coming-soon) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-hint, .step-prompt, .hint-text, .keypad-prompt, .sum-answer-inline .conclusion, .solved-tip .key, .solved-ans, .cal-center-label) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.work-trail, .sum-answer-inline, .calendar) { color: var(--look-ink); background: var(--look-surface); border: 1px solid var(--look-border); box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sum-answer-inline .ans-note { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.filled-box, .filled-box .katex) { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .blank-box { color: var(--look-muted); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .blank-box.active { color: var(--look-accent); background: var(--look-accent-soft); border-color: var(--look-accent); animation: none; box-shadow: inset 0 2px 3px #25324b18; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .prompt-blank { 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"]) .choice-btn { 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"]) .choice-btn:hover:not(:disabled) { background: var(--work-choice-hover); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .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"]) .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(.answer-btn, .ai-explain-btn, .sum-explain-btn, .sum-answer-alt-btn, .cal-arrow, .portrait-lock-continue) { 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-btn, .sum-explain-btn, .sum-answer-alt-btn, .cal-arrow):hover { color: var(--tool-special-ink); background: var(--tool-special); filter: brightness(1.04); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-btn, .ai-explain-btn, .sum-explain-btn, .sum-answer-alt-btn, .cal-arrow):active { transform: translateY(2px); box-shadow: inset 0 2px 3px #25324b30; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sum-answer-btn, .keypad-submit, #btn-forward) { 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"]) .input-mode-btn.active { color: var(--look-warm); background: var(--look-warm-soft); box-shadow: inset 0 2px 4px #25324b30; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sum-kp, .keypad-wrap) { 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"]) .sum-kp-handle { background: var(--look-soft); border-color: var(--tool-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sum-kp-grip { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sum-kp-disp, .keypad-display) { color: var(--look-ink); background: var(--tool-display); border: 2px solid var(--tool-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sum-kp-disp.wrong, .keypad-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"]) .sum-kp-disp.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(.sum-kp-btn, .keypad-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(.sum-kp-btn.op, .keypad-btn.op, .sum-kp-back, .keypad-btn.kp-back) { 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"]) .sum-kp-btn .katex { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sum-kp-btn, .keypad-btn):hover { filter: brightness(1.04); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.keypad-clear, .keypad-reset) { color: var(--tool-action-ink); background: var(--tool-action); border-color: var(--tool-key-frame); box-shadow: var(--tool-key-shadow); }
html[data-math-look="elegant"] :is(.keypad-clear, .keypad-reset) { color: #62301f; background: var(--work-negative-bg); 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"]) .cal-cell { border-color: var(--look-border); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .cal-sun { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .cal-sat { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .cal-center { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .cal-empty { color: transparent; background: transparent; }
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-card, .bug-modal) { color: var(--look-ink); background: var(--look-surface); border-color: 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"]) :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(.bug-modal textarea, .bug-modal .btn-cancel) { 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"]) :is(.question-box, .answer-box, .oj-explain, .solved-card) :is([style*="#fff"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"], [style*="color:rgb(255, 255, 255)"], [style*="color: rgb(255, 255, 255)"], [style*="color:rgba(255, 255, 255"], [style*="color: rgba(255, 255, 255"], [style*="color:rgba(196,181,253"], [style*="color: rgba(196,181,253"], [style*="color:rgba(196, 181, 253"], [style*="color: rgba(196, 181, 253"], [style*="#c4b5fd"], [style*="#e2e8f0"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain, .solved-card) :is([style*="#fbbf24"], [style*="#ffd700"], [style*="#ffd54a"], [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"]) :is(.question-box, .answer-box, .oj-explain, .solved-card) :is([style*="#6ee7b7"], [style*="#86efac"], [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(.question-box, .answer-box, .oj-explain, .solved-card) :is([style*="#f87171"], [style*="#fca5a5"], [style*="248, 113, 113"]) { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([stroke="#fff"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([stroke="#fbbf24"], [stroke="#fb923c"]) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([stroke="#ec4899"], [stroke="#ef4444"]) { stroke: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([fill="#fff"]) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([fill="#fbbf24"], [fill="#fb923c"]) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([fill="#ec4899"], [fill="#ef4444"]) { fill: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .oj-explain) svg :is([fill="rgba(0,0,0,0.25)"], [fill="rgba(0,0,0,0.35)"]) { fill: 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"]) .mode-title { flex-direction: column; white-space: normal; padding-inline: 3px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-title .grade { margin-left: 0; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row { gap: 6px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row > button { flex: 1; min-width: 0 !important; width: auto !important; font-size: .75em !important; }
}