/* Page-native rendering controls and visualizations. */
.renderer-demo{--demo-muted:#b9a7ca;--demo-line:#765486;scroll-margin-top:100px}
.lighting-inline{margin-top:40px;padding-top:30px;border-top:1px solid #61335f}
.renderer-demo :is(button,select,input){font:12px Consolas,monospace}
.renderer-demo button{cursor:pointer;background:transparent;color:#e5d5f0;border:1px solid var(--demo-line);padding:10px 16px}
.renderer-demo button:hover{border-color:#66edff;color:#66edff}
.renderer-demo .primary{background:#66edff;border-color:#66edff;color:#100b1d;min-width:155px}
.renderer-demo .primary:hover{color:#100b1d}
.renderer-demo :is(button,select,input,summary):focus-visible{outline:2px solid #66edff;outline-offset:4px}
.renderer-demo select,.renderer-demo input[type=number]{background:#100b1d;color:#eee;border:1px solid var(--demo-line);padding:9px;max-width:100%}
.renderer-demo :is(.lighting-tools,.raster-tools){display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0;color:var(--demo-muted);font:12px Consolas,monospace}
.renderer-demo .range-control{width:150px;min-width:0}
.renderer-demo .range-control label{display:flex;justify-content:space-between;gap:8px;font:11px Consolas,monospace;color:var(--demo-muted);margin-bottom:10px}
.renderer-demo .range-control input{width:100%;accent-color:#66edff;cursor:pointer}
.renderer-demo .playback{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0}
.renderer-demo .error{color:#ff9fdf}.renderer-demo .error:empty{display:none}
.lighting-scene{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin:30px 0}
.lighting-scene figure{margin:0;min-width:0;text-align:center}
.lighting-scene canvas{position:static;display:block;width:100%;height:220px;touch-action:none;cursor:grab;background:#000}
.lighting-scene figcaption{font:13px Consolas,monospace;color:#66edff;margin:15px 0 8px}
.light-formula{font:11px Consolas,monospace;color:var(--demo-muted);line-height:1.6}
.lighting-operator{color:#ff9fdf;font:25px Consolas,monospace}
.lighting-equation{text-align:center;margin:30px 0;color:#e5d5f0;overflow-wrap:anywhere}
.lighting-equation math{font-size:clamp(15px,2vw,25px)}
.lighting-equation-values{display:flex;gap:25px;justify-content:center;flex-wrap:wrap;margin:20px 0;font:12px Consolas,monospace;color:#ff9fdf}
.lighting-equation-legend,.lighting-equation-note{font:11px Consolas,monospace;color:var(--demo-muted);line-height:1.8}
.lighting-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:30px 0}
.lighting-sliders .range-control{width:100%}
.raster-surface{position:relative;width:100%;height:500px;margin:25px 0}
.raster-surface canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.raster-explanation{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--demo-muted);font:12px Consolas,monospace;line-height:1.8}
#raster-stage{color:#ff9fdf}#raster-count{color:#66edff}
.raster-vertices{margin-left:auto}.raster-vertices summary{cursor:pointer;color:#66edff}
.vertex-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.vertex-fields label{display:flex;flex-direction:column;gap:8px}.vertex-fields input{width:80px}
@media(max-width:800px){.lighting-scene{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.lighting-operator{display:none}.lighting-scene canvas{height:230px}.raster-surface{height:380px}}
@media(max-width:500px){.lighting-scene canvas{height:165px}.lighting-sliders{grid-template-columns:repeat(2,minmax(0,1fr))}.light-formula{font-size:10px}.renderer-demo .playback{gap:12px}.renderer-demo .range-control{width:130px}.lighting-sliders .range-control{width:100%}.raster-surface{height:300px}.raster-vertices{margin-left:0;width:100%}.vertex-fields input{width:100%}.raster-explanation{font-size:11px}}