.mb-beam-scope{font-size:14px;line-height:1.5;color:#17242b;isolation:isolate}.mb-beam-scope,.mb-beam-scope *{box-sizing:border-box}
.mb-beam-scope{--orange: #f47a20; --ink: #17242b; --muted: #6a7b86; --line: #dce3e8; --soft: #f5f7f8; --dark: #101a1f;}
.mb-beam-scope *{box-sizing: border-box;}

.mb-beam-scope button,.mb-beam-scope select{font: inherit; color: inherit;}
.mb-beam-scope button{cursor: pointer;}
.mb-beam-scope button:focus-visible,.mb-beam-scope a:focus-visible,.mb-beam-scope select:focus-visible,.mb-beam-scope summary:focus-visible{outline: rgba(244, 122, 32, 0.44) solid 3px; outline-offset: 4px;}
.mb-beam-scope button{transition: background 0.18s, border-color 0.18s;}
.mb-beam-scope a{color: inherit;}
.mb-beam-scope button[hidden],.mb-beam-scope [hidden]{display: none !important;}











.mb-beam-scope .eyebrow,.mb-beam-scope .small-label{font-size: 10px; letter-spacing: 1.5px; font-weight: 700; margin: 0px 0px 10px;}
.mb-beam-scope .eyebrow{color: rgb(183, 75, 0);}
.mb-beam-scope .small-label{color: var(--muted); letter-spacing: 1px;}














.mb-beam-scope .beam-study{display: grid; grid-template-columns: 252px minmax(0px, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;}
.mb-beam-scope .selection-panel{background: rgb(247, 249, 250); padding: 25px 22px; display: flex; flex-direction: column; min-width: 0px;}
.mb-beam-scope .selected-product{display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 98px; margin-bottom: 20px;}
.mb-beam-scope .selected-product h2{font-size: 29px; line-height: 1.2; letter-spacing: -0.7px; margin: 4px 0px 6px;}
.mb-beam-scope .selected-product .small-label{font-size: 9px; margin: 0px;}
.mb-beam-scope .selected-product > img{width: 52px; height: 100px; object-fit: contain; mix-blend-mode: multiply;}
.mb-beam-scope .selected-product > div > span{font-size: 11px; color: var(--muted);}
.mb-beam-scope .product-facts{margin: 20px 0px; padding: 15px 0px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 9px;}
.mb-beam-scope .product-facts > div{display: flex; justify-content: space-between; gap: 10px; align-items: center;}
.mb-beam-scope .product-facts dt{font-size: 10px; color: var(--muted);}
.mb-beam-scope .product-facts dd{margin: 0px; font-size: 12px; font-weight: 650; white-space: nowrap;}
.mb-beam-scope .angle-heading h3{font-size: 13px; margin: 0px;}
.mb-beam-scope .angle-heading > span{font-size: 10px; color: var(--muted);}
.mb-beam-scope .angle-options{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 0px 24px;}
.mb-beam-scope .angle-button{padding: 10px 13px; min-height: 46px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.mb-beam-scope .angle-button > b{font-size: 16px; font-weight: 650;}
.mb-beam-scope .angle-button svg{width: 22px; height: 21px; color: rgb(142, 156, 164);}
.mb-beam-scope .angle-button[aria-pressed="true"]{background: rgb(255, 245, 235); border-color: var(--orange); color: rgb(182, 76, 0);}
.mb-beam-scope .angle-button[aria-pressed="true"] svg{color: var(--orange);}
.mb-beam-scope .setup{margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line);}
.mb-beam-scope .setup > .small-label{font-size: 8px; letter-spacing: 1.1px;}
.mb-beam-scope .setup-row{display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 9px 0px; font-size: 10px; color: var(--muted);}
.mb-beam-scope .setup-row > b{font-size: 10px; font-weight: 600; color: rgb(52, 75, 86);}
.mb-beam-scope .setup-row select{font-size: 10px; border: 1px solid rgb(207, 216, 223); background: rgb(255, 255, 255); border-radius: 4px; padding: 4px 6px; font-weight: 600; color: rgb(52, 75, 86); max-width: 100px;}
.mb-beam-scope .drawing-button{border: 0px; background: transparent; padding: 15px 0px 0px; display: flex; justify-content: space-between; font-size: 10px; color: rgb(82, 105, 116);}
.mb-beam-scope .drawing-button > span{color: var(--orange); font-size: 14px;}
.mb-beam-scope .preview-panel{min-width: 0px; background: var(--dark); color: rgb(233, 237, 239); display: flex; flex-direction: column;}
.mb-beam-scope .preview-toolbar{height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.082); padding: 0px 25px;}
.mb-beam-scope .view-tabs{display: flex; gap: 20px; height: 100%; align-items: stretch;}
.mb-beam-scope .view-tabs > button{position: relative; padding: 0px; background: none; border: 0px; color: rgb(141, 157, 166); font-size: 12px; font-weight: 550;}
.mb-beam-scope .view-tabs > button[aria-pressed="true"]{color: rgb(245, 245, 238);}
.mb-beam-scope .view-tabs > button[aria-pressed="true"]::after{content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 2px; background: var(--orange);}
.mb-beam-scope .camera-button{border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; background: transparent; color: rgb(178, 191, 197); display: flex; align-items: center; gap: 7px; font-size: 10px; padding: 7px 9px;}
.mb-beam-scope .camera-button:hover{background: rgba(255, 255, 255, 0.05);}
.mb-beam-scope .visual-stage{height: 545px; position: relative; isolation: isolate; overflow: hidden; background: rgb(17, 27, 33);}
.mb-beam-scope .visual-stage > canvas{display: block; position: absolute; inset: 0px; width: 100%; height: 100%;}
.mb-beam-scope .scene-label{position: absolute; left: 26px; top: 23px; display: flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1.6px; color: rgb(166, 176, 181);}
.mb-beam-scope .scene-dot{width: 4px; height: 4px; background: rgb(232, 188, 131); border-radius: 50%;}
.mb-beam-scope .angle-badge{position: absolute; right: 28px; top: 22px; display: flex; flex-direction: column; align-items: flex-end;}
.mb-beam-scope .angle-badge strong{font-size: 42px; line-height: 1.1; letter-spacing: -1px; font-weight: 500; color: rgb(240, 223, 199);}
.mb-beam-scope .angle-badge strong > span{font-size: 22px; color: rgb(234, 188, 131); vertical-align: top; margin-left: 2px;}
.mb-beam-scope .angle-badge > span{font-size: 9px; letter-spacing: 0.2px; color: rgb(149, 165, 173); margin-top: 7px;}
.mb-beam-scope .scene-reference-height{position: absolute; left: 26px; top: 43px; margin: 0; color: rgb(139, 156, 166); font-size: 9px; line-height: 1.5; pointer-events: none;}
.mb-beam-scope .scene-caption{position: absolute; left: 26px; bottom: 24px; pointer-events: none;}
.mb-beam-scope .scene-caption > .small-label{font-size: 8px; color: rgb(180, 162, 134); letter-spacing: 1.5px; margin-bottom: 8px;}
.mb-beam-scope .scene-caption h2{font-size: clamp(18px, 1.8vw, 25px); letter-spacing: -0.6px; line-height: 1.2; font-weight: 500; margin: 0px 0px 9px; color: rgb(237, 232, 223);}
.mb-beam-scope .scene-caption > p:last-child{font-size: 10px; color: rgb(136, 154, 164); margin: 0px;}
.mb-beam-scope .scene-installation{position: absolute; right: 27px; bottom: 25px; display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: rgba(10, 19, 25, 0.7); border: 1px solid rgba(255, 255, 255, 0.082); border-radius: 6px; font-size: 9px;}
.mb-beam-scope .scene-installation .source-mark{color: rgb(233, 197, 152); font-size: 20px;}
.mb-beam-scope .scene-installation > div{display: flex; flex-direction: column; gap: 3px;}
.mb-beam-scope .scene-installation b{font-size: 9px; color: rgb(212, 215, 214); font-weight: 500;}
.mb-beam-scope .scene-installation > div > span{color: rgb(141, 158, 166); font-size: 9px;}
.mb-beam-scope .render-loading{position: absolute; inset: 0px; background: rgb(17, 27, 33); display: grid; place-content: center; font-size: 12px; color: rgb(161, 173, 181); z-index: 4;}
.mb-beam-scope #mb-geometry-view{position: absolute; inset: 0px; background: radial-gradient(at 50% 20%, rgb(32, 43, 49), rgb(17, 27, 33) 76%); display: flex; align-items: center; justify-content: center;}
.mb-beam-scope #mb-beam-diagram{width: 100%; height: 100%; font-family: inherit;}
.mb-beam-scope .geometry-active .scene-label,.mb-beam-scope .geometry-active .scene-reference-height,.mb-beam-scope .geometry-active .scene-caption,.mb-beam-scope .geometry-active .scene-installation{display: none;}
.mb-beam-scope .geometry-active .angle-badge{top: 22px; right: 27px; z-index: 2;}
.mb-beam-scope .geometry-active .angle-badge strong{font-size: 28px;}
.mb-beam-scope .geometry-active .angle-badge > span{display: none;}
.mb-beam-scope .preview-footer{display: flex; align-items: center; gap: 25px; min-height: 98px; padding: 20px 25px; background: rgb(14, 24, 30); border-top: 1px solid rgba(255, 255, 255, 0.086);}
.mb-beam-scope .geometry-summary > .spread-metric{display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 12px;}
.mb-beam-scope .preview-disclaimer{margin: 0px; font-size: 11px; line-height: 1.8; color: rgb(163, 178, 186); max-width: 780px;}
.mb-beam-scope .geometry-summary{display: flex; align-items: center; flex-wrap: wrap; gap: 12px 25px; width: 100%; min-width: 0px;}
.mb-beam-scope .preview-footer .small-label{font-size: 8px; letter-spacing: 1.2px; grid-column: 1 / -1; margin: 0px; color: rgb(138, 155, 163);}
.mb-beam-scope .preview-footer strong{color: rgb(240, 219, 192); font-size: 24px; line-height: 1.4; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;}
.mb-beam-scope .footprint-note{font-size: 9px; color: rgb(141, 155, 163); line-height: 1.4; max-width: 70px;}
.mb-beam-scope .view-explanation{margin: 0px 0px 0px auto; font-size: 9px; line-height: 1.8; color: rgb(135, 154, 164); max-width: 280px;}
.mb-beam-scope .preview-footer > button{border: 0px; color: rgb(208, 214, 216); background: none; font-size: 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 3px; white-space: nowrap;}
.mb-beam-scope .preview-footer > button:hover{color: rgb(245, 191, 137);}
.mb-beam-scope .study-notes{margin-top: 18px; color: var(--muted); font-size: 10px;}
.mb-beam-scope .study-notes > p{display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin: 0px 0px 8px;}
.mb-beam-scope .study-notes b{font-weight: 600; color: rgb(74, 96, 109);}
.mb-beam-scope .note-dot{width: 4px; height: 4px; background: var(--orange); display: inline-block; border-radius: 50%; margin-right: 3px; align-self: center;}
.mb-beam-scope .study-notes details{max-width: 1000px; margin-top: 10px;}
.mb-beam-scope .study-notes summary{cursor: pointer; color: rgb(81, 107, 120); font-size: 10px;}
.mb-beam-scope .study-notes details > div{font-size: 11px; line-height: 1.8; background: var(--soft); padding: 14px 20px; margin-top: 10px; border-radius: 6px;}
.mb-beam-scope .study-notes a{color: rgb(182, 83, 19); text-decoration-thickness: 1px; text-underline-offset: 3px;}
.mb-beam-scope dialog{max-width: 650px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 10px; padding: 25px;}
.mb-beam-scope dialog::backdrop{background: rgba(12, 23, 30, 0.79); backdrop-filter: blur(3px);}
.mb-beam-scope dialog > header{display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.mb-beam-scope dialog h2{font-size: 23px; margin: 0px;}
.mb-beam-scope dialog header .eyebrow{font-size: 9px;}
.mb-beam-scope dialog button{border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 50%; width: 32px; height: 32px; font-size: 23px;}
.mb-beam-scope dialog > img{display: block; max-height: 60vh; max-width: 100%; margin: 25px auto; object-fit: contain;}
.mb-beam-scope dialog > p{color: var(--muted); font-size: 11px;}
.mb-beam-scope button:disabled{opacity: 0.5; cursor: default;}
@media (min-width: 1600px){.mb-beam-scope .visual-stage{height: 610px;}}
@media (max-width: 1150px){



.mb-beam-scope .beam-study{grid-template-columns: 220px minmax(0px, 1fr);}
.mb-beam-scope .selection-panel{padding: 22px 18px;}
.mb-beam-scope .visual-stage{height: 530px;}
.mb-beam-scope .scene-caption h2{font-size: 20px;}
.mb-beam-scope .scene-installation{bottom: 101px; right: 23px;}
.mb-beam-scope .view-explanation{margin-left: 0px; max-width: none; flex-basis: 100%;}
.mb-beam-scope .preview-footer > button{margin-left: auto;}
.mb-beam-scope .preview-footer{gap: 15px;}
.mb-beam-scope .preview-toolbar{padding: 0px 20px;}}
@media (max-width: 800px){



















.mb-beam-scope .beam-study{grid-template-columns: 185px minmax(0px, 1fr);}
.mb-beam-scope .selection-panel{padding: 18px 14px;}
.mb-beam-scope .selected-product > img{width: 36px; height: 80px;}
.mb-beam-scope .selected-product h2{font-size: 24px;}
.mb-beam-scope .selected-product > div > span{font-size: 10px;}
.mb-beam-scope .product-facts dt{font-size: 9px;}
.mb-beam-scope .product-facts dd{font-size: 10px;}
.mb-beam-scope .angle-button{padding: 8px; min-height: 41px;}
.mb-beam-scope .angle-button > b{font-size: 14px;}
.mb-beam-scope .angle-button svg{width: 18px;}
.mb-beam-scope .setup-row{font-size: 9px;}
.mb-beam-scope .setup-row > b{font-size: 9px;}
.mb-beam-scope .setup-row select{font-size: 9px;}
.mb-beam-scope .drawing-button{font-size: 9px;}
.mb-beam-scope .preview-toolbar{height: 57px; padding: 0px 15px;}
.mb-beam-scope .view-tabs{gap: 17px;}
.mb-beam-scope .view-tabs > button{font-size: 10px;}
.mb-beam-scope .camera-button span{display: none;}
.mb-beam-scope .camera-button{padding: 6px;}
.mb-beam-scope .visual-stage{height: 550px;}
.mb-beam-scope .angle-badge{right: 17px; top: 20px;}
.mb-beam-scope .angle-badge strong{font-size: 34px;}
.mb-beam-scope .scene-label{left: 17px; top: 25px; letter-spacing: 0.8px; font-size: 7px; max-width: 180px;}
.mb-beam-scope .scene-reference-height{left: 17px; top: 44px; font-size: 8px;}
.mb-beam-scope .scene-caption{left: 17px; right: 17px; bottom: 24px;}
.mb-beam-scope .scene-caption h2{font-size: 18px; max-width: 235px;}
.mb-beam-scope .scene-caption > p:last-child{font-size: 9px;}
.mb-beam-scope .scene-installation{right: 17px; bottom: 125px; font-size: 8px;}
.mb-beam-scope .scene-installation b,.mb-beam-scope .scene-installation > div > span{font-size: 8px;}
.mb-beam-scope .preview-footer{padding: 16px; min-height: 90px;}
.mb-beam-scope .preview-footer strong{font-size: 22px;}
.mb-beam-scope .preview-footer .small-label{font-size: 7px;}
.mb-beam-scope .preview-footer .footprint-note{font-size: 8px;}
.mb-beam-scope .geometry-active .angle-badge{right: 15px;}
.mb-beam-scope .geometry-active .angle-badge strong{font-size: 25px;}}
@media (max-width: 590px){






.mb-beam-scope .beam-study{display: flex; flex-direction: column;}
.mb-beam-scope .selection-panel{padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;}
.mb-beam-scope .selected-product{grid-column: 1 / -1; min-height: 75px; margin-bottom: 0px;}
.mb-beam-scope .selected-product > img{height: 70px; width: 31px;}
.mb-beam-scope .product-facts{grid-column: 2; margin: 0px; padding: 7px 0px; border-bottom: 0px; border-top: 0px; align-content: center; gap: 8px;}
.mb-beam-scope .product-facts > div{display: block;}
.mb-beam-scope .product-facts dd{font-size: 12px; margin-top: 2px;}
.mb-beam-scope .product-facts dt{font-size: 9px;}
.mb-beam-scope .angle-heading{grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px;}
.mb-beam-scope .angle-heading h3{font-size: 12px;}
.mb-beam-scope .angle-heading > span{font-size: 9px;}
.mb-beam-scope .angle-options{grid-column: 1 / -1; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 1px 0px 7px;}
.mb-beam-scope .angle-button{justify-content: center; padding: 9px 2px; min-height: 39px;}
.mb-beam-scope .angle-button > b{font-size: 13px;}
.mb-beam-scope .angle-button svg{display: none;}
.mb-beam-scope .setup{grid-column: 1 / -1; padding: 10px 0px 0px; display: flex; flex-wrap: wrap; gap: 4px 15px; align-items: center;}
.mb-beam-scope .setup > .small-label{display: none;}
.mb-beam-scope .setup-row{margin: 3px 0px; font-size: 9px; gap: 5px;}
.mb-beam-scope .setup-row:first-of-type{flex: 1 1 auto;}
.mb-beam-scope .setup-row:last-of-type{display: none;}
.mb-beam-scope .drawing-button{grid-column: 1 / -1; padding-top: 6px; font-size: 9px;}
.mb-beam-scope .visual-stage{height: 450px;}
.mb-beam-scope .scene-label{font-size: 7px; top: 24px; letter-spacing: 0.7px;}
.mb-beam-scope .angle-badge strong{font-size: 34px;}
.mb-beam-scope .angle-badge > span{font-size: 8px;}
.mb-beam-scope .scene-installation{bottom: 115px;}
.mb-beam-scope .scene-caption h2{max-width: 250px; font-size: 20px;}
.mb-beam-scope .scene-caption > p:last-child{font-size: 8px;}
.mb-beam-scope .scene-caption > .small-label{font-size: 7px;}

.mb-beam-scope .preview-footer{padding: 17px; min-height: 91px;}
.mb-beam-scope .study-notes{font-size: 9px; line-height: 1.7;}
.mb-beam-scope .study-notes details > div{padding: 12px; font-size: 10px;}
.mb-beam-scope #mb-beam-diagram{transform: scale(1.06);}
.mb-beam-scope .geometry-active .angle-badge{display: none;}}
@media (prefers-reduced-motion: reduce){.mb-beam-scope *{scroll-behavior: auto !important; transition: none !important;}}
.mb-beam-scope .source-pin{position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%); border: 1px solid rgba(217, 195, 164, 0.46); border-radius: 50%; pointer-events: none;}
.mb-beam-scope .source-pin::before{content: ""; position: absolute; inset: -4px; border: 1px solid rgba(217, 195, 164, 0.153); border-radius: 50%;}
.mb-beam-scope .geometry-active .source-pin{display: none;}
@media (max-width: 590px){.mb-beam-scope #mb-beam-diagram{transform: none;}}
@media (max-width: 590px){.mb-beam-scope .scene-caption{bottom: 18px;}
.mb-beam-scope .scene-caption h2{display: none;}
.mb-beam-scope .scene-installation{top: 88px; bottom: auto;}
.mb-beam-scope .scene-caption > .small-label{margin-bottom: 5px;}}
.mb-beam-scope .scene-caption{right: auto; max-width: calc(100% - 34px);}