:root{--navy:#1b2341;--cream:#fff5d5;--sky:#6cc9ff;--line:#11182d;--mint:#87e6b0}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--cream);font:16px/1.5 'Courier New',monospace}main{max-width:1500px;margin:auto;padding:18px}header{background:#58351e;border:5px solid var(--line);padding:14px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#ffe277;font-weight:bold}a{color:inherit}button,.button,select,input,textarea{font:inherit}button,.button{display:inline-block;background:var(--sky);color:#10213a;border:3px solid var(--line);padding:10px 14px;font-weight:bold;cursor:pointer;box-shadow:3px 3px #0a1020;text-decoration:none}button:hover,.button:hover{background:#b9edff}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible,[tabindex]:focus-visible{outline:4px solid #ffd451;outline-offset:3px}input,select,textarea{background:#fff9df;color:#10213a;border:2px solid #334963;padding:8px;max-width:100%}h1{font-size:clamp(22px,3vw,36px);line-height:1.2;margin:6px 0 18px}h2{font-size:22px}h3{margin:5px 0 12px}.eyebrow,.small,.foot{font-size:13px}.eyebrow{color:#9cdcf8}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px}nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0}nav label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}nav select{max-width:330px}.teacher{display:flex;gap:20px;align-items:center;background:#fff4d1;color:#142447;border:5px solid var(--line);padding:12px}.teacher strong{color:#a3421c}.teacher p{margin:5px 0}.portrait{flex:0 0 100px;height:112px;background:url('homepage-teacher-current.svg?v=2026-10-20.12') 20% 35%/280px auto no-repeat;image-rendering:pixelated;border:3px solid #573821}#feedback{min-height:30px;color:#b5f4ca}#hintText{padding:6px;border-left:4px solid #a3421c}#lab{background:#142c40;border:5px solid var(--line);padding:16px}.lab-top{display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:space-between}#maze{width:100%;max-height:60vh;object-fit:contain;display:block;image-rendering:pixelated;touch-action:none;background:#152333}.lab-tools,.task{display:flex;flex-wrap:wrap;align-items:center;gap:15px;padding:15px 0}.direction{display:flex;gap:8px}.direction button{min-width:48px;min-height:48px}progress{accent-color:var(--mint);height:25px;vertical-align:middle}.task p{width:100%;margin:0}#starField{position:relative;width:100%;height:130px;background:repeating-linear-gradient(90deg,#203c56 0 38px,#2b4b66 38px 40px);border:4px solid #89bbc5;overflow:hidden}#powerStar{position:absolute;top:30px;font-size:32px;background:#ffdc6a;width:64px;height:64px;padding:0}#project{border:5px solid var(--line);background:#263d60;padding:12px}.desktop-toolbar,.taskbar{display:flex;gap:12px;flex-wrap:wrap;padding:8px}#projectIcon{background:#ffe4a0}#desktop{position:relative;min-height:690px;background:linear-gradient(135deg,#16334f,#376d87);overflow:hidden;border:3px solid #101e33}.window{display:flex;flex-direction:column;max-height:600px;position:absolute;top:30px;left:20px;width:46%;max-width:100%;background:#fff6d9;color:#15283d;border:4px solid #101f35;box-shadow:6px 6px #101e33;z-index:1}.window:nth-child(2){left:51%;top:65px}.titlebar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#2861a0;color:white;padding:7px;cursor:grab;touch-action:none;user-select:none}.titlebar button{padding:2px 8px;min-width:32px;box-shadow:none}.titlebar div{display:flex;gap:5px}.window-body{padding:14px;max-height:520px;min-height:0;overflow:auto}.window label{display:block;margin:6px 0}.window input:not([type=checkbox]):not([type=radio]),textarea{display:block;width:100%}.window textarea{resize:vertical;min-height:100px}.window button{font-size:13px;margin:5px 0}.tabs{display:flex;gap:8px;border-bottom:2px solid #345;flex-wrap:wrap}.tabs [aria-selected=true]{background:#87e6b0}.turtle{font-size:64px;background:#b1e4ef;text-align:center}#sourceFact{padding:12px;background:white;border:2px solid #618cab;user-select:text}fieldset{margin:15px 0;border:2px solid #677f93}fieldset>span{display:block}fieldset label{font-size:14px}#savePanel{border-top:2px solid #61798b;padding-top:12px}.window.maximized{top:0!important;left:0!important;width:100%!important;z-index:10}.files{background:#fff4d1;color:#142447;border:3px solid #11182d;padding:15px;margin-top:12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:white;border:2px solid #627b90;padding:12px}.file{margin:8px}#completion{border:5px solid #10263b;background:#285444;padding:25px;margin-top:20px}#completion .button{margin:8px}.foot{color:#c0d6e8}[hidden]{display:none!important}@media(max-width:800px){main{padding:10px}.heading{display:block}.portrait{flex-basis:65px;height:92px;background-size:240px}.teacher{gap:10px;font-size:14px}#desktop{display:flex;flex-direction:column;gap:18px;padding:10px;min-height:450px}.window,.window:nth-child(2){position:relative;left:auto;top:auto;width:100%;flex-shrink:0}.window.maximized{position:relative!important}.window-body{max-height:500px}#maze{max-height:none}.lab-top{font-size:14px}.lab-tools{gap:10px}.direction button{padding:8px}.titlebar strong{font-size:14px}}

/* Star and typing are separate activities, with no maze underneath. */
.solo-task #starField{height:clamp(220px,48vh,500px)}
.solo-task #powerStar{top:42%;width:76px;height:76px;font-size:44px}
.solo-task #idTask{min-height:260px;justify-content:center;align-content:center;padding:30px 12px}
.solo-task #idTask label{font-size:24px;text-align:center;width:100%}
.solo-task #robotId{display:block;margin:18px auto 8px;font-size:30px;width:min(95%,340px);padding:15px;text-align:center}
.solo-task #idTask button{font-size:24px;min-width:140px}

/* Reveal one project activity at a time instead of a long worksheet. */
#project[data-phase="0"] #desktop,#project[data-phase="0"] .taskbar{display:none}
#project:not([data-phase="0"]) #projectIcon,#project:not([data-phase="0"]) #openAccessible{display:none}
#project:not([data-phase="1"]) #restore{display:none}
#project:not([data-phase="5"]) .files{display:none}
#project[data-phase="2"] #editorWindow,#project[data-phase="4"] #browserWindow,#project[data-phase="5"] #browserWindow{display:none!important}
#project[data-phase="2"] [data-restore="editorWindow"],#project[data-phase="4"] [data-restore="browserWindow"],#project[data-phase="5"] .taskbar{display:none}
#project[data-phase="0"] .desktop-toolbar{justify-content:center;align-items:center;min-height:200px}
#project[data-phase="0"] #projectIcon{font-size:28px;padding:24px;min-width:180px;min-height:150px}
#project[data-phase="0"] #openAccessible{align-self:center}
#project[data-phase="3"] #searchForm,#project[data-phase="3"] .turtle{display:none}
#project[data-phase="4"] #editorWindow h3,#project[data-phase="4"] #editorWindow label:has(#document),#project[data-phase="4"] #pasteFact{display:none}
#project[data-phase="5"] #editorWindow h3,#project[data-phase="5"] #editorWindow label:has(#document),#project[data-phase="5"] #pasteFact,#project[data-phase="5"] #classify{display:none}
#project[data-phase="2"] #browserWindow,#project[data-phase="4"] #editorWindow,#project[data-phase="5"] #editorWindow{left:10px;top:8px;width:calc(100% - 20px)}
/* A compact shell leaves the activity itself the available laptop height. */
@media(min-width:900px) and (min-height:480px){
 html,body{height:100%;overflow:hidden}
 body{padding-bottom:0!important}
 main{height:100dvh;max-width:1800px;display:flex;flex-direction:column;gap:6px;padding:8px 12px;overflow:hidden}
 header{border-width:3px;padding:5px 10px;font-size:12px;line-height:1.3;gap:8px;flex-shrink:0}
 .heading{flex-shrink:0;min-height:30px}.heading .eyebrow{display:none}.heading h1{font-size:clamp(20px,2.1vw,28px);margin:0}.heading strong{font-size:14px}
 nav{flex-shrink:0;margin:0;gap:7px;font-size:13px}nav button,nav select{padding:5px 9px;min-height:36px}nav select{max-width:300px}
 .teacher{flex-shrink:0;padding:6px 10px;border-width:3px;gap:10px;min-height:74px}
 .teacher .portrait{height:62px;flex-basis:58px;background-size:220px}
 .teacher .picture-guide{gap:12px}.teacher .guide-symbol{font-size:35px;min-width:44px}
 .teacher .guide-words p{font-size:21px;margin:0}.teacher .guide-example{font-size:18px}
 .teacher .guide-dots{margin-top:5px;gap:5px}.teacher .guide-dots li{width:19px;height:19px;font-size:12px;line-height:15px}
 .teacher .guide-actions button{min-height:40px;padding:6px 9px;font-size:14px}
 #feedback{flex-shrink:0;min-height:20px;font-size:13px;line-height:20px;margin:0}
 #lab,#project{flex:1;min-height:0;margin:0;padding:8px;border-width:3px;overflow:hidden}
 #lab{display:flex;flex-direction:column;gap:6px}
 .lab-top{flex-shrink:0;min-height:30px;font-size:13px}.lab-top h2{font-size:18px;margin:0}.lab-top select{padding:3px}
 #maze{flex:1;min-height:0;height:100%;max-height:none;object-fit:contain}
 .lab-tools{flex-shrink:0;padding:0;gap:10px;font-size:12px}.lab-tools button,.direction button{min-width:40px;min-height:38px;padding:5px 10px;font-size:16px}
 #chargeTask{flex-shrink:0;margin:0;padding:2px;gap:12px;font-size:14px}#chargeTask button{padding:5px 10px;min-height:36px}
 .solo-task #starTask{flex:1;min-height:0;flex-direction:column;padding:0;align-items:stretch}
 .solo-task #starField{flex:1;min-height:140px;height:auto}
 .solo-task #idTask{flex:1;min-height:0;padding:10px}.solo-task #idTask label{font-size:22px}
 #project{display:flex;flex-direction:column;gap:5px}
 .desktop-toolbar{flex-shrink:0;padding:0;gap:8px;min-height:0}
 .desktop-toolbar:empty{display:none}.desktop-toolbar button{padding:5px 10px;font-size:13px}
 #project[data-phase="0"] .desktop-toolbar{flex:1;min-height:0}
 #desktop{flex:1;min-height:0;height:auto;width:100%}
 .window,.window:nth-child(2){top:8px;left:8px;width:47%;height:calc(100% - 16px);max-height:none;box-shadow:3px 3px #101e33}
 .window:nth-child(2){left:51%}
 .window.maximized{height:100%}
 .titlebar{flex-shrink:0;padding:4px 7px;font-size:14px}.titlebar button{margin:0;padding:1px 7px;min-height:28px}
 .window-body{flex:1;min-height:0;max-height:none;padding:8px 12px;overflow:auto;font-size:15px}
 .window-body h3{font-size:18px;margin:0 0 6px}.window-body p{margin:6px 0}
 .window-body label{margin:3px 0}.window-body input,.window-body select{padding:5px 8px}
 .window-body button{padding:6px 10px;margin:3px 0;min-height:34px}
 .window-body textarea{min-height:80px;height:95px}
 #sourceFact{font-size:18px;margin:8px 0;padding:10px}
 .taskbar{flex-shrink:0;padding:0;gap:8px}.taskbar button{padding:5px 10px;font-size:12px;min-height:30px}
 #classify{margin:0;padding:6px 10px;display:flex;flex-wrap:wrap;align-content:start;align-items:center;gap:10px 18px}
 #classify legend{font-weight:bold}#classify>span{width:100%}#classify label{font-size:17px}#classify #checkLabels{width:100%}
 #project[data-phase="5"]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:12px}
 #project[data-phase="5"] .desktop-toolbar{display:none}
 #project[data-phase="5"] #desktop{height:100%;min-height:0}
 #project[data-phase="5"] .files{margin:0;min-height:0;padding:12px;overflow:auto;font-size:14px}
 #project[data-phase="5"] .files h3{font-size:18px}#fileHelp{margin:4px 0}#filePreview{padding:8px;font-size:14px;margin:5px 0}
 #savePanel{border:0;padding:10px}#savePanel label{font-size:20px}#savePanel button{margin-top:15px}
 #completion{position:fixed;inset:26% 15%;z-index:110;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:0;padding:20px;box-shadow:0 0 0 100vmax #081528b0}
 #completion h2{margin:4px;font-size:30px}#completion p{margin:4px}
 .guide-dock{display:none!important}
}

.window-practice{display:none;font-size:42px;text-align:center;line-height:1.8;padding:20px;color:#183b5b}
#project[data-phase="1"] .window-practice{display:block}
#project[data-phase="1"] .window-body>:not(.window-practice){display:none!important}
#project:not([data-phase="1"]) .window-practice{display:none}
#project[data-phase="2"] #homeTab{display:none}

/* One visible window and one action during the window lesson. */
#project[data-phase="1"] #editorWindow,#project[data-phase="1"] [data-restore="editorWindow"],#project[data-phase="1"] .desktop-toolbar{display:none!important}
#project[data-phase="1"] #desktop{display:block;min-height:260px;padding:0}
#project[data-phase="1"] #browserWindow{position:absolute;left:3%;top:8%;width:65%;height:78%;transform:none}
#project[data-phase="1"] .window-practice{font-size:clamp(28px,5vw,54px);padding:20px 8px}
#project[data-phase="1"][data-window-action="move"] #desktop::before{content:'⭐';position:absolute;right:5%;top:12%;width:20%;height:70%;display:grid;place-items:center;border:3px dashed #ffdf79;border-radius:10px;background:#ffdb661a;font-size:46px;pointer-events:none}
#project[data-phase="1"] .titlebar{min-height:44px}
#project[data-phase="1"] .titlebar button{min-width:40px;min-height:36px;font-size:20px}
#project[data-phase="1"][data-window-action="move"] .titlebar{cursor:grab}
#project[data-phase="1"][data-window-action="move"] .titlebar:active{cursor:grabbing}
#project[data-phase="1"] .taskbar{min-height:44px}
#project[data-phase="1"] [data-restore="browserWindow"]{font-size:16px;padding:8px 16px}
#project[data-phase="1"] button:disabled{opacity:.35}

#project[data-phase="1"] #browserWindow.maximized{height:100%}