body{background-color:#558f99;color:#fff;font-family:sans-serif;box-sizing:border-box;width:700px;padding:20px;margin:0 auto}code{background-color:rgba(0,0,0,.75);color:#d9d9d9;letter-spacing:1px;display:block;width:100%;max-height:25vh;padding:20px;border-radius:10px;box-shadow:0 5px 70px 0 rgba(20,20,20,.3);text-overflow:ellipsis;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;line-height:1.5em}code::-webkit-scrollbar{display:none}
.preview-menu{display:flex;gap:20px;margin-top:30px}.preview-menu__item{background-color:rgba(255,255,255,.1);position:relative;box-sizing:border-box;width:33%;padding:40px 20px;border-radius:10px;overflow:hidden}.preview-menu__item:hover{background-color:rgba(255,255,255,.3);font-weight:bold;cursor:pointer}.preview-menu__iframe{position:absolute;top:0;right:0;width:150%;height:300%;border:none;opacity:.5;transform:scale(0.3333333333);transform-origin:top right;filter:blur(1px);pointer-events:none}
.nav{border-bottom:solid 1px rgba(255,255,255,.3);margin-bottom:40px}.nav__link{color:inherit;text-decoration:none;display:inline-flex;padding:15px 10px}.nav__link.is-active{font-weight:bold}