body{
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top, rgba(30, 51, 77, 0.28), transparent 30%),
    linear-gradient(180deg, #03101d 0%, #020914 100%);
  font-family:Arial, Helvetica, sans-serif;
  color:white;
}

.wrapper{
  width:380px;
}

.card{
  background:linear-gradient(180deg, rgba(6,18,34,0.98) 0%, rgba(3,12,24,0.98) 100%);
  padding:24px;
  border-radius:24px;
  text-align:center;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(120,220,255,0.04);
}

.info{
  margin-bottom:18px;
  font-size:16px;
  color:#eef9ff;
}

.info strong{
  color:#ffffff;
  font-size:18px;
}

.fanArea{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

.fan{
  width:220px;
  height:220px;
  transform-origin:center;
  filter: drop-shadow(0 0 20px rgba(90, 204, 255, 0.12));
}

svg{
  width:100%;
  height:100%;
  display:block;
}

.controls{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

button{
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

button:hover{
  transform:translateY(-2px);
}

button[data-mode="on"]{
  background:#19ff19;
  color:#071607;
  box-shadow:0 10px 24px rgba(25,255,25,0.28);
}

button[data-mode="off"]{
  background:#ff2b2b;
  color:white;
  box-shadow:0 10px 24px rgba(255,43,43,0.28);
}

button:not([data-mode="on"]):not([data-mode="off"]){
  background:#e5e5e5;
  color:#111;
  box-shadow:0 10px 18px rgba(255,255,255,0.08);
}

button.active{
  transform:scale(1.08);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.16),
    0 10px 24px rgba(0,0,0,0.22);
}

button:disabled{
  opacity:0.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}