.framework-view-section{display:flex;flex-direction:column;justify-content:center;& p,h1{text-wrap:balance;color:#dcdcdc;text-align:center;margin-bottom:.5rem}>*{width:100%}}.framework-viewer{display:block;position:relative;box-sizing:border-box;margin-inline:auto;-webkit-user-select:none;-ms-user-select:none;user-select:none;max-height:60vh;aspect-ratio:1 / 1;outline:2px solid var(--active-border-color);border-radius:6px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;.framework-viewer-placeholder{position:relative;height:100%;width:100%;.placeholder-img{position:absolute;top:0;left:0;height:100%;width:100%;filter:brightness(20%);transform:scale(.99);object-fit:cover}.loading-text{position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);color:#fff}}}.loading-text:after{content:"";display:inline-block;width:.5em;text-align:left;animation:ellipsis 1.5s infinite steps(3,end)}@keyframes ellipsis{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}.framework-tabs{display:flex;gap:.25rem;margin-inline:auto;justify-content:center;align-items:center}.framework-btn{border:none;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid transparent;border-radius:5px 5px 0 0;padding:.25rem;font-weight:700;span{padding-inline:.5rem}&.active{border-top:2px solid var(--active-border-color);border-left:2px solid var(--active-border-color);border-right:2px solid var(--active-border-color);z-index:99}.framework-logo{height:20px;margin-inline:auto}&.react-tab{background:var(--react-gradient);color:#efefef}&.solid-tab{background:var(--solid-gradient);color:#2b2b2b}&.vue-tab{background:var(--vue-gradient);color:#2b2b2b}&.svelte-tab{background:var(--svelte-gradient);color:#efefef}}@media(height<=500px),(width<=500px){.framework-btn{.framework-logo{height:16px}span{display:none}}}#solid-view{position:absolute;top:0;left:0;display:block;height:100%;width:100%}#solid-canvas{width:100%;height:100%;border-radius:6px;overflow:hidden;border:2px solid var(--solid-color)}#react-view{position:absolute;top:0;left:0;display:block;height:100%;width:100%}#react-canvas{width:100%;height:100%;border-radius:6px;overflow:hidden;border:2px solid var(--react-color)}#vue-view{position:absolute;top:0;left:0;display:block;height:100%;width:100%}#vue-canvas{width:100%;height:100%;border-radius:6px;overflow:hidden;border:2px solid var(--vue-color)}#svelte-view.svelte-1f88bu2{position:absolute;top:0;left:0;display:block;height:100%;width:100%}#svelte-canvas.svelte-1f88bu2{width:100%;height:100%;border-radius:6px;overflow:hidden;border:2px solid var(--svelte-color)}*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--react-color: #0a7ea5;--react-gradient: linear-gradient(0deg, rgba(10, 126, 165, 1) 05%, rgba(19, 200, 232, 1) 100%);--solid-color: #8ac0e7;--solid-gradient: linear-gradient(0deg, rgba(138, 192, 231, 1) 05%, rgba(207, 239, 255, 1) 100%);--vue-color: #41b883;--vue-gradient: linear-gradient(0deg, rgba(65, 184, 131, 1) 05%, rgba(125, 255, 157, 1) 100%);--svelte-color: #ff3e00;--svelte-gradient: linear-gradient(0deg, rgba(255, 62, 0, 1) 05%, rgba(255, 147, 46, 1) 100%);--active-border-color: gainsboro;--nav-height: 4rem}html{background:#000}*{box-sizing:border-box}h1{font-size:x-large}h2{font-size:large}.code-view-section-container{max-width:100vw}.code-view-section{display:flex;flex-direction:column;justify-content:center;min-width:30ch;width:95%;max-width:960px;height:100%;padding:.25rem;.code-view-text{display:flex;flex-direction:column;gap:.5rem;color:#dcdcdc;margin-bottom:1rem;& p{text-wrap:pretty}}@media(orientation:landscape){margin-right:auto}@media(orientation:portrait){margin-inline:auto}}.code-viewer{height:50vh;overflow:scroll;color:#dcdcdc;background-color:#17191e;font-size:small;padding:.5rem;border-radius:6px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;@media(orientation:portrait){outline:2px solid var(--active-border-color)}>*{display:none}>.is-visible{display:block!important}&:has(>.react-view.is-visible){border:2px solid var(--react-color)}&:has(>.solid-view.is-visible){border:2px solid var(--solid-color)}&:has(>.vue-view.is-visible){border:2px solid var(--vue-color)}&:has(>.svelte-view.is-visible){border:2px solid var(--svelte-color)}}.framework-tab-container{@media(orientation:landscape){display:none!important}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs-comment,.hljs-quote{color:#7285b7}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ff9da4}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#ffc58f}.hljs-attribute{color:#ffeead}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#d1f1a9}.hljs-section,.hljs-title{color:#bbdaff}.hljs-keyword,.hljs-selector-tag{color:#ebbbff}.hljs{background:#002451;color:#fff}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}header{height:var(--nav-height);width:100%;position:absolute;top:0;left:0}nav{height:100%;color:#dcdcdc;background-color:#00000054;box-shadow:#00000029 0 1px 4px;>ul{height:100%;display:flex;align-items:center;justify-content:space-between;padding-inline:2rem;li{display:flex;justify-content:center;align-items:center;gap:.2rem}a{cursor:pointer;user-select:none;display:flex;justify-content:center;align-items:center;gap:.2rem}}.logo{height:24px}.github-logo{color:#fff;height:18px}}.layouts{height:auto;min-height:100vh;background:radial-gradient(circle,#293d9e,#7b00ff);@media(orientation:portrait){display:grid;grid-template-columns:repeat(1,1fr)}@media(orientation:landscape){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}>*:nth-child(1)>*{padding:1rem;padding-top:calc(var(--nav-height) + .5rem)}>*:nth-child(2)>*{padding:1rem;padding-top:calc(var(--nav-height) + .5rem);@media(orientation:portrait){background:linear-gradient(0deg,#060814,#fff0),linear-gradient(0deg,#21307a 50%,#fff0 95%)}@media(orientation:landscape){background:linear-gradient(90deg,#fff0,#111636),linear-gradient(90deg,#fff0,#21307a 50% 75%)}}}html,body{font-family:system-ui;margin:0;padding:0;height:100%}main[data-astro-cid-j7pv25f6]{height:100%}