/* Keep the lesson's navigation outside its resizable workspace. Only long instructions scroll. */
.lesson-page {height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.lesson-header {height:auto;min-height:70px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left))}
.lesson-workspace {min-height:0;max-width:1800px;width:100%;height:100%;margin:0 auto;padding:clamp(12px,2vh,28px) clamp(16px,3vw,48px);display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:clamp(16px,3vw,48px);overflow:hidden;align-items:stretch}
.teacher {min-height:0;overflow:auto;justify-content:flex-start;align-self:stretch;overscroll-behavior:contain;padding:4px 8px 8px 0}
.teacher h1 {font-size:clamp(23px,2.3vw,34px)}
.teacher .demo-paper {width:min(100%,30dvh);flex-shrink:0;max-width:320px}
.step-description {min-height:0;max-width:100%}
.step-tip {max-width:100%}
.teacher-controls {flex-wrap:wrap}
.draw-side {width:100%;max-width:none;min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;align-content:stretch}
.canvas-label {margin:0;min-width:0;gap:8px}
.canvas-label>span {min-width:0}
.canvas-area,.paper-example-area {min-height:0;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center}
.canvas-area .drawing-paper,.paper-example-area .demo-paper {position:relative;inset:auto;width:min(100cqw,100cqh);height:auto;max-width:none;max-height:100%;aspect-ratio:1;margin:0;flex-shrink:0}
.art-tools {margin:0;padding:8px;gap:5px;box-shadow:none;justify-self:center;max-width:100%}
.art-tools .colors {order:0;width:auto;margin:0;gap:6px}
.art-tools .colors+.tool-divider {display:block}
.art-tools .tool-button,.art-tools .size-button {min-width:44px;min-height:44px}
.art-tools .color-swatch {width:36px;height:36px}
.hint-toast {margin:0;text-align:center}
.lesson-footer {position:relative;bottom:auto;min-height:0;padding:12px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;background:var(--white);z-index:20}
.lesson-footer .secondary {justify-self:start;min-height:48px}
.lesson-footer .primary {justify-self:end;min-width:0;min-height:48px;max-width:100%;white-space:normal}
.paper-workspace .draw-side {grid-template-rows:minmax(0,1fr) auto}
.paper-under {margin:0}
.paper-instruction {margin-top:16px}
.free-workspace {grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr)}
.gallery-undo {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:20px;border-radius:16px;background:var(--mint)}
.art-modal {width:min(760px,100%)}
.art-editor {height:min(900px,calc(100dvh - 40px));display:grid;grid-template-rows:auto auto minmax(60px,1fr) auto auto auto auto;overflow:hidden}
.art-visual {min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px}
.art-editor .art-preview {position:relative;min-height:0;margin:8px 0 0;overflow:hidden}
.art-editor .art-preview>img {position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;object-fit:contain}
.art-editor .art-preview .paper-finish {height:100%;width:auto;max-width:100%;aspect-ratio:1}
.art-editor .photo-strip {padding-block:3px}
.art-editor .art-bottom-actions {margin-top:12px;padding-top:12px}
.art-preview {display:grid;place-items:center;margin:16px 0;min-height:120px}
.art-preview>img {max-height:42dvh;max-width:100%;object-fit:contain;border-radius:12px}
.art-preview .paper-finish {width:min(260px,100%);margin:0}
.photo-strip {display:flex;gap:8px;overflow-x:auto;padding:6px;scrollbar-width:thin}
.photo-strip button {width:64px;height:64px;flex-shrink:0;background:var(--white);border:2px solid var(--line);border-radius:10px;padding:3px}
.photo-strip button[aria-pressed=true] {border-color:var(--purple);box-shadow:0 0 0 2px var(--lilac)}
.photo-strip img {width:100%;height:100%;object-fit:cover;border-radius:6px}
.photo-actions,.art-secondary-actions {display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.art-modal .photo-actions .primary {margin:0;width:auto;flex:1}
.photo-actions .secondary {flex:1}
.art-secondary-actions>button {min-height:44px}
.art-bottom-actions {display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.art-bottom-actions>.text-button {min-height:44px;color:var(--muted);text-align:left}
.name-label {display:block;text-align:left;font-weight:800;margin:20px 0 8px}
.name-input {width:100%;min-height:52px;background:var(--white);border:2px solid var(--line);border-radius:12px;padding:12px;color:var(--ink)}
.install-link {display:flex;text-decoration:none;margin-top:20px}
.install-settings {margin-top:18px;width:100%}
.version-button {display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--purple);font-size:11px;font-weight:850;white-space:nowrap}
.version-button .icon {width:16px;height:16px}
.update-card {margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.update-card h3 {font-size:15px;letter-spacing:0}.current-version {font-size:13px;font-weight:850;color:var(--purple);margin-top:6px}
.update-status {font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0;min-height:42px}
.update-actions {display:flex;flex-wrap:wrap;gap:10px}.update-actions>button {flex:1;min-width:160px}
.update-actions .primary {margin:0;width:auto}.update-actions [hidden] {display:none!important}
.update-modal .update-card {margin-top:15px}.update-card .small-note {font-size:11px!important}
@media (min-width:1800px) {.main-shell{max-width:2200px}.lesson-grid,.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card-art{height:230px}}
@media (max-width:1000px) {.lesson-workspace{grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);gap:18px;padding:14px 18px}.art-tools .colors{order:5;width:100%;justify-content:center}.art-tools .colors+.tool-divider{display:none}.footer-encouragement{display:none}.lesson-footer{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
@media (max-width:680px) {
  .lesson-header{min-height:62px;padding:8px 12px;grid-template-columns:36px minmax(0,1fr) 124px}
  .lesson-workspace,.paper-workspace,.free-workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,.5fr) minmax(0,1fr);padding:10px 12px;gap:10px;max-width:none}
  .teacher{display:block;min-height:0;padding:0 108px 0 0;position:relative}
  .teacher h1{font-size:21px;margin-top:5px}.step-description{font-size:12px;line-height:1.45;margin-top:6px}
  .teacher .demo-paper{position:absolute;top:0;right:0;width:96px;height:96px}
  .teacher-controls{margin:8px 0 0}.teacher-controls .tiny-button{min-height:44px;font-size:10px;padding:6px 8px}
  .step-tip{font-size:10px;margin-top:8px}.draw-side{gap:6px}.canvas-label{font-size:10px}.canvas-area .drawing-paper{max-width:100%}
  .art-tools{row-gap:4px;padding:5px;gap:2px}.art-tools .tool-button,.art-tools .size-button{min-width:40px;min-height:44px}.art-tools .color-swatch{width:32px;height:32px}.tool-divider{margin:0 2px}
  .hint-toast{display:none}.draw-side{grid-template-rows:auto minmax(0,1fr) auto}
  .lesson-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:12px}.lesson-footer .primary,.lesson-footer .secondary{font-size:12px;padding:10px 12px}
  .paper-workspace .teacher,.free-workspace .teacher{padding:0}.paper-workspace .teacher h1{font-size:23px}.paper-workspace .step-description{font-size:13px}.paper-instruction,.paper-workspace .step-tip{display:none}
  .paper-workspace .draw-side{grid-template-rows:minmax(0,1fr) auto}.paper-under{font-size:10px}
  .free-teacher .eyebrow,.free-teacher>.step-description,.free-workspace .step-tip{display:none}.prompt-card{margin-top:8px;padding:10px 46px 10px 12px}.prompt-card p{font-size:11px}
  .gallery-intro .secondary{font-size:11px;gap:6px;padding:10px;white-space:normal}.gallery-intro{gap:12px}.gallery-intro h1{font-size:24px}
  .art-secondary-actions{gap:8px}.art-secondary-actions>.secondary{font-size:12px;padding:10px}.photo-actions{gap:8px}.photo-actions>.primary,.photo-actions>.secondary{font-size:12px;padding:12px}
  .version-button{font-size:10px;padding:5px 7px;gap:4px}.version-button .icon{width:14px;height:14px}.top-actions{gap:4px}.mobile-brand .brand{font-size:19px}
}
@media (max-height:540px) and (min-width:681px) {.lesson-header{min-height:60px;padding-block:8px}.lesson-workspace{padding-block:8px}.teacher .demo-paper{width:120px}.teacher h1{font-size:22px;margin-top:7px}.teacher-controls{margin:8px 0}.step-tip{margin-top:8px}.step-description{font-size:13px;margin-top:8px}.lesson-footer{padding-block:8px}.art-tools{padding:4px}.hint-toast{display:none}.draw-side{grid-template-rows:auto minmax(0,1fr) auto}.paper-workspace .draw-side{grid-template-rows:minmax(0,1fr) auto}}
@media (max-height:600px) {.art-editor{display:block;overflow:auto}.art-editor .art-preview{height:180px}.art-bottom-actions{position:sticky;bottom:-33px;background:var(--page);z-index:2;padding-bottom:12px}}