/* In-scene light switches ------------------------------------------------ */
.fx-hotspots{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;--fx-ease:cubic-bezier(.22,1,.36,1)}
.fx-hotspot{position:absolute;left:0;top:0;pointer-events:none;--fx-color:#ffbf81;--fx-glow:1;--fx-scale:1;
  transition:opacity .28s ease,visibility 0s linear 0s;will-change:transform}
.fx-hotspot[data-visible=false]{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.fx-hotspot:is(:hover,:focus-within){z-index:2000!important}
.fx-pill{position:relative;display:flex;align-items:center;height:40px;margin:-20px 0 0 -20px;border-radius:999px;pointer-events:auto;
  color:#6b4a16;transform:scale(var(--fx-scale));transform-origin:20px 50%;
  border:1px solid transparent;background:transparent;
  transition:transform .38s var(--fx-ease),background-color .3s ease,border-color .3s ease,box-shadow .38s var(--fx-ease),backdrop-filter .3s ease}
.fx-hotspot:is(:hover,:focus-within) .fx-pill{transform:scale(calc(var(--fx-scale) * 1.06));
  background:rgb(252 253 251 / .86);border-color:rgb(255 255 255 / .9);
  box-shadow:0 12px 32px rgb(30 22 8 / .28),0 2px 8px rgb(30 22 8 / .14);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.fx-pill :where(button){border:0;padding:0;background:none;font:inherit;color:inherit}
:is(.fx-orb,.fl-orb){position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;margin:0;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--fx-color) 78%,#fff) 0%,color-mix(in srgb,var(--fx-color) 34%,#fff) 62%,rgb(255 255 255 / .92) 100%);
  box-shadow:0 0 0 1px rgb(255 255 255 / .85),0 6px 16px rgb(38 25 5 / .26),
    0 0 calc(20px * var(--fx-glow)) calc(4px * var(--fx-glow)) color-mix(in srgb,var(--fx-color) 62%,transparent);
  transition:transform .38s var(--fx-ease),box-shadow .38s var(--fx-ease),background .3s ease}
:is(.fx-orb,.fl-orb) .fx-bulb{width:20px;height:20px;filter:drop-shadow(0 1px 0 rgb(255 255 255 / .55))}
:is(.fx-orb,.fl-orb) .fx-bulb path:not(.fx-slash){fill:color-mix(in srgb,var(--fx-color) 45%,#fff0)}
.fx-slash{opacity:0;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--fx-ease),opacity .2s ease}
.fx-orb::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid color-mix(in srgb,var(--fx-color) 70%,transparent);
  opacity:0;pointer-events:none;animation:fx-pulse 2.8s ease-out infinite}
.fx-hotspot:is(:hover,:focus-within) .fx-orb{transform:scale(1.04)}
.fx-hotspot:is(:hover,:focus-within) .fx-orb::after{animation:none}
:is(.fx-hotspot,.fl-row)[data-state=off] :is(.fx-orb,.fl-orb){color:#6d787d;background:radial-gradient(circle at 50% 34%,#fff,#e3e8e8);
  box-shadow:0 0 0 1px rgb(255 255 255 / .85),0 5px 14px rgb(24 36 40 / .22)}
:is(.fx-hotspot,.fl-row)[data-state=off] :is(.fx-orb,.fl-orb) .fx-bulb path:not(.fx-slash){fill:none}
.fx-hotspot[data-state=off] .fx-orb::after{animation:none}
:is(.fx-hotspot,.fl-row)[data-state=off] .fx-slash{opacity:1;stroke-dashoffset:0}
.fx-hotspot.is-selected .fx-orb{box-shadow:0 0 0 1px #fff,0 0 0 4px #246fb4d9,0 6px 16px rgb(38 25 5 / .26),
  0 0 calc(20px * var(--fx-glow)) calc(4px * var(--fx-glow)) color-mix(in srgb,var(--fx-color) 62%,transparent)}
.fx-action{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;max-width:0;padding:0;overflow:hidden;
  opacity:0;white-space:nowrap;text-align:left;cursor:pointer;border-radius:999px;
  transition:max-width .42s var(--fx-ease),padding .42s var(--fx-ease),opacity .22s ease,background-color .2s ease}
.fx-hotspot:is(:hover,:focus-within) .fx-action{max-width:200px;padding:0 16px 0 10px;opacity:1;transition-delay:0s,0s,.06s,0s}
.fx-name{font-size:10px;line-height:1.1;color:#69766f;letter-spacing:.01em}
.fx-verb{font-size:13px;line-height:1.15;font-weight:650;color:#1f2d26}
.fx-action:hover .fx-verb{color:#a45a0c}
.fx-pill :is(button):focus-visible{outline:2px solid #246fb4;outline-offset:2px}
@keyframes fx-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.85);opacity:0}}

/* Detail pane -------------------------------------------------------------- */
.fixture-pane{position:absolute;left:0;top:0;z-index:8;--fx-color:#ffbf81;--fp-amber:#d9822b;overflow-x:hidden;
  animation:fp-in .34s cubic-bezier(.22,1,.36,1) both}
.fixture-pane.is-closing{animation:fp-out .24s ease-in both;pointer-events:none}
@keyframes fp-in{from{opacity:0;transform:translateX(-28px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fp-out{to{opacity:0;transform:translateX(-24px) scale(.985)}}
.fp-head{display:flex;align-items:center;gap:12px;padding:8px 0 14px}
.fp-chip{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#6b4a16;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--fx-color) 75%,#fff),color-mix(in srgb,var(--fx-color) 30%,#fff));
  box-shadow:inset 0 1px rgb(255 255 255 / .85),0 6px 18px color-mix(in srgb,var(--fx-color) 45%,transparent)}
.fp-chip .fx-bulb{width:24px;height:24px}
.fp-chip .fx-bulb path:not(.fx-slash){fill:color-mix(in srgb,var(--fx-color) 45%,#fff0)}
.fx-slash{stroke-dasharray:22}
:is(.fixture-pane,.fixture-light-panel)[data-state=off] .fp-chip{color:#6d787d;background:linear-gradient(145deg,#fff,#e3e8e8);box-shadow:inset 0 1px #fff,0 4px 12px rgb(24 36 40 / .12)}
:is(.fixture-pane,.fixture-light-panel)[data-state=off] .fp-chip .fx-bulb path:not(.fx-slash){fill:none}
:is(.fixture-pane,.fixture-light-panel)[data-state=off] .fp-chip .fx-slash{opacity:1;stroke-dashoffset:0}
.fp-title{flex:1;min-width:0}
.fp-group{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--glass-muted)}
.fp-title h2{margin:2px 0 0;font-size:18px;line-height:1.2;font-weight:650;outline:0}
.fp-close{flex:none;width:34px;height:34px;border:0;border-radius:50%;font-size:22px;line-height:1;background:rgb(255 255 255 / .6);
  transition:background-color .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.fp-close:hover{background:#fff;transform:rotate(90deg)}
.fp-power{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:20px;
  border:1px solid rgb(255 255 255 / .8);
  background:linear-gradient(135deg,color-mix(in srgb,var(--fx-color) 34%,#fff),rgb(255 255 255 / .55));
  box-shadow:inset 0 1px rgb(255 255 255 / .9),0 8px 24px color-mix(in srgb,var(--fx-color) 22%,transparent);transition:background .4s ease,box-shadow .4s ease}
.fixture-pane[data-state=off] .fp-power{background:rgb(255 255 255 / .5);box-shadow:inset 0 1px rgb(255 255 255 / .9)}
.fp-caption{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--glass-muted)}
.fp-state{display:block;font-size:17px;margin-top:1px}
.fp-summary{display:block;margin-top:2px;font-size:11px;color:var(--glass-secondary)}
.fp-switch{flex:none;position:relative;width:58px;height:34px;padding:0;border:0;border-radius:999px;background:#b6c0c2;
  box-shadow:inset 0 2px 5px rgb(0 0 0 / .18);transition:background-color .3s ease}
.fp-switch span{position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgb(0 0 0 / .3);transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
.fp-switch[aria-checked=true]{background:var(--fp-amber)}
.fp-switch[aria-checked=true] span{transform:translateX(24px)}
.fp-section{margin-top:15px}
.fp-section h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 9px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--glass-secondary)}
.fp-section output{font-size:13px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;color:var(--glass-ink);font-weight:600}
.fixture-pane input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;--fill:50%}
.fixture-pane input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--fp-amber) var(--fill),rgb(38 60 50 / .16) var(--fill))}
.fixture-pane input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgb(38 60 50 / .16)}
.fixture-pane input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--fp-amber)}
.fixture-pane input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:0;background:#fff;
  box-shadow:0 2px 8px rgb(0 0 0 / .3),0 0 0 1px rgb(0 0 0 / .05);transition:transform .2s ease}
.fixture-pane input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px rgb(0 0 0 / .3)}
.fixture-pane input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.fp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fp-chips button{border:1px solid rgb(255 255 255 / .8);border-radius:999px;padding:6px 12px;font-size:11px;background:rgb(255 255 255 / .55);
  transition:background-color .2s ease,transform .2s ease,border-color .2s ease}
.fp-chips button:hover{background:#fff;transform:translateY(-1px)}
.fp-chips button.is-active{background:#fff;border-color:var(--fp-amber);color:#8a4b00;font-weight:600}
.fp-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fp-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 0 7px;border:1px solid rgb(255 255 255 / .8);border-radius:14px;
  font-size:10px;background:rgb(255 255 255 / .5);cursor:pointer;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.fp-swatch:hover{background:#fff;transform:translateY(-2px)}
.fp-swatch i{width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12),0 2px 6px rgb(0 0 0 / .14)}
.fp-custom i{background:conic-gradient(#ff5f6d,#ffc371,#f9f871,#7bed9f,#70a1ff,#c56cf0,#ff5f6d)}
.fp-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fp-swatch.is-active{background:#fff;border-color:var(--fp-amber);box-shadow:0 0 0 2px color-mix(in srgb,var(--fp-amber) 30%,transparent)}
.fp-slider{display:block;margin-top:10px}
.fp-slider>span{display:flex;justify-content:space-between;font-size:12px;color:var(--glass-secondary)}
.fp-spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:12px}
.fp-spec dt{color:var(--glass-secondary)}
.fp-spec dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.fp-reset{width:100%;margin-top:16px;padding:11px;border:1px solid rgb(255 255 255 / .8);border-radius:14px;font-size:12px;background:rgb(255 255 255 / .55);
  transition:background-color .2s ease}
.fp-reset:hover{background:#fff}
.fixture-pane :is(button,input,label):focus-visible{outline:2px solid #246fb4;outline-offset:2px}

@media(max-width:740px){
  .fixture-pane{top:auto;bottom:0;left:0;width:calc(100vw - 20px);min-width:0;height:auto;max-height:60dvh;margin:10px;
    animation-name:fp-in-mobile}
  .fixture-pane.is-closing{animation-name:fp-out-mobile}
}
@keyframes fp-in-mobile{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fp-out-mobile{to{opacity:0;transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){
  .fx-orb::after{animation:none}
  .fixture-pane,.fixture-pane.is-closing{animation-duration:.01s}
  .fx-pill,.fx-orb,.fx-action,.fp-switch span,.fx-slash{transition-duration:.01s}
}