*{box-sizing:border-box}html,body{block-size:100%;max-inline-size:100%;overflow:hidden}html{font-size:87.5%}body{display:flex;flex-direction:column}.skip-link{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:100;padding:.75rem 1rem;background:var(--sf-surface-0, #fff);color:var(--sf-on-surface, #111);transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app-status{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:18;max-inline-size:min(28rem,calc(100vw - 2rem));padding:.75rem 1rem;border:1px solid var(--sf-error, #b3261e);border-radius:var(--sf-radius-2, 10px);background:var(--sf-error-container, #ffdad6);color:var(--sf-on-error-container, #410002);box-shadow:0 .5rem 1.5rem #0000003d}.app-status.error{background:var(--sf-error-container, #ffdad6);color:var(--sf-on-error-container, #410002)}.app-status[hidden]{display:none}.app-status__retry,.share-dialog button,.native-field input,.native-field select{min-height:44px;border:1px solid var(--sf-outline-variant, #777);border-radius:var(--sf-radius-1, 6px);background:var(--sf-surface-0, #fff);color:var(--sf-on-surface, #111);padding:.5rem .75rem}.app-status__actions{display:inline-flex;flex-wrap:wrap;gap:.5rem;margin-inline-start:.5rem}@media(max-width:900px){.app-status{inset-block-start:calc(var(--toolbar-height, 56px) + .5rem);inset-block-end:auto;inset-inline:.5rem;max-inline-size:none}}#share_status.error{color:var(--sf-error, #b3261e)}.menu-category button:focus-visible,.menu-section button:focus-visible,.catalog-type-tab:focus-visible,.catalog-search:focus-visible,.catalog-search__clear:focus-visible,.catalog-search-result__button:focus-visible,.editor-tabs button:focus-visible,[role=separator]:focus-visible{outline:2px solid var(--sf-primary, #315da8);outline-offset:2px}.logo,.logo:visited{text-decoration:none;color:var(--sf-primary);text-transform:uppercase;font-weight:600}dialog::backdrop{background:transparent;display:none}:root{--sidebar-width: 280px;--sidebar-gutter: 0;--toolbar-height: 56px;--preview-height: clamp(220px, 48dvh, calc(100% - 360px) );--console-height: 120px}.logo--image{max-width:200px}.toolbar-brand,.toolbar-actions{flex:0 0 auto}.sidebar-title{gap:.375rem}.catalog-search-control{position:relative;flex:1 1 auto;min-inline-size:0}.sidebar-title__actions{flex:0 0 auto}.catalog-search__icon{position:absolute;inset-block-start:50%;inset-inline-start:.625rem;z-index:1;display:flex;align-items:center;color:var(--sf-on-surface, #111);pointer-events:none;transform:translateY(-50%)}.catalog-search__clear{position:absolute;inset-block-start:50%;inset-inline-end:.5rem;z-index:1;inline-size:1.5rem;block-size:1.5rem;margin:0;padding:0;border:0;border-radius:var(--sf-radius-1, 6px);background:transparent;color:var(--sf-on-surface, #111);cursor:pointer;transform:translateY(-50%)}.catalog-search__clear[hidden]{display:none}.catalog-search__clear:hover{background:var(--sf-surface-1, #f5f5f5)}.catalog-search-label{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.catalog-search{display:block;inline-size:100%;min-inline-size:0;block-size:40px;min-block-size:40px;border:1px solid var(--sf-outline-variant, #777);border-radius:var(--sf-radius-1, 6px);background:var(--sf-surface-1, var(--sf-surface-0, #fff));color:var(--sf-on-surface, #111);padding:.375rem 2.5rem;font:inherit}.catalog-tools{display:block}.catalog-tools[hidden],.catalog-search-group-title[hidden],.sidebar-title__actions>[hidden]{display:none!important}.catalog-type-tabs{display:flex;flex-direction:column;gap:.125rem}.catalog-type-tab{display:flex;align-items:center;gap:.75rem;inline-size:100%;min-inline-size:0;min-block-size:44px;overflow:hidden;border:0;border-radius:var(--sf-radius-1, 6px);background:transparent;color:var(--sf-on-surface, #111);padding:.625rem .75rem;font:inherit;font-weight:var(--sf-text--weight, 400);text-align:start;cursor:pointer}.catalog-type-tab:hover{background:var(--sf-surface-1, #f5f5f5);color:var(--sf-on-surface, #111)}.catalog-type-tab[aria-selected=true]{background:var(--sf-surface-transparent-select, var(--sf-surface-container, transparent));color:var(--sf-on-surface, #111);font-weight:var(--sf-weight--medium, 500)}.catalog-type-tab[hidden]{display:none}.catalog-type-tab sf-icon{flex:0 0 auto;color:currentColor}.catalog-type-tab sf-icon .sf-icon{--sf-icon--color: var(--sf-on-surface, #111);--sf-icon--fill: 0;--sf-icon--weight: var(--sf-weight--regular, 400)}.catalog-type-tab[aria-selected=true] sf-icon .sf-icon{--sf-icon--weight: var(--sf-weight--medium, 500)}.catalog-type-tab__label{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-empty{margin:.75rem 0;color:var(--sf-on-surface-variant, #555);text-align:center}.catalog-empty[hidden],#list[hidden],.catalog-search-results[hidden],#list [hidden]{display:none!important}.menu-section{gap:0}.catalog-search-group-title{display:flex;align-items:center;gap:.625rem;margin:0 0 .375rem;padding:.375rem .75rem;color:var(--sf-on-surface, #111);font:inherit;font-weight:600}.catalog-search-section+.catalog-search-section .catalog-search-group-title{margin-block-start:.625rem;padding-block-start:.75rem;border-block-start:1px solid var(--sf-outline-variant, #777)}.catalog-search-group-title sf-icon{flex:0 0 auto;color:var(--sf-on-surface-variant, #666)}.catalog-search-results,.catalog-search-section,.catalog-search-section__list,.catalog-search-category,.catalog-search-category__list{margin:0;padding:0}.catalog-search-section__list,.catalog-search-category__list{list-style:none}.catalog-search-category+.catalog-search-category{margin-block-start:.5rem}.catalog-search-category__title{margin:0;padding:.25rem .75rem;color:var(--sf-on-surface-variant, #666);font:inherit;font-size:1rem;font-weight:600}.catalog-search-result{border-radius:var(--sf-radius-1, 6px)}.catalog-search-result__button{display:block;inline-size:100%;min-block-size:36px;border:1px solid transparent;border-radius:inherit;background:transparent;color:var(--sf-on-surface, #111);padding:.375rem .75rem .375rem 1.5rem;font:inherit;text-align:start;cursor:pointer}.catalog-search-result__button:hover{background:var(--sf-surface-1, #f5f5f5)}.catalog-search-result.is-active .catalog-search-result__button{background:var(--sf-primary-container, var(--sf-surface-1, #f5f5f5));color:var(--sf-on-primary-container, var(--sf-on-surface, #111));font-weight:600}.menu-section__list{padding-inline-start:0}.menu-section__list>.menu-category>div>sf-button .sf-button{padding-inline:.75rem}.menu-section__list>.menu-category[data-direct-example=true]>div>sf-button .sf-button{padding-inline-start:2.25rem}.menu-section__list>.menu-category>div>sf-button .sf-button-text-container{padding-inline:.25rem}.editor-tabs{display:none}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:19;border:0;background:#00000073}.native-field{display:grid;gap:.25rem;font-weight:600}.share-dialog{inline-size:min(42rem,calc(100vw - 2rem));border:1px solid var(--sf-outline-variant, #777);border-radius:var(--sf-radius-2, 10px);background:var(--sf-surface-0, #fff);color:var(--sf-on-surface, #111)}.share-dialog::backdrop{display:block;background:#00000073}.share-dialog__content{display:grid;gap:1rem}.share-dialog__content h2{margin:0}.share-dialog__content input{inline-size:100%;min-height:44px}.share-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.menu-item:not(:hover):not(.is-active)>sf-icon-button .sf-icon-button.visible{display:none}.menu-category:not(:has(.is-active)):not(:hover)>div sf-icon-button .sf-icon-button{display:none}.app{grid-template-columns:var(--sidebar-width, 280px) var(--sidebar-gutter, 4px) 1fr;flex:1 1 auto;transition:none;min-height:0;overflow:hidden}.sidebar-resizer{width:var(--sidebar-gutter, 0)}.modal{background-color:var(--sf-surface-0)}.modal--wrap{background-color:var(--sf-surface-overlay);color:var(--sf-surface-inverse);-moz-tab-size:var(--sf-text--size-1);tab-size:var(--sf-text--size-1)}.editors{display:grid;grid-template-columns:var(--col-html, 1fr) var(--col-css, 1fr) var(--col-js, 1fr);height:auto;min-height:240px}.code-section{position:relative;min-height:240px}.code-section[hidden],.horizontal-resizer[hidden],.console[hidden],.code-loading[hidden]{display:none!important}.code-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--sf-surface-0, #fff);color:var(--sf-on-surface-variant, var(--sf-on-surface, #111));font-size:var(--sf-text--size)}@media(min-width:901px)and (max-width:1199px){.editors{grid-template-columns:repeat(2,minmax(0,1fr))}.editor[data-lang=javascript]{grid-column:1 / -1}}.editor-child{border-radius:var(--sf-radius-1)}.editor.pfull{top:0;right:0;bottom:0;left:0;min-height:100vh;background:var(--sf-surface-0)}.editor.pfull .editor-child{background:var(--sf-surface-1, var(--sf-surface-0))}.editor textarea{height:calc(40vh - 60px)}.preview{border-top:1px solid var(--sf-outline-variant);height:var(--preview-height, clamp(220px, 48dvh, calc(100% - 360px) ));min-height:220px;flex:0 0 auto}.main-section.is-code-hidden .preview{height:auto;min-height:0;flex:1 1 auto}.main-section.is-code-hidden .preview-main{min-height:0}.preview-code-toggle[aria-pressed=true] .sf-icon-button,#code_toggle[aria-pressed=true] .sf-icon-button{background:var(--sf-surface-transparent-select, var(--sf-surface-container, transparent))}.preview-main{border-radius:var(--sf-radius-1)}.console{border-top:1px dashed var(--sf-outline-variant);height:var(--console-height, 120px);min-height:120px;flex:0 0 auto;overflow:auto;font-family:ui-monospace,monospace;font-size:12px}.console-logs-wrap{overflow:auto}.console-logs{flex:1}.console.collapsed{height:auto;min-height:0;overflow:visible}.console.collapsed .console-logs-wrap{display:none}.console--header{inline-size:100%;color:var(--sf-on-surface, #111)}.console-wrap{border-radius:var(--sf-radius-1)}.editor{min-height:220px;min-width:0}.editor-monaco{block-size:100%;min-block-size:0;overflow:hidden}.menu-category__title{text-transform:capitalize;font-weight:var(--sf-text--weight, 400);letter-spacing:.02em;color:var(--sf-on-surface, #111)}.menu-category>div>sf-button .sf-button-text-container,.menu-item .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-surface, #111);--sf-button-text-container--font-weight: var(--sf-weight--regular, 400);text-align:start}.menu-category>div>sf-button .sf-button,.menu-item .sf-button{text-align:start}.menu-category>div>sf-button .sf-icon,.menu-item .sf-icon{--sf-icon--color: var(--sf-on-surface, #111);--sf-icon--weight: var(--sf-weight--regular, 400)}.menu-category:has(.menu-item.is-active)>div>sf-button .sf-button-text-container,.menu-item.is-active .sf-button-text-container{--sf-button-text-container--font-weight: var(--sf-weight--medium, 500)}.menu-category:has(.menu-item.is-active)>div>sf-button .sf-icon,.menu-item.is-active .sf-icon{--sf-icon--weight: var(--sf-weight--medium, 500)}.menu-item.is-active{background:var(--sf-surface-transparent-select, var(--sf-surface-container, transparent))}.menu-category[data-direct-example=true].is-active>div{border-radius:var(--sf-radius-1, 6px);background:var(--sf-surface-transparent-select, var(--sf-surface-container, transparent))}.menu-category[data-direct-example=true].is-active>div>sf-button .sf-button-text-container{--sf-button-text-container--font-weight: var(--sf-weight--medium, 500)}.sidebar-scroll{bottom:4px;right:4px;transition:opacity .2s ease}.sidebar-scroll.visible{pointer-events:auto}.editor__wrap .source,.editor__wrap textarea{top:0;right:0;bottom:0;left:0}.editor__wrap pre.editor__highlight{pointer-events:none}.editor__highlight code{display:block;color:inherit}.editor__wrap textarea{background:transparent;color:transparent;caret-color:var(--sf-surface-inverse);-moz-tab-size:var(--sf-text--size-1);tab-size:var(--sf-text--size-1);font-family:var(--sf-mono);padding:0 var(--sf-space-1) var(--sf-space-1);font-size:var(--sf-text--size);line-height:var(--sf-text--height);border:0;resize:none}.editor.collapsed .editor__wrap{display:none}.editor.collapsed{justify-self:start}.editor.collapsed .editor-child{width:fit-content}.editor.collapsed .editor-child--head{justify-content:space-between}.pfull{min-height:100vh}.main-section{min-width:0;min-height:0;overflow:hidden}.is-sidebar-collapsed{grid-template-columns:0 var(--sidebar-gutter, 4px) 1fr}body.is-resizing,body.is-resizing-x,body.is-resizing-y{-webkit-user-select:none;user-select:none}.horizontal-resizer-button{left:50%;translate:-50% 0}.horizontal-resizer-button:focus-visible{outline:2px solid var(--sf-primary)}@media(max-width:900px){.menu-section__list>.menu-category[data-direct-example=true]>div>sf-button .sf-button{padding-inline-start:2rem}.toolbar{flex:0 0 auto;min-height:56px;padding:.25rem;gap:.25rem;overflow:visible}.toolbar-brand{flex:0 0 auto;min-width:0}.toolbar-actions{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:.25rem;justify-content:flex-start;overflow:visible}.toolbar-actions .sf-icon-button:focus-visible{outline:2px solid var(--sf-primary, #315da8);outline-offset:2px}.toolbar sf-icon-button,.toolbar button,.editor-child--head sf-icon-button,.editor-child--head button,.preview--header sf-icon-button,.preview--header button,.console--header,.editor-tabs button{min-width:44px;min-height:44px}.logo--image{width:92px;max-width:92px}.editor-tabs{display:flex;gap:.25rem;padding:.5rem .5rem 0}.editor-tabs button{flex:1;border:1px solid var(--sf-outline-variant, #777);border-radius:var(--sf-radius-1, 6px);background:var(--sf-surface-0, #fff);color:var(--sf-on-surface, #111)}.editor-tabs button[aria-selected=true]{background:var(--sf-primary-container, #dde7ff);color:var(--sf-on-primary-container, #102047)}.editors{display:block;flex:0 0 auto;height:380px;min-height:320px;padding-block-start:.5rem}.editor{display:none;min-height:0;height:100%}.editor[data-mobile-active=true]{display:flex}.editor.collapsed{display:none}.app{grid-template-columns:1fr;min-height:0}.sidebar{position:fixed;top:var(--toolbar-height, 56px);bottom:0;left:0;width:min(86vw,320px);z-index:20;transform:translate(-100%);transition:transform .22s ease;visibility:hidden;pointer-events:none;background:var(--sf-surface-0, #fff)}.sidebar[data-open=true]{transform:translate(0);visibility:visible;pointer-events:auto}.sidebar-resizer{display:none}.sidebar sf-button,.sidebar sf-icon-button,.sidebar button{min-height:44px}.catalog-search{block-size:44px;min-block-size:44px}.preview{height:min(42vh,420px);min-height:240px}.console{height:120px;min-height:96px}.main-section{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}}