code-sandbox{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;width:100%;margin-block-end:1.5em;display:block}@media (prefers-color-scheme:dark){code-sandbox{--lightningcss-light: ;--lightningcss-dark:initial}}code-sandbox *,code-sandbox :before,code-sandbox :after{box-sizing:border-box}code-sandbox .csb{border:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b));border-radius:var(--csb-radius,.25em);width:100%;color:var(--csb-color,var(--lightningcss-light,#272727)var(--lightningcss-dark,#f7f7f7));background-color:var(--csb-bg-color,Canvas);resize:var(--csb-resize,both);flex-direction:column;font-family:system-ui,sans-serif;display:flex;overflow:hidden;container-type:inline-size}code-sandbox .csb:fullscreen{resize:none;border-radius:0;height:100%;margin:0}code-sandbox .csb .csb-grid{grid-template:var(--csb-layout-mobile,"header" auto "html" auto "css" auto "js" auto "result" 1fr "console" auto / 1fr);flex:1;min-height:0;display:grid}@container (width>=768px){code-sandbox .csb .csb-grid{grid-template:var(--csb-layout,"header header" auto "html   result" auto "css    result" auto "js     result" auto ".      result" 1fr "console console" auto / 1fr 1fr)}}code-sandbox .csb .csb-header{border-block-end:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b));border-start-start-radius:var(--csb-radius,.25em);border-start-end-radius:var(--csb-radius,.25em);flex-wrap:wrap;grid-area:header;justify-content:space-between;align-items:center;gap:.5em;padding:.5em .75em;display:flex}@container (width>=768px){code-sandbox .csb .csb-header{padding:.5em 1em}}code-sandbox .csb .csb-controls{flex-wrap:wrap;gap:.25em;display:flex}code-sandbox .csb .csb-btn{appearance:auto;border:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b));border-radius:var(--csb-radius,.25em);cursor:pointer;padding-block:1px;padding-inline:6px;font-size:.8125em}code-sandbox .csb summary,code-sandbox .csb .csb-label{font-size:.8125em;font-weight:700}code-sandbox .csb summary{cursor:pointer;background-color:var(--csb-bg-color,Canvas);position:sticky;top:0}code-sandbox .csb details{max-height:100%;overflow:auto}code-sandbox .csb details:not([open]){flex-shrink:0}code-sandbox .csb details[open]{max-height:var(--csb-max-height,20em)}code-sandbox .csb details:not(.csb-console){border-block-end:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b))}code-sandbox .csb details:not(.csb-console) summary{padding:1em}@container (width>=768px){code-sandbox .csb details:not(.csb-console)[open]:has(code.lang-js){border-block-end:0}}code-sandbox .csb details.csb-console{border-block-start:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b));grid-area:console;padding:0 .5em .5em}code-sandbox .csb details.csb-console summary{padding:1em .5em .5em}code-sandbox .csb details.csb-console[open] summary{padding-bottom:1em}code-sandbox .csb .csb-editor{grid-template-rows:1fr;grid-template-columns:1fr;gap:0;padding:0 .5em .5em;display:grid}code-sandbox .csb .csb-text,code-sandbox .csb .csb-mirror{min-height:var(--csb-min-height,15em);grid-area:1/1/2/2}code-sandbox .csb .csb-text,code-sandbox .csb .csb-mirror,code-sandbox .csb .csb-console-log{border-radius:var(--csb-radius,.25em);caret-color:contrast-color(var(--csb-editor-bg,#282c34));font:inherit;font-family:var(--csb-font-family,ui-monospace, Menlo, Monaco, "Courier New", monospace);font-size:var(--csb-font-size,.875em);height:unset;resize:none;tab-size:var(--csb-tab-size,2);white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;border:none;margin:0;padding:.8125em;line-height:1.5;overflow:hidden}code-sandbox .csb .csb-mirror{background:var(--csb-editor-bg,#282c34);color:var(--csb-editor-color,#abb2bf)}code-sandbox .csb .csb-mirror code{letter-spacing:normal;width:100%;tab-size:var(--csb-tab-size,2);white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;padding:0;font-family:inherit;font-size:1em;display:inline-block}code-sandbox .csb .csb-text{color:#0000;background-color:#0000;outline:none}code-sandbox .csb .csb-console-log{background:var(--csb-console-bg,#282c34);color:var(--csb-console-color,#abb2bf);text-shadow:0 1px #0000004d;white-space:pre-wrap;min-height:3.125em;tab-size:var(--csb-tab-size,2)}code-sandbox .csb .csb-log-warn{color:var(--csb-warning-color,#f9d767)}code-sandbox .csb .csb-log-error{color:var(--csb-error-color,#f9c8c8)}code-sandbox .csb .csb-iframe{background-color:var(--csb-preview-bg,#fff);width:100%;height:100%;min-height:var(--csb-min-height,15em);margin-block-end:0}code-sandbox .csb .csb-result,code-sandbox .csb .csb-console-result{grid-area:result}code-sandbox .csb .csb-result{border-block-start:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b))}@container (width>=768px){code-sandbox .csb .csb-result{border-block-start:0;border-inline-start:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b))}}code-sandbox .csb .csb-console-result .csb-label{display:none}code-sandbox .csb .csb-console-result .csb-console-log{min-height:var(--csb-min-height,15em);border-block-start:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b));border-radius:0;height:100%;overflow:auto}@container (width>=768px){code-sandbox .csb .csb-console-result .csb-console-log{border-block-start:0;border-inline-start:1px solid var(--csb-border-color,var(--lightningcss-light,#ddd)var(--lightningcss-dark,#6b6b6b))}}code-sandbox .csb .sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}