*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}code[class*=language-],pre[class*=language-]{color:#d6deeb;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:rgba(29, 59, 83, 0.99)}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:rgba(29, 59, 83, 0.99)}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{color:#fff;background:#011627}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.prolog{color:#637777;font-style:italic}.token.punctuation{color:#c792ea}.namespace{color:#b2ccd6}.token.deleted{color:rgba(239, 83, 80, 0.56);font-style:italic}.token.property,.token.symbol{color:#80cbc4}.token.keyword,.token.operator,.token.tag{color:#7fdbca}.token.boolean{color:#ff5874}.token.number{color:#f78c6c}.token.builtin,.token.char,.token.constant,.token.function{color:#82aaff}.token.doctype,.token.selector{color:#c792ea;font-style:italic}.token.attr-name,.token.inserted{color:#addb67;font-style:italic}.language-css .token.string,.style .token.string,.token.entity,.token.string,.token.url{color:#addb67}.token.atrule,.token.attr-value,.token.class-name{color:#ffcb8b}.token.important,.token.regex,.token.variable{color:#d6deeb}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.kg-width-wide{grid-column:wide-start/wide-end;position:relative;z-index:1}.kg-width-wide img{width:100%}.kg-width-full{padding-left:0;padding-right:0;grid-column:full-start/full-end;position:relative;z-index:1}.kg-width-full img{width:100%}.kg-width-full figcaption{margin-inline:8vmin;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.kg-bookmark-card,.kg-bookmark-card *{box-sizing:border-box}.kg-bookmark-card,.kg-bookmark-publisher{position:relative;width:100%}.kg-bookmark-card a.kg-bookmark-container{display:flex;text-decoration:none;border-radius:.25rem;border:1px solid var(--color-background-tinted);background:var(--color-background-desat);overflow:hidden;color:inherit;transition:.2s ease}.kg-bookmark-card a.kg-bookmark-container:hover{border:1px solid var(--color-accent)}.kg-bookmark-content{display:flex;flex-direction:column;flex-grow:1;flex-basis:100%;align-items:flex-start;justify-content:flex-start;padding:20px;overflow:hidden}.kg-bookmark-title{font-weight:600}.kg-bookmark-description{display:-webkit-box;margin-block-start:.25rem;overflow-y:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}.kg-bookmark-metadata{display:flex;align-items:center;margin-block-start:1rem;width:100%;white-space:nowrap}.kg-bookmark-icon{width:1.2rem;height:1.2rem;margin-inline-end:.25rem}.kg-bookmark-author,.kg-bookmark-publisher{display:inline}.kg-bookmark-publisher{text-overflow:ellipsis;overflow:hidden;max-width:240px;white-space:nowrap;display:block}.kg-bookmark-metadata>span:nth-of-type(2){font-weight:400}.kg-bookmark-metadata>span:nth-of-type(2):before{content:"•";margin:0 6px}.kg-bookmark-metadata>span:last-of-type{overflow:hidden;text-overflow:ellipsis}.kg-bookmark-thumbnail{position:relative;flex-grow:1;min-width:33%}.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:0 2px 2px 0}.kg-callout-card{display:flex;gap:1rem;padding:1.2rem 1.6rem;border-radius:.25rem;background:var(--color-background-tinted)}.kg-gallery-container .kg-gallery-row{display:flex;gap:14%;margin-block-end:2rem}.kg-gallery-container .kg-gallery-image{flex:1;align-self:center}.kg-video-container [class^=kg-video]{display:none}.kg-video-container{position:relative;display:flex;flex-direction:column;align-items:center}.kg-video-card video{display:block;max-width:100%;height:auto}:root{--size-300: 0.75rem;--size-400: 1rem;--size-500: 1.33rem;--size-600: 1.77rem;--size-700: 2.36rem;--size-800: 3.15rem;--size-900: 4.2rem}body{line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,Ubuntu,roboto,noto,segoe ui,arial,sans-serif}h1,h2,h3,h4{line-height:1.3}h1{font-size:var(--size-700);font-weight:900}h2,h3{font-size:var(--size-600)}h2{font-weight:800}h3{font-weight:700}blockquote{font-size:var(--size-500)}header div div,section>div{--flow-space: var(--size-400)}time,small,figcaption{font-size:var(--size-300)}time,summary,figcaption,blockquote{font-style:italic}@media(min-width: 45em){h1{font-size:var(--size-800)}h2{font-size:var(--size-700)}blockquote{font-size:var(--size-600)}p,li,label,summary{font-size:var(--size-500)}time:not(ul[role=group] time),figcaption{font-size:var(--size-400)}}header>div>div,section>div,header,footer,heading-anchors,ul[role=list]{--flow-space: var(--size-300)}header>div>div>*+*,header>div>div>*+button,section>div>*+*,section>div>*+button,header>*+*,header>*+button,footer>*+*,footer>*+button,heading-anchors>*+*,heading-anchors>*+button,ul[role=list]>*+*,ul[role=list]>*+button{margin-top:var(--flow-space, 1em)}header>div>div :is(h2,h3),section>div :is(h2,h3),header :is(h2,h3),footer :is(h2,h3),heading-anchors :is(h2,h3),ul[role=list] :is(h2,h3){--flow-space: var(--size-900)}header>div>div :is(h2,h3)+*,section>div :is(h2,h3)+*,header :is(h2,h3)+*,footer :is(h2,h3)+*,heading-anchors :is(h2,h3)+*,ul[role=list] :is(h2,h3)+*{--flow-space: var(--size-400)}header>div>div figure,header>div>div figure+*,section>div figure,section>div figure+*,header figure,header figure+*,footer figure,footer figure+*,heading-anchors figure,heading-anchors figure+*,ul[role=list] figure,ul[role=list] figure+*{--flow-space: var(--size-500)}header>div>div ol:not([class]) li+li,header>div>div ul:not([class]) li+li,header>div>div time,section>div ol:not([class]) li+li,section>div ul:not([class]) li+li,section>div time,header ol:not([class]) li+li,header ul:not([class]) li+li,header time,footer ol:not([class]) li+li,footer ul:not([class]) li+li,footer time,heading-anchors ol:not([class]) li+li,heading-anchors ul:not([class]) li+li,heading-anchors time,ul[role=list] ol:not([class]) li+li,ul[role=list] ul:not([class]) li+li,ul[role=list] time{margin-block-start:var(--size-300)}@media(min-width: 45em){header div div,section>div,header,footer,article,ul[role=list]{--flow-space: var(--size-600)}}@keyframes fadein{from{opacity:0}}@keyframes lengthen{from{transform:rotateX(-90deg)}}@keyframes pulse{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@keyframes ripple{40%,60%{transform:scale(1.3);color:var(--color-accent)}}@keyframes shake{2%{transform:translate(0, 0) rotate(0.5deg)}4%{transform:translate(0, 0) rotate(5.5deg)}6%{transform:translate(0, 0) rotate(0.5deg)}8%{transform:translate(0, 0) rotate(-5.5deg)}10%{transform:translate(0, 0) rotate(0.5deg)}12%{transform:translate(0, 0) rotate(2.5deg)}14%{transform:translate(0, 0) rotate(5.5deg)}16%{transform:translate(0, 0) rotate(-5.5deg)}18%{transform:translate(0, 0) rotate(-1.5deg)}20%{transform:translate(0, 0) rotate(4.5deg)}22%{transform:translate(0, 0) rotate(-6.5deg)}24%{transform:translate(0, 0) rotate(1.5deg)}26%{transform:translate(0, 0) rotate(1.5deg)}28%{transform:translate(0, 0) rotate(-4.5deg)}30%{transform:translate(0, 0) rotate(5.5deg)}32%{transform:translate(0, 0) rotate(2.5deg)}34%{transform:translate(0, 0) rotate(3.5deg)}36%{transform:translate(0, 0) rotate(-3.5deg)}38%{transform:translate(0, 0) rotate(-4.5deg)}40%{transform:translate(0, 0) rotate(2.5deg)}42%{transform:translate(0, 0) rotate(0.5deg)}44%{transform:translate(0, 0) rotate(-3.5deg)}46%{transform:translate(0, 0) rotate(-4.5deg)}48%{transform:translate(0, 0) rotate(-1.5deg)}50%{transform:translate(0, 0) rotate(-3.5deg)}52%{transform:translate(0, 0) rotate(-2.5deg)}54%{transform:translate(0, 0) rotate(3.5deg)}56%{transform:translate(0, 0) rotate(0.5deg)}58%{transform:translate(0, 0) rotate(-6.5deg)}60%{transform:translate(0, 0) rotate(-3.5deg)}62%{transform:translate(0, 0) rotate(-1.5deg)}64%{transform:translate(0, 0) rotate(3.5deg)}66%{transform:translate(0, 0) rotate(0.5deg)}68%{transform:translate(0, 0) rotate(4.5deg)}70%{transform:translate(0, 0) rotate(1.5deg)}72%{transform:translate(0, 0) rotate(-3.5deg)}74%{transform:translate(0, 0) rotate(-3.5deg)}76%{transform:translate(0, 0) rotate(2.5deg)}78%{transform:translate(0, 0) rotate(-1.5deg)}80%{transform:translate(0, 0) rotate(-5.5deg)}82%{transform:translate(0, 0) rotate(7.5deg)}84%{transform:translate(0, 0) rotate(0.5deg)}86%{transform:translate(0, 0) rotate(5.5deg)}88%{transform:translate(0, 0) rotate(4.5deg)}90%{transform:translate(0, 0) rotate(-2.5deg)}92%{transform:translate(0, 0) rotate(1.5deg)}94%{transform:translate(0, 0) rotate(-5.5deg)}96%{transform:translate(0, 0) rotate(7.5deg)}98%{transform:translate(0, 0) rotate(-3.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}:root{--color-background: #fcfaf2;--color-background-desat: #ffffff;--color-background-tinted: #f2eac9;--color-foreground: #3d3d3d;--color-accent-hex: #613fe8;--color-accent-p3: color(display-p3 0.38 0.25 0.91);scroll-behavior:smooth;background:var(--color-accent)}*{--color-accent: var(--color-accent-hex)}@supports(color: color(display-p3 1 1 1)){*{--color-accent: var(--color-accent-p3)}}body{background:var(--color-background);color:var(--color-foreground);-webkit-font-smoothing:antialiased}::selection{color:var(--color-background-desat);background:var(--color-foreground)}:focus{outline-color:currentcolor}img{max-width:100%;height:auto}iframe{width:100%;min-height:28rem}iframe[src*="youtube.com"]{aspect-ratio:16/9;width:100%;height:auto}h2[id] a[href^="#"],h3[id] a[href^="#"],h4[id] a[href^="#"]{position:relative;inset-block-start:-0.3rem;margin-inline-start:.3rem}h1 a[href^="#"],h1 svg,h1 img,ul[role=list] a[href^="#"],ul[role=list] svg,ul[role=list] img,h2[id] a[href^="#"],h2[id] svg,h2[id] img,h3[id] a[href^="#"],h3[id] svg,h3[id] img,h4[id] a[href^="#"],h4[id] svg,h4[id] img,footer a a[href^="#"],footer a svg,footer a img,aside a[href^="#"],aside svg,aside img,button a[href^="#"],button svg,button img{width:3.4rem;height:3.4rem;padding:.5rem;border:.2rem solid var(--color-background-tinted);border-radius:100%;background:var(--color-background-desat)}h1 img,ul[role=list] img,h2[id] img,h3[id] img,h4[id] img,footer a img,aside img,button img{padding:0}a:not([class]),svg{color:var(--color-accent)}svg+span{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;overflow:hidden;margin:-1px;padding:0;position:absolute;width:1px;white-space:nowrap}[href]:hover{text-decoration:none}a[href="#"]{position:sticky;bottom:4vmin;margin-top:150vh}h2[id] a[href^="#"],h3[id] a[href^="#"],h4[id] a[href^="#"]{width:2.4rem;height:2.4rem;font-size:1.25rem;line-height:.82;text-align:center;text-decoration:none;display:inline-block}svg,button,input,textarea{transition:border-color .2s}a:hover svg,button:hover svg,button:hover,input:focus,textarea:focus,input[type=file]:hover,form button[type=submit]:hover{border-color:var(--color-accent)}is-playing span{min-width:.3ch;display:inline-block;transform-origin:center 90%}is-playing[playing] span{animation-name:ripple;animation-duration:calc(var(--duration)/var(--characters)*7s);animation-timing-function:ease;animation-delay:calc(var(--duration)/var(--characters)*var(--i)*.6s)}is-playing[playing] button{pointer-events:none}is-playing[playing] button svg{border-color:var(--color-accent);animation:shake 1s infinite}is-playing[playing] button svg.icon--power{animation:pulse 1s infinite}:not(pre)>code[class*=language-],pre[class*=language-]{border-radius:.2rem}pre{max-width:100%;overflow:scroll}li>code,p>code{background:var(--color-background-desat);padding:.2rem;border-radius:.2rem;border:.1rem solid var(--color-background-tinted)}nav{display:grid;grid-template-columns:repeat(auto-fit, minmax(1.5rem, max-content));grid-gap:1.5rem;margin-block-start:1rem}nav a{line-height:0;position:relative}nav a::before{content:"";position:absolute;inset:-0.75rem;border-radius:100%}nav svg{width:1.5rem;height:1.5rem}main>ul[role=list],section>ul[role=list],header,footer,heading-anchors,aside{display:grid;grid-template-columns:[full-start] minmax(8vmin, auto) [wide-start] minmax(auto, 240px) [main-start] min(800px,100% - 16vmin) [main-end] minmax(auto, 240px) [wide-end] minmax(8vmin, auto) [full-end]}main>ul[role=list]>*,section>ul[role=list]>*,header>*,footer>*,heading-anchors>*,aside>*{grid-column:main-start/main-end}main,header,aside{margin-block-end:3rem}aside ul[role=list]{margin-block-end:0}main>ul[role=list],section>ul[role=list],header,heading-anchors>*,aside{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}is-playing{display:flex;align-items:baseline;gap:.75rem}header{border-block-start:.4rem solid var(--color-background-tinted);padding-block:2rem}header>div{grid-column:main-start/main-end;display:grid;grid-template-columns:1fr minmax(6rem, 22%);align-items:center;grid-gap:.5rem 1rem}@media(min-width: 45em){header>div{grid-gap:.5rem 2rem}}header div>*{grid-column:span 2}header h2,header figure{grid-column:span 1}header>div:first-of-type>figure{display:grid;align-items:stretch;perspective:500}@media(min-width: 45em){header>div:first-of-type>figure{grid-area:1/2/3/-1}}header>div:first-of-type>figure img{grid-area:1/-1/1/-1;border-radius:100%;border:.4rem solid var(--color-background-tinted);transition:transform .5s;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;object-fit:cover;height:100%}header>div:first-of-type>figure img:first-of-type{transform:rotateY(-180deg)}header>div:first-of-type>figure:hover img:first-of-type{transform:rotateY(0deg)}header>div:first-of-type>figure:hover img:last-of-type{transform:rotateY(180deg)}@media(min-width: 45em){header duration-property{grid-column:span 1}}main header{border-block-start:.4rem solid var(--color-accent);padding:0;margin-block-end:1rem}@media(min-width: 45em){main header{margin-block-end:2rem}}main header img,main header::before,main header::after{grid-column:full-start/full-end;grid-row:1/2}main header::before,main header::after{content:"";display:block;width:100%}main header::before{grid-row:1/3;background:var(--color-accent)}@media(min-width: 45em){main header::before{grid-row:1/4}}main header::after{grid-row:2/3;background:hsla(0,0%,100%,.75)}@supports(-webkit-backdrop-filter: blur(1.5rem)) or (backdrop-filter: blur(1.5rem)){main header::after{background:hsla(0,0%,100%,.65);-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem)}}@media(min-width: 45em){main header::after{grid-row:2/4}}main header img{max-height:80vh;object-fit:contain;justify-self:center}main header h1,main header time{z-index:1;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}main header h1{grid-column:main-start/main-end;grid-row:2/3;margin:1rem 0}main header time{grid-column:main-start/main-end;margin-block:.5rem}@media(min-width: 45em){main header time{grid-row:3/4;margin-block:0 1rem}}heading-anchors>is-playing{margin-block-start:20vh}ul[role=list] li,aside>div{display:grid;grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr;grid-column-gap:1rem;position:relative}ul[role=list]{padding:0;margin-block-end:3em}ul[role=list] li+li{margin:0}ul[role=list] div{grid-row:span 2;margin-block-end:2rem}ul[role=list] time{margin-block:.25rem}ul[role=list] a::after{content:"";position:absolute;inset:0}ul[role=list] li::after{content:"";display:block;width:.2rem;background:var(--color-background-tinted);align-self:stretch;justify-self:center}ul[role=list] li::after,ul[role=list] li>svg{animation-delay:calc(.2s*var(--animation-offset));animation-fill-mode:both;animation-timing-function:linear;transform-origin:50% 0}ul[role=list] li>svg{animation-name:fadein;animation-duration:.1s}ul[role=list] li::after{animation-name:lengthen;animation-duration:.2s}ul[role=list] li:last-of-type::after{display:none}ul[role=group]{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(3.4rem, max-content));grid-gap:2rem}#comments+ul[role=group]{grid-template-columns:1fr}ul[role=group] li{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:1rem;grid-row-gap:.3rem}ul[role=group] p{word-break:break-word}ul[role=group] a{grid-row:span 2}ul[role=group] time{display:inline}blockquote{padding-inline-start:var(--size-600);position:relative}blockquote::before{content:"";position:absolute;inset:0 auto 0 0;width:.3rem;height:100%;background:var(--color-accent);border-radius:.2rem}hr{border:none;width:100%;height:.1rem;background:var(--color-background-tinted)}time,small,figcaption,summary{opacity:.75;display:block}figcaption{margin-block-start:1rem}button,input,textarea{-webkit-appearance:none;margin:0;font-size:var(--size-500);background:none;border:none;padding:0}form button[type=submit],input,textarea,form input[type=file]{-webkit-appearance:none;border:.2rem solid var(--color-background-tinted);background:var(--color-background-desat);color:var(--color-foreground);border-radius:1rem;padding:.2rem 1rem .3rem;margin:0;width:100%}::file-selector-button{border:0;background:none;padding:0 1rem 0 0;margin:0;cursor:inherit}textarea{resize:vertical}button,input[type=file]{cursor:pointer;color:var(--color-accent);border-color:var(--color-accent)}fieldset{display:grid;grid-gap:1rem;border:0;padding:1rem 0;margin:0}fieldset button[type=submit]{justify-self:start;align-self:start;width:auto}@media(min-width: 45em){fieldset{grid-template-columns:max-content 1fr max-content}fieldset label{grid-column-start:1;align-self:start;padding-block:.3rem}fieldset button[type=submit]{grid-column-start:2}}sample-input{display:flex;justify-content:space-between;align-items:start}sample-input button{margin-left:1rem}sample-input audio:not([src^="data:audio"])+button{display:none}footer{position:sticky;z-index:2;bottom:4vmin;pointer-events:none}footer a,footer button,footer small{pointer-events:auto}footer a,footer share-button,footer>button{margin-inline-end:4vmin;line-height:0;justify-self:end;grid-column:wide-end/full-end}footer+footer{position:relative;text-align:center;z-index:1}share-button:defined a,share-button:not(:defined) button{display:none}play-button:defined audio{display:none}play-button:not(:defined) button{display:none}:root[data-color-scheme=dark]{--color-background: #130f26;--color-background-desat: #000000;--color-background-tinted: #24195b;--color-foreground: #ffffff}:root[data-color-scheme=dark] main header::after{background:rgba(0,0,0,.6)}:root[data-color-scheme=dark] a:not([class],[role=group] a),:root[data-color-scheme=dark] svg,:root[data-color-scheme=dark] button,:root[data-color-scheme=dark] ul[role=list] li::after{filter:brightness(1.8)}:root[data-color-scheme=dark] header .kg-gallery-container{filter:brightness(0) invert(100%)}:root[data-color-scheme=dark] h1 svg,:root[data-color-scheme=dark] ul[role=list] svg,:root[data-color-scheme=dark] a[href^="#"],:root[data-color-scheme=dark] footer svg,:root[data-color-scheme=dark] aside svg{background:var(--color-background)}:root[data-color-scheme=dark] nav a[href*="github.com"] svg,:root[data-color-scheme=dark] nav a[href*="codepen.io"] svg{filter:invert(1)}