/* Clear tools and a separate touch controller: the building always stays visible. */
/* Keep navigation focus for assistive technology without Safari's heading rectangle. */
h1[tabindex="-1"]{-webkit-tap-highlight-color:transparent}
h1[tabindex="-1"]:focus{outline:none;box-shadow:none}
.purpose-note{display:flex;gap:12px;max-width:470px;margin:-7px 0 27px;padding:15px 18px;background:#eaf0db;border:1.5px dashed #a5b78b;border-radius:14px 19px 15px 18px;color:#596c43}.purpose-note>span{font-size:29px;color:#b49548}.purpose-note p{margin:0;font-size:13px;line-height:1.75}.purpose-note b{font:900 16px 'Nunito',sans-serif;color:#42664e}.hero-description{margin-bottom:22px}.welcome-hero{padding-top:10px;padding-bottom:32px}
.work-tools{display:flex;gap:8px;align-self:center;background:#e9e7d4;border:1px solid #d9d5b8;border-radius:15px;padding:5px;margin:14px 16px 0}.work-tools button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 23px;border-radius:10px;color:#787b61;font-size:15px;font-weight:900}.work-tools button.active{background:#fffdf3;color:#3f7155;box-shadow:0 2px 0 #c8cbb4}.work-tools button svg{width:23px;height:23px}.stage-toolbar{flex-wrap:wrap;gap:9px}.stage-toolbar .round{min-width:40px;height:42px}.stage-toolbar svg{width:20px;height:20px}.tool-text{font:800 13px 'Nunito',sans-serif;display:flex;gap:7px;align-items:center}.view-home{font-size:13px;padding:9px}.hint-button{font-size:12px;min-height:40px}.view-controls{gap:5px}.tool-group{gap:7px}.status{color:#77765c;line-height:1.6;min-height:45px;padding-top:4px}.view-note{text-align:center;padding:20px 1px;color:#7a805e}.view-note>svg{width:55px;height:55px;stroke-width:1.2;color:#5d825d;margin-bottom:9px}.view-note h3{font-size:18px;margin:10px 0}.view-note p{font-size:13px;line-height:1.8}.view-note button{margin:12px auto 0;color:#467455;font-size:14px;min-height:44px}.finish-button,.inspect-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:20px;min-height:52px;padding:12px;border:1.5px solid #416e4b;border-radius:14px;background:#57825e;color:#fffcef;font-weight:900;font-size:14px;box-shadow:0 4px 0 #3a6041}.finish-button:disabled{background:#a6b39b;border-color:#929f87;box-shadow:none;opacity:.7}.inspect-button{border-color:#d4c8a8;background:#f4efd9;color:#687952;box-shadow:0 3px 0 #dfd5b9;font-size:13px;margin-top:14px}.desktop-help{margin:24px 0 29px;padding:24px;background:#fffcf2;border:1.5px dashed #ccbd98;border-radius:21px}.controls-heading{display:flex;align-items:center;gap:13px;margin-bottom:20px}.controls-heading h2{font-size:23px;font-weight:900}.controls-heading p{font-size:14px;color:#827759;margin:6px 0 0}.controls-heading .tip-face{width:43px;height:43px;flex-shrink:0;font-size:33px}.control-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.control-cards>div{border:1px solid #e5dcc1;border-radius:14px;background:#f5f1e1;padding:16px 13px}.control-keys{display:flex;gap:4px;align-items:center;height:43px;margin-bottom:11px}.control-keys kbd{font:900 17px 'Nunito',sans-serif;padding:6px 10px;min-width:34px;background:#fffdf4;color:#5f784b;box-shadow:0 3px 0 #d3d1b9}.control-cards>div:first-child .control-keys{gap:3px}.control-cards>div:first-child kbd{font-size:14px;padding:7px 5px}.control-keys svg{width:36px;height:36px;color:#5f784b}.wheel-symbol{font-size:37px;color:#5f784b}.control-cards b{display:block;font:900 16px 'Nunito',sans-serif;color:#4c6043}.control-cards p{font-size:12px;line-height:1.7;color:#827759;margin:6px 0 0}
html[data-tool=view] .canvas-wrap{background:radial-gradient(ellipse at 50% 65%,#e4ecd6,#f8f7e9 75%)}html[data-tool=view] #scene{cursor:grab}html[data-tool=view] .tool-group,html[data-tool=view] #hint,html[data-tool=view] .parts .subtle,html[data-tool=view] .part-tip{display:none}html[data-tool=view] .stage-toolbar{justify-content:center}html[data-tool=view] .control-cards [data-build-help]{display:none}html[data-tool=view] .control-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}html[data-tool=view] .scene-spark{opacity:.4}html[data-input=touch] .desktop-help{display:none}
.precision-control{margin:0 0 14px;padding:13px 12px 9px;background:#e8ecd6;border:1.5px solid #c7d0ab;border-radius:17px}.precision-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;color:#5a754b}.precision-heading b{font:900 14px 'Nunito',sans-serif}.precision-heading>span{font-size:10px;color:#7e8868}.steering-pad{display:grid;grid-template-columns:48px minmax(90px,180px) 48px;grid-template-rows:44px 58px 44px;gap:5px;justify-content:center;margin:7px auto 0}.steering-pad button{border:1px solid #cdd1b4;border-radius:11px;background:#fffdf1;box-shadow:0 2px 0 #c3c9a5;font-size:25px;color:#5c7b4b;touch-action:manipulation}.steering-pad button:active{background:#d5e1bf;transform:translateY(2px);box-shadow:none}.pad-up{grid-row:1;grid-column:2;width:65px;justify-self:center}.pad-left{grid-row:2;grid-column:1}.pad-right{grid-row:2;grid-column:3}.pad-down{grid-row:3;grid-column:2;width:65px;justify-self:center}.move-pad{grid-row:2;grid-column:2;display:flex;justify-content:center;align-items:center;gap:10px;touch-action:none;user-select:none;-webkit-user-select:none;border:1.5px dashed #91a475;border-radius:16px;background:#d9e3c2;color:#63804c;cursor:move}.move-pad svg{width:27px;height:27px}.move-pad span{font:900 13px 'Nunito',sans-serif}.move-pad.moving{background:#c4d6a8;border-style:solid}.move-pad[aria-disabled=true]{opacity:.45}.precision-control>p{font-size:11px;line-height:1.6;color:#7e8766;text-align:center;margin:8px 0 0}.touch-main-actions button{min-height:52px}.touch-main-actions .touch-primary{font-size:15px}.touch-position{margin-top:10px}.touch-camera span,#touch-viewing p{color:#737e5b}.touch-position #touch-hint{margin-left:5px}
@media(max-width:1180px){.control-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-text{display:none}.stage-toolbar{justify-content:center}}
@media(max-width:849px){.guide .finish-button,.guide .inspect-button{grid-column:2}.purpose-note{padding:12px;gap:9px}.purpose-note p{font-size:12px}.purpose-note b{font-size:14px}html[data-input=touch][data-tool=view] .parts{display:none}}
@media(max-width:640px){.purpose-note{max-width:330px;text-align:left;margin:0 auto 24px}.purpose-note p{font-size:12px}.work-tools{margin-top:9px}.work-tools button{min-height:44px;font-size:14px;padding:8px 20px}.work-tools button svg{width:22px;height:22px}.precision-control{padding:10px 10px 8px;margin-bottom:12px}.precision-heading{flex-wrap:wrap}.precision-heading b{font-size:14px}.steering-pad{grid-template-columns:45px minmax(85px,160px) 45px;grid-template-rows:44px 55px 44px}.precision-control>p{font-size:11px}.view-controls{flex-wrap:wrap}.finish-button{font-size:13px}.guide .finish-button,.guide .inspect-button{grid-column:1/-1}.desktop-help{padding:18px;margin-top:18px}.controls-heading h2{font-size:20px}.controls-heading p{font-size:12px}.control-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.control-cards b{font-size:14px}.control-cards>div{padding:13px 11px}html[data-input=touch] .canvas-wrap{min-height:300px}.stage-label{font-size:12px}.status{font-size:12px}.view-note{padding:7px}.control-cards p{font-size:11px}}
/* Keep the island in sight while the child uses the controller below it. */
html[data-input=touch] .parts{position:static}
html[data-input=touch] .play{overflow:visible}
html[data-input=touch] .canvas-wrap{position:sticky;top:0;z-index:2;flex:none;min-height:clamp(210px,38svh,330px);border-radius:16px;background-color:#f8f7e9;box-shadow:0 4px 8px #69744b0a}
html[data-input=touch] .canvas-wrap .preview-caption{background:#ffffeef5}
html[data-tool=view] .parts .panel-heading{display:none}
@media(max-height:520px) and (orientation:landscape){html[data-input=touch] .canvas-wrap{min-height:150px}.steering-pad{grid-template-columns:44px minmax(100px,220px) 44px;grid-template-rows:44px 44px;gap:5px}.pad-up{grid-column:2;grid-row:1;justify-self:start;width:44px}.pad-down{grid-column:2;grid-row:1;justify-self:end;width:44px}.pad-left{grid-row:2;grid-column:1}.pad-right{grid-row:2;grid-column:3}.move-pad{grid-row:2;grid-column:2}.precision-control{margin-bottom:8px}.precision-heading>span{display:none}}
