/* 清楚閱讀：彩色主題使用深色文字和明確邊界；教材的位值與隊伍顏色保留。 */
body.storybook-site, body.storybook-game {
  --sb-ink: #172f25;
  --sb-muted: #344d3e;
  --sb-line: #718c70;
  --primary: #21663d;
  --primary-dark: #174b2c;
  --text-main: #172f25;
  --text-muted: #344d3e;
  --border-color: #789374;
  color: var(--sb-ink);
  background-color: #fff7e3;
}
.storybook-site .header-container { display: grid; grid-template-areas: 'brand tools tokens'; grid-template-columns: minmax(220px,1fr) auto auto; }
.storybook-site .brand-section { grid-area: brand; min-width: 0; }
.storybook-site .header-tools { grid-area: tools; }
.storybook-site .token-counter { grid-area: tokens; color: #533700; border-color: #967023; font-size: 1rem; white-space: nowrap; }
.storybook-site .brand-title { color: #174d2d; }
.storybook-site .brand-caption { color: #344d3e; font-size: .875rem; }
.storybook-site .header-tools .tool-btn { font-size: 1rem; color: #203e2d; border-color: #68836b; font-weight: 700; }
.storybook-site .header-tools .dropdown-trigger-btn { background: #21663d !important; border-color: #174b2c !important; color: #fff !important; }
.storybook-site .student-bank-container { border-color: #789374; }
.storybook-site .student-bank-container > summary { font-size: 1rem; color: #243f2e; padding-top: 5px; padding-bottom: 5px; }
.storybook-site .nav-tab { font-size: 1.0625rem; font-weight: 800; color: #2e4836; }
.storybook-site .nav-tab.active { color: #fff; background: #21663d; border-bottom-color: #123b24; }
.storybook-site .nav-tab.active .sketch-icon { color: #fff; }
.storybook-site .nav-tab:hover:not(.active) { background: #dceccf; color: #173f24; }
.storybook-site .storybook-welcome { background: #d6edfb; border: 2px solid #668e9a; }
.storybook-welcome h2 { color: #174c2e; }
.storybook-welcome h2 em { color: #9a3d1d; }
.storybook-eyebrow { color: #2c4b38; font-size: 1rem; letter-spacing: .04em; white-space: normal; }
.storybook-welcome p { color: #263e32; font-size: 1.125rem; font-weight: 600; }
.storybook-greet { font-size: 1rem; font-weight: 800; color: #174d2e; background: #fff; border: 2px solid #557c5b; }
.storybook-greet span { font-size: inherit; }
.storybook-greet:hover, .storybook-greet[aria-pressed='true'] { color: #fff; background: #21663d; border-color: #174b2c; }
.storybook-site .animal-scene { display: block; height: auto; margin: 0 0 0 8px; }
.animal-stage { position: relative; height: 230px; }
.animal-stage .animal-garden-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.animal-stage .animal-garden { inset: 0; }
.storybook-site .animal-scene .storybook-speech { position: relative; inset: auto; display: block; max-width: 100%; margin-top: 3px; transform: none; color: #193d2a; background: #fff; border: 2px solid #6d9272; box-shadow: none; padding: 7px 10px; font-size: 1rem; font-weight: 700; line-height: 1.6; }
.storybook-site .lesson-quick-picker label { font-size: 1.0625rem; color: #1c4229; }
.lesson-quick-picker label span { color: #3c5133; font-size: 1rem; letter-spacing: .025em; }
.storybook-site .lesson-quick-picker select { font-size: 1.125rem; height: auto; min-height: 50px; color: #172f25; border: 2px solid #658065; }
.storybook-site .storybook-start { font-size: 1.0625rem; background: #ffbd4a; color: #3b290a; border: 2px solid #8d5d15; box-shadow: 0 3px 0 #a97328; }
.storybook-site .storybook-start:hover { background: #ffd17d; }
.storybook-site .unit-card-picker { border: 2px solid #789374; border-top: 0; background: #e3efd5; }
.storybook-site .unit-card-picker > summary { color: #243f2b; font-size: 1rem; }
.storybook-site .unit-card-btn { border-color: #728b67; }
.storybook-site .unit-card-btn.active { border: 3px solid #21663d; }
.storybook-site :is(.unit-num-badge,.unit-story-label,.lesson-banner-note,.mascot-name-row strong) { color: #334f31 !important; }
.storybook-site .unit-title-text { font-size: 1.125rem; color: #183b27; }
.storybook-site :is(.card,.question-card,.manipulative-card,.manipulative-main-area,.teacher-guide-details,.arcade-card,.shape-comparison-tool) { border-color: #7e9575; }
.storybook-site :is(.card-title,.manipulative-header h4,.lesson-banner strong) { color: #204f30 !important; }
.storybook-site .lesson-banner .kid-btn { font-size: 1rem !important; padding: 8px 12px !important; }
.storybook-site :is(.fading-control-panel,.student-scaffold > summary,.practice-settings-wrap > summary) { border: 1px solid #7a966d; }
.storybook-site .fading-label { color: #29482d; font-size: 1rem; }
.storybook-site .fading-btn { font-size: 1rem; min-height: 48px; color: #29482d; border: 2px solid #6f8b60; padding: 8px 12px; }
.storybook-site .fading-btn.active { color: #fff; background: #21663d; border-color: #174b2c; }
.storybook-site :is(.student-scaffold,.teacher-guide-details,.fraction-compare-details) > summary { color: #25482e; font-size: 1rem; line-height: 1.7; }
.storybook-site :is(.btn-primary,.kid-btn-primary) { background: #21663d !important; border-color: #174b2c !important; color: #fff !important; }
.storybook-site :is(.btn-outline,.kid-btn-secondary,.kid-btn-solution,.btn-speech) { color: #234a2d !important; border-color: #67845d !important; }
.storybook-site .main-content p { font-size: 1.0625rem !important; line-height: 1.8; }
.storybook-site .main-content :is(label,summary,select,input,textarea,small,th,td) { font-size: 1rem; }
.storybook-site .main-content [style*='font-size: 0.'], .storybook-site .main-content [style*='font-size:0.'] { font-size: 1rem !important; }
.storybook-site :is(input,select,textarea).form-control, .storybook-site .practice-settings-grid :is(input,select), .storybook-site .evidence-toolbar select { color: #172f25; background: #fff; border: 2px solid #688267; }
.storybook-site .question-text { color: #152b20; font-size: 1.75rem; font-weight: 700; }
.storybook-site .option-btn { color: #172f25; background: #fff; border: 3px solid #6b8260; font-size: 1.5rem; }
.storybook-site .option-btn .option-text { color: #172f25; }
.storybook-site .option-btn .option-label { color: #4e370d; background: #ffe0a2; font-size: 1.125rem; }
.storybook-site .option-btn.selected-correct { background: #d7f0cf !important; border-color: #276132 !important; }
.storybook-site .option-btn.selected-correct .option-text { color: #17471f; }
.storybook-site .option-btn.selected-wrong { background: #ffe1d7 !important; border-color: #a33d25 !important; }
.storybook-site .option-btn.selected-wrong .option-text { color: #722714; }
.storybook-site .mascot-speech-bubble { color: #24412b; border-color: #789b69; }
.storybook-site .practice-settings-grid label, .storybook-site .evidence-toolbar label { font-size: 1rem; color: #273f30; }
.storybook-site :is(.practice-privacy,#practice-record-status,.evidence-card p,.evidence-metrics > span,.evidence-empty,.teaching-notice,.evidence-table table) { color: #2c4833; font-size: 1rem; }
.storybook-site .evidence-metrics > span { border-color: #78966c; }
.storybook-site :is(button,a,summary,input,select,textarea):focus-visible { outline: 3px solid #1d5fba; outline-offset: 3px; }
.theme-credit { font-size: .875rem; color: #354b33; }
/* 工具箱與獨立遊戲沿用同一組可讀的字級與邊界。 */
:is(.storybook-site,.storybook-game) .mft-ui { font-size: 16px; }
:is(.storybook-site,.storybook-game) .mft-launcher { background: #bf2828; border-color: #8e1d1d; box-shadow: 2px 3px 0 #efb7ac; }
:is(.storybook-site,.storybook-game) .mft-launcher:hover { background: #9f1f1f; }
:is(.storybook-site,.storybook-game) :is(.mft-heading span,.mft-width,.mft-footer,.mft-count,.mft-note) { font-size: 14px; color: #344a3c; }
:is(.storybook-site,.storybook-game) .mft-tool { font-size: 16px; border-color: #859689 !important; }
:is(.storybook-site,.storybook-game) .mft-tool[aria-pressed='true'] { background: #21663d; color: #fff; }
:is(.storybook-site,.storybook-game) .mft-actions { flex-wrap: wrap; }
:is(.storybook-site,.storybook-game) .mft-actions button { font-size: 14px; flex: 1 1 72px; }
.storybook-game .sp-ed-game-navbar a { font-size: 1rem; background: #21663d !important; color: #fff; }
.storybook-game :is(.text-slate-400,.text-slate-500,.text-slate-600,.text-gray-400,.text-gray-500,.text-gray-600) { color: #344c40; }
.storybook-game .text-xs { font-size: .875rem; line-height: 1.6; }
.storybook-game .text-sm { font-size: 1rem; line-height: 1.6; }
@media (max-width: 1000px) {
  .storybook-site .header-container { grid-template-areas: 'brand tokens' 'tools tools'; grid-template-columns: minmax(0,1fr) auto; }
  .storybook-site .header-tools { width: 100%; }
}
@media (max-width: 700px) {
  .storybook-site .brand-title { flex-wrap: wrap; font-size: 1.375rem; gap: 0; line-height: 1.35; }
  .storybook-site .brand-caption { display: block; flex-basis: 100%; font-size: .875rem; line-height: 1.5; }
  .storybook-site .brand-caption br { display: none; }
  .storybook-site .header-tools .tool-btn { font-size: 1rem; padding: 8px 10px; }
  .storybook-site .header-tools { gap: 8px; }
  .storybook-site .nav-tab { font-size: 1rem; }
  .storybook-site .storybook-welcome { padding: 16px 14px 0; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .storybook-welcome h2 { font-size: clamp(1.75rem,5.7vw,2.3rem); }
  .storybook-welcome p { max-width: none; }
  .storybook-eyebrow { font-size: 1rem; margin-bottom: 8px; }
  .storybook-site .animal-scene { margin: 0; align-self: start; }
  .animal-stage { height: 230px; }
  .animal-stage .animal-garden-ground { width: 125%; left: -12%; object-fit: fill; }
  .storybook-site .animal-scene .storybook-speech { padding: 7px; font-size: 1rem; }
  .storybook-site .storybook-launch { margin: 0 -3px; padding: 10px; gap: 10px; }
  .storybook-site .lesson-quick-picker { flex-direction: column; align-items: stretch; gap: 6px; }
  .storybook-site .lesson-quick-picker label { display: block; font-size: 1rem; white-space: normal; }
  .lesson-quick-picker label span { display: none; }
  .storybook-site .lesson-quick-picker select { width: 100%; font-size: 1.0625rem; }
  .storybook-site .storybook-start { width: 100%; font-size: 1.0625rem; }
  .storybook-site .unit-selector-grid { grid-template-columns: 1fr; }
  .storybook-site .lesson-banner > div:last-child { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px !important; width: 100%; }
  .storybook-site .lesson-banner .kid-btn { font-size: 1rem !important; white-space: normal; padding: 8px 6px !important; }
  .storybook-site .fading-btn { font-size: 1rem; padding: 8px 4px; }
  .storybook-site .question-text { font-size: 1.5rem; }
  .storybook-site .option-btn { font-size: 1.375rem; padding: 14px; }
  .storybook-site .option-btn .option-label { padding: 5px 8px; font-size: 1rem; }
}
/* 高對比及低刺激模式保留明確的文字和操作狀態。 */
.storybook-site.high-contrast-mode { --sb-ink: #fff; --text-main: #fff; --text-muted: #fff; }
.storybook-site.high-contrast-mode :is(.brand-title,.brand-caption,.header-tools .tool-btn,.nav-tab,.student-bank-container > summary,.lesson-banner strong,.lesson-banner-note,.unit-card-picker > summary,.unit-num-badge,.unit-story-label,.mascot-name-row strong,.card-title,.manipulative-header h4,.fading-label,.fading-btn,.student-scaffold > summary,.teacher-guide-details > summary,.fraction-compare-details > summary,.practice-settings-grid label,.evidence-toolbar label,.practice-privacy,.evidence-card p,.evidence-metrics > span,.evidence-empty,.teaching-notice,.evidence-table table,.storybook-welcome p,.storybook-eyebrow,.theme-credit) { color: #fff !important; }
.storybook-site.high-contrast-mode :is(.header-tools .tool-btn,.option-btn,.option-btn .option-text,.fading-btn,.student-scaffold > summary,.teacher-guide-details > summary) { background: #18181b; border-color: #facc15; }
.storybook-site.high-contrast-mode :is(.nav-tab.active,.fading-btn.active) { background: #facc15; color: #111 !important; }
.storybook-site.high-contrast-mode .option-btn .option-label { background: #facc15; color: #111; }
.storybook-site.high-contrast-mode :is(.question-text,.option-btn .option-text) { color: #fff; }
.storybook-site.high-contrast-mode :is(input,select,textarea).form-control, .storybook-site.high-contrast-mode .practice-settings-grid :is(input,select), .storybook-site.high-contrast-mode .evidence-toolbar select { background: #18181b; color: #fff; border-color: #facc15; }
.storybook-site.high-contrast-mode .storybook-start { background: #facc15; color: #111; }
.storybook-site.high-contrast-mode .animal-scene .storybook-speech { color: #fff; background: #18181b; border-color: #facc15; }
.storybook-site.calm-focus-mode .storybook-welcome { background: #edf4e5; border-color: #688364; }
.storybook-site.calm-focus-mode .storybook-welcome :is(h2,em,p,.storybook-eyebrow) { color: #214a2e; }
.storybook-site.high-contrast-mode .storybook-welcome :is(h2,em,p,.storybook-eyebrow) { color: #fff; }
@media print { .storybook-site .header-container { display: none; } }

.storybook-site :is(.student-bank-label,.student-bank-label span,.st-name,.st-stars,.btn-star-mini,.menu-item-desc,.dropdown-header-sub,.switch-widget-instruction,.switch-widget-controls,.switch-speed-selector,.ruler-tip) { font-size: 1rem !important; }
.storybook-site :is(.student-bank-label,.student-bank-label span,.menu-item-desc,.dropdown-header-sub) { color: #334c3b !important; }
.storybook-site .st-stars { color: #905000; }
.storybook-site .btn-star-mini { min-width: 44px; min-height: 44px; }
.storybook-site.high-contrast-mode { background-color: #000; }
.storybook-site.high-contrast-mode :is(.student-bank-label,.student-bank-label span,.st-name,.st-stars,.menu-item-desc,.dropdown-header-sub) { color: #fff !important; }
.storybook-site.high-contrast-mode :is(.card,.manipulative-card,.question-card,.manipulative-main-area,.teacher-guide-details,.arcade-card,.unit-card-btn) { border-color: #facc15; }
.storybook-site.high-contrast-mode .option-btn.selected-correct { background: #123b21 !important; border-color: #86efac !important; }
.storybook-site.high-contrast-mode .option-btn.selected-wrong { background: #4c1d17 !important; border-color: #fca5a5 !important; }

.storybook-site.high-contrast-mode #practice-record-status { color: #fff !important; }
.storybook-site.high-contrast-mode .display-settings[open] > summary { color: #fff !important; background: #18181b !important; border-color: #facc15 !important; }
.storybook-site.high-contrast-mode :is(.btn-outline,.kid-btn-secondary,.kid-btn-solution,.btn-speech) { color: #fff !important; background: #18181b !important; border-color: #facc15 !important; box-shadow: none; }
@media (max-width: 360px) {
  .storybook-site .storybook-welcome { grid-template-columns: minmax(0,1fr); }
  .storybook-welcome h2 { font-size: 2rem; }
  .animal-stage { height: 200px; }
}