/* A single, letterboxed 16:9 teaching stage. Independent exported games retain their responsive layout. */
html,body{width:100%;height:100%;overflow:hidden;background:#101b30}
body{background:radial-gradient(ellipse at 50% 0,#344668,#101b30 70%)}
#app{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--academy-scale,1));transform-origin:center;overflow:hidden;background:#f3f1eb;border:1px solid #bcb299;box-shadow:0 30px 100px #0009;font-size:18px}
#app .topbar{height:76px;min-height:76px;padding:12px 28px;background:#fffdf8;border-bottom:1px solid #cfc4ac;gap:20px}
#app .brand-mark{background:linear-gradient(145deg,#293d5e,#101f37);border:1px solid #d5b773;box-shadow:inset 0 0 0 3px #ffffff12}
#app .app-layout{display:grid;grid-template-columns:245px minmax(0,1fr);height:824px;max-width:none;margin:0}
#app .sidebar{height:824px;width:auto;padding:22px 18px;background:linear-gradient(160deg,#172944,#233c5b);color:#fff;border:0;overflow:hidden;position:static}
#app .sidebar h2{font-size:23px;color:#fff;margin:8px 0 16px;line-height:1.4}
#app .sidebar-label,#app .nav-group{color:#dfc68e;font-size:12px;margin:9px 0 4px;letter-spacing:.12em}
#app .sidebar nav{max-height:none;overflow:visible}
#app .nav-step{min-height:34px;padding:5px 7px;font-size:15px;color:#e6edf5;line-height:1.3;border-radius:7px;gap:8px}
#app .nav-step span{width:24px;height:24px;min-width:24px;font-size:12px}
#app .nav-step.current{background:#e9d8ad;color:#172944;box-shadow:0 3px 12px #0002}
#app .nav-step:disabled{color:#adbdd0;opacity:1}
#app .sidebar-tip{display:none}
#app .source-link{color:#dfc68e;font-size:13px;margin-top:12px}
#app main#content{height:824px;min-width:0;padding:20px 30px 0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at top right,#e7e9ef00,#f3f1eb),linear-gradient(120deg,#f8f7f3,#eceff3)}
#app .breadcrumb{flex:none;margin:0 0 12px;font-size:14px}
#app #lesson-content{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:2px 4px 10px}
#app .lesson-footer{flex:none;min-height:64px;margin:0;padding:10px 0;border-top:1px solid #c9c0ae;background:#f3f1eb}
#app .lesson-footer button{min-height:44px;font-size:17px;padding:8px 20px}
#app .lesson-footer p{font-size:14px}
#app .lesson-heading{margin-bottom:16px}
#app .lesson-heading h1{font-size:29px;margin:4px 0}
#app .lesson-heading p{font-size:18px;margin:5px 0}
#app .eyebrow{font-size:12px;color:#715722;letter-spacing:.14em}
#app .primary{background:linear-gradient(135deg,#294b70,#172c48);border-color:#243f60;color:#fff;box-shadow:0 4px 12px #182b4524}
#app .preview-panel,#app .prompt-panel,#app .finish-details,#app .activity-work{border:1px solid #d2c9b7;box-shadow:0 6px 22px #162c4510;border-radius:16px;background:#fffefa}
#app .coding-layout,#app .finish-layout{gap:20px;align-items:start}
#app .prompt-panel,#app .finish-details{padding:20px}
#app .assistant-bubble{padding:12px;margin:10px 0;font-size:17px}
#app .example-prompt{padding:12px;font-size:17px;margin:8px 0}
#app textarea{font-size:17px;min-height:76px;height:86px}
#app .fineprint{font-size:13px;line-height:1.5;margin:8px 0}
#app .preview-heading{padding:10px 16px}
#app .game-wrap .race-stats{padding:6px;gap:5px}
#app .game-wrap .race-stat{padding:3px 8px}
#app .game-wrap .race-stat span{font-size:13px}
#app .game-wrap .race-stat strong{font-size:19px}
#app .game-wrap .race-distance{font-size:14px;padding-top:2px}
#app .game-wrap .race-distance strong{font-size:17px}
#app .game-wrap .race-canvas{height:280px;min-height:0}
#app .game-wrap .race-meters{padding:6px 10px;gap:12px}
#app .game-wrap .race-meter{font-size:14px}
#app .game-wrap .race-meter>span{flex-direction:row}
#app .game-wrap .race-controls,#app .game-wrap .game-actions{grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 8px 0;gap:5px}
#app .game-wrap .race-controls button,#app .game-wrap .game-actions button{font-size:14px;min-height:40px;padding:5px}
#app .game-wrap .game-help{font-size:12px;line-height:1.4;padding:7px}
#app .finish-heading{padding:0;margin:0 0 16px;text-align:left;position:relative}
#app .completion-medal{display:none}
#app .finish-heading h1{font-size:29px;line-height:1.35;margin:5px 0}
#app .finish-heading h1 br{display:none}
#app .finish-heading p{font-size:17px;margin:5px 0}
#app .finish-details h2{font-size:23px;margin:5px 0 12px}
#app .finish-details dl{margin:10px 0;gap:9px;font-size:16px}
#app .finish-details .wide{min-height:44px;font-size:17px;margin-top:8px;padding:7px 12px}
#app .finish-details p{font-size:14px;margin:8px 0}
#app .text-button{font-size:14px}
#app .activity-work{padding:16px}
#app .activity-work h3{font-size:20px;margin:5px 0 10px}
#app .activity-work canvas{max-height:365px;width:auto;max-width:100%;object-fit:contain}
#app .sticker-palette button{min-height:58px;padding:4px;font-size:25px}
#app .sticker-palette small{font-size:13px}
#app .activity-status,#app .hint{font-size:15px;margin:8px 0}
#app .activity-badge{font-size:15px;padding:7px 12px}
#app .hero-copy h1{font-size:43px;line-height:1.25;margin:12px 0}
#app .hero-copy p{font-size:19px;line-height:1.6}
#app .hero{padding:16px;gap:24px}
#app .entry-fields{gap:10px}
#app .entry-fields input{font-size:18px;padding:9px;min-height:44px}
#app .entry-fields small{font-size:13px}
#app .tool-row button,#app .drawing-tools button{font-size:15px;min-height:38px;padding:5px 10px}
#app .large-text{font-size:20px}
@media(prefers-reduced-motion:reduce){#app *{scroll-behavior:auto}}

#app .sidebar{padding:14px 14px}#app .sidebar h2{font-size:21px;margin:5px 0 9px}#app .nav-step{font-size:13px;min-height:29px;padding:3px 5px;line-height:1.15}#app .nav-group{margin:7px 0 3px;font-size:11px}#app .sidebar-label{font-size:11px;margin:4px 0}#app .activity-work{padding:12px}#app .lesson-heading{margin-bottom:10px}#app .activity-status{padding:9px;margin:5px 0}#app .game-connection{padding:10px;margin-top:8px}

/* Full lesson walkthrough corrections: use explicit activity dimensions. */
#app .welcome-hero{padding:12px 0;gap:22px}#app .hero-game .race-canvas,#app #welcome-preview .race-canvas{height:190px}#app .hero-copy h1{font-size:36px;margin:8px 0}#app .hero-copy>p{font-size:17px;line-height:1.45;margin:8px 0}#app .entry-section{padding:12px 0;gap:20px}#app .privacy-note{font-size:13px;padding:5px}
#app .sticker-layout{grid-template-columns:1fr 1fr;gap:20px}#app .car-stage{height:315px;min-height:0}#app .car-stage canvas{height:300px;width:auto}#app .sticker-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}#app .sticker-palette button{min-height:50px;font-size:22px}#app .sticker-palette small{font-size:12px}#app .sticker-layout label{font-size:15px;margin:5px 0}#app .sticker-layout input[type=range]{height:20px}#app .sticker-layout .tool-row{gap:5px;margin:5px 0}
#app .drawing-canvas{height:280px;width:350px;display:block;margin:8px auto}#app .drawing-tools{gap:8px}#app .drawing-tools label{font-size:15px;margin:4px 0}#app .lane-board{height:245px}#app .experiment-road{height:100px;margin:8px 0}#app .experiment-road>span{top:10px}#app .speed-dial strong{font-size:55px}#app .command-grid{max-width:320px}#app .command-sequence{padding:10px;min-height:70px}#app .command-layout{gap:18px}
#app .coding-layout{grid-template-columns:1fr 1fr}#app .prompt-panel{padding:12px}#app .assistant-heading{font-size:16px}#app .assistant-heading small{font-size:12px}#app .assistant-bubble{padding:8px;margin:6px 0;font-size:15px}#app .example-label{margin:5px 0;font-size:14px}#app .example-prompt{font-size:15px;padding:8px;margin:5px 0}#app .prompt-panel label{font-size:15px;margin:4px 0}#app textarea{height:65px;min-height:65px}#app #run-prompt{min-height:42px;margin-top:6px;font-size:17px;padding:6px}#app .prompt-response{font-size:14px;min-height:0;padding:3px}#app .config-summary{padding:6px 10px;font-size:14px}#app .config-summary p{margin:3px 0;font-size:14px}#app .game-wrap .race-canvas{height:235px}#app #code-area{margin-top:6px}#app #code-lines{height:80px;min-height:0;max-height:80px;font-size:12px;padding:6px;overflow:auto}#app #code-time{font-size:13px;margin:3px}#app .code-heading{font-size:13px;padding:4px}

#app .game-wrap .race-stats{grid-template-columns:repeat(4,minmax(0,1fr))}#app .game-wrap .race-canvas{height:205px}#app .assistant-heading>span:first-child{width:34px;height:34px;font-size:23px}#app .assistant-heading{min-height:36px;height:36px}#app .assistant-heading b{font-size:16px}#app .assistant-heading small{font-size:12px}#app .example-prompt{line-height:1.35}#app .prompt-response{margin:3px 0;padding:2px;font-size:13px}#app .fineprint{font-size:12px;line-height:1.3;margin:5px 0}#app #code-lines{height:55px;max-height:55px}#app #code-area progress{height:6px;margin:2px 0}#app .lesson-heading h1{font-size:26px}#app .lesson-heading p{font-size:16px;line-height:1.4}#app .lesson-heading{gap:10px}

/* Hidden overflow still scrolls on focus/scrollIntoView; the outer frame must never scroll. */
#app,#app main#content{overflow:clip}