/* 2.4.0: compact, discoverable controls and a shared fullscreen workspace. */
header{height:58px;min-height:58px;padding:6px 18px;gap:18px;flex-wrap:nowrap}
header .brand strong{font-size:22px}header .brand-icon{width:38px;height:38px}header .brand small{font-size:10px}
header .header-actions{margin-left:auto;width:auto;order:0;gap:12px}header .header-actions button{font-size:14px}
header .site-home{padding:6px 12px;min-height:40px;font-size:15px}
.selection-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;padding:6px 18px;background:#e3eee8;border-bottom:1px solid #b3c9bd;min-height:54px}
.selection-toolbar .school-bar,.selection-toolbar .instrument-bar,.selection-toolbar .primary-tools,body[data-school=primary] .selection-toolbar .school-bar,body[data-school=primary] .selection-toolbar .primary-tools{display:flex;width:auto;height:auto;min-height:0;flex-wrap:wrap;gap:5px;padding:0;border:0;background:none}
.selection-toolbar .school-bar>strong,.selection-toolbar .instrument-bar>strong{font-size:21px;font-weight:800;margin:0 5px 0 0;white-space:nowrap;width:auto}
.selection-toolbar .instrument-bar{border-left:1px solid #829f90;padding-left:15px}
.selection-toolbar button{flex:none!important;min-height:40px;font-size:15px;font-weight:700;padding:6px 10px;border-width:1px;white-space:nowrap}
.school-bar>span,#instrumentHint{display:none}.primary-tools>b{display:none}
.selection-toolbar .primary-tools #primaryRecordOpen{margin-left:0}.selection-toolbar .primary-tools #primaryModelToggle{display:none}
.stage-modes{position:absolute;z-index:5;top:14px;left:50%;transform:translateX(-50%);display:flex;width:max-content;margin:0;padding:3px;border:1px solid #648c82;background:#0c2027;border-radius:12px;gap:3px;order:0}
.stage-modes button{display:inline-flex;align-items:center;gap:9px;flex:none;font-size:22px;font-weight:800;line-height:1.25;padding:10px 15px;min-height:50px;border:1px solid transparent;background:transparent;color:#edf8f3;white-space:nowrap}
.stage-modes button.active{background:#087863;border-color:#38c49f;color:#fff;box-shadow:inset 0 0 0 1px #239e82}
.stage-modes button:focus-visible,.workspace-fullscreen:focus-visible{outline:3px solid #f3cf77;outline-offset:3px}
.scene-title{top:22px;left:18px}.scene-title .eyebrow,.scene-title p{display:none}.scene-title h1{font-size:21px;margin:0}
.view-tools{top:82px;left:18px;max-width:calc(100% - 115px);gap:5px}.view-tools button{font-size:13px;padding:7px 9px;min-height:35px}
#parts{top:126px}#viewport{inset:126px 0 22px}.camera-tools{top:145px;right:14px;width:83px;gap:6px}
.camera-tools button{min-height:42px;font-size:13px;padding:7px 3px}.camera-tools #zoomIn,.camera-tools #zoomOut{font-size:24px}
.camera-tools #focusSelected,.camera-tools #panMode,.camera-tools #centerModel{display:flex;flex-direction:column;align-items:center;gap:4px}
.workspace-fullscreen{position:absolute;right:18px;top:18px;z-index:6;display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;background:#142a32;color:#f1fbf7;border:1px solid #6b948b;font-size:15px;font-weight:700}
.navigation-guide{left:auto;right:16px;bottom:14px;max-width:38%;width:280px;font-size:13px;padding:8px 11px}.navigation-guide summary{font-size:14px}.navigation-guide b{display:inline-flex;align-items:center;gap:6px}.navigation-guide p{margin:7px 0}
.part-card{bottom:16px;max-width:40%;pointer-events:none}.part-card .part-summary{font-size:14px}
.workbench #notice{font-size:13px;line-height:1.5;padding:7px 0;margin:0;border-top:1px solid #d6e1d9;flex:none}
.narrow-stage .scene-title{top:77px}.narrow-stage .scene-title h1{font-size:18px}.narrow-stage .view-tools{top:109px}.narrow-stage #viewport{top:160px}.narrow-stage .stage-modes{top:12px;left:calc(50% - 48px)}
.narrow-stage .stage-modes button{font-size:19px;padding:9px 12px}.narrow-stage .workspace-fullscreen{right:10px;top:17px;font-size:13px;padding:7px}.narrow-stage #parts{top:154px}
/* CSS masks avoid icon fonts and keep icons through textContent updates. */
.stage-modes button:before,.workspace-fullscreen:before,#focusSelected:before,#panMode:before,#centerModel:before,.navigation-guide b:before,.navigation-guide summary:before,#primaryHome:before,.primary-model-bottom small:before{content:'';display:inline-block;flex:none;width:23px;height:23px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;vertical-align:middle}
#explore{--icon:url('./assets/icons/network.svg')}#experiment{--icon:url('./assets/icons/flask-conical.svg')}
#focusSelected{--icon:url('./assets/icons/focus.svg')}#panMode{--icon:url('./assets/icons/hand.svg')}#panMode[aria-pressed=true]{--icon:url('./assets/icons/rotate-3d.svg')}#centerModel,#primaryHome{--icon:url('./assets/icons/locate-fixed.svg')}
.workspace-fullscreen{--icon:url('./assets/icons/maximize.svg')}.workspace-fullscreen[aria-pressed=true]{--icon:url('./assets/icons/minimize.svg')}
.navigation-guide b,.navigation-guide summary,.primary-model-bottom small{--icon:url('./assets/icons/mouse.svg')}.navigation-guide p:nth-of-type(2) b{--icon:url('./assets/icons/hand.svg')}
.navigation-guide summary:before{width:19px;height:19px;margin-right:6px}.stage-modes button:before{width:27px;height:27px}#primaryHome:before{margin-right:5px}
.primary-heading{padding-right:130px}.primary-model-bottom small:before{margin-right:6px}.primary-model-bottom .touch-hint:before{--icon:url('./assets/icons/hand.svg')}
body.teaching-fullscreen{overflow:auto;background:#14272d}body.teaching-fullscreen>header,body.teaching-fullscreen>.selection-toolbar{display:none!important}
body.teaching-fullscreen main,body.teaching-fullscreen #primaryWorkspace{height:100dvh;min-height:0}
@media(min-width:901px){body[data-school] main{height:calc(100dvh - var(--workspace-top,112px))}body.teaching-fullscreen[data-school] main{height:100dvh}}
@media(max-width:900px){header{height:auto;min-height:56px;gap:8px;flex-wrap:wrap;padding:6px 12px}header .brand{margin-left:0}header .header-actions{margin-left:auto;gap:4px}header .brand strong{font-size:18px}header .site-home{font-size:13px;min-height:36px;padding:5px 8px}.selection-toolbar{padding:6px 12px;gap:7px}.selection-toolbar .instrument-bar{padding-left:0;border-left:0}.selection-toolbar .school-bar>strong,.selection-toolbar .instrument-bar>strong{font-size:19px}.selection-toolbar button{font-size:14px;padding:6px 8px;min-height:38px}body[data-school] main{height:auto;display:block}.scene{height:650px;min-height:0}.workbench{overflow:visible}.stage-modes button{font-size:18px}.part-card{bottom:70px;max-width:58%}.navigation-guide{max-width:calc(100% - 28px);width:auto;left:14px;right:14px;bottom:12px}.navigation-guide[open]{max-width:290px;left:auto}.scene #viewport,body[data-mode=explore] .scene #viewport{top:167px;bottom:95px}.scene .camera-tools{top:192px}.primary-heading h1{font-size:22px}.primary-model-scene>.workspace-fullscreen{top:12px}body.teaching-fullscreen main,body.teaching-fullscreen #primaryWorkspace{height:auto;min-height:100dvh}body.teaching-fullscreen .scene{height:65dvh;min-height:500px}}
@media(max-width:520px){header .header-actions{width:100%;justify-content:flex-end;gap:8px}header .header-actions button{font-size:12px;padding:3px 5px}.selection-toolbar .school-bar,.selection-toolbar .instrument-bar{gap:4px}.selection-toolbar .school-bar>strong,.selection-toolbar .instrument-bar>strong{font-size:18px;margin-right:3px}.selection-toolbar button{font-size:13px;padding:6px 7px}.scene .stage-modes{left:14px;transform:none;top:12px}.stage-modes button:before{width:21px;height:21px}.scene .stage-modes button{font-size:16px;gap:5px;padding:8px;min-height:42px}.scene .workspace-fullscreen{right:10px;top:19px;font-size:12px;gap:4px;padding:6px}.workspace-fullscreen:before{width:17px;height:17px}.scene-title h1{font-size:18px}.view-tools{max-width:calc(100% - 24px);left:12px;gap:4px}.view-tools button{font-size:12px;padding:6px}.part-card{max-width:68%;left:14px}.camera-tools{width:70px}.primary-heading{padding-right:90px}.primary-model-scene>.workspace-fullscreen{font-size:12px;padding:6px;right:8px}}
@media(min-width:521px){.narrow-stage .stage-modes{left:50%}}
.primary-model-bottom .touch-hint{grid-row:3}.primary-model-bottom button{grid-row:2/4;align-self:center}
.primary-model-scene,.primary-observe{min-width:0}
.scene{container-type:inline-size}
@container (max-width:560px){
 .scene .stage-modes{left:50%;transform:translateX(-50%)}
 .scene .workspace-fullscreen{top:70px;right:10px;min-height:36px;padding:6px}
 .scene .scene-title{top:81px}
 .scene .scene-title h1{font-size:16px}
}
@media(max-width:900px){
 body[data-mode] main .scene{height:580px}
 body[data-mode] main .scene-title{top:76px;left:14px}
 body[data-mode] main .scene-title h1{font-size:18px;margin:0}
 body[data-mode] main .view-tools{top:109px;left:12px;max-width:calc(100% - 24px)}
 body[data-mode] main .view-tools button{font-size:12px;padding:6px}
 body[data-mode] main #viewport{inset:185px 65px 85px 0}
 body[data-mode] main .camera-tools{top:195px;right:10px;gap:5px}
 body[data-mode] main .camera-tools>button{min-height:40px;padding:5px}
 body[data-mode] main .navigation-guide{bottom:12px}
 body.teaching-fullscreen[data-mode] main .scene{height:70dvh;min-height:540px}
 .primary-model-bottom small{display:block;margin-top:4px}
}