@layer fonts{@font-face{font-family:Inclusive Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Inclusive_Sans/InclusiveSans-Regular.woff2) format("woff2")}@font-face{font-family:Inclusive Sans;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/Inclusive_Sans/InclusiveSans-Italic.woff2) format("woff2")}@font-face{font-family:Inclusive Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Inclusive_Sans/InclusiveSans-Bold.woff2) format("woff2")}@font-face{font-family:Inclusive Sans;font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/Inclusive_Sans/InclusiveSans-BoldItalic.woff2) format("woff2")}@font-face{font-family:Fira Code;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Fira_Code/FiraCode-Regular.woff2) format("woff2")}@font-face{font-family:Fira Code;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Fira_Code/FiraCode-Bold.woff2) format("woff2")}}@layer colors{:root{--accent: light-dark(oklch(34.56% .23278 267.033), oklch(81.021% .09582 276.211));--text: light-dark(black, white);--inverted-text: light-dark(white, black);--link-color: var(--accent);--background: light-dark(rgb(230 230 240), rgb(15 15 25));--grey: rgb(127, 127, 137);--background-transparent: light-dark( rgb(255, 255, 255), rgb(35, 35, 45) );--shadow-color: light-dark(rgba(0 0 0 / .2), rgb(0 0 0));--backdrop-color: light-dark(rgba(10, 10, 20, .1), rgba(10, 10, 20, .2));--border-color: light-dark( color-mix(var(--grey), var(--background) 65%), color-mix(var(--grey), var(--background) 45%) );--border-color-transparent: light-dark( color-mix(in hsl, var(--border-color), white 20%), color-mix(in hsl, var(--border-color), black 50%) );--controls-hover: light-dark( color-mix(var(--grey), var(--inverted-text) 87%), color-mix(var(--grey), var(--background) 60%) );--controls-background: var(--background-transparent);--checked-controls-background: light-dark( oklch(from var(--grey) calc(l + .32) calc(c - .01) h), oklch(from var(--grey) calc(l - .45) calc(c - .01) h) );--slide-background-transparency: 87%;--red: color-mix( in srgb, oklch(70% .3 25), var(--inverted-text) var(--slide-background-transparency) );--orange: color-mix( in srgb, oklch(70% .27 70), var(--inverted-text) var(--slide-background-transparency) );--yellow: color-mix( in srgb, oklch(75% .26 95), var(--inverted-text) var(--slide-background-transparency) );--lime: color-mix( in srgb, oklch(72% .25 130), var(--inverted-text) var(--slide-background-transparency) );--green: color-mix( in srgb, oklch(65% .21 145), var(--inverted-text) var(--slide-background-transparency) );--emerald: color-mix( in srgb, oklch(62% .18 160), var(--inverted-text) var(--slide-background-transparency) );--teal: color-mix( in srgb, oklch(60% .16 175), var(--inverted-text) var(--slide-background-transparency) );--cyan: color-mix( in srgb, oklch(65% .14 195), var(--inverted-text) var(--slide-background-transparency) );--azure: color-mix( in srgb, oklch(60% .16 215), var(--inverted-text) var(--slide-background-transparency) );--blue: color-mix( in srgb, oklch(55% .27 250), var(--inverted-text) var(--slide-background-transparency) );--indigo: color-mix( in srgb, oklch(50% .28 270), var(--inverted-text) var(--slide-background-transparency) );--violet: color-mix( in srgb, oklch(52% .29 290), var(--inverted-text) var(--slide-background-transparency) );--purple: color-mix( in srgb, oklch(50% .3 305), var(--inverted-text) var(--slide-background-transparency) );--magenta: color-mix( in srgb, oklch(55% .31 320), var(--inverted-text) var(--slide-background-transparency) );--pink: color-mix( in srgb, oklch(65% .31 345), var(--inverted-text) var(--slide-background-transparency) );--rose: color-mix( in srgb, oklch(68% .3 5), var(--inverted-text) var(--slide-background-transparency) )}}@layer other-variables{:root{--base-font: "Inclusive Sans", sans-serif;--code-font: "Fira Code", monospace;--spacing: 30px;--blur: 30px;--shadow-spread: 20px;--radius: .2em;--min-height-controls: 44px}}@layer code-highlight{pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}}@layer fonts,base,colors,other-variables,code-highlight;@layer base{:root{color-scheme:light dark}*{box-sizing:border-box;letter-spacing:.5px}@media(pointer:fine){html.fullscreen ::-webkit-scrollbar{width:0}}body{background:var(--background);margin:0;font-family:var(--base-font)}kbd,code,pre{font-family:var(--code-font)}pre code{white-space:pre-wrap}input{font:inherit;background:var(--background)}button{font:inherit}a{color:var(--link-color);text-underline-offset:.15rem}a:visited{color:var(--link-color)}a:hover,a:focus-visible{text-underline-offset:.2rem}.sr-only:not(:focus):not(:focus-visible):not(:active){clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus{outline:none}:focus-visible{outline:auto}:target{animation:highlightTarget 4s ease-in-out;border-radius:2px}@keyframes highlightTarget{0%{box-shadow:0 0 0 0 transparent}15%{box-shadow:0 0 0 .2lh color-mix(in hsl,var(--text),transparent 50%)}to{box-shadow:0 0 0 0 transparent}}button:not(app-slide button){position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--controls-background);border:1px solid var(--border-color);border-radius:var(--radius);padding:0 calc(var(--spacing) / 3);min-width:var(--min-height-controls);min-height:var(--min-height-controls)}button:not(app-slide button):not([disabled]):active{opacity:.8;scale:1}button:not(app-slide button)[disabled]{opacity:.5}button:not(app-slide button):hover .tooltip,button:not(app-slide button):focus-visible .tooltip{opacity:1;visibility:visible}button:not(app-slide button):not([disabled]):hover{background:var(--controls-hover)}button:not(app-slide button) .tooltip{opacity:0;visibility:hidden;position:absolute;top:calc(100% + var(--spacing) / 6);right:0;text-wrap:nowrap;color:var(--inverted-text);background:color-mix(in hsl,var(--text),transparent 10%);border-radius:var(--radius);font-size:.9em;padding:calc(var(--spacing) / 6) calc(var(--spacing) / 3)}button:not(app-slide button) .tooltip kbd{-webkit-text-stroke:.5px currentColor}button:not(app-slide button) .icon{display:flex;justify-content:center;align-items:center}button:not(app-slide button) .icon svg{--svg-size: 18px;height:var(--svg-size);width:var(--svg-size)}}
