/*!
  Theme Name: Chris Coyier Theme 10
  Author: Chris Coyier
  Version: 1
*/@layer reset{html{color-scheme:light dark;font:clamp(1rem, 1rem + 0.5vw, 2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,*::before,*::after{box-sizing:border-box}h1,h2{font-weight:900}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0;letter-spacing:clamp(-0.03em,(1em - 1rem)/-10,0em)}p,li,dd{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}a:not(:is(:hover,:focus)){text-decoration-color:color-mix(in srgb, currentColor, transparent 50%)}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-0.25em}sup{inset-block-start:-0.5em}ul,ol,dl{margin:0;padding:0;list-style-position:inside}ul ul,ul ol,ul dl,ol ul,ol ol,ol dl,dl ul,dl ol,dl dl{padding-inline-start:2ch}img,video,iframe{display:block;max-inline-size:100%;border-style:none}figure{margin-inline:auto}figcaption{contain:inline-size;font-size:90%}input,select,textarea,button{font:inherit}label{display:block}input:not(:where([type=submit],[type=checkbox],[type=radio],[type=button],[type=reset])){inline-size:100%}button,input:where([type=submit],[type=reset],[type=button]){background:CanvasText;color:Canvas;border:1px solid rgba(0,0,0,0)}textarea{field-sizing:content;min-block-size:5lh;inline-size:100%;max-inline-size:100%}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,monospace}pre{white-space:pre-wrap;background:CanvasText;color:Canvas;padding:1.5rem}svg{fill:currentColor}[aria-disabled=true i],[disabled]{cursor:not-allowed}[disabled],label:has(input[disabled]){opacity:.5}[disabled] [disabled],label:has(input[disabled]) [disabled]{opacity:1}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible;margin-block:2.5rem}:target{scroll-margin:3rlh}table{caption-side:bottom;border-collapse:collapse}table td{font-size:90%}table td,table th{word-break:normal;border:1px solid gray;padding:.5rem}[role=region][aria-labelledby][tabindex]{overflow:auto}caption{font-size:90%}[hidden]{display:none !important}.screenreader-only:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus-visible{outline-offset:2px}@supports(position-area: end){[popover]{margin:0;position-area:end span-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}@media(prefers-reduced-motion: no-preference){@view-transition{navigation:auto}html{interpolate-size:allow-keywords}html:focus-within{scroll-behavior:smooth}}}html{--codepen-logo: url("images/codepen-logo.svg");--dark: oklch(0.2 0 0);--light: white;--accent: oklch(0.7528 0.2068 52.09);--code-1: #ffb100;--code-2: #a4bb98;--code-3: #fbc254;--code-4: #fe7032}*,*::before,*::after{box-sizing:border-box}.hide{display:none}.visually-hidden{position:absolute;top:-9999px;left:-9999px}img{max-width:100%;height:auto !important;display:block}:root{--font-family: "Instrument Serif", serif;--font-family-body: "DM Sans", system-ui, sans-serif}html{font-family:var(--font-family-body);font-size:100%;line-height:1.5;overflow-wrap:break-word;font-synthesis:none}li,p,pre,code{overflow-wrap:break-word;word-break:break-word}p{margin:0 0 1rem 0}h1,h2,h3,h4,h5,h6,.site-title{font-family:var(--font-family);line-height:1;text-wrap:balance}h1,.h1{font-size:4rem;margin:0 0 1rem 0}@media(width < 600px){h1,.h1{font-size:3rem}}h2,.h2{font-size:2.5rem;margin-block:1rem 1.2rem}h2.jetpack-instant-search__search-results-title,.h2.jetpack-instant-search__search-results-title{margin-block-start:1rem;margin-inline-start:2rem}h3{font-size:2rem}h3:not(:first-child){margin-block:3rem 1.2rem}details{margin:0 0 1rem 0}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}p:not(.wp-block),li{max-width:50ch}pre{margin:0}pre:not(:has(.hljs)),.hljs{border-radius:4px;padding:1rem !important;margin-block-end:1rem !important;background:#000 !important;color:#fff !important;white-space:pre-wrap !important;font-size:1rem}body.single article{font-size:120%}article ul,article ol{padding:0 0 0 1rem;margin:0 0 1rem 0}article ul>li,article ol>li{margin:0 0 .5rem 0}blockquote{container:cell/inline-size;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));padding:2rem;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48));border-radius:.4rem;border:1px solid light-dark(white, #333)}blockquote :last-child{margin-block-end:0}blockquote{font-size:125%;font-family:var(--font-family);line-height:1.6;padding:2rem !important;border-radius:4px;margin-inline:0;margin-block:2rem}blockquote,blockquote em,blockquote cite{font-style:normal;font-style:oblique 8deg;font-variation-settings:"wght" 300}blockquote cite{font-size:70%;font-variation-settings:"wght" 700,"slnt" -1}@media(width < 600px){blockquote{padding:1rem !important}}blockquote cite::before{content:"— ";padding-inline-start:1rem}hr{margin:2rem auto;height:4px;border:0;width:100px;background:#000}.post-format{text-transform:uppercase}.has-drop-cap:not(:focus):first-letter{font-size:6.3em !important;margin:.05em .1em .3em 0 !important}.jetpack-instant-search__overlay.jetpack-instant-search__overlay--dark .jetpack-instant-search__search-results-list h3 a,.jetpack-instant-search__overlay.jetpack-instant-search__overlay--dark .jetpack-instant-search__search-result-expanded__path a{color:#fff !important}.aal_anchor{width:16px;height:16px;display:inline-block;scroll-margin-block-start:4rem;margin-inline-end:.25rem;margin-inline-start:calc(-16px - .25rem);opacity:.5}.aal_anchor svg{filter:invert(1)}.aal_anchor:hover,.aal_anchor:focus{opacity:1}.cell>h2{margin-block-start:0}pre:has(.hljs){padding:0 !important}pre,code{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}p code,li code,dd code{font-size:91%}.hljs-type,.hljs-string,.hljs-subst,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-deletion{color:var(--code-1) !important}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition,.hljs-literal,.hljs-keyword,.hljs-attr,.hljs-attribute{color:var(--code-2) !important}.hljs-title,.hljs-name,.hljs-meta{color:var(--code-3) !important}.hljs-selector-pseudo,.hljs-quote,.hljs-template-tag{color:var(--code-4) !important}.hljs>mark.shcb-loc{padding:.2rem 0 .2rem .2rem;display:block;background:var(--orange);text-indent:.2rem;translate:-0.4rem 0;border-radius:6px}.hljs>mark.shcb-loc *{color:#000 !important}@view-transition{navigation:auto}html{--wp--style--global--content-size: 65ch;view-transition-name:none;scrollbar-width:auto;background:linear-gradient(to bottom, light-dark(#ffe5cb, #131312) 147px, light-dark(white, rgb(45, 45, 45)) 223px)}body{position:relative;overflow-x:clip}main{position:relative;z-index:1}.content{max-width:min(100%,1050px);margin-inline:auto}.cell{container:cell/inline-size;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));padding:2rem;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48));border-radius:.4rem;border:1px solid light-dark(white, #333)}.cell :last-child{margin-block-end:0}.article-content{position:relative}@media(width < 600px){.article-content{padding:1.5rem}}.interview{container:cell/inline-size;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));padding:2rem;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48));border-radius:.4rem;border:1px solid light-dark(white, #333)}.interview :last-child{margin-block-end:0}.interview{display:block;margin-block-end:2rem;text-decoration:none}.interview .meta{color:CanvasText}.interview p{text-decoration:underline}.interview p strong{color:CanvasText}.speaking-lists h2{margin-block-start:5rem}.archive-article{margin-block-end:3rem}.month-list{columns:15ch auto}.month-list a:hover{color:var(--orange)}html::-webkit-scrollbar,*::-webkit-scrollbar{background:rgba(0,0,0,0);width:14px;height:14px}html::-webkit-scrollbar-track,*::-webkit-scrollbar-track{background:rgba(0,0,0,0)}html::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background:light-dark(black, white);border:2px solid light-dark(white, black);border-radius:999px}html::-webkit-scrollbar-corner,*::-webkit-scrollbar-corner{background:var(--scrollbar-track)}@supports(-moz-orient: inline){html,*{scrollbar-color:var(--scrollbar-stripe-a) var(--scrollbar-track)}}@media(prefers-contrast: more){html{--scrollbar-stripe-a: light-dark(black, white);--scrollbar-stripe-b: light-dark(#444, #bbb);--scrollbar-track: light-dark(white, black);--scrollbar-stripe: var(--scrollbar-stripe-a)}}dialog{margin:auto;inline-size:min(90vw,42ch);max-block-size:min(85vh,100%);padding:2rem;border:1px solid light-dark(white, black);border-radius:.4rem;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));color:CanvasText;box-shadow:0 3px 2.7px 0 rgba(0,0,0,.07),0 16px 27.2px 3px rgba(0,0,0,.18);opacity:0;transform:scale(0.96) translateY(0.5rem);transition-property:opacity,transform,display,overlay;transition-duration:.35s;transition-timing-function:ease;transition-behavior:allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(0.96) translateY(0.5rem)}}dialog::backdrop{background-color:rgba(0,0,0,0);backdrop-filter:blur(0);transition:display .35s allow-discrete,overlay .35s allow-discrete,background-color .35s ease,backdrop-filter .35s ease}dialog[open]::backdrop{background-color:light-dark(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));backdrop-filter:blur(4px)}@starting-style{dialog[open]::backdrop{background-color:rgba(0,0,0,0);backdrop-filter:blur(0)}}dialog button[command=close]{position:absolute;top:8px;right:8px}dialog button[command=close]:hover,dialog button[command=close]:focus-visible{color:red}.dialog-title{font-size:1.66rem;margin:-2rem -2rem 1rem -2rem;background:CanvasText;color:Canvas;padding:.5rem 1rem;border-radius:.4rem .4rem 0 0}.dialog-aside-trigger{font:inherit;line-height:inherit;color:inherit;vertical-align:baseline;cursor:pointer;padding:0;border:0;background:none}.dialog-aside-trigger:hover,.dialog-aside-trigger:focus-visible{scale:1.15}#codepen-tattoo-trigger{anchor-name:--codepen-tattoo}#codepen-tattoo-popover{position-anchor:--codepen-tattoo}.dialog-aside{margin:0;padding:.75rem 1rem;max-inline-size:30ch;border:1px solid light-dark(white, black);border-radius:.4rem;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));color:CanvasText;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48))}.dialog-aside p{margin:0}@supports(position-area: block-end){.dialog-aside{inset:auto;margin-block-start:.35rem;position-area:block-end span-start;position-try-fallbacks:flip-block,flip-inline}}@media(prefers-reduced-motion: reduce){dialog{transform:none;transition-duration:.15s}@starting-style{dialog[open]{transform:none}}}.pagination{display:flex;gap:.5rem;justify-content:center}.submit,.button,.comment-reply-link,.pagination a{text-decoration:none;cursor:pointer;background:#000;color:#fff;box-shadow:inset 0 1px 2px -1px #fff;border-radius:40px;font-family:var(--font-family-body);font-size:var(--font-size-sm);border:0;white-space:nowrap;padding:.3rem 2rem .4rem;transform-origin:center bottom;transition:transform .1s}.submit:focus,.submit:hover,.button:focus,.comment-reply-link:focus,.button:hover,.comment-reply-link:hover,.pagination a:focus,.pagination a:hover{transform:scaleY(0.9) scaleX(0.97)}.submit:active,.button:active,.comment-reply-link:active,.pagination a:active{transform:scaleY(0.85) scaleX(0.97)}.site-header{position:relative;display:flex;align-items:center;margin-block-end:1rem}.site-title-image>img{view-transition-name:site-title-image;width:0;rotate:-5deg;position:relative;top:-250px;left:10px;z-index:2;transform-origin:center bottom}body.home .site-title-image>img{top:5px;width:70px}@media(prefers-reduced-motion: no-preference){.site-title-image:hover>img,.site-title-image:focus-visible>img{animation:site-title-shimmy .45s ease-in-out}.site-title-image:active>img{animation:site-title-jump .15s}}@keyframes site-title-jump{0%{translate:0 0}100%{translate:0 -40px}}@keyframes site-title-shimmy{0%,100%{rotate:-5deg;translate:0 0}20%{rotate:-10deg;translate:-4px 0}40%{rotate:0deg;translate:4px 0}60%{rotate:-9deg;translate:-3px 0}80%{rotate:-2deg;translate:2px 0}}.site-title{display:flex;align-items:flex-end;position:relative;gap:.75rem 1.25rem}.site-title a{view-transition-name:site-title;display:flex;align-items:flex-end;width:fit-content;font-size:40px;color:CanvasText;text-decoration:none;transform-origin:left bottom;transition:transform .15s ease-in-out}.site-title a:hover,.site-title a:focus-visible{transform:scaleY(0.97)}body.home .site-title a{font-size:min(10dvi,100px)}@media(prefers-reduced-motion: no-preference){::view-transition-group(site-title){overflow:clip;transform-origin:left bottom;animation-duration:.45s;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}::view-transition-image-pair(site-title){isolation:isolate;overflow:clip}::view-transition-old(site-title),::view-transition-new(site-title){animation:none !important;mix-blend-mode:normal;inset:0;block-size:100%;inline-size:100%;object-fit:fill;object-position:left bottom}}.copy-split{view-transition-name:copy-split;flex:1;white-space:nowrap;display:inline-flex;align-items:stretch;position:relative;z-index:4}@media(width < 500px){.copy-split{display:none}}body.home .copy-split{bottom:12px}.copy-split .button{font-family:var(--font-family)}.copy-split__main{border-radius:40px 0 0 40px;padding:.35rem 1.1rem .45rem 1.25rem}.copy-split__toggle{display:grid;place-items:center;border-radius:0 40px 40px 0;padding-inline:.65rem;border-inline-start:1px solid color-mix(in srgb, Canvas 35%, transparent);margin-inline-start:-1px}.copy-split__menu{margin:0;padding:.35rem;border:1px solid light-dark(white, black);border-radius:.4rem;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));color:CanvasText;box-shadow:0 3px 2.7px 0 rgba(0,0,0,.07),0 16px 27.2px 3px rgba(0,0,0,.18);min-inline-size:11rem}@supports(position-area: block-end){.copy-split__menu{inset:auto;margin-block-start:.35rem;position-area:block-end span-end;position-try-fallbacks:flip-block,flip-inline}}.copy-split__menu-item{display:block;inline-size:100%;padding:.45rem .75rem;border:0;border-radius:.25rem;background:rgba(0,0,0,0);color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}.copy-split__menu-item:hover,.copy-split__menu-item:focus-visible{background:color-mix(in srgb, CanvasText 10%, transparent)}@keyframes footer-flip-in{from{opacity:0;translate:0 -550px}}@media(prefers-reduced-motion: no-preference){@supports(animation-timeline: view()) and (animation-range: entry){.site-footer{transform-origin:center bottom;animation:footer-flip-in cubic-bezier(0.18, 0.9, 0.22, 1) both;animation-timeline:view(block);animation-range:entry 0% cover 55%}}}.site-footer{text-align:center;padding-block:10rem 5rem;z-index:0}.boring{font-size:85%;font-family:"Times New Roman",Times,serif;padding:1rem;text-align:center}search{--search-bounce: linear( 0, 0.02 4%, 0.1 9%, 0.26 17%, 0.5 25%, 0.74 33%, 0.92 40%, 1.04 47%, 1.14 53%, 1.1 59%, 0.98 67%, 1.03 75%, 0.99 83%, 1.01 91%, 1 100% );overflow:hidden;max-inline-size:550px;margin-inline:auto;margin-block-start:.5rem;position:relative;border:1px solid light-dark(rgb(187, 187, 187), #7e7e7e);border-radius:.4rem}search:focus-within{border-color:light-dark(rgb(92, 92, 92), #d1d1d1)}search:focus-within .search-icon{opacity:1;translate:0 0;pointer-events:auto}.search-input{background:none;border:0;padding:.5rem 2.5rem .5rem .5rem;outline:none}.search-icon{padding:0;border:0;background:rgba(0,0,0,0);position:absolute;right:.5rem;top:.35rem;font-size:1.4rem;cursor:pointer;opacity:0;translate:1.25rem 0;pointer-events:none;transition-timing-function:ease-out;transition-timing-function:var(--search-bounce);transition-duration:.58s;transition-property:opacity,translate}@media(prefers-reduced-motion: reduce){.search-icon{transition-duration:.15s;transition-timing-function:ease}}.article-header{background:var(--accent);color:#000;margin-block-end:4rem;padding-block:4rem;padding-inline:max(2rem,50vw - 50% + 2rem);inline-size:100vw;max-inline-size:100vw;margin-inline:calc(50% - 50vw);box-sizing:border-box}.article-content{max-inline-size:50ch;margin-inline:auto}.meta{font-family:var(--font-family-body);font-weight:300;text-transform:uppercase;font-size:.8rem;letter-spacing:.2rem;margin-block-end:.4rem}article,.comment{word-break:break-word}article h2:not(:first-child),article h3:not(:first-child),.comment h2:not(:first-child),.comment h3:not(:first-child){margin-block-start:3rem}article h2 a,article h3 a,.comment h2 a,.comment h3 a{color:inherit}article figure:not(:has(table)),.comment figure:not(:has(table)){container:cell/inline-size;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));padding:2rem;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48));border-radius:.4rem;border:1px solid light-dark(white, #333)}article figure:not(:has(table)) :last-child,.comment figure:not(:has(table)) :last-child{margin-block-end:0}article figure:not(:has(table)),.comment figure:not(:has(table)){border-radius:4px;margin-block:2rem !important}article figure:not(:has(table)) iframe,article figure:not(:has(table)) video,article figure:not(:has(table)) object,article figure:not(:has(table)) img,.comment figure:not(:has(table)) iframe,.comment figure:not(:has(table)) video,.comment figure:not(:has(table)) object,.comment figure:not(:has(table)) img{display:block;border-radius:2px}article figure:not(:has(table)) figcaption,.comment figure:not(:has(table)) figcaption{font-size:90%;text-align:left !important;margin:0 !important;display:block !important;margin-block-start:.5rem !important;max-width:300px}article figure:not(:has(table)).alignright,.comment figure:not(:has(table)).alignright{margin:0 -150px 0 1rem !important}article figure:not(:has(table)).alignleft,.comment figure:not(:has(table)).alignleft{margin:0 1rem 0 -150px !important}article figure:not(:has(table)).alignwide,.comment figure:not(:has(table)).alignwide{margin-left:-200px;margin-right:-200px}@media(width < 700px){article figure:not(:has(table)).alignright,article figure:not(:has(table)).alignleft,.comment figure:not(:has(table)).alignright,.comment figure:not(:has(table)).alignleft{max-width:150px}article figure:not(:has(table)).alignright,.comment figure:not(:has(table)).alignright{margin-right:0 !important;margin-left:1rem !important}article figure:not(:has(table)).alignleft,.comment figure:not(:has(table)).alignleft{margin-left:0 !important;margin-right:1rem !important}article figure:not(:has(table)).alignwide,.comment figure:not(:has(table)).alignwide{margin-left:0;margin-right:0}}article a,.comment a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}article a:not(:is(:hover,:focus)),.comment a:not(:is(:hover,:focus)){text-decoration-color:color-mix(in srgb, currentColor, transparent 75%)}article h1 a,article h2 a,article h3 a,article h4 a,article h5 a,article h6 a,.comment h1 a,.comment h2 a,.comment h3 a,.comment h4 a,.comment h5 a,.comment h6 a{text-decoration:none}article .wp-block-table,.comment .wp-block-table{border-collapse:collapse;margin-block-end:1rem;word-break:normal;overflow:auto;font-size:90%}article .wp-block-table td,article .wp-block-table th,.comment .wp-block-table td,.comment .wp-block-table th{border:1px solid #000;padding:.5rem 1rem;line-height:1.1}article .wp-block-table:focus,.comment .wp-block-table:focus{outline:2px solid #000}article .cp_embed_wrapper,.comment .cp_embed_wrapper{overflow:hidden;resize:horizontal;margin:0 auto 1rem}article .cp_embed_wrapper iframe,.comment .cp_embed_wrapper iframe{display:block}.wp-block-group{display:flow-root}.wp-block-columns{gap:1rem}.asks{margin-block-start:5rem;font-size:1rem;opacity:.8}.jp-relatedposts-post-title{font-family:var(--font-family);font-variation-settings:"wght" 500;font-size:1.1rem}.comments-area{margin-block-start:6rem;padding-block:4rem 5rem;inline-size:100vw;max-inline-size:100vw;margin-inline:calc(50% - 50vw);box-sizing:border-box;position:relative;z-index:1}.comments-area>*{max-inline-size:50ch;margin-inline:auto}h3#comments,.comments-title{font-family:var(--font-family);font-size:clamp(2.5rem,5vw,3.5rem);text-align:center;margin-block:0 2.5rem}.commentlist,.comment-list{list-style:none;padding:0;display:grid;gap:1.25rem}.comment,.pingback,.webmention{container:cell/inline-size;background:light-dark(oklch(from var(--light) calc(l - 0.05) 0 none), oklch(from var(--dark) calc(l + 0.05) 0 none));padding:2rem;box-shadow:0 3px 2.7px 0 light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.28)),0 16px 27.2px 3px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48));border-radius:.4rem;border:1px solid light-dark(white, #333)}.comment :last-child,.pingback :last-child,.webmention :last-child{margin-block-end:0}.comment,.pingback,.webmention{font-family:var(--font-family-body);margin-block-end:0;padding:1.75rem 1.5rem 1.5rem;position:relative;border-radius:.5rem;transform-origin:center top}@media(prefers-reduced-motion: no-preference){.commentlist>.comment:nth-child(odd),.comment-list>.comment:nth-child(odd),.commentlist>.pingback:nth-child(odd),.comment-list>.pingback:nth-child(odd),.commentlist>.webmention:nth-child(odd),.comment-list>.webmention:nth-child(odd){rotate:-0.6deg;rotate:random(-2deg, 2deg)}.commentlist>.comment:nth-child(even),.comment-list>.comment:nth-child(even),.commentlist>.pingback:nth-child(even),.comment-list>.pingback:nth-child(even),.commentlist>.webmention:nth-child(even),.comment-list>.webmention:nth-child(even){rotate:.5deg;rotate:random(-2deg, 2deg)}}.comment .children,.pingback .children,.webmention .children{margin-block-start:1.25rem;padding-inline-start:0;list-style:none;display:grid;gap:1rem;padding-inline-start:1.25rem;margin-inline-start:.5rem}.comment .children .comment,.comment .children .pingback,.comment .children .webmention,.pingback .children .comment,.pingback .children .pingback,.pingback .children .webmention,.webmention .children .comment,.webmention .children .pingback,.webmention .children .webmention{rotate:none !important;padding:1.25rem;box-shadow:0 2px 2px 0 light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2)),0 8px 12px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))}.comment-author{margin:0 0 .35rem;padding-inline-end:6rem}.comment-author .avatar{float:inline-start;margin-inline-end:.75rem;margin-block-end:.25rem;border-radius:50%;border:3px solid #000;box-shadow:2px 3px 0 rgba(0,0,0,.25)}.comment-author cite{font-family:var(--font-family);font-size:1.4rem;text-transform:none;font-style:normal;font-weight:normal;letter-spacing:-0.01em}.comment-author cite a{color:inherit;text-decoration:none !important}.comment-author cite a:hover,.comment-author cite a:focus{text-decoration:underline !important;text-underline-offset:3px}.says{display:none}.comment-meta,.comment-metadata{text-transform:uppercase;font-size:.7rem;letter-spacing:.12em;font-weight:600;margin:0;position:absolute;inset-block-start:1.5rem;inset-inline-end:1.25rem;opacity:.85;max-inline-size:45%}.comment-meta a,.comment-metadata a{color:inherit;text-decoration:none !important}.comment-meta a:hover,.comment-meta a:focus,.comment-metadata a:hover,.comment-metadata a:focus{text-decoration:underline !important}.comment-body p:not(:last-child),.comment-content p:not(:last-child){margin-bottom:.6rem}.reply,.comment-reply-link{margin-block-start:1rem}.comment-respond{margin-block-start:3rem;padding:2rem;background:light-dark(white, var(--dark));color:light-dark(black, white);border-radius:.5rem;border:1px solid CanvasText;box-shadow:6px 8px 0 var(--accent)}.comment-reply-title,#reply-title{font-family:var(--font-family);font-size:2rem;line-height:1.1;margin-block:0 1.5rem;text-transform:none}.comment-form{display:grid;gap:1rem}.comment-form label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-block-end:.35rem}.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;display:block;padding:.65rem .75rem;font-family:var(--font-family-body);font-size:1rem;border:2px solid light-dark(black, #555);border-radius:.35rem;background:light-dark(white, oklch(25% 0 0deg))}.comment-form input[type=text]:focus,.comment-form input[type=email]:focus,.comment-form input[type=url]:focus,.comment-form textarea:focus{outline:3px solid var(--accent);outline-offset:2px}.comment-form textarea{min-block-size:8rem;resize:vertical}.comment-form .form-submit input,.comment-form input[type=submit]{cursor:pointer}.lifelist{display:table;width:100%;list-style:none;margin:0 !important;padding:0 !important}.lifelist li{display:table-row}.lifelist li>*{display:table-cell;padding:.25rem 1.5rem 1rem 0}.timeline-type{white-space:nowrap;font-weight:bold}.timeline-date{white-space:nowrap}.home-grid{display:grid;display:grid-lanes;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:2rem;position:relative;z-index:3}.home-grid>*:not(dialog,.home-pagination){view-transition-class:home-grid-cell}.home-grid .pagination{display:none}.cell-pair{display:flex;gap:1rem}.cell-pair>*{flex:50%;min-inline-size:0}::view-transition{pointer-events:none}::view-transition-group(.home-grid-cell){animation-duration:.65s;animation-timing-function:ease-in-out}::view-transition-old(.home-grid-cell),::view-transition-new(.home-grid-cell){animation:none;mix-blend-mode:normal}@media(prefers-reduced-motion: reduce){::view-transition-group(.home-grid-cell),::view-transition-old(.home-grid-cell),::view-transition-new(.home-grid-cell){animation:none !important}}.codepen-cell{--codepen-tile-lg: 4.4rem;--codepen-tile-sm: 2.8rem;position:relative;isolation:isolate;overflow:hidden;cursor:pointer;color:inherit;min-block-size:11rem}.codepen-cell::before,.codepen-cell::after{content:"";position:absolute;inset:-1.25rem;pointer-events:none;mask-image:var(--codepen-logo);mask-repeat:repeat;mask-mode:alpha;-webkit-mask-image:var(--codepen-logo);-webkit-mask-repeat:repeat;transition:background-color .35s ease}.codepen-cell::before{background-color:light-dark(color-mix(in oklab, CanvasText 45%, transparent), color-mix(in oklab, CanvasText 19%, transparent));mask-size:var(--codepen-tile-lg) var(--codepen-tile-lg);mask-position:0 0;-webkit-mask-size:var(--codepen-tile-lg) var(--codepen-tile-lg);-webkit-mask-position:0 0;transition:background-color .35s ease,mask-position .7s ease-out,-webkit-mask-position .7s ease-out}.codepen-cell::after{background-color:light-dark(color-mix(in oklab, CanvasText 15%, transparent), color-mix(in oklab, CanvasText 26%, transparent));mask-size:var(--codepen-tile-sm) var(--codepen-tile-sm);mask-position:calc(var(--codepen-tile-sm)/2) calc(var(--codepen-tile-sm)/2);-webkit-mask-size:var(--codepen-tile-sm) var(--codepen-tile-sm);-webkit-mask-position:calc(var(--codepen-tile-sm)/2) calc(var(--codepen-tile-sm)/2);transition:background-color .35s ease,mask-position 1.15s ease-out,-webkit-mask-position 1.15s ease-out}.codepen-cell:hover::before{background-color:light-dark(color-mix(in oklab, CanvasText 65%, transparent), color-mix(in oklab, CanvasText 30%, transparent))}.codepen-cell:hover::after{background-color:light-dark(color-mix(in oklab, CanvasText 22%, transparent), color-mix(in oklab, CanvasText 36%, transparent))}@media(prefers-reduced-motion: no-preference){.codepen-cell:hover::before{mask-position:.55rem .4rem;-webkit-mask-position:.55rem .4rem}.codepen-cell:hover::after{mask-position:calc(var(--codepen-tile-sm)/2 + .18rem) calc(var(--codepen-tile-sm)/2 + .12rem);-webkit-mask-position:calc(var(--codepen-tile-sm)/2 + .18rem) calc(var(--codepen-tile-sm)/2 + .12rem)}}.shop-talk-show-cell{container:shop-talk-show-cell/inline-size;cursor:pointer;color:inherit;position:relative;width:100%;aspect-ratio:1;align-self:center}.shop-talk-show-cell .shop-talk-show-logo{inline-size:100%;block-size:auto;filter:grayscale(100%);transition:filter .35s ease,scale .35s ease,translate .35s ease}.shop-talk-show-cell>div{position:absolute;inset:0;transition:background-position .35s ease;background-image:url("images/side-chris.avif"),url("images/side-dave.avif");background-size:contain;background-repeat:no-repeat;background-position:left -150px top 24px,right -210px top}.shop-talk-show-cell:hover>div{background-position:left -50cqi top 24px,right -70cqi top}.shop-talk-show-cell:hover .shop-talk-show-logo{scale:.25;filter:grayscale(0%);translate:0 33%}.css-tricks-cell{cursor:pointer;color:inherit;width:100%;aspect-ratio:1;align-self:center}.css-tricks-cell .css-tricks-logo{display:block;width:100%;aspect-ratio:1;object-fit:contain;transform-origin:center;filter:grayscale(100%);transition:filter .35s ease}@media(prefers-reduced-motion: no-preference){.css-tricks-cell:hover .css-tricks-logo{animation:css-tricks-logo-spin .9s cubic-bezier(0.45, 0.05, 0.25, 1)}}.css-tricks-cell:hover .css-tricks-logo{filter:grayscale(0%)}@keyframes css-tricks-logo-spin{to{transform:rotate(720deg)}}glitch-cell.cell{display:block;padding:0;overflow:hidden;filter:grayscale(100%);transition:filter .35s ease}glitch-cell.cell:hover{filter:grayscale(0%)}.glitch-cell__trigger{all:unset;box-sizing:border-box;display:block;inline-size:100%;padding:0;cursor:pointer;color:inherit;font:inherit;border-radius:inherit}.glitch-cell__surface{position:relative;display:block;aspect-ratio:1;inline-size:100%;background-image:var(--glitch-image);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:inherit;overflow:hidden;isolation:isolate}.glitch-cell__surface::before,.glitch-cell__surface::after{content:"";position:absolute;inset:0;background-image:var(--glitch-image);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;pointer-events:none;will-change:transform,clip-path,filter}.glitch-cell__surface.is-glitching{animation:glitch-base 1.05s steps(6) infinite}.glitch-cell__surface.is-glitching::before{opacity:.92;mix-blend-mode:screen;filter:hue-rotate(95deg) saturate(3) contrast(1.35) drop-shadow(-6px 0 0 #ff2d6a) drop-shadow(6px 0 0 #00e8ff);animation:glitch-a 1.35s steps(5) infinite}.glitch-cell__surface.is-glitching::after{opacity:.92;mix-blend-mode:color-dodge;filter:hue-rotate(-70deg) saturate(2.8) contrast(1.4) drop-shadow(5px 0 0 #b8ff00) drop-shadow(-5px 0 0 #7b2fff);animation:glitch-b 1.15s steps(4) infinite reverse}@keyframes glitch-base{0%,100%{filter:saturate(1) contrast(1);transform:translate(0)}20%{filter:saturate(2.4) contrast(1.25) hue-rotate(12deg);transform:translate(-3px, 1px)}40%{filter:saturate(3) contrast(1.45) hue-rotate(-18deg);transform:translate(4px, -2px)}60%{filter:saturate(2.6) contrast(1.35) hue-rotate(28deg);transform:translate(-2px, 3px)}80%{filter:saturate(2.8) contrast(1.5) hue-rotate(-8deg);transform:translate(3px, 2px)}}@keyframes glitch-a{0%{clip-path:inset(8% 0 72% 0);transform:translate(-12px, 4px) skewX(-4deg)}20%{clip-path:inset(48% 0 18% 0);transform:translate(10px, -6px) skewX(3deg)}40%{clip-path:inset(22% 0 58% 0);transform:translate(-8px, 8px) skewX(-2deg)}60%{clip-path:inset(62% 0 4% 0);transform:translate(14px, 2px) skewX(5deg)}80%{clip-path:inset(2% 0 88% 0);transform:translate(-10px, -5px) skewX(-3deg)}100%{clip-path:inset(35% 0 42% 0);transform:translate(8px, 6px) skewX(2deg)}}@keyframes glitch-b{0%{clip-path:inset(78% 0 2% 0);transform:translate(11px, -4px) skewY(3deg)}25%{clip-path:inset(12% 0 68% 0);transform:translate(-13px, 7px) skewY(-4deg)}50%{clip-path:inset(38% 0 36% 0);transform:translate(9px, -8px) skewY(2deg)}75%{clip-path:inset(4% 0 86% 0);transform:translate(-7px, 5px) skewY(-2deg)}100%{clip-path:inset(55% 0 15% 0);transform:translate(12px, 3px) skewY(4deg)}}@media(prefers-reduced-motion: reduce){.glitch-cell__surface.is-glitching,.glitch-cell__surface.is-glitching::before,.glitch-cell__surface.is-glitching::after{animation:none;filter:none;opacity:1;transform:none}.glitch-cell__surface.is-glitching::before,.glitch-cell__surface.is-glitching::after{opacity:0}}.cell-blog{aspect-ratio:1;overflow:hidden;color:inherit;text-decoration:none;line-height:1.1;overflow-wrap:anywhere;position:relative;max-block-size:250px}.cell-blog>div{container-type:size;position:absolute;inset:-100px;white-space:nowrap}.cell-blog>div::before{content:"";float:left;inline-size:100cqw;block-size:100cqh;transition:shape-outside 1s ease;shape-outside:polygon(0 0, 100px 100%, 0 100%)}.cell-blog:hover>div::before{shape-outside:polygon(0 0, 0 0, 0 100%)}.ruby-cell{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;color:inherit;width:100%;aspect-ratio:1;align-self:center}.ruby-cell::before{content:"";position:absolute;inset:-50%;z-index:0;opacity:0;transform-origin:center;background:conic-gradient(from 0deg, #ff0048, #ff7a00, #ffe600, #00f076, #00c8ff, #7b2fff, #ff00c8, #ff0048);transition:opacity .25s ease}.ruby-cell:hover::before{opacity:1}@media(prefers-reduced-motion: no-preference){.ruby-cell:hover::before{animation:ruby-rainbow-spin 2.5s linear infinite}}.ruby-cell .ruby-image{display:block;position:relative;z-index:1;inline-size:100%;aspect-ratio:1;object-fit:cover;block-size:auto;border-radius:4px;filter:grayscale(100%);transition:filter .25s ease;border-radius:4px;overflow:hidden}.ruby-cell:hover .ruby-image{filter:grayscale(0%)}@keyframes ruby-rainbow-spin{to{transform:rotate(360deg)}}.cell-photos{--photos-image: url("images/myself.avif");--photos-image-wink: url("images/myself-winking.avif");padding:.5rem}.cell-photos figcaption{font-size:.75rem;text-align:center;margin-block-start:.5rem}.photos-image{display:block;inline-size:100%;aspect-ratio:1;border-radius:3px;background-image:var(--photos-image);background-size:cover;background-position:center;background-repeat:no-repeat;text-decoration:none}.photos-image:is(:hover,:focus-visible){background-image:var(--photos-image-wink)}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:2rem}.blog-grid .pagination{grid-column:1/-1}