.beam3d-panel{margin-bottom:22px;overflow:hidden}.beam3d-panel .panel-header{border-bottom:1px solid #e2eaf5}.view-presets{display:flex;gap:7px;flex-wrap:wrap}.view-presets button{min-height:44px;border:1px solid #ccd9ed;background:#edf3fd;color:#24558d;font-size:14px;padding:8px 12px;border-radius:6px}.beam3d-stage{background:linear-gradient(#f8fbff,#edf3fb);position:relative}.beam3d-stage svg{display:block;width:100%;height:360px;touch-action:none;cursor:grab;user-select:none}.beam3d-stage svg:active{cursor:grabbing}.view-instructions{position:absolute;bottom:12px;left:20px;font-size:13px;color:#5e7493;pointer-events:none}.view-size{padding:13px 24px;font-size:14px;color:#3e5a7e;border-top:1px solid #dce6f4;font-variant-numeric:tabular-nums}.view-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:14px 24px 18px}.view-controls label{font-size:14px;display:block;color:#4d6383}.view-controls input{display:block;height:30px;margin-top:7px}.beam3d-note{font-size:13px;color:#647896;margin:0;padding:0 24px 18px;line-height:1.6}@media(max-width:760px){.beam3d-stage svg{height:275px}.view-presets button{font-size:13px;padding:8px 10px}.view-size{padding:12px 16px}.view-controls{gap:18px;padding:12px 16px}.view-instructions{left:16px;font-size:12px}.beam3d-note{padding:0 16px 16px}}@media print{.view-controls,.view-presets,.view-instructions{display:none}.beam3d-panel{break-inside:avoid}.beam3d-stage svg{height:220px}}
@media(max-width:760px){#beam3d-panel{order:2;margin:0 14px 20px}}

.model-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px 24px;background:#f7faff;border-top:1px solid #dce6f4}.model-dimensions label{display:block;font-size:14px;color:#3e5a7e;margin-bottom:8px}.model-dimensions input{font-size:16px;min-height:46px}.beam3d-stage text[role=button]:focus{outline:2px solid #245ddd;outline-offset:4px}@media(max-width:760px){.model-dimensions{padding:16px;gap:10px}.model-dimensions label{font-size:13px;min-height:40px}}@media(max-width:360px){.model-dimensions{grid-template-columns:1fr}.model-dimensions label{min-height:0}}

.beam3d-stage{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;padding-right:20px}.model-materials{padding:16px;border:1px solid #d9e4f3;border-radius:8px;background:#ffffffd9;margin:16px 0 40px;font-size:12px;color:#5c718e}.model-materials .eyebrow{font-size:10px}.model-materials>div{margin-top:14px}.model-materials strong{display:block;font-size:24px;color:#235999;font-variant-numeric:tabular-nums}.model-materials small{display:block;margin-top:14px;line-height:1.6}.model-supports{display:grid;grid-template-columns:1fr minmax(100px,.8fr) 1fr;gap:16px;align-items:center;padding:16px 24px;border-top:1px solid #dce6f4}.model-supports label{display:block;font-size:13px;color:#4d6383;margin-bottom:7px}.model-supports select{font-size:14px;min-height:44px}.model-supports svg{width:100%;height:88px}.support-inputs{margin-top:14px}@media(max-width:980px){.beam3d-stage{grid-template-columns:minmax(0,1fr) 155px}.model-materials strong{font-size:21px}.model-supports{grid-template-columns:1fr 1fr}.model-supports svg{grid-column:1/-1;grid-row:2;height:68px}}@media(max-width:760px){.beam3d-stage{grid-template-columns:1fr;padding-right:0}.model-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 14px 38px;padding:12px}.model-materials .eyebrow,.model-materials small{grid-column:1/-1}.model-materials>div{margin:0}.model-materials strong{font-size:20px}.model-materials small{margin:0}.view-instructions{bottom:12px}.model-supports{padding:14px;gap:10px}.model-supports select{font-size:13px}}@media(max-width:360px){.model-materials{gap:7px}.model-materials strong{font-size:18px}.model-supports label{font-size:12px}}

/* Keep the interactive model full width, including inside the Model workspace. */
#beam3d-panel .beam3d-stage{display:block;padding:0;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fff 0,#f1f6ff 65%,#e6eefb 100%)}
#beam3d-panel #beam-3d{height:430px;width:100%;max-width:100%;outline-offset:-4px}
#beam3d-panel .beam3d-stage.section-view #beam-3d{cursor:default}
#beam3d-panel .view-instructions{left:18px;right:18px;bottom:12px;text-align:center;font-size:12px}
#beam3d-panel .view-presets button[aria-pressed=true],#beam3d-panel .model-view-tools button[aria-pressed=true]{color:#fff;background:#245ddd;border-color:#245ddd}
.model-view-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 20px;background:#fff;border-bottom:1px solid #dce6f4}
.model-camera-tools{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.model-view-tools button{min-height:44px;min-width:44px;border:1px solid #cbd9ed;background:#f1f6ff;color:#29598f;font-size:13px;padding:8px 12px;border-radius:7px;cursor:pointer}
.model-view-tools #model-zoom-in,.model-view-tools #model-zoom-out{font-size:23px;line-height:1;padding:6px 12px}
.model-view-tools button:disabled{opacity:.4;cursor:default}
.model-view-tools button:focus-visible,#beam3d-panel .view-presets button:focus-visible{outline:3px solid #719bed;outline-offset:2px}
#beam-3d [data-model-span]{cursor:pointer}
#beam-3d [data-model-span]:focus-visible{outline:none;stroke:#143984;stroke-width:5}
.model-selected-span{padding:12px 20px;font-size:14px;line-height:1.7;font-weight:650;color:#1c4f9c;background:#eef4ff;border-top:1px solid #cbdcf6;border-bottom:1px solid #dce6f4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.model-section-controls{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px 18px;align-items:center;padding:14px 20px;background:#f9fbff;border-bottom:1px solid #dce6f4}
.model-section-controls[hidden]{display:none}
.model-section-controls>label{font-size:12px;color:#476689;font-weight:600}
.model-section-field{display:flex;align-items:center;gap:8px;margin-top:5px}
.model-section-field input{width:140px;min-width:0;min-height:44px;font-size:16px;background:#fff}
.model-section-controls>input{width:100%;min-width:0;height:44px;padding:0;cursor:pointer}
.model-section-controls>small{grid-column:1/-1;font-size:11px;color:#617894;line-height:1.6}
#beam3d-panel>.model-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;margin:0;padding:12px 20px;border:0;border-radius:0;background:#f8faff;border-bottom:1px solid #e0e9f6}
#beam3d-panel>.model-materials .eyebrow,#beam3d-panel>.model-materials small{grid-column:1/-1}
#beam3d-panel>.model-materials>div{margin:0;min-width:0}
#beam3d-panel>.model-materials strong{font-size:19px;margin-top:3px}
#beam3d-panel>.model-materials small{margin:0;font-size:10px}
#beam3d-panel .view-size{font-size:12px;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:760px){
  #beam3d-panel #beam-3d{height:320px}
  #beam3d-panel .panel-header{display:flex;flex-wrap:wrap;gap:10px}
  #beam3d-panel .view-presets{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #beam3d-panel .view-presets button{min-height:44px;padding:8px 5px;font-size:12px}
  .model-view-tools{padding:10px 12px;gap:8px}
  .model-camera-tools{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:7px}
  .model-camera-tools #model-focus-span{grid-column:1/-1}
  .model-view-tools #model-steel-toggle{width:100%}
  .model-view-tools button{font-size:12px;padding:8px}
  .model-selected-span{padding:11px 14px;font-size:12px}
  .model-section-controls{grid-template-columns:minmax(0,1fr);padding:12px 14px;gap:9px}
  .model-section-controls>label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}
  .model-section-field{margin:0;gap:5px}
  .model-section-field input{width:95px}
  #beam3d-panel>.model-materials{padding:11px 14px;gap:7px;font-size:11px}
  #beam3d-panel>.model-materials strong{font-size:18px}
  #beam3d-panel .view-instructions{font-size:10px;left:10px;right:10px}
}
@media(max-width:360px){#beam3d-panel #beam-3d{height:290px}#beam3d-panel .model-dimensions{grid-template-columns:1fr}#beam3d-panel .model-dimensions label{min-height:0}}
@media print{.model-view-tools,.model-section-controls{display:none}#beam3d-panel #beam-3d{height:260px}}
