/* 共通デザイン「シンプル」。白い面・細い枠に、控えめな青・緑・ベージュを添える。 */
html[data-math-look="simple"] {
  color-scheme: light;
  --look-bg:#f6f7f5; --look-ink:#28323a; --look-muted:#626c75;
  --look-surface:#fff; --look-soft:#edf0f2; --look-border:#bbc3c9;
  --look-accent:#365e79; --look-accent-soft:#e6eef3;
  --look-warm:#365e79; --look-warm-soft:#edf3f7;
  --look-success:#32624d; --look-success-soft:#edf4ef;
  --look-danger:#98464b; --look-danger-soft:#fbefef; --look-shadow:#dfe3e6;
  --work-positive-ink:#32624d; --work-positive-bg:#f5f9f6; --work-positive-border:#aabfb0;
  --work-negative-ink:#98464b; --work-negative-bg:#fcf5f5; --work-negative-border:#ccafb1;
  --work-zero-ink:#365e79; --work-zero-bg:#f2f5f7; --work-zero-border:#aebec8;
  --work-card-radius:8px; --work-card-shadow:0 1px 2px #28323a12; --work-card-hover-shadow:0 2px 4px #28323a18;
  --work-button-radius:6px; --work-choice-bg:#fff; --work-choice-hover:#edf3f7; --work-choice-border:#bbc3c9;
  --tool-frame:#bbc3c9; --tool-radius:12px; --tool-key-radius:6px;
  --tool-panel:#f1f5f7; --tool-paper:#fff; --tool-display:#fff;
  --tool-shadow:0 4px 14px #28323a20; --tool-card-shadow:none;
  --tool-key:#fff; --tool-key-frame:#aeb8c0; --tool-key-shadow:0 1px 1px #28323a12;
  --tool-special:#e1edf3; --tool-special-ink:#334d60;
  --tool-action:#f2eeee; --tool-action-ink:#84474c;
  --tool-primary:#365e79; --tool-primary-ink:#fff;
  --tool-hint:#e4eef3; --tool-hint-ink:#365e79;
  --tool-answer:#365e79; --tool-answer-ink:#fff;
  --tool-dialog-border:#bbc3c9; --tool-dialog-shadow:0 8px 28px #28323a26;
  --tool-control-shadow:0 1px 2px #28323a12; --tool-control-pressed-shadow:inset 0 1px 2px #28323a20;
}
html[data-math-look="simple"] body { background:var(--look-bg); color:var(--look-ink); }
html[data-math-look="simple"] h1 {
  color:#365769; background:none; -webkit-text-fill-color:currentColor; -webkit-text-stroke:0;
  text-shadow:none; filter:none; font-weight:750; letter-spacing:.025em;
}
html[data-math-look="simple"] :is(.btn-gen,.btn-gen:hover) {
  color:var(--simple-mode-ink,#365769); background:var(--simple-mode-bg,#e5eef3);
  border:1px solid var(--simple-mode-border,#adbfcb); border-radius:8px;
  box-shadow:0 1px 2px #28323a0c; text-shadow:none; transform:none; filter:none;
}
html[data-math-look="simple"] :is(.btn-gen-soinsu,.btn-gen-addsub,.btn-gen-bunpai) {
  --simple-mode-bg:#e7eee5; --simple-mode-ink:#46634f; --simple-mode-border:#b1c1b0;
}
html[data-math-look="simple"] :is(.btn-gen-two,.btn-gen-pow,.btn-gen-challenge) {
  --simple-mode-bg:#f3ecdf; --simple-mode-ink:#765d39; --simple-mode-border:#cbbd9f;
}
html[data-math-look="simple"] .btn-gen:hover { border-color:var(--simple-mode-ink,#365769); box-shadow:inset 0 0 0 1px var(--simple-mode-border,#adbfcb); }
html[data-math-look="simple"] .btn-gen:active { box-shadow:inset 0 1px 3px #28323a20; }
html[data-math-look="simple"] .two-sub { color:#765d39; background:#ece2ce; border-color:#cbbd9f; text-shadow:none; }
html[data-math-look="simple"] .two-sub:hover { background:#e4d7bc; }
html[data-math-look="simple"] :is(.expr-display,.panel-wrap,.panel) {
  color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none;
}
html[data-math-look="simple"] .expr-wrap { margin-bottom:10px; }
html[data-math-look="simple"] .game-type-label {
  color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none;
}
html[data-math-look="simple"] :is(.answer-reveal-btn,.answer-manual-btn,.btn-undo,.btn-auto-forward,.tenkey-btn,.tenkey-input-view,.auto-calc-toggle-wrap) { border-width:1px; border-color:var(--tool-key-frame); }
html[data-math-look="simple"] :is(.btn-undo,.btn-auto-forward) { color:#334d60; background:#e4eef3; box-shadow:var(--tool-control-shadow); }
html[data-math-look="simple"] .btn-auto-forward { background:#dceaf1; border-color:#91a7b7; }
html[data-math-look="simple"] .btn-next .nav-shape path { fill:#e6eef3; stroke:#91a7b7; stroke-width:1.5; filter:none; }
html[data-math-look="simple"] #btn-prev .nav-shape path { stroke-width:1.5; }
html[data-math-look="simple"] #btn-restart-top { border-width:1px; border-radius:8px; box-shadow:none; }
html[data-math-look="simple"] :is(.tile,.ghost,.bunpai-choice-btn,.bunpai-trail,.tenkey-content) { border-width:1px; }
html[data-math-look="simple"] :is(.hint-bar.active,.bunpai-hint) { border-color:#bbc3c9; box-shadow:none; }
html[data-math-look="simple"] :is(.two-num-explain,.oj-explain) { background:#f8fafb; border-width:1px; box-shadow:none; }
html[data-math-look="simple"] :is(.app-about,.oj-kaisetsu-wrap) { border-width:1px !important; border-radius:10px !important; box-shadow:none; }
html[data-math-look="simple"] :is(.related-app-btn,.usage-wrap .home-btn) { border-width:1px; box-shadow:none; }
html[data-math-look="simple"] :is(.win-card,.challenge-intro-overlay > div,.kiroku-overlay > div) { border-width:1px !important; }
html[data-math-look="simple"] :is(.win-card,.challenge-intro-overlay,.kiroku-overlay) button { border-width:1px !important; }
html[data-math-look="simple"] .katex :is([style*="color:transparent"],[style*="color: transparent"]) { text-shadow:none; }
@media(max-width:600px) {
  html[data-math-look="simple"] h1 { -webkit-text-stroke:0; }
}

/* アプリごとの問題ボタン・図・入力欄にも同じ配色を使う。 */
html[data-math-look="simple"] {
 --bg:var(--look-bg); --surface:var(--look-surface); --text:var(--look-ink); --subtle:var(--look-muted); --border:var(--look-border); --accent:var(--look-accent);
 --letter-ink:#46634f; --letter-bg:#e7eee5; --letter-border:#b1c1b0;
 --number-ink:#365769; --number-bg:#e5eef3; --number-border:#adbfcb;
 --game-ink:var(--look-ink); --game-blue:var(--look-accent); --game-lime:#e7eee5; --game-orange:#f3ecdf; --game-paper:#fff;
 --calc-ink:var(--look-ink); --calc-muted:var(--look-muted); --calc-panel:#fff; --calc-soft:#edf3f5; --calc-border:var(--look-border);
 --calc-accent:var(--look-accent); --calc-warm:#765d39; --calc-success:var(--look-success); --calc-danger:var(--look-danger); --calc-shadow:#dfe3e6;
 --calc-setting-selected:#e7eee5; --calc-setting-hover:#edf3f5; --calc-setting-primary:#e5eef3; --calc-setting-challenge:#f3ecdf;
 --calc-setting-radius:8px; --calc-setting-button-shadow:0 1px 2px #28323a12;
 --zfig-line:#365769; --zfig-line-rgb:54,87,105; --zfig-label:#765d39; --zfig-accent:#98464b; --zfig-height:#32624d; --zfig-sub-label:#365e79;
 --zfig-face-rgb:90,137,162; --zfig-second-rgb:106,150,125; --zfig-hole-rgb:93,109,120; --zfig-fold-rgb:106,120,136; --zfig-grid-rgb:130,145,156;
}
html[data-math-look="simple"] body { background:var(--look-bg); }
html[data-math-look="simple"] h1 { color:#365769; text-shadow:none; -webkit-text-stroke:0; filter:none; }
html[data-math-look="simple"] h1::after { display:none; }
html[data-math-look="simple"] :is(.h1-prefix,.subtitle,.tagline,#pop-look-name,#appearance-name) { color:var(--look-muted); text-shadow:none; }
html[data-math-look="simple"] :is(#pop-look-toggle,#appearance-toggle,.grade-btn) { color:var(--look-ink); background:#fff; border:1px solid var(--look-border); border-radius:8px; box-shadow:none; }
html[data-math-look="simple"] .grade-btn.active { color:#46634f; background:#e7eee5; border-color:#809d85; box-shadow:none; }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen) {
 color:var(--simple-mode-ink,#365769); background:var(--simple-mode-bg,#e5eef3); border:1px solid var(--simple-mode-border,#adbfcb);
 border-radius:8px; box-shadow:0 1px 2px #28323a0c; text-shadow:none; filter:none; transform:none;
}
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):nth-child(3n+1) { --simple-mode-bg:#e7eee5; --simple-mode-ink:#46634f; --simple-mode-border:#b1c1b0; }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):nth-child(3n+2) { --simple-mode-bg:#f3ecdf; --simple-mode-ink:#765d39; --simple-mode-border:#cbbd9f; }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):hover { transform:none; filter:none; box-shadow:inset 0 0 0 1px var(--simple-mode-border,#adbfcb); }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):active { transform:none; box-shadow:inset 0 1px 3px #28323a20; }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen).active { outline:2px solid #708fa1; outline-offset:2px; }
html[data-math-look="simple"] :is(.sub-btn,.mode-sub-btn,.combo-sub,.mode-sub) { color:inherit; background:#ffffff38; border-color:#adbfcb; text-shadow:none; box-shadow:none; }
html[data-math-look="simple"] :is(.sub-btn,.mode-sub-btn,.combo-sub,.mode-sub).active { background:#d6e3e9; box-shadow:inset 0 2px 4px #28323a30; }
html[data-math-look="simple"] :is(.question-box,.answer-box,.answer-panel,.steps-box,.steps-panel,.work-wrap,.history-box,.settings) {
 color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none;
}
html[data-math-look="simple"] .question-box { margin-bottom:8px; }
html[data-math-look="simple"] :is(.mode-chip,.q-type-label,.game-type-label) { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-math-look="simple"] :is(.shape-nav-current,#btn-restart-top) { color:var(--look-ink)!important; background:#fff!important; border:1px solid var(--look-border)!important; border-radius:8px!important; box-shadow:none!important; }
html[data-math-look="simple"] :is(.shape-nav-next,.shape-nav-prev) { color:#365769!important; }
html[data-math-look="simple"] :is(.shape-nav-next,.shape-nav-prev,.btn-next,#btn-prev,#prev-btn) .nav-shape path { fill:#e5eef3; stroke:#91a7b7; stroke-width:1.5; filter:none; }
html[data-math-look="simple"] :is(.num-panel,.direct-panel,.calc-pad) { color:var(--look-ink); background:var(--tool-panel); border:1px solid var(--tool-frame); border-radius:12px; box-shadow:var(--tool-shadow); }
html[data-math-look="simple"] :is(.num-display,.direct-display,.calc-display) { color:var(--look-ink); background:#fff; border:1px solid var(--look-border); border-radius:6px; box-shadow:none; }
html[data-math-look="simple"] :is(.num-btn,.calc-key) { color:var(--look-ink); background:#fff; border:1px solid var(--tool-key-frame); border-radius:6px; box-shadow:var(--tool-key-shadow); }
html[data-math-look="simple"] :is(.num-btn.op-btn,.calc-key.op) { color:#334d60; background:var(--tool-special); }
html[data-math-look="simple"] :is(.num-btn.clr-btn,.calc-key.clear) { color:var(--tool-action-ink); background:var(--tool-action); }
html[data-math-look="simple"] .num-btn.submit-btn { color:#fff; background:var(--tool-primary); border:1px solid var(--tool-key-frame); }
html[data-math-look="simple"] :is(.tool-btn,.answer-input-btn,.btn-undo,.btn-forward,.restart-btn,.wbtn) { color:#365769; background:#e5eef3; border:1px solid #adbfcb; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-math-look="simple"] :is(.answer-btn,.btn-answer,.btn-worknext,.wbtn.primary) { color:#765d39; background:#f3ecdf; border:1px solid #cbbd9f; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-math-look="simple"] :is(.usage-wrap .home-btn,.usage-wrap #sfx-toggle,.usage-wrap #ruby-toggle,.usage-wrap #fx-toggle) { color:var(--look-ink)!important; background:#fff!important; border:1px solid var(--look-border)!important; box-shadow:0 1px 2px #28323a12; }
html[data-math-look="simple"] :is(.tile,.term-card,.var-x,.var-const,.group-tile,.dist-tile,.frac-block) { border-width:1px; box-shadow:var(--work-card-shadow); }
html[data-math-look="simple"] .mode-btn .katex [style*="transparent"] { color:transparent!important; text-shadow:none; }

/* アプリ固有の枠も、細い輪郭と白い面で統一。 */
html[data-math-look="simple"] :is(.op-panel,.game-area-wrap,.work-trail,.qbox-inner,.card-inner,.problem-box,.teiri-sheet,.choices-box,.kanyaku-interactive,.play-area) { color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none; }
html[data-math-look="simple"] .mode-label { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-math-look="simple"] .choice-btn { border-width:1px; border-color:var(--look-border); border-radius:8px; box-shadow:0 1px 2px #28323a12; }
html[data-math-look="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen).active { box-shadow:none; }
html[data-math-look="simple"] :is(.solved-card,.lock-dialog,.bug-modal,.floating-manual-panel,.manual-calc-panel) { border-width:1px!important; box-shadow:var(--tool-shadow)!important; }
html[data-math-look="simple"] #ans-tenkey .ansk-content { border:1px solid var(--look-border); border-radius:12px; box-shadow:var(--tool-shadow); }

html[data-math-look="simple"] :is(#btn-undo,#back-btn,#undo-btn) { color:#365769; background:#e5eef3; border:1px solid #adbfcb; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-math-look="simple"] :is(#btn-forward,#forward-btn,#auto-forward-btn) { color:#765d39; background:#f3ecdf; border:1px solid #cbbd9f; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-math-look="simple"] .qbox-mode-label { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-math-look="simple"] body.sp-ui .sp-mode-bar :is(.mode-btn,.mode-card,.combo-btn).active { border-radius:8px; box-shadow:none; }