.kelvin-demo{--green:#237859;--ink:#202020}.kelvin-section-heading{margin-bottom:24px}.kelvin-section-heading p{margin-top:12px}

.kelvin-demo{--light-colour:rgb(255,202,128);display:grid;grid-template-columns:1.2fr 1fr;background:#f5f3ee;border:1px solid #e5e0d6;overflow:hidden}
.kelvin-scene{position:relative;min-width:0;background:#c9c4ba}.kelvin-scene svg{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}.scene-label{position:absolute;top:18px;left:18px;background:#ffffffd9;padding:6px 10px;font-size:10px;letter-spacing:.03em}.scene-reading{position:absolute;bottom:22px;left:22px;display:flex;flex-direction:column;color:white;background:#28251edb;padding:12px 18px;min-width:142px}.scene-reading span:first-child{font-size:24px;font-weight:600;line-height:1.3}.scene-reading span:last-child{font-size:11px;margin-top:3px}
.kelvin-controls{padding:42px 36px;align-self:center}.kelvin-controls .eyebrow{color:var(--green);font-size:10px;margin-bottom:14px}.kelvin-controls h3{font-size:25px;line-height:1.3}.kelvin-controls>p{font-size:13px;line-height:1.7;min-height:45px}.kelvin-range-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin-top:32px}.kelvin-range-heading output{font-weight:700;font-size:16px;white-space:nowrap}
[data-kelvin-slider]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;background:transparent;margin:7px 0;cursor:ew-resize;touch-action:pan-y}
[data-kelvin-slider]::-webkit-slider-runnable-track{height:8px;border-radius:20px;background:linear-gradient(90deg,#efbf7a,#f4ece0 50%,#cbdfff)}
[data-kelvin-slider]::-moz-range-track{height:8px;border-radius:20px;background:linear-gradient(90deg,#efbf7a,#f4ece0 50%,#cbdfff)}
[data-kelvin-slider]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-9px;width:26px;height:26px;border:3px solid white;border-radius:50%;background:#237859;box-shadow:0 1px 5px #0004}
[data-kelvin-slider]::-moz-range-thumb{width:20px;height:20px;border:3px solid white;border-radius:50%;background:#237859;box-shadow:0 1px 5px #0004}
.kelvin-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kelvin-stops button{border:1px solid #d9d5cc;padding:10px 5px;background:transparent;border-radius:0;min-height:62px;color:var(--ink)}.kelvin-stops button[aria-pressed=true]{border-color:var(--green);background:white;box-shadow:inset 0 -2px var(--green)}.kelvin-stops strong{display:block;font-size:12px}.kelvin-stops span{display:block;font-size:11px;margin-top:3px}.kelvin-controls .kelvin-instruction{font-size:11px;color:#666;min-height:0;margin-top:12px}.kelvin-controls .kelvin-disclaimer{font-size:10px;color:#6b665e;min-height:0;padding-top:18px;border-top:1px solid #ddd7cc;margin-top:22px}

.kelvin-scene{position:relative;aspect-ratio:16/9;align-self:center;overflow:hidden;background:#171612}.kelvin-scene .room-base{display:block;width:100%;height:100%;object-fit:cover}.kelvin-scene .room-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.scene-label,.scene-reading{z-index:2}.scene-label{max-width:calc(100% - 32px);font-size:9px}.kelvin-demo .eyebrow{font-size:10px;letter-spacing:.1em;text-transform:uppercase}.kelvin-demo button:focus-visible,.kelvin-demo input:focus-visible{outline:3px solid #237859;outline-offset:3px}
@media(max-width:999px){.kelvin-demo{grid-template-columns:1fr}.kelvin-scene svg{min-height:0;aspect-ratio:4/3}.kelvin-controls{padding:26px 20px}.kelvin-controls h3{font-size:22px}.kelvin-controls .eyebrow{margin-bottom:10px}.kelvin-range-heading{margin-top:22px}.scene-label{top:12px;left:12px;font-size:9px}.scene-reading{bottom:14px;left:14px;padding:8px 12px;min-width:116px}.scene-reading span:first-child{font-size:20px}

}
@media(max-width:999px){.kelvin-scene{aspect-ratio:16/9}.scene-reading{bottom:10px;left:10px;padding:6px 10px;min-width:96px}.scene-reading span:first-child{font-size:17px}}

.kelvin-scene :is(.room-base,.room-layer){filter:brightness(var(--demo-brightness,1))}.kelvin-capabilities{margin-top:18px;font-size:12px;line-height:1.65}.kelvin-capabilities p+p{margin-top:12px}[data-brightness-slider]{accent-color:#237859;width:100%;min-height:44px;cursor:ew-resize}[data-brightness-slider]:focus-visible{outline:3px solid #237859;outline-offset:3px}