/* Keep the experiment, controls and choices together. Longer teaching text
   remains available below the workbench in a native disclosure. */
html body[data-studio-layout] .site-nav-inner { min-height:60px!important;padding:5px 24px!important }
html body[data-studio-layout] .brand-symbol.studio-nallo,html body[data-studio-layout] .brand-symbol.studio-nallo svg { width:34px!important;height:44px!important;flex-basis:34px!important }
html body[data-studio-layout] #main-content { padding-top:10px!important }
html body[data-studio-layout] #main-content .hero { padding:0!important;margin:0 0 8px!important;min-height:0!important }
html body[data-studio-layout] #main-content .hero>div { display:block!important }
html body[data-studio-layout] #main-content .hero .eyebrow { display:none!important }
html body[data-studio-layout] #main-content .hero h1 { font-size:clamp(1.3rem,2.2vw,1.8rem)!important;line-height:1.2!important;margin:0!important }
html body[data-studio-layout] #main-content .family-workspace { gap:8px!important }
html body[data-studio-layout] #main-content .llama-guide { display:grid!important;grid-template-columns:48px minmax(0,1fr) minmax(280px,40%)!important;gap:10px!important;padding:6px 10px!important;min-height:0!important;margin:0 0 8px!important;align-items:center!important }
html body[data-studio-layout] #main-content .guide-llama { width:48px!important;height:56px!important;margin:0!important }
html body[data-studio-layout] #main-content .llama-bubble { display:block!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important }
html body[data-studio-layout] #main-content .llama-name { display:none!important }
html body[data-studio-layout] #main-content .llama-bubble .studio-guide-status { margin:0!important;min-height:0!important;font-size:.875rem!important;line-height:1.4!important }
html body[data-studio-layout] #main-content .mission-choices { grid-column:auto!important;min-width:0!important }
html body[data-studio-layout] #main-content .mission-choices .task-tabs { display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;gap:5px!important;padding:0!important;width:100%!important }
html body[data-studio-layout] #main-content .task-tabs button { min-width:0!important;min-height:50px!important;font-size:.8125rem!important;line-height:1.2!important;padding:4px!important;gap:2px!important;white-space:normal!important;overflow-wrap:anywhere }
html body[data-studio-layout] #main-content .task-tabs button span { width:18px!important;height:18px!important;min-width:18px!important;font-size:.75rem!important;line-height:18px!important }
html body[data-studio-layout] #main-content .studio-instructions { margin:14px 0;border:1px solid #dce4e9;border-radius:14px;background:#fffdf7;padding:0;overflow:visible }
html body[data-studio-layout] #main-content .studio-instructions>summary { padding:14px 16px;min-height:48px;cursor:pointer;font-weight:700;color:#153b51 }
html body[data-studio-layout] #main-content .studio-instructions-content { padding:0 16px 16px;display:grid;gap:14px }
html body[data-studio-layout] #main-content .studio-instructions-content :is(p,.together-note,.lab-topic-actions,.guide-assist,.nallo-answer) { margin:0!important;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;transform:none!important }
html body[data-studio-layout] #main-content .studio-instructions-content .guide-assist { position:static!important;display:flex;flex-wrap:wrap;gap:12px }
html body[data-studio-layout] #main-content .studio-instructions-content :is(button,summary,a) { min-height:44px }
html body[data-studio-layout] #main-content .studio-instructions-content .topic-link-note { display:block }
html body[data-studio-layout] #main-content .studio-stage-toolbar { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;background:#f4f7fc;border-bottom:1px solid #dce4e9 }
html body[data-studio-layout] #main-content .studio-stage-toolbar>.view-tabs { min-width:0;padding:7px 8px!important;gap:6px;border:0!important;align-items:stretch }
html body[data-studio-layout] #main-content .studio-stage-toolbar>.view-tabs button { min-width:0;min-height:50px;padding:6px!important;font-size:.8125rem!important;line-height:1.25;white-space:normal;overflow-wrap:anywhere }
@media(max-width:760px){
 html body[data-studio-layout] .site-nav-inner { padding:5px 14px!important }
 html body[data-studio-layout] #main-content .llama-guide { grid-template-columns:42px minmax(0,1fr)!important;gap:6px 10px!important }
 html body[data-studio-layout] #main-content .guide-llama { width:42px!important;height:48px!important }
 html body[data-studio-layout] #main-content .mission-choices { grid-column:1/-1!important }
 html body[data-studio-layout] #main-content .task-tabs button { min-height:46px!important }
 html body[data-studio-layout] #main-content .studio-stage-toolbar { display:block }
}
/* Real controls stay in page flow above the experiment on notebooks. Hidden
   native controls retain a blank slot, so Pause/Replay cannot shift the scene. */
html body #main-content .studio-run-controls { display:grid!important;grid-template-columns:repeat(var(--studio-action-count,4),minmax(0,1fr));align-items:stretch;gap:8px;padding:7px 10px!important;border:0!important;border-bottom:1px solid #dce4e9!important;background:#f4f7fc!important;min-height:64px;box-sizing:border-box }
html body #main-content .studio-run-controls>button { width:100%!important;min-width:0!important;min-height:54px!important;margin:0!important;padding:7px!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.3!important;font-size:.9rem!important }
html body #main-content .studio-run-controls>button[hidden] { display:block!important;visibility:hidden!important;pointer-events:none }
html body #main-content .studio-run-controls>button:first-of-type { background:#f36a42!important;color:#0e2b3b!important }
html body #main-content .experiment-secondary:not(:has(button)),html body #main-content .experiment-actions:not(:has(button)):not(:has(.result-link:not([hidden]))) { display:none!important }
html body #main-content .family-stage { max-height:none!important;overflow:visible!important;position:relative!important;top:auto!important;align-self:start }
html body #main-content .canvas-stage { display:block!important;height:auto!important;overflow:hidden;border-radius:0!important }
html body #main-content .canvas-status { display:flex!important;flex-wrap:wrap;gap:6px 20px!important;line-height:1.5!important;height:auto!important;max-height:none!important;white-space:normal!important }
html body #main-content .canvas-status>* { flex:1 1 240px;min-width:0;overflow-wrap:anywhere }
html body #main-content .canvas-status #cursorReadout { flex:0 1 auto }
html body #main-content .llama-guide,html body #main-content .llama-bubble { overflow:visible!important;min-width:0 }
html body #main-content .llama-bubble #taskTitle { min-height:2.6em;line-height:1.3!important }
html body #main-content .llama-bubble #taskStatus { display:block;min-height:4.2em;line-height:1.4!important;overflow-wrap:anywhere }
html body #main-content .guide-assist { position:static!important;min-width:0 }
html body #main-content :is(.status,.feedback,.live-readout) { min-height:3.8em;box-sizing:border-box;line-height:1.5!important;overflow-wrap:anywhere }
html body #main-content .family-build :is(input,button,summary) { scroll-margin-top:20px!important }
html body #main-content :is(#testBtn,#run,button.test) { color:#0e2b3b!important }
@media(min-width:761px) and (max-width:999px) {
 html body #main-content :is(.experiment-bench,.construction-grid) { display:flex!important;flex-direction:column!important }
 html body #main-content :is(.family-stage,.experiment-settings,.family-build) { width:100%!important;min-width:0!important;box-sizing:border-box }
}
/* Touch screens use normal page flow: no fixed controls cover the experiment.
   Native scene toolbars retain their nodes/listeners and sit below the image. */
html body .studio-mobile-tools { display:none }
html:has(body.studio-touch) { scroll-behavior:auto!important;overscroll-behavior-y:contain }
html body.studio-touch .site-nav { position:static!important;top:auto!important }
html body.studio-touch .studio-actions { display:none!important }
html body.studio-touch.studio-has-actions { padding-bottom:0 }
html body.studio-touch #main-content .experiment-bench,
html body.studio-touch #main-content .construction-grid { display:flex!important;flex-direction:column!important;width:100%!important;gap:18px!important }
html body.studio-touch #main-content :is(.family-stage,.family-build,.experiment-settings,.llama-guide,.construction-guide,fieldset) { min-width:0!important;max-width:100%;box-sizing:border-box }
html body.studio-touch #main-content .family-stage { position:relative!important;top:auto!important;max-height:none!important }
html body.studio-touch #main-content .hero { display:block!important }
html body.studio-touch #main-content :is(input,select,textarea) { font-size:max(16px,1rem)!important;scroll-margin-top:20px!important }
html body.studio-touch #main-content .studio-mobile-tools { display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border-top:1px solid #dce4e9;background:#f4f7fc;line-height:1.4;min-width:0;max-width:100%;box-sizing:border-box }
html body.studio-touch #main-content .studio-mobile-tools .studio-touch-edit { min-height:44px;padding:10px 14px;white-space:normal;max-width:100% }
html body.studio-touch #main-content .studio-touch-note { flex:1 1 100%;min-width:0;margin:0;font-size:.875rem;line-height:1.5;color:#557080 }
html body.studio-touch #main-content .studio-mobile-tools :is(.scene-speed,.scene-preset,.mirror-tools,.gate-touch,.boat-touch,.load-touch,.scene-labels) { position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;box-sizing:border-box;flex-wrap:wrap;gap:8px }
html body.studio-touch #main-content .studio-mobile-tools .scene-speed:not([hidden]) { display:grid!important;grid-template-columns:minmax(0,1fr);padding:10px!important }
html body.studio-touch #main-content .studio-mobile-tools .scene-speed input { height:44px!important;min-width:0;max-width:100%;margin:0 }
html body.studio-touch #main-content .studio-mobile-tools :is(.mirror-tools,.scene-preset):not([hidden]) { display:flex!important;padding:0!important;justify-content:flex-start!important }
html body.studio-touch #main-content .studio-mobile-tools [hidden] { display:none!important }
html body.studio-touch #main-content .studio-mobile-tools button { min-height:44px!important;white-space:normal;overflow-wrap:anywhere }
html body.studio-touch #main-content .studio-mobile-tools :is(.gate-touch,.boat-touch,.load-touch):not([hidden]) { display:flex!important;flex:1 1 120px;min-width:0 }
html body.studio-touch #main-content .studio-mobile-tools .boat-touch:not([hidden]) { flex-basis:100% }
html body.studio-touch #main-content .studio-mobile-tools .gate-touch { flex-direction:column;gap:4px }
html body.studio-touch #main-content .studio-mobile-tools .gate-touch::before { content:attr(data-studio-tool-label);font-size:.8125rem;font-weight:700;line-height:1.5 }
html body.studio-touch #main-content .studio-mobile-tools :is(.gate-touch,.boat-touch,.load-touch) button { width:100%;max-width:100%!important;font-size:.875rem!important }
html body.studio-touch #main-content .studio-mobile-tools .scene-labels:not([hidden]) { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));order:-1;padding:0 0 10px;border-bottom:1px solid #dce4e9;font-size:.8125rem;line-height:1.5;pointer-events:auto }
html body.studio-touch #main-content .studio-mobile-tools .scene-labels>* { min-width:0;overflow-wrap:anywhere }
html body.studio-touch #main-content .studio-selected-value { margin:-4px 0 14px;font-size:.875rem;line-height:1.5;color:#557080;white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100% }
html body.studio-touch #main-content .studio-selected-value[hidden] { display:none!important }
/* Match the mobile host to the actual canvas bounds. Native gate/load HTML
   targets use percentages of this host and must not drift into letterboxing. */
html body.studio-touch #main-content .studio-viewport:has(>canvas) { height:auto!important;aspect-ratio:var(--studio-mobile-canvas-ratio)!important }
html body.studio-touch #main-content .studio-viewport>canvas { width:100%!important;height:auto!important;border:0!important }
html body.studio-touch #main-content .selection-wrap:not([hidden]) { display:block!important;min-width:0;max-width:100% }
html body.studio-touch #main-content .studio-viewport[data-studio-touch=scroll]>canvas,
html body.studio-touch #main-content .studio-viewport[data-studio-touch=scroll] #bridgeSvg,
html body.studio-touch #main-content .studio-viewport[data-studio-touch=scroll] #bridgeSvg * { touch-action:pan-y pinch-zoom!important }
html body.studio-touch #main-content .studio-viewport[data-studio-touch=edit]>canvas,
html body.studio-touch #main-content .studio-viewport[data-studio-touch=edit] #bridgeSvg,
html body.studio-touch #main-content .studio-viewport[data-studio-touch=edit] #bridgeSvg * { touch-action:none!important }

/* Long model feedback belongs with the drawing. The guide's short run status
   reserves its lines before playback, rather than changing the scene position. */
html body #main-content .llama-bubble .studio-guide-status { grid-column:1;grid-row:2;display:block;margin:0!important;min-height:4.2em;font-size:.875rem!important;line-height:1.4!important;overflow-wrap:anywhere }
html body #main-content .studio-coach { padding:10px 14px;background:#edf3ff;color:#153b51;border-top:1px solid #dce4e9;font-size:.875rem;line-height:1.5 }
html body #main-content .studio-coach #taskStatus { display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.5 }
@media(max-width:760px) { html body #main-content .llama-bubble .studio-guide-status { min-height:5.6em } }
/* The old 300px button scroll margin made focusing Start scroll the notebook
   away from the drawing, even when its rectangle was already visible. */
html:has(body.family-lab),html:has(body.construction-workshop) { scroll-behavior:auto!important }
html body #main-content .family-stage button { scroll-margin:12px!important }

html body #main-content .studio-coach h2 { margin:0 0 5px!important;min-height:0!important;font-size:1rem!important;line-height:1.4!important }
html body #main-content .studio-coach p { margin:0!important;min-height:0!important;line-height:1.5!important }

/* Keep the real controls before status feedback on phones as well. Focusing
   a disabled/running button must not anchor scrolling to changing text above it. */
@media(max-width:760px) {
 html body #main-content .studio-run-controls { grid-template-columns:repeat(2,minmax(0,1fr));padding:10px!important }
 html body #main-content .studio-run-controls>button { min-height:58px!important }
 html body #main-content .studio-run-controls[data-studio-count="3"]>button:first-of-type { grid-column:1/-1 }
}
/* Trailer status wraps to two rows on small phones. Reserve the same space
   for the shorter running label so the canvas cannot jump upward on Start. */
html body.studio-touch[data-workshop-lab=trailer] #main-content #lab-trailer .stage-top { min-height:64px!important;box-sizing:border-box }
/* The circuit's compact row has narrow buttons. Reserve the native completed
   label's three lines before playback, so the entire scene remains in view. */
@media(min-width:761px) {
 html body[data-studio-layout] #main-content .studio-stage-toolbar>.studio-run-controls>button { min-height:76px!important }
}
/* Content-only fixes: these selectors cannot match a lab workspace. */
html body.guide-page .guide-intro,html body.guide-page .guide-visual { min-width:0 }
html body.guide-page .guide-intro { overflow-wrap:anywhere;hyphens:auto }
@media(max-width:520px) {
 html body .home-shell .card-footer { flex-direction:column!important;align-items:stretch!important }
 html body .home-shell .card-footer .tags { min-width:0;max-width:100%;flex-wrap:wrap }
 html body .home-shell .card-footer .tag { max-width:100%;white-space:normal;overflow-wrap:anywhere }
 html body .home-shell .card-footer .open-lab { width:100%!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;text-align:center }
}

/* Direct construction controls: visible beside the scene, native keyboard inputs. */
.quick-build{padding:10px 12px;margin:0 0 10px;border:1px solid #d6e4e1;border-radius:14px;background:#f2f7f2;display:grid;gap:7px;min-width:0}.quick-build[hidden]{display:none}.quick-build-row{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.quick-build-row button{flex:1 1 105px;font-size:13px;padding:9px 7px;line-height:1.25;min-height:40px;white-space:normal}.quick-build p{font-size:12px;line-height:1.4;margin:0;color:#526c77}.quick-gear-size{min-width:0}.quick-gear-size label{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;font-size:12px;margin:0}.quick-gear-size>div{display:flex;gap:10px;align-items:center;min-width:0}.quick-gear-size input{flex:1;min-width:0;width:100%;margin:0}.quick-gear-size button{width:40px;min-width:40px;min-height:36px;padding:4px;font-size:22px}.quick-gear-size output{font-weight:700}.builder-advanced{padding:10px 0}.builder-advanced>summary{font-weight:700;cursor:pointer;line-height:1.5}.lock-size-preview svg{display:block;width:100%;max-height:125px}.quick-metrics{display:flex;flex-wrap:wrap;gap:8px}.quick-metrics>span{flex:1;min-width:100px;font-size:12px}.quick-metrics strong{display:block;font-size:18px;color:#173e51}.lock-size-preview .subtle{line-height:1.5;font-size:12px}.studio-compact .quick-build{padding:7px 10px;gap:4px}.studio-compact .quick-build-row button{min-height:34px;padding:7px}.quick-build button:focus-visible,.quick-build input:focus-visible{outline:3px solid #147e83;outline-offset:3px}
@media(max-width:760px){.quick-build-row button{flex-basis:85px;min-height:44px;font-size:12px}.quick-gear-size button{min-height:44px}.quick-gear-size>div{gap:8px}.lock-size-preview svg{max-height:110px}}