How to draw in Blazor simple boolean lamp switching depending on variable

I'm trying to draw in Blazor app a lamp as circle which would change the color to green when the state of the boolean variable is activated. Firstly I tried just display a gray circle, but nothing is shown. I'm basing on the project from the site: https://jonhilton.net/blazor-traffic-light/.The code of home.razor looks:

@page "/"@inherits ValveComponent<PageTitle>Home</PageTitle><div class="lamp"><div class="on @(IsOn ? "on" : "off")"></div></div>

I also attached class ValveComponent.razor.cs:

using Microsoft.AspNetCore.Components;namespace GardenHMI{    public class ValveComponent : ComponentBase    {        public bool IsOn { get; set; }        public void Toggle()        {            IsOn = !IsOn;        }    }}

and lamp.css:

.lamp {    padding: 1em;    border: 1px solid grey;    width: 6em;    background-color: #343a40;}.lamp div {    margin-bottom: 0.5em;    border: 2px solid grey;    width: 4em;    height: 4em;    border-radius: 50%;}div.on {    background-color: greenyellow;}

the structure of the project is:

The result while debuggind doesn't display the circle as I wanted. The site is blank:

What am I doing wrong here?