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

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











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













.yc-beam-scope .beam-study{display: grid; grid-template-columns: 276px minmax(0px, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;}
.yc-beam-scope .selection-panel{background: rgb(247, 249, 250); padding: 24px 22px; display: flex; flex-direction: column; min-width: 0px;}
.yc-beam-scope .selected-product{display: flex; align-items: center; gap: 8px; justify-content: space-between; min-height: 80px; margin-bottom: 20px;}
.yc-beam-scope .selected-product h2{font-size: 17px; line-height: 1.25; letter-spacing: -0.5px; margin: 8px 0px 6px; white-space: nowrap;}
.yc-beam-scope .selected-product .small-label{font-size: 8px; margin: 0px;}
.yc-beam-scope .selected-product > img{width: 55px; height: 65px; object-fit: contain; mix-blend-mode: multiply;}
.yc-beam-scope .selected-product > div > span{font-size: 11px; color: var(--muted);}
.yc-beam-scope .product-facts{margin: 18px 0px 20px; padding: 14px 0px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 9px;}
.yc-beam-scope .product-facts > div{display: flex; justify-content: space-between; gap: 8px; align-items: center;}
.yc-beam-scope .product-facts dt{font-size: 10px; color: var(--muted);}
.yc-beam-scope .product-facts dd{margin: 0px; font-size: 10px; font-weight: 650; white-space: nowrap;}
.yc-beam-scope .angle-heading{display: flex; justify-content: space-between; align-items: baseline; gap: 5px;}
.yc-beam-scope .angle-heading h3{font-size: 12px; margin: 0px;}
.yc-beam-scope .angle-heading > span{font-size: 9px; color: var(--muted);}
.yc-beam-scope .angle-options{display: grid; gap: 7px;}
.yc-beam-scope .symmetric{grid-template-columns: repeat(3, 1fr); margin: 12px 0px;}
.yc-beam-scope .elliptical{grid-template-columns: repeat(2, 1fr); margin: 7px 0px 19px;}
.yc-beam-scope .option-label{font-size: 8px; letter-spacing: 1px; color: var(--muted); margin: 0px;}
.yc-beam-scope .angle-button{padding: 10px 7px; min-height: 43px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 5px;}
.yc-beam-scope .angle-button > b{font-size: 14px; font-weight: 650;}
.yc-beam-scope .angle-button svg{width: 18px; height: 18px; color: rgb(142, 156, 164);}
.yc-beam-scope .angle-button[aria-pressed="true"]{background: rgb(255, 245, 235); border-color: var(--orange); color: rgb(182, 76, 0);}
.yc-beam-scope .angle-button[aria-pressed="true"] svg{color: var(--orange);}
.yc-beam-scope .orientation{padding: 12px; background: rgb(238, 242, 244); border: 1px solid rgb(219, 226, 230); border-radius: 6px; margin-bottom: 17px;}
.yc-beam-scope .control-heading{display: flex; align-items: center; justify-content: space-between; gap: 5px;}
.yc-beam-scope .control-heading > b{font-size: 10px; font-weight: 650;}
.yc-beam-scope .control-heading > span{font-size: 8px; color: var(--muted);}
.yc-beam-scope .orientation-buttons{display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px;}
.yc-beam-scope .orientation-buttons button{background: rgb(255, 255, 255); border: 1px solid rgb(206, 216, 223); border-radius: 4px; font-size: 9px; padding: 8px 3px;}
.yc-beam-scope .orientation-buttons button[aria-pressed="true"]{border-color: var(--orange); background: rgb(255, 248, 239); color: rgb(174, 76, 12);}
.yc-beam-scope .orientation > p{font-size: 10px; font-weight: 600; margin: 10px 0px 5px;}
.yc-beam-scope .orientation > small{font-size: 9px; line-height: 1.6; color: var(--muted); display: block;}
.yc-beam-scope .scene-settings{margin-top: auto; border-top: 1px solid var(--line); padding-top: 15px;}
.yc-beam-scope .scene-settings summary{cursor: pointer; font-size: 10px; font-weight: 600;}
.yc-beam-scope .scene-settings summary > span{float: right; font-size: 9px; font-weight: 400; color: var(--muted);}
.yc-beam-scope .setup-row{display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 10px 0px; font-size: 9px; color: var(--muted);}
.yc-beam-scope .setup-row b{font-size: 9px; font-weight: 600; color: rgb(52, 75, 86);}
.yc-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);}
.yc-beam-scope .scene-settings > p{font-size: 9px; line-height: 1.7; color: var(--muted); margin: 8px 0px;}
.yc-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);}
.yc-beam-scope .drawing-button > span{color: var(--orange); font-size: 14px;}
.yc-beam-scope .preview-panel{min-width: 0px; background: var(--dark); color: rgb(233, 237, 239); display: flex; flex-direction: column;}
.yc-beam-scope .preview-toolbar{height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.082); padding: 0px 24px;}
.yc-beam-scope .view-tabs{display: flex; gap: 22px; height: 100%; align-items: stretch;}
.yc-beam-scope .view-tabs > button{position: relative; padding: 0px; background: none; border: 0px; color: rgb(141, 157, 166); font-size: 12px; font-weight: 550;}
.yc-beam-scope .view-tabs > button[aria-pressed="true"]{color: rgb(245, 245, 238);}
.yc-beam-scope .view-tabs > button[aria-pressed="true"]::after{content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 2px; background: var(--orange);}
.yc-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;}
.yc-beam-scope .camera-button:hover{background: rgba(255, 255, 255, 0.05);}
.yc-beam-scope .visual-stage{height: 560px; flex: 1 0 560px; position: relative; isolation: isolate; overflow: hidden; background: rgb(17, 27, 33);}
.yc-beam-scope .visual-stage > canvas{display: block; position: absolute; inset: 0px; width: 100%; height: 100%;}
.yc-beam-scope .scene-label{position: absolute; left: 25px; top: 23px; display: flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1.5px; color: rgb(166, 176, 181);}
.yc-beam-scope .scene-label > i{width: 4px; height: 4px; background: rgb(232, 188, 131); border-radius: 50%;}
.yc-beam-scope .angle-badge{position: absolute; right: 26px; top: 22px; display: flex; flex-direction: column; align-items: flex-end; max-width: 55%;}
.yc-beam-scope .angle-badge strong{font-size: 38px; line-height: 1.1; letter-spacing: -1px; font-weight: 500; color: rgb(240, 223, 199);}
.yc-beam-scope .angle-badge > span{font-size: 9px; color: rgb(149, 165, 173); margin-top: 7px;}
.yc-beam-scope .angle-badge > small{font-size: 8px; color: rgb(215, 185, 144); margin-top: 7px; text-align: right;}
.yc-beam-scope .scene-reference-height{position:absolute;left:25px;top:44px;margin:0;color:#8b9ca6;font-size:9px;line-height:1.5;pointer-events:none}


.yc-beam-scope .scene-caption{position: absolute; left: 25px; bottom: 24px; max-width: 60%; pointer-events: none;}
.yc-beam-scope .scene-caption > .small-label{font-size: 8px; color: rgb(180, 162, 134); letter-spacing: 1.5px; margin-bottom: 8px;}
.yc-beam-scope .scene-caption h2{font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -0.6px; line-height: 1.2; font-weight: 500; margin: 0px 0px 9px; color: rgb(237, 232, 223);}
.yc-beam-scope .scene-caption > p:last-child{font-size: 9px; color: rgb(136, 154, 164); margin: 0px;}
.yc-beam-scope .scene-installation{position: absolute; right: 25px; bottom: 24px; display: flex; flex-direction: column; gap: 4px; 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;}
.yc-beam-scope .scene-installation b{font-size: 9px; color: rgb(212, 215, 214); font-weight: 500;}
.yc-beam-scope .scene-installation > span{color: rgb(141, 158, 166); font-size: 8px;}
.yc-beam-scope .source-pin{position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%); border: 1px solid rgba(217, 195, 164, 0.46); border-radius: 50%; pointer-events: none;}
.yc-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;}
.yc-beam-scope #yc-geometry-view{position: absolute; inset: 0px; background: radial-gradient(at 50% 20%, rgb(32, 43, 49), rgb(17, 27, 33) 76%); display: flex; flex-direction: column; justify-content: center;}
.yc-beam-scope .geometry-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px 24px 8px;}
.yc-beam-scope .geometry-grid > figure{margin: 0px; min-width: 0px; padding: 15px 0px 0px; border: 1px solid rgba(255, 255, 255, 0.082); border-radius: 6px; background: rgba(17, 27, 33, 0.314);}
.yc-beam-scope .geometry-grid figcaption{display: flex; justify-content: space-between; padding: 0px 16px; align-items: center;}
.yc-beam-scope .geometry-grid figcaption > b{font-size: 11px; font-weight: 500; color: rgb(189, 199, 204);}
.yc-beam-scope .geometry-grid figcaption > span{font-size: 20px; color: rgb(230, 193, 150);}
.yc-beam-scope .geometry-grid svg{display: block; width: 100%; height: auto; font-family: Arial, sans-serif;}
.yc-beam-scope .geometry-note{font-size: 9px; color: rgb(146, 163, 172); line-height: 1.7; text-align: center; margin: 0px 25px 22px;}
.yc-beam-scope .geometry-active .scene-label,.yc-beam-scope .geometry-active .scene-reference-height,.yc-beam-scope .geometry-active .scene-caption,.yc-beam-scope .geometry-active .scene-installation,.yc-beam-scope .geometry-active .source-pin,.yc-beam-scope .geometry-active .angle-badge{display: none;}
.yc-beam-scope .preview-footer{display: flex; align-items: center; gap: 8px 32px; flex-wrap: wrap; min-height: 104px; padding: 17px 24px; background: rgb(14, 24, 30); border-top: 1px solid rgba(255, 255, 255, 0.086);}
.yc-beam-scope .preview-disclaimer{flex: 1 1 250px; margin: 0px; font-size: 11px; line-height: 1.8; color: rgb(163, 178, 186);}
.yc-beam-scope .geometry-summary{display: flex; align-items: baseline; flex: 1 1 400px; flex-wrap: wrap; gap: 8px 28px; min-width: 0px;}
.yc-beam-scope .spread-heading{width: 100%; font-size: 8px; letter-spacing: 1px; color: rgb(179, 161, 139);}
.yc-beam-scope .spread-heading > span{font-size: 9px; letter-spacing: 0px; color: rgb(125, 146, 159); margin-left: 12px;}
.yc-beam-scope .spread-fact{display: flex; align-items: baseline; gap: 10px;}
.yc-beam-scope .spread-fact > span{color: rgb(147, 163, 172); font-size: 9px;}
.yc-beam-scope .spread-fact > strong{color: rgb(240, 219, 192); font-size: 24px; line-height: 1.3; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;}
.yc-beam-scope .preview-footer > button{border: 0px; color: rgb(208, 214, 216); background: none; font-size: 9px; display: flex; align-items: center; gap: 7px; padding: 3px; white-space: nowrap; margin-left: auto;}
.yc-beam-scope .preview-footer > button:hover{color: rgb(245, 191, 137);}
.yc-beam-scope .study-notes{margin-top: 17px; color: var(--muted); font-size: 10px; line-height: 1.7;}
.yc-beam-scope .study-notes > p{display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin: 0px 0px 8px;}
.yc-beam-scope .study-notes b{font-weight: 600; color: rgb(74, 96, 109);}
.yc-beam-scope .study-notes > p > i{width: 4px; height: 4px; background: var(--orange); display: inline-block; border-radius: 50%; margin-right: 3px; align-self: center;}
.yc-beam-scope .study-notes details{max-width: 1000px; margin-top: 10px;}
.yc-beam-scope .study-notes summary{cursor: pointer; color: rgb(81, 107, 120); font-size: 10px;}
.yc-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;}
.yc-beam-scope .study-notes a{color: rgb(182, 83, 19); text-underline-offset: 3px;}
.yc-beam-scope dialog{max-width: 700px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 10px; padding: 25px;}
.yc-beam-scope dialog::backdrop{background: rgba(12, 23, 30, 0.79); backdrop-filter: blur(3px);}
.yc-beam-scope dialog > header{display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.yc-beam-scope dialog h2{font-size: 21px; margin: 0px;}
.yc-beam-scope dialog header .eyebrow{font-size: 9px;}
.yc-beam-scope dialog button{border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 50%; width: 32px; height: 32px; font-size: 23px; flex-shrink: 0;}
.yc-beam-scope dialog > img{display: block; max-height: 60vh; max-width: 100%; margin: 25px auto; object-fit: contain;}
.yc-beam-scope dialog > p{color: var(--muted); font-size: 11px;}
@media (min-width: 1600px){.yc-beam-scope .visual-stage{height: 610px; flex-basis: 610px;}}
@media (max-width: 1150px){





.yc-beam-scope .beam-study{grid-template-columns: 250px minmax(0px, 1fr);}
.yc-beam-scope .selection-panel{padding: 20px 17px;}
.yc-beam-scope .selected-product h2{font-size: 16px;}
.yc-beam-scope .selected-product > img{width: 43px;}
.yc-beam-scope .scene-installation{bottom: 112px; right: 20px;}
.yc-beam-scope .scene-caption{max-width: 75%;}
.yc-beam-scope .scene-caption h2{display: none;}
.yc-beam-scope .geometry-grid{gap: 10px; padding: 20px 15px 8px;}
.yc-beam-scope .geometry-grid figcaption{display: block;}
.yc-beam-scope .geometry-grid figcaption span{display: block; margin-top: 5px;}
.yc-beam-scope .preview-footer{column-gap: 22px;}
.yc-beam-scope .spread-fact{display: block;}
.yc-beam-scope .spread-fact > span{display: block; margin-bottom: 2px;}}
@media (max-width: 800px){

















.yc-beam-scope .beam-study{grid-template-columns: 225px minmax(0px, 1fr);}
.yc-beam-scope .selection-panel{padding: 18px 14px;}
.yc-beam-scope .selected-product h2{font-size: 15px;}
.yc-beam-scope .selected-product > img{width: 36px;}
.yc-beam-scope .selected-product > div > span{font-size: 10px;}
.yc-beam-scope .product-facts dt,.yc-beam-scope .product-facts dd{font-size: 9px;}
.yc-beam-scope .angle-heading{display: block;}
.yc-beam-scope .angle-heading > span{font-size: 9px;}
.yc-beam-scope .angle-button > b{font-size: 13px;}
.yc-beam-scope .angle-button svg{display: none;}
.yc-beam-scope .orientation{padding: 9px;}
.yc-beam-scope .control-heading{display: block;}
.yc-beam-scope .control-heading > span{display: block; margin-top: 3px;}
.yc-beam-scope .preview-toolbar{height: 57px; padding: 0px 15px;}
.yc-beam-scope .view-tabs{gap: 15px;}
.yc-beam-scope .view-tabs > button{font-size: 10px;}
.yc-beam-scope .camera-button span{display: none;}
.yc-beam-scope .camera-button{padding: 6px;}
.yc-beam-scope .visual-stage{height: 560px; flex-basis: 560px;}
.yc-beam-scope .angle-badge{right: 17px; top: 20px;}
.yc-beam-scope .angle-badge strong{font-size: 30px;}
.yc-beam-scope .angle-badge > span{font-size: 8px;}
.yc-beam-scope .angle-badge > small{font-size: 7px; max-width: 120px;}
.yc-beam-scope .scene-label{left: 17px; top: 25px; letter-spacing: 0.5px; font-size: 7px; max-width: 120px;}
.yc-beam-scope .scene-reference-height{left:17px;font-size:8px}
.yc-beam-scope .scene-caption{left: 17px; max-width: 80%;}
.yc-beam-scope .scene-caption h2{font-size: 18px; max-width: 250px;}
.yc-beam-scope .scene-caption > p:last-child{font-size: 8px;}
.yc-beam-scope .scene-installation{right: 17px; bottom: 128px; padding: 8px 10px;}
.yc-beam-scope .scene-installation b{font-size: 8px;}
.yc-beam-scope .scene-installation > span{font-size: 7px;}
.yc-beam-scope .preview-footer{padding: 16px; gap: 10px 20px;}
.yc-beam-scope .spread-heading{line-height: 1.8;}
.yc-beam-scope .spread-heading > span{display: block; margin: 0px;}
.yc-beam-scope .spread-fact > strong{font-size: 22px;}
.yc-beam-scope .preview-footer > button{flex-direction: column; gap: 5px;}
.yc-beam-scope .geometry-grid{grid-template-columns: 1fr; padding: 16px; gap: 10px;}
.yc-beam-scope .geometry-grid figure{padding-top: 10px;}
.yc-beam-scope .geometry-grid figcaption{display: flex;}
.yc-beam-scope .geometry-grid figcaption > span{margin: 0px; font-size: 18px;}
.yc-beam-scope .geometry-grid svg{max-height: 240px;}
.yc-beam-scope .geometry-note{margin: 0px 16px 16px; font-size: 8px;}
.yc-beam-scope .visual-stage.geometry-active{height: auto; flex: 1 0 auto;}
.yc-beam-scope #yc-geometry-view{position: relative;}}
@media (max-width: 590px){






.yc-beam-scope .beam-study{display: flex; flex-direction: column;}
.yc-beam-scope .selection-panel{padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 17px;}
.yc-beam-scope .selected-product{grid-column: 1 / -1; min-height: 63px;}
.yc-beam-scope .selected-product h2{font-size: 19px; margin: 5px 0px;}
.yc-beam-scope .selected-product > img{height: 60px; width: 65px;}
.yc-beam-scope .product-facts{grid-column: 1 / -1; margin: 6px 0px 8px; padding: 12px 0px; grid-template-columns: 1fr; gap: 8px;}
.yc-beam-scope .product-facts > div{display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.yc-beam-scope .product-facts > div:last-child{grid-column: auto; display: flex; justify-content: space-between; gap: 8px;}
.yc-beam-scope .product-facts dt{font-size: 9px;}
.yc-beam-scope .product-facts dd{font-size: 11px; margin-top: 2px;}
.yc-beam-scope .angle-heading{grid-column: 1 / -1; display: flex; justify-content: space-between;}
.yc-beam-scope .symmetric{grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 4px 0px 6px;}
.yc-beam-scope .angle-button{padding: 8px 3px; min-height: 39px;}
.yc-beam-scope .angle-button > b{font-size: 13px;}
.yc-beam-scope .option-label{grid-column: 1 / -1; margin: 3px 0px 0px;}
.yc-beam-scope .elliptical{grid-column: 1 / -1; gap: 7px; margin: 1px 0px 10px;}
.yc-beam-scope .orientation{grid-column: 1 / -1; margin-bottom: 7px; padding: 11px;}
.yc-beam-scope .control-heading{display: flex;}
.yc-beam-scope .control-heading > span{display: inline; margin: 0px;}
.yc-beam-scope .orientation-buttons button{font-size: 10px;}
.yc-beam-scope .orientation > small{font-size: 9px;}
.yc-beam-scope .scene-settings{grid-column: 1 / -1; width: 100%; padding-top: 10px;}
.yc-beam-scope .scene-settings summary{font-size: 10px;}
.yc-beam-scope .scene-settings summary > span{font-size: 9px;}
.yc-beam-scope .setup-row{font-size: 10px;}
.yc-beam-scope .setup-row > b{font-size: 10px;}
.yc-beam-scope .drawing-button{grid-column: 1 / -1; padding-top: 6px; font-size: 9px;}
.yc-beam-scope .visual-stage{height: 460px; flex-basis: 460px;}
.yc-beam-scope .angle-badge strong{font-size: 29px;}
.yc-beam-scope .scene-installation{top: 105px; bottom: auto;}
.yc-beam-scope .scene-caption{bottom: 18px; max-width: 90%;}
.yc-beam-scope .scene-caption h2{display: none;}
.yc-beam-scope .scene-caption > .small-label{font-size: 7px; margin-bottom: 5px;}
.yc-beam-scope .scene-caption > p:last-child{font-size: 8px;}

.yc-beam-scope .preview-footer{padding: 16px; gap: 8px 25px;}
.yc-beam-scope .preview-footer > button{font-size: 8px;}
.yc-beam-scope .spread-fact > strong{font-size: 23px;}
.yc-beam-scope .study-notes{font-size: 9px;}
.yc-beam-scope .study-notes details > div{font-size: 10px; padding: 12px;}
.yc-beam-scope .geometry-grid{padding: 15px;}
.yc-beam-scope .geometry-grid svg{max-height: 270px;}
.yc-beam-scope .geometry-note{font-size: 8px;}
.yc-beam-scope dialog{padding: 20px;}
.yc-beam-scope dialog h2{font-size: 17px;}}
@media (prefers-reduced-motion: reduce){.yc-beam-scope *{transition: none !important;}}