{"version":"1.0","type":"rich","title":"`prefers-color-scheme`","description":"This example demonstrates several CSS techniques for responsive and adaptive web design, including the `prefers-color-scheme` media query for dark mode, `@font-face` for embedding a custom webfont, and nested media queries for serving different background images based on viewport width and device pixel ratio. It also shows a method for canceling parent padding using negative margins and `calc()`, alongside Stylus mixins like `sourceorder()` and `vcenter()` for table-based layout and vertical centering. The code references Codepen examples and MDN documentation for these CSS APIs.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-e2b89babf490a4d0fee2?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}