A few years ago, a group of engineers said about rethinking Chromium support for HTML, CSS, and graphics, which led to an effort called renderingNG, an ambitious refactoring of Chromium's rendering engine. This work has now largely landed, and it's enabling a major evolution in Web User Experience design. To tell us more, I'll hand things over to you now. Thank you. Everything we've talked about today comes back to the user experience. Privacy, measurement, next-gen web capabilities, they all work together to create better experiences that align with our vision for the web, while giving developers the tools and capabilities they need to build them. So today, I'm excited to share a ton of updates and changes coming down the pipeline for UI styling and dev tools. First, let's talk about responsive design and how it's evolving. Responsive design is no longer just about making sure an interface looks good on both desktop and mobile devices. Developers now have the tools to really create customized user experiences based on personalized user preferences and a component-driven architecture model. We're calling this the new responsive, and it includes. Being responsive to the user with user preference queries and modalities like dark mode and prefers reduced motion. Being responsive to new form factors like foldable devices, which allow for multi-display functionality. And being responsive to other components on the page with container queries. This is a feature that's been highly requested by developers. We've been working with the CSS Working Group to spec this feature and have been able to unlock the implementation through recent changes in the Chrome rendering engine. The new container query spec lets you access a parent elements width to make styling decisions for its children. You can even nest container queries and create named queries for easier access and organization. Let's take a look at an example. Here I have a responsive add to cart button that I can place anywhere in the container. Then when I put it inside of this product card, which is also a container, I can query the product card itself to re-style the already responsive button and shift it from being center aligned to left aligned. This might look simple on the surface, but it's something that wasn't previously possible without a lot of heavy scripting which would significantly slow down your page. We're working with the open source community to provide a polyfill for container queries as we build the feature into the platform. Using container queries makes your interface as much more flexible. Components own all of their individual responsive styles, write where they are, and don't rely on the global viewport to adjust styles. This is a huge paradigm shift for component-based developments, and we're excited to see how you make the most of this new feature. If you want to try it out, container queries are now available for testing behind a flag in Chrome Canary. And because of this big shift, we've been working hard to support you by providing dev tools that allow you to debug and style with container queries as the feature launches. Here you can see that dev tools is pointing out where the container for the child is and highlighting the styles that are being applied by it. Speaking of responsive dev tools, we released several new tools this year for better layout debugging. Layout tooling for Grid now allows you to add names to specific grid lines and also shows you the size of your grid areas. I also love the dynamic new tools for Flexbox and Grid. These let you actually see what different property values do on the page and give you the ability to easily change layout rules with the click of a button. These new dev tools are designed to make CSS layout easier to visualize and understand, which frees up more time to build new features for your users and less time looking up the differences between justify and align. Another way we're helping simplify the process is by launching Web.dev Patterns, a collection of off-the-shelf UI patterns you can use in your web projects. To help you quickly get started with building the base of your UI, we've added layout patterns for everything from large full-page spreads and card sets to smaller layouts that can live within those larger layouts such as the cards themselves. All of these patterns use CSS Grid, Flexbox, or Container queries to showcase how quickly you can pick up these tools and build interfaces from the ground up. We're also partnering with Jeremy Keith of ClearLift to launch Learn Responsive Design on Web.dev. This is a free online course with everything you need to know about designing for the new responsive web of today. You'll learn about theming, art direction, logical properties for intrationalization, utilizing preference queries, and so much more. Today we're launching the first few course modules at Web.dev slash Learn slash design with more to come in the following weeks. We're also updating our Learn CSS course with six new modules. Learn CSS is another free evergreen course in reference on Web.dev where you can level up your CSS knowledge and test your skills. We launched the first 24 modules at Google I.O this year and now we're introducing lists, backgrounds, transitions, text, and typography, media queries and more. Be sure to check out those new modules and dive in whenever you're ready. We're also working on rolling out some new features in CSS. In addition to Container queries, our team has been thinking about how to introduce scope styles and cascade layers. They're not ready just yet and we look forward to working with you and the web community over the next few months to push them forward. We do have a particularly fun new API that's ready for exploration and that's scroll timeline. Previously you could create CSS animations ahead a time basis and moved over a length of time. Scroll timeline lets you set scroll based offsets and timings for animations instead. That means you can set an element to animate as you scroll down or across a page. Pretty neat. You can explore scroll timeline using the experimental web platform features flag in Canary. We have another exciting addition that recently reached its first public working draft and that's CSS nesting. Nesting is a syntactic sugar that brings one of the most popular features of CSS preprocessors to the web, stacking your styles for a cleaner developer experience. While the nesting spec will let you keep your styles tidier and more encapsulated, we recommend that you don't go more than three layers deep to ensure the best performance. We've also launched the size adjust property for typography. This is particularly useful for preventing cumulative layout shift for core web titles as you can adjust the default font to better match your web font. This causes less jank as the web font loads in. And last but not least, accent color just landed in chromium and Firefox stable. Accent color is a one line CSS superpower that gives your form controls like checkboxes and radios a theme color to match your brand. We get a lot of feature requests from developers and users alike, but one is a clear favorite especially for those of you who love to browse the web at night. Dark mode is a popular feature we're really excited to build on and not just because you ask for it, but because its impact extends beyond the user interface. Dark themes have shown measurable battery life savings over their light theme counterparts on OLED devices. In our lab study with a single pixel six device, we found an indication that at 60% brightness, dark themes used 11% less power than light themes for OLED screens. And it's a feature that users love too. And Twitter released the first preview version of their new Twitter progressive web app. Everyone said, wow, it's new and fast, where's dark mode? So they surveyed users on what they needed to add and users said three things. Dark mode and emoji picker and more dark mode. So it's kind of a big deal to a lot of very vocal users. To create a dark theme, we recommend using CSS custom properties and they prefer color scheme media feature, which is supported in all evergreen browsers. This lets you swap theme colors in and out based on what your users prefer, a core part of our new responsive framework and set of goals. If you need help getting dark mode set up the way you like it, there's some excellent new guidance from the material design team by their research on building beautiful dark themes. This includes how to adjust depth by using lightness instead of shadows, how to adjust color vibrancy to reduce visual vibration and more. But to make it even easier for your team, Chrome is working on a machine learning-aided auto dark algorithm feature. This feature will include auto darkened websites along with a few affordances to opt out of the auto dark functionality on a more granular level. We're still in the early stages of feature development and we need your help to get it right. To try it out now, you can open the DevTools rendering panel in Chrome Canary and enable auto dark mode emulation. Check out the link to learn more and to give us your thoughts. Now I'll pass back to Ben one last time. Thanks, Yuna. You know, we've seen a lot of change in the web over the past year and we're still more optimistic than ever about the future of the platform across the areas we just talked about and more. In the years ahead, you can expect to see us continue to push hard to make the web more private and powerful and to provide developers with better tools and guidance to create top quality experiences for people all over the world.