:root{--background-color:white;--color:black;--color-mix-alpha-1:color-mix(in srgb, var(--color) 95%, var(--background-color));--color-mix-alpha-2:color-mix(in srgb, var(--color) 75%, var(--background-color));--background-color-mix-alpha-1:color-mix(in srgb, var(--color) 5%, var(--background-color));--header-height:90px;--blurple:#5865f2}html{--scroll-behavior:smooth}body{background-color:var(--background-color);color:var(--color);margin:0;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,Adwaita Sans,Cantarell,Ubuntu,roboto,noto,helvetica,arial,sans-serif}main{padding-top:calc(50px + 2em)}h1,h2{font-family:Montserrat Variable,sans-serif;font-weight:900}img.icon{vertical-align:-.125em;height:1em}widgetbot{margin:2em auto;display:block!important}.responsive-hotfix{display:none}@media (width<=1000px){body{overflow:hidden}.responsive-hotfix{z-index:10000;text-align:center;background-color:#fff;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;&>svg{font-size:2em}& p{padding:0 2em;& span{color:gray}}}}.tabs{& details{& summary{text-align:center;color:#00000080;padding:.5em;font-weight:500;display:block;& svg{filter:grayscale()brightness(0%);opacity:.5}}&[open] summary{color:#fff;background-color:#24292e;border-radius:8px 8px 0 0;& svg{filter:none;opacity:1}}& summary+p{margin-top:0}}}section{&>h1,&>h2{text-align:center}&>h1{margin-bottom:.25em;font-size:8em}&>h2{margin-bottom:.25em;font-size:4em}&>p{text-align:center;color:#444;width:740px;margin-left:auto;margin-right:auto;font-size:1.5em}}ul.list{flex-direction:row;justify-content:center;margin:0;padding:0;display:flex;&>li{display:block}}header{ul.list:not(nav)>&{margin:2em 0}}a.button{color:var(--background-color);background-color:var(--color);user-select:none;border-radius:100px;flex-direction:row;align-items:center;gap:.5em;padding:.5em 1em;display:flex}.tag{user-select:none;background-color:#fff;border:1px solid #ccc;border-radius:100px;align-items:center;gap:.5em;padding:.25em .75em;font-size:.9em;display:flex!important}a{color:#4286f4;text-decoration:none}section>ul.tags{gap:.5em!important}pre{tab-size:2em;border-radius:8px;padding:1em}details>summary{user-select:none;cursor:pointer}section#hero{& p{text-align:left;width:720px;margin-left:auto;margin-right:auto;font-size:1.5em}& ul.list{gap:2em;& a.button{padding:.75em 1.5em}}& .scroll-indicator{margin:0 auto -9em;padding-top:6em;padding-bottom:6em;display:block;& svg{color:var(--color);margin:0 auto;animation:1s ease-in-out infinite alternate float;display:block}}}section#message{& h2{width:750px;margin:0 auto;padding-top:3em;padding-bottom:3em;font-size:4em;& span{white-space:nowrap}& span.label{color:#fff;background:#000;border-radius:1em;align-items:center;gap:.25em;padding:.05em .5em;font-size:.9em;display:inline-flex}& svg{vertical-align:middle}}}section#blog{&:not(:first-child){padding-top:9em}&:not(:last-child){padding-bottom:6em}&:last-child{--margin-bottom:4em}& details{&[open]{margin-bottom:4em}& summary{text-align:center;font-size:2em;&::marker{font-size:1.5em}& h2{margin-left:.25em;display:inline-block}}}& h2 a:hover{text-decoration:underline}& ul.tags{margin:1.5em 0}& ul.posts{margin:0 auto;padding:0;& li{display:block}}& ul.posts-v1{--width:1024px;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 auto;padding:0 7%;display:grid;& li.post{background-color:var(--background-color-mix-alpha-1);aspect-ratio:1;border-radius:32px;display:block;overflow:hidden;&.draft{background-color:#f0f8ff}& figure{flex-direction:column;height:100%;margin:0;display:flex;&>:not(figcaption){flex:1}&>pre{border-bottom:2px solid #111;border-radius:10px;margin:4em 3em;padding:2em;font-size:.75em;box-shadow:0 8px 24px #959da533,0 0 0 8px #0009;overflow-x:hidden!important}&>div{background-color:#fff;border-bottom:2px solid #ccc;border-radius:10px;flex:1;margin:4em 3em;padding:2em;font-size:.75em;overflow-y:auto;box-shadow:0 8px 24px #959da533,0 0 0 8px #00000006}& figcaption{justify-content:space-between;align-items:center;padding:0 2em;display:flex}}}}}section#timeline{padding-top:9em;& ul.timeline{cursor:default;width:fit-content;margin:0 auto;padding:0;font-size:1.1em;& li{gap:1em;display:flex}& .age{width:2em;font-family:Montserrat Variable,sans-serif;font-weight:900;display:inline-block}& .year{--level:0;--light:90%;--dark:20%;--min-level:9;--max-level:12;color:hsl(0 0% calc(var(--light) + ( ( clamp(var(--min-level), var(--level), var(--max-level)) - var(--min-level) ) / (var(--max-level) - var(--min-level)) ) * (var(--dark) - var(--light))))}& .bracket{flex-wrap:wrap;align-items:center;gap:5px;display:inline-flex}& .separator{user-select:none}& .content{max-height:0;animation:accordion view();animation-range:cover cover 0%;position:relative;overflow:hidden;&:before{content:"";opacity:1;background-color:red;width:100px;height:1px;position:absolute;top:0;left:0}}& a:not(:has(svg)){color:inherit;&[href]:hover{text-decoration:underline}}& a:has(svg){color:inherit;filter:brightness(.75);transition:filter .1s;&:hover{filter:brightness(.5)}}}}section#showcase{&>ul.tags{margin:2em 0}& h3{text-align:center;margin-top:3em;font-size:2em}& h4{text-align:center;transition:opacity .2s}& ul.games{flex-wrap:wrap;max-width:950px;margin:0 auto}& ul.games>li{position:relative}& ul.games{& .tech{color:#fff;opacity:.5;font-size:20px;transition:opacity .2s;position:absolute;bottom:10px;left:10px;&:hover{opacity:1}}}& ul.libraries,& ul.tools{flex-wrap:wrap;gap:12px;max-width:700px;margin:0 auto;display:flex}&:has(.library:hover){& .library:not(:hover){opacity:.5;filter:grayscale(.5)}& h4:has(+ul .library:hover){opacity:1}& h4{opacity:.5}}& .library{--sclx:1.05;--scly:1.175;&>a{position:absolute;inset:0}&>div{pointer-events:none;& a{pointer-events:all}}& .header{justify-content:space-between;display:flex}& h5{align-items:center;gap:.25em;font-size:1em;display:flex;& svg{vertical-align:middle}}& h5,& p{margin:0}& p{color:#010101a8}& ul.list{color:#010101a8;justify-content:start;gap:.5em;padding:0;display:flex;& li{align-items:center;gap:.25em;display:flex;& a{color:unset;display:flex;&:hover{color:#000}}& span{user-select:none;align-items:center;gap:.1em;font-size:.75em;display:flex}}}}& .card{user-select:none;cursor:pointer;will-change:transform;border:2px solid #d3d3d3;border-radius:8px;padding:.6em .75em;position:relative;&>*{color:#000;flex-direction:column;gap:.25em;width:310px;display:flex}transition:opacity .2s,transform .2s,border-color .2s;&>*{transition:transform .2s}&:active{transition:transform,border-color;&>*{transition:transform}}&:hover{&:not(:active){transform:scale(var(--sclx), var(--scly));&>*{transform:scale(calc(1 / var(--sclx)), calc(1 / var(--scly)))}}border-color:#000}}&:has(.tool:hover){& .tool:not(:hover){opacity:.5}}& .tool{--sclx:1.05;--scly:1.125;& svg{vertical-align:middle}& .header{justify-content:space-between;display:flex;&>svg{font-size:2em}}& h5{align-items:center;gap:.25em;font-size:1em;display:flex}& h5,& p{margin:0}& p{color:#010101a8}& ul.attributes{color:#010101a8;justify-content:start;& li{user-select:none;align-items:center;gap:.25em;font-size:.75em;display:flex}}& ul.tags{gap:.5em;& svg{vertical-align:initial}}}& ul.games>li{outline-offset:2px;--overflow:hidden;border-radius:4px;outline:2px solid #0000;transition:opacity .2s,transform .2s,filter .2s,outline-offset .2s,outline-color .2s}& ul.games>li:hover{&:active{transition:transform}&:not(:active){transform:scale(1.075)}outline-offset:2px;outline-color:#000;&>a:not(.tech){& img.preview,& img.background{transform:scale(1)}& img.wordmark{--transform:scale(.93) translateY(5px)}}}& ul.games:has(li:hover) li:not(:hover){opacity:.5;filter:grayscale(.5)}& ul.games>li>a:not(.tech){color:#fff;border-radius:4px;justify-content:center;align-items:center;font-family:Montserrat Variable,sans-serif;font-size:1.5em;font-weight:700;display:flex;position:relative;overflow:hidden;&.badge{width:250px;height:75px}&.cover{align-items:start;width:150px;height:250px;& img.wordmark{object-position:top;height:25%;margin-top:15%}& .title{margin-top:15%}&:before{content:"";--gap:0px;top:var(--gap);left:var(--gap);width:calc(100% - var(--gap) * 2);height:calc(100% - var(--gap) * 2);z-index:-1;background:linear-gradient(202.5deg,#0000 50%,#000);border-radius:3px;position:absolute}}&.game[data-id=suo]{& img.wordmark{filter:drop-shadow(0 0 20px #96f6cc)drop-shadow(0 0 1px #96f6cc)}}&.game[data-id=void]{& img.wordmark{filter:drop-shadow(0 0 15px #00000080)}}&.game[data-id=cs-dungeon],&.game[data-id=project-16x16]{& img.wordmark{filter:drop-shadow(0 0 5px #000)drop-shadow(0 0 10px #000)}}&.game[data-id=puzzlefy],&.game[data-id=processing-game]{& img.wordmark{filter:drop-shadow(0 0 10px #000)drop-shadow(0 0 30px #000)}}--border:2px solid #00000040;& img.preview{opacity:0;--transition:opacity .2s}&:hover{& img.preview{opacity:1}& img.wordmark{--display:none}}& img.background,& img.preview{object-fit:cover;z-index:-2;pointer-events:none;user-select:none;width:100%;height:100%;transition:transform .2s,opacity .2s;position:absolute;transform:scale(1.075)}& img.wordmark{object-fit:contain;pointer-events:none;user-select:none;max-width:80%;max-height:75%;transition:transform .3s}&:after{content:"";will-change:transform;pointer-events:none;background:linear-gradient(226deg,#fff6 0% 35%,#fff3 42%,#fff0 60%);width:100%;height:120%;transition:transform .65s cubic-bezier(.18,.9,.58,1);display:block;position:absolute;top:0;left:0;transform:translateY(-20%)}&:hover:after{transform:translateY(0%)}}& ul.list{gap:1em;& li{--display:flex;--gap:.25em;--align-items:center}}& .refractive{width:100%;height:100%;position:absolute;top:0;left:0}}@keyframes accordion2{0%{opacity:0;max-height:0}70%{opacity:1;max-height:300px}71%{opacity:1;max-height:300px}to{opacity:0;max-height:0}}@keyframes accordion{0%{opacity:0;max-height:0}50%{opacity:1;max-height:300px}to{opacity:0;max-height:0}}@keyframes openAccordion{0%{opacity:0;max-height:0}to{opacity:1;max-height:300px}}@keyframes closeAccordion{to{opacity:0;max-height:0}0%{opacity:1;max-height:300px}}@keyframes float{0%{transform:translateY(-1em)}to{transform:translateY(1em)}}.scroll-animation-debug{background-color:green;width:100px;height:1px;position:fixed;top:40%;left:0}@keyframes gradient-blur-fade{99%{--opacity:1;height:20%}to{--opacity:0;height:0%}}.gradient-blur.bottom{animation-name:gradient-blur-fade;animation-timing-function:linear;animation-timeline:scroll()}.expressive-code:has(figure.sticky){--ec-header-height:80px;--ec-frame-title-height:36px;--ec-line-height:22px;padding-bottom:3px;overflow-y:clip;& pre{overflow-x:clip!important}& figure.frame{& figcaption.header{top:var(--ec-header-height);z-index:calc(var(--max-indent) + 1);position:sticky;&:after{--ec-header-height:30px;content:"";top:calc(-1 * var(--ec-header-height));width:100%;height:var(--ec-header-height);z-index:-1;background:#fff;padding:0 10px;position:absolute;left:-10px}}}& figure.frame.is-terminal{& figcaption.header{&:after{top:calc(-1.5px + -1 * var(--ec-header-height));border-bottom:none}border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}}& .copy button{z-index:calc(var(--max-indent))}& .ec-line.sticky{top:calc(var(--ec-header-height) + var(--ec-frame-title-height) + var(--indent) * var(--ec-line-height));z-index:1;background:#fff;position:sticky;&:before{content:"";width:100%;box-shadow:0 8px 24px #959da533}&+.ec-line{margin-top:calc(-1 * var(--ec-line-height));user-select:none}}& .sticky-shadow{white-space:nowrap;height:0;top:calc(var(--ec-header-height) + var(--ec-frame-title-height) + calc(var(--indent) + 1) * var(--ec-line-height) - 2px);z-index:1;background:linear-gradient(#959da533,#0000);width:100%;height:10px;margin-bottom:-10px;position:sticky}}footer{z-index:1;position:relative;&:before{content:"";pointer-events:none;background:linear-gradient(#0000,#fff 17.5%);display:block;position:absolute;inset:-100px 0 0 calc(50vw + 380px)}& .footer{color:#fff;--width:fit-content;z-index:1;background-color:#000;border-radius:20px;flex-direction:column;gap:4em;width:860px;margin:0 auto;padding:4em;display:flex;position:relative;& a{color:#fff;&:hover{text-decoration:underline}}& h2{margin-top:0;margin-bottom:.5em}& h3{margin-top:.75em}& a{align-items:center;gap:.25em;display:inline-flex}& sup{display:none}& ul.list.socials{flex-direction:row;gap:1em;font-size:1.5em;& a{transition:color .2s;&:hover{color:#fff}}}& .row{justify-content:space-between;display:flex}& .bottom.row{align-items:center;& .column{flex:1}& a{color:#666}&>.column.last-child{flex-direction:row}&>.column:last-child{flex-direction:row-reverse}}& .column{flex-direction:column;display:flex}& ul.list{flex-direction:column;& li a{color:#999}}}& #about-this-website{flex-direction:column;align-items:center;gap:.25em;padding:1.5em 0;font-size:.9em;display:flex;& a{color:#999;transition:color .2s;&:hover{color:#000;text-decoration:underline}}& ul.versions{gap:.25em;& .separator{user-select:none}}}}@font-face{font-family:Montserrat Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/montserrat-cyrillic-ext-wght-normal.CO5hGrJv.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Montserrat Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/montserrat-cyrillic-wght-normal.EAA9jha_.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Montserrat Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/montserrat-vietnamese-wght-normal.k7S-YeeD.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Montserrat Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/montserrat-latin-ext-wght-normal.BsZE-iaG.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Montserrat Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/montserrat-latin-wght-normal.l_AIctKy.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}header{user-select:none;flex-direction:row;justify-content:center;display:flex;& nav{z-index:1000;background-color:var(--color);color:var(--background-color);border:1px solid var(--color-mix-alpha-2);border-radius:100px;flex-direction:row;align-items:center;gap:2em;margin-top:1em;padding:.35em .5em;display:flex;position:fixed;& ul{flex-direction:row;gap:.25em;margin:0;padding:0;display:flex;& li{display:block;& a{opacity:.75;border:1px solid #0000;border-radius:100px;padding:.5em 1em;transition:opacity .25s;&.active,&:hover{opacity:1}&:hover{border:1px solid var(--color-mix-alpha-2);background-color:var(--color-mix-alpha-1)}}}}& a.wordmark{margin-left:.5em;font-family:Montserrat Variable,sans-serif;font-weight:900}& a{color:var(--background-color);flex-direction:row;align-items:center;gap:.5em;text-decoration:none;display:flex}& a.button{color:var(--color);background-color:var(--background-color);border-radius:100px;padding:.5em 1em}}}.gradient-blur[data-astro-cid-qpso63cr]{--spacing:.25rem;pointer-events:none;inset-inline:calc(var(--spacing) * 0);z-index:10;position:fixed}.blur-layer[data-astro-cid-qpso63cr]{--spacing:.25rem;inset:calc(var(--spacing) * 0);position:absolute}