svg[data-astro-cid-3e7fkcuv]{position:absolute;top:0;z-index:-1}.unsupported[data-astro-cid-3e7fkcuv]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.content[data-astro-cid-3e7fkcuv]{background-color:#fff;padding:20px;border:4px solid black;max-width:500px}.supported[data-astro-cid-3e7fkcuv]{display:none}@media (min-width: 770px) and (min-height: 650px){.unsupported[data-astro-cid-3e7fkcuv]{display:none}.supported[data-astro-cid-3e7fkcuv]{display:block}}pre{overflow-x:initial!important}button[data-astro-cid-vsmt3qwm]{all:unset;cursor:pointer;position:absolute;top:10px;right:110px;@media (min-height: 750px){top:30px}width:50px;height:50px;border-radius:10px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;svg{fill:none;stroke-width:4}&:hover{box-shadow:0 0 10px #0000001a;background-color:#e0e0e0}}.slide-container[data-container=html] .note:nth-child(1 of.note){animation-timeline:--container-html;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-html-1}@keyframes note-animation-html-1{0%{opacity:0;pointer-events:none}25%{opacity:1;pointer-events:auto}50%{opacity:0;pointer-events:none}75%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=html] .note:nth-child(2 of.note){animation-timeline:--container-html;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-html-2}@keyframes note-animation-html-2{0%{opacity:0;pointer-events:none}25%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}75%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=html] .note:nth-child(3 of.note){animation-timeline:--container-html;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-html-3}@keyframes note-animation-html-3{0%{opacity:0;pointer-events:none}25%{opacity:0;pointer-events:none}50%{opacity:0;pointer-events:none}75%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=svg] .note:nth-child(1 of.note){animation-timeline:--container-svg;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-svg-4}@keyframes note-animation-svg-4{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:1;pointer-events:auto}66.6666666667%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=svg] .note:nth-child(2 of.note){animation-timeline:--container-svg;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-svg-5}@keyframes note-animation-svg-5{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}66.6666666667%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=circle] .note:nth-child(1 of.note){animation-timeline:--container-circle;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-circle-6}@keyframes note-animation-circle-6{0%{opacity:0;pointer-events:none}16.6666666667%{opacity:1;pointer-events:auto}33.3333333333%{opacity:0;pointer-events:none}50%{opacity:0;pointer-events:none}66.6666666667%{opacity:0;pointer-events:none}83.3333333333%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=circle] .note:nth-child(2 of.note){animation-timeline:--container-circle;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-circle-7}@keyframes note-animation-circle-7{0%{opacity:0;pointer-events:none}16.6666666667%{opacity:0;pointer-events:none}33.3333333333%{opacity:1;pointer-events:auto}50%{opacity:0;pointer-events:none}66.6666666667%{opacity:0;pointer-events:none}83.3333333333%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=circle] .note:nth-child(3 of.note){animation-timeline:--container-circle;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-circle-8}@keyframes note-animation-circle-8{0%{opacity:0;pointer-events:none}16.6666666667%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}66.6666666667%{opacity:0;pointer-events:none}83.3333333333%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=circle] .note:nth-child(4 of.note){animation-timeline:--container-circle;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-circle-9}@keyframes note-animation-circle-9{0%{opacity:0;pointer-events:none}16.6666666667%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}50%{opacity:0;pointer-events:none}66.6666666667%{opacity:1;pointer-events:auto}83.3333333333%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=circle] .note:nth-child(5 of.note){animation-timeline:--container-circle;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-circle-10}@keyframes note-animation-circle-10{0%{opacity:0;pointer-events:none}16.6666666667%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}50%{opacity:0;pointer-events:none}66.6666666667%{opacity:0;pointer-events:none}83.3333333333%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=rect] .note:nth-child(1 of.note){animation-timeline:--container-rect;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-rect-11}@keyframes note-animation-rect-11{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:1;pointer-events:auto}66.6666666667%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=rect] .note:nth-child(2 of.note){animation-timeline:--container-rect;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-rect-12}@keyframes note-animation-rect-12{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}66.6666666667%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=diagram] .note:nth-child(1 of.note){animation-timeline:--container-diagram;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-diagram-13}@keyframes note-animation-diagram-13{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:1;pointer-events:auto}66.6666666667%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=diagram] .note:nth-child(2 of.note){animation-timeline:--container-diagram;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-diagram-14}@keyframes note-animation-diagram-14{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}66.6666666667%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=path] .note:nth-child(1 of.note){animation-timeline:--container-path;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-path-15}@keyframes note-animation-path-15{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=hamburger] .note:nth-child(1 of.note){animation-timeline:--container-hamburger;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-hamburger-16}@keyframes note-animation-hamburger-16{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:1;pointer-events:auto}66.6666666667%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=hamburger] .note:nth-child(2 of.note){animation-timeline:--container-hamburger;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-hamburger-17}@keyframes note-animation-hamburger-17{0%{opacity:0;pointer-events:none}33.3333333333%{opacity:0;pointer-events:none}66.6666666667%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=fullscreen] .note:nth-child(1 of.note){animation-timeline:--container-fullscreen;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-fullscreen-18}@keyframes note-animation-fullscreen-18{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=sun] .note:nth-child(1 of.note){animation-timeline:--container-sun;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-sun-19}@keyframes note-animation-sun-19{0%{opacity:0;pointer-events:none}20%{opacity:1;pointer-events:auto}40%{opacity:0;pointer-events:none}60%{opacity:0;pointer-events:none}80%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=sun] .note:nth-child(2 of.note){animation-timeline:--container-sun;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-sun-20}@keyframes note-animation-sun-20{0%{opacity:0;pointer-events:none}20%{opacity:0;pointer-events:none}40%{opacity:1;pointer-events:auto}60%{opacity:0;pointer-events:none}80%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=sun] .note:nth-child(3 of.note){animation-timeline:--container-sun;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-sun-21}@keyframes note-animation-sun-21{0%{opacity:0;pointer-events:none}20%{opacity:0;pointer-events:none}40%{opacity:0;pointer-events:none}60%{opacity:1;pointer-events:auto}80%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=sun] .note:nth-child(4 of.note){animation-timeline:--container-sun;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-sun-22}@keyframes note-animation-sun-22{0%{opacity:0;pointer-events:none}20%{opacity:0;pointer-events:none}40%{opacity:0;pointer-events:none}60%{opacity:0;pointer-events:none}80%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=windmill] .note:nth-child(1 of.note){animation-timeline:--container-windmill;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-windmill-23}@keyframes note-animation-windmill-23{0%{opacity:0;pointer-events:none}25%{opacity:1;pointer-events:auto}50%{opacity:0;pointer-events:none}75%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=windmill] .note:nth-child(2 of.note){animation-timeline:--container-windmill;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-windmill-24}@keyframes note-animation-windmill-24{0%{opacity:0;pointer-events:none}25%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}75%{opacity:0;pointer-events:none}to{opacity:0;pointer-events:none}}.slide-container[data-container=windmill] .note:nth-child(3 of.note){animation-timeline:--container-windmill;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-windmill-25}@keyframes note-animation-windmill-25{0%{opacity:0;pointer-events:none}25%{opacity:0;pointer-events:none}50%{opacity:0;pointer-events:none}75%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=clock] .note:nth-child(1 of.note){animation-timeline:--container-clock;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-clock-26}@keyframes note-animation-clock-26{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=quadratic-bezier] .note:nth-child(1 of.note){animation-timeline:--container-quadratic-bezier;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-quadratic-bezier-27}@keyframes note-animation-quadratic-bezier-27{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=cubic-bezier] .note:nth-child(1 of.note){animation-timeline:--container-cubic-bezier;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-cubic-bezier-28}@keyframes note-animation-cubic-bezier-28{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=connection] .note:nth-child(1 of.note){animation-timeline:--container-connection;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-connection-29}@keyframes note-animation-connection-29{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.slide-container[data-container=arc] .note:nth-child(1 of.note){animation-timeline:--container-arc;animation-range:entry-crossing 0% exit-crossing 100%;animation-fill-mode:none;opacity:0;pointer-events:none;animation-name:note-animation-arc-30}@keyframes note-animation-arc-30{0%{opacity:0;pointer-events:none}50%{opacity:1;pointer-events:auto}to{opacity:0;pointer-events:none}}.note[data-astro-cid-uvcddkoj]{padding:1.5em 2.5em 1.5em 1.5em;border:4px solid black;border-radius:5px;margin:1em;background-color:#fff;line-height:1.5em;position:fixed;bottom:10px;left:10px;width:fit-content;max-width:650px;p{margin:0}}.curve[data-astro-cid-uvcddkoj]{background-color:#ffffffb3;bottom:240px;width:300px}.slide-header[data-astro-cid-uxn3undu]{display:flex;justify-content:center;align-items:center;padding:100px;.header-container{max-width:60vw}.header-grid{margin:0}}.slide-svg{display:flex;gap:50px}.slide-svg .markdown-example{display:flex;flex-direction:column}.slide-svg .markdown-example pre{width:400px}.slide-svg .markdown-example:nth-of-type(1) pre{position:relative;top:50px}.slide-svg .markdown-example{position:relative;animation-timeline:--container-svg;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:230px;animation-name:animation-svg-1}@keyframes animation-svg-1{to{left:-230px}}.slide1 pre .ec-line:nth-child(1),.slide1 pre .ec-line:nth-child(8){position:relative;animation-timeline:--container-html;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-html-1}@keyframes animation-html-1{50%{opacity:0}to{opacity:1}}.slide1 pre .ec-line:nth-child(2),.slide1 pre .ec-line:nth-child(3),.slide1 pre .ec-line:nth-child(7){position:relative;animation-timeline:--container-html;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-html-2}@keyframes animation-html-2{50%{opacity:1}to{opacity:1}}.slide-circle{position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;pointer-events:none;animation-name:animation-circle-1}@keyframes animation-circle-1{25%{pointer-events:auto}to{pointer-events:auto}}.slide-circle .svg-container{position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:160px;animation-name:animation-circle-2}@keyframes animation-circle-2{25%{left:0}to{left:0}}.slide-circle .svg-viewbox-values{position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-3}@keyframes animation-circle-3{25%{opacity:1}to{opacity:1}}.slide-circle .svg-container svg{position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;transform:scale(2);border-color:transparent;animation-name:animation-circle-4}@keyframes animation-circle-4{25%{transform:scale(1);border-color:gray}to{transform:scale(1);border-color:gray}}.slide-circle .svg-base>g:nth-of-type(1){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:1;animation-name:animation-circle-5}@keyframes animation-circle-5{25%{opacity:1}50%{opacity:0}to{opacity:0}}.slide-circle .svg-base>g:nth-of-type(2){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-6}@keyframes animation-circle-6{25%{opacity:0}50%{opacity:1}75%{opacity:0}to{opacity:0}}.slide-circle .svg-base>g:nth-of-type(3){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-7}@keyframes animation-circle-7{25%{opacity:0}50%{opacity:0}75%{opacity:1}to{opacity:1}}.slide-circle .markdown-example>*:has([data-language=html]){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;top:calc(var(--line-height) * 4);animation-name:animation-circle-8}@keyframes animation-circle-8{25%{opacity:1;top:calc(var(--line-height) * 4)}50%{top:calc(var(--line-height) * 4)}75%{top:calc(var(--line-height) * 4)}to{opacity:1;top:calc(var(--line-height) * 0)}}.slide-circle .markdown-example>*:has([data-language=css]){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-9}@keyframes animation-circle-9{25%{opacity:0}50%{opacity:0}75%{opacity:0}to{opacity:1}}.slide-circle pre[data-language=html] .ec-line:nth-child(1),.slide-circle pre[data-language=html] .ec-line:nth-child(2),.slide-circle pre[data-language=html] .ec-line:nth-child(3),.slide-circle pre[data-language=html] .ec-line:nth-child(4),.slide-circle pre[data-language=html] .ec-line:nth-child(5),.slide-circle pre[data-language=html] .ec-line:nth-child(6),.slide-circle pre[data-language=html] .ec-line:nth-child(7),.slide-circle pre[data-language=html] .ec-line:nth-child(8),.slide-circle pre[data-language=html] .ec-line:nth-child(9),.slide-circle pre[data-language=html] .ec-line:nth-child(10){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * 2.5);animation-name:animation-circle-10}@keyframes animation-circle-10{25%{top:calc(var(--line-height) * 2.5)}50%{top:calc(var(--line-height) * 2)}75%{top:calc(var(--line-height) * 1)}to{top:calc(var(--line-height) * 2)}}.slide-circle pre[data-language=html] .ec-line:nth-child(10){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-11;top:calc(var(--line-height) * 2)}@keyframes animation-circle-11{25%{opacity:0}50%{opacity:1}75%{opacity:0}to{opacity:0}}.slide-circle pre[data-language=html] .ec-line:nth-child(11),.slide-circle pre[data-language=html] .ec-line:nth-child(12),.slide-circle pre[data-language=html] .ec-line:nth-child(13){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-12;top:calc(var(--line-height) * 0)}@keyframes animation-circle-12{25%{opacity:0}50%{opacity:0}75%{opacity:1}to{opacity:0}}.slide-circle pre[data-language=html] .ec-line:nth-child(14){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-circle-13;top:calc(var(--line-height) * -2)}@keyframes animation-circle-13{25%{opacity:0}50%{opacity:0}75%{opacity:0}to{opacity:1}}.slide-circle pre[data-language=html] .ec-line:nth-child(15),.slide-circle pre[data-language=html] .ec-line:nth-child(16){position:relative;animation-timeline:--container-circle;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * -2.5);animation-name:animation-circle-14}@keyframes animation-circle-14{25%{top:calc(var(--line-height) * -2.5)}50%{top:calc(var(--line-height) * -2)}75%{top:calc(var(--line-height) * -1)}to{top:calc(var(--line-height) * -2)}}.slide-rect{position:relative;animation-timeline:--container-rect;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;pointer-events:none;animation-name:animation-rect-1}@keyframes animation-rect-1{to{pointer-events:auto}}.slide-rect .svg-container{position:relative;animation-timeline:--container-rect;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:160px;animation-name:animation-rect-2}@keyframes animation-rect-2{to{left:0}}.slide-rect .svg-viewbox-values{position:relative;animation-timeline:--container-rect;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-rect-3}@keyframes animation-rect-3{to{opacity:1}}.slide-rect .svg-container svg{position:relative;animation-timeline:--container-rect;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;transform:scale(2);border-color:transparent;animation-name:animation-rect-4}@keyframes animation-rect-4{to{transform:scale(1);border-color:gray}}.slide-rect .markdown-example>*:has([data-language=html]){position:relative;animation-timeline:--container-rect;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-rect-5}@keyframes animation-rect-5{to{opacity:1}}.slide-diagram .markdown-example svg{position:relative;animation-timeline:--container-diagram;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:240px;transform:scale(2);border-color:transparent;animation-name:animation-diagram-1}@keyframes animation-diagram-1{to{left:0;transform:scale(1);border-color:gray}}.slide-diagram .markdown-example>*:has([data-language=js]){position:relative;animation-timeline:--container-diagram;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-diagram-2}@keyframes animation-diagram-2{to{opacity:1}}.slide-hamburger .svg-base>g:nth-of-type(1){position:relative;animation-timeline:--container-hamburger;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-hamburger-1}@keyframes animation-hamburger-1{to{opacity:1}}.slide-hamburger pre[data-language=html] .ec-line:nth-child(1),.slide-hamburger pre[data-language=html] .ec-line:nth-child(2),.slide-hamburger pre[data-language=html] .ec-line:nth-child(3){position:relative;animation-timeline:--container-hamburger;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * 2);animation-name:animation-hamburger-2}@keyframes animation-hamburger-2{to{top:calc(var(--line-height) * 1)}}.slide-hamburger pre[data-language=html] .ec-line:nth-child(4){position:relative;animation-timeline:--container-hamburger;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:1;animation-name:animation-hamburger-3;top:calc(var(--line-height) * 2)}@keyframes animation-hamburger-3{to{opacity:0}}.slide-hamburger pre[data-language=html] .ec-line:nth-child(5),.slide-hamburger pre[data-language=html] .ec-line:nth-child(6),.slide-hamburger pre[data-language=html] .ec-line:nth-child(7),.slide-hamburger pre[data-language=html] .ec-line:nth-child(8){position:relative;animation-timeline:--container-hamburger;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-hamburger-4}@keyframes animation-hamburger-4{to{opacity:1}}.slide-hamburger pre[data-language=html] .ec-line:nth-child(9),.slide-hamburger pre[data-language=html] .ec-line:nth-child(10){position:relative;animation-timeline:--container-hamburger;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * -2);animation-name:animation-hamburger-5}@keyframes animation-hamburger-5{to{top:calc(var(--line-height) * 0)}}.slide-sun .svg-container{position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:275px;animation-name:animation-sun-1}@keyframes animation-sun-1{33.3333333333%{left:0}to{left:0}}.slide-sun .svg-viewbox-values{position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-sun-2}@keyframes animation-sun-2{33.3333333333%{opacity:1}to{opacity:1}}.slide-sun .svg-container svg{position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;border-color:transparent;animation-name:animation-sun-3}@keyframes animation-sun-3{33.3333333333%{border-color:gray}to{border-color:gray}}.slide-sun .svg-base>g:not(:nth-of-type(1)){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:1;animation-name:animation-sun-4}@keyframes animation-sun-4{33.3333333333%{opacity:0}66.6666666667%{opacity:1}to{opacity:1}}.slide-sun .svg-base>use{position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:1;animation-name:animation-sun-5}@keyframes animation-sun-5{33.3333333333%{opacity:0}66.6666666667%{opacity:0}to{opacity:1}}.slide-sun .markdown-example>*:has([data-language=html]){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;top:calc(var(--line-height) * 3.5);animation-name:animation-sun-6}@keyframes animation-sun-6{33.3333333333%{opacity:1;top:calc(var(--line-height) * 3.5)}66.6666666667%{top:calc(var(--line-height) * 0)}to{opacity:1;top:calc(var(--line-height) * 0)}}.slide-sun .markdown-example>*:has([data-language=css]){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-sun-7}@keyframes animation-sun-7{33.3333333333%{opacity:0}66.6666666667%{opacity:1}to{opacity:1}}.slide-sun pre[data-language=html] .ec-line:nth-child(1),.slide-sun pre[data-language=html] .ec-line:nth-child(2){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * 4);animation-name:animation-sun-8}@keyframes animation-sun-8{33.3333333333%{top:calc(var(--line-height) * 4)}66.6666666667%{top:calc(var(--line-height) * 4)}to{top:calc(var(--line-height) * 0)}}.slide-sun pre[data-language=html] .ec-line:nth-child(3){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;top:calc(var(--line-height) * 4);animation-name:animation-sun-9}@keyframes animation-sun-9{33.3333333333%{opacity:0;top:calc(var(--line-height) * 4)}66.6666666667%{opacity:1;top:calc(var(--line-height) * 4)}to{opacity:1;top:calc(var(--line-height) * 0)}}.slide-sun pre[data-language=html] .ec-line:nth-child(4),.slide-sun pre[data-language=html] .ec-line:nth-child(5),.slide-sun pre[data-language=html] .ec-line:nth-child(6),.slide-sun pre[data-language=html] .ec-line:nth-child(7),.slide-sun pre[data-language=html] .ec-line:nth-child(8),.slide-sun pre[data-language=html] .ec-line:nth-child(9),.slide-sun pre[data-language=html] .ec-line:nth-child(10){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-sun-10}@keyframes animation-sun-10{33.3333333333%{opacity:0}66.6666666667%{opacity:0}to{opacity:1}}.slide-sun pre[data-language=html] .ec-line:nth-child(11){position:relative;animation-timeline:--container-sun;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;top:calc(var(--line-height) * -4);animation-name:animation-sun-11}@keyframes animation-sun-11{33.3333333333%{top:calc(var(--line-height) * -4)}66.6666666667%{top:calc(var(--line-height) * -3)}to{top:calc(var(--line-height) * 0)}}.slide-windmill .markdown-example svg{position:relative;animation-timeline:--container-windmill;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;left:275px;animation-name:animation-windmill-1;border-color:transparent;block-size:fit-content}@keyframes animation-windmill-1{50%{left:0}to{left:0}}.slide-windmill .markdown-example>*:has([data-language=html]){position:relative;animation-timeline:--container-windmill;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;animation-name:animation-windmill-2;top:calc(var(--line-height) * 7.5)}@keyframes animation-windmill-2{50%{opacity:1}to{opacity:0}}.slide-windmill .markdown-example>*:has([data-language=css]){position:relative;animation-timeline:--container-windmill;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;opacity:0;pointer-events:none;animation-name:animation-windmill-3;top:calc(var(--line-height) * -9)}@keyframes animation-windmill-3{50%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:auto}}.slide-clock[data-astro-cid-kvgkgd5a]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#7b0828}.slide-smile[data-astro-cid-glbqf62k] path[data-astro-cid-glbqf62k]{position:relative;animation-timeline:--container-smile;animation-range:contain 0% contain 100%;animation-fill-mode:forwards;d:path("M -40,30 Q 0,30 40,30");animation-name:animation-smile-1}@keyframes animation-smile-1{to{d:path("M -40,30 Q 0,60 40,30")}}.slide-connection{display:flex;gap:30px;.markdown-example{display:flex;flex-direction:column}}h1[data-astro-cid-e4uxhirx].end-header{font-size:1.8em;line-height:1.4em;margin-bottom:1rem;a{display:inline-block;text-decoration:underline;text-underline-offset:4px}}p[data-astro-cid-e4uxhirx].end-connect a[data-astro-cid-e4uxhirx]{display:inline-block;color:#0070f3;text-decoration:underline;text-underline-offset:4px}.slide-end[data-astro-cid-6qroswif]{display:flex;justify-content:center;align-items:center;padding:100px;.header-container{max-width:60vw}.header-grid{margin:0}}body:has(.note input[name=visibility-toggle]:checked){.note{display:none}.show{display:flex}}:root{--line-height: 1.65em;--ec-frm-frameBoxShdCssVal: none !important;--ec-brdWd: 0 !important;--ec-codeFontSize: 1em !important}*{box-sizing:border-box}code{padding:0 5px 2px;background-color:#d3d3d3;line-height:var(--line-height)}pre{min-width:275px!important;border-radius:5px!important}.copy{display:none!important}pre{color:#fff;padding:2em;max-width:100%}pre code{background-color:inherit;padding:0}iframe{max-width:100%;border:0}