CSS Logic Gates with if() Function

Pure CSS logic gates implementation using the experimental CSS if() function (Chrome 137+)

AND 
.and .out {
  --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1);
}
→
→
→
→
→
OR 
.or .out {
  --value: if(style(--a: 1): 1; style(--b: 1): 1; else: 0);
}
→
→
→
→
NOT 
.not .out {
  --value: if(style(--a: 1): 0; else: 1);
}
→
→
XOR 
.xor .out {
  --value: if(
    style(--a: 0): if(style(--b: 1): 1; else: 0);
    style(--a: 1): if(style(--b: 0): 1; else: 0);
    else: 0
  );
}
→
→
→
→
(a AND b) OR c
→
→
→
→
→
→
→
→
NAND (NOT AND)
→
→
→
→
→
→
→
→
NOR (NOT OR)
→
→
→
→
→
→
→
→