@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%}body{background-color:#fff;font-family:Roboto,sans-serif;overflow-x:hidden;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;color:#333;font-size:62.5%}body.mouseover,button{cursor:pointer}#canvas{position:fixed;width:100%;height:100%;top:0;left:0}.wrapper{min-height:100%;width:100%;margin:0 auto;display:flex;position:relative}@media (max-width:540px){.wrapper{display:block}}.wrapper.touch-open #app{top:480px}.wrapper.touch-open aside nav{opacity:1}aside{position:relative;height:100vh;width:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:300px;opacity:0}@media (max-width:540px){aside{width:100%;max-width:100%;height:220px;position:fixed;padding-top:140px}}aside.show{opacity:1}aside .logo{position:fixed;display:block;width:30%;height:15vw;min-height:230px;max-height:250px;top:0;max-width:300px}@media (max-width:540px){aside .logo{height:100%;width:40%;min-height:auto;max-height:150px;left:50%;transform:translateX(-50%)}}aside .menu-btn{display:none;margin:0 auto;padding:10px;font-size:16px;text-transform:uppercase;line-height:16px;background:none;border:none}@media (max-width:540px){aside .menu-btn{display:flex}}aside .menu-btn svg{width:19px;height:15px;margin-right:6px}aside nav{position:fixed;padding:30px;transition:transform .35s ease,opacity .35s ease,visibility .35s ease}@media (max-width:540px){aside nav{top:220px;padding:0;opacity:0}}aside nav.hide{transform:translateX(-50%);opacity:0;visibility:hidden}aside nav a{display:inline-block;color:currentColor;text-decoration:none;padding:6px 12px;position:relative;transition:color .35s ease-out;font-size:1rem;line-height:1em}aside nav a:before{content:"";display:block;position:absolute;top:2px;left:0;width:100%;height:calc(100% - 4px);background:#000;transform:scaleX(0);transition:transform .35s ease-out;transform-origin:top left;z-index:-1}aside nav a.inactive{color:#999}aside nav a.active,aside nav a:hover{color:#fff}aside nav a.active:before,aside nav a:hover:before{transition:transform .35s cubic-bezier(.175,.885,.32,1.275);transform:scaleX(1)}aside ul{position:relative;width:100%;max-width:200px;margin:15px auto}@media (max-width:540px){aside ul{text-align:center}}aside ul li{line-height:1em}aside .sidebar{width:100%;max-width:250px;padding:25px;position:fixed;visibility:hidden;opacity:0;transform:translateX(50%);transition:transform .35s ease,opacity .35s ease,visibility .35s ease}@media (max-width:540px){aside .sidebar{display:none}}aside .sidebar.show{opacity:1;transform:translateX(0);visibility:visible}aside .sidebar h3{font-family:Playfair;font-weight:900;font-size:1.5rem;line-height:1.3em;margin-bottom:1.5rem}aside .sidebar p{font-size:.8rem;line-height:1.6em;margin-bottom:1.5rem}aside .sidebar .publish-date{font-family:Playfair;font-weight:900}aside .sidebar .time{display:flex;align-items:center;margin-bottom:15px;font-size:1rem}aside .sidebar .time svg{display:block;width:25px;height:25px;margin-right:5px}aside .sidebar .back-btn{width:40px;height:40px;border:3px solid #000;border-radius:50%;position:relative;background:none}aside .sidebar .back-btn:after{content:"BACK";position:absolute;display:block;top:8px;left:45px;font-size:1rem;font-weight:700;opacity:0;transform:translateX(5px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}aside .sidebar .back-btn svg{display:block;transition:transform .25s ease}aside .sidebar .back-btn:hover svg{transform:scale(1.2)}aside .sidebar .back-btn:hover:after{opacity:1;transform:translateX(0)}#app{width:70%;flex-grow:2}@media (max-width:540px){#app{width:100%;position:relative;top:220px;transition:top .65s cubic-bezier(.86,0,.07,1)}}#app.project-page{top:0}ul{list-style:none}.project-container{position:relative}.project-container .grid-sizer,.project-container .item{display:block;width:20%}@media (max-width:1280px){.project-container .grid-sizer,.project-container .item{width:33.3%}}@media (max-width:1024px){.project-container .grid-sizer,.project-container .item{width:50%}}.project-container .item img{width:100%;display:block;transition:transform .25s ease-out;backface-visibility:hidden}.project-container .item .content-container{position:relative;width:100%;height:100%;overflow:hidden}.project-container .item .title{position:absolute;bottom:40px;left:-15px;z-index:1;background:rgba(0,0,0,.9);padding:15px;max-width:80%;overflow:hidden;transform:scaleX(0);transform-origin:center left;transition:transform .2s cubic-bezier(.645,.045,.355,1) .1s}@media (max-width:540px){.project-container .item .title{padding:10px;bottom:15px;left:0}}.project-container .item .title h4{color:#ccc;font-size:.85rem;margin-bottom:8px;font-weight:500;text-transform:uppercase;line-height:1.45em;opacity:0;transition:opacity .25s ease 0s}.project-container .item .title span{display:inline-flex;background:hsla(0,0%,100%,.1);margin-right:5px;padding:2px 4px;text-transform:uppercase;border-radius:3px;font-size:.5rem;color:#aaa;opacity:0;transition:opacity .25s ease .1s}.project-container .item .icon{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:transform .25s ease-out}.project-container .item .icon:before{content:"";position:absolute;width:100%;height:100%}.project-container .item .icon svg{width:15%;opacity:.6}.project-container .item .icon.light svg{fill:#fff}.project-container .item .icon.dark svg{fill:#000}.project-container .item .icon.one:before{background:url(/back-pattern.a4f4c522.png) 50%}.project-container .item .icon.two:before{background:url(/black-twill.c2fd979d.png) 50%;opacity:.2}.project-container .item .icon.three:before{background:url(/bright-squares.4fc2a794.png) 50%}.project-container .item .icon.four:before{background:url(/carbon-fibre-big.04621435.png) 50%;opacity:.1}.project-container .item .icon.five:before{background:url(/cartographer.e207c17a.png) 50%;opacity:.8}.project-container .item .icon.six:before{background:url(/checkered-light-emboss.5fb4ee36.png) 50%}.project-container .item .icon.seven:before{background:url(/cream-pixels.8743a5b2.png) 50%}.project-container .item .icon.eight:before{background:url(/cubes.9fab6139.png) 50%;opacity:.8}.project-container .item .icon.nine:before{background:url(/diamonds.8f88bca1.png) 50%;opacity:.6}.project-container .item .icon.ten:before{background:url(/hexellence.3cbcaec5.png) 50%;opacity:.75}.project-container .item:hover{z-index:10}.project-container .item:hover .icon,.project-container .item:hover img{transition:transform .35s cubic-bezier(.175,.885,.32,1.275);transform:scale(1.15)}.project-container .item:hover .title{transform:scaleX(1);transition:transform .2s cubic-bezier(.215,.61,.355,1) 0s,opacity .2s ease 0s;z-index:1}.project-container .item:hover .title h4{opacity:1;transition:opacity .25s ease .15s}.project-container .item:hover .title span{opacity:1;transition:opacity .25s ease .2s}.project-container .memo{height:30vh}.project-container .project-iframe{position:fixed;top:0;z-index:2}.project-container .project-iframe iframe{border:none;width:100%;height:100%}.project-container .project-note{position:absolute;top:0;width:100%;min-height:100%;background:#fbfbfb;padding:60px;z-index:2}@media (max-width:540px){.project-container .project-note{padding:25px}}.project-container .project-note .content{width:100%;max-width:850px}.project-container .project-note .content li:before{content:"–";margin-right:.5em}.project-container .project-note .content iframe{border:none;margin-bottom:30px}@media (max-width:540px){.project-container .project-note h1{font-size:3rem}}.project-container .project-note a{color:currentColor}.project-container .project-note a:hover{text-decoration:none}.project-container .project-note .hljs{padding:1.8rem;border-radius:12px}@media (max-width:540px){.project-container .project-note .hljs{padding:1rem .8rem}}h1{font-family:Playfair;font-size:6rem;font-weight:900;line-height:1em;margin-bottom:2rem}@media (max-width:540px){h1{font-size:4rem}}li,p,ul{font-size:1.4rem;line-height:1.5em}@media (max-width:540px){li,p,ul{font-size:1rem}}p,ul{margin-bottom:2rem}@media (max-width:540px){p,ul{margin-bottom:1rem}}h3{font-size:1.8rem;margin-bottom:1rem;margin-top:2rem}@media (max-width:540px){h3{font-size:1.6rem}}code,pre{font-size:1.4rem;margin-bottom:2rem}@media (max-width:540px){code,pre{font-size:1rem;margin-bottom:1rem}}.view .content{padding:80px 80px 80px 30px;max-width:950px}@media (max-width:540px){.view .content{padding:0 25px 30px}}.view a{display:inline-block;text-decoration:none;background:#eee;color:currentColor;border-bottom:2px solid;transition:background .35s ease,border .35s ease,color .35s ease}.view a:hover{background:#333;border-bottom:2px solid #333;color:#eee}.view li:before{content:"–";margin-right:.5em}.about .content #interactivity{transform-origin:top right}.about .content #physics{transform-origin:bottom left}