:root{font-size:16px}html{background-color:#ddd}@media (prefers-color-scheme: dark){html{background-color:#222}body{filter:invert(.9) hue-rotate(180deg)}input{color:#111}}body,#app{margin:0}input{background-color:unset;outline:none}input[readonly]{cursor:default}input:not([readonly]){font-style:italic;color:#4682b4}.sudoku,.sudoku>.box{display:grid;grid-template:"1 2 3" 1fr "4 5 6" 1fr "7 8 9" 1fr;margin:0;border:1px solid #000}.sudoku{background-color:#eee;width:clamp(300px,calc(100% - 4px),500px);aspect-ratio:1;margin:auto;margin-top:1rem}.cell{margin:0;align-content:center;border:1px solid #444}.cell:focus{background-color:#0ff}.cell *{display:block;margin:0;min-width:0;min-height:0;max-width:100%;text-align:center}.cell>.value{padding:0;border:0;font-size:2rem;width:100%}.cell:has(.error){outline:2px solid red;background-color:pink}.cell>.notes{display:grid;grid-template:". . ." 1fr ". . ." 1fr ". . ." 1fr}.notes{width:1ch;max-width:1ch;text-wrap:wrap;word-wrap:break-word;overflow:hidden;text-overflow:clip;text-align:center;align-items:center}.control-wrapper{margin:2rem auto;width:clamp(300px,calc(100% - 4px),500px);display:flex;justify-content:center}button{padding:.5rem;margin:0 .5rem;cursor:pointer}button:active{cursor:default}#timer{margin:1rem auto;font-size:1.2rem;width:min-content}