.c-ruler{width:100%;height:100%;position:absolute;font-family:monospace;font-size:.8rem}.c-ruler__edge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:0;top:0;background:rgba(0,0,0,.5);color:#fff;z-index:1}.c-ruler__edge--vertical{height:100%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.c-ruler__edge--vertical>div{height:1px}.c-ruler__edge--horizontal{width:100%}.c-ruler__edge--horizontal>div{width:1px}.c-ruler__grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:0;top:0}.c-ruler__grid>div{background:#99e9ee}.c-ruler__grid--horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.c-ruler__grid--horizontal>div{height:1px;width:100%}.c-ruler__grid--vertical{width:100%;height:100%}.c-ruler__grid--vertical>div{height:100%;width:1px}@-webkit-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(255,0,0,.2);box-shadow:0 0 0 0 rgba(255,0,0,.2)}to{-webkit-box-shadow:0 0 0 1rem rgba(255,0,0,0);box-shadow:0 0 0 1rem rgba(255,0,0,0)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(255,0,0,.2);box-shadow:0 0 0 0 rgba(255,0,0,.2)}to{-webkit-box-shadow:0 0 0 1rem rgba(255,0,0,0);box-shadow:0 0 0 1rem rgba(255,0,0,0)}}.c-spot{position:absolute;z-index:5;cursor:pointer}.c-spot--default,.c-spot--pulse,.c-spot--pulse:after{border-radius:50%;background:red}.c-spot--pulse:after{content:"";display:block;width:100%;height:100%;cursor:pointer;-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite}.c-hotspots{position:absolute;width:100%;height:100%}body{font-family:sans-serif;color:#525252}header{margin-bottom:1rem}figure{margin:0;width:100%;position:relative;margin-bottom:1rem}img{width:100%;vertical-align:top}pre{background:#262626;color:#a0d1d2;overflow:auto}h1{margin-bottom:0}ul{padding-left:1.5rem}.c-tooltip{background:rgba(0,0,0,.8);padding:.25rem .5rem;border-radius:5px;color:#fff;font-size:.8rem;cursor:auto}.c-tooltip,.c-tooltip:after{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.c-tooltip:after{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}.c-tooltip--left{right:calc(100% + .5rem)}.c-tooltip--left:after{border-left:5px solid #000;left:100%}.c-tooltip--right{left:calc(100% + .5rem)}.c-tooltip--right:after{border-right:5px solid #000;right:100%}@-webkit-keyframes fade{0%{background:rgba(218,165,32,.6)}to{background:#daa520}}@keyframes fade{0%{background:rgba(218,165,32,.6)}to{background:#daa520}}.c-spot--custom:before{content:"";display:block;width:100%;height:100%;border-radius:50%;-webkit-animation:fade 2s infinite alternate;animation:fade 2s infinite alternate;border:2px solid #fff}