code-sandbox{color-scheme:light dark;display:block;width:100%;margin-block-end:1.5em}code-sandbox *,code-sandbox *:before,code-sandbox *:after{box-sizing:border-box}code-sandbox .csb{display:flex;flex-direction:column;width:100%;border:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b));border-radius:var(--csb-radius, .25em);color:var(--csb-color, light-dark(#272727, #f7f7f7));background-color:var(--csb-bg-color, Canvas);font-family:system-ui,sans-serif;overflow:hidden;container-type:inline-size;resize:var(--csb-resize, both)}code-sandbox .csb:fullscreen{height:100%;margin:0;border-radius:0;resize:none}code-sandbox .csb .csb-grid{flex:1;min-height:0;display:grid;grid-template:var( --csb-layout-mobile, "header" auto "html" auto "css" auto "js" auto "result" 1fr "console" auto / 1fr )}@container (min-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{grid-area:header;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5em;padding:.5em .75em;border-block-end:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b));border-start-start-radius:var(--csb-radius, .25em);border-start-end-radius:var(--csb-radius, .25em)}@container (min-width: 768px){code-sandbox .csb .csb-header{padding:.5em 1em}}code-sandbox .csb .csb-controls{display:flex;gap:.25em;flex-wrap:wrap}code-sandbox .csb .csb-btn{font-size:.8125em;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;padding-block:1px;padding-inline:6px;border:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b));border-radius:var(--csb-radius, .25em);cursor:pointer}code-sandbox .csb summary,code-sandbox .csb .csb-label{font-weight:700;font-size:.8125em}code-sandbox .csb summary{cursor:pointer;position:sticky;top:0;background-color:var(--csb-bg-color, Canvas)}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, light-dark(#ddd, #6b6b6b))}code-sandbox .csb details:not(.csb-console) summary{padding:1em}@container (min-width: 768px){code-sandbox .csb details:not(.csb-console)[open]:has(code.lang-js){border-block-end:0}}code-sandbox .csb details.csb-console{grid-area:console;padding:0 .5em .5em;border-block-start:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b))}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{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0;padding:0 .5em .5em}code-sandbox .csb .csb-text,code-sandbox .csb .csb-mirror{grid-area:1 / 1 / 2 / 2;min-height:var(--csb-min-height, 15em)}code-sandbox .csb .csb-text,code-sandbox .csb .csb-mirror,code-sandbox .csb .csb-console-log{border:none;border-radius:var(--csb-radius, .25em);caret-color:#f7f7f7;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;line-height:1.5;overflow:hidden;margin:0;padding:.8125em;resize:none;-moz-tab-size:var(--csb-tab-size, 2);tab-size:var(--csb-tab-size, 2);white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word}code-sandbox .csb .csb-mirror{background:var(--csb-editor-bg, #282c34);color:var(--csb-editor-color, #abb2bf)}code-sandbox .csb .csb-mirror code{display:inline-block;padding:0;font-family:inherit;font-size:1em;letter-spacing:normal;width:100%;-moz-tab-size:var(--csb-tab-size, 2);tab-size:var(--csb-tab-size, 2);white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word}code-sandbox .csb .csb-text{color:transparent;background-color:transparent;outline:none}code-sandbox .csb .csb-console-log{background:var(--csb-console-bg, #282c34);color:var(--csb-console-color, #abb2bf);text-shadow:0 1px rgb(0 0 0 / .3);min-height:3.125em;white-space:pre-wrap;-moz-tab-size:var(--csb-tab-size, 2);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, #ffffff);height:100%;width: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, light-dark(#ddd, #6b6b6b))}@container (min-width: 768px){code-sandbox .csb .csb-result{border-block-start:0;border-inline-start:1px solid var(--csb-border-color, light-dark(#ddd, #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);height:100%;overflow:auto;border-radius:0;border-block-start:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b))}@container (min-width: 768px){code-sandbox .csb .csb-console-result .csb-console-log{border-block-start:0;border-inline-start:1px solid var(--csb-border-color, light-dark(#ddd, #6b6b6b))}}code-sandbox .csb .sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}