body[data-mode="lessons"] #save-status{display:none}
#lessons{max-width:760px;padding-top:36px}.lesson-topline{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.lesson-topline .eyebrow{margin:0}.lesson-dots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:15px 0 28px}.lesson-dots button{min-width:0;height:28px;padding:0 2px;border:0;border-radius:5px;background:transparent}.lesson-dots button::after{content:"";display:block;height:4px;border-radius:4px;background:#e0e4d7}.lesson-dots button.active::after{background:#71936c}.lesson-dots button[aria-current="step"]::after{height:6px;background:#315d4c}.lesson-dots button:focus-visible{outline:2px solid #315d4c;outline-offset:1px}.lesson-copy p{font-size:16px;line-height:1.65;max-width:610px;min-height:53px;margin:12px 0 22px;color:#657769}.lesson-card{background:#fffef9;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #284b4306}.lesson-card canvas{aspect-ratio:840/370;object-fit:cover;object-position:bottom}.lesson-cell{padding:20px 22px 0}.lesson-cell label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}.lesson-input-row{display:flex;align-items:center;gap:12px;padding:10px;background:#f5f6ed;border:1px solid #d9dfcd;border-radius:9px}.cell-prompt{color:#87a477;font-family:var(--mono)}#lesson-code{min-width:0;flex:1;resize:none;border:0;background:transparent;color:var(--ink);font:17px/1.65 var(--mono);padding:4px;outline-offset:0}#lesson-completions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}#lesson-completions:empty{display:none}#lesson-completions button{border:1px solid #d9dfcd;padding:8px 12px;text-align:left;background:#f5f8ed;font:13px var(--mono)}#lesson-completions small{display:block;font:11px system-ui;color:var(--muted);margin-top:4px}#lesson-input-help{font-size:11px;line-height:1.5;color:var(--muted)}#lesson-feedback{margin:0;padding:10px 22px 20px;min-height:55px;line-height:1.5;color:#496b38}#lesson-feedback[data-error="true"]{color:#a05a3b}.lesson-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.lesson-footnote{text-align:center;font-size:12px;color:var(--muted);line-height:1.5}.lesson-quiz{margin-top:20px;border:1px solid var(--border);background:#eff2e6;padding:18px 22px;border-radius:12px}.lesson-quiz h2{font-size:15px;margin:0 0 12px}.lesson-quiz button{padding:10px 14px;margin-right:8px;border:1px solid #ccd6be;background:#fffef9}.lesson-quiz p{margin-bottom:0;line-height:1.5}#lesson-title:focus{outline:none}@media(max-width:540px){#lessons{padding-top:24px}.lesson-cell{padding:15px 12px 0}.lesson-input-row{gap:6px}#lesson-code{font-size:15px}.lesson-input-row .primary{padding:10px}.lesson-card .panel-heading{padding:0 12px;font-size:11px}.header-actions{gap:0}.header-actions button{font-size:11px;padding:8px}.lesson-copy p{font-size:14px}}
body:not([data-mode="workshop"]) #save-status{display:none}
#lesson-game[data-drawing="true"]{aspect-ratio:840/480;object-fit:contain}#lesson-game:focus-visible{outline:3px solid #71936c;outline-offset:-3px}
.lesson-live{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 20px;background:#edf2e3}.lesson-live span{flex:1;min-width:150px;font-size:12px;line-height:1.5}.lesson-live button,.lesson-palette button{background:#fffef9;border:1px solid #cfdac4;padding:9px 14px}.lesson-live button{touch-action:none}.lesson-palette{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 22px;font-size:12px}.lesson-palette [data-sky="night"]{background:#334d56;color:#fff}.lesson-palette [data-sky="lavender"]{background:#e7deee}.lesson-palette [data-sky="peach"]{background:#f3dfc6}.lesson-palette [data-sky="mint"]{background:#dcebdc}
#learning-map{max-width:1200px}#map-title:focus{outline:none}.map-note{color:#788674;font-size:13px;line-height:1.6}.map-branches{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin:26px 0 42px}.map-branch{padding:24px;border:1px solid var(--border);background:#fffef9;border-radius:16px}.map-branch h2,.game-library h2{font:28px Georgia,serif;margin:10px 0}.map-branch>p:not(.eyebrow),.game-library>p{color:var(--muted);line-height:1.6}.skill-nodes{display:flex;flex-direction:column;gap:12px;margin-top:22px}.skill-node{position:relative;display:flex;flex-direction:column;gap:6px;align-items:start;text-align:left;border:1px solid #d8dfcd;padding:15px 18px;background:#f8f9f0;border-radius:10px}.skill-node:not(:last-child):after{content:'';position:absolute;left:28px;bottom:-13px;width:2px;height:12px;background:#c9d5be}.skill-node strong{font-size:14px}.skill-node span,.future-node span{font-size:12px;color:#788674}.skill-node[data-practiced="true"]{border-color:#98b484;background:#edf4e4}.future-node{margin-top:24px;padding:18px;border:1px dashed #cfd7c4;border-radius:10px;display:flex;flex-direction:column;gap:7px;color:#7d8974}.game-library{margin-top:20px}#game-library-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.library-card{padding:22px;border:1px solid var(--border);background:#fffef9;border-radius:14px;display:flex;flex-direction:column;align-items:start}.library-mark{font-size:30px;color:#77916d}.library-card h3{font:23px Georgia,serif;margin:12px 0 0}.library-card p{font-size:13px;line-height:1.6}.library-card small{color:#75876c;line-height:1.5}.library-card .library-recommendation{color:#798574;font-size:12px;flex:1}.transfer-offer{padding:18px 22px;background:#edf3e3;border:1px solid #cbd9bb;border-radius:12px;margin-bottom:20px;font-size:13px;line-height:1.6}.transfer-offer details{margin:10px 0}.transfer-offer pre{white-space:pre-wrap;font:12px/1.6 var(--mono)}.transfer-offer summary{cursor:pointer}.transfer-offer>div{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:780px){.map-branches{grid-template-columns:1fr;gap:18px}#game-library-cards{grid-template-columns:1fr 1fr}.header-actions{gap:6px}.brand{font-size:17px}.topbar{flex-wrap:wrap;gap:10px}}@media(max-width:520px){#game-library-cards{grid-template-columns:1fr}.header-actions button{font-size:10px;padding:7px}.topbar{padding:12px}.brand{font-size:16px}.brand-mark{width:28px;height:28px;font-size:24px}.map-branch{padding:18px}.lesson-live{padding:10px 12px}.header-actions{margin-left:auto}}

/* Keep the lesson and its experiment together in a laptop viewport. */
@media (min-width: 900px) {
  #lessons {
    max-width: 1280px;
    padding: 26px 32px;
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
  }
  .lesson-instructions { padding-top: 12px; min-width: 0; }
  .lesson-topline { align-items: start; flex-direction: column; gap: 10px; }
  .lesson-dots { margin: 16px 0 28px; }
  .lesson-copy h1 { font-size: clamp(29px, 2.7vw, 38px); line-height: 1.15; }
  .lesson-copy p { font-size: 15px; line-height: 1.7; min-height: 0; margin-bottom: 20px; }
  .lesson-navigation { gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .lesson-navigation .primary { max-width: 100%; text-align: left; line-height: 1.5; }
  .lesson-footnote { text-align: left; max-width: 300px; margin-top: 18px; }
  .lesson-quiz { padding: 16px; }
  .lesson-quiz button { padding: 8px 10px; margin-bottom: 6px; }
  .lesson-card .panel-heading { height: 42px; }
  .lesson-card canvas {
    height: clamp(150px, calc(100dvh - 500px), 300px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: bottom;
    background: #fbfaf2;
  }
  #lesson-game[data-drawing="true"] { aspect-ratio: auto; object-fit: contain; }
  .lesson-cell { padding: 14px 18px 0; }
  .lesson-cell label { margin-bottom: 8px; }
  #lesson-code { font-size: 16px; line-height: 1.5; }
  .lesson-live { padding: 9px 18px; }
  #lesson-feedback { padding: 8px 18px 14px; min-height: 50px; font-size: 13px; }
  .lesson-palette { padding: 6px 18px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  body[data-mode="lessons"] .topbar { padding-top: 12px; padding-bottom: 12px; }
  #lessons { padding-top: 18px; padding-bottom: 18px; }
  .lesson-instructions { padding-top: 0; }
  .lesson-dots { margin-bottom: 18px; }
  .lesson-copy p { font-size: 14px; line-height: 1.55; }
  .lesson-navigation { margin-top: 18px; }
  .lesson-footnote { margin-top: 12px; }
}
@media (max-width: 899px) {
  .lesson-instructions { display: contents; }
  #lessons { display: flex; flex-direction: column; }
  .lesson-card { order: 1; }
  .lesson-quiz { order: 2; }
  .lesson-navigation { order: 3; }
  .lesson-footnote { order: 4; }
}
@media (min-width: 900px) {
  .lesson-cell { position: relative; }
  #lesson-completions {
    position: absolute;
    top: calc(100% - 40px);
    left: 18px;
    right: 18px;
    z-index: 2;
    margin: 0;
    padding: 6px;
    border: 1px solid #d9dfcd;
    border-radius: 9px;
    background: #fffef9;
    box-shadow: 0 5px 14px #284b4314;
  }
}

/* A running loop has a persistent, visibly pressed Stop control. */
#lesson-run[aria-pressed="true"], #run[aria-pressed="true"] {
  background: #e0e9d2;
  color: #284b43;
  box-shadow: inset 0 2px 4px #284b4328;
  outline: 1px solid #a3b78d;
  outline-offset: -1px;
}

.lesson-code-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.lesson-cell .lesson-code-tools label { margin:0; }
.lesson-code-tools .quiet { font-size:11px; padding:6px 8px; }

/* Completed lessons remain open for another try. */
.skill-node { padding-left:22px; }
.skill-node .stage-status { margin-top:4px; font-size:11px; font-weight:650; }
.skill-node[data-practiced="true"] { background:#e5f0df; border-color:#6d9464; border-left:5px solid #527c49; padding-left:18px; }
.skill-node[data-practiced="true"] strong { color:#315d37; }
.skill-node[data-practiced="true"] .stage-status { background:#426c46; color:#fff; border-radius:20px; padding:4px 9px; }
.map-branch > .branch-progress { color:#426c46; font-size:12px; font-weight:650; margin:16px 0 0; }

/* Small opening slides: one idea, one cell, and room to see the result. */
body[data-mode="lessons"] .topbar { padding-top:10px; padding-bottom:10px; }
#lessons[data-layout="compact"] { display:flex; flex-direction:column; align-items:stretch; gap:0; max-width:700px; padding:18px 24px; }
#lessons[data-layout="compact"] .lesson-instructions { display:contents; }
#lessons[data-layout="compact"] .lesson-topline { flex-direction:row; font-size:11px; }
#lessons[data-layout="compact"] .lesson-dots { margin:10px 0 16px; }
#lessons[data-layout="compact"] .lesson-copy h1 { font-size:30px; margin:0; }
#lessons[data-layout="compact"] .lesson-copy p { min-height:0; font-size:15px; line-height:1.5; margin:10px 0 16px; }
#lessons[data-layout="compact"] .lesson-card { order:2; }
#lessons[data-layout="compact"] .lesson-quiz { order:1; margin:0 0 12px; padding:12px 16px; }
#lessons[data-layout="compact"] .lesson-navigation { order:3; margin-top:14px; }
#lessons[data-layout="compact"] .lesson-footnote { display:none; order:4; max-width:none; text-align:center; margin:10px 0 0; }
#lessons[data-layout="compact"] canvas { height:clamp(130px, 22vh, 160px); aspect-ratio:auto; object-fit:cover; object-position:bottom; }
#lessons[data-console="true"] canvas, #lessons[data-console="true"] .panel-heading { display:none; }
#lessons[data-layout="compact"] .panel-heading { height:32px; font-size:11px; }
#lessons[data-layout="compact"] .lesson-cell { padding:10px 14px 0; }
#lessons[data-layout="compact"] #lesson-feedback { padding:6px 14px 10px; min-height:0; font-size:13px; }
#lesson-transcript { padding:10px 16px; max-height:96px; overflow:auto; background:#edf2e6; border-top:1px solid #d9dfcd; font:14px/1.5 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
#lesson-prediction { width:100%; padding:8px 10px; border:1px solid #ccd6be; border-radius:6px; background:#fffef9; color:var(--ink); font:16px var(--mono); }
#quiz-feedback:empty { display:none; }

#lessons[data-layout="compact"] #lesson-code { white-space:pre; overflow-x:auto; }

#quiz-check { margin-top:12px; }

.lesson-explanation { display:grid; gap:16px; margin:8px 0 18px; }
.lesson-explanation.diagram-comparison { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lesson-explanation.diagram-comparison article { padding:18px; }
.lesson-explanation.diagram-comparison pre { font-size:16px; }
.graphics-diagram svg { display:block; width:100%; max-width:440px; margin:0 auto 12px; font:13px system-ui; fill:#315d4c; }
.pixel-controls { display:flex; gap:24px; margin:0 0 16px; }
.pixel-controls label { flex:1; min-width:0; font-weight:600; color:#315d4c; }
.pixel-controls input { display:block; width:100%; min-height:32px; accent-color:#b15b35; }
.bresenham-controls { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.bresenham-controls button { padding:8px 12px; font-size:13px; }
.lesson-explanation .bresenham-status { margin-bottom:12px; font-size:15px; }
.bresenham-table { margin:0 0 16px; overflow-x:auto; }
.bresenham-table summary { cursor:pointer; padding:8px 0; }
.bresenham-table table { width:100%; border-collapse:collapse; font-size:13px; }
.bresenham-table caption { text-align:left; margin:8px 0; color:var(--muted); }
.bresenham-table th, .bresenham-table td { text-align:left; padding:8px 4px; border-bottom:1px solid var(--border); }
#lessons[data-layout="compact"] .pixel-fan canvas { display:block; width:576px; max-width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; image-rendering:pixelated; margin:0 auto 18px; }
.fan-controls { display:flex; flex-wrap:wrap; gap:12px 20px; margin:0 0 18px; }
.fan-controls label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#315d4c; }
.fan-controls label:last-child { flex-direction:row; align-items:center; flex-basis:100%; }
.fan-controls select { max-width:100%; padding:8px; font:inherit; color:inherit; background:#fffef9; border:1px solid var(--border); border-radius:6px; }
.fan-controls input { accent-color:#315d4c; }
@media(max-width:900px) { #lessons[data-layout="compact"] .pixel-fan canvas { width:384px; } }
@media(max-width:540px) { #lessons[data-layout="compact"] .pixel-fan canvas { width:192px; } }
@media(max-width:540px) { .lesson-explanation.diagram-comparison { grid-template-columns:1fr; } }
.lesson-explanation article { padding:22px 26px; border:1px solid var(--border); border-radius:14px; background:#fffef9; }
.lesson-explanation h2 { font-size:18px; margin:0 0 14px; }
.lesson-explanation pre { margin:0 0 12px; padding:14px 16px; border-radius:8px; background:#edf2e6; white-space:pre-wrap; overflow-wrap:anywhere; font:22px/1.5 var(--mono); }
.lesson-explanation p { color:#52695c; font-size:17px; line-height:1.6; margin:0; max-width:52ch; }
#lessons[data-explanation="true"] .lesson-copy p { font-size:18px; line-height:1.6; }
@media(max-width:540px) { .lesson-explanation article { padding:18px; } .lesson-explanation pre { font-size:18px; } .lesson-explanation p { font-size:16px; } }

#lesson-output { margin:0 14px 12px; border:1px solid #d9dfcd; border-radius:8px; overflow:hidden; background:#edf2e6; }
#lesson-output-title { margin:0; padding:10px 14px 4px; font:600 11px/1.5 system-ui; letter-spacing:1px; text-transform:uppercase; color:#52695c; }
#lesson-output #lesson-transcript { border:0; padding:4px 14px 12px; font-size:17px; }

#lesson-examples { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#lesson-examples button { display:flex; flex-direction:column; gap:5px; padding:9px 12px; border:1px solid #ccd6be; background:#fffef9; text-align:left; }
#lesson-examples span { font-size:11px; color:#657769; }
#lesson-examples code { font:13px/1.5 var(--mono); }

.lesson-editor { display:flex; flex:1; min-width:0; position:relative; background:#fffef9; border-radius:6px; }
#lesson-code:focus { outline:none; }
.lesson-editor:has(#lesson-code:focus-visible) { box-shadow:0 0 0 2px #b2caa2; }
.lesson-input-row { position:relative; }
.lesson-edit-hint { position:absolute; z-index:3; bottom:calc(100% + 10px); left:0; width:300px; max-width:100%; display:flex; align-items:start; gap:6px; padding:12px 14px; border-radius:10px; background:#315d4c; color:#fff; box-shadow:0 4px 14px #284b4320; }
.lesson-edit-hint::after { content:""; position:absolute; left:24px; top:100%; border:7px solid transparent; border-top-color:#315d4c; }
.lesson-edit-hint p { margin:0; font-size:12px; line-height:1.5; }
.lesson-edit-hint button { padding:0 3px; color:#fff; font-size:20px; line-height:1; }
.lesson-edit-hint button:hover { background:#426c56; }
.lesson-editor.guided { --code-line-height:28px; background:#e6e9e2; border-radius:6px; padding:4px 0; }
#lessons .lesson-editor.guided #lesson-code { position:relative; z-index:1; font-size:16px; line-height:var(--code-line-height); height:calc(var(--code-rows) * var(--code-line-height) + 16px); padding:0 8px; white-space:pre; overflow-x:auto; }
#lesson-line-highlight { position:absolute; top:calc(4px + var(--editable-row) * var(--code-line-height)); left:0; right:0; height:var(--code-line-height); background:#fffef9; pointer-events:none; }
@media(max-width:540px) {
  #lessons .lesson-editor.guided #lesson-code { font-size:14px; }
  .lesson-input-row:has(.guided) { flex-wrap:wrap; }
  .lesson-input-row:has(.guided) .cell-prompt { display:none; }
  .lesson-input-row:has(.guided) .lesson-editor { flex-basis:100%; }
  .lesson-input-row:has(.guided) #lesson-run { margin-left:auto; }
}

/* Grid lessons need the entire board, including the starting tile and heading. */
#lessons[data-layout="compact"] canvas[data-robot="true"] { height:clamp(260px, 34vh, 320px); aspect-ratio:1; object-fit:contain; object-position:center; background:#f6f4e9; }

.curriculum-chapter { margin:12px 0; border:1px solid var(--border); border-radius:12px; background:#fffef9; }
.curriculum-chapter summary { cursor:pointer; padding:16px; color:var(--ink); }
.curriculum-chapter summary strong { margin-left:6px; }
.curriculum-chapter summary:focus-visible { outline:2px solid #315d4c; outline-offset:2px; border-radius:12px; }
.chapter-count { float:right; font-size:12px; color:var(--muted); line-height:1.8; }
.curriculum-chapter > p { margin:0 16px 14px; color:var(--muted); line-height:1.5; }
.curriculum-chapter .skill-nodes { margin:0 16px 16px; }
@media(max-width:540px) { .chapter-count { float:none; display:block; margin:6px 0 0 22px; } }

/* The slide keeps its own layout; Pip sits alongside the whole activity. */
body:not([data-mode="lessons"]) #lesson-with-tutor { display:none; }
#lesson-with-tutor { max-width:1500px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; padding:24px 28px; align-items:start; }
#lesson-with-tutor #lessons { width:100%; min-width:0; margin:0 auto; padding:0; }
#lesson-tutor { position:sticky; top:20px; min-width:0; border:1px solid var(--border); border-radius:16px; background:#fffef9; overflow:hidden; }
#lesson-tutor .helper-heading { padding:20px 18px 10px; }
#lesson-tutor h2 { margin:0; font-size:19px; }
#lesson-tutor-mode,#lesson-tutor-context,#lesson-tutor-status { font-size:12px; line-height:1.5; color:var(--muted); }
#lesson-tutor-context { margin:0; padding:0 18px 14px; border-bottom:1px solid var(--border); }
#lesson-tutor-messages { height:clamp(180px,38dvh,380px); overflow-y:auto; padding:14px; overscroll-behavior:contain; }
.lesson-tutor-message { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.6; margin:0 0 12px; padding:12px; background:#f0f4e8; border-radius:12px; }
.lesson-tutor-message.user { background:#e5eeeb; margin-left:24px; }
.lesson-tutor-prompts { display:flex; gap:6px; padding:8px 14px; flex-wrap:wrap; }
.lesson-tutor-prompts button { font-size:12px; border:1px solid var(--border); background:transparent; padding:8px; }
#lesson-tutor-form { padding:8px 14px; display:flex; flex-direction:column; align-items:end; gap:8px; }
#lesson-tutor-question { width:100%; resize:vertical; min-height:64px; max-height:180px; border:1px solid var(--border); border-radius:9px; padding:10px; font-family:inherit; font-size:14px; line-height:1.5; background:#fafbf5; color:var(--ink); }
#lesson-tutor-form button { padding:9px 16px; }
#lesson-tutor-status { margin:0; padding:0 14px 12px; }
@media (min-width:900px) and (max-width:1250px) {
  #lesson-with-tutor #lessons { display:flex; flex-direction:column; gap:0; }
  #lesson-with-tutor .lesson-instructions { display:contents; }
  #lesson-with-tutor .lesson-card { order:1; width:100%; }
  #lesson-with-tutor .lesson-navigation { order:3; }
  #lesson-with-tutor .lesson-footnote { order:4; }
}
@media (max-width:899px) {
  #lesson-with-tutor { grid-template-columns:minmax(0,1fr); max-width:760px; padding:20px 16px; }
  #lesson-tutor { position:static; }
  #lesson-tutor-messages { height:240px; }
}

/* Golden Classics: choose an exhibit, then a learning path. */