.bulb{--bulb-color: #101820;--bulb-brightness: 0;--transition-ms: .28s}@property --bulb-color{syntax: "<color>"; inherits: true; initial-value: #101820;}@property --bulb-brightness{syntax: "<number>"; inherits: true; initial-value: 0;}.bulbs-shell{display:grid;min-height:100vh;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.98),transparent 42%),linear-gradient(180deg,#fff,#f7f7f4 58%,#ecebe7)}.bulbs-stage{display:grid;grid-template-columns:auto clamp(30px,5vw,92px) auto;align-items:center;width:min(1200px,calc(100vw - 56px))}.bulbs-group{display:grid;grid-template-columns:repeat(4,minmax(86px,1fr));gap:clamp(18px,2.5vw,42px);align-items:end}.bulbs-spacer{height:1px}.bulb{position:relative;display:grid;justify-items:center;align-items:end;min-height:clamp(220px,27vw,360px);color:#1a1f24b8;transition:--bulb-color var(--transition-ms) ease,--bulb-brightness var(--transition-ms) ease}.bulb__reflection{position:absolute;top:18%;width:clamp(160px,18vw,280px);height:clamp(150px,16vw,250px);border-radius:50%;opacity:calc(var(--bulb-brightness) * .72);background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--bulb-color) 76%,white) 0%,color-mix(in srgb,var(--bulb-color) 28%,transparent) 42%,transparent 76%);filter:blur(18px);transform:scale(calc(.78 + var(--bulb-brightness) * .32));transition:opacity var(--transition-ms) ease,transform var(--transition-ms) ease,background-color var(--transition-ms) ease}.bulb__fixture{position:absolute;inset:0;transform:rotate(180deg);transform-origin:center 48%}.bulb__glow{position:absolute;top:10%;left:50%;width:clamp(110px,12vw,180px);height:clamp(110px,12vw,180px);border-radius:50%;opacity:calc(var(--bulb-brightness) * .95);background:radial-gradient(circle,var(--bulb-color) 0%,color-mix(in srgb,var(--bulb-color) 36%,transparent) 40%,transparent 72%);filter:blur(8px);transform:translate(-50%) scale(calc(.65 + var(--bulb-brightness) * .45));transition:opacity var(--transition-ms) ease,transform var(--transition-ms) ease,background-color var(--transition-ms) ease}.bulb__glass{position:absolute;top:15%;left:50%;width:clamp(76px,8vw,128px);height:clamp(102px,10vw,164px);border:2px solid rgba(79,89,98,.28);border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.96),transparent 24%),radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--bulb-color) calc(var(--bulb-brightness) * 72%),rgba(249,250,248,.98)),#e4e8e9e6 78%);box-shadow:inset -10px -14px 24px #5c666c2e,0 0 calc(10px + var(--bulb-brightness) * 26px) color-mix(in srgb,var(--bulb-color) calc(var(--bulb-brightness) * 90%),transparent);transform:translate(-50%);transition:background var(--transition-ms) ease,box-shadow var(--transition-ms) ease}.bulb__neck{position:absolute;top:calc(15% + clamp(96px,9.3vw,152px));left:50%;width:clamp(34px,3.8vw,54px);height:clamp(24px,2.8vw,40px);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#b8c3cb,#59636c);transform:translate(-50%)}.bulb__base{position:absolute;top:calc(15% + clamp(116px,11.2vw,184px));left:50%;width:clamp(46px,4.9vw,72px);height:clamp(30px,3.2vw,48px);border-radius:7px 7px 14px 14px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 2px,transparent 2px 8px),linear-gradient(180deg,#7d8790,#343b42);transform:translate(-50%)}.bulb__label{position:absolute;bottom:0;display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(29,35,40,.18);border-radius:50%;color:#1d2328b3;font-size:15px;font-weight:500}.bulb.is-blinking .bulb__reflection,.bulb.is-blinking .bulb__glow,.bulb.is-blinking .bulb__glass{animation:identify-blink 1.3s ease-in-out infinite}@keyframes identify-blink{0%,to{opacity:.18;filter:brightness(.42)}50%{opacity:1;filter:brightness(1)}}@media(max-width:760px){.bulbs-stage{width:calc(100vw - 28px);grid-template-columns:1fr;gap:22px}.bulbs-spacer{display:none}.bulbs-group{grid-template-columns:repeat(4,1fr);gap:10px}.bulb{min-height:180px}}