:root {
  --surface: #FFF8F1; --surface-2: #F8EDE4; --card: #FFFDFA; --blush: #FDECEA; --honey: #FFF0D2;
  --border: #EBDACD; --cocoa: #8B5E3C; --action: #B4506A; --on-action: #FFFFFF;
  --text: #3A2A24; --text-2: #76625A; --error: #A2342E; --error-bg: #FBE3E0;
  --radius: 18px; --gap: 16px;
  color-scheme: light;
}
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #221C19; --surface-2: #2A221E; --card: #2E2622; --blush: #3D2B2D; --honey: #3A2F1F;
    --border: #4B3D36; --cocoa: #E0B089; --action: #F0A3B4; --on-action: #2A1E1E;
    --text: #F6ECE4; --text-2: #CDBBB1; --error: #F2A49C; --error-bg: #3D2422; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #221C19; --surface-2: #2A221E; --card: #2E2622; --blush: #3D2B2D; --honey: #3A2F1F;
  --border: #4B3D36; --cocoa: #E0B089; --action: #F0A3B4; --on-action: #2A1E1E;
  --text: #F6ECE4; --text-2: #CDBBB1; --error: #F2A49C; --error-bg: #3D2422; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface); color: var(--text); font: 16px/1.5 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.top { padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--cocoa); font-weight: 600; text-decoration: none; }
main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
.foot { display: flex; gap: 8px; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--border); }
button { font: inherit; min-height: 44px; padding: 0 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
button.primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
button.quiet { background: transparent; color: var(--text-2); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
code { background: var(--honey); border-radius: 6px; padding: 0 4px; font-family: ui-monospace, Consolas, monospace; font-size: .92em; }

.list h1 { font-size: 28px; margin: 8px 0 16px; }
.lessons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); }
.lesson-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); text-decoration: none; text-align: center; }
.lesson-card img { width: 96px; height: 96px; object-fit: contain; }
.lesson-card .num { color: var(--cocoa); font-size: 14px; }
.lesson-card .status { font-size: 14px; color: var(--text-2); }
.lesson-card[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.lesson-card.done { background: var(--blush); }

.lesson { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
.pane { min-width: 0; }
.stage { position: relative; display: flex; justify-content: center; background: var(--honey); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.dudu { width: 200px; height: 200px; object-fit: contain; }
.speech { position: absolute; top: 12px; right: 12px; max-width: 55%; margin: 0; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.chat { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.bubble { align-self: flex-start; max-width: 90%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--border); overflow-wrap: anywhere; }
.bubble.from-ala { align-self: flex-end; background: var(--blush); border-radius: 16px 16px 4px 16px; }
.bubble.concept { background: var(--honey); font-weight: 600; }
.bubble.tag { font-size: 14px; color: var(--text-2); }
.bubble.code pre { margin: 0; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.loading { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; width: 30%; background: var(--action); }
.bar.indeterminate span { animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.editor .CodeMirror { height: auto; border: 1px solid var(--border); border-radius: 12px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: var(--card); color: var(--text); }
.editor .CodeMirror-scroll { min-height: 160px; }
.editor .CodeMirror-gutters { background: var(--surface-2); border-right-color: var(--border); }
.cm-error-line { background: var(--error-bg); }
/* keyboard-only help: shown while she is typing in the editor, so it never reads as clutter */
.esc-hint { margin: 4px 0 8px; font-size: 13px; color: var(--text-2); visibility: hidden; }
.editor:has(.CodeMirror-focused) + .esc-hint { visibility: visible; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.output { min-height: 80px; max-height: 40vh; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.output-label { margin: 8px 0 4px; font-size: 14px; color: var(--text-2); }
.output:empty::before { content: "press run n whatever python prints shows up here"; color: var(--text-2); font-family: system-ui, sans-serif; font-style: italic; }
.output.highlight { outline: 3px solid var(--action); }
.output .stderr { color: var(--error); }
.output .echo { color: var(--cocoa); font-weight: 600; }
.output .notice { color: var(--text-2); font-family: system-ui, sans-serif; font-style: italic; }
.input-row { display: flex; gap: 8px; margin-top: 8px; }
.input-row label { flex: 1; display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; min-height: 44px; font: inherit; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); }
details { margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: var(--card); }
details pre { white-space: pre-wrap; margin: 8px 0 0; }
.py-error pre { color: var(--error); }
.card.notice { max-width: 560px; margin: 32px auto; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--blush); text-align: center; }
.card.notice .chat { align-items: center; max-height: none; }
.card .dudu-still { width: 140px; height: 140px; object-fit: contain; }
.card .detail { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }

@media (max-width: 719px) {
  .lesson { grid-template-columns: 1fr; }
  .dudu { width: 140px; height: 140px; }
  .chat { max-height: none; }
  /* stacked layout: older steps fold away (the lesson idea stays) so the current task sits right above the editor */
  .chat:not(.show-old) .bubble.old:not(.concept) { display: none; }
  .earlier { margin-top: 8px; }
  .esc-hint { display: none; }
  .controls { position: sticky; bottom: 0; background: var(--surface); padding: 8px 0; z-index: 2; }
}
@media (min-width: 720px) {
  .earlier { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bar.indeterminate span { animation: none; width: 100%; }
}