@layer page{:root{--theme-switcher-hitbox-padding: 13px 12px 8px;--sidebar-width: 200px;--playground-code-background: #080C10;--sidebar-box-shadow: none;--playground-page-background: #080C10;--playground-border-color: #222222;--playground-border: 1px solid var(--playground-border-color);--panel-divider-color: var(--playground-border-color);--topbar-logo-size: 20px;--topbar-logo-valign: -5px;--topbar-height: 45px;--topbar-site-name-font-size: 13px;--topbar-site-name-distance: 10px;--topbar-site-name-color: var(--white);--topbar-menu-distance: 10px;--topbar-logo-margin: 1px 0px 0px 16px;--topbar-icon-size: 16px;--topbar-background-color: var(--playground-code-background);--topbar-menu-item-spacing: 3px;--topbar-menu-item-padding: 2px 2px;--topbar-menu-item-font-size: var(--12px);--topbar-menu-item-color: var(--white-20);--topbar-menu-item-hover-color: var(--white-60);--topbar-menu-item-active-color: var(--white-100);--topbar-menu-item-font-weight: normal;--topbar-menu-item-active-font-weight: bold;--topbar-border-bottom: 1px solid #232323}ui-panels::part(panels){background-color:var(--playground-code-background)}topbar,topbar.fluid{position:static}layout#playground{flex-direction:column;height:100dvh!important}.navigation{ui-panel::part(handle){opacity:.1}ui-panel::part(handle):hover{opacity:.3}&::part(panels){background-color:var(--ui-background)}}sidebar{flex:0 0 auto;height:100%;margin:0;border-right:var(--playground-border)!important;ui-button{margin:.5rem}ui-menu{font-size:13px}nav-menu{margin-top:0rem;--nav-menu-title-padding: 5px 0px 5px;--nav-menu-title-font-size: 11px;--nav-menu-title-icon-font-size: 13px;--nav-menu-title-icon-width: 1rem;--nav-menu-title-icon-distance: 9px;--nav-menu-item-font-size: 12px;--nav-menu-item-spacing: 5px;--nav-menu-content-icon-indent-distance: 7px;--nav-menu-sub-content-indent-distance: 0px;--nav-menu-menu-item-font-size: 12px;--nav-menu-menu-item-spacing: 6px;--nav-menu-sub-title-font-size: 10px;--nav-menu-sub-title-padding: 7px 0px 4px;--nav-menu-selected-vertical-padding: 0px;--nav-menu-selected-horizontal-padding: 6px;&::part(search){margin:.75rem 1rem -.25rem}&::part(item-title){text-transform:uppercase;letter-spacing:.03em;position:sticky;top:-9px;background:var(--black);padding-top:var(--spacing);z-index:2}&::part(content){padding-left:9px;border-left:1px solid var(--white-10);padding-top:4px;white-space:nowrap}}}page{display:flex;flex-direction:row;flex-grow:1;height:calc(100vh - var(--topbar-height));background:var(--playground-page-background)}page learn-example,page code-playground{display:contents}learn-example{pageContent{display:block;container:pageContent / inline-size;margin:0 auto;h2{font-size:20px;margin:0rem 0rem 1rem}p,li{color:var(--text-color);transition:var(--easing)}@container pageContent (max-width: 400px){p,li{font-size:14px}}}}playground{playground-preview{margin:0rem;background-color:var(--page-background)}playground-preview::part(preview-toolbar){font-size:11px;text-transform:uppercase;font-weight:700;background:var(--subtle-gradient);box-shadow:var(--subtle-bottom-lip-shadow)}playground-preview::part(preview-loading-indicator){--mdc-theme-primary: #49B1D2;height:4px;overflow:hidden;top:-26px;width:71px;left:22px}playground-file-editor::part(dialog){display:none!important;opacity:0}}playground-ide{height:100%}}html.light{--playground-page-background: #FFFFFF;--topbar-background-color: #000000;--button-transparent-inverted-background-color: var(--black-80);--button-transparent-inverted-hover-background-color: var(--black-90);--button-transparent-inverted-pressed-background-color: var(--black-80);--ec-frm-edActTabFg: var(--black-80);figcaption .header{background-color:var(--angled-gradient)}learn-example,::part(playground){--playground-code-background: #F7F7F7;--playground-border: var(--border);--playground-button-background-color: #333333;--playground-header-background: linear-gradient(rgba(255, 255, 255, .04), rgb(236 236 236 / 50%));--playground-header-border: 1px solid rgba(221, 221, 221, .05);--playground-header-color: rgba(255, 255, 255, .8);--playground-header-box-shadow: 0px -2px 5px -3px rgba(0, 0, 0, .4) inset;--playground-code-comment-color: #AAAAAA;--learn-panel-background: linear-gradient(rgb(229 229 229), rgb(253 253 253) 100px, oklch(.92 .01 0))}::part(panel){--panel-label-background: linear-gradient(rgba(255, 255, 255, .04), rgb(236 236 236 / 50%));--panel-label-color: var(--black-70);--panel-label-box-shadow: 0px -2px 5px -3px rgba(0, 0, 0, .3) inset;--panel-label-active-color: var(--black-90);--panel-label-active-background: rgb(0 0 0 / 3%);--panel-label-minimized-background: linear-gradient(rgba(0, 0, 0, .02), rgb(15 17 22 / 30%));--panel-label-minimized-color: rgba(0, 0, 0, .1)}code-playground{--playground-code-keyword-color: #666;--code-purple: #8B1FFF;--code-grey: #000;--code-default: #777777;--primary-text-color: #009FDA;--code-blue: var(--primary-text-color);--code-red: #d90f0f;--code-white: #a1a1a1;--playground-code-background: #080C10;--playground-code-comment-color: #444444;--playground-code-linenumber-color: #cfcfcf}}@media only screen and (max-width: 767px){sidebar{display:none}layout#playground{flex-direction:column-reverse}topbar,topbar.fluid{position:static!important}:root{--topbar-logo-margin: 1px 13px 0px 13px}}