couldn't figure out the query section. css is not finished. the icons are not placed properly.
What specific areas of your project would you like help with?would like some guidance on the problems I stated in the previous section.
wrap the radio and the text label (like a span) inside a label and style the actual label with label:focus-within and/or label:has([type="radio"]:focus) and label:has([type="radio"]:user-invalid)
.querytype
label
input[type=radio]
span.textlabel
label
input[type=radio]
span.textlabel
span.errormsg
Usually headlines are chosen by hierarchy of the document to create levels of importance and accessibility. In modern designs this often is not really feasible. Generally you always want exactly one h1, for seo reasons, accessibility, and schematic html.
For this project i personally used h1 for "Your Result" as is describes the purpose of the page pretty well. The downside is that it breaks the visual "flow" of the headlines from h1 - h6 (h2 is bigger and looks more important then h1)
As for splitting the css files there really isn't a single correct solution. The more you can split it up in a meaningful way the cleaner it will look, but this can make it cumbersome if someone doesn't have the same mindset as you and has to scan multiple files so find the part they want to change. I think you did pretty well in this regard.
i didn't do the update each minute because i think it looks better for short times if it moves smooth (although it wouldn't be that hard to implement, just store the current minute as previous minute, if it's less update the progress bar to the current percent which can still be smooth)
i also implemented a reset button which is shown on pause because i think it's a very important feature in a real world app (what if a user changes the time midway or starts a long pause by accident)
and i noticed somehow it's the only one (or one of very few) submissions that persist the current time, selected timer and settings
and it's fully keyboard accessible :)
