:root{--app-background:#0b0b0b;--app-foreground:#ccc;--island-background:#1e1e1e;--island-radius:12px;--island-gap:8px;--aside-sections-background:var(--island-background);--aside-sections-border:transparent;--aside-bar-background:var(--island-background);--aside-bar-foreground:#ccc;--aside-bar-border:transparent;--grid-background:var(--app-background);--button-foreground:#fff;--button-foreground-active:#fff;--button-icon-opacity:.45;--button-background-hover:#ffffff0f;--button-background-active:#ffffff1a;--button-title-background:#2a2a2a;--button-title-foreground:#e1e4e8;--button-title-border:#2a2a2a;--input-background:#2a2a2a;--input-foreground:#e1e4e8;--input-border:#2a2a2a;--log-log:#cdeeb5;--log-info:#b5b5ee;--log-error:#e3bdbd;--log-warn:#f7e7a1;--mono-font:"Cascadia Code PL", "Menlo", "Monaco", "Courier New", monospace}[data-theme=vs]{--app-background:#d8d8d8;--app-foreground:#000;--island-background:#fff;--aside-sections-background:#2c2c2c;--aside-bar-background:var(--island-background);--aside-bar-foreground:#616161;--gutter-background:var(--app-background);--button-foreground:#fff;--button-foreground-active:#fff;--button-icon-opacity:.45;--button-background-hover:#ffffff14;--button-background-active:#ffffff24;--input-background:#f3f3f3;--input-foreground:#616161;--input-border:#e4e4e4;--log-log:#0ec508;--log-info:#1f4ce2;--log-error:#db0e0e;--log-warn:#cba808}[data-theme=hc-black]{--app-background:#000;--app-foreground:#fff;--island-background:#000;--aside-sections-background:var(--island-background);--aside-sections-border:#fff;--aside-bar-background:var(--island-background);--aside-bar-foreground:#fff;--aside-bar-border:#fff;--button-foreground:#fff;--button-icon-opacity:1;--button-background-hover:#ffffff1f;--button-background-active:#fff3;--button-title-background:#fff;--button-title-foreground:#000;--button-title-border:#000;--input-background:#000;--input-foreground:#fff;--input-border:#fff}[data-theme=hc-light]{--app-background:#e6e6e6;--app-foreground:#000;--island-background:#fff;--aside-sections-background:var(--island-background);--aside-sections-border:#0f4a85;--aside-bar-background:var(--island-background);--aside-bar-foreground:#000;--aside-bar-border:#0f4a85;--gutter-background:var(--app-background);--button-foreground:#000;--button-foreground-active:#000;--button-icon-opacity:.55;--button-background-hover:#0f4a8514;--button-background-active:#0f4a8529;--button-title-background:#000;--button-title-foreground:#fff;--button-title-border:#fff;--input-background:#fff;--input-foreground:#000;--input-border:#000;--log-log:#079a02;--log-info:#0635d2;--log-error:#df0000;--log-warn:#b29100}[data-theme=mosqueta-dark]{--app-background:#10131b;--app-foreground:#ccc;--island-background:#1e2530;--aside-sections-background:var(--island-background);--aside-sections-border:transparent;--aside-bar-background:var(--island-background);--aside-bar-foreground:#ccc;--aside-bar-border:transparent;--button-foreground:#fff;--button-foreground-active:#ff89ef;--button-icon-opacity:.4;--button-border-active:#40142c;--button-background-hover:#2a2030;--button-background-active:#40142c;--button-title-background:#171a25;--button-title-foreground:#e1e4e8;--button-title-border:#333;--input-background:#171a25;--input-foreground:#ff89ef;--input-border:#171a25}[data-theme=dracula]{--app-background:#12141c;--app-foreground:#f8f8f2;--island-background:#20232c;--aside-sections-background:#282a36;--aside-sections-border:transparent;--aside-bar-background:var(--island-background);--aside-bar-foreground:#fff;--aside-bar-border:transparent;--button-foreground:#fff;--button-foreground-active:#fff;--button-icon-opacity:.45;--button-border-active:#40142c;--button-background-hover:#353646;--button-background-active:#40142c;--button-title-background:#171a25;--button-title-foreground:#e1e4e8;--button-title-border:#333;--input-background:#454659;--input-foreground:#fff;--input-border:#171a25}[data-theme=one-dark-pro]{--app-background:#12141a;--app-foreground:#abb2bf;--island-background:#21262c;--aside-sections-background:#282b34;--aside-sections-border:transparent;--aside-bar-background:var(--island-background);--aside-bar-foreground:#fff;--aside-bar-border:transparent;--button-foreground:#fff;--button-foreground-active:#fff;--button-icon-opacity:.45;--button-border-active:#40142c;--button-background-hover:#32363e;--button-background-active:#40142c;--button-title-background:#171a25;--button-title-foreground:#e1e4e8;--button-title-border:#333;--input-background:#404554;--input-foreground:#fff;--input-border:#171a25}body{background-color:var(--app-background);color:var(--app-foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100dvh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;line-height:1.42857;position:fixed;overflow:hidden}*{box-sizing:border-box}:before,:after{box-sizing:inherit}a{color:#41a0ff;text-decoration:none}a:hover{text-decoration:underline}fieldset{border:0;margin:0;padding:0}select{background-color:var(--input-background);color:var(--input-foreground);border:1px solid var(--input-border);border-radius:8px;width:100%;height:32px;margin-top:8px;padding:2px 8px}[hidden]{display:none!important}.icon{fill:none;stroke:currentColor;flex-shrink:0;width:22px;height:22px;overflow:visible}#app{height:100%;min-height:0;padding:var(--island-gap);gap:var(--island-gap);background:var(--app-background);grid-template-rows:minmax(0,1fr);grid-template-columns:auto minmax(0,1fr);display:grid}#app #editor,#app aside{min-width:0;height:100%;min-height:0}iframe{background:var(--island-background);border:0;width:100%;height:100%;display:block}@font-face{font-family:Cascadia Code PL;src:url(/assets/CascadiaCodePL-cKdjcb8w.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Cascadia Code PL;src:url(/assets/CascadiaCodePLItalic-CHVS92sg.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}@keyframes spin{0%{transform:rotate(-360deg)}}.grid{background-color:#0000;height:100%;min-height:0;display:grid}[data-layout=default] .grid,[data-layout=layout-2] .grid{--mosaic-gutter:8px;--mosaic-x1:calc(var(--mosaic-top,.5) * (100% - var(--mosaic-gutter)));--mosaic-x2:calc(var(--mosaic-bottom,.5) * (100% - var(--mosaic-gutter)));--mosaic-y1:calc(var(--mosaic-left,.5) * (100% - var(--mosaic-gutter)));--mosaic-y2:calc(var(--mosaic-right,.5) * (100% - var(--mosaic-gutter)));display:block;position:relative;overflow:hidden}:is([data-layout=default] .grid,[data-layout=layout-2] .grid) #markup,:is([data-layout=default] .grid,[data-layout=layout-2] .grid) #script,:is([data-layout=default] .grid,[data-layout=layout-2] .grid) #style,:is([data-layout=default] .grid,[data-layout=layout-2] .grid) #editor-preview{overflow:hidden}:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) #markup,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) #script,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) #style,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) #editor-preview,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-col,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-row,:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-center{position:absolute}:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-col-a{left:var(--mosaic-x1);width:var(--mosaic-gutter);height:max(var(--mosaic-gutter), max(var(--mosaic-y1), var(--mosaic-y2)) + var(--mosaic-gutter));top:0}:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-col-b{left:var(--mosaic-x2);top:min(var(--mosaic-y1), var(--mosaic-y2));width:var(--mosaic-gutter);height:max(var(--mosaic-gutter), 100% - min(var(--mosaic-y1), var(--mosaic-y2)))}:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-row-a{left:0;top:var(--mosaic-y1);width:max(var(--mosaic-gutter), max(var(--mosaic-x1), var(--mosaic-x2)) + var(--mosaic-gutter));height:var(--mosaic-gutter)}:is([data-mosaic][data-layout=default] .grid,[data-mosaic][data-layout=layout-2] .grid) .gutter-row-b{left:min(var(--mosaic-x1), var(--mosaic-x2));top:var(--mosaic-y2);width:max(var(--mosaic-gutter), 100% - min(var(--mosaic-x1), var(--mosaic-x2)));height:var(--mosaic-gutter)}:is([data-mosaic][data-layout=default] .grid) #markup{width:var(--mosaic-x1);height:var(--mosaic-y1);top:0;left:0}:is([data-mosaic][data-layout=default] .grid) #script{left:calc(var(--mosaic-x1) + var(--mosaic-gutter));width:calc(100% - var(--mosaic-x1) - var(--mosaic-gutter));height:var(--mosaic-y2);top:0}:is([data-mosaic][data-layout=default] .grid) #style{left:0;top:calc(var(--mosaic-y1) + var(--mosaic-gutter));width:var(--mosaic-x2);height:calc(100% - var(--mosaic-y1) - var(--mosaic-gutter))}:is([data-mosaic][data-layout=default] .grid) #editor-preview{left:calc(var(--mosaic-x2) + var(--mosaic-gutter));top:calc(var(--mosaic-y2) + var(--mosaic-gutter));width:calc(100% - var(--mosaic-x2) - var(--mosaic-gutter));height:calc(100% - var(--mosaic-y2) - var(--mosaic-gutter))}:is([data-mosaic][data-layout=layout-2] .grid) #markup{width:var(--mosaic-x1);height:var(--mosaic-y1);top:0;left:0}:is([data-mosaic][data-layout=layout-2] .grid) #style{left:calc(var(--mosaic-x1) + var(--mosaic-gutter));width:calc(100% - var(--mosaic-x1) - var(--mosaic-gutter));height:var(--mosaic-y2);top:0}:is([data-mosaic][data-layout=layout-2] .grid) #script{left:0;top:calc(var(--mosaic-y1) + var(--mosaic-gutter));width:var(--mosaic-x2);height:calc(100% - var(--mosaic-y1) - var(--mosaic-gutter))}:is([data-mosaic][data-layout=layout-2] .grid) #editor-preview{left:calc(var(--mosaic-x2) + var(--mosaic-gutter));top:calc(var(--mosaic-y2) + var(--mosaic-gutter));width:calc(100% - var(--mosaic-x2) - var(--mosaic-gutter));height:calc(100% - var(--mosaic-y2) - var(--mosaic-gutter))}[data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid{grid-template-rows:1fr 8px 1fr;grid-template-columns:1fr 8px 1fr;display:grid}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #markup,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #script,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #style,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #editor-preview{min-width:0;min-height:0}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #markup{grid-area:1/1}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #script{grid-area:1/3}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #style{grid-area:3/1}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) #editor-preview{grid-area:3/3}:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) .gutter-col,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) .gutter-row,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) .first-gutter,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) .second-gutter,:is([data-layout=default]:not([data-mosaic]) .grid,[data-layout=layout-2]:not([data-mosaic]) .grid) .last-gutter{position:absolute}:is([data-layout=layout-2]:not([data-mosaic]) .grid) #markup{grid-area:1/1}:is([data-layout=layout-2]:not([data-mosaic]) .grid) #style{grid-area:1/3}:is([data-layout=layout-2]:not([data-mosaic]) .grid) #script{grid-area:3/1}:is([data-layout=layout-2]:not([data-mosaic]) .grid) #editor-preview{grid-area:3/3}[data-layout=vertical] .grid{grid-template-columns:var(--editor-columns,1fr 8px 1fr 8px 1fr 8px 1fr);grid-template-rows:var(--editor-rows,1fr);grid-template-areas:"editor-html.editor-css.editor-js.editor-preview"}:is([data-layout=vertical] .grid) .gutter-col,:is([data-layout=vertical] .grid) .gutter-row,:is([data-layout=vertical] .grid) .gutter-center{display:none}:is([data-layout=vertical] .grid) .first-gutter{cursor:col-resize;grid-area:1/2/1/2;display:block;position:relative}:is([data-layout=vertical] .grid) .second-gutter{cursor:col-resize;grid-area:1/4/1/4;display:block;position:relative}:is([data-layout=vertical] .grid) .last-gutter{cursor:col-resize;grid-area:1/6/1/6;display:block;position:relative}:is([data-layout=vertical] .grid) #markup{grid-area:editor-html}:is([data-layout=vertical] .grid) #style{grid-area:editor-css}:is([data-layout=vertical] .grid) #script{grid-area:editor-js}:is([data-layout=vertical] .grid) #editor-preview{grid-area:editor-preview}[data-layout=horizontal] .grid{grid-template-columns:var(--editor-columns,1fr);grid-template-rows:var(--editor-rows,1fr 8px 1fr 8px 1fr 8px 1fr);grid-template-areas:"editor-html"".""editor-css"".""editor-js"".""editor-preview"}:is([data-layout=horizontal] .grid) .gutter-col,:is([data-layout=horizontal] .grid) .gutter-row,:is([data-layout=horizontal] .grid) .gutter-center{display:none}:is([data-layout=horizontal] .grid) .first-gutter{cursor:row-resize;grid-area:2/1/2/1;display:block;position:relative}:is([data-layout=horizontal] .grid) .second-gutter{cursor:row-resize;grid-area:4/1/4/1;display:block;position:relative}:is([data-layout=horizontal] .grid) .last-gutter{cursor:row-resize;grid-area:6/1/6/1;display:block;position:relative}:is([data-layout=horizontal] .grid) #markup{grid-area:editor-html}:is([data-layout=horizontal] .grid) #style{grid-area:editor-css}:is([data-layout=horizontal] .grid) #script{grid-area:editor-js}:is([data-layout=horizontal] .grid) #editor-preview{grid-area:editor-preview}[data-layout=bottom] .grid{grid-template-columns:var(--editor-columns,1fr 8px 1fr 8px 1fr);grid-template-rows:var(--editor-rows,1fr 8px 1fr);grid-template-areas:"editor-preview editor-preview editor-preview editor-preview editor-preview"". . . . .""editor-html.editor-js.editor-css"}:is([data-layout=bottom] .grid) .gutter-col,:is([data-layout=bottom] .grid) .gutter-row,:is([data-layout=bottom] .grid) .gutter-center{display:none}:is([data-layout=bottom] .grid) .first-gutter{cursor:col-resize;grid-area:2/2/4/3;display:block;position:relative}:is([data-layout=bottom] .grid) .second-gutter{cursor:col-resize;grid-area:2/4/4/5;display:block;position:relative}:is([data-layout=bottom] .grid) .last-gutter{cursor:row-resize;grid-area:2/1/2/6;display:block;position:relative}:is([data-layout=bottom] .grid) #markup{grid-area:editor-html}:is([data-layout=bottom] .grid) #style{grid-area:editor-css}:is([data-layout=bottom] .grid) #script{grid-area:editor-js}:is([data-layout=bottom] .grid) #editor-preview{grid-area:editor-preview}[data-layout=tabs] .grid{grid-template-columns:var(--editor-columns,5fr 8px 3fr);grid-template-rows:var(--editor-rows,40px 1fr);grid-template-areas:"tabs.editor-preview""editors.editor-preview"}:is([data-layout=tabs] .grid) .gutter-col,:is([data-layout=tabs] .grid) .gutter-row,:is([data-layout=tabs] .grid) .gutter-center{display:none}:is([data-layout=tabs] .grid) #tabs{border-radius:var(--island-radius) var(--island-radius) 0 0;display:grid}:is([data-layout=tabs] .grid) #markup,:is([data-layout=tabs] .grid) #script,:is([data-layout=tabs] .grid) #style{border-radius:0 0 var(--island-radius) var(--island-radius);grid-area:editors;min-height:0}:is([data-layout=tabs] .grid) #script,:is([data-layout=tabs] .grid) #style{display:none}:is([data-layout=tabs] .grid) .first-gutter{cursor:col-resize;grid-area:1/2/3/2;display:block;position:relative}:is([data-layout=tabs] .grid) .second-gutter,:is([data-layout=tabs] .grid) .last-gutter{display:none}:is([data-layout=tabs] .grid) #editor-preview{grid-area:editor-preview}.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter{--gutter-handle-size:28px;background-color:#0000;background-image:none;position:relative}:is(.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter):after{content:"";background:var(--button-foreground);opacity:.28;pointer-events:none;border-radius:999px;transition:opacity .15s,width .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:is(.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter):hover,:is(.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter):active{--gutter-handle-size:72px}:is(:is(.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter):hover,:is(.gutter-col,.gutter-row,.first-gutter,.second-gutter,.last-gutter):active):after{opacity:.7}.grid.is-center-hover .gutter-col,.grid.is-center-hover .gutter-row,.grid.is-pair-col-hover .gutter-col,.grid.is-pair-row-hover .gutter-row{--gutter-handle-size:72px}:is(.grid.is-center-hover .gutter-col,.grid.is-center-hover .gutter-row,.grid.is-pair-col-hover .gutter-col,.grid.is-pair-row-hover .gutter-row):after{opacity:.7}.gutter-center{z-index:3;cursor:move;touch-action:none;background:0 0;display:none}.gutter-center[data-pair=x]{cursor:col-resize}.gutter-center[data-pair=y]{cursor:row-resize}[data-mosaic] .gutter-center:not([hidden]){display:block}.gutter-col,.gutter-row{z-index:2;touch-action:none}.gutter-col,.first-gutter,.second-gutter{cursor:col-resize}:is(.gutter-col,.first-gutter,.second-gutter):after{width:3px;height:var(--gutter-handle-size)}.gutter-row,.last-gutter{cursor:row-resize}:is(.gutter-row,.last-gutter):after{width:var(--gutter-handle-size);height:3px}[data-layout=horizontal] .first-gutter,[data-layout=horizontal] .second-gutter,[data-layout=horizontal] .last-gutter{cursor:row-resize}:is([data-layout=horizontal] .first-gutter,[data-layout=horizontal] .second-gutter,[data-layout=horizontal] .last-gutter):after{width:var(--gutter-handle-size);height:3px}:is([data-layout=vertical],[data-layout=tabs]) .last-gutter{cursor:col-resize}:is(:is([data-layout=vertical],[data-layout=tabs]) .last-gutter):after{width:3px;height:var(--gutter-handle-size)}#tabs{background-color:var(--island-background);border-radius:var(--island-radius);grid-area:tabs;grid-template-columns:repeat(auto-fit,minmax(0,1fr));display:none;overflow:hidden}#tabs label{opacity:.2;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-bottom:2px solid #0000;align-items:center;padding-left:8px;transition:opacity .2s;display:flex;overflow:hidden}[hidden]:is(#tabs label){display:none}.active:is(#tabs label){border-bottom:2px solid;opacity:1!important}.active[for=markup]:is(#tabs label){border-bottom-color:#e34f26}.active[for=style]:is(#tabs label){border-bottom-color:#639}.active[for=script]:is(#tabs label){border-bottom-color:#ffc107}:is(#tabs label):hover{cursor:pointer;opacity:.7}:is(#tabs label)+label{border-left:1px solid #292929}:is(#tabs label):before{content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;width:16px;height:16px;margin-right:.5em;display:inline-block}[for=markup]:is(#tabs label):before{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20452%20520'%3e%3cpath%20fill='%23e34f26'%20d='M41%20460L0%200h451l-41%20460-185%2052'%20/%3e%3cpath%20fill='%23ef652a'%20d='M226%20472l149-41%2035-394H226'%20/%3e%3cpath%20fill='%23ecedee'%20d='M226%20208h-75l-5-58h80V94H84l15%20171h127zm0%20147l-64-17-4-45h-56l7%2089%20117%2032z'/%3e%3cpath%20fill='%23fff'%20d='M226%20265h69l-7%2073-62%2017v59l115-32%2016-174H226zm0-171v56h136l5-56z'/%3e%3c/svg%3e")}[for=style]:is(#tabs label):before{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%3e%3cpath%20fill='%23639'%20d='M0%200h840a160%20160%200%200%201%20160%20160v680a160%20160%200%200%201-160%20160H160A160%20160%200%200%201%200%20840V0Z'/%3e%3cpath%20fill='%23fff'%20d='M358.1%20920c-64.23-.06-103.86-36.23-103.1-102.79V648.82c0-33.74%209.88-59.4%2029.64-76.96%2035.49-34.19%20117.83-36.27%20152.59.52%2021.42%2018.89%2029.5%2057.48%2027.58%2093.49h-73.72c.56-14.15-.19-35.58-8.51-43.65-10.81-14.63-39.36-12.91-46.91%202.32-4.64%208.26-6.96%2020.49-6.96%2036.67v146.18c0%2030.65%2010.65%2046.15%2031.96%2046.49%209.96%200%2017.53-3.62%2022.68-10.85%207.19-8.58%208.31-27.58%207.73-41.32h73.72c5.04%2070.07-36.32%20119.16-106.71%20118.29Zm234.04%200c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93%2029.92%208.35%2057.17%2032.99%2055.27%2010.99%200%2018.73-3.44%2023.2-10.33%208.5-12.59%2010.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48%2011.34-137.4%2031.18-36.92%20112.61-38.62%20143.82-.77%2019.25%2019.51%2027.66%2057.9%2026.03%2093.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59%200-29.38%2011.71-29.38%2035.12.21%2024.86%209.9%2035.06%2032.48%2045.45%2029.24%2011.36%2066.42%2030.76%2079.9%2054.24%2040.2%2071.54%2012.62%20180.82-86.09%20176.65Zm224.76%200c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93%2029.92%208.35%2057.17%2032.99%2055.27%2010.99%200%2018.73-3.44%2023.2-10.33%208.5-12.59%2010.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48%2011.34-137.4%2031.18-36.92%20112.61-38.62%20143.82-.77%2019.25%2019.51%2027.66%2057.9%2026.03%2093.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59%200-29.38%2011.71-29.38%2035.12.21%2024.86%209.9%2035.06%2032.48%2045.45%2029.24%2011.36%2066.42%2030.76%2079.9%2054.24%2040.2%2071.54%2012.62%20180.82-86.09%20176.65Z'/%3e%3c/svg%3e")}[for=script]:is(#tabs label):before{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20630%20630'%3e%3crect%20width='630'%20height='630'%20fill='%23f7df1e'/%3e%3cpath%20d='m423.2%20492.19c12.69%2020.72%2029.2%2035.95%2058.4%2035.95%2024.53%200%2040.2-12.26%2040.2-29.2%200-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2%200-44.4%2033.83-78.2%2086.7-78.2%2037.64%200%2064.7%2013.1%2084.2%2047.4l-46.1%2029.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34%200-28.33%2011-28.33%2025.37%200%2017.76%2011%2024.95%2036.4%2035.95l14.8%206.34c50.3%2021.57%2078.7%2043.56%2078.7%2093%200%2053.3-41.87%2082.5-98.1%2082.5-54.98%200-90.5-26.2-107.88-60.54zm-209.13%205.13c9.3%2016.5%2017.76%2030.45%2038.1%2030.45%2019.45%200%2031.72-7.61%2031.72-37.2v-201.3h59.2v202.1c0%2061.3-35.94%2089.2-88.4%2089.2-47.4%200-74.85-24.53-88.81-54.075z'/%3e%3c/svg%3e")}[for=editor-preview]:is(#tabs label):before{box-sizing:border-box;background:#fff;border:2px solid;border-radius:2px}.active[for=editor-preview]:is(#tabs label){border-bottom-color:#fff}.first-gutter{grid-area:1/2/4/2;display:none}.second-gutter{z-index:1;grid-area:2/2/2/2;display:none}.last-gutter{grid-area:2/1/2/4;display:none}.editor,#editor-preview{border-radius:var(--island-radius);background-color:var(--island-background);position:relative;overflow:hidden}.editor .monaco-editor,.editor .monaco-editor .overflow-guard,.editor .monaco-editor .monaco-scrollable-element{border-radius:inherit}.editor:after{content:"";z-index:9;pointer-events:none;background-position:50%;background-repeat:no-repeat;background-size:contain;width:32px;height:32px;position:absolute;bottom:16px;right:16px}.editor[data-language=html]:after{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20452%20520'%3e%3cpath%20fill='%23e34f26'%20d='M41%20460L0%200h451l-41%20460-185%2052'%20/%3e%3cpath%20fill='%23ef652a'%20d='M226%20472l149-41%2035-394H226'%20/%3e%3cpath%20fill='%23ecedee'%20d='M226%20208h-75l-5-58h80V94H84l15%20171h127zm0%20147l-64-17-4-45h-56l7%2089%20117%2032z'/%3e%3cpath%20fill='%23fff'%20d='M226%20265h69l-7%2073-62%2017v59l115-32%2016-174H226zm0-171v56h136l5-56z'/%3e%3c/svg%3e")}.editor[data-language=css]:after{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%3e%3cpath%20fill='%23639'%20d='M0%200h840a160%20160%200%200%201%20160%20160v680a160%20160%200%200%201-160%20160H160A160%20160%200%200%201%200%20840V0Z'/%3e%3cpath%20fill='%23fff'%20d='M358.1%20920c-64.23-.06-103.86-36.23-103.1-102.79V648.82c0-33.74%209.88-59.4%2029.64-76.96%2035.49-34.19%20117.83-36.27%20152.59.52%2021.42%2018.89%2029.5%2057.48%2027.58%2093.49h-73.72c.56-14.15-.19-35.58-8.51-43.65-10.81-14.63-39.36-12.91-46.91%202.32-4.64%208.26-6.96%2020.49-6.96%2036.67v146.18c0%2030.65%2010.65%2046.15%2031.96%2046.49%209.96%200%2017.53-3.62%2022.68-10.85%207.19-8.58%208.31-27.58%207.73-41.32h73.72c5.04%2070.07-36.32%20119.16-106.71%20118.29Zm234.04%200c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93%2029.92%208.35%2057.17%2032.99%2055.27%2010.99%200%2018.73-3.44%2023.2-10.33%208.5-12.59%2010.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48%2011.34-137.4%2031.18-36.92%20112.61-38.62%20143.82-.77%2019.25%2019.51%2027.66%2057.9%2026.03%2093.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59%200-29.38%2011.71-29.38%2035.12.21%2024.86%209.9%2035.06%2032.48%2045.45%2029.24%2011.36%2066.42%2030.76%2079.9%2054.24%2040.2%2071.54%2012.62%20180.82-86.09%20176.65Zm224.76%200c-71.17.98-103.01-49.66-101.04-118.29h69.59c-1.93%2029.92%208.35%2057.17%2032.99%2055.27%2010.99%200%2018.73-3.44%2023.2-10.33%208.5-12.59%2010.09-48.95-2.06-63.02-8.49-13.55-39.03-25.51-55.16-33.57-23.03-11.02-39.61-24.1-49.75-39.26-22.87-33.64-20.75-107.48%2011.34-137.4%2031.18-36.92%20112.61-38.62%20143.82-.77%2019.25%2019.51%2027.66%2057.9%2026.03%2093.23h-67.02c.57-14.52-.8-37.95-6.44-46.49-3.95-7.23-11.43-10.85-22.42-10.85-19.59%200-29.38%2011.71-29.38%2035.12.21%2024.86%209.9%2035.06%2032.48%2045.45%2029.24%2011.36%2066.42%2030.76%2079.9%2054.24%2040.2%2071.54%2012.62%20180.82-86.09%20176.65Z'/%3e%3c/svg%3e")}.editor[data-language=javascript]:after{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20630%20630'%3e%3crect%20width='630'%20height='630'%20fill='%23f7df1e'/%3e%3cpath%20d='m423.2%20492.19c12.69%2020.72%2029.2%2035.95%2058.4%2035.95%2024.53%200%2040.2-12.26%2040.2-29.2%200-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2%200-44.4%2033.83-78.2%2086.7-78.2%2037.64%200%2064.7%2013.1%2084.2%2047.4l-46.1%2029.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34%200-28.33%2011-28.33%2025.37%200%2017.76%2011%2024.95%2036.4%2035.95l14.8%206.34c50.3%2021.57%2078.7%2043.56%2078.7%2093%200%2053.3-41.87%2082.5-98.1%2082.5-54.98%200-90.5-26.2-107.88-60.54zm-209.13%205.13c9.3%2016.5%2017.76%2030.45%2038.1%2030.45%2019.45%200%2031.72-7.61%2031.72-37.2v-201.3h59.2v202.1c0%2061.3-35.94%2089.2-88.4%2089.2-47.4%200-74.85-24.53-88.81-54.075z'/%3e%3c/svg%3e")}.editor:hover:after{opacity:.2}.editor:focus-within:after{opacity:.1}@media (width<=650px){.editor:after{left:16px;right:unset}[data-layout=tabs] .grid{grid-template-columns:var(--editor-columns,1fr);grid-template-rows:var(--editor-rows,40px minmax(0, 1fr));grid-template-areas:"tabs""editors"}:is([data-layout=tabs] .grid) .gutter-col,:is([data-layout=tabs] .grid) .gutter-row,:is([data-layout=tabs] .grid) .gutter-center,:is([data-layout=tabs] .grid) .first-gutter,:is([data-layout=tabs] .grid) .second-gutter,:is([data-layout=tabs] .grid) .last-gutter{display:none}:is([data-layout=tabs] .grid) #markup,:is([data-layout=tabs] .grid) #script,:is([data-layout=tabs] .grid) #style,:is([data-layout=tabs] .grid) #editor-preview{grid-area:editors;min-height:0}#tabs label{justify-content:center;padding-inline:4px;font-size:13px}}aside{gap:var(--island-gap);min-height:0;display:flex;position:relative}aside button{position:relative}.console-badge-count{color:#fff;pointer-events:none;background:#ef5350;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-weight:700;display:flex;position:absolute;top:0;right:0;box-shadow:0 1px 3px #0000004d}.console-badge-count[hidden]{display:none}aside button .button-title{background:var(--button-title-background);border:1px solid var(--button-title-border);color:var(--button-title-foreground);z-index:1000;white-space:nowrap;border-radius:8px;padding:.4em .7em;font-size:.85em;display:none;position:absolute;right:-8px;transform:translate(100%)}:is(aside button .button-title):after{content:"";border-top:.4em solid #0000;border-bottom:.4em solid #0000;border-right:.4em solid var(--button-title-background);width:0;height:0;position:absolute;top:50%;left:1px;transform:translate(-100%,-50%)}:is(aside button .button-title):before{content:"";border-top:.4em solid #0000;border-bottom:.4em solid #0000;border-right:.4em solid var(--button-title-border);width:0;height:0;position:absolute;top:50%;left:0;transform:translate(-100%,-50%)}@media (hover:hover) and (pointer:fine){:is(aside button:hover:not(.is-open)) .button-title{display:block}}.aside-bar{background:var(--aside-bar-background);color:var(--aside-bar-foreground);border:1px solid var(--aside-bar-border);border-radius:var(--island-radius);scrollbar-width:thin;scrollbar-color:transparent transparent;width:320px;height:100%;overflow-y:auto}.aside-bar:hover{scrollbar-color:#80808073 transparent}.aside-bar::-webkit-scrollbar{width:6px}.aside-bar::-webkit-scrollbar-track{background:0 0}.aside-bar::-webkit-scrollbar-thumb{background-color:#80808000;border-radius:999px}.aside-bar:hover::-webkit-scrollbar-thumb{background-color:#80808073}.aside-bar::-webkit-scrollbar-thumb:hover{background-color:#808080a6}.aside-bar::-webkit-scrollbar-thumb:active{background-color:#808080d9}.aside-sections{background:0 0;border:0;flex-direction:column;justify-content:space-between;width:52px;height:100%;padding:6px 0;display:flex}.aside-sections button{cursor:pointer;width:40px;height:40px;color:var(--button-foreground);background:0 0;border:0;border-radius:10px;place-items:center;margin:2px auto;padding:0;transition:color .12s;display:grid}.aside-sections button[hidden]{display:none}.aside-sections button .icon{opacity:var(--button-icon-opacity);transition:opacity .12s}.aside-sections button.is-active,.aside-sections button.is-open,.aside-sections button:not(:disabled):hover{color:var(--button-foreground-active);background:0 0}.aside-sections button.is-active .icon,.aside-sections button.is-open .icon,.aside-sections button:not(:disabled):hover .icon,.aside-sections button.is-copied .icon{opacity:1}.aside-sections button .icon-check,.aside-sections button.is-copied .icon-copy{display:none}.aside-sections button.is-copied .icon-check{color:#3fb950;display:block}.aside-sections header,.aside-sections footer{flex-direction:column;justify-content:center;align-items:center;display:flex}.aside-sections [data-action=toggle-layout-switcher]{margin-top:8px}.aside-sections [data-action=toggle-layout-switcher]:before{content:"";opacity:.18;pointer-events:none;background:currentColor;height:1px;position:absolute;top:-5px;left:12px;right:12px}.bar-content{--panel-padding:1rem;min-height:100%}.bar-content strong{letter-spacing:.01em;font-size:.95rem;display:block}.skypack-header,.console-header,.history-header,.demos-header,.ai-chat-header{z-index:1;padding:1rem var(--panel-padding) .75rem;background-color:var(--aside-bar-background);position:sticky;top:0}.skypack-type,.console-type,.history-type,.demos-type,.ai-chat-type,.settings-type{opacity:.55}.skypack .skypack-item{color:var(--aside-bar-foreground);flex-direction:column;width:100%;padding:0 0 1em;display:flex}.skypack .skypack-item strong{text-overflow:ellipsis;display:block;overflow:hidden}.skypack .skypack-header span[data-translate=addDependencyDescription]{opacity:.65;margin-top:.35em;font-size:.85em;line-height:1.4;display:block}.skypack .input{background-color:var(--input-background);border:1px solid var(--input-border);color:var(--input-foreground);border-radius:10px;align-items:center;margin-top:16px;padding:.55em .7em;font-size:1rem;display:flex}.skypack .input .input-icon{opacity:.5;width:18px;height:18px}.skypack .input input{padding:.05em;width:100%;color:var(--input-foreground);background-color:#0000;border:none;outline:none;padding-left:8px}.skypack .search-results-message{margin:4px 0 0;padding-bottom:8px;font-size:14px;font-weight:500}.skypack .search-results.hidden{display:none}.skypack .search-results .extensions ul{margin:.5em var(--panel-padding);padding:0;list-style:none}.skypack .search-results .extensions ul li{cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:8px;flex-direction:column;margin-bottom:.5em;padding:.65em;display:flex;overflow:hidden}:is(.skypack .search-results .extensions ul li) header{align-items:center;display:flex}:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges{align-items:center;padding-left:.25rem;display:flex}:is(:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges) .skypack-badge{border:0;border-radius:.3em;margin-left:.25rem;margin-right:.25rem;padding:.125em .375em .12em;font-size:.7em}.popular:is(:is(:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges) .skypack-badge){color:#000;background-color:#80b918}.deprecated:is(:is(:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges) .skypack-badge){color:#fff;background-color:#c81d25}.exact-match:is(:is(:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges) .skypack-badge){color:#000;background-color:#ffc300}.typescript:is(:is(:is(:is(.skypack .search-results .extensions ul li) header) .skypack-result-badges) .skypack-badge){background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2016%2016'%3e%3crect%20width='16'%20height='16'%20fill='%233167FF'%20rx='2'/%3e%3cpath%20fill='%23fff'%20d='M4.2%209.4H6V15h1.5V9.4h1.9V8H4.2v1.4zm5.9%205.1c.6.4%201.5.6%202.4.6%201.6%200%202.6-1%202.6-2.2%200-1.5-1.3-1.9-2.3-2.1-.7-.2-1.3-.3-1.3-.8%200-.4.4-.7%201.1-.7.8%200%201.5.3%202.2.8V8.4a4%204%200%200%200-2.2-.5C11%207.9%2010%208.7%2010%2010c0%201.3%201%201.7%202%202%20.8.2%201.5.3%201.5.9%200%20.4-.4.7-1%20.7-.8%200-1.8-.3-2.4-1v1.8z'/%3e%3c/svg%3e") 50% no-repeat;width:18px;height:18px}:is(.skypack .search-results .extensions ul li) .skypack-description{text-overflow:ellipsis;font-size:.9em;overflow:hidden}:is(.skypack .search-results .extensions ul li) .skypack-updated{opacity:.5;font-size:.8em}:is(.skypack .search-results .extensions ul li) footer{justify-content:space-between;align-items:flex-end;display:flex}:is(.skypack .search-results .extensions ul li) .skypack-open{opacity:0;font-size:.7em;text-decoration:none}:is(:is(.skypack .search-results .extensions ul li) .skypack-open):hover{text-decoration:underline}.skypack .search-results ul li:focus,.skypack .search-results ul li:hover{background-color:#80808024}:is(.skypack .search-results ul li:focus,.skypack .search-results ul li:hover) .skypack-open{opacity:1}.settings .settings-content{place-content:center;height:100%;display:grid}.settings .settings-type{opacity:.6}.settings .settings-item{width:100%;max-width:500px;padding:1em var(--panel-padding,1rem);flex-direction:column;display:flex}:is(.settings .settings-item) .layout-preview-container{justify-content:space-between;padding:10px 0;display:flex}:is(:is(.settings .settings-item) .layout-preview-container) label{border-radius:10px;transition:opacity .3s,background-color .3s;position:relative}:is(:is(.settings .settings-item) .layout-preview-container) label:hover{opacity:.9;background-color:#000}:is(:is(.settings .settings-item) .layout-preview-container) input[type=radio]{cursor:pointer;opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.settings .checkbox{align-items:center;display:flex}.settings .checkbox input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.settings .checkbox span{align-items:center;display:flex}.settings .checkbox input:focus+span:before{content:"";outline:1px solid #fff}.settings .checkbox input:checked+span:before{content:"✓"}.settings .checkbox span:before{background:var(--input-background);border:1px solid var(--input-border);color:var(--input-foreground);content:"";border-radius:6px;justify-content:center;align-items:center;width:18px;min-width:18px;height:18px;margin-right:9px;display:flex}.settings .input{background-color:var(--input-background);color:var(--input-foreground);border:1px solid var(--input-border);border-radius:8px;padding:.45em .6em}.settings .setting-description{opacity:.6;margin:0;padding-top:.5em;font-size:.9em}@media (width<=650px){.settings .settings-item:has(.layout-preview-container){display:none}}.layout-switcher{z-index:30;background:var(--button-title-background);min-width:196px;color:var(--button-title-foreground);border:1px solid var(--button-title-border);border-radius:8px;flex-direction:column;padding:.55em;display:flex;position:absolute;transform:translateY(-50%)}.layout-switcher:before,.layout-switcher:after{content:"";border-top:.4em solid #0000;border-bottom:.4em solid #0000;width:0;height:0;position:absolute;top:50%;left:0;transform:translate(-100%,-50%)}.layout-switcher:before{border-right:.4em solid var(--button-title-border)}.layout-switcher:after{border-right:.4em solid var(--button-title-background);left:1px}.layout-switcher[hidden]{display:none}.layout-switcher-grid{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.layout-option{background:color-mix(in srgb, var(--button-title-foreground) 6%, transparent);color:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;place-items:center;padding:4px;display:grid}.layout-option:hover{background:color-mix(in srgb, var(--button-title-foreground) 10%, transparent)}.layout-option.is-active{background:color-mix(in srgb, var(--button-title-foreground) 12%, transparent);border-color:color-mix(in srgb, var(--button-title-foreground) 16%, transparent)}.layout-preview-icon{--layout-preview-size:22px;--layout-preview-padding:2px;--layout-preview-gap:1.5px;pointer-events:none;flex-shrink:0}.layout-preview{height:var(--layout-preview-size,40px);width:var(--layout-preview-size,40px);padding:var(--layout-preview-padding,5px);cursor:pointer;gap:var(--layout-preview-gap,3px);border-radius:8px;grid-template:"html js"1fr"css result"1fr/1fr 1fr;display:grid}.layout-preview[active]{background-color:var(--layout-preview-background-color,#797b80);border-radius:var(--layout-preview-border-radius,5px)}.layout-preview[data-layout=layout-2]{grid-template-areas:"html css""js result"}.layout-preview[data-layout=vertical]{grid-template-rows:1fr;grid-template-columns:repeat(4,1fr);grid-template-areas:"html css js result"}.layout-preview[data-layout=horizontal]{grid-template-rows:repeat(4,1fr);grid-template-columns:1fr;grid-template-areas:"html""css""js""result"}.layout-preview[data-layout=bottom]{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:"result result result""html js css"}.layout-preview[data-layout=tabs]{grid-template:"tab css js result"5px"html html html result"1fr/1fr 1fr 1fr 2.2fr;position:relative}.layout-preview[data-layout=tabs]:before{content:"";background-color:var(--layout-preview-background-color-html,#e34f26);border-radius:1px;grid-area:tab}.layout-preview .html,.layout-preview .css,.layout-preview .js,.layout-preview .result{border-radius:2px}.layout-preview .html{background-color:var(--layout-preview-background-color-html,#e34f26);grid-area:html}.layout-preview .css{background-color:var(--layout-preview-background-color-css,#30a9dc);grid-area:css}.layout-preview .js{background-color:var(--layout-preview-background-color-js,#f7df1e);grid-area:js}.layout-preview .result{background-color:var(--layout-preview-background-color-result,#fff);grid-area:result}.open-file-dragging{width:100%}.open-file-dragging .zone-drag-drop{color:#fff;opacity:.5;background:#00000065;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;transition:opacity .3s;display:flex;position:relative}.focus:is(.open-file-dragging .zone-drag-drop){opacity:1}:is(.open-file-dragging .zone-drag-drop) strong{margin-bottom:48px;font-size:1.2rem;position:absolute}:is(.open-file-dragging .zone-drag-drop) input{opacity:0;width:100%;height:100%}:is(.open-file-dragging .zone-drag-drop) .icon{width:64px;height:64px;margin-top:52px;position:absolute}.overlay-drag{z-index:99999;background:#0000007a;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:absolute;top:0}.overlay-drag.hidden{display:none}.console .console-item{color:var(--aside-bar-foreground);flex-direction:column;width:100%;display:flex}.console .console-actions{justify-content:flex-end;align-items:center;gap:6px;margin-top:1em;display:flex}:is(.console .console-actions) button{background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);border:1px solid color-mix(in srgb, var(--aside-bar-foreground) 8%, transparent);color:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 8px 6px 6px;transition:background-color .2s,scale .2s;display:flex}:is(:is(.console .console-actions) button):hover{background-color:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}:is(:is(.console .console-actions) button):active{background-color:color-mix(in srgb, var(--aside-bar-foreground) 16%, transparent);scale:.95}:is(:is(.console .console-actions) button) .icon{width:16px;height:16px}.console .console-list{font-family:var(--mono-font);margin:0;padding:0 0 1em;font-size:12px;line-height:1.45;list-style:none;display:grid}:is(.console .console-list) li{padding:6px var(--panel-padding);border-bottom:1px solid color-mix(in srgb, var(--aside-bar-foreground) 7%, transparent);grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:8px;display:grid}:is(.console .console-list) li>pre{min-width:0;font:inherit;white-space:pre-wrap;word-break:break-word;margin:0}:is(.console .console-list) .error{color:var(--log-error);background:#ef53501f}:is(.console .console-list) .log-log{color:var(--log-log)}:is(.console .console-list) .log-info{color:var(--log-info)}:is(.console .console-list) .log-error{color:var(--log-error)}:is(.console .console-list) .log-warn{color:var(--log-warn)}:is(.console .console-list) .log-debug{color:var(--log-debug,#ab47bc)}:is(.console .console-list) .log-table{color:var(--log-table,#66bb6a)}:is(.console .console-list) .log-count{color:var(--log-count,#26c6da)}:is(.console .console-list) .log-trace{color:var(--log-trace,#8d6e63)}:is(.console .console-list) .log-dir,:is(.console .console-list) .log-dirxml{color:var(--log-dir,#78909c)}:is(.console .console-list) .log-time{color:var(--log-time,#ffd54f)}:is(.console .console-list) .log-assert{color:var(--log-assert,#ff7043)}.console .console-string{color:#ce9178}.console .console-number{color:#b5cea8}.console .console-boolean{color:#569cd6}.console .console-null,.console .console-undefined{color:#d16969}.console .console-key,.console .console-date{color:#9cdcfe}.console .console-regexp{color:#b46695}.console .console-fn:before{content:"ƒ ";color:#ce9178;font-style:italic}.console .console-async-fn:before{content:"async ƒ "}.console .console-generator-fn:before{content:"ƒ* "}.console .console-location{color:#9cdcfe;opacity:.55;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;font-size:11px;line-height:inherit;white-space:nowrap;background:0 0;border:none;padding:0}:is(.console .console-location):hover{opacity:1;text-decoration:underline}.console .console-badge{min-width:3.4em;font:inherit;letter-spacing:.04em;color:inherit;opacity:.45;font-size:10px;font-weight:600;line-height:inherit;padding:0;display:inline-block}.console .console-table{margin-top:.5em;overflow-x:auto}:is(.console .console-table) table{border-collapse:collapse;font:inherit;background:#ffffff0d;min-width:100%}:is(.console .console-table) th{text-align:left;color:#9cdcfe;background:#ffffff1a;border:1px solid #fff3;padding:6px 12px;font-weight:600}:is(.console .console-table) td{vertical-align:top;border:1px solid #ffffff1a;padding:6px 12px}:is(.console .console-table) tr:hover{background:#ffffff0d}.history .history-item{color:var(--aside-bar-foreground);flex-direction:column;width:100%;padding:0 0 1em;display:flex}.history .history-item strong{text-overflow:ellipsis;display:block;overflow:hidden}.history .history-header span[data-translate=historyDescription]{opacity:.65;margin-top:.35em;font-size:.85em;line-height:1.4;display:block}.history .history-actions{justify-content:flex-end;align-items:center;gap:6px;margin-top:1em;display:flex}:is(.history .history-actions) button{background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);border:1px solid color-mix(in srgb, var(--aside-bar-foreground) 8%, transparent);color:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 8px 6px 6px;transition:background-color .2s,scale .2s;display:flex}:is(:is(.history .history-actions) button):hover{background-color:#ffffff1a}:is(:is(.history .history-actions) button):active{background-color:#fff3;scale:.95}:is(:is(.history .history-actions) button) .icon{width:16px;height:16px}.history .history-list{padding:0 var(--panel-padding);list-style:none;display:grid}:is(.history .history-list) .group{margin-bottom:8px}:is(.history .history-list) .group h4{opacity:.5;margin:0;padding:.5em 0 .5em .5em;font-size:12px;font-weight:600}:is(.history .history-list) li{cursor:pointer;border-radius:8px;align-items:center;gap:6px;width:100%;transition:background-color .2s;display:flex}:is(:is(.history .history-list) li):hover{background-color:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent)}:is(:is(.history .history-list) li):hover .actions{opacity:1}.is-active:is(:is(.history .history-list) li){background-color:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}:is(:is(.history .history-list) li) button{color:inherit;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;text-align:start;cursor:pointer;background:0 0;border:none;flex-grow:1;padding:.8em 0 .8em .5em;text-decoration:none;overflow:hidden}:is(:is(.history .history-list) li) input{color:inherit;background:0 0;border:none;outline:none;flex-grow:1;padding:.8em 0 .8em .5em}:is(:is(.history .history-list) li) .actions{opacity:0;flex-shrink:0;align-items:center;gap:6px;padding-right:.5em;transition:opacity .1s;display:inline-flex}:is(:is(:is(.history .history-list) li) .actions) button{color:inherit;cursor:pointer;background:0 0;border:none;padding:3px;line-height:0;transition:opacity .2s,scale .2s}:is(:is(:is(:is(.history .history-list) li) .actions) button):hover{opacity:.7}:is(:is(:is(:is(.history .history-list) li) .actions) button):active{scale:.9}:is(:is(:is(:is(.history .history-list) li) .actions) button) .icon{width:16px;height:16px}.demos .demos-item{color:var(--aside-bar-foreground);flex-direction:column;width:100%;padding:0 0 1em;display:flex}.demos .demos-item strong{text-overflow:ellipsis;display:block;overflow:hidden}.demos .demos-list{margin:.75em var(--panel-padding) 0;flex-direction:column;gap:.5em;padding:0;list-style:none;display:flex}.demos .demo-card{background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);width:100%;color:inherit;text-align:left;cursor:pointer;border:1px solid #0000;border-radius:10px;flex-direction:column;align-items:flex-start;gap:.35em;padding:.85em .8em;transition:background-color .2s,border-color .2s;display:flex}:is(.demos .demo-card):hover{background:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}.is-active:is(.demos .demo-card){background:color-mix(in srgb, var(--aside-bar-foreground) 12%, transparent);border-color:color-mix(in srgb, var(--aside-bar-foreground) 16%, transparent)}.is-loading:is(.demos .demo-card){opacity:.6;cursor:progress}:is(.demos .demo-card) strong{font-size:.95rem}.demos .demo-card-description{opacity:.7;font-size:.8rem;line-height:1.4}.ai-chat{min-height:100%;color:var(--aside-bar-foreground);flex-direction:column;display:flex}.ai-chat-content,.ai-chat-item{flex-direction:column;flex:1;min-height:100%;display:flex}.ai-chat-header span[data-translate=aiChatDescription]{opacity:.65;margin-top:.35em;font-size:.85em;line-height:1.4;display:block}.ai-chat-actions{justify-content:flex-end;align-items:center;gap:6px;margin-top:1em;display:flex}.ai-chat-actions button{background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);border:1px solid color-mix(in srgb, var(--aside-bar-foreground) 8%, transparent);color:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 8px 6px 6px;transition:background-color .2s,scale .2s;display:flex}:is(.ai-chat-actions button):hover{background-color:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}:is(.ai-chat-actions button):active{background-color:color-mix(in srgb, var(--aside-bar-foreground) 16%, transparent);scale:.95}:is(.ai-chat-actions button) .icon{width:16px;height:16px}.ai-chat-status{margin:0 var(--panel-padding);background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);opacity:.8;border-radius:8px;padding:.55em .7em;font-size:.8rem;line-height:1.4}.ai-chat-status[hidden]{display:none}.ai-chat-messages{flex-direction:column;flex:1;gap:.65em;margin:.75em 0 0;padding:0 0 1em;list-style:none;display:flex}.ai-chat-message{margin:0 var(--panel-padding);background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);border-radius:10px;padding:.75em .8em}.ai-chat-message strong{letter-spacing:.02em;opacity:.55;margin-bottom:.35em;font-size:.75rem;display:block}.ai-chat-message.is-user{background:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}.ai-chat-message.is-pending .ai-chat-message-body:empty:after{content:"…";opacity:.5}.ai-chat-message-body{word-break:break-word;font-size:.85rem;line-height:1.45}.ai-chat-message-body pre{background:color-mix(in srgb, var(--aside-bar-foreground) 8%, transparent);font-family:var(--mono-font);border-radius:8px;margin:.6em 0 0;padding:.65em .7em;font-size:.78rem;overflow-x:auto}.ai-chat-message-body code{font-family:var(--mono-font);font-size:.8em}.ai-chat-message-body pre code{font-size:inherit}.ai-chat-form{z-index:1;padding:.75rem var(--panel-padding) 1rem;background:var(--aside-bar-background);gap:6px;display:flex;position:sticky;bottom:0}.ai-chat-form .input{background-color:var(--input-background);border:1px solid var(--input-border);min-width:0;color:var(--input-foreground);border-radius:10px;flex:1;align-items:center;padding:.55em .7em;font-size:1rem;display:flex}.ai-chat-form .input input{width:100%;color:var(--input-foreground);background-color:#0000;border:none;outline:none;padding:.05em}.ai-chat-send{border:1px solid color-mix(in srgb, var(--aside-bar-foreground) 8%, transparent);background:color-mix(in srgb, var(--aside-bar-foreground) 6%, transparent);width:40px;height:40px;color:inherit;cursor:pointer;border-radius:10px;flex-shrink:0;place-items:center;transition:background-color .2s;display:grid}.ai-chat-send:hover:not(:disabled){background-color:color-mix(in srgb, var(--aside-bar-foreground) 10%, transparent)}.ai-chat-send .icon{width:16px;height:16px}.scroll-buttons-container{display:none}.preview{position:relative}.iframe-container{min-height:0;overflow:hidden}.preview-error{z-index:2;background:color-mix(in srgb, var(--log-error) 22%, var(--island-background));color:var(--app-foreground);border-bottom:1px solid color-mix(in srgb, var(--log-error) 45%, transparent);align-items:center;gap:.5rem;padding:.7rem .75rem;display:flex;position:absolute;top:0;left:0;right:0}.preview-error .icon{width:18px;height:18px;color:var(--log-error)}.preview-error p{flex:1;margin:0;font-size:.85rem;line-height:1.35}.preview-error-close{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;place-items:center;padding:0;display:grid}.preview-error-close:hover{opacity:1}body{height:100dvh}@media (width<=650px){#app{padding:var(--island-gap);grid-template-columns:1fr}aside{width:calc(100% - var(--island-gap) * 2);height:auto;top:var(--island-gap);left:var(--island-gap);z-index:10;gap:var(--island-gap);flex-direction:column;transition:top .2s;display:flex;position:absolute}.aside-bar{width:100%;max-height:calc(100dvh - 72px)}.aside-sections{flex-direction:row;width:100%;height:fit-content;padding:4px 8px}.aside-sections>header,.aside-sections>footer{flex-direction:row;gap:0 4px}.bar-button{transform:scale(.9)}aside button:hover .button-title{display:none}[data-action=toggle-layout-switcher],.layout-switcher{display:none!important}.search-results{max-width:90vw}#editor{height:100%;min-height:0;padding-top:56px}.gutter-col,.gutter-row,.gutter-center,.first-gutter,.second-gutter,.last-gutter{display:none!important}.iPadShowKeyboard{display:none}}button:disabled,button:hover:disabled{opacity:.2;cursor:not-allowed}.spinner{border:3px solid #0000001a;border-left-color:#c5c5c5;border-radius:50%;width:26px;height:26px;margin:auto;animation:1s linear infinite spin}