@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap");.developer{padding-bottom:144px}.developer code{font-family:Roboto Mono,monospace}.developer p code{padding:4px 8px;border-radius:var(--border-radius-small);background:var(--color-component);font-size:15px;color:var(--color-text)}.developer .text-preset-body-medium{font-weight:var(--font-weight-regular)}.developer a:not([class]){color:var(--color-highlight)}.developer .picture{max-width:100%}.developer__header{position:relative}.developer__header-content{position:relative;padding-top:80px;padding-bottom:160px}.developer__canvas{position:absolute;top:0}.developer__example{position:relative;width:100%;max-width:640px}.developer__title{margin-top:144px;margin-bottom:16px}.developer__code{margin-top:-80px;padding:16px;counter-reset:line;word-wrap:break-word}.developer__code code{font-size:14px;font-weight:400}.developer__code .line{position:relative;display:block;padding-left:24px}.developer__code .line:before{content:counter(line);position:absolute;left:0;color:var(--color-text-light);counter-increment:line}.developer__console{position:absolute;z-index:10;bottom:-128px;left:32px;width:300px;min-height:140px;padding:16px;font-family:Roboto Mono,monospace;font-size:15px;font-weight:500;color:var(--color-white)}.developer__image{padding:10px}.developer__image img{border-radius:var(--border-radius-small)}.developer-packages{display:grid;grid-template-columns:repeat(1,1fr);grid-gap:16px}.developer-package{--mask-size:32px;width:100%;padding:16px;transition:var(--transition-fast)}.developer-package:hover{transform:scale(1.05)}.developer-package:active{transform:scale(1)}.developer-package__link{color:var(--color-highlight)}.developer-device{position:absolute;z-index:20;right:16px;bottom:-64px;display:flex;flex-direction:column;width:128px;height:128px;padding:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.developer-device,.developer-device>*{transition:var(--transition-fast)}.developer-device:hover{transform:scale(1.05)}.developer-device:active{transform:scale(1)}.developer-device.is-inactive{filter:grayscale(1)}.developer-device.is-inactive>*{opacity:0.5}.developer-device__icon{--mask-size:var(--icon-size-xxlarge)}.developer-device__color{position:absolute;top:10px;right:10px;width:22px;height:22px;border:3px solid var(--color-white-A50);border-radius:50%;background:purple}.developer-device__title{margin-top:auto}@media (min-width:576px){.developer__example{width:80%}.developer__console{right:-100px;bottom:-100px;left:auto}.developer-packages{grid-template-columns:repeat(2,1fr);grid-gap:32px}.developer-device{top:-64px;right:-64px;bottom:auto;left:auto}}@media (min-width:768px){.developer__header{min-height:max(700px,min(40vw,80vh));max-height:80vh}.developer__header-content{padding-top:160px;padding-bottom:160px}.developer-packages{grid-template-columns:repeat(3,1fr);grid-gap:32px}}@media (min-width:992px){.developer-packages{grid-template-columns:repeat(5,1fr);grid-gap:32px}}