.blog-carousel,.cp_embed_wrapper,.quote,.speakerdeck,.slideshare,.vimeo,.youtube,.amazon,.twitter,.capturedPage,.highlight,.figure,.common-markdown table,.common-markdown blockquote,.common-markdown>dl,.common-markdown>ol,.common-markdown>ul{margin-bottom:3em;margin-top: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:normal}li{list-style-type:none;text-align:left}a{color:currentColor;text-decoration:none}a img{border-width:0}button{appearance:none;background-color:rgba(0,0,0,0);border-width:0;font-size:1rem}input{appearance:none;background-color:rgba(0,0,0,0);border-width:0;font-size:1rem}*{-webkit-text-size-adjust:none;text-size-adjust:none}:root{--color-bg-primary: white;--color-bg-dark-f: hsl(230, 20%, 20%);--color-bg-dark: hsl($base-hue, 20%, 48%);--color-bg-light: hsl(230, 10%, 95%);--color-bg-strong: hsla(40, 80%, 50%, 0.2);--color-fg-primary: black;--color-fg-secondary: hsl(230, 20%, 48%);--color-fg-anchor: hsl(200deg, 100%, 35%);--color-fg-anchor-hover: hsl(200deg, 100%, 45%);--color-iceberg-bg: #161821;--color-iceberg-fg: #c6c8d1;--color-iceberg-blue: #84a0c6;--color-iceberg-lblue: #89b8c2;--color-iceberg-purple: #a093c7;--color-iceberg-comment: #6b7089;--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{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.cursor{--bg: transparent;height:1px;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;width:1px;z-index:-1}.cursor polygon{fill:var(--bg);stroke-width:0;transition:fill .2s,stroke .2s}.bouncy{--bg: var(--color-bg-light);outline:none}.bean{background-repeat:no-repeat;display:block;height:96px;image-rendering:pixelated;width:96px}.common-box{--padding: 15px;display:flex;flex:1;flex-direction:column;height:288px;overflow:hidden;position:relative;width:288px}.common-box::before{background:url(/https/cocopon.me/assets/img/works/grid.svg) repeat left top/15px;bottom:68px;content:"";left:var(--padding);pointer-events:none;position:absolute;right:var(--padding);top:63px}.common-box .bean{left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:99px}.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;display:block;height:100%;outline:none;width:100%}.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{align-items:center;display:flex;flex-shrink:0;left:var(--padding);gap:12px;position:absolute;top:var(--padding);right:var(--padding)}.common-box_number{--px-scale: 3;align-items:center;background-color:var(--color-fg-primary);color:var(--color-bg-primary);display:flex;height:33px;justify-content:center;min-width:63px}.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{font-weight:bold;margin-left:auto;position:relative}.common-box_name .pxtx::before{background-color:var(--fg);bottom:0;content:"";left:0;position:absolute;top:0;transform:scaleX(0);transform-origin:left center;width:100%;transition:transform .2s steps(12)}.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{transform:scaleX(1);width:100%}.common-box_arrow{--px-scale: 3;bottom:0;height:calc(var(--px-scale)*5px);left:0;margin:auto;position:absolute;right:0;top:0;width:calc(var(--px-scale)*3px)}.common-box_anchor.bouncy.bouncy-active .common-box_arrow{color:var(--fg)}.common-box_footer{bottom:var(--padding);display:flex;gap:10px;left:var(--padding);position:absolute;right:var(--padding)}.common-box.common-box-nav .common-box_footer{justify-content:center}.common-box_colors{display:flex;flex-direction:column;gap:6px;width:6px}.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;height:10px;width:100%}.common-box_description{--px-scale: 2;display:flex;flex:1;flex-direction:column;gap:6px;margin-left:auto}.common-box_description .pxtx{position:relative}.common-box_description .pxtx.pxtx-rendered{margin-left:auto}.common-box_description .pxtx::before{background-color:var(--fg);bottom:0;content:"";left:0;position:absolute;top:0;width:0;transition:width .2s steps(24)}.safari .common-box_description .pxtx::before{transition:none}.common-box_description .pxtx:nth-child(1)::before{transition-delay:.2s}.safari .common-box_description .pxtx:nth-child(1)::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:.001s}.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:nth-child(1)::before,.common-box.common-box-static .common-box_description .pxtx:nth-child(1)::before{transition-delay:.001s}.safari .common-box_anchor.bouncy.bouncy-active .common-box_description .pxtx:nth-child(1)::before,.safari .common-box.common-box-static .common-box_description .pxtx:nth-child(1)::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);display:inline-block;padding:calc(5px*var(--px-scale))}.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 (min-width: 480px){.common-globalFooter{margin-top:120px}}@media screen and (max-width: 479px){.common-globalFooter{margin-top:90px}}.common-globalFooter_copyright{--px-scale: 2;font-size:.8rem;padding-bottom:30px}@media screen and (min-width: 800px){.common-globalFooter_copyright{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-globalFooter_copyright{margin-left:30px;margin-right:30px}}.common-globalFooter_copyright .pxtx{margin:auto;width:126px}html.notFound .common-globalFooter{color:rgba(0,0,0,.5);bottom:0;left:0;pointer-events:none;position:absolute;right:0}html.sketches.sketches-single .common-globalFooter{bottom:0;left:0;pointer-events:none;position:absolute;right:0}.common-globalHeader{padding-bottom:30px;padding-top:30px;position:relative;z-index:2}.common-globalHeader_body{align-items:center;box-sizing:border-box;display:flex;position:relative}@media screen and (min-width: 800px){.common-globalHeader_body{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-globalHeader_body{margin-left:30px;margin-right:30px}}@media screen and (min-width: 800px){.common-globalHeader_body{max-width:800px;width:auto}}.common-globalHeader_logo{align-items:center;display:flex;padding:12px}@media screen and (max-width: 479px){.common-globalHeader_logo{left:-12px;position:relative}}.common-globalHeader_menu{margin-left:auto}.common-globalHeaderMenu{align-items:center;display:flex;gap:30px}@media screen and (max-width: 799px){.common-globalHeaderMenu{gap:0}}.common-globalHeaderMenu_searchContainer{width:200px}@media screen and (max-width: 799px){.common-globalHeaderMenu_searchContainer{display:none}}.common-globalHeaderMenuItem{--px-scale: 3;display:inline-block;vertical-align:top}.common-globalHeaderMenuItem_anchor{display:block;padding:12px}.common-globalHeaderMenuItem_anchor .pxtx:not(.pxtx-rendered){font-weight:bold;width:57px}.common-logo{display:flex;flex-direction:column;gap:6px}.common-logo_image svg{display:block;height:30px;width:30px}.common-logo_indicator{display:flex;gap:6px;height:3px}.common-logo_level{background-color:currentColor;height:100%;opacity:.1;width:6px}.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{font-weight:bold;margin-bottom:1rem;margin-top:4rem}.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);font-weight:bold;padding:2px}.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);border-left:currentColor solid 6px;color:var(--color-fg-secondary);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{font-size:.8rem;opacity:.8}.common-markdown p+aside{margin-top:1em}.common-markdown strong{background-color:var(--color-bg-strong);font-weight:bold}.common-markdown strong a,.common-markdown a strong{text-decoration:underline}.common-markdown .footnotes{font-size:.9rem}.common-markdown .footnotes hr{border-color:var(--color-bg-light);border-style:solid;border-width:3px 0 0;margin-bottom:30px;margin-top:60px}.common-markdown .footnotes ol{padding-left:2em}.common-markdown .footnotes li{list-style-type:decimal;margin-top:1em}.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{display:flex;justify-content:space-around}.figure_item{flex:1}.figure_item+.figure_item{margin-left:15px}.figure_anchor{display:block;transition:opacity .2s ease-out}.figure_anchor:hover{opacity:.8}.figure_image{display:block;margin-left:auto;margin-right:auto;max-height:600px;max-width:100%}.figure.figure-margin .figure_image{background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}.figure_title{color:var(--color-fg-secondary);font-size:.9rem;font-weight:bold;margin-top:15px;word-break:auto-phrase}.highlight pre,.highlight code{font-family:var(--font-family-mono);font-size:.9rem}.highlight .chroma{background-color:var(--color-iceberg-bg);color:var(--color-iceberg-fg);overflow:scroll;max-height:480px;padding:30px}.highlight .k,.highlight .kd,.highlight .kt,.highlight .nt,.highlight .p{color:var(--color-iceberg-blue)}.highlight .s,.highlight .s1,.highlight .s2{color:var(--color-iceberg-lblue)}.highlight .mi,.highlight .na{color:var(--color-iceberg-purple)}.highlight .c1,.highlight .cm,.highlight .err{color:var(--color-iceberg-comment)}.capturedPage{background-color:var(--color-bg-light);padding:30px 0;position:relative;text-align:center}.capturedPage_background{background-size:contain;bottom:0;left:0;opacity:.1;position:absolute;right:0;top:0}.capturedPage_anchor{color:var(--color-fg-secondary);display:inline-block;position:relative;text-decoration:none;width:50%}.capturedPage_anchor:hover{text-decoration:underline}.capturedPage_title{font-size:.9rem;font-weight:bold;margin-bottom:30px;word-break:auto-phrase}.capturedPage_image{background-color:var(--color-bg-primary);box-shadow:0 2px 8px rgba(0,0,0,.1);height:0;padding-bottom:56.25%;position:relative;transition:opacity .2s ease-out}.capturedPage_image img{display:block;height:100%;left:0;object-fit:cover;object-position:center top;opacity:0;position:absolute;top:0;transition:opacity .5s ease-out;width:100%}.capturedPage_image img.lazy-loaded{opacity:1}.capturedPage_anchor:hover .capturedPage_image{opacity:.8}.twitter{background-color:var(--color-bg-light);text-align:center;margin-left:auto;margin-right:auto;padding:30px}.twitter_tweet{display:inline-block;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{font-size:.9rem;font-weight:bold;margin-bottom:30px}.amazon_image{box-shadow:0 2px 8px rgba(0,0,0,.1);display:block;margin-left:auto;margin-right:auto;max-height:200px;transition:opacity .2s ease-out}.amazon_anchor:hover .amazon_image{opacity:.8}.vimeo iframe{border-width:0}.quote blockquote.quote_quote{margin-bottom:0;margin-top:0}.quote_ref{color:var(--color-fg-secondary);font-size:.9rem;margin-top:.5em;text-align:right}.common-page{overflow-x:hidden;position:relative}@media screen and (min-width: 480px){.common-page{margin-top:90px}}.common-page_header{margin-bottom:120px}@media screen and (min-width: 800px){.common-page_header{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-page_header{margin-left:30px;margin-right:30px}}@media screen and (max-width: 479px){.common-page_header{margin-bottom:60px;margin-left:0;margin-right:0}}@media screen and (max-width: 799px){.common-page_header.common-page_header-work{margin-left:0;margin-right:0}}.common-page_content{margin-bottom:120px;margin-top:120px}@media screen and (min-width: 800px){.common-page_content{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-page_content{margin-left:30px;margin-right:30px}}@media screen and (max-width: 799px){.common-page_content{margin-bottom:60px;margin-top:60px}}.common-page_title{font-size:var(--font-size-markdown-h1);font-weight:bold}.common-page_title.common-page_title-work{margin-bottom:60px;text-align:center}.common-page_body{margin-top:1rem}.common-page_section+.common-page_section{margin-top:60px}.common-page_list{margin-bottom:120px;margin-top:120px;padding-left:60px;padding-right:60px;position:relative}@media screen and (max-width: 799px){.common-page_list{margin-bottom:60px;margin-top: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 (min-width: 800px){.common-page_bottomSeriesNavInner{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-page_bottomSeriesNavInner{margin-left:30px;margin-right:30px}}.common-page_authorBody{box-sizing:border-box}@media screen and (min-width: 800px){.common-page_authorBody{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-page_authorBody{margin-left:30px;margin-right:30px}}@media screen and (min-width: 800px){.common-page_authorBody{padding-left:60px;padding-right:60px}}@media screen and (min-width: 800px){.common-page_pageNavBody{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-page_pageNavBody{margin-left:30px;margin-right:30px}}.common-page_toc{margin-left:670px;position:absolute}@media screen and (max-width: 799px){.common-page_toc{display:none}}.common-page_share{bottom:30px;position:fixed;right:30px;z-index:1}@media print{.common-page_share{display:none}}.common-share{opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}.common-share.common-share-active{opacity:1;pointer-events:auto;transform:none}.common-share_body{--px-scale: 3;align-items:center;background-color:var(--color-bg-light);box-sizing:border-box;display:flex;padding:15px}.common-share_icons{align-items:center;display:flex;gap:9px;margin-left:15px}.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(0.7)}.common-pageHeader{position:relative}@media screen and (min-width: 480px){.common-pageHeader{height:auto;padding-top:0}}.common-pageHeader_background{background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}@media screen and (min-width: 480px){.common-pageHeader_body{padding-bottom:60px;padding-top:60px}}@media screen and (max-width: 479px){.common-pageHeader_body{padding:60px 30px}}.common-pageHeader_text{position:relative;mix-blend-mode:hard-light}.common-pageHeader_title{--px-scale: 6;font-size:1.3333333333rem;font-weight:bold}@media screen and (max-width: 479px){.common-pageHeader_title{--px-scale: 3}}.common-pageHeader_title .pxtx:not(.pxtx-rendered){width:141px}.common-pageHeader_subtitle{--px-scale: 2;font-size:.8rem;font-weight:bold;line-height:1.5}@media screen and (min-width: 480px){.common-pageHeader_subtitle{margin-top:18px}}@media screen and (max-width: 479px){.common-pageHeader_subtitle{margin-top:12px}}.common-pager{--px-scale: 3}.common-pager_body{height:39px;position:relative}@media screen and (min-width: 800px){.common-pager_body{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.common-pager_body{margin-left:30px;margin-right:30px}}.common-pager_items{display:flex;justify-content:center;gap:12px}@media screen and (max-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{align-items:center;display:flex;height:39px;justify-content:center;left:0;opacity:.5;right:0;top:0}@media screen and (min-width: 800px){.common-pager_stats{display:none}}@media screen and (max-width: 799px){.common-pager_stats{position:absolute}}.common-pagerItem{height:39px;min-width:39px}.common-pagerItem.common-pagerItem-ellipsis{align-items:center;display:flex;justify-content:center;opacity:.25}.common-pagerItem_anchor{align-items:center;display:flex;height:100%;justify-content:center}.common-pagerItem.common-pagerItem-current .common-pagerItem_anchor{background-color:var(--color-fg-primary);color:var(--color-bg-primary)}.common-pagerNavButton{align-items:center;box-sizing:border-box;display:flex;height:39px;justify-content:center;padding:12px;text-align:center;transition:background-color .2s ease-out;white-space:nowrap}.posts-list{align-items:flex-start;display:grid;gap:42px;grid-template-columns:repeat(auto-fill, 288px);justify-content:center}@media screen and (min-width: 800px){.posts-list.posts-list-more{display:flex;justify-content:flex-start}}@media screen and (max-width: 479px){.posts-list.posts-list-more{align-items:center;display:flex;flex-direction:column}}.posts-list_item{position:relative}.posts-more{--px-scale: 3;align-items:center;display:flex;justify-content:center}@media screen and (min-width: 800px){.posts-more{height:288px;width:138px}}@media screen and (min-width: 480px)and (max-width: 799px){.posts-more{height:138px;width:288px}}@media screen and (max-width: 479px){.posts-more{height:138px;width:288px}}.posts-more::before{background:url(/https/cocopon.me/assets/img/works/grid.svg) repeat left top/15px;bottom:15px;content:"";left:15px;pointer-events:none;position:absolute;right:15px;top:15px}.posts-more .pxtx{left:4.5px;position:relative;top:1.5px}.pxtx{background-color:currentColor;height:calc(var(--px-scale)*5px);image-rendering:pixelated;mask-repeat:repeat-x;-webkit-mask-repeat:repeat-x;mask-position:left top;-webkit-mask-position:left top;mask-size:cover;-webkit-mask-size:cover;overflow:hidden;text-indent:-100vw}.common-search{padding:3px 0;position:relative}.common-search::before{background-color:var(--color-fg-primary);bottom:0;content:"";display:block;height:3px;left:0;opacity:.3;position:absolute;right:0}.common-search_icon{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:.3;position:absolute;text-align:center;top:0;width:33px}.common-search_input{background-color:var(--color-bg-primary);box-sizing:border-box;display:block;height:33px;line-height:33px;padding-left:33px;padding-right:9px;position:relative}.common-search_input:focus{background-color:var(--color-bg-light);outline:none}.common-search_results{background-color:#fff;border:var(--color-bg-light) solid 1px;box-shadow:0 2px 8px rgba(0,0,0,.1);line-height:normal;left:0;min-width:150%;position:absolute;top:39px;visibility:hidden}.common-search.common-search-focused .common-search_results{visibility:visible}.common-searchResult{cursor:pointer;display:block;padding:9px 15px}.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{font-weight:bold;white-space:nowrap}.common-searchResult_matched{font-size:.8rem;margin-top:2px;opacity:.5;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.common-youtube{background-color:var(--color-bg-light);height:0;padding-bottom:56.25%;position:relative;width:100%}.common-youtube iframe{height:100%;left:0;position:absolute;top:0;width:100%}.about-socials{--px-scale: 2;display:flex;flex-wrap:wrap;gap:6px;margin-top:1em}.about-career{display:flex;flex-direction:column;gap:1em}.about-career_row{display:flex}@media screen and (min-width: 480px){.about-career_row{align-items:center;gap:15px}}@media screen and (max-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{overflow-x:hidden;text-align:center}@media screen and (min-width: 800px){.index-page_body{margin-left:auto;margin-right:auto;max-width:640px}}@media screen and (max-width: 799px){.index-page_body{margin-left:30px;margin-right:30px}}.index-page_logo{--px-scale: 2;margin-top:120px}@media screen and (max-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 (max-width: 479px){.index-section_title{--px-scale: 3}}.index-section_title .pxtx:not(.pxtx-rendered){width:76px}.index-logo{display:flex;justify-content:center;position:relative}.index-logo_image{background-color:currentColor;height:312px;image-rendering:pixelated;mask-size:contain;-webkit-mask-size:contain;transition:color .25s;width:300px;z-index:-2}.index-logo_dots{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;width:240px}.index-logo_dots.index-logo_dots-active+.index-logo_image{color:var(--bg)}.index-logo_dot{height:24px;left:0;position:absolute;top:0;width:24px}html.notFound{bottom:0;left:0;position:absolute;right:0;top:0}.notFound-page{align-items:center;display:flex;height:100%;justify-content:space-around;left:0;position:absolute;top:0;width:100%}.sketches-listItem{background-color:var(--color-bg-dark-f);box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden;position:relative}@media screen and (min-width: 800px){.sketches-listItem{display:inline-block;width:48%}.sketches-listItem:nth-child(2n+2){margin-left:4%}.sketches-listItem:nth-child(n+3){margin-top:4%}}@media screen and (max-width: 799px){.sketches-listItem+.sketches-listItem{margin-top:30px}}.sketches-listItem_background{background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:.3;position:absolute;right:0;top:0;transform:scale(1.01);transition:opacity .2s ease-out}.sketches-listItem:hover .sketches-listItem_background{opacity:.8}.sketches-listItem_anchor{color:#fff;font-size:1.2rem;font-weight:bold;display:flex;position:relative}.sketches-listItem_anchor{display:block;padding:30px}.sketches-listItem_title{--px-scale: 3}html.sketches.sketches-single{bottom:0;left:0;position:absolute;right:0;top:0}.sketches-singlePage{height:100%;left:0;position:absolute;top:0;width:100%}.sketches-singlePage_canvas{bottom:0;left:0;position:absolute;right:0;top:0}.sketches-singlePage_canvas iframe{height:100%;left:0;position:absolute;top:0;width:100%}.zeroPde-title_title{font-size:var(--font-size-markdown-h1);font-weight:bold;margin-bottom:1.5rem}.zeroPde-title_badge{background-color:var(--color-fg-primary);color:var(--color-bg-light);font-size:.7em;line-height:2;padding:.2em .5em}.zeroPde-title_lead p{line-height:1.8}.zeroPde-title_lead p+p{margin-top:1em}.blog-author{align-items:stretch;border:var(--color-bg-light) solid 3px;padding:30px}.blog-author_header{align-items:center;display:flex;gap:30px}.blog-author_image img{display:block;height:45px;width:45px}.blog-author_text{flex:1;margin-top:15px}@media screen and (min-width: 480px){.blog-author_text{margin-left:75px}}.blog-author_action{font-size:0;margin-top:15px}.blog-author_title{--px-scale: 3;font-size:1.2rem;font-weight:bold}@media screen and (max-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{font-size:0;padding:30px;position:relative;white-space:nowrap}@media screen and (max-width: 799px){.blog-carousel_offset{padding:15px}}.blog-carousel_item{background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);display:inline-block;list-style-type:none;width:100%}.blog-carousel_item+.blog-carousel_item{margin-left:15px}.blog-carousel_image{display:block;width:100%}.blog-carousel_toolbar{background-color:var(--color-bg-dark-f);position:relative}.blog-carousel_button{--px-scale: 3;align-items:center;color:#fff;cursor:pointer;display:inline-flex;height:44px;justify-content:center;position:relative;transition:background-color .2s ease-out;vertical-align:top;width:44px}.blog-carousel_button:hover{background-color:hsla(0,0%,100%,.2)}.blog-carousel_button:disabled{background-color:rgba(0,0,0,0);cursor:default;opacity:.2}.blog-carousel_indicator{bottom:0;color:#fff;font-size:.9rem;font-weight:bold;left:0;line-height:44px;position:absolute;right:0;text-align:center;top:0}.blog-listItem{display:flex;position:relative;width:288px}.blog-listItem_anchor{display:flex;flex-direction:column;padding:15px;position:relative;width:100%}.blog-listItem_thumbnail{background-color:var(--color-bg-dark-f);height:0;overflow:hidden;padding-top:100%;position:relative;width:100%}.blog-listItem_image{background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0;filter:saturate(0%);left:0;opacity:0;position:absolute;right:0;top:0;transform:scale(1.01);transition:filter .4s ease,opacity .4s ease}.blog-listItem_image.blog-listItem_image-logo{background-image:url(/https/cocopon.me/assets/img/common/logo.svg);background-size:30%;opacity:.3}.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;bottom:9px;color:rgb(255,127.5,0);font-size:.8rem;mix-blend-mode:screen;position:absolute;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;right:0;top:0}.blog-listItem_text{box-sizing:border-box;margin-top:15px;padding:0 1px;position:relative}.blog-listItem_title{font-size:1rem;font-weight:bold;line-height:1.4;word-break:auto-phrase}.blog-pageHeader{overflow:hidden;position:relative}@media screen and (min-width: 480px){.blog-pageHeader{height:0;padding-top:50%}}.blog-pageHeader_background{background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0;filter:blur(24px) saturate(1.5);left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .5s;transform:scale(2)}.blog-pageHeader_background.lazy-loaded{opacity:.5}.blog-pageHeader.blog-pageHeader-zeroPde .blog-pageHeader_background{background-color:var(--color-bg-dark-f);background-image:url(/https/cocopon.me/data/zero-pde/cover.jpg);filter:none;opacity:1;transform:none}.blog-pageHeader_body{align-items:center;display:flex;background-color:var(--color-bg-light)}@media screen and (min-width: 480px){.blog-pageHeader_body{bottom:0;position:absolute;left:0;padding:60px;right:0;top:0}}@media screen and (max-width: 479px){.blog-pageHeader_body{padding:60px 30px}}@media screen and (max-width: 479px){.blog-pageHeader.blog-pageHeader-zeroPde{height:320px}}.blog-pageHeader_text{position:relative;mix-blend-mode:hard-light}.blog-pageHeader_title{font-size:1.3333333333rem;font-weight:bold;line-height:1.3;word-break:auto-phrase}.blog-pageHeader_date{--px-scale: 2;margin-top:30px}.blog-pageHeader_date .pxtx:not(.pxtx-rendered){width:78px}.blog-pageHeader_subtitle{line-height:1.8;margin-top:1rem}.blog-seriesNav{background-color:var(--color-bg-primary)}.blog-seriesNav_header{background-color:var(--color-bg-dark-f);color:hsla(0,0%,100%,.95);display:flex;font-weight:bold;position:relative}.blog-seriesNav_background{background-image:url(/https/cocopon.me/data/blog/series/interactive-coding.png);background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:.3;position:absolute;right:0;top:0;transition:opacity .2s ease-out}.blog-seriesNav_header:hover .blog-seriesNav_background{opacity:.8;text-decoration:underline}.blog-seriesNav_prefix{align-items:center;display:flex;padding:15px;position:relative;white-space:nowrap}.blog-seriesNav_prefix::after{background-color:hsla(0,0%,100%,.1);bottom:9px;content:"";display:block;position:absolute;right:0;top:9px;width:1px}.blog-seriesNav_title{padding:15px;position:relative}.blog-seriesNav_header:hover .blog-seriesNav_title{text-decoration:underline}.blog-seriesNavItem{font-weight:bold}.blog-seriesNavItem+.blog-seriesNavItem{border-top:var(--color-bg-light) solid 1px}.blog-seriesNavItem_anchor{--px-scale: 2;align-items:center;display:flex;gap:15px;opacity:.3;padding:15px;transition:background-color .2s ease-out}.blog-seriesNavItem_anchor:hover{background-color:var(--color-bg-light)}.blog-seriesNavItem a.blog-seriesNavItem_anchor{opacity:1}.blog-seriesNavItem_prefix{color:var(--color-fg-secondary);font-size:.8rem;position:relative;white-space:nowrap}a.blog-seriesNavItem_anchor:hover .blog-seriesNavItem_title{text-decoration:underline}.blog-toc{background-color:var(--color-bg-light);box-sizing:border-box;font-size:.8rem;padding:15px;width:240px}.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{font-weight:bold;margin-top:2em}.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{display:flex;justify-content:center}.works-pageHeader_content{margin-left:auto;margin-right:auto;position:relative}.works-pageHeader_content .common-box{margin:auto}@media screen and (min-width: 800px){.works-pageHeader_content .common-box{width:618px}}@media screen and (min-width: 480px)and (max-width: 799px){.works-pageHeader_content .common-box{width:438px}}@media screen and (max-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:rgba(0,0,0,.05) solid 1px;display:block;width:100%}.works-eventList{display:flex;flex-direction:column;gap:1em}.works-eventListItem{display:flex}@media screen and (min-width: 480px){.works-eventListItem{align-items:center;gap:15px}}@media screen and (max-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 (min-width: 800px){.works-creditListItem{display:flex}}.works-creditListItem+.works-creditListItem{margin-top:1em}.works-creditListItem_role{font-weight:bold;margin-right:.5em}.works-creditListItem_role:after{content:":"}@media screen and (max-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{display:flex;flex-wrap:wrap;gap:6px}.works-techStacks_item{--px-scale: 2;background-color:var(--color-fg-primary);color:var(--color-bg-primary);padding:calc(5px*var(--px-scale))}