.n1::after { content: "1";left: 12.5px;top: 12.5px; }
.n2::after { content: "2";left: 37.5px;top: 12.5px; }
.n3::after { content: "3";left: 62.5px;top: 12.5px; }
.n4::after { content: "4";left: 12.5px;top: 37.5px; }
.n5::after { content: "5";left: 37.5px;top: 37.5px; }
.n6::after { content: "6";left: 62.5px;top: 37.5px; }
.n7::after { content: "7";left: 12.5px;top: 62.5px; }
.n8::after { content: "8";left: 37.5px;top: 62.5px; }
.n9::after { content: "9";left: 62.5px;top: 62.5px; }
td { width: 100px; height: 100px; }
tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{ border-bottom-width: 4px }
tr:nth-child(1) td, tr:nth-child(4) td, tr:nth-child(7) td{ border-top-width: 4px }
td:nth-child(1), td:nth-child(4), td:nth-child(7){ border-left-width: 4px }
td:nth-child(3), td:nth-child(6), td:nth-child(9){ border-right-width: 4px }
.n1::after { width: 25px }
.n1:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-1, 0))) !important; }
.n2::after { width: 25px }
.n2:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-2, 0))) !important; }
.n3::after { width: 25px }
.n3:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-3, 0))) !important; }
.n4::after { width: 25px }
.n4:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-4, 0))) !important; }
.n5::after { width: 25px }
.n5:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-5, 0))) !important; }
.n6::after { width: 25px }
.n6:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-6, 0))) !important; }
.n7::after { width: 25px }
.n7:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-7, 0))) !important; }
.n8::after { width: 25px }
.n8:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-8, 0))) !important; }
.n9::after { width: 25px }
.n9:not(:has(input:checked))::after { font-size: calc(25px * (1 - var(--cant-9, 0))) !important; }