@font-face{font-family:Cascadia Code PL;src:url(/assets/CascadiaCodePL-cKdjcb8w.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Cascadia Code PL;src:url(/assets/CascadiaCodePLItalic-CHVS92sg.woff2)format("woff2");font-weight:400;font-style:italic}:root{--color-white:#fff;--color-snow:#f0f0f0;--color-bon-jour:#dedede;--color-whisper:#ccc;--color-mist:#bababa;--color-dove:#a8a8a8;--color-manatee:#969696;--color-iron:#848484;--color-rain-cloud:#727272;--color-steel:#606060;--color-slate:#4e4e4e;--color-dark:#3c3c3c;--color-dusk:#2a2a2a;--color-shadow:#181818;--color-night:#060606;--color-black:#000;--color-blue-500:#3282f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-orange-600:#ea580c;--color-yellow-400:#facc15;--aside-bar-width-height:51px;--gutter-width:22px}*,:before,:after{box-sizing:border-box}body{background-color:var(--color-night);--webkit-font-smoothing:antialiased;--moz-osx-font-smoothing:grayscale;width:100vw;height:100dvh;margin:0;padding:0;font-family:Cascadia Code PL,Menlo,Monaco,Courier New,"monospace",Consolas,monospace;font-size:16px;line-height:1.4;position:fixed;overflow:hidden}#app{grid-template-columns:auto 1fr;display:grid;overflow:hidden}iframe{background-color:var(--color-snow);border:none;width:100%;height:100%;padding:12px}#javascript:after{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='800'%20preserveAspectRatio='xMinYMin%20meet'%20viewBox='0%200%20256%20256'%3e%3cpath%20fill='%23F7DF1E'%20d='M0%200h256v256H0V0z'/%3e%3cpath%20d='m67.312%20213.932%2019.59-11.856c3.78%206.701%207.218%2012.371%2015.465%2012.371%207.905%200%2012.89-3.092%2012.89-15.12v-81.798h24.057v82.138c0%2024.917-14.606%2036.259-35.916%2036.259-19.245%200-30.416-9.967-36.087-21.996m85.07-2.576%2019.588-11.341c5.157%208.421%2011.859%2014.607%2023.715%2014.607%209.969%200%2016.325-4.984%2016.325-11.858%200-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257%200-18.044%2013.747-31.792%2035.228-31.792%2015.294%200%2026.292%205.328%2034.196%2019.247l-18.732%2012.03c-4.125-7.389-8.591-10.31-15.465-10.31-7.046%200-11.514%204.468-11.514%2010.31%200%207.217%204.468%2010.14%2014.778%2014.608l6.014%202.577c20.45%208.765%2031.963%2017.7%2031.963%2037.804%200%2021.654-17.012%2033.51-39.867%2033.51-22.339%200-36.774-10.654-43.819-24.574'/%3e%3c/svg%3e") right 10px bottom 10px/35px no-repeat}#css:after{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='800'%20fill='none'%20viewBox='0%200%2032%2032'%3e%3cpath%20fill='%231172B8'%20d='M6%2028%204%203h24l-2%2025-10%203-10-3Z'/%3e%3cpath%20fill='%233AD'%20d='M26%205H16v24.5l8-2.5%202-22Z'/%3e%3cpath%20fill='%23fff'%20d='M19.5%2017.5h-10L9%2014l8-2.5H9l-.5-3H24l-.5%203.5-6.5%202.5h6L22%2024l-6%202-6-2-.5-5h3l.5%202.5%203%201%203-1%20.5-4Z'/%3e%3c/svg%3e") right 10px bottom 10px/35px no-repeat}#html:after{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='800'%20fill='none'%20viewBox='0%200%2032%2032'%3e%3cpath%20fill='%23E44D26'%20d='M6%2028%204%203h24l-2%2025-10%203-10-3Z'/%3e%3cpath%20fill='%23F16529'%20d='M26%205H16v24.5l8-2.5%202-22Z'/%3e%3cpath%20fill='%23fff'%20d='M9.5%2017.5%208.5%208H24l-.5%203h-12l.5%203.5h11L22%2024l-6%202-6-2-.5-5h3l.5%202.5%203%201%203-1%20.5-4h-10Z'/%3e%3c/svg%3e") right 10px bottom 10px/35px no-repeat}.editor{position:relative;overflow:hidden}.editor:after{content:"";z-index:5;width:48px;height:48px;position:absolute;bottom:6px;right:16px}.preview{position:relative}#editor .scroll-buttons-container{display:none}.grid{grid-template-areas:"editor-html.editor-javascript"". . .""editor-css.editor-preview";grid-template-columns:1fr var(--gutter-width) 1fr;grid-template-rows:1fr var(--gutter-width) 1fr;height:100vh;display:grid}.grid[data-layout=layout-2]{grid-template-areas:"editor-html.editor-css"". . .""editor-javascript.editor-preview"}.grid[data-layout=vertical]{grid-template-areas:"editor-html.editor-javascript.editor-css.editor-preview"}.grid[data-layout=vertical] .first-gutter{cursor:col-resize;grid-area:1/2/1/2}.grid[data-layout=vertical] .second-gutter{cursor:col-resize;grid-area:1/4/1/4}.grid[data-layout=vertical] .third-gutter{cursor:col-resize;grid-area:1/6/1/6}.grid[data-layout=horizontal]{grid-template-areas:"editor-html"".""editor-javascript"".""editor-css"".""editor-preview"}.grid[data-layout=horizontal] .first-gutter{cursor:row-resize;grid-area:2/1/2/1}.grid[data-layout=horizontal] .second-gutter{cursor:row-resize;grid-area:4/1/4/1}.grid[data-layout=horizontal] .third-gutter{cursor:row-resize;grid-area:6/1/6/1}.grid #html{grid-area:editor-html}.grid #css{grid-area:editor-css}.grid #javascript{grid-area:editor-javascript}.grid #editor-preview{grid-area:editor-preview}.first-gutter{cursor:col-resize;grid-area:1/2/4/2}.second-gutter{cursor:all-scroll;z-index:1;grid-area:2/2/2/2}.third-gutter{cursor:row-resize;grid-area:2/1/2/4}[data-position=vertical],[data-position=horizontal],[data-position=""]{justify-content:space-around;align-items:center;width:100%;display:flex}:is([data-position=vertical],[data-position=horizontal],[data-position=""]):hover .resizer-separator{background-color:var(--color-blue-600);transition:background-color .5s,transform .2s;transform:scale(1.05)}.resizer-separator{background-color:var(--color-dark);z-index:1;border-radius:.25rem}[data-position=vertical]{flex-direction:column}[data-position=vertical] .resizer-separator{width:.3rem;height:15rem}[data-position=horizontal] .resizer-separator{width:15rem;height:.3rem}aside{background-color:var(--color-dark);display:flex}aside .aside-bar{background-color:var(--color-dusk);scrollbar-gutter:stable;width:350px;height:100vh;overflow:auto}aside .aside-sections{height:100%;width:var(--aside-bar-width-height);flex-direction:column;justify-content:space-between;display:flex}aside .aside-sections button{cursor:pointer;opacity:.5;background:0 0;border:0;border-left:3px solid #0000;width:100%;padding:16px 0;transition:opacity .1s;position:relative}aside .aside-sections button.is-active{opacity:1;border-left:3px solid var(--color-snow)}aside .aside-sections button:hover{opacity:1}aside .aside-sections button:hover .button-title{display:block}aside .aside-sections button svg{width:25px;height:25px}aside .aside-sections button svg path{fill:var(--color-bon-jour)}aside .aside-sections button .button-title{color:var(--color-whisper);z-index:1;background-color:var(--color-dark);border-radius:3px;padding:.5em .75em;font-size:1.1em;display:none;position:absolute;right:-10px;transform:translate(100%);box-shadow:0 0 15px 2px #0000004d}aside .aside-sections button .button-title:after{content:"";border-top:.5em solid #0000;border-bottom:.5em solid #0000;border-right:.5em solid var(--color-dark);width:0;height:0;position:absolute;top:50%;left:1px;right:0;transform:translate(-100%,-50%)}aside .aside-sections button .button-title:before{content:"";border-top:.5em solid #0000;border-bottom:.5em solid #0000;width:0;height:0;position:absolute;top:50%;left:0;right:0;transform:translate(-100%,50%)}aside .aside-sections header,aside .aside-sections footer{flex-direction:column;justify-content:center;display:flex}#tooltip{background-color:var(--color-dark);color:var(--color-snow);border-radius:4px;padding:5px 10px;font-size:13px;display:none}#tooltip[data-show]{display:block}#settings{height:100vh}select,.input{background-color:var(--color-dusk);color:var(--color-bon-jour);border:1px solid var(--color-dove);border-radius:.5em;width:100%;height:35px;margin-top:8px;padding:2px 10px}[hidden]{display:none!important}.settings .settings-content{flex-direction:column;height:100%;display:flex}.settings .settings-type{opacity:.6}.settings .settings-item{color:var(--color-white);flex-direction:column;width:100%;max-width:500px;padding:1em;display:flex}.settings .settings-item:hover{background-color:#80808024}.settings .settings-item .layout-preview-container{justify-content:space-between;padding:10px 0;display:flex}.settings .settings-item .layout-preview-container .layout-preview{cursor:pointer;grid-template:"html javascript"1fr"css result"1fr/1fr 1fr;gap:2px;width:40px;height:40px;padding:5px;display:grid}.settings .settings-item .layout-preview-container .layout-preview.active{background-color:var(--color-iron);border-radius:5px}.settings .settings-item .layout-preview-container .layout-preview#layout-2{grid-template-areas:"html css""javascript result"}.settings .settings-item .layout-preview-container .layout-preview#vertical{grid-template-rows:1fr;grid-template-columns:repeat(4,1fr);grid-template-areas:"html javascript css result"}.settings .settings-item .layout-preview-container .layout-preview#horizontal{grid-template-rows:repeat(4,1fr);grid-template-columns:1fr;grid-template-areas:"html""javascript""css""result"}.settings .settings-item .layout-preview-container .layout-preview .layout-preview-html{background-color:var(--color-orange-600);grid-area:html}.settings .settings-item .layout-preview-container .layout-preview .layout-preview-css{background-color:var(--color-blue-600);grid-area:css}.settings .settings-item .layout-preview-container .layout-preview .layout-preview-javascript{background-color:var(--color-yellow-400);grid-area:javascript}.settings .settings-item .layout-preview-container .layout-preview .layout-preview-result{background-color:var(--color-white);grid-area:result}.settings .checkbox{align-items:center;display:flex}.settings .checkbox input{clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.settings .checkbox input:focus+span:before{content:"";outline:1px solid var(--color-white)}.settings .checkbox span{align-items:center;display:flex}.settings .checkbox span:before{background:var(--color-dusk);border:1px solid var(--color-dove);color:var(--color-bon-jour);content:"";border-radius:3px;justify-content:center;align-items:center;width:25px;min-width:20px;height:20px;margin-right:16px;display:flex}.settings .checkbox input:checked+span:before{content:"✓"}:is(.skypack,.image-search) .skypack-content{justify-content:center;height:100%;display:grid}:is(.skypack,.image-search) .skypack-type{opacity:.6;padding-bottom:8px}:is(.skypack,.image-search) .skypack-item{color:var(--color-bon-jour);flex-direction:column;width:100%;max-width:350px;padding:1em;display:flex}:is(.skypack,.image-search) .skypack-item strong{display:block}:is(.skypack,.image-search) .skypack-item a{color:var(--color-blue-600);justify-content:end;margin:1em 0;text-decoration:none;display:flex}:is(.skypack,.image-search) .skypack-item a:hover{text-decoration:underline}:is(.skypack,.image-search) .skypack-item .input{background-color:var(--color-dusk);border:1px solid var(--color-dove);color:var(--color-bon-jour);align-items:center;margin-top:16px;padding:2px 10px;display:flex}:is(.skypack,.image-search) .skypack-item .input .input-icon{fill:#80808080}:is(.skypack,.image-search) .skypack-item .input input{width:100%;color:var(--color-bon-jour);background-color:#0000;border:none;outline:none;padding:.05em .05em .05em 8px}:is(.skypack,.image-search) .skypack-item .skypack-header{z-index:1;background-color:var(--color-dusk);padding-top:1em;position:sticky;top:0}:is(.skypack,.image-search) .skypack-item .search-results.hidden{display:none}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul{margin:.5em 0;padding:0;list-style:none}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li{border:1px solid var(--color-shadow);cursor:pointer;white-space:nowrap;border-radius:5px;flex-direction:column;margin:.5em 0;padding:.5em;display:flex}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li:hover{background-color:#80808040}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header{flex-direction:column-reverse;display:flex}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header .skypack-result-badges{justify-content:flex-end;align-items:flex-end;display:flex}:is(.skypack,.image-search) .skypack-item .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}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header .skypack-result-badges .skypack-badge.popular{color:#000;background-color:#80b918}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header .skypack-result-badges .skypack-badge.deprecated{color:#fff;background-color:#c81d25}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header .skypack-result-badges .skypack-badge.exact-match{color:#000;background-color:#ffc300}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li header .skypack-result-badges .skypack-badge.typescript{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J25vbmUnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHJlY3Qgd2lkdGg9JzE2JyBoZWlnaHQ9JzE2JyBmaWxsPScjMzE2N0ZGJyByeD0nMicvPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J000LjIgOS40SDZWMTVoMS41VjkuNGgxLjlWOEg0LjJ2MS40em01LjkgNS4xYy42LjQgMS41LjYgMi40LjYgMS42IDAgMi42LTEgMi42LTIuMiAwLTEuNS0xLjMtMS45LTIuMy0yLjEtLjctLjItMS4zLS4zLTEuMy0uOCAwLS40LjQtLjcgMS4xLS43LjggMCAxLjUuMyAyLjIuOFY4LjRhNCA0IDAgMCAwLTIuMi0uNUMxMSA3LjkgMTAgOC43IDEwIDEwYzAgMS4zIDEgMS43IDIgMiAuOC4yIDEuNS4zIDEuNS45IDAgLjQtLjQuNy0xIC43LS44IDAtMS44LS4zLTIuNC0xdjEuOHonLz48L3N2Zz4=) 50% no-repeat;width:18px;height:18px}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li section{text-overflow:ellipsis;font-size:.9em;overflow:hidden}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer{justify-content:space-between;align-items:flex-end;margin-top:.5em;display:flex}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer .skypack-updated{opacity:.5;font-size:.8em}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer .skypack-open{opacity:0;font-size:.7em;text-decoration:none}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer .skypack-open:hover{text-decoration:underline}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer div{display:flex}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li footer div a{margin:0;padding-right:5px}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li:focus,:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li:hover{background-color:#5050501a}:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li:focus .skypack-open,:is(.skypack,.image-search) .skypack-item .search-results .extensions ul li:hover .skypack-open{opacity:1}:is(.skypack,.image-search) .skypack-item .search-results .container-image-results{columns:2 120px;column-gap:.2em}:is(.skypack,.image-search) .skypack-item .search-results .container-image-results img{cursor:pointer;width:100%;margin-bottom:.2em;transition:opacity .3s;display:block}:is(.skypack,.image-search) .skypack-item .search-results .container-image-results img:hover{opacity:.7}:is(:is(.skypack,.image-search) .skypack-item .search-results .extensions,:is(.skypack,.image-search) .skypack-item .search-results .container-image-results) .spinner{border:3px solid #0000001a;border-left-color:var(--color-whisper);border-radius:50%;width:26px;height:26px;margin:auto;animation:1s linear infinite spin}:is(.skypack,.image-search) .skypack-item .search-results-message .logo-pixabay{justify-content:center;margin-top:16px;display:flex}.skypack .search-results ul li:focus .skypack-open,.skypack .search-results ul li:hover .skypack-open{opacity:1}@keyframes spin{0%{transform:rotate(-360deg)}}:root{--scrollbar-width:10px}::-webkit-scrollbar{width:var(--scrollbar-width)}::-webkit-scrollbar-track{background-color:var(--color-rain-cloud)}::-webkit-scrollbar-thumb{background-color:var(--color-whisper)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-bon-jour)}@media (width<=650px){#app{grid-template-columns:1fr}#app aside{z-index:6;flex-direction:column;width:100%;display:flex;position:absolute;top:0}#app aside .aside-sections{width:100%;height:var(--aside-bar-width-height);flex-direction:row;justify-content:space-between;padding-inline:5px}#app aside .aside-sections header,#app aside .aside-sections footer{flex-direction:row}:is(#app aside .aside-sections header,#app aside .aside-sections footer) button{opacity:.5;border-top:3px solid #0000;border-left:none;padding:10px}:is(#app aside .aside-sections header,#app aside .aside-sections footer) button.is-active{border-left:none;border-top:3px solid var(--color-snow);opacity:1}:is(#app aside .aside-sections header,#app aside .aside-sections footer) button:hover .button-title{display:none}:is(#app aside .aside-sections header,#app aside .aside-sections footer) button.bar-button>svg{transform:scale(.8)}#app aside .aside-bar{justify-content:center;width:100%;display:flex;overflow:scroll}#app aside .aside-bar .settings .settings-item{width:100vw;max-width:500px;display:flex}#app #editor{margin:var(--aside-bar-width-height) 0 0 0;flex-direction:column;display:flex;overflow:scroll}#app #editor .scroll-buttons-container{gap:0 .6em;display:flex;position:absolute;bottom:1em;right:2em}#app #editor .scroll-buttons-container .scroll-button{aspect-ratio:1;background-color:var(--color-blue-500);cursor:pointer;z-index:5;border:none;border-radius:50%;width:4em}#app #editor .scroll-buttons-container .scroll-button svg{width:20px}#app #editor .first-gutter,#app #editor .second-gutter,#app #editor .third-gutter{display:none}#app #editor .editor,#app #editor iframe{min-height:100vh}.margin{max-width:10px}#html .margin{background:#f33e15}#css .margin{background:#1e90ff}#javascript .margin{background:gold}.iPadShowKeyboard{display:none}}#notifications{z-index:1000;flex-direction:column;display:flex;position:relative}#notifications #notifications-wrapper{width:fit-content;height:fit-content;position:fixed;bottom:10px;right:10px}#notifications #notifications-wrapper .notification{border:1px solid var(--color-black);box-shadow:0 0 15px 2px var(--color-manatee);background-color:var(--color-dusk);color:var(--color-bon-jour);-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:1.5rem;align-items:center;column-gap:.5rem;margin-bottom:1rem;padding:.75rem;transition:opacity cubic-bezier(.215,.61,.455,1);display:flex}#notifications #notifications-wrapper .notification .icon-close{color:var(--color-mist);margin-left:.5rem}#notifications #notifications-wrapper .notification .icon-close :hover{color:var(--color-bon-jour)}#notifications #notifications-wrapper .notification .notification__icon,#notifications #notifications-wrapper .notification .notification__message,#notifications #notifications-wrapper .notification .icon-close{align-self:center;display:flex}#notifications #notifications-wrapper .notification.bounce-leave{animation:.4s bounceOutDown}#notifications #notifications-wrapper .notification.notification--info .notification__icon{color:#6199cb}#notifications #notifications-wrapper .notification.notification--warning .notification__icon{color:#c3a001}#notifications #notifications-wrapper .notification.notification--danger .notification__icon{color:#a34535}#notifications #notifications-wrapper.notification--top-left{top:10px;left:10px}#notifications #notifications-wrapper.notification--top-center{top:10px;left:50%;transform:translate(-50%)}#notifications #notifications-wrapper.notification--top-right{top:10px;right:10px}#notifications #notifications-wrapper.notification--bottom-left{bottom:10px;left:10px}#notifications #notifications-wrapper.notification--bottom-center{bottom:10px;left:50%;transform:translate(-50%)}#notifications #notifications-wrapper.notification--bottom-right{bottom:10px;right:10px}#notifications #notifications-wrapper[class|=notification--bottom] .bounce-active{animation:.4s bounceInUp}#notifications #notifications-wrapper[class|=notification--top] .bounce-active{animation:.4s bounceInDown}#notifications #notifications-wrapper[class|=notification--top] .bounce-leave{animation:.4s bounceOutUp}#notifications #notifications-wrapper[class|=notification--bottom] .bounce-leave{animation:.4s bounceOutDown}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.455,1)}0%{opacity:0;transform:translateY(-3000px)}60%{opacity:1;transform:translateY(25px)}75%{transform:translateY(-10px)}90%{transform:translateY(5px)}to{transform:none}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.455,1)}0%{opacity:0;transform:translateY(3000px)}60%{opacity:1;transform:translateY(-20px)}75%{transform:translateY(10px)}90%{transform:translateY(-5px)}to{transform:translate(0,0)}}@keyframes bounceOutDown{20%{transform:translateY(10px)}40%,45%{opacity:1;transform:translateY(-20px)}to{opacity:0;transform:translateY(2000px)}}@keyframes bounceOutUp{20%{transform:translateY(-10px)}40%,45%{opacity:1;transform:translateY(20px)}to{opacity:0;transform:translateY(-2000px)}}