.lighting-demo{--panel:#181917;--panel-border:#383a35;max-width:min(900px,100%);margin:34px auto 80px}.lighting-demo-frame{position:relative;overflow:hidden;background:#111;isolation:isolate}.lighting-demo-frame img,.lighting-demo-frame canvas{display:block;width:100%;height:auto}.lighting-demo-frame img{position:relative;z-index:0}.lighting-demo-frame canvas{position:absolute;inset:0;z-index:1;pointer-events:none}.lighting-demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:20px;background:var(--panel);border-top:1px solid var(--panel-border)}.lighting-demo-control{display:grid;grid-template-columns:1fr auto;gap:9px 16px;color:#f1eee5;font-size:14px}.lighting-demo-control output{min-width:4.5ch;text-align:right;color:#e8a62e;font-variant-numeric:tabular-nums}.lighting-demo-control input{grid-column:1/-1;width:100%;margin:0;accent-color:#e8a62e}.lighting-demo-control input:focus-visible{outline:2px solid #e8a62e;outline-offset:5px}.lighting-demo-note{display:flex;justify-content:space-between;gap:20px;margin:0;padding:0 20px 20px;background:var(--panel);color:#bcbdb6;font-size:13px}.lighting-demo-note span:last-child{text-align:right}.lighting-demo figcaption{margin-top:.8rem}.lighting-demo-noscript{display:block;padding:14px 20px;background:#372b18;color:#f1eee5}
@media (min-height:600px){.lighting-demo{max-width:min(900px,calc(100svh - 160px))}}
@media (max-width:700px){.lighting-demo-controls{grid-template-columns:1fr;gap:18px;padding:18px}.lighting-demo-note{display:block;padding:0 18px 18px}.lighting-demo-note span{display:block}.lighting-demo-note span:last-child{margin-top:5px;text-align:left}}