:root{font:400 16px/1.5 Sora,sans-serif}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html,body{background-color:#fff}.app-container{grid-template-rows:1fr 80px;min-height:100vh;transition:all .3s;display:grid}main{padding:20px}footer{columns:3;grid-template-columns:repeat(3,1fr);display:grid}footer div{padding:20px}.copyright{text-align:center;width:100%}.image-container{position:relative}.bob{width:250px;padding:0;position:absolute;bottom:0;right:0}.bob-button{cursor:pointer;background:0 0;border:none;width:100%;padding:0;display:block}.bob-image{filter:contrast(2);transform-origin:50% 100%;width:100%;height:auto;transition:transform .3s;display:block}.bob-button:hover .bob-image{transform:rotate(.5deg)}.bob.is-woofing .bob-image{animation:.2s bob-woof}@keyframes bob-woof{50%{transform:translateY(-6%)rotate(-3deg)}}.woof-lines{visibility:hidden;width:17%;height:18%;position:absolute;top:15%;right:74%}.woof-line{transform-origin:100%;width:100%;transform:rotate(var(--angle));border-top:2px solid #000;position:absolute;right:0}.woof-line:first-child{--angle:20deg;top:20%}.woof-line:nth-child(2){--angle:0deg;top:35%}.woof-line:nth-child(3){--angle:-20deg;top:50%}.bob.is-woofing .woof-lines{visibility:visible}.bob.is-woofing .woof-line{animation:.2s ease-out backwards woof-line}.bob.is-woofing .woof-line:nth-child(2){animation-delay:60ms}.bob.is-woofing .woof-line:nth-child(3){animation-delay:.12s}@keyframes woof-line{0%{transform:rotate(var(--angle)) scaleX(0)}}.bob-bubble{white-space:nowrap;opacity:0;visibility:hidden;transform-origin:100% 100%;padding:.4em .75em;transition:opacity .15s,transform .15s,visibility .15s;position:absolute;bottom:71%;right:89%;transform:scale(.8)}.bob.is-woofing .bob-bubble{opacity:1;visibility:visible;transition-delay:.15s;transform:scale(1)}.bob-bubble a{color:#000}.bob-bubble a:hover,.bob-bubble a:focus-visible{color:#ff69b4}@media (prefers-reduced-motion:reduce){.bob-image,.bob-bubble{transition:none}.bob.is-woofing .bob-image,.bob.is-woofing .woof-line{animation:none}.bob.is-woofing .bob-bubble{transition-delay:0s}}@media only screen and (width<=768px){.app-container{grid-template-rows:1fr 200px}footer{flex-flow:column-reverse;justify-content:end;margin:0 auto;display:flex}footer div{text-align:center;padding-top:0}.bob{width:120px;left:33%;right:auto;transform:translate(-50%)}.bob-bubble{transform-origin:0 100%;bottom:100%;left:0;right:auto}}.title-bg{--hue-1:200;--hue-2:260;--hue-3:320;--hue-4:20;width:fit-content}.title-bg .hello{background:linear-gradient(to bottom right, hsl(var(--hue-1), 100%, 65%), hsla(var(--hue-1), 80%, 95%, 0)), linear-gradient(to bottom left, hsl(var(--hue-2), 100%, 65%), hsla(var(--hue-2), 80%, 95%, 0)), linear-gradient(to top left, hsl(var(--hue-3), 100%, 65%), hsla(var(--hue-3), 80%, 95%, 0)), linear-gradient(to top right, hsl(var(--hue-4), 100%, 65%), hsla(var(--hue-4), 80%, 95%, 0));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding:20px 0;font-size:2em;font-weight:700}.sections-container{grid-template-columns:1fr 1fr;width:100%;margin:0 auto;display:grid}ul{list-style:none}.works-list{flex-direction:column;gap:.25em;display:flex}.selected-works-container{flex-flow:column;display:flex}.subheading{font-size:24px;font-weight:700}.description-box{grid-template-rows:0fr;max-width:60ch;transition:grid-template-rows .3s,margin-bottom .3s;display:grid}.description-box.is-open{grid-template-rows:1fr;margin-bottom:1.5em}.description-box>.description-inner{flex-direction:column;align-items:flex-start;gap:.75em;display:flex;overflow:hidden}.what-we-did{font-style:italic}.title-container{flex-flow:row;align-items:center;gap:10px;display:flex}.url{color:#000}.url:hover,.url:focus-visible{color:#ff69b4}a:focus-visible,button:focus-visible{outline-offset:2px;outline:2px solid #000}.title-container button{color:#000;cursor:pointer;background:0 0;border:none;align-items:center;gap:20px;font-size:20px;font-weight:600;line-height:1.2;transition:transform .3s;display:flex;transform:skew(0deg)}.title-container button.is-open{transform:skew(-15deg)}.lines{transform-origin:50%;cursor:pointer;width:12px;height:12px;transition:transform .3s;position:relative;transform:rotate(0)}.lines.is-open{transform:rotate(45deg)}.line{border:1px solid #000;position:absolute}.hline{width:10px;height:0;top:4px;left:0}.vline{width:0;height:10px;top:0;left:4px}.stack{flex-wrap:wrap;display:flex}.stack-image{filter:grayscale();height:20px;margin:10px}.tooltip{display:inline-block;position:relative}.tooltip-bubble{white-space:nowrap;opacity:0;visibility:hidden;background:#fff;padding:2px 6px;font-size:9px;transition:opacity .15s;position:absolute;bottom:100%;left:0}.tooltip:hover .tooltip-bubble,.tooltip:focus-within .tooltip-bubble{opacity:1;visibility:visible}.selected-works-video,.selected-works-image{width:min(100%, 30rem, calc((100svh - 8rem) * var(--ratio)));height:auto;aspect-ratio:var(--ratio);display:block}@media only screen and (width>=769px){.screenshot-section{align-self:start;position:sticky;top:20px}}.video-toggle{cursor:pointer;background:0 0;border:none;margin-top:.5em;padding:4px;display:block}.video-toggle svg{fill:none;stroke:#000;stroke-width:2px;stroke-linejoin:round;display:block}@media only screen and (width<=768px){.sections-container{grid-template-columns:1fr}}.about{margin-bottom:20px}.about h1{font-size:1em;font-weight:400}
