@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}#legend{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.7);padding:10px;z-index:1000;font-size:.5em}.chrome #legend .not-supported,.safari #legend .not-supported{display:none}#legend .not-supported{padding:5px;background:rgba(255,0,0,0.4);border:1px solid rgba(255,0,0,0.6);border-radius:10px}#legend p{margin-bottom:.5em}#legend p:last-child{margin-bottom:0}html{height:100%}body{font-family:'Crimson Text',georgia,times,serif;font-size:2em;line-height:1.3;overflow:hidden;background:#BBB -webkit-radial-gradient(50% 50%,circle cover,rgba(255,255,255,1),rgba(255,255,255,0.2));-webkit-user-select:none}code{font-family:'Ubuntu Mono',monospace}code.snippet,pre{display:block;position:relative;padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.5)}code.snippet .disabled,pre .disabled{opacity:.5;text-decoration:line-through}code.snippet .indent{white-space:pre}code.snippet .comment{font-size:.8em;color:#777}#view{width:500px;height:300px;padding:300px 0 0 500px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%)}.scale{width:0;height:0;position:relative;-webkit-transform:scale(0.3);-webkit-transition:-webkit-transform 1s ease-in-out;-webkit-transform-origin:top left}.rotate{width:0;height:0;position:absolute;top:0;right:0;left:0;bottom:0;-webkit-transform:rotate(0);-webkit-transition:-webkit-transform 1s ease-in-out;-webkit-transform-origin:top left}.translate{width:0;height:0;position:absolute;top:0;right:0;left:0;bottom:0;-webkit-transform:translate(0);-webkit-transition:-webkit-transform 1s ease-in-out;-webkit-transform-origin:top left}.step{position:absolute;width:800px;padding:20px;border-radius:20px;-webkit-transition:all 1s ease-in}.step h2{font-size:3.5em;text-shadow:2px 2px 10px rgba(50,50,50,.8);color:transparent;position:absolute;-webkit-transform-origin:bottom right;-webkit-transform:translate(-110%,-120%) rotate(-90deg)}.step h3{font-size:2.5em;margin-bottom:.2em}.step ul{margin-left:1em;font-size:1.2em}.step ul li{margin-bottom:.1em}.step ul li:before{content:"★ ";text-shadow:0 0 5px rgba(50,50,50,0.7);color:transparent}.step ul b{font-size:1.1em}b,strong{font-weight:bold}.target{-webkit-transition:-webkit-transform 1s ease-in-out;-webkit-transform-style:preserve-3d;margin:50px auto 150px;pointer-events:none;width:204px;height:204px;position:relative}img{max-width:100%;display:block;pointer-events:none}.image.target{box-shadow:0 0 15px #444}.face{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:inherit;width:204px;height:204px;font-size:2em;color:#FFF;line-height:185px;text-align:center;font-family:"Ubuntu Mono",monospace;text-shadow:-2px -1px 2px rgba(0,0,0,0.2)}#transforms2d .face{background:rgba(0,153,255,1)}#transforms3d .face{background:rgba(102,51,255,1)}.cube>.face{position:absolute;opacity:1}.cube>.face:nth-child(1){background:rgba(102,51,255,1);-webkit-transform:translate3d(0,0,102px) rotateY(0deg)}.cube>.face:nth-child(2){background:rgba(255,153,0,1);-webkit-transform:translate3d(0,0,-102px) rotateY(180deg)}.cube>.face:nth-child(3){background:rgba(255,0,0,1);-webkit-transform:translate3d(-102px,0,0) rotateY(-90deg)}.cube>.face:nth-child(4){background:rgba(51,255,0,1);-webkit-transform:translate3d(102px,0,0) rotateY(90deg)}.cube>.face:nth-child(5){background:rgba(255,255,0,1);-webkit-transform:translate3d(0,-102px,0) rotateX(90deg)}.cube>.face:nth-child(6){background:rgba(0,153,255,1);-webkit-transform:translate3d(0,102px,0) rotateX(-90deg)}.cube.target{width:204px;height:204px;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:visible}.axis{display:block;width:200px;height:200px;border:2px dashed #444;border-width:2px 0 0 0;position:absolute;top:101px;left:101px;-webkit-transform-style:preserve-3d;-webkit-transform:translateZ(1px)}.axis.y{border-width:0 0 0 2px}.axis.z{-webkit-transform:translateZ(1px) rotateY(-90deg);-webkit-transform-origin:top left}.axis:before{position:absolute;width:20px;height:20px;line-height:20px;text-align:center;top:0;right:0;content:" ";background:rgba(100,100,100,0.2);font-family:sans-serif;font-size:16px;color:#333}.axis.x:before{content:"X"}.axis.y:before{content:"Y";left:-20px;bottom:0;top:auto;right:auto}.axis.z:before{content:"Z"}.axis:after{content:" ";position:absolute;width:100%;height:100%;border-top:2px dashed #444;-webkit-transform:translate3d(0,-1px,-1px) rotateX(90deg);-webkit-transform-origin:top left}.axis.y:after{border-top:none;border-left:2px dashed #444;-webkit-transform:translate3d(-1px,0,-1px) rotateY(-90deg);-webkit-transform-origin:top left}#view.step-title .step{opacity:.2}#view.step-title .active{opacity:1}#title h1{font-weight:bold;text-align:center;font-size:6em;line-height:1;-webkit-transform-style:preserve-3d;-webkit-animation:d3 2s infinite alternate ease-in-out;-webkit-transform:perspective(1000px) rotateY(0deg);-webkit-transition:all 2s ease-in-out}#title h1 .short{display:inline-block;font-weight:normal;font-size:.27em;position:relative;top:.5em;-webkit-transform:translateZ(-50px)}#title h1 .transforms{display:inline-block;font-weight:normal;font-size:.6em;position:relative;top:-0.8em;-webkit-transform:translateZ(50px)}#title h1 .d3{display:inline-block;-webkit-transform:translateZ(20px)}@-webkit-keyframes d3{0%{-webkit-transform:perspective(1000px) rotateY(-10deg)}100%{-webkit-transform:perspective(1000px) rotateY(10deg)}}#title h1 .d{display:inline-block;-webkit-transition:all 1s ease-in-out}#title h1 .d.abbyss{-webkit-transform:perspective(400px) translate3d(0,0,-1000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);opacity:0}#support{width:760px}#support h2{font-size:2.5em}#support .browser{width:240px;height:240px;float:left;margin-right:20px;background:transparent no-repeat 50% 50%;margin-bottom:20px;position:relative;overflow:hidden}#support code{display:inline-block;background:rgba(255,255,255,0.5);border-radius:10px;padding:5px}#support .version{font-family:"Ubuntu",sans-serif;color:rgba(255,255,255,0.85);text-shadow:1px 1px 5px rgba(0,0,0,0.4);font-size:6em;position:absolute;bottom:-30px;right:-5px;letter-spacing:-0.1em;width:220px;text-align:right}#support .browser:last-child{margin-right:0}#support .safari{background-image:url(./safari.png)}#support .chrome{background-image:url(./chrome.png)}#support .android{background-image:url(./android.png)}#support .honeycomb{background-image:url(./honeycomb.png)}#support .firefox{background-image:url(./firefox.png)}#support .ie{background-image:url(./ie.png)}#support .opera{background-image:url(./opera.png)}#support .future,#support prefix,#support .version{opacity:1;-webkit-transition:opacity .5s ease-in}#support .disabled{opacity:.2}#support .disabled .version,#support .disabled .prefix{opacity:0}#transforms2d{width:600px}#transforms2d h2{font-size:3.5em}#transforms3d{width:940px}#transforms3d-box{width:960px}#transforms3d .snippet,#transforms3d-box .snippet{font-size:.9em}#transforms3d-box .cube{-webkit-transform-style:flat;-webkit-transform:perspective(600px) rotateX(330deg) rotateY(320deg)}#transforms3d-box .flip{position:relative;-webkit-transform:perspective(1000px) rotateX(0deg);-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s ease-in-out}#transforms3d-box .flip.back{-webkit-transform:perspective(1000px) rotateX(180deg)}#transforms3d-box .flip .snippet{-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d}#transforms3d-box .flip .back{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform:rotateX(-180deg)}#perspective{width:600px}#perspective .scene{background-color:#FFF;width:600px;height:400px;border:2px solid #AAA;-webkit-perspective:1000px;-webkit-perspective-origin:50% 50%;overflow:hidden;margin:20px auto;position:relative;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.2) inset;pointer-events:auto;-webkit-transform-style:flat;-webkit-transition:-webkit-perspective .5s ease-in-out}#perspective .cross{width:10000px;height:10000px;position:absolute;left:-4700px;top:-4800px;cursor:move}#perspective .cross:before,#perspective .cross:after{content:"";position:absolute;border:0 dashed #AAA;height:100%;width:100%;bottom:0;left:0}#perspective .cross:before{height:50%;border-top-width:2px}#perspective .cross:after{width:50%;border-right-width:2px}#perspective .top,#perspective .left,#perspective .right,#perspective .bottom,#perspective .front,#perspective .back{box-sizing:border-box;width:100px;height:100px;position:absolute}#perspective .left:before,#perspective .right:before{content:"";box-sizing:border-box;height:100px;width:10000px;border:2px solid #777;border-width:2px 0;position:absolute;top:0;left:101px}#perspective .left:before{left:auto;right:101px}#perspective .box .front{background:rgba(255,255,0,.5);-webkit-transform:translateZ(50px)}#perspective .box .top{background:rgba(255,153,0,.5);-webkit-transform:translate(0px,-50px) rotateX(90deg)}#perspective .box .right{background:rgba(255,0,0,.5);-webkit-transform:translate(50px,0px) rotateY(90deg)}#perspective .box .bottom{background:rgba(51,255,0,.5);-webkit-transform:translate(0px,50px) rotateX(-90deg)}#perspective .box .left{background:rgba(102,51,255,.5);-webkit-transform:translate(-50px,0px) rotateY(-90deg)}#perspective .box .back{background:rgba(0,153,255,.5);-webkit-transform:translateZ(-50px) rotateY(180deg)}#perspective .box:nth-child(2){position:absolute;top:50px;left:100px}#perspective .box:nth-child(3){position:absolute;top:250px;left:400px;-webkit-transform:translateZ(-300px);-webkit-transform-style:preserve-3d}#remember{width:900px}i{font-style:italic}a{text-decoration:none;color:inherit}#end{padding-top:600px;z-index:-100;text-align:center;pointer-events:none}#end .author{font-size:2em}.switch{cursor:pointer}label.slider{display:inline-block;position:relative;-webkit-user-select:none}label.slider .val{white-space:pre}label.disabled input{display:none}label.slider input[type=range]{-webkit-appearance:none;background:transparent;position:absolute;left:0;right:0;top:0;left:0;overflow:hidden}label.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:50px;height:35px;background-color:rgba(200,100,100,0.4);border-radius:5px;cursor:move;-webkit-transition:background-color 500ms ease-in-out}