p{& em{font-style:normal;font-weight:700}& strong{color:#000}& em,& strong{white-space:nowrap;overflow-wrap:anywhere}}section#hero{& p{max-inline-size:720px}& ul.list{gap:1em;margin-inline:1em;& a.button{padding:.75em 1.5em}}& .scroll-indicator{margin:0 auto;margin-bottom:-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{max-inline-size:750px;margin:0 auto;padding-block:3em;padding-inline:1rem;& em{font-style:normal}& 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#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{--display:grid;--grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));&>*{flex:0 150px;min-width:min(150px,100%)}--flex-wrap:wrap;width:calc(100% - 4em);max-width:950px;margin-inline: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;padding-inline:2em;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;flex:0 310px;min-width:min(310px,100%);padding:.6em .75em;position:relative;&>*{color:#000;flex-direction:column;gap:.25em;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{--width:150px;--height:250px;aspect-ratio:3/5;align-items:start;& 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}}section#discord{padding-top:6em;padding-bottom:3em}widgetbot{aspect-ratio:4/3;max-width:800px;margin:2em auto;width:calc(100% - 2em)!important;height:auto!important;display:block!important}@media (width<=325px){p :is(em,strong){white-space:initial}section#hero{& ul.list a.button span{display:none}}section#showcase{& h2{flex-wrap:wrap;justify-content:center;display:flex;&>:nth-child(2){order:3}}& ul.tools li.tool ul.list.tags,& ul.libraries li.library ul.list.links{display:none}}}section#blog{&:not(:first-child){padding-top:9em}&:not(:last-child){padding-bottom:6em}&:last-child{--margin-bottom:4em}& 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)}}}}@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)}}