UI/UX design
Brand design
Web development


Various concepts of web services and applications


Web services
Web applications
');background-repeat:no-repeat;height:16px;left:.5rem;offset-path:path("M1 0V28C1 30.7614 3.23858 33 6 33H37");position:absolute;top:0;width:18px}.Button--enter .Button-bg{background-color:var(--cream-50);border:2px solid var(--border-1000);z-index:1}.Button--enter .Button-bg,.Button--enter .Button-bg-hover{border-radius:4px 4px 4px 16px;inset:-2px;position:absolute}.Button--enter .Button-bg-hover{background:var(--bg-1000);z-index:0}.Footer{--link:var(--white);background-color:var(--Footer-bg-color,var(--Template-bg-color,var(--bg-50)));color:var(--white);padding-bottom:2.5rem}.Footer a:focus-visible{background-color:var(--white);color:var(--black)}.Footer-inner{border-top:1px solid var(--Footer-border-color,var(--border-1000))}.Footer-main{align-items:flex-end;display:flex;mix-blend-mode:difference;padding-top:3rem}.Footer-links{display:flex;flex-direction:column;gap:.125rem}.Footer-copyright{margin:0 0 0 auto;text-align:right}.Header-main{inset:0 0 auto 0;min-width:var(--root-minWidth);mix-blend-mode:difference;padding-top:1.5rem;pointer-events:none;position:fixed;z-index:1000}:root:not(.is-transition) .Header-button,:root:not(.is-transition) .Header-logo,:root:not(.is-transition) .Header-secondary{pointer-events:all}.Header-ctrl{align-items:center;display:flex}.Header-button-text-item,.Header-logo{height:2rem;line-height:2rem}.Header-logo{--link:var(--white);--link-hover-opacity:1;display:flex;flex-direction:column;margin:0 auto 0 0;overflow:hidden;position:relative;z-index:1}.Header-logo a:focus-visible{background-color:var(--white);color:var(--black)}.Header-separator{display:none}.Header-separator-line{background:var(--white);display:block;height:2px;position:absolute;width:100%}.Header-button{align-items:center;color:var(--white);display:flex;margin:0;z-index:1}.Header-button:focus-visible .Button--arrow{outline:var(--border-width) solid var(--white);outline-offset:3px}.Header-button-textMobile{display:block;line-height:2rem;margin-right:.666rem;overflow:hidden;position:relative}.Header-button-text{position:relative}.Header-button-text-item{display:block;margin-right:1rem;overflow:hidden;text-align:left}.Header-button-arrow .Button--arrow{margin:0}.Header-secondary{--link:var(--white);display:none}.Header-secondary-item{margin-left:1.5rem;overflow:hidden;position:relative}.Header-mask{background:var(--bg-1000);clip-path:circle(0 at 0 0);display:none;flex-direction:column;inset:0;min-width:300px;position:fixed;z-index:900}.Header-mask:before{background:linear-gradient(var(--bg-1000) 40%,transparent);content:"";height:8rem;left:0;pointer-events:none;position:fixed;right:0;z-index:1}.Heading{color:var(--heading)}.Heading--display{font-size:clamp(1.25rem,1.25rem + 20vw,62.4375rem);line-height:1;font-weight:100;letter-spacing:-.065em;margin-left:-.5rem;user-select:none}.Hero{--Stamp-center-x:0px;--Stamp-center-y:0px;height:clamp(var(--Hero-minHeight),var(--Hero-height),var(--Hero-maxHeight));position:relative}.Hero.-transition\:pre{background-color:var(--cream-50);box-shadow:inset 0 var(--border-width-negative) 0 var(--border-1000)}.Hero.-transition\:pre:first-child{z-index:10}.Hero.-transition\:pre:nth-child(2){z-index:9}.Hero.-transition\:pre:nth-child(3){z-index:8}.Hero.-transition\:pre:nth-child(4){z-index:7}.Hero.-transition\:pre:nth-child(5){z-index:6}.Hero-inner{min-height:var(--Hero-inner-minHeight);pointer-events:none}.Hero-inner>*{inset:0;position:absolute}.Hero-heading{overflow:hidden;z-index:2}.Hero-heading-inner{align-items:center;bottom:3rem;display:flex;height:25%;margin-bottom:0;pointer-events:all;position:absolute;transform:translateY(-150%);white-space:nowrap}.Hero.-transition\:pre .Hero-heading-inner{transform:translate(0)}.Hero-figure{position:relative}.Hero-link{inset:auto 0 1.625rem 0;padding-right:var(--wrap-spaceRight)}.Hero-content,.Hero-link{pointer-events:all;z-index:4}.Hero-content{align-self:center;display:grid;gap:1.5rem;place-items:start;position:relative}.Hero-content-heading{margin-bottom:-1rem}.Hero-figureBg{background:var(--Hero-figure-bg);height:100%;opacity:var(--Hero-figure-pre-bg-alpha);width:100%;z-index:1}.Hero-figureBg--animate{background:linear-gradient(180deg,var(--Hero-figure-bg) 0,rgba(var(--Hero-figure-bg-rgb),0) 100%);opacity:var(--Hero-figure-bg-alpha);position:relative;transform:scaleY(4)}.Hero.-transition\:pre .Hero-figureBg--animate{background:var(--Hero-figure-bg);opacity:var(--Hero-figure-pre-bg-alpha);transform:scaleY(1)}.Hero-stamp.Stamp{pointer-events:all}.Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 -10vw}.Icon{display:inline-block;fill:currentColor;height:2rem;width:2rem}.Link{align-items:center;display:inline-flex;overflow:hidden;pointer-events:all;position:relative;transition:opacity .3s cubic-bezier(.68,0,.1,1);will-change:opacity}.Link:where(.Link:hover){opacity:var(--link-hover-opacity)}.Link-text{display:block;pointer-events:none;position:relative}.Link-icon{position:absolute}.Link-icon{align-items:center;display:flex;margin-top:-.0625rem;right:0}.Link.-underline .Link-text:first-child:after{border-bottom-style:solid;border-bottom-width:var(--border-width);content:"";inset:auto 0 .125rem 0;position:absolute;transition:opacity 1.3s cubic-bezier(.68,0,.1,1)}.Link.-vertical{transform:rotate(-180deg);writing-mode:vertical-rl}.Link.-vertical .Link-text:first-child:after{border-bottom-width:0;border-left-style:solid;border-left-width:var(--border-width);inset:0 auto 0 0}.Link.-arrow{font-size:clamp(1rem,1rem + 1vw,1.1875rem);line-height:1.375;line-height:1.75;padding-right:2.5rem}.LinkRoll{display:inline-flex;overflow:hidden;position:relative;transition:opacity .3s cubic-bezier(.68,0,.1,1);will-change:opacity}.LinkRoll:where(.LinkRoll:hover){opacity:var(--link-hover-opacity)}.LinkRoll-text{display:inline;pointer-events:none;position:relative}.LinkRoll-char{display:inline-block;position:relative}.LinkRoll-char.-empty{visibility:hidden}.LinkRoll.has-underline .LinkRoll-char:after{border-bottom-style:solid;border-bottom-width:var(--border-width);content:"";inset:auto 0 .125rem 0;opacity:0;position:absolute;transition:opacity 1.3s cubic-bezier(.68,0,.1,1)}.Splash{background-color:var(--root-bg);color:var(--cream-50);inset:0;position:fixed;user-select:none;z-index:1000}.Splash-main{display:grid;inset:0;place-content:center;position:absolute;text-align:center}.Splash-row{overflow:hidden}.Splash-text{animation:animate 1s cubic-bezier(.68,0,.1,1)}@keyframes animate{0%{opacity:0;transform:translateY(100%) skewX(-50deg) translateZ(0)}to{opacity:1;transform:translateY(0) skewX(0deg) translateZ(0)}}.Stamp{display:grid;inset:0;place-items:center;position:absolute;z-index:0}.Stamp-inner{position:relative}.Stamp-inner,.Stamp-svg{height:clamp(12rem,31vw,22rem);width:clamp(12rem,31vw,22rem)}.Stamp-stamp{cursor:pointer;display:block}.Stamp-stamp svg path{fill:var(--Stamp-color,var(--text-1000))}.Stamp-stamp svg path:first-child,.Stamp-stamp svg path:nth-last-child(4){fill:none}.Stamp-stamp svg circle:nth-last-child(3){fill:var(--Stamp-iris,var(--white))}.Template{--Template-overlay-color:var(--black);--Template-overlay-color-initial:var(--black-transparent);background-color:var(--Template-bg-color,var(--bg-50));color:var(--Template-color,var(--text-1000));min-height:var(--vh);overflow:hidden;width:100%}.Template-main{background-color:var(--Template-main-bg-color,inherit);color:var(--Template-main-color,inherit)}.Text{text-wrap:balance;transform-origin:top left}.Text.-size\:xl{font-size:clamp(1rem,1rem + 1vw,1.375rem);line-height:1.375}.Text.-size\:s{font-size:.9375rem;line-height:1.3333333333}.Text>:not(.Text):last-child{margin-bottom:0}.TextReveal,.TextReveal-text,.TextReveal-text-inner{display:block;width:fit-content}.TextReveal-text{overflow:hidden}.Template--home{--Template-bg-color:var(--cream-50)}.Template--home .Template-about{position:relative;z-index:999}.Template--home .Template-about-mobile{display:grid;height:clamp(var(--Hero-minHeight),var(--Hero-height),var(--Hero-maxHeight));margin-left:-.25rem;padding-bottom:25vw;place-content:center;pointer-events:none;position:absolute;width:auto}.Template--home .Template-about-mobile>.Link{pointer-events:all}.Template--home .Template-about-desktop{display:none}.Template--home .Template-about-desktop>h1{font-size:1rem;line-height:1.5;pointer-events:all}.Template--home .Template-heros{position:relative;z-index:1}.Template--home .Footer{position:relative;z-index:0}.Template--home .Footer-inner{border-top:0}.Hero--biocode{--Stamp-iris:var(--biocode-primary)}.Hero--biocode .Hero-heading{z-index:3}.Hero--biocode .Hero-heading-inner{transform:translateY(-175%)}.Hero--biocode .Hero-pre{z-index:1}.Hero--biocode .Hero-figure-globe{inset:8% 0 auto -27%;position:absolute;width:clamp(20rem,70vw,36rem)}.Hero--biocode .Hero-figure-globe--pre{transform:scale(.99)}.Hero--biocode.-transition\:pre .Hero-bg{height:100vh}.Hero--biocode .Hero-globe{z-index:4}.Hero--biocode .Hero-icon{z-index:5}.Hero--biocode .Hero-figure-icon{border:var(--border-width) solid transparent;border-radius:50%;inset:auto auto 27% 40%;padding:1rem;position:absolute;transition:border-color 1.3s cubic-bezier(.68,0,.1,1);width:clamp(6rem,17vw,36rem)}.Hero--biocode .Hero-bg{background:radial-gradient(70% 22rem at 70% 0,var(--biocode-bg-200),var(--biocode-bg-50));z-index:2}.Hero--mediasignal{--Stamp-overlay:var(--mediasignal-bg-50);--Stamp-iris:var(--mediasignal-primary);background-color:var(--mediasignal-bg-50)}.Hero--mediasignal .Hero-figure-figure{--width:90vw;inset:2rem 0 0 -3.5rem;position:absolute;width:clamp(24rem,var(--width),52rem);z-index:3}.Hero--mediasignal .Hero-figure-figure-inner{transform:translate(10rem,8rem)}.Hero--mediasignal.-transition\:pre .Hero-figure-figure-inner{transform:translate(0)}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 6vw}.Hero--oras{--Stamp-iris:var(--oras-primary);background-color:var(--oras-bg-50)}.Hero--oras .Hero-figure{height:clamp(14rem,55vw,28rem)}.Hero--oras .Hero-figure-figure{--width:55vw;inset:4rem 0 0 -3rem;position:absolute;width:clamp(17rem,var(--width),32rem);z-index:3}.Hero--oras .Hero-content{align-self:end}.Hero--oras .Hero-drop{height:auto;mix-blend-mode:darken;width:100%;z-index:1}.Hero--oras .Hero-drop--3{inset:auto 0 25% 30vw;max-width:10%}.Hero--moreWork{--Stamp-overlay:var(--moreWork-bg-50);--Stamp-iris:var(--moreWork-primary);background-color:var(--moreWork-bg-50)}.Hero--moreWork .Hero-figure-figure{--width:45vw;inset:-1rem -35vw 0 auto;position:absolute;width:clamp(11rem,var(--width),22rem);z-index:3}.Hero--moreWork .Hero-figure-figure--bottom{inset:auto -1.5rem 6rem auto}.Hero--moreWork .Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 -3.5vw}.Hero--sandbox{--Stamp-iris:var(--sandbox-primary);--Stamp-overlay:var(--sandbox-bg-50);background-color:var(--sandbox-bg-50)}.Hero--sandbox .Hero-figure{height:clamp(14rem,45vw,27rem)}.Hero--sandbox .Hero-figure-figure{--width:55vw;inset:6rem 0 0 -5rem;position:absolute;width:clamp(15rem,var(--width),32rem);z-index:3}.Hero--sandbox .Hero-content{align-self:end}.Hero--sandbox .Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 -20vw}@media (min-width:30em){.Hero--biocode .Hero-figure-globe{inset:6% 0 auto -20%}.Hero--biocode .Hero-figure-icon{inset:auto auto 23% 50%}}@media (min-width:37.5em){.grid-col\:6\@s{--grid-span:6}.grid-col.-start\:7\@s{grid-column-start:7}:root{--Hero-maxHeight:48rem}.Hero-stamp.Stamp .Stamp-inner{inset:0}.Template--home .Template-about-mobile{display:none}.Template--home .Template-about-desktop{display:block;height:clamp(var(--Hero-minHeight),var(--Hero-height),var(--Hero-maxHeight));max-width:20ch;padding-top:25vw;pointer-events:none;position:absolute;z-index:98}.Hero--biocode .Hero-figure-globe{top:4%}.Hero--oras .Hero-figure-figure{--width:50vw;inset:6rem 0 0 -3.5rem}.Hero--sandbox .Hero-figure-figure{--width:100%;left:-25%}}@media (min-width:48em){:root{--wrap-spaceLeft:2.5rem;--wrap-spaceRight:2.5rem}.Button--arrow{height:2.5rem;width:3rem}.Footer{padding-bottom:6rem}.Footer-main{padding-top:4rem}.Footer-links{flex-direction:row;gap:.5rem}.Header-main{padding-top:2rem}.Header-button-text-item,.Header-logo{font-size:clamp(1.125rem,1.125rem + 1vw,1.5rem)}.Header-logo{margin:0}.Header-separator{align-items:center;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0 .666rem;overflow:hidden;position:relative;width:1.25rem;z-index:1}.Header-button-textMobile{display:none}.Header-secondary{font-size:clamp(1rem,1rem + 1vw,1.1875rem);line-height:1.375;display:flex;margin-left:auto}.Header-secondary a:focus-visible{background-color:var(--white);color:var(--black)}.Header-mask:before{height:8rem}.Heading--display{margin-left:-1.5rem}.Hero-stamp.Stamp .Stamp-inner{inset:5vw 0 0 0}.Template--home .Template-about-desktop{max-width:28ch}.Hero--mediasignal .Hero-figure-figure{--width:80vw}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:3vw 0 0 10vw}.Hero--oras .Hero-drop--3{max-width:5rem}.Hero--sandbox .Hero-figure-figure{--width:80%}}@media (min-width:56.25em){.Template--home .Template-about-desktop{max-width:35ch}.Template--home .Template-about-desktop>h1{font-size:clamp(1rem,1rem + 1vw,1.1875rem);line-height:1.375}}@media (min-width:64em){:root{--wrap-spaceLeft:4rem;--wrap-spaceRight:3rem;--Hero-minHeight:42rem;--Hero-height:var(--vh)}.grid.-gap\:l{--grid-gap:3rem}.grid-col\:4\@l{--grid-span:4}.grid-col.-start\:4\@l{grid-column-start:4}.grid-col\:5\@l{--grid-span:5}.grid-col\:6\@l{--grid-span:6}.grid-col.-start\:6\@l{grid-column-start:6}.grid-col.-start\:7\@l{grid-column-start:7}.Button--arrow{height:3rem;width:4rem}.Header-main{padding-top:2.5rem}.Header-mask:before{height:11rem}.Hero-heading-inner{bottom:-2.0625rem}.Hero-link{display:none}.Template--home .Template-about-desktop{padding-top:15rem}.Hero--biocode .Hero-figure-icon{inset:auto auto 20% 40%}.Hero--mediasignal .Hero-figure-figure{--width:64vw;inset:3rem 0 0 -5rem}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:3vw 0 0 20vw}.Hero--oras .Hero-figure-figure{--width:45vw;left:-5rem}.Hero--oras .Hero-drop--3{bottom:10%}.Hero--oras .Hero-stamp.Stamp .Stamp-inner{inset:2vw 0 0 -12vw}.Hero--sandbox .Hero-figure-figure{--width:140%;left:-70%}.Hero--sandbox .Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 -25vw}}@media (min-width:71.25em){.grid-col\:2\@xl{--grid-span:2}.grid-col.-start\:6\@xl{grid-column-start:6}.Hero-heading-inner{bottom:-1.4375rem}.Hero--biocode .Hero-figure-globe{inset:-2% -30% auto 0;width:auto}.Hero--biocode .Hero-figure-icon{inset:auto auto 20% 60%}}@media (min-width:80em){:root{--Hero-minHeight:44rem}.Hero--sandbox .Hero-figure-figure{--width:115%;left:-57.5%}}@media (min-width:95.5em){.Button--enter{margin-top:1.5rem;transform:scale(1.1);transform-origin:bottom left}}@media (min-width:105em){.Button--enter .Button-arrow{margin-bottom:-.15rem;margin-left:-.15rem}.Button--enter{transform:scale(1.2)}.Header-separator-line{height:3px}}@media (min-width:120em){.Button--enter{transform:scale(1.5)}}@media (min-width:160em){.Button--enter .Button-arrow{margin-bottom:-.2rem;margin-left:-.3rem}}@media (max-width:71.24em){.Hero--biocode .Hero-content{align-self:start;place-items:end;text-align:right}}@media (max-width:63.99em){.pl\:0\@until\:l{padding-left:0!important}.Hero-inner>:where(.wrap):not(.Hero-link){padding-right:0}.Hero-content{display:none}.Stamp-stamp svg path:first-child,.Stamp-stamp svg path:nth-last-child(4){stroke-width:3px}}@media (max-width:47.99em){.Footer{font-size:.9375rem;line-height:1.3333333333}.Header-button-text{display:none}}@media (max-width:37.49em){.Button--enter .Button-bg-hover{height:100%;width:100%}.Button--enter{transform:scale(.75)}.Hero--oras .Hero-stamp.Stamp .Stamp-inner{inset:-3vw 0 0 -10vw}}@media (max-width:22.49em){.Heading--display{font-size:5.75rem;line-height:1}}
UI/UX design
Brand design
Web development
Various concepts of web services and applications
Web services
Web applications