body { font-family: Inter, system-ui, sans-serif; }
.card { border: 0; }
.animation-demo { display:flex; align-items:center; justify-content:center; height:120px; }
.lamp-wrap { position:relative; width:120px; height:80px; }
.wire { position:absolute; left:0; right:0; top:50%; height:6px; background:linear-gradient(90deg,#444,#666); border-radius:6px; transform-origin:left center;
  animation: wave 2s linear infinite;
}
@keyframes wave { 0%{transform:scaleX(1)}50%{transform:scaleX(0.98)}100%{transform:scaleX(1)} }
.bulb { position:absolute; right:0; top:10px; width:40px; height:40px; border-radius:50%; background:#222; box-shadow: inset -6px -6px 12px rgba(255,255,255,0.03); transition: background 0.3s;}
.glow { position:absolute; right: -6px; top:6px; width:52px; height:52px; border-radius:50%; filter: blur(8px); opacity:0; transition:opacity .3s; }
.bulb.on { background: radial-gradient(circle at 30% 30%, #fff7c2, #ffd74d 30%, #ffb400 60%); box-shadow: 0 0 18px #ffb400; }
.bulb.on + .glow { opacity:1; background: radial-gradient(circle at 30% 30%, rgba(255,216,120,0.9), rgba(255,180,0,0.6)); }

/* quiz options */
.list-group-item { cursor:pointer; transition: transform 0.12s ease; }
.list-group-item:hover { transform: translateX(6px); }

/* responsive */
@media (max-width: 768px) {
  #taskCanvas { width:100%; height:220px; }
}