html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{vertical-align:baseline;background:0 0;border:0;outline:0;margin:0;padding:0;font-size:100%}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a:active{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-spacing:0;border-collapse:collapse}article,aside,dialog,figure,figcaption,footer,header,hgroup,nav,section{display:block}.clearfix{display:flow-root}:root{--main-color:#fef200;--bg-color:#fff;--line-color:#eee;--text-color:#464646;--emphasis-color:#181d27;--base-font:system-ui, Sans-Serif;--code-font:"JetBrains Mono", system-ui, Monospace;--quote-font:Georgia, system-ui, Serif;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-base:.2s;--duration-slow:.3s}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{transform:translateY(6px)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}body{background:var(--bg-color);color:var(--text-color);text-align:left;font:62.5%/1.8 var(--base-font);text-autospace:normal;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{color:var(--emphasis-color)}h2,h3,h4,h5{margin:.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}h2{font-size:1.875em}h3{font-size:1.4em}h4{font-size:1.2em}h5{font-size:.85em;font-weight:600}p,pre,ul,ol,dl,form,figure,hr{margin:1.3em 0}em{font-family:var(--quote-font)}a:link,a:visited,a:active{color:#555;transition:color var(--duration-base) var(--ease-out-quart);text-decoration:none}a:hover{color:var(--main-color);transition:color var(--duration-fast) var(--ease-out-quart)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}blockquote{color:#888;border-left:2px solid var(--emphasis-color);font-family:var(--quote-font);margin-left:-1em;padding:0 calc(1em - 2px);font-style:italic}acronym,abbr{font-family:var(--code-font);cursor:help}cite{font-style:normal}mark{background:#fffddd}pre,code{font-family:var(--code-font);border-radius:4px;line-height:1.8}pre{white-space:pre;tab-size:2;text-align:left;border:1px solid var(--line-color);padding:30px 0;font-size:.75em;overflow-x:auto}:not(pre)>code{color:var(--emphasis-color);white-space:break-spaces;background:#fbfbfb;font-size:.8em;font-weight:500}:not(pre)>code:before,:not(pre)>code:after{content:"'"}input,textarea,select{background-color:var(--bg-color);box-sizing:border-box;color:var(--text-color);font:1em var(--base-font)}textarea{resize:vertical}input:focus,textarea:focus{outline-offset:0;outline:0}input:focus::placeholder,textarea:focus::placeholder{text-indent:-9999em}img{background:var(--bg-color)}small{font-size:smaller}sup{vertical-align:super}sub{vertical-align:sub}.center{text-align:center}::placeholder{color:#ccc}::selection{background:var(--main-color);color:#000;text-shadow:none}@view-transition{navigation:auto}#toolbar{z-index:999;border:4px solid var(--main-color);backdrop-filter:blur(5px);background:#fffc;border-width:0 0 0 4px;width:76px;height:100%;padding-top:90px;position:fixed;top:0;left:0}#toolbar ul{position:relative}#toolbar ul:after{content:" ";text-indent:-9999em;background:linear-gradient(#fff,#ccc 50%,#fff);width:1px;height:100%;position:absolute;top:0;right:-1px}#toolbar li a{text-align:center;line-height:5em;display:block}#toolbar li{display:grid}#toolbar li a svg{width:22px;height:22px;transition:color .2s var(--ease-out-quart), transform .15s var(--ease-out-quart);color:#666}#toolbar li a:hover svg{color:var(--main-color);transform:scale(1.1)}#toolbar li.home a img{corner-shape:squircle;width:52px;height:52px;transition:transform .3s var(--ease-out-expo);border-radius:30%}#toolbar li.home a:hover img{transform:scale(1.05)rotate(2deg)}main{width:780px;margin:0 auto;padding:0 0 0 180px;font-size:1.6em}header{animation:fadeInDown .6s var(--ease-out-expo);margin:80px 0 0}header h1#blogtitle{letter-spacing:0;font-size:3em;font-weight:400}header h1#articletitle{text-wrap:pretty;font-size:3em;font-weight:500}header p#description{font-family:var(--code-font);color:#ccc;animation:slideInUp .35s var(--ease-out-expo) 0s both;will-change:transform;padding:0}header .article-meta{color:#888;animation:fadeIn .8s var(--ease-out-expo) .3s both;margin:2em 0 0;padding:1em 0 0;position:relative}header .article-meta:before{content:"";background:linear-gradient(to right, var(--line-color) 0%, #fff 35%);height:1px;position:absolute;top:0;left:0;right:0}#articles{margin:50px 0 50px -180px}#articles ol li{transition:transform .4s var(--ease-out-expo), opacity .3s ease-out;will-change:transform;opacity:1;animation:slideInLeft .5s var(--ease-out-expo) both;margin:1.875em 0;transform:translate(0)}#articles ol li h2{font-size:1.6em;font-weight:400;display:flex}#articles ol li h2 time{width:140px;color:var(--line-color);font-variant-numeric:tabular-nums;padding:0 0 0 40px}#articles ol li:hover{transform:translate(-30px)}#articles ol li:hover h2 time{color:var(--text-color);transition:color .2s var(--ease-out-quart)}#content{margin:60px 0 0}#content .post{font-size:1.125em}footer{text-align:right;width:780px;margin:80px 0}footer h3{color:#888;letter-spacing:2px;text-transform:uppercase;margin:0 0 2em;font-size:1em}#think-yellow{margin:0 0 20px}.tnkylw{background:var(--main-color);color:#000;text-align:center;width:80px;height:46.19px;margin:23.09px 0;line-height:46.19px;display:inline-block;position:relative}.tnkylw:before,.tnkylw:after{content:" ";border-left:40px solid #0000;border-right:40px solid #0000;width:0;position:absolute}.tnkylw:before{border-bottom:23.09px solid var(--main-color);bottom:100%;left:0}.tnkylw:after{border-top:23.09px solid var(--main-color);width:0;top:100%;left:0}.tnkylw object{width:48px;height:48px}section.archives p{margin-left:180px}section.archives h3{letter-spacing:2px;margin:80px 0 0 180px;font-size:1em}section.archives h3 a{color:#888}.post strong{color:var(--emphasis-color);transition:color var(--duration-fast) var(--ease-out-quart)}.post a{color:var(--emphasis-color);text-underline-offset:2px;transition:color var(--duration-base) var(--ease-out-quart), text-decoration-color var(--duration-base) var(--ease-out-quart);text-decoration:underline}.post a:hover{color:var(--main-color);text-decoration-color:var(--main-color)}.post :not(figcaption)>a[href^=http]:not(:has(img)):after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' style='align-self:flex-end'%3E%3Cpath stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.25 3.75h6m0 0v6m0-6-8.5 8.5'%3E%3C/path%3E%3C/svg%3E");width:16px;height:16px;display:inline-block}.post pre code{counter-reset:step;counter-increment:step 0;width:fit-content;min-width:100%;padding:0;font-weight:400;display:block}.post pre code span.line{width:100%;display:inline-block;&:before{content:counter(step);counter-increment:step;color:#ddd;text-align:right;z-index:1;background:#fff;width:2rem;margin-left:auto;margin-right:1rem;padding-right:.25rem;display:inline-block;position:sticky;left:0}&:hover,&:hover:before{background:#f0f0f0}}.post pre code span.highlighted{background:#f0f0f0;&:before{color:var(--emphasis-color);background:#f0f0f0}}.post pre{position:relative}.post pre .copy-button{border:1px solid var(--line-color);color:var(--emphasis-color);cursor:pointer;opacity:0;transition:opacity var(--duration-base) var(--ease-out-quart), transform var(--duration-base) var(--ease-out-quart), background-color var(--duration-fast) var(--ease-out-quart);backdrop-filter:blur(4px);background:#fffffff2;border-radius:6px;justify-content:center;align-items:center;padding:6px 10px;font-size:.75em;line-height:1;display:inline-flex;position:absolute;top:8px;right:8px;transform:translateY(-4px)}.post pre:hover .copy-button{opacity:.7;transform:translateY(0)}.post pre .copy-button:hover{opacity:1;background:#fff;transform:scale(1.05)}.post pre .copy-button:focus-visible{outline:2px solid var(--emphasis-color);outline-offset:2px;opacity:1}.post pre .copy-button.copied{opacity:1;background:#f5f5f5;transform:scale(1)}.post :is(ul,ol,dl){margin:1.25em 0 1.25em 2.2em}.post ul li{margin:0 0 .5em;list-style-type:circle}.post ol li{margin:0 0 .5em;list-style-type:decimal}.post dl dt{float:left;padding:0 .5em 0 0;font-weight:700;display:inline}.post dl dd{margin:0 0 .8em 1.8em}.post figure{margin:2.5em 0}.post figcaption{text-align:center;font:.8em var(--code-font);margin:1.2em 0 2.5em;& p:first-child:after{content:" ↑"}}.post img,.post video{border-radius:5px;max-width:100%;height:auto;margin:0 auto;display:block;&.floatleft{float:left;margin:5px 20px 20px -80px}&.floatright{float:right;margin:5px -80px 20px 10px}&.borderless{border:0;margin:0;padding:0}&.wide{width:calc(100% + 100px);height:auto}&.no-margin{margin:0}}.post p:has(img.wide){margin:0 -50px}.post h3{margin:2.4em 0 .6em;padding:0 0 .45em;font-weight:500}.post h4+p{padding-top:.2em}@media screen and (width>=1140px){.post h4{float:left;text-align:left;text-wrap:balance;width:160px;margin-left:-180px}}@media screen and (width<=540px){header h1#articletitle{font-size:3em}}.post table{margin:1.5em auto;font-size:.8em;& caption{color:#fff;text-align:center;text-transform:uppercase;letter-spacing:1px;background:#888;font-weight:600}}.post :is(table th,table td){border:1px solid var(--line-color);padding:5px 10px}.post table th{background:#fbfbfb}.post table thead th{background:#f1f1f1}@media screen and (width<=1050px){#toolbar,#articles,#content,section.archives h3,#articles ol li h2 time,#articles ol li h2 a,footer,#copyright{width:100%}#articles,#content,section.archives h3{margin:40px 0 0}#articles,section.archives p{margin-left:0}#toolbar{border-width:4px 0 0;height:36px;padding:0;position:fixed;top:0;left:0;& ul{margin:0;padding:2px 10px;&:after{background:linear-gradient(90deg,#fff,#ccc 50%,#fff);width:100%;height:1px;top:35px;left:0}& li{display:inline-grid}& li a{padding:0 10px;line-height:40px;display:inline-block}& li a svg,& li.home a img{width:20px;height:20px}& li:is(.next,.prev){float:right}}}main{width:auto;max-width:960px;margin:0 auto;padding:0 20px}header h1#articletitle{font-size:2em}#articles ol li:hover{transform:translate(0)}#articles ol li h2{flex-direction:column;font-size:1.3em}#articles ol li h2 time,#articles ol li h2 a{text-align:left;padding:0}footer{text-align:left;margin:40px 0;animation:none}.post h3{font-size:1.3em}.post pre{-webkit-text-size-adjust:100%}.post img,.post img:is(.floatleft,.floatright,.wide),.post video{float:none;max-width:100%;height:auto;margin:0;display:block}.post p:has(img.wide){margin:0}.post :is(ul,ol){margin:1.25em 0 1.25em 1.8em}.post dl{margin:1.25em 0 1.25em 1em}.post table thead th,.post table tbody td{padding:0 10px}}@view-transition{navigation:auto}
