@font-face{font-family:DepartureMono;src:url(../fonts/DepartureMono/DepartureMono-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--color-accent:#5da0f2;--banner-height:80px;--canvas-top-pad:23px;--canvas-view-h:calc(100dvh - var(--banner-height) - var(--canvas-top-pad))}*,:before,:after{box-sizing:border-box}::selection{background:var(--color-accent);color:#000}html,body{min-height:100%;margin:0;overflow-x:hidden}body{-webkit-user-select:none;user-select:none;background:#000}#demo-source .shiki{-webkit-user-select:text;user-select:text}#canvas-container{width:100%;padding-top:var(--canvas-top-pad);justify-content:center;align-items:flex-start;display:flex}#canvas-container canvas{image-rendering:pixelated;max-width:var(--canvas-max-w,960px);max-height:var(--canvas-max-h,720px);width:min(100dvw, calc(var(--canvas-view-h) * var(--canvas-aspect-w,640) / var(--canvas-aspect-h,480)), var(--canvas-max-w,960px), calc(var(--canvas-max-h,720px) * var(--canvas-aspect-w,640) / var(--canvas-aspect-h,480)));height:min(var(--canvas-view-h), calc(100dvw * var(--canvas-aspect-h,480) / var(--canvas-aspect-w,640)), var(--canvas-max-h,720px), calc(var(--canvas-max-w,960px) * var(--canvas-aspect-h,480) / var(--canvas-aspect-w,640)));outline:none;display:block}@supports (image-rendering:crisp-edges){#canvas-container canvas{image-rendering:crisp-edges}}#demo-banner{height:var(--banner-height);box-sizing:border-box;z-index:20;color:#2d2e31;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5;background:lab(96.52% -.0000298023 .0000119209);grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:8px 12px;font-family:DepartureMono,monospace;font-size:11px;display:grid;position:relative;overflow:visible}#demo-banner:empty{padding:0}#demo-banner .demo-banner-logo{grid-column:1;justify-self:start;align-items:center;display:inline-flex}#demo-banner .demo-banner-logo-light,#demo-banner .demo-banner-logo-dark{image-rendering:pixelated}#demo-banner .demo-banner-logo-light{display:block}#demo-banner .demo-banner-logo-dark{display:none}#demo-banner .demo-banner-nav{grid-column:2;justify-self:center;align-items:center;gap:2px;min-width:0;display:flex}#demo-banner button{color:#fff;cursor:pointer;width:30px;height:30px;font:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#2d2e31;border:none;font-size:11px;line-height:1}#demo-banner button:disabled{opacity:.35;cursor:not-allowed;color:#2d2e31;background:0 0}#demo-banner .demo-banner-arrow{position:relative}#demo-banner .demo-banner-arrow-glyph{display:block}#demo-banner .demo-banner-arrow-tooltip{opacity:0;pointer-events:none;z-index:30;color:#2d2e31;white-space:nowrap;text-overflow:ellipsis;background:#f8f8f8;border:1px solid #f8f8f8;max-width:220px;padding:6px 8px;transition:opacity .3s;position:absolute;top:50%;overflow:hidden;transform:translateY(-50%)}:is(#demo-banner .demo-banner-arrow-tooltip):before{content:"";pointer-events:none;background:#f8f8f8;width:6px;height:6px;margin-top:-3px;position:absolute;top:50%;transform:rotate(45deg)}#demo-banner #demo-banner-prev .demo-banner-arrow-tooltip{left:auto;right:calc(100% + 8px)}:is(#demo-banner #demo-banner-prev .demo-banner-arrow-tooltip):before{border-top:1px solid #f8f8f8;border-right:1px solid #f8f8f8;left:auto;right:-4px}#demo-banner #demo-banner-next .demo-banner-arrow-tooltip{left:calc(100% + 8px);right:auto}:is(#demo-banner #demo-banner-next .demo-banner-arrow-tooltip):before{border-bottom:1px solid #f8f8f8;border-left:1px solid #f8f8f8;left:-4px;right:auto}#demo-banner .demo-banner-arrow:hover:not(:disabled) .demo-banner-arrow-tooltip:not(:empty),#demo-banner .demo-banner-arrow:focus-visible:not(:disabled) .demo-banner-arrow-tooltip:not(:empty){opacity:1}@media (prefers-reduced-motion:reduce){#demo-banner .demo-banner-arrow-tooltip{transition:none}}#demo-banner .demo-banner-combobox{width:30vw;min-width:140px;max-width:420px;position:relative}#demo-banner .demo-banner-combobox-input{box-sizing:border-box;width:100%;color:inherit;font:inherit;-webkit-user-select:text;user-select:text;background:0 0;border:2px solid;outline:none;padding:6px 10px;display:block}:is(#demo-banner .demo-banner-combobox-input):focus{border-color:var(--color-accent)}#demo-banner .demo-banner-listbox{z-index:40;color:#2d2e31;background:#f5f5f5;background:lab(96.52% -.0000298023 .0000119209);border:2px solid #2d2e31;max-height:min(50vh,320px);margin:0;padding:2px;list-style:none;position:absolute;top:calc(100% + 2px);left:0;right:0;overflow:hidden auto}[hidden]:is(#demo-banner .demo-banner-listbox){display:none}#demo-banner .demo-banner-option{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;padding:6px 10px;overflow:hidden}.is-active:is(#demo-banner .demo-banner-option),:is(#demo-banner .demo-banner-option):hover{color:#fff;background:#2d2e31}#demo-banner .demo-banner-option.is-active .demo-banner-match,#demo-banner .demo-banner-option:hover .demo-banner-match{color:#9ec5f8}#demo-banner .demo-banner-listbox-empty{opacity:.45;pointer-events:none;text-align:center;padding:10px 12px}#demo-banner .demo-banner-live{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-color-scheme:dark){#demo-banner{color:#f5f5f5;color:lab(96.52% -.0000298023 .0000119209);background:#222}#demo-banner .demo-banner-logo-light{display:none}#demo-banner .demo-banner-logo-dark{display:block}#demo-banner button{color:#000;background:#f5f5f5;background:lab(96.52% -.0000298023 .0000119209)}#demo-banner button:disabled{color:#f5f5f5;color:lab(96.52% -.0000298023 .0000119209)}#demo-banner .demo-banner-arrow-tooltip{color:#f5f5f5;color:lab(96.52% -.0000298023 .0000119209);background:#2a2a2a;border-color:#f8f8f8}:is(#demo-banner .demo-banner-arrow-tooltip):before{background:#2a2a2a}#demo-banner #demo-banner-prev .demo-banner-arrow-tooltip:before{border-top-color:#f8f8f8;border-right-color:#f8f8f8}#demo-banner #demo-banner-next .demo-banner-arrow-tooltip:before{border-bottom-color:#f8f8f8;border-left-color:#f8f8f8}#demo-banner .demo-banner-listbox{color:#f5f5f5;color:lab(96.52% -.0000298023 .0000119209);background:#222;border-color:#f5f5f5;border-color:lab(96.52% -.0000298023 .0000119209)}#demo-banner .demo-banner-option.is-active,#demo-banner .demo-banner-option:hover{color:#000;background:#f5f5f5;background:lab(96.52% -.0000298023 .0000119209)}#demo-banner .demo-banner-option.is-active .demo-banner-match,#demo-banner .demo-banner-option:hover .demo-banner-match{color:#1a5fb4}}#demo-banner .demo-banner-match{color:var(--color-accent);text-decoration:underline}html[data-shell=true],html[data-shell=true] body{height:100%;overflow:hidden}html[data-shell=true] #canvas-container,html[data-shell=true] #demo-source{display:none}html[data-shell=true] #demo-frame{width:100%;height:calc(100dvh - var(--banner-height));background:#000;border:0;display:block}html[data-embed=true],html[data-embed=true] body{height:100%;overflow:hidden}html[data-embed=true] #demo-banner,html[data-embed=true] #demo-frame,html[data-embed=true] #channel-banner,html[data-embed=true] #demo-source{display:none}html[data-embed=true] #canvas-container{--canvas-view-h:calc(100dvh - var(--banner-height));height:var(--canvas-view-h);align-items:center;padding-top:0}html[data-embed=true][data-source=true],html[data-embed=true][data-source=true] body{height:auto;min-height:100%;overflow:hidden auto}html[data-embed=true][data-source=true] #demo-source{display:block}html[data-embed=true][data-source=true] #canvas-container{--canvas-view-h:calc(100dvh - var(--banner-height) - var(--canvas-top-pad));height:auto;padding-top:var(--canvas-top-pad);align-items:flex-start}