/* Pair dark surfaces with readable text. Keep picture colors and art paper intact. */
html[data-theme=dark]{--mm-text:#f3f5ff;--mm-copy:#c6d2e8;--mm-surface:#223047;--mm-control:#33435f;--mm-outline:#7485a2}
html[data-theme=dark] :is(.chart-invite,.coloring-invite){background:linear-gradient(120deg,#263e57,#393153);color:var(--mm-text);border-color:var(--mm-outline);box-shadow:0 5px 0 #0d172a}
html[data-theme=dark] :is(.chart-invite,.coloring-invite) :is(h2,p,.eyebrow){color:var(--mm-text)}
html[data-theme=dark] :is(.parent-feedback,.feedback-form-panel){background:var(--mm-surface);color:var(--mm-text);border-color:var(--mm-outline);box-shadow:0 5px 0 #0d172a}
html[data-theme=dark] :is(.feedback-summary,.feedback-card time,.question-count,.lesson-caption,.game-setup p,.round-score,.account-note,.account-status,.payment-webhook){color:var(--mm-copy)}
html[data-theme=dark] .account-page{color:var(--mm-text)}
html[data-theme=dark] .payment-webhook{background:var(--mm-control)}
html[data-theme=dark] :is(.feedback-stars,.parent-icon){color:#ffd979}
html[data-theme=dark] :is(.game-filters button,.lesson-jump button,.lesson-actions button){background:var(--mm-control);color:var(--mm-text);border-color:var(--mm-outline)}
html[data-theme=dark] :is(.game-filters button[aria-pressed=true],.lesson-jump button.selected){background:#6650b0;color:#fff;border-color:#b8a3f5}
html[data-theme=dark] .lesson-actions .speak-button{background:#ffe090;color:#30213a;border-color:#ebc26a}
html[data-theme=dark] :is(.back-to-setup,.secondary){color:#dbc8ff}
html[data-theme=dark] :is(.question-art,.lesson-visual){background:#263650;color:var(--mm-text)}
html[data-theme=dark] :is(.lesson-letter,.lesson-word){color:#dcc9ff;text-shadow:none}
html[data-theme=dark] .welcome h1 span{-webkit-text-fill-color:#d0b3ff;color:#d0b3ff}
html[data-theme=dark] .learn-first-buttons span{color:#dcc9ff}
html[data-theme=dark] .answer.retry{background:#554124;color:#fff2cf;border-color:#ebc26a}
html[data-theme=dark] .answer:hover:not(:disabled){background:#3d4d69;color:var(--mm-text);border-color:#c6b1ff}
html[data-theme=dark] .answer:disabled{color:var(--mm-text);opacity:1}
html[data-theme=dark] .answer.correct:disabled{background:#205443;color:#d0ffec;border-color:#71dcae}
html[data-theme=dark] :is(.avatar-picker input:checked+span,.drawing-page-gallery button.selected){background:#4b3971;color:var(--mm-text);border-color:#c9b3ff}
html[data-theme=dark] .mm-game:nth-child(n){background:linear-gradient(145deg,#3f365c,#243d50);color:var(--mm-text)}
html[data-theme=dark] .mm-game :is(h3,p){color:var(--mm-text)}
html[data-theme=dark] .mm-memory .mm-card{background:#354260;color:#decfff}
html[data-theme=dark] .mm-memory .mm-card.mm-selected{background:#4b3970;color:#f3f5ff}
html[data-theme=dark] .mm-memory .mm-card.mm-correct{background:#1f574d;color:#f3f5ff}
html[data-theme=dark] .mm-shadow{background:#dae8ff;border-radius:20px;padding:12px}
html[data-theme=dark] .mm-shadow .learning-sprite{filter:brightness(0)}
html[data-theme=dark] .drawing-area{background:linear-gradient(135deg,#dfeaf7,#ece5f8);color:#273354}
html[data-theme=dark] .drawing-area p{color:#273354}
html[data-theme=dark] :is(input,textarea)::placeholder{color:#b8c7df;opacity:1}
html[data-theme=dark] :is(button,a,input,textarea,select):focus-visible{outline:3px solid #ffd979;outline-offset:3px}
/* A true viewport for each story scene: source coordinates keep every frame undistorted. */
.story-scene{display:block;position:relative;overflow:hidden;width:100%;isolation:isolate;border-radius:16px;flex:none;background:#e7f2ff}
.story-scene img{position:absolute;display:block;max-width:none;object-fit:fill;padding:0;margin:0;aspect-ratio:auto}
.story-reader-art{padding:18px;background:#e9f2ff;display:flex;justify-content:center}
.story-reader-art .story-scene{max-width:660px}
.story-cover{aspect-ratio:1.45;height:auto;padding:12px;align-items:center;justify-content:center}
.story-cover .story-scene{width:min(100%,235px);max-height:none}
.story-cover .story-scene img{object-fit:fill;max-width:none;aspect-ratio:auto}
html[data-theme=dark] .story-reader-art{background:#1b283f}
@media(max-width:600px){.story-reader-art{padding:10px}.story-cover{padding:8px}.story-reading .story-text{font-size:20px}}

.story-cover{height:220px;min-height:220px;aspect-ratio:auto}.story-cover .story-scene-cover{width:min(100%,200px)}