section{margin-top:8px}input,select{border:none;width:60px;font-family:'Courier New',monospace;font-weight:600;font-size:26px;height:26px;text-align:center;padding:0;border-bottom:2px solid #000;background:0 0;outline:0;unicode-bidi:bidi-override;direction:rtl}header{display:flex;justify-content:space-between}header .view{width:80px;display:flex;justify-content:space-around}header .view .view-icon{padding:0;background-color:transparent}header .view .view-icon span{display:inline-flex;width:24px;height:24px;fill:#000}header .view .view-icon.selected span{fill:#ea4c89}header .content-sound label{width:32px;height:32px;display:block;background-size:32px;background-image:url(.././icons/sound_on.png)}header .content-sound input[type=checkbox]{display:none}header .content-sound input[type=checkbox]:checked~label{background-image:url(.././icons/sound_off.png)}.nav{display:inline-flex;justify-content:space-between;align-items:center}.pieces{display:grid;grid-template-columns:repeat(1,1fr);grid-gap:8px}.pieces .piece{display:inline-flex;border:1px solid #000;border-radius:8px;align-items:center;justify-content:space-around;padding:0}.pieces .piece:focus-within{border:3px solid #ea4c89}.pieces .piece span{color:#ea4c89;font-family:'Courier New',monospace;font-weight:600;font-size:26px;height:26px}.pieces .piece input{margin:8px 0}.pieces .piece input:focus{border-bottom:2px solid #ea4c89}.pieces .piece input.ko{border-bottom:2px solid red;color:red}.pieces .piece input.ok{border-bottom:2px solid #006400;color:#006400}.pieces .piece .value{width:50px;text-align:center}.pieces .piece span.separator{background:#000;width:3px;display:block;padding:0;height:100%}.vertical.pieces{grid-template-columns:repeat(2,1fr)}.vertical.pieces .piece{flex-direction:column;position:relative}.vertical.pieces .piece :nth-child(2){position:absolute;left:calc(50% - 45px);top:15px}.vertical.pieces .piece .value,.vertical.pieces .piece input{text-align:right;width:60px;font-size:28px}.vertical.pieces .piece :nth-child(4){display:none}.vertical.pieces .piece :nth-child(5){border-top:2px solid #000}.vertical.pieces .piece input{border-bottom:0;margin:0}@media only screen and (min-width:768px){.pieces{grid-template-columns:repeat(3,1fr)}.vertical.pieces{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1024px){body{font-size:48px}input,select{width:90px;font-size:38px;height:42px}header .content-sound label{width:48px;height:48px;background-size:48px}.pieces .piece span{height:42px;font-size:38px}.pieces .piece .value{width:70px}.pieces{grid-template-columns:repeat(3,1fr)}.vertical.pieces .piece .value,.vertical.pieces .piece input{width:90px}.vertical.pieces .piece :nth-child(2){left:calc(50% - 50px)}}