/* 作図専用の表示。紙面上の線・点・道具の座標と操作の状態は元のまま。 */
.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"]) .question-text { 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, .solved-tip) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.step-prompt, .solved-tip .key) { color: var(--look-warm); }
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="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(.demo-btn, .tool-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"]) .demo-btn { border-color: #fff; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.demo-btn, .tool-btn):hover:not(:disabled) { color: var(--look-ink); background: var(--look-accent-soft); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tool-btn.active { color: var(--look-ink); background: var(--look-accent-soft); border-color: var(--look-accent); box-shadow: inset 0 3px 5px #00000024, inset 0 -1px #ffffffaa; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.demo-btn, .tool-btn):active:not(:disabled) { transform: translateY(1px); 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"]) .demo-btn:disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fix-inline { border-left-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fix-slider { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .fix-inline input:checked + .fix-slider { background: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .board { background: var(--look-surface); box-shadow: inset 0 0 0 1px var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn.active { outline: 2px solid var(--look-accent); outline-offset: 3px; filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text, .step-prompt, .oj-explain) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [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-text, .step-prompt, .oj-explain) :is([style*="#ffd700"], [style*="#fbbf24"], [style*="255, 215, 0"], [style*="251, 191, 36"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-alt-btn { color: var(--tool-special-ink) !important; background: var(--tool-special) !important; border-color: var(--tool-key-frame) !important; 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(.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"]) .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"]) .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-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"]) .portrait-lock-continue { color: var(--tool-primary-ink); background: var(--tool-primary); border: 2px solid var(--tool-key-frame); box-shadow: var(--tool-key-shadow); }
@media (max-width: 600px) {
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row { gap: 6px; width: 100%; }
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; padding-inline: 6px !important; font-size: .76em !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top: 64px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-grid { gap: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn { padding: 12px 5px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tool-btn { font-size: .85em; }
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #answer-box > span[style] { color: var(--look-muted) !important; }
@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #answer-box > span[style] { position: static !important; display: block; text-align: center; margin: 3px 0 8px; }
}