/* 角度の図・入力・公式。位置や計算処理は元のまま。 */
.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(.q-text,.calc-note.flow-note,.oj-explain .oj-step-math,.oj-explain .oj-eqrows) { color: var(--look-ink); } /* .oj-eqrows＝「＝」をそろえた解説の式（2026-08-27新設）。白字のままで明るい見た目では見えなかった（2026-09-26） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-note,.calc-note-sub,.num-deg,.kai-deg,.kai-handle) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hint-text,.q-hint,.calc-hint-mirror,.oj-explain .oj-exfig-cap,.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(.formula-btn,.input-step-btn,.mark-back-btn,.restart-btn) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid #fff; 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"]) .input-step-btn.next { 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(.formula-btn,.input-step-btn,.mark-back-btn,.restart-btn):active:not(:disabled) { transform: translateY(2px); 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(.formula-btn,.input-step-btn,.mark-back-btn,.restart-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-pad,#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"]) .calc-grip { 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"]) :is(.num-display,.kai-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(.num-btn,.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"]) .num-btn.op-btn { 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"]) .num-btn.eq-btn { 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(.num-btn.clr-btn,.num-btn.del-btn,.kai-numpad .kai-back) { color: var(--tool-action-ink); background: var(--tool-action); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .num-btn.submit-btn { 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"]) :is(.num-btn,.kai-numpad button):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(.num-btn,.kai-numpad button):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"]) :is(.num-display,.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(.num-display,.kai-display).wrong { color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); }
html[data-math-look="elegant"] :is(.num-btn.clr-btn,.num-btn.del-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(.question-box,.answer-box,.oj-explain) :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)"]) { 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) :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(#figure,.oj-explain svg,.q-hint svg) :is([fill="#e2e8f0"], [fill="#fff"], [fill="#ffffff"], [fill^="rgba(255,255,255"]) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#94a3b8"] { fill: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) :is([fill="#fbbf24"], [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(#figure,.oj-explain svg,.q-hint svg) [fill="#ffd700"] { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#ffd54a"] { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#fb923c"] { fill: #ad561b; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#22d3ee"] { fill: #087c91; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#a78bfa"] { fill: #8055aa; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#4ade80"] { fill: #237b51; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [fill="#f472b6"] { fill: #b83d7c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) :is([stroke="#e2e8f0"], [stroke="#fff"], [stroke="#ffffff"], [stroke^="rgba(255,255,255"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#94a3b8"] { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) :is([stroke="#fbbf24"], [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(#figure,.oj-explain svg,.q-hint svg) [stroke="#ffd700"] { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#ffd54a"] { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#fb923c"] { stroke: #ad561b; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#22d3ee"] { stroke: #087c91; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#a78bfa"] { stroke: #8055aa; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#4ade80"] { stroke: #237b51; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) [stroke="#f472b6"] { stroke: #b83d7c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#figure,.oj-explain svg,.q-hint svg) text[stroke="rgba(15,23,42,0.9)"] { stroke: var(--look-surface); }
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 h3 { color: var(--look-accent); }
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) { 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 { width: auto !important; min-width: 0 !important; flex: 1; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top: 60px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .input-step-btn { min-width: 0; padding: 7px 10px; }
}
/* 操作枠のメッセージ（「✓ 正解！」「◯＝20° と仮定」など）は JS が字の色を直接書く（正＝#6ee7b7・誤＝#fca5a5）。
   上の .hint-text の規則より強く、明るい見た目では薄い緑・薄い赤のまま読めなかった（2026-09-28）。その見た目の緑・赤に */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box) :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(.question-box, .answer-box) :is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--look-danger) !important; }
/* 「1つ進む」などは、押したあと（スマホでは指を離しても）マウスが乗った状態の色が暗い見た目用の薄い青・白 16% のままで、
   明るい見た目では白い字が読めなかった。明るい見た目では自分の色のまま少し明るくするだけに */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-btn,.input-step-btn,.mark-back-btn,.restart-btn):hover:not(:disabled) { background: var(--tool-special); filter: brightness(1.05); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .input-step-btn.next:hover:not(:disabled) { background: var(--tool-answer); filter: brightness(1.05); }