🪚 Improve `@media` rule syntax

@main
public class App: WebApp {
    @AppBuilder public override var body: AppBuilder.Content {
        /// ...
        MainStyle()
    }
}

class MainStyle: Stylesheet {
    @Rules override var rules: Rules.Content {
        MediaRule(.screen.maxWidth(800.px)) {
            Rule(Body.pointer)
                .backgroundColor(.red)
        }
        MediaRule(.screen.maxWidth(1200.px)) {
            Rule(Body.pointer)
                .backgroundColor(.green)
        }
        MediaRule(.screen.aspectRatio(4/3)) {
            Rule(Body.pointer)
                .backgroundColor(.purple)
        }
        MediaRule(!.screen.aspectRatio(4/3)) {
            Rule(Body.pointer)
                .backgroundColor(.black)
        }
    }
}

which represents

@media only screen and (max-width: 800px) {
    background-color: red;
}
@media only screen and (max-width: 1200px) {
    background-color: green;
}
@media only screen and (aspect-ratio: 4/3) {
    background-color: purple;
}
@media not screen and (aspect-ratio: 4/3) {
    background-color: black;
}