/* Lantern demo: pick a screen, the LED bar beside the monitor takes its main colour */
.lantern-demo { position: relative; border-radius: 10px; background: #0a0f0c; border: 1px solid var(--border); padding: 10px 12px 12px; }
.lz-stage { display: block; width: 100%; height: auto; }
.lz-line { fill: none; stroke: #00ff41; stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.5)); }
.lz-scene { opacity: 0; transition: opacity 0.45s ease; }
.lz-scene.on { opacity: 1; }
.lz-bar { fill: var(--lz); transition: fill 0.6s ease; }
.lz-g0 { stop-color: var(--lz); stop-opacity: 0.38; transition: stop-color 0.6s ease; }
.lz-g1 { stop-color: var(--lz); stop-opacity: 0; transition: stop-color 0.6s ease; }
.lz-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.lz-thumb { all: unset; cursor: pointer; display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; border: 1px solid #1d4a2f; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s; }
.lz-thumb svg { display: block; width: 100%; height: 100%; }
.lz-thumb:hover, .lz-thumb:focus-visible { opacity: 1; border-color: #00b32e; }
.lz-thumb.on { opacity: 1; border-color: #00ff41; box-shadow: 0 0 10px rgba(0, 255, 65, 0.4); }
html[data-theme="light"] .lantern-demo { background: #f2f8f3; }
html[data-theme="light"] .lz-line { stroke: #00b32e; filter: none; }
html[data-theme="light"] .lz-thumb { border-color: #8dbf9c; }
html[data-theme="light"] .lz-thumb.on { border-color: #00b32e; box-shadow: 0 0 8px rgba(0, 179, 46, 0.4); }