.light-viz-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px;margin-bottom:20px}.light-viz-container p{flex-shrink:0;margin:0 0 10px}.light-viz-container #angleInfo{font-family:monospace;font-size:13px;margin:0 0 10px;padding:0;min-height:2em;text-align:left;max-width:450px}.light-viz-container #bitPatternPlaceholder{display:block;min-height:1em}.light-viz-container .controls-container{flex-shrink:0;margin-bottom:10px;display:flex;flex-direction:column;align-items:center}.light-viz-container .button-container{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:10px}.light-viz-container button,.light-viz-container select{background-color:#555;color:#eee;border:1px solid #888;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px;margin:2px 5px;flex-shrink:0;transition:background-color .2s,border-color .2s;font-family:inherit}.light-viz-container select{padding:7px 12px}.light-viz-container button:hover,.light-viz-container select:hover{background-color:#666}.light-viz-container button.active{background-color:#007aff;border-color:#007aff;color:#fff}.light-viz-container button.active-more{background-color:#f59e0b;border-color:#f59e0b}.light-viz-container #sliderContainer{display:flex;align-items:center;font-size:14px}.light-viz-container #lightSizeSlider{width:150px;margin:0 10px}.light-viz-container #lightSizeValue{min-width:3em;text-align:right}.light-viz-container #shadowStats{font-family:monospace;font-size:13px;margin-bottom:5px}.light-viz-container canvas{background-color:#444;cursor:pointer;box-shadow:0 0 15px rgba(0,0,0,.5);flex-shrink:0}.light-viz-container #legend{font-family:monospace;font-size:12px;margin-top:10px;padding:5px;flex-shrink:0;display:grid;grid-template-columns:repeat(3,auto);gap:5px 15px}.light-viz-container #legend>div{display:flex;align-items:center}.light-viz-container .swatch{display:inline-block;width:12px;height:12px;border:1px solid #888;margin-right:8px}.viz3d .main-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.viz3d .editor-panel{flex:1;min-width:320px}.viz3d .three-panel{flex:1.5;min-width:400px;min-height:400px}.viz3d .controls-container{display:flex;flex-direction:column}.viz3d .controls-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}button,.viz3d select{background-color:#4a525f;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .2s}button:hover,.viz3d select:hover{background-color:#5a6370}.viz3d select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20fill=%22%23FFF%22%20d=%22M287%2069.4A17.6%2017.6.0%2000274%2064H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6.0%20000%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.8.0-5-1.8-9.2-5.4-12.8z%22/%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right 10px center;background-size:10px;padding-right:30px}.viz3d label{font-size:14px}.viz3d input[type=range]{flex-grow:1;cursor:pointer}.viz3d #editor-canvas{width:100%;background-color:#444;border-radius:8px;image-rendering:pixelated}.viz3d #three-canvas{width:100%;height:400px;border-radius:8px;background-color:#111}.viz3d #angleInfo{font-family:courier new,Courier,monospace;font-size:.9em;line-height:1.6em;min-height:14.4em;white-space:pre-wrap}.viz3d #shadowStats{font-size:.9em;color:#aaa}.viz3d .editor-panel .controls-container{margin-top:15px}