section{position:relative;overflow:hidden;background:#fff;color:#222}header{position:fixed;width:100%;z-index:10;user-select:none;font-weight:normal}.button{background:none !important;border:none !important;outline:none !important;cursor:pointer;padding:0}nav#globalnav{display:block;width:100%;background:#fff;user-select:none;transition:.3s;transition-property:background,box-shadow}nav#globalnav.scrolled{background:rgba(245,245,245,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0px 0px 4px rgba(0,0,0,.25)}nav#globalnav .globalnav-content{position:relative;display:flex;max-width:1024px;height:48px;margin:auto;justify-content:space-between;transition:.3s}nav#globalnav .globalnav-content .globalnav-logo{position:absolute;top:0;left:0;padding:0 16px 0 6px;transition:.3s}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-button{position:relative;display:flex;align-items:center;font-size:14px}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-img-container{position:relative;width:48px;height:48px;overflow:hidden;animation:logo-translation .75s 1 ease-out;z-index:1}@keyframes logo-translation{from{transform:translateX(130px)}to{transform:translateY(0)}}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-img{animation:logo-frame-switching .125s steps(12, jump-none) 6 forwards}@keyframes logo-frame-switching{from{transform:translateY(0)}to{transform:translateY(-528px)}}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-text-container{position:relative}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-text-container .globalnav-logo-text.placeholder{visibility:hidden}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-text-container .globalnav-logo-text.animated{position:absolute;top:0;right:0;white-space:nowrap}nav#globalnav .globalnav-content .globalnav-logo .globalnav-logo-text-container .globalnav-logo-text-animated-container{position:absolute;top:0;right:0;width:0%;height:100%;overflow:hidden;animation:text-reveal .4875s 1 ease-out forwards}@keyframes text-reveal{from{width:0%}to{width:100%}}nav#globalnav .globalnav-content .globalnav-menu{position:absolute;top:0;right:0;height:48px}.globalnav-menu-button{width:100%;height:100%;padding:12px;box-sizing:border-box}.globalnav-menu-button .globalnav-menu-icon{stroke:#444;stroke-linecap:round}.globalnav-menu-button .globalnav-menu-icon path{transition:.3s}.globalnav-menu-button:hover .globalnav-menu-icon{stroke:#000}ul#globalnav-list{position:absolute;visibility:hidden;top:0;left:0;width:100%;margin:0;padding:0;flex-grow:1;list-style:none;padding-top:48px;pointer-events:none}ul#globalnav-list a.globalnav-list-link{display:flex;align-items:center;height:100%;padding:8px 48px;cursor:pointer;font-size:24px;box-sizing:border-box;user-select:none !important;text-decoration:none !important;color:#444 !important}ul#globalnav-list a.globalnav-list-link:hover{color:#000 !important}ul#globalnav-list .globalnav-list-item{position:relative;opacity:0;transition:opacity .6s,transform .3s;transform:translateY(-16px);pointer-events:all}ul#globalnav-list .globalnav-list-item:nth-child(1){transition-delay:.03s}ul#globalnav-list .globalnav-list-item:nth-child(2){transition-delay:.06s}ul#globalnav-list .globalnav-list-item:nth-child(3){transition-delay:.09s}ul#globalnav-list .globalnav-list-item:nth-child(4){transition-delay:.12s}ul#globalnav-list .globalnav-list-item:nth-child(5){transition-delay:.15s}ul#globalnav-list .globalnav-list-item:nth-child(6){transition-delay:.18s}ul#globalnav-list .globalnav-list-item:nth-child(7){transition-delay:.21s}ul#globalnav-list .globalnav-list-item:nth-child(8){transition-delay:.24s}ul#globalnav-list .globalnav-list-item:nth-child(9){transition-delay:.27s}ul#globalnav-list .globalnav-list-item:nth-child(10){transition-delay:.3s}@media only screen and (min-width: 700px){.globalnav-logo{position:relative}.globalnav-menu{display:none}ul#globalnav-list{position:relative;visibility:unset;display:flex;margin:0;padding:0;flex-grow:1;height:48px;justify-content:flex-end}ul#globalnav-list .globalnav-list-item{opacity:1;margin:0 8px;transition:none;transform:none}ul#globalnav-list a.globalnav-list-link{height:100%;padding:0 8px;font-size:14px}}@media only screen and (max-width: 700px){nav.expanded{background:#fff !important}nav.expanded .globalnav-content{height:100vh !important}nav.expanded .globalnav-logo{position:absolute;opacity:0;pointer-events:none}nav.expanded ul#globalnav-list{visibility:visible;display:flex;flex-flow:column;height:100vh}nav.expanded ul#globalnav-list .globalnav-list-item{opacity:1;transform:translateY(0)}nav.expanded ul#globalnav-list .globalnav-list-item::after{content:"";position:absolute;top:50%;right:0;width:10px;height:10px;border-width:1px 1px 0 0;border-style:solid;border-color:#000;opacity:0;transform:translateX(-25px) translateY(-50%) rotate(45deg);transition:.3s;pointer-events:none}nav.expanded ul#globalnav-list .globalnav-list-item:hover::after{opacity:1;transform:translateX(-21px) translateY(-50%) rotate(45deg)}nav.expanded path.menu-icon-upper{transform-origin:0px -6px;transform:translateY(6px) rotate(45deg)}nav.expanded path.menu-icon-middle{opacity:0}nav.expanded path.menu-icon-lower{transform-origin:0px 6px;transform:translateY(-6px) rotate(-45deg)}}main{display:flex;flex-flow:column nowrap;justify-content:stretch;padding-top:48px}.demo-container{position:relative;display:flex;flex-flow:column;flex:1;margin:8px;border-radius:8px;border:1px solid rgba(128,128,128,.5);overflow:hidden;font-size:14px;box-sizing:content-box;background:#fff}@media only screen and (min-width: 700px){.demo-container{margin:8px 32px 32px}}.demo-container iframe{border:none;margin:0;padding:0;flex:1}