.sketch-shell,#foundation-map-screen,#drawing-screen{max-width:1080px!important;margin:auto;padding:24px 24px 64px;box-sizing:border-box;color:#252337}
.sketch-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:28px 32px;border-radius:24px;background:linear-gradient(120deg,#F9EDDA,#E4FCE4);margin-bottom:24px}
.sketch-hero h1{font-size:clamp(25px,4vw,38px);line-height:1.15;margin:10px 0;font-family:Montserrat,sans-serif}.sketch-hero p{font-size:14px;line-height:1.6;max-width:520px}.sketch-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#635583}
.sketch-badge{display:grid;justify-items:center;text-align:center;gap:6px;flex:0 0 160px;font-size:13px}.sketch-badge img{width:100px;height:100px;object-fit:contain;border-radius:50%;background:white;padding:6px;box-shadow:0 5px 20px #76608e22}.sketch-badge small{font-size:11px;color:#645b70}
.sketch-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0!important}.sketch-branch{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:24px;background:#fff;border:1px solid #e3dbed;border-radius:22px;text-decoration:none;color:inherit;align-items:center;transition:transform .2s}.sketch-branch:hover{transform:translateY(-3px);border-color:#9d87c5}.sketch-branch img{width:96px;height:96px;object-fit:contain;border-radius:50%}.sketch-branch h2{font-size:19px;margin:8px 0}.sketch-branch p{font-size:13px;line-height:1.5;margin:6px 0}.sketch-branch small{color:#695e78;font-size:11px}.sketch-branch progress{width:100%;height:6px;accent-color:#6b9c92}.sketch-action{display:inline-block;background:linear-gradient(120deg,#a78bfa,#67e8f9);color:white;border-radius:24px;padding:12px 20px;margin-top:12px;font-size:13px;text-decoration:none;border:0;cursor:pointer;font-weight:700;min-height:44px;box-sizing:border-box}.sketch-current{border:2px solid #8edbe4;border-radius:20px;background:#f0fdff;padding:20px 24px;margin-bottom:24px}.sketch-current h2{font-size:22px;margin:8px 0}.sketch-current p{font-size:13px;line-height:1.5}
#drawing-screen .path-header,#drawing-screen .badge-footer{display:none}#drawing-screen #path-nodes{max-width:none;padding:0 0 0 10px}#drawing-screen .path-node{max-width:none;border:1px solid #e5dff0;background:white;border-radius:18px;margin-bottom:16px;padding:20px;min-height:100px}#drawing-screen .path-node::before,#drawing-screen .path-node::after{display:none}#drawing-screen .node-icon{box-shadow:none;background:#A9CEA7;color:#17182D}#drawing-screen .path-node.current{border:2px solid #8edbe4;background:#f0fdff}#drawing-screen .node-title{font-size:18px}#drawing-screen .node-tag{line-height:1.6}#drawing-screen .path-nodes{border-left:3px dashed #ded2ee}.sketch-road{border-left:3px dashed #ded2ee;padding-left:24px}.sketch-road section{padding:20px;margin:18px 0;background:white;border:1px solid #e3dbed;border-radius:18px}.sketch-road h2{font-size:21px}.sketch-road p{font-size:14px;line-height:1.6}.sketch-shell .back-btn{display:inline-block;min-height:44px;text-decoration:none;color:#635583}
:where(.sketch-shell,#drawing-screen,#foundation-map-screen) :focus-visible{outline:3px solid #7854af;outline-offset:4px}
@media(max-width:600px){.sketch-shell,#foundation-map-screen,#drawing-screen{padding:16px 16px 40px}.sketch-grid{grid-template-columns:1fr}.sketch-hero{padding:22px;gap:16px;align-items:flex-start;flex-direction:column}.sketch-badge{display:grid;grid-template-columns:64px 1fr;flex-basis:auto;text-align:left;justify-items:start;column-gap:12px}.sketch-badge img{width:64px;height:64px;grid-row:1/4}.sketch-branch{padding:20px;grid-template-columns:76px 1fr}.sketch-branch img{width:76px;height:76px}.sketch-road{padding-left:14px}}
@media(prefers-reduced-motion:reduce){.sketch-branch{transition:none}}
/* One ordered program, and the same lesson rows in both packages. */
#foundation-map-nodes{grid-template-columns:1fr!important;gap:20px;border-left:3px dashed #d8cce7;padding-left:22px!important;margin-left:20px}
#foundation-map-nodes .sketch-branch{position:relative;grid-template-columns:52px minmax(0,1fr) 82px;text-align:left;font:inherit;width:100%;box-sizing:border-box;transform:none}
#foundation-map-nodes .foundation-intro-stop{grid-template-columns:52px minmax(0,1fr);cursor:pointer}
.foundation-step{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#A9CEA7;color:#17182D;font-weight:800;font-size:20px}
#foundation-map-nodes .current{border:2px solid #8edbe4;background:#f0fdff}#foundation-map-nodes .done .foundation-step{background:#1d9e75;color:white}#foundation-map-nodes .upcoming{background:#F9EDDA}#foundation-map-nodes .foundation-reward{width:76px;height:76px}
#foundation-intro-dialog{border:0;border-radius:24px;padding:20px;width:min(1000px,94vw);max-height:92dvh;margin:auto;overflow:auto;background:#faf9f7;color:#252337}#foundation-intro-dialog::backdrop{background:#252337bb;backdrop-filter:blur(5px)}#foundation-intro-dialog .sketch-intro{margin:0}#foundation-intro-dialog video{max-height:62dvh}
.sketch-package .path-nodes{border-left:3px dashed #ded2ee!important;padding:0 0 0 10px!important}
.sketch-package .path-node{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;border:1px solid #e5dff0;background:#fff;border-radius:18px;margin-bottom:16px;padding:20px;min-height:100px}
.sketch-package .path-node.current{border:2px solid #8edbe4;background:#f0fdff}.sketch-package .node-info{flex:1;min-width:0}.sketch-package .node-title{font:800 18px Montserrat,sans-serif;margin:5px 0}.sketch-package .node-kicker{font:800 10px Montserrat,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#695185}.sketch-package .node-tag{font-size:12px;line-height:1.6;color:#71677c}.sketch-package .node-arrow{font-size:19px}.sketch-package .done .node-kicker{color:#1d9e75}
#drawing-screen .node-icon,.sketch-package .node-icon{position:relative;width:76px;height:76px;flex:0 0 76px;border-radius:50%;display:grid;place-items:center;background:#A9CEA7;overflow:visible;font-size:22px}
.node-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid white}.node-icon .lesson-check{position:absolute;right:-3px;bottom:-3px;border:3px solid white;border-radius:50%;background:#1d9e75;color:white;width:28px;height:28px;display:grid;place-items:center;font-size:16px}
/* Optional level divider — SketchMap.lessonRows' groupLabelFn (Oct 2026). Generic; label text always supplied by the caller. */
.path-group-divider{font:800 11px Montserrat,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#635583;margin:22px 0 10px;padding-top:14px;border-top:1px dashed #d8cce7}
.path-group-divider:first-child{margin-top:0;padding-top:0;border-top:0}
@media(max-width:600px){#foundation-map-nodes{padding-left:12px!important;margin-left:0}#foundation-map-nodes .sketch-branch{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px}#foundation-map-nodes .foundation-reward{display:none}.foundation-step{width:32px;height:32px;font-size:16px}.sketch-package .path-node,#drawing-screen .path-node{padding:14px;gap:12px}#drawing-screen .node-icon,.sketch-package .node-icon{width:60px;height:60px;flex-basis:60px}.sketch-package .node-title,#drawing-screen .node-title{font-size:15px}}
/* Form and Structure Level 2 intro film (Oct 2026). */
.path-node.level-intro{width:100%;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.level-intro .level-intro-play{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#2523376b;color:#fff;font-size:24px}
.fs-level-intro-dialog{border:0;border-radius:24px;padding:20px;width:min(1000px,94vw);max-height:92dvh;margin:auto;overflow:auto;background:#faf9f7;color:#252337}
.fs-level-intro-dialog::backdrop{background:#252337bb;backdrop-filter:blur(5px)}
.fs-level-intro-dialog video{display:block;width:100%;aspect-ratio:16/9;margin-top:12px;border-radius:16px;background:#000}