@font-face{font-family:readex-pro;src:url(/assets/ReadexPro-Regular-BnA2TT1v.ttf);font-weight:400;font-style:normal}@font-face{font-family:readex-pro;src:url(/assets/ReadexPro-Bold-DBfNLipY.woff) format("woff");font-weight:700;font-style:normal}html,body,#root{width:100%;max-width:100%;overflow-x:clip}body{margin:0;background:#4caf50;font-family:readex-pro;overflow:hidden;overscroll-behavior-x:none}.grass-field{position:absolute;width:100%;height:100vh;overflow:hidden}.blade{position:absolute;width:1vh;height:7vh;background:linear-gradient(to bottom,#6d4,#4caf4f00);opacity:.8;border-radius:1vh;transform-origin:bottom bottom;transform:rotate(var(--rot, 0rad)) translate(-50%,-50%);transition:transform .5s ease-out;border-radius:50% 50% 10% 10%/60% 60% 20% 20%;box-shadow:inset 0 -6px -14px #0000002e,0 2px 6px #00000014;overflow:visible;transition:height .1s ease-in-out}.hide{height:0vh}.style-1{background:linear-gradient(to bottom,#b2eb4a,#4caf4f00)}.style-2{background:linear-gradient(to bottom,#4cd77f,#4caf4f00)}.title-div{position:absolute;width:80%;display:flex;justify-content:left}.title{font-size:6vh!important;margin:0}.text-container{width:100%;height:100%;position:absolute;top:0;left:0;padding:3vh}.text{position:absolute;color:#fff;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4));font-size:3vh;pointer-events:none}.items-container{width:auto;max-width:1280px;position:absolute;top:16vh;right:max(20vh,160px);bottom:0;left:3vh;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;align-items:start;gap:0 1.5vh;overflow-x:hidden;overflow-y:auto;padding:1vh 0;box-sizing:border-box;pointer-events:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}.items-container::-webkit-scrollbar{width:6px}.items-container::-webkit-scrollbar-track{background:transparent}.items-container::-webkit-scrollbar-thumb{background:#ffffff73;border-radius:3px}.items-container.is-playing{overflow:visible}.items-container:has(.project-item-intro),.items-container:has(.project-item-morphing),.items-container:has(.project-item-moved){overflow:visible}.project-grid-cell{position:relative;min-width:0;pointer-events:none}.project-item{position:relative;display:block;width:100%;height:auto;box-sizing:border-box;padding:1.5vh;border-radius:1vh;background:#fff;color:#171717;text-align:center;text-decoration:none;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4));cursor:grab;transform:translate(var(--drag-x, 0),var(--drag-y, 0));transition:top .42s cubic-bezier(.22,1,.36,1),left .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),padding .32s ease,background-color .32s ease,filter .15s ease;pointer-events:all;touch-action:none}.project-item:not(.project-item-playing).selected{cursor:grabbing;transition:width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),padding .32s ease,background-color .32s ease,filter .15s ease}.project-item.project-item-wind{transition:transform .65s cubic-bezier(.16,.84,.3,1.08),top .42s cubic-bezier(.22,1,.36,1),left .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),filter .15s ease}.project-item:focus-visible{outline:4px solid rgb(255,246,150);outline-offset:4px}.project-card{height:auto;display:flex;flex-direction:column;opacity:1;transition:opacity .16s ease .14s;text-align:center}.project-title{margin:0 0 .7vh;font-size:clamp(20px,2.5vh,28px);font-weight:400}.project-description{min-height:2.8em;margin:0 0 1vh;font-size:clamp(14px,1.8vh,20px)}.project-image-frame{width:100%;display:flex;align-items:center;justify-content:center}.project-image{display:block;width:100%;height:auto;max-height:20vh;object-fit:contain;border-radius:.8vh}.project-image.gif-vertical{width:78%}.project-card .tag-container{justify-content:center}.project-card .hoverbox-tag{padding-top:0;padding-bottom:1vh}.project-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .22s ease}.project-item-measuring{visibility:hidden;pointer-events:none}.project-item-intro{position:absolute;top:50%;left:50%;width:17vh;height:17vh;padding:0;background:transparent;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(2px 4px 3px rgb(0,0,0,.3));animation:project-icon-drop .6s linear var(--intro-delay) both}.project-item-intro .project-card{opacity:0;transition-delay:0ms}.project-item-intro .project-icon{opacity:1}.project-item-morphing{position:absolute;top:0;left:0;width:100%;height:var(--card-height);transform:none;pointer-events:none}@keyframes project-icon-drop{0%{transform:translate(-50%,calc(-50% - 85vh))}68%{transform:translate(-50%,calc(-50% + 2.2vh))}81%{transform:translate(-50%,calc(-50% - .75vh))}91%{transform:translate(-50%,calc(-50% + .35vh))}to{transform:translate(-50%,-50%)}}.project-item-playing{position:absolute;top:50%;left:50%;width:17vh;height:17vh;padding:0;background:transparent;cursor:grab;transform:translate(calc(-50% + var(--play-x)),calc(-50% + var(--play-y)));filter:drop-shadow(2px 4px 3px rgb(0,0,0,.3))}.project-item-playing.selected{transform:translate(calc(-50% + var(--play-x)),calc(-50% + var(--play-y))) scale(1.08);transition:width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),padding .32s ease,background-color .32s ease,filter .15s ease;cursor:grabbing}.project-item-playing .project-card{opacity:0;transition-delay:0ms;pointer-events:none}.project-item-playing .project-icon{opacity:1;transition-delay:.26s}@media(prefers-reduced-motion:reduce){.project-item-intro{animation:none}.project-item,.project-card,.project-icon{transition-duration:1ms}}@media(max-width:1150px)and (min-width:601px){.items-container{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px)and (min-width:601px){.items-container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px)and (min-width:601px){.items-container{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (pointer:coarse){@supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none){html{min-height:100.3%;overscroll-behavior-y:none}}}@media screen and (pointer:coarse){@supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none)){html{height:100%;overflow:hidden}body{margin:0;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}}}body{overscroll-behavior-y:none}.site-footer{position:absolute;right:3vh;bottom:2vh;z-index:10000000;display:flex;gap:1.5vh;font-size:1.7vh;pointer-events:all}.site-footer a{color:#ffffffc7;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:#fff696}@media(max-width:600px){body{overflow-x:clip;overflow-y:auto;touch-action:pan-y pinch-zoom}.text{font-size:6vh}.grass-field{overflow-x:clip;overflow-y:visible}#bg{position:fixed}.text-container{display:flex;flex-direction:column;width:100%;padding:3vh 6vw;box-sizing:border-box}.title-div{position:initial;z-index:10000000}.title{position:initial;font-size:5vh!important}.who{z-index:10000000}#about{z-index:10000000;padding-bottom:3vh}.about-text{color:#fff;font-size:3vh}.mobile-top-links{z-index:10000000;display:flex;gap:2dvh;margin:.5vh 0 1vh}.mobile-top-links a{color:#d1ffd8;font-size:3vh;text-decoration:none}.social-links{justify-content:flex-start}.site-footer{position:static;z-index:10000000;display:flex;flex-direction:column;align-items:flex-start;gap:.5vh;padding-bottom:3vh}.site-footer a{color:#d1ffd8;font-size:3vh}.faded{color:#d1ffd8}.hoverbox-tag{padding-bottom:1vh}}@media(min-width:601px){html,body{overflow-y:hidden}.text-container{z-index:10000000;pointer-events:none}#about{position:absolute;width:min(42vw,650px);height:auto;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1000000;pointer-events:all;opacity:1;visibility:visible;display:flex;flex-direction:column;align-items:center;transition:opacity .2s ease,visibility .2s ease}#about.about-hidden{opacity:0;visibility:hidden;pointer-events:none}.about-text{color:#d1ffd8;font-size:3vh}.faded{color:#d1ffd8a8}.hoverbox-tag{padding-top:1vh}}.flower{padding-top:3px;padding-left:3px;height:1em;vertical-align:text-top}.top-margin{margin-top:2vh}.social-links{display:flex;justify-content:center;gap:1.4vh;margin-top:.8vh}.social-link{display:inline-flex;color:#d1ffd8a8;transition:color .15s ease,transform .15s ease}.social-link:hover,.social-link:focus-visible{color:#fff696;transform:translateY(-2px)}.social-link svg{width:3.2vh;height:3.2vh}.item{cursor:pointer;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform:translate(-50%,-50%);pointer-events:all;transition:transform .05s ease-in-out;filter:drop-shadow(2px 4px 3px rgb(0,0,0,.3))}.item-img{pointer-events:none;width:17vh}.item.selected{filter:drop-shadow(2px 2px 10px rgb(0,0,0,.3)) drop-shadow(0 0 6px rgb(238,255,0));transform:translate(-50%,-50%) scale(1.08)}.hovered{filter:drop-shadow(2px 2px 10px rgb(0,0,0,.3)) drop-shadow(0 0 6px rgb(238,255,0))}#bg{width:100vw;height:100vh;opacity:.2;position:absolute;margin:0;z-index:0}.hoverbox{z-index:100000001!important;width:30vh;border-radius:1vh;background-color:#fff;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4));position:absolute;transform:translate(-50%);padding:1.5vh;text-align:center}.hoverbox-tail{width:0;height:0;border-left:2vh solid transparent;border-right:2vh solid transparent;border-bottom:2vh solid rgb(255,255,255);opacity:1;position:absolute;top:-1.9vh;left:50%;transform:translate(-50%)}.flipped{z-index:100000002!important;border-bottom:0;top:initial;bottom:-1.9vh;border-top:2vh solid rgb(255,255,255)}.hoverbox-title{font-size:2.6vh;width:100%;padding-bottom:1vh}.hoverbox-desc{padding-top:1vh}.play-toggle{top:11vh;bottom:auto}.Mui-checked{color:#37ff37!important}.MuiSwitch-root{pointer-events:all}.who{top:3vh;bottom:auto;right:9vh;margin:0;padding:0;border:0;background:transparent;font-family:inherit;cursor:pointer;pointer-events:all}.top-nav-link{bottom:auto;right:9vh;color:#fff;text-decoration:none;pointer-events:all}.top-nav-link:hover{color:#fff696}.privacy-link{top:15vh}.blog-link{top:7vh}.contact-link{top:11vh}.text-highlight{color:#fff696}.hoverbox-gif{width:100%;border-radius:1vh}.gif-vertical{width:60%}.itembox{border-radius:1vh;background-color:#fff;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4));padding:1.5vh;margin-top:2vh;text-align:center;margin-bottom:3vh;min-height:36vh;display:flex;flex-direction:column;justify-content:space-evenly;color:#171717;text-decoration:none}.itembox-container{display:flex;flex-direction:column;align-items:center}.itembox-desc{padding-bottom:1vh}.hoverbox-tag{width:100%;color:#358fff;font-family:sans-serif;font-weight:700;font-size:1.5vh}.tag-desktop{color:#358fff}.tag-dev{color:#ff6161}.tag-container{display:flex;justify-content:space-between}body.blog-page{overflow:hidden}.blog-content{height:100vh;overflow:hidden;position:relative}.blog-content #bg,.blog-content .grass-field{position:fixed;top:0;left:0}.blog-scroll{position:relative;z-index:10000000;width:40vw;margin:0 auto;height:100vh;overflow-y:auto;padding:0vh 0 10vh;pointer-events:all;box-sizing:border-box;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}.blog-scroll::-webkit-scrollbar{width:8px}.blog-scroll::-webkit-scrollbar-track{background:transparent}.blog-scroll::-webkit-scrollbar-thumb{background:#ffffff73;border-radius:4px}.blog-scroll::-webkit-scrollbar-thumb:hover{background:#ffffffa6}.blog-scroll::-webkit-scrollbar-corner{background:transparent}.blog-fade-in{animation:blogFadeIn .2s ease-in}@keyframes blogFadeIn{0%{opacity:0}to{opacity:1}}.blog-page-title{color:#fff;font-size:5vh;text-align:center;margin:4dvh 0 1vh}.subtitle{font-size:2.8vh;margin-top:1dvh}.blog-card-list{display:flex;flex-direction:column;align-items:center}.blog-card-link{width:100%;text-decoration:none;color:inherit}.blog-card{cursor:pointer;min-height:auto}.blog-card-image{width:90%;border-radius:1vh;align-self:center}.blog-back-button{position:fixed;top:3vh;left:3vh;z-index:10000001;color:#fff;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4));font-size:2.5vh;text-decoration:none;pointer-events:all}.blog-back-button:hover{color:#fff696}.blog-card-date{color:#888;font-size:1.8vh}.blog-article{border-radius:1vh;padding:7dvh 3vw 3dvh 3vw;margin-top:2vh}.blog-article-title{font-size:4.5vh;margin:0 0 1vh;color:#fff}.blog-article-subtitle{color:#c2ffb7;font-size:2.5vh;margin:0 0 1vh}.blog-article-date{color:#bfff5e;font-size:1.8vh;margin:0 0 3vh}.blog-body p{font-size:2vh;line-height:1.6;margin:0 0 2vh;color:#fff}.blog-body-image{display:block;width:100%;border-radius:.2vh;margin:0}.half-image{width:100%}.blog-body-figure{margin:0 0 2vh}.blog-body-figure-row{display:flex;gap:2%;align-items:center;margin:0 0 2vh}.blog-body-figure-row .blog-body-figure{flex:1;min-width:0;margin:0}.blog-body-caption{margin-top:1vh;font-size:1.7vh;color:#c2ffb7;text-align:center;line-height:1.4}.blog-body-link{color:#bfff5e}.blog-body-link:hover{color:#fff696}.blog-body-bold{font-weight:700}.blog-body-italic{font-style:italic}.blog-body-heading{color:#c2ffb7;margin:3vh 0 1.5vh}.blog-body-h1{font-weight:400;font-size:3.5vh}.blog-body-h2{font-size:3vh}.blog-body-h3{font-size:2.6vh}.blog-body-h4{font-size:2.3vh}.blog-body-h5{font-size:2.1vh}.blog-body-h6{font-size:2vh}.blog-back-link{display:inline-block;margin-top:3vh;color:#bfff5e;text-decoration:none;font-size:2vh}.blog-back-link:hover{text-decoration:underline}.kofi{margin-top:3dvh;height:48px}.not-found{min-height:100vh;position:relative;overflow:hidden;box-sizing:border-box;color:#fff}.not-found-content{position:relative;z-index:10000000;padding:10vh 8vw;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4))}.not-found h1{margin:0;font-size:6vh}.not-found p{font-size:3vh}.not-found a{color:#fff;font-size:2.5vh}.policy-page{margin:9vh 0 4vh;padding:3vh 3vw;border-radius:1vh;background:#fff;color:#171717;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.4))}.policy-page h1{margin:0 0 1vh;font-size:4.5vh;font-weight:400}.policy-page h2{margin:3vh 0 1vh;font-size:2.5vh}.policy-page p{font-size:1.9vh;line-height:1.6}.policy-page a{color:#20732a}.policy-updated{color:#666}@media(max-width:1400px){.blog-scroll{width:60vw}}@media(max-width:600px){.blog-scroll{width:88vw}}