.blog-carousel,.cp_embed_wrapper,.quote,.speakerdeck,.slideshare,.vimeo,.youtube,.amazon,.twitter,.capturedPage,pre.astro-code,.figure,.common-markdown table,.common-markdown blockquote,.common-markdown>dl,.common-markdown>ol,.common-markdown>ul{margin-top:3em;margin-bottom:3em}html,body,h1,h2,h3,h4,h5,h6,dl,ol,ul,li,dt,dd,p,figure,blockquote{margin:0;padding:0}h1,h2,h3,h4,h5,h6,pre,code{font-size:1rem;font-weight:400}li{text-align:left;list-style-type:none}a{color:currentColor;text-decoration:none}a img{border-width:0}button,input{appearance:none;background-color:#0000;border-width:0;font-size:1rem}*{-webkit-text-size-adjust:none;text-size-adjust:none}:root{--color-bg-primary:white;--color-bg-dark-f:#292c3d;--color-bg-dark:hsl($base-hue, 20%, 48%);--color-bg-light:#f1f1f4;--color-bg-strong:#e6a21a33;--color-fg-primary:black;--color-fg-secondary:#626a93;--color-fg-anchor:#0077b3;--color-fg-anchor-hover:#0099e6;--font-family-sans:Roboto, sans-serif;--font-family-mono:"Roboto Mono", "Source Code Pro", Courier, monospace;--font-size-markdown-h1:1.5rem;--font-size-markdown-h2:1.25rem;--font-size-markdown-h3:1.125rem}html{background-color:var(--color-bg-primary);color:var(--color-fg-primary);font-family:var(--font-family-sans);font-size:15px;position:relative}.cursors{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.cursor{--bg:transparent;pointer-events:none;z-index:-1;width:1px;height:1px;position:absolute;top:0;left:0;overflow:visible}.cursor polygon{fill:var(--bg);stroke-width:0;transition:fill .2s,stroke .2s}.bouncy{--bg:var(--color-bg-light);outline:none}.bean{height:96px;image-rendering:pixelated;background-repeat:no-repeat;width:96px;display:block}.common-box{--padding:15px;flex-direction:column;flex:1;width:288px;height:288px;display:flex;position:relative;overflow:hidden}.common-box:before{content:"";bottom:68px;left:var(--padding);pointer-events:none;right:var(--padding);background:url(/assets/img/works/grid.svg) 0 0/15px;position:absolute;top:63px}.common-box .bean{margin:auto;position:absolute;top:99px;left:0;right:0;overflow:hidden}.common-box .bean.lazy-loaded+img.bean.lazy-loaded{visibility:hidden}.common-box_anchor{--bg:var(--color-bg-light);--fg:var(--color-fg-primary);color:inherit;outline:none;width:100%;height:100%;display:block}.common-box.common-box-static .common-box_anchor{background-color:var(--bg)}.common-box.common-box-static .common-box_anchor>svg{display:none}.common-box_header{left:var(--padding);top:var(--padding);right:var(--padding);flex-shrink:0;align-items:center;gap:12px;display:flex;position:absolute}.common-box_number{--px-scale:3;background-color:var(--color-fg-primary);color:var(--color-bg-primary);justify-content:center;align-items:center;min-width:63px;height:33px;display:flex}.common-box.common-box-nav .common-box_number{opacity:.1}.common-box.common-box-nav .common-box_anchor.bouncy.bouncy-active .common-box_number{opacity:1}.common-box_anchor.bouncy.bouncy-active .common-box_number,.common-box.common-box-static .common-box_number{background-color:var(--fg);color:var(--bg)}.common-box_title{flex:1;overflow:hidden}.common-box_name{--px-scale:3;--px-trailing:12}.common-box_name .pxtx{margin-left:auto;font-weight:700;position:relative}.common-box_name .pxtx:before{background-color:var(--fg);content:"";transform-origin:0;width:100%;transition:transform .2s steps(12,end);position:absolute;top:0;bottom:0;left:0;transform:scaleX(0)}.safari .common-box_name .pxtx:before{transition:none}.common-box_anchor.bouncy.bouncy-active .common-box_name .pxtx:before,.common-box.common-box-static .common-box_name .pxtx:before{width:100%;transform:scaleX(1)}.common-box_arrow{--px-scale:3;height:calc(var(--px-scale) * 5px);width:calc(var(--px-scale) * 3px);margin:auto;position:absolute;inset:0}.common-box_anchor.bouncy.bouncy-active .common-box_arrow{color:var(--fg)}.common-box_footer{bottom:var(--padding);left:var(--padding);right:var(--padding);gap:10px;display:flex;position:absolute}.common-box.common-box-nav .common-box_footer{justify-content:center}.common-box_colors{flex-direction:column;gap:6px;width:6px;display:flex}.common-box.common-box-nav .common-box_colors{opacity:.1;width:3px}.common-box.common-box-nav .common-box_anchor.bouncy.bouncy-active .common-box_colors{opacity:1}.common-box_color{background-color:#000;width:100%;height:10px}.common-box_description{--px-scale:2;flex-direction:column;flex:1;gap:6px;margin-left:auto;display:flex}.common-box_description .pxtx{position:relative}.common-box_description .pxtx.pxtx-rendered{margin-left:auto}.common-box_description .pxtx:before{background-color:var(--fg);content:"";width:0;transition:width .2s steps(24,end);position:absolute;top:0;bottom:0;left:0}.safari .common-box_description .pxtx:before{transition:none}.common-box_description .pxtx:first-child:before{transition-delay:.2s}.safari .common-box_description .pxtx:first-child:before{transition-delay:0s}.common-box_description .pxtx:nth-child(2):before{transition-delay:.1s}.safari .common-box_description .pxtx:nth-child(2):before{transition-delay:0s}.common-box_description .pxtx:nth-child(3):before{transition-delay:1ms}.safari .common-box_description .pxtx:nth-child(3):before{transition-delay:0s}.common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:before,.common-box.common-box-static .common-box_description .pxtx:before{width:100%}.common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:first-child:before,.common-box.common-box-static .common-box_description .pxtx:first-child:before{transition-delay:1ms}.safari .common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:first-child:before,.safari .common-box.common-box-static .common-box_description .pxtx:first-child:before{transition-delay:0s}.common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:nth-child(2):before,.common-box.common-box-static .common-box_description .pxtx:nth-child(2):before{transition-delay:.1s}.safari .common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:nth-child(2):before,.safari .common-box.common-box-static .common-box_description .pxtx:nth-child(2):before{transition-delay:0s}.common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:nth-child(3):before,.common-box.common-box-static .common-box_description .pxtx:nth-child(3):before{transition-delay:.2s}.safari .common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:nth-child(3):before,.safari .common-box.common-box-static .common-box_description .pxtx:nth-child(3):before{transition-delay:0s}.common-button{background-color:var(--color-fg-primary);color:var(--color-bg-primary);padding:calc(5px * var(--px-scale));display:inline-block}.common-button.common-button-disabled{background-color:var(--color-bg-dark-f);opacity:.5}.common-button.common-button-disabled .pxtx{opacity:.5}.common-button:not(.common-button-disabled):hover{background-color:var(--color-fg-anchor)}@media screen and (width>=480px){.common-globalFooter{margin-top:120px}}@media screen and (width<=479px){.common-globalFooter{margin-top:90px}}.common-globalFooter_copyright{--px-scale:2;padding-bottom:30px;font-size:.8rem}@media screen and (width>=800px){.common-globalFooter_copyright{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-globalFooter_copyright{margin-left:30px;margin-right:30px}}.common-globalFooter_copyright .pxtx{width:126px;margin:auto}html.notFound .common-globalFooter{color:#00000080;pointer-events:none;position:absolute;bottom:0;left:0;right:0}html.sketches.sketches-single .common-globalFooter{pointer-events:none;position:absolute;bottom:0;left:0;right:0}.common-globalHeader{z-index:2;padding-top:30px;padding-bottom:30px;position:relative}.common-globalHeader_body{box-sizing:border-box;align-items:center;padding-left:60px;padding-right:60px;display:flex;position:relative}@media screen and (width<=799px){.common-globalHeader_body{padding-left:30px;padding-right:30px}}.common-globalHeader_logo{align-items:center;padding:12px;display:flex}@media screen and (width<=479px){.common-globalHeader_logo{position:relative;left:-12px}}.common-globalHeader_menu{margin-left:auto}.common-globalHeaderMenu{align-items:center;gap:30px;display:flex}@media screen and (width<=799px){.common-globalHeaderMenu{gap:0}}.common-globalHeaderMenu_searchContainer{width:200px}@media screen and (width<=799px){.common-globalHeaderMenu_searchContainer{display:none}}.common-globalHeaderMenuItem{--px-scale:3;vertical-align:top;display:inline-block}.common-globalHeaderMenuItem_anchor{padding:12px;display:block}.common-globalHeaderMenuItem_anchor .pxtx:not(.pxtx-rendered){width:57px;font-weight:700}.common-logo{flex-direction:column;gap:6px;display:flex}.common-logo_image svg{width:30px;height:30px;display:block}.common-logo_indicator{gap:6px;height:3px;display:flex}.common-logo_level{opacity:.1;background-color:currentColor;width:6px;height:100%}.common-logo_level.common-logo_level-active{opacity:1}.common-markdown h1,.common-markdown h2,.common-markdown h3,.common-markdown h4,.common-markdown h5,.common-markdown h6{margin-top:4rem;margin-bottom:1rem;font-weight:700}.common-markdown h1+dl,.common-markdown h1+ol,.common-markdown h1+ul,.common-markdown h2+dl,.common-markdown h2+ol,.common-markdown h2+ul,.common-markdown h3+dl,.common-markdown h3+ol,.common-markdown h3+ul,.common-markdown h4+dl,.common-markdown h4+ol,.common-markdown h4+ul,.common-markdown h5+dl,.common-markdown h5+ol,.common-markdown h5+ul,.common-markdown h6+dl,.common-markdown h6+ol,.common-markdown h6+ul{margin-top:0}.common-markdown h1{font-size:var(--font-size-markdown-h1)}.common-markdown h2{font-size:var(--font-size-markdown-h2)}.common-markdown h3{font-size:var(--font-size-markdown-h3)}.common-markdown p{line-height:1.8}.common-markdown p+p{margin-top:1rem}.common-markdown p a:not(.common-box_anchor),.common-markdown li a:not(.common-box_anchor),.common-markdown dd a:not(.common-box_anchor){word-break:break-all;color:var(--color-fg-anchor);text-decoration:underline;transition:color .2s ease-out}.common-markdown p a:not(.common-box_anchor):hover,.common-markdown li a:not(.common-box_anchor):hover,.common-markdown dd a:not(.common-box_anchor):hover{color:var(--color-fg-anchor-hover)}.common-markdown>ol,.common-markdown>ul:not(.posts-list){padding-left:2em}.common-markdown>ol li{list-style-type:decimal}.common-markdown>ul:not(.posts-list) li{list-style-type:disc}.common-markdown>ul:not(.posts-list) li>ul{margin-top:.5em;padding-left:1.5em}.common-markdown>ul:not(.posts-list) li>ul li{list-style-type:circle}.common-markdown>ol li+li,.common-markdown>ul:not(.posts-list) li+li{margin-top:.5em}.common-markdown h1>code,.common-markdown h1>a>code,.common-markdown h2>code,.common-markdown h2>a>code,.common-markdown h3>code,.common-markdown h3>a>code,.common-markdown h4>code,.common-markdown h4>a>code,.common-markdown h5>code,.common-markdown h5>a>code,.common-markdown h6>code,.common-markdown h6>a>code,.common-markdown p>code,.common-markdown p>a>code,.common-markdown li>code,.common-markdown li>a>code,.common-markdown strong>code,.common-markdown strong>a>code,.common-markdown td>code,.common-markdown td>a>code{background-color:var(--color-bg-light);color:var(--color-fg-secondary);font-family:var(--font-family-mono);padding:2px;font-weight:700}.common-markdown h1>code,.common-markdown h2>code,.common-markdown h3>code,.common-markdown h4>code,.common-markdown h5>code,.common-markdown h6>code,.common-markdown strong>code{font-size:inherit}.common-markdown blockquote{background-color:var(--color-bg-light);color:var(--color-fg-secondary);border-left:6px solid;padding:15px}.common-markdown blockquote+.common-markdown blockquote{margin-top:.5em}.common-markdown table{border-collapse:collapse;border-color:var(--color-bg-light);border-style:solid;border-width:1px 0 0 1px}.common-markdown th,.common-markdown td{border-color:var(--color-bg-light);border-style:solid;border-width:0 1px 1px 0;padding:9px 15px}.common-markdown th{background-color:var(--color-bg-light);color:var(--color-fg-secondary)}.common-markdown aside{opacity:.8;font-size:.8rem}.common-markdown p+aside{margin-top:1em}.common-markdown strong{background-color:var(--color-bg-strong);font-weight:700}.common-markdown strong a,.common-markdown a strong{text-decoration:underline}.common-markdown .footnotes{border-color:var(--color-bg-light);border-style:solid;border-width:3px 0 0;margin-top:60px;margin-bottom:30px;padding-top:30px;font-size:.9rem}.common-markdown .footnotes>h2{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.common-markdown .footnotes ol{padding-left:2em}.common-markdown .footnotes li{margin-top:1em;list-style-type:decimal}.common-markdown .footnotes li:first-child{margin-top:0}.figure{text-align:center}.figure.figure-margin{background-color:var(--color-bg-light);padding:30px}.figure_items{justify-content:space-around;display:flex}.figure_item{flex:1}.figure_item+.figure_item{margin-left:15px}.figure_anchor{transition:opacity .2s ease-out;display:block}.figure_anchor:hover{opacity:.8}.figure_image{max-width:100%;max-height:600px;margin-left:auto;margin-right:auto;display:block}.figure.figure-margin .figure_image{background-color:#fff;box-shadow:0 2px 8px #0000001a}.figure_title{color:var(--color-fg-secondary);word-break:auto-phrase;margin-top:15px;font-size:.9rem;font-weight:700}pre.astro-code{font-family:var(--font-family-mono);max-height:480px;padding:30px;font-size:.9rem;overflow:scroll}pre.astro-code code{font-family:inherit;font-size:inherit}.capturedPage{background-color:var(--color-bg-light);text-align:center;padding:30px 0;position:relative}.capturedPage_background{opacity:.1;background-size:contain;position:absolute;inset:0}.capturedPage_anchor{color:var(--color-fg-secondary);width:50%;text-decoration:none;display:inline-block;position:relative}.capturedPage_anchor:hover{text-decoration:underline}.capturedPage_title{word-break:auto-phrase;margin-bottom:30px;font-size:.9rem;font-weight:700}.capturedPage_image{background-color:var(--color-bg-primary);height:0;padding-bottom:56.25%;transition:opacity .2s ease-out;position:relative;box-shadow:0 2px 8px #0000001a}.capturedPage_image img{object-fit:cover;object-position:center top;opacity:0;width:100%;height:100%;transition:opacity .5s ease-out;display:block;position:absolute;top:0;left:0}.capturedPage_image img.lazy-loaded{opacity:1}.capturedPage_anchor:hover .capturedPage_image{opacity:.8}.twitter{background-color:var(--color-bg-light);flex-direction:column;align-items:center;margin-left:auto;margin-right:auto;padding:30px;display:flex}.twitter_tweet{max-width:100%}.instagram{background-color:var(--color-bg-light);text-align:center;margin:1rem auto;padding:30px}.amazon{background-color:var(--color-bg-light);padding:30px}.amazon_anchor{color:var(--color-fg-secondary);text-align:center;text-decoration:none}.amazon_anchor:hover{text-decoration:underline}.amazon_text{margin-bottom:30px;font-size:.9rem;font-weight:700}.amazon_image{max-height:200px;margin-left:auto;margin-right:auto;transition:opacity .2s ease-out;display:block;box-shadow:0 2px 8px #0000001a}.amazon_anchor:hover .amazon_image{opacity:.8}.vimeo iframe{border-width:0}.quote blockquote.quote_quote{margin-top:0;margin-bottom:0}.quote_ref{color:var(--color-fg-secondary);text-align:right;margin-top:.5em;font-size:.9rem}.common-page{position:relative;overflow-x:hidden}@media screen and (width>=800px){.common-page_header.common-page_header-work{margin-top:90px}}.common-page_content{margin-top:120px;margin-bottom:120px}@media screen and (width>=800px){.common-page_content{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-page_content{margin:60px 30px}}.common-page_title{font-size:var(--font-size-markdown-h1);font-weight:700}.common-page_title.common-page_title-work{text-align:center;margin-bottom:60px}.common-page_body{margin-top:1rem}.common-page_section+.common-page_section{margin-top:60px}.common-page_list{margin-top:120px;margin-bottom:120px;padding-left:60px;padding-right:60px;position:relative}@media screen and (width<=799px){.common-page_list{margin-top:60px;margin-bottom:60px;padding-left:30px;padding-right:30px}}.common-page_bottomSeriesNav,.common-page_author{margin-bottom:60px}.common-page_bottomSeriesNav{background-color:var(--color-bg-light);padding:30px 0}@media screen and (width>=800px){.common-page_bottomSeriesNavInner{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-page_bottomSeriesNavInner{margin-left:30px;margin-right:30px}}.common-page_authorBody{box-sizing:border-box}@media screen and (width>=800px){.common-page_authorBody{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-page_authorBody{margin-left:30px;margin-right:30px}}@media screen and (width>=800px){.common-page_authorBody{padding-left:60px;padding-right:60px}.common-page_pageNavBody{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-page_pageNavBody{margin-left:30px;margin-right:30px}}.common-page_toc{margin-left:670px;position:absolute}@media screen and (width<=799px){.common-page_toc{display:none}}.common-page_share{z-index:1;position:fixed;bottom:30px;right:30px}@media print{.common-page_share{display:none}}.common-share{opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(10px)}.common-share.common-share-active{opacity:1;pointer-events:auto;transform:none}.common-share_body{--px-scale:3;background-color:var(--color-bg-light);box-sizing:border-box;align-items:center;padding:15px;display:flex}.common-share_icons{align-items:center;gap:9px;margin-left:15px;display:flex}.common-share_icons a,.common-share_icons img{display:block}.common-share_hatena:hover{filter:brightness(1.1)saturate(1.2)}.common-share_x:hover{filter:opacity(.7)}.common-pageHeader{background-color:var(--color-fg-primary);color:var(--color-bg-primary);position:relative;overflow:hidden}@media screen and (width>=480px){.common-pageHeader{height:auto;padding-top:0}}.common-pageHeader_background{pointer-events:none;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}@media screen and (width>=800px){.common-pageHeader_body{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-pageHeader_body{margin-left:30px;margin-right:30px}}.common-pageHeader_body{padding-top:90px;padding-bottom:90px}.common-pageHeader_text{mix-blend-mode:hard-light;position:relative}.common-pageHeader_title{--px-scale:6;font-size:1.33333rem;font-weight:700}.common-pageHeader_title .pxtx:not(.pxtx-rendered){width:141px}.common-pageHeader_subtitle{--px-scale:2;margin-top:18px;font-size:.8rem;font-weight:700;line-height:1.5}.common-pager{--px-scale:3}.common-pager_body{height:39px;position:relative}@media screen and (width>=800px){.common-pager_body{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.common-pager_body{margin-left:30px;margin-right:30px}}.common-pager_items{justify-content:center;gap:12px;display:flex}@media screen and (width<=799px){.common-pager_items{display:none}}.common-pager_navButton{height:39px;margin:auto;position:absolute;top:0}.common-pager_navButton.common-pager_navButton-prev{left:0}.common-pager_navButton.common-pager_navButton-next{right:0}.common-pager_stats{opacity:.5;justify-content:center;align-items:center;height:39px;display:flex;top:0;left:0;right:0}@media screen and (width>=800px){.common-pager_stats{display:none}}@media screen and (width<=799px){.common-pager_stats{position:absolute}}.common-pagerItem{min-width:39px;height:39px}.common-pagerItem.common-pagerItem-ellipsis{opacity:.25;justify-content:center;align-items:center;display:flex}.common-pagerItem_anchor{justify-content:center;align-items:center;height:100%;display:flex}.common-pagerItem.common-pagerItem-current .common-pagerItem_anchor{background-color:var(--color-fg-primary);color:var(--color-bg-primary)}.common-pagerNavButton{box-sizing:border-box;text-align:center;white-space:nowrap;justify-content:center;align-items:center;height:39px;padding:12px;transition:background-color .2s ease-out;display:flex}.posts-list{grid-template-columns:repeat(auto-fill,288px);justify-content:center;align-items:flex-start;gap:42px;display:grid}@media screen and (width>=800px){.posts-list.posts-list-more{justify-content:flex-start;display:flex}}@media screen and (width<=479px){.posts-list.posts-list-more{flex-direction:column;align-items:center;display:flex}}.posts-list_item{position:relative}.posts-more{--px-scale:3;justify-content:center;align-items:center;display:flex}@media screen and (width>=800px){.posts-more{width:138px;height:288px}}@media screen and (width>=480px) and (width<=799px){.posts-more{width:288px;height:138px}}@media screen and (width<=479px){.posts-more{width:288px;height:138px}}.posts-more:before{content:"";pointer-events:none;background:url(/assets/img/works/grid.svg) 0 0/15px;position:absolute;inset:15px}.posts-more .pxtx{position:relative;top:1.5px;left:4.5px}.pxtx{height:calc(var(--px-scale) * 5px);image-rendering:pixelated;text-indent:-100vw;background-color:currentColor;overflow:hidden;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}.common-search{padding:3px 0;position:relative}.common-search:before{background-color:var(--color-fg-primary);content:"";opacity:.3;height:3px;display:block;position:absolute;bottom:0;left:0;right:0}.common-search_icon{opacity:.3;text-align:center;justify-content:center;align-items:center;width:33px;display:flex;position:absolute;top:0;bottom:0;left:0}.common-search_input{background-color:var(--color-bg-primary);box-sizing:border-box;height:33px;padding-left:33px;padding-right:9px;line-height:33px;display:block;position:relative}.common-search_input:focus{background-color:var(--color-bg-light);outline:none}.common-search_results{border:var(--color-bg-light) solid 1px;visibility:hidden;background-color:#fff;min-width:150%;line-height:normal;position:absolute;top:39px;left:0;box-shadow:0 2px 8px #0000001a}.common-search.common-search-focused .common-search_results{visibility:visible}.common-searchResult{cursor:pointer;padding:9px 15px;display:block}.common-searchResult.common-searchResult-empty{opacity:.5}.common-searchResult:hover{background-color:var(--color-bg-light)}.common-searchResult+.common-searchResult{border-top:var(--color-bg-light) solid 1px}.common-searchResult_title{white-space:nowrap;font-weight:700}.common-searchResult_matched{opacity:.5;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-top:2px;font-size:.8rem;display:-webkit-box;overflow:hidden}.common-youtube{background-color:var(--color-bg-light);width:100%;height:0;padding-bottom:56.25%;position:relative}.common-youtube iframe{width:100%;height:100%;position:absolute;top:0;left:0}.about-socials{--px-scale:2;flex-wrap:wrap;gap:6px;margin-top:1em;display:flex}.about-career{flex-direction:column;gap:1em;display:flex}.about-career_row{display:flex}@media screen and (width>=480px){.about-career_row{align-items:center;gap:15px}}@media screen and (width<=479px){.about-career_row{flex-direction:column;gap:5px}}.about-career_period{--px-scale:2}.about-career_summary a{color:var(--color-fg-anchor);text-decoration:underline;transition:color .2s ease-out}.about-career_summary a:hover{color:var(--color-fg-anchor-hover)}.index-page{text-align:center;overflow-x:hidden}@media screen and (width>=800px){.index-page_body{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.index-page_body{margin-left:30px;margin-right:30px}}.index-page_logo{--px-scale:2;margin-top:120px}@media screen and (width<=479px){.index-page_logo{margin-top:60px}}.index-page_logo .pxtx{width:142px}.index-page_role{margin-top:30px}.index-page_role .pxtx{margin-left:auto;margin-right:auto}.index-page_section+.index-page_section{margin-top:120px}.index-section_title{--px-scale:6;margin-bottom:60px}@media screen and (width<=479px){.index-section_title{--px-scale:3}}.index-section_title .pxtx:not(.pxtx-rendered){width:76px}.index-logo{justify-content:center;display:flex;position:relative}.index-logo_image{height:312px;image-rendering:pixelated;z-index:-2;background-color:currentColor;width:300px;transition:color .25s;-webkit-mask-size:contain;mask-size:contain}.index-logo_dots{width:240px;margin:auto;position:absolute;inset:0}.index-logo_dots.index-logo_dots-active+.index-logo_image{color:var(--bg)}.index-logo_dot{width:24px;height:24px;position:absolute;top:0;left:0}html.notFound{position:absolute;inset:0}.notFound-page{justify-content:space-around;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.sketches-listItem{background-color:var(--color-bg-dark-f);position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}@media screen and (width>=800px){.sketches-listItem{width:48%;display:inline-block}.sketches-listItem:nth-child(2n+2){margin-left:4%}.sketches-listItem:nth-child(n+3){margin-top:4%}}@media screen and (width<=799px){.sketches-listItem+.sketches-listItem{margin-top:30px}}.sketches-listItem_background{opacity:.3;background-position:50%;background-repeat:no-repeat;background-size:cover;transition:opacity .2s ease-out;position:absolute;inset:0;transform:scale(1.01)}.sketches-listItem:hover .sketches-listItem_background{opacity:.8}.sketches-listItem_anchor{color:#fff;padding:30px;font-size:1.2rem;font-weight:700;display:block;position:relative}.sketches-listItem_title{--px-scale:3}html.sketches.sketches-single{position:absolute;inset:0}.sketches-singlePage{width:100%;height:100%;position:absolute;top:0;left:0}.sketches-singlePage_canvas{position:absolute;inset:0}.sketches-singlePage_canvas iframe{width:100%;height:100%;position:absolute;top:0;left:0}.zeroPde-title_title{font-size:var(--font-size-markdown-h1);margin-bottom:1.5rem;font-weight:700}.zeroPde-title_badge{background-color:var(--color-fg-primary);color:var(--color-bg-light);padding:.2em .5em;font-size:.7em;line-height:2}.zeroPde-title_lead p{line-height:1.8}.zeroPde-title_lead p+p{margin-top:1em}.blog-author{border:var(--color-bg-light) solid 3px;align-items:stretch;padding:30px}.blog-author_header{align-items:center;gap:30px;display:flex}.blog-author_image img{width:45px;height:45px;display:block}.blog-author_text{flex:1;margin-top:15px}@media screen and (width>=480px){.blog-author_text{margin-left:75px}}.blog-author_action{margin-top:15px;font-size:0}.blog-author_title{--px-scale:3;font-size:1.2rem;font-weight:700}@media screen and (width<=799px){.blog-author_title{font-size:1rem}}.blog-author_detail{line-height:1.8}.blog-author_detail p+p{margin-top:1em}.blog-carousel{background-color:var(--color-bg-light);position:relative}.blog-carousel_items{overflow:hidden}.blog-carousel_offset{white-space:nowrap;padding:30px;font-size:0;position:relative}@media screen and (width<=799px){.blog-carousel_offset{padding:15px}}.blog-carousel_item{background-color:#fff;width:100%;list-style-type:none;display:inline-block;box-shadow:0 2px 8px #0000001a}.blog-carousel_item+.blog-carousel_item{margin-left:15px}.blog-carousel_image{width:100%;display:block}.blog-carousel_toolbar{background-color:var(--color-bg-dark-f);position:relative}.blog-carousel_button{--px-scale:3;color:#fff;cursor:pointer;vertical-align:top;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .2s ease-out;display:inline-flex;position:relative}.blog-carousel_button:hover{background-color:#fff3}.blog-carousel_button:disabled{cursor:default;opacity:.2;background-color:#0000}.blog-carousel_indicator{color:#fff;text-align:center;font-size:.9rem;font-weight:700;line-height:44px;position:absolute;inset:0}.blog-listItem{width:288px;display:flex;position:relative}.blog-listItem_anchor{flex-direction:column;width:100%;padding:15px;display:flex;position:relative}.blog-listItem_thumbnail{background-color:var(--color-bg-dark-f);width:100%;height:0;padding-top:100%;position:relative;overflow:hidden}.blog-listItem_image{filter:saturate(0%);opacity:0;background-position:50%;background-repeat:no-repeat;background-size:cover;transition:filter .4s,opacity .4s;position:absolute;inset:0;transform:scale(1.01)}.blog-listItem_image.blog-listItem_image-logo{opacity:.3;background-image:url(/assets/img/common/logo.svg);background-size:30%}.blog-listItem_image.lazy-loaded{opacity:.5}.safari .blog-listItem_image{filter:none}.blog-listItem_anchor.bouncy.bouncy-active .blog-listItem_image{filter:none;opacity:1}.blog-listItem_date{--px-scale:2;color:#ff8000;mix-blend-mode:screen;font-size:.8rem;position:absolute;bottom:9px;right:9px}.blog-listItem_date .pxtx:not(.pxtx-rendered){width:78px}.blog-listItem_nav{--px-scale:2;background-color:var(--color-fg-primary);color:var(--color-bg-primary);padding:9px;position:absolute;top:0;right:0}.blog-listItem_text{box-sizing:border-box;margin-top:15px;padding:0 1px;position:relative}.blog-listItem_title{word-break:auto-phrase;font-size:1rem;font-weight:700;line-height:1.4}.blog-pageHeader{background-color:var(--color-bg-light);position:relative;overflow:hidden}.blog-pageHeader.blog-pageHeader-zeroPde{height:360px}.blog-pageHeader_background{filter:blur(24px)saturate(1.5);opacity:0;pointer-events:none;background-position:50%;background-repeat:no-repeat;background-size:cover;transition:opacity .5s;position:absolute;inset:0;transform:scale(2)}.blog-pageHeader_background.lazy-loaded{opacity:.3}.blog-pageHeader.blog-pageHeader-zeroPde .blog-pageHeader_background{background-color:var(--color-bg-dark-f);filter:none;opacity:1;background-image:url(/data/zero-pde/cover.jpg);transform:none}@media screen and (width>=800px){.blog-pageHeader_body{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.blog-pageHeader_body{margin-left:30px;margin-right:30px}}.blog-pageHeader_body{align-items:center;padding-top:90px;padding-bottom:90px;display:flex}@media screen and (width<=479px){.blog-pageHeader.blog-pageHeader-zeroPde{height:320px}}.blog-pageHeader_text{mix-blend-mode:hard-light;position:relative}.blog-pageHeader_title{word-break:auto-phrase;font-size:1.33333rem;font-weight:700;line-height:1.3}.blog-pageHeader_date{--px-scale:2;margin-top:18px}.blog-pageHeader_date .pxtx:not(.pxtx-rendered){width:78px}.blog-pageHeader_subtitle{margin-top:1rem;line-height:1.8}.blog-seriesNav{background-color:var(--color-bg-dark-f);color:#fffffff2}@media screen and (width>=800px){.blog-seriesNav_header{max-width:640px;margin-left:auto;margin-right:auto}}@media screen and (width<=799px){.blog-seriesNav_header{margin-left:30px;margin-right:30px}}.blog-seriesNav_header{font-weight:700;display:flex;position:relative}.blog-seriesNav_background{opacity:.3;background-image:url(/data/blog/series/interactive-coding.png);background-position:50%;background-repeat:no-repeat;background-size:cover;transition:opacity .2s ease-out;position:absolute;inset:0}.blog-seriesNav_header:hover .blog-seriesNav_background{opacity:.8;text-decoration:underline}.blog-seriesNav_prefix{white-space:nowrap;align-items:center;padding:15px;display:flex;position:relative}.blog-seriesNav_prefix:after{content:"";background-color:#ffffff1a;width:1px;display:block;position:absolute;top:9px;bottom:9px;right:0}.blog-seriesNav_title{padding:15px;position:relative}.blog-seriesNav_header:hover .blog-seriesNav_title{text-decoration:underline}.blog-seriesNavItem{background-color:var(--color-bg-primary);color:var(--color-fg-primary);font-weight:700}.blog-seriesNavItem+.blog-seriesNavItem{border-top:var(--color-bg-light) solid 1px}.blog-seriesNavItem_anchor{--px-scale:2;opacity:.3;align-items:center;gap:15px;padding:15px;transition:background-color .2s ease-out;display:flex}.blog-seriesNavItem a.blog-seriesNavItem_anchor{opacity:1}.blog-seriesNavItem_prefix{color:var(--color-fg-secondary);white-space:nowrap;font-size:.8rem;position:relative}a.blog-seriesNavItem_anchor:hover .blog-seriesNavItem_title{text-decoration:underline}.blog-toc{background-color:var(--color-bg-light);box-sizing:border-box;width:240px;padding:15px;font-size:.8rem}.blog-toc_item{cursor:pointer;opacity:.3}.blog-toc_item:hover{opacity:1}.blog-toc_item+.blog-toc_item{margin-top:1em}.blog-toc_item.blog-toc_item-h1{margin-top:2em;font-weight:700}.blog-toc_item.blog-toc_item-h1:first-child{margin-top:0}.blog-toc_item.blog-toc_item-h3,.blog-toc_item.blog-toc_item-h4,.blog-toc_item.blog-toc_item-h5,.blog-toc_item.blog-toc_item-h6{margin-left:1em}.works-pageHeader{justify-content:center;display:flex}.works-pageHeader_content{margin-left:auto;margin-right:auto;position:relative}.works-pageHeader_content .common-box{margin:auto}@media screen and (width>=800px){.works-pageHeader_content .common-box{width:618px}}@media screen and (width>=480px) and (width<=799px){.works-pageHeader_content .common-box{width:438px}}@media screen and (width<=479px){.works-pageHeader_content .common-box{width:288px}}.works-pageHeader_prev,.works-pageHeader_next{position:absolute;top:0}.works-pageHeader_prev .common-box,.works-pageHeader_next .common-box{width:93px}.works-pageHeader_next{left:-105px}.works-pageHeader_prev{right:-105px}.works-imageListItem{font-size:0}.works-imageListItem+.works-imageListItem{margin-top:9px}.works-imageListItem_anchor:hover{filter:saturate(1.05)brightness(1.05)}.works-imageListItem_image{border:1px solid #0000000d;width:100%;display:block}.works-eventList{flex-direction:column;gap:1em;display:flex}.works-eventListItem{display:flex}@media screen and (width>=480px){.works-eventListItem{align-items:center;gap:15px}}@media screen and (width<=479px){.works-eventListItem{flex-direction:column;gap:5px}}.works-eventListItem_date{--px-scale:2}.works-eventListItem_detail a{color:var(--color-fg-anchor);text-decoration:underline;transition:color .2s ease-out}.works-eventListItem_detail a:hover{color:var(--color-fg-anchor-hover)}@media screen and (width>=800px){.works-creditListItem{display:flex}}.works-creditListItem+.works-creditListItem{margin-top:1em}.works-creditListItem_role{margin-right:.5em;font-weight:700}.works-creditListItem_role:after{content:":"}@media screen and (width<=799px){.works-creditListItem_name{margin-top:.3rem}}.works-creditListItem_name a{color:var(--color-fg-anchor);text-decoration:underline;transition:color .2s ease-out}.works-creditListItem_name a:hover{color:var(--color-fg-anchor-hover)}.works-techStacks{flex-wrap:wrap;gap:6px;display:flex}.works-techStacks_item{--px-scale:2;background-color:var(--color-fg-primary);color:var(--color-bg-primary);padding:calc(5px * var(--px-scale))}