*,h1,h2,h3,h4,h5,h6,p,pre h3,small{margin:0}.code-preview:hover,.repo-meta:hover,a{text-decoration:none}.button,.more .toggle-menu,.preview,.repo-box,pre,svg:not(:root){overflow:hidden}.new,img{vertical-align:top}*{padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility;text-rendering:optimizeLegibility}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}article,fieldset,footer,header,nav,section{display:block}small{font-size:80%}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;color:#1e88e5}img{border-style:none}input::-webkit-contacts-auto-fill-button{display:none;pointer-events:none;opacity:0}@-webkit-keyframes wobble{0%,100%{-webkit-transform:rotate3d(-1,1,0,30deg);transform:rotate3d(-1,1,0,30deg)}25%{-webkit-transform:rotate3d(1,1,0,30deg);transform:rotate3d(1,1,0,30deg)}50%{-webkit-transform:rotate3d(1,-1,0,30deg);transform:rotate3d(1,-1,0,30deg)}75%{-webkit-transform:rotate3d(-1,-1,0,30deg);transform:rotate3d(-1,-1,0,30deg)}}@keyframes wobble{0%,100%{-webkit-transform:rotate3d(-1,1,0,30deg);transform:rotate3d(-1,1,0,30deg)}25%{-webkit-transform:rotate3d(1,1,0,30deg);transform:rotate3d(1,1,0,30deg)}50%{-webkit-transform:rotate3d(1,-1,0,30deg);transform:rotate3d(1,-1,0,30deg)}75%{-webkit-transform:rotate3d(-1,-1,0,30deg);transform:rotate3d(-1,-1,0,30deg)}}body{font:100%/1.5 Nunito,"Helvetica Neue",sans-serif;text-align:center;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(25%,#fff),color-stop(75%,#fff),to(rgba(255,255,255,0))),repeating-linear-gradient(-45deg,transparent 0,transparent 2.5em,#cfd8dc 0,#cfd8dc calc(2.5em + 1px)),repeating-linear-gradient(45deg,transparent 0,transparent 2.5em,#cfd8dc 0,#cfd8dc calc(2.5em + 1px));background-image:linear-gradient(90deg,rgba(255,255,255,0),#fff 25%,#fff 75%,rgba(255,255,255,0)),repeating-linear-gradient(-45deg,transparent 0,transparent 2.5em,#cfd8dc 0,#cfd8dc calc(2.5em + 1px)),repeating-linear-gradient(45deg,transparent 0,transparent 2.5em,#cfd8dc 0,#cfd8dc calc(2.5em + 1px))}main{text-align:left}.container{padding:1.5em}.wrapper{max-width:60em;margin:0 auto}.split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1.5rem}.button,.dot,.new,p code,pre h3{display:inline-block}.split-item{-webkit-box-flex:1;-ms-flex:1 0 15em;flex:1 0 15em}.split-item.collapse{-webkit-box-flex:0;-ms-flex:0 1;flex:0 1}.split-item.shrink{-webkit-box-flex:0;-ms-flex:0 1 15em;flex:0 1 15em}h1,h2,h3,p{margin:0 0 1rem}h1{font-size:3em;font-weight:800;line-height:1}.repo-title,h2{font-weight:400}h1.x-large{font-size:10em}h1.large{font-size:8em}h1.medium{font-size:4em}h1.small{font-size:3em}h2{font-size:2em}h3{font-size:1.2em;font-weight:600}a:hover{text-decoration:underline}a.external:after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 0 16 16' width='10' height='10'%3E%3Cpath d='M 3 1 L 11 1 L 11 9 M 11 1 L 1 11' fill='none' stroke='%231e88e5' stroke-linecap='round' stroke-width='1.5' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");opacity:.75}ol,ul{margin:1em 2em}.new{text-transform:uppercase;font-size:.75em;padding:.1em .5em;background:rgba(240,198,116,.5);font-weight:500;border-radius:1em;margin-left:.25em;cursor:default}.button{font-size:1em;padding:.5em 1em;margin:0 0 .5em;border:1px solid;background:#fff;border-radius:.5rem;color:#111;-webkit-transition:border-color .2s,-webkit-box-shadow .2s;transition:border-color .2s,-webkit-box-shadow .2s;transition:box-shadow .2s,border-color .2s;transition:box-shadow .2s,border-color .2s,-webkit-box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.code-preview pre,.dot,pre h3{-webkit-user-select:none}.button strong{font-size:1.25em}.button .split-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;align-items:center}.button .split-item:nth-child(2){border-left:1px solid #4caf50;padding-left:1em}code,pre{-moz-tab-size:2;-o-tab-size:2;tab-size:2;border-radius:.5rem}code.light,pre.light{border:1px solid #cfd8dc}pre{position:relative;font:100%/1.4 Monaco,monospace;padding:1rem;white-space:pre-wrap;word-break:break-word}.header h1,.menu,.repo-title{white-space:nowrap}pre h3{font:inherit;float:right;opacity:.5;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.code-preview pre,.dot{-moz-user-select:none;-ms-user-select:none;pointer-events:none}pre code{font:80%/1.4 Monaco,monospace;padding:0}@media (min-width:60em){pre code{font-size:90%}}pre .pre-subdivision{position:relative}code{font-size:1.2em;line-height:1.3;padding:0 .25em;border-radius:.25rem}code.is-on{-webkit-animation:copier 2s;animation:copier 2s}@-webkit-keyframes copier{0%{-webkit-filter:brightness(5);filter:brightness(5);background:#1d1f21}100%{background:rgba(29,31,33,0)}}@keyframes copier{0%{-webkit-filter:brightness(5);filter:brightness(5);background:#1d1f21}100%{background:rgba(29,31,33,0)}}code hr{margin:1em -1.25em;border:0;border-top:1px solid #4d4d4c}.dot{width:.75em;height:.75em;border-radius:25%;vertical-align:middle;margin-left:.25em;user-select:none}.light{background:#fff;color:#4d4d4c}.light .gray-code{color:#727370}.light .red-code{color:#c82829}.light .orange-code{color:#dd7a1c}.light .yellow-code{color:#c79c00}.light .green-code{color:#718c00}.light .blue-code{color:#4271ae}.light .purple-code{color:#8959a8}.light .aqua-code{color:#3e999f}.dark{background:#1d1f21;color:#c5c8c6}.dark ::-moz-selection{background:#969896}.dark ::selection{background:#969896}.dark .gray-code{color:#969896}.dark .red-code{color:#c66}.dark .orange-code{color:#de935f}.dark .yellow-code{color:#f0c674}.dark .green-code{color:#b5bd68}.dark .blue-code{color:#81a2be}.dark .purple-code{color:#b294bb}.dark .aqua-code{color:#8abeb7}.code-preview{cursor:text}.code-preview pre{font-size:smaller;max-height:12rem;user-select:none}.html-init .preview,.menu{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.code-preview pre:after{position:absolute;bottom:0;left:0;right:0;height:50%;content:"";background:-webkit-gradient(linear,left top,left bottom,from(rgba(29,31,33,0)),color-stop(90%,#1d1f21));background:linear-gradient(rgba(29,31,33,0),#1d1f21 90%)}.repo-box{background:#fafbfc;font-family:-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";border:1px solid rgba(197,200,198,.75);border-radius:.5rem;max-width:30em}.repo-title{position:relative;padding:.5em 1em}.repo-title:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' fill='%23586069'%3E%3Cpath fill-rule='evenodd' d='M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z'%3E%3C/path%3E%3C/svg%3E");margin-right:.5em;vertical-align:middle}.repo-title:after{position:absolute;top:.25em;right:.25em;width:2em;height:2em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' viewBox='0 0 16 16' version='1.1' width='32'%3E%3Cpath fill='%2324292e' fill-rule='evenodd' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E");opacity:.2;-webkit-transform:scale(.7);transform:scale(.7)}.repo-author,.repo-name{color:#0366d6}.repo-name{font-weight:700}.repo-meta{display:block;border-top:1px solid rgba(197,200,198,.5);background:#fff;padding:0 .5em;color:#586069}.repo-license,.repo-stars,.repo-updated{display:inline-block;padding:.5em}.repo-license:before,.repo-stars:before,.repo-updated:before{display:inline-block;width:1em;height:1em;margin-right:.5em;vertical-align:top}.repo-stars:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath fill='%23586069' fill-rule='evenodd' d='M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z'%3E%3C/path%3E%3C/svg%3E")}.repo-license:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath fill='%23586069' fill-rule='evenodd' d='M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z'%3E%3C/path%3E%3C/svg%3E%0A")}.repo-updated:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16'%3E%3Cpath fill='%23586069' fill-rule='evenodd' d='M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z'%3E%3C/path%3E%3C/svg%3E")}.menu{display:block;margin:.5em 0 0;user-select:none}.menu.right-align{text-align:right}.codepen-form{display:inline-block;vertical-align:top}.codepen-button,.copy-button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.25em;border:0;padding:.5em .75em;border-radius:.25rem;cursor:pointer;color:#fff;-webkit-transition:opacity .2s;background:rgba(96,125,139,.25);opacity:.5;margin:0 .5em 0 0;transition:opacity .2s}.right-align .codepen-button,.right-align .copy-button{margin:0 0 0 .5em}.options .codepen-button,.options .copy-button{color:#111}.codepen-button:focus,.codepen-button:hover,.copy-button:focus,.copy-button:hover{text-decoration:underline;opacity:1}.codepen-button:active,.copy-button:active{opacity:1}.codepen-button:before,.copy-button:before{display:inline-block;content:"";width:1em;height:1em;margin:0 .5em 0 0;background-size:cover}.preview,.tip-jar{display:-webkit-box}.copy-button.is-on{-webkit-animation:copier 2s;animation:copier 2s}.copy-button:before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"%3E%3Cpath d="M6 3L6 9L1 9L1 3 ZM4 3L4 1L9 1L9 7L6 7" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E')}.options .copy-button:before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"%3E%3Cpath d="M6 3L6 9L1 9L1 3 ZM4 3L4 1L9 1L9 7L6 7" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E')}.codepen-button:before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="20 0 26 26" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24"/%3E%3C/svg%3E%0A')}.options .codepen-button:before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="20 0 26 26" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24"/%3E%3C/svg%3E%0A')}.preview{position:relative;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1 0 12em;flex:1 0 12em;min-height:12em;padding:0 1em;margin:1rem 0;background:#eceff1;border-radius:.5rem}.preview.vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1em 0}.tip-button,.tip-jar{-webkit-box-align:center;-webkit-box-shadow:0 0 0 0 rgba(33,150,243,.25)}.preview h1{position:relative;margin:0}.preview h3{position:absolute;top:1rem;right:1rem;opacity:.25}.header{-ms-touch-action:none;touch-action:none}.header h1{display:inline;font-size:20vw}@media (min-width:35em){.header h1{font-size:8em}}@media (min-width:60em){.header h1{font-size:12em}}.header h1:nth-child(1){color:#ffc107}.header h1:nth-child(1) .z-layer:not(:first-child){color:#bf9105}.header h1:nth-child(2){color:#8bc34a}.header h1:nth-child(2) .z-layer:not(:first-child){color:#689238}.header h1:nth-child(3){color:#03a9f4}.header h1:nth-child(3) .z-layer:not(:first-child){color:#027fb7}.header h1:nth-child(4){color:#f44336}.header h1:nth-child(4) .z-layer:not(:first-child){color:#b73229}.header h1:nth-child(5){color:#3f51b5}.header h1:nth-child(5) .z-layer:not(:first-child){color:#2f3d88}.header h1:nth-child(6){color:#607d8b}.header h1:nth-child(6) .z-layer:not(:first-child){color:#485e68}.header h1:nth-child(7){color:#009688}.header h1:nth-child(7) .z-layer:not(:first-child){color:#007166}.header h1:nth-child(8){color:#ff9800}.header h1:nth-child(8) .z-layer:not(:first-child){color:#bf7200}.header h2{font-size:1.25em;margin:1em 0}.header .z-text{-webkit-transform:rotateX(20deg);transform:rotateX(20deg)}.share{display:inline-block;vertical-align:top;margin:0 5px}.download .button{border-color:#2196f3;-webkit-box-shadow:0 0 0 0 rgba(33,150,243,.25);box-shadow:0 0 0 0 rgba(33,150,243,.25)}.download .button strong{color:#2196f3}.download .button:hover{-webkit-box-shadow:0 0 0 .5em rgba(33,150,243,.25);box-shadow:0 0 0 .5em rgba(33,150,243,.25);color:#1971b6;text-decoration:none}.download p{margin:0}.tip-jar-wrapper{display:inline-block;width:10rem;float:left;margin:0 1em 1em 0}.tip-jar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:1px solid #2196f3;font-size:1.5em;padding:.25em .5em;border-radius:.5rem;color:#90a4ae;background:#fff;box-shadow:0 0 0 0 rgba(33,150,243,.25);-webkit-transition:-webkit-box-shadow .2s;transition:-webkit-box-shadow .2s;transition:box-shadow .2s;transition:box-shadow .2s,-webkit-box-shadow .2s}.tip-jar:hover{-webkit-box-shadow:0 0 0 .25rem rgba(33,150,243,.25);box-shadow:0 0 0 .25rem rgba(33,150,243,.25);color:#2196f3}.tip-jar:focus-within{-webkit-box-shadow:0 0 0 .25rem rgba(33,150,243,.5);box-shadow:0 0 0 .25rem rgba(33,150,243,.5)}.tip-jar .tip{width:100%;border:0;font:inherit;text-align:right}.tip-jar .tip:focus{outline:0}::-webkit-input-placeholder{color:#90a4ae}::-moz-placeholder{color:#90a4ae}:-ms-input-placeholder{color:#90a4ae}::-ms-input-placeholder{color:#90a4ae}::placeholder{color:#90a4ae}.tip-button{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.5em .75em;border-radius:.5rem;margin:.5em 0 0;font-weight:700;border:1px solid #2196f3;color:#2196f3;box-shadow:0 0 0 0 rgba(33,150,243,.25);cursor:pointer;-webkit-transition:background-color .2s,-webkit-box-shadow .2s;transition:background-color .2s,-webkit-box-shadow .2s;transition:background-color .2s,box-shadow .2s;transition:background-color .2s,box-shadow .2s,-webkit-box-shadow .2s}.tip-button:hover{-webkit-box-shadow:0 0 0 .25rem rgba(33,150,243,.25);box-shadow:0 0 0 .25rem rgba(33,150,243,.25);text-decoration:none;background:rgba(33,150,243,.125)}.tip-button:active{-webkit-box-shadow:0 0 0 .25rem rgba(33,150,243,.5);box-shadow:0 0 0 .25rem rgba(33,150,243,.5);-webkit-transition:0s;transition:0s}.tip-button img{max-height:1.25em;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 .75em 0 0;border-right:1px solid rgba(17,17,17,.25);padding:0 .75em 0 0}.initialization .split{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.html-init pre{margin:0 0 1em}.html-init pre.light{font-size:.85em}.html-init .preview{pointer-events:none;user-select:none;min-width:12em;padding:3em 0;margin:0 0 1em}.html-init .preview .z-text{-webkit-animation:wobble 12s ease-in-out infinite;animation:wobble 12s ease-in-out infinite;-webkit-transform:rotateY(30deg);transform:rotateY(30deg)}.html-init .preview .z-text .z-layer:nth-child(1){color:#ffc107;outline:#9e9e9e dashed 1px}.html-init .preview .z-text .z-layer:nth-child(2){color:#4caf50;outline:#9e9e9e dashed 1px}.html-init .preview .z-text .z-layer:nth-child(3){color:#3f51b5;outline:#9e9e9e dashed 1px}.html-init .preview .z-text:before{position:absolute;top:-50%;right:-50%;width:100%;height:100%;content:"";border-left:2px solid #4caf50;border-bottom:2px solid #f44336}.html-init .preview .z-text:after{display:block;content:"";position:absolute;top:50%;left:calc(50% - 1px);height:100%;background:#03a9f4;width:2px;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}.styling-example-primary .z-text{-webkit-transform:rotateX(15deg) rotateY(-30deg);transform:rotateX(15deg) rotateY(-30deg);font-family:Georgia,serif}.styling-example-primary .z-layer:first-child,.styling-example-primary [data-z]{color:#90a4ae}.styling-example-primary .z-layer{color:#455a64}.more .toggle-menu{margin-bottom:-.5em;padding-bottom:.5em}.more .toggle{-webkit-tap-highlight-color:transparent;font:100%/1 Nunito,sans-serif;display:inline-block;border-radius:.5rem;background:#cfd8dc;color:#37474f;border:0;padding:.75em 1em;cursor:pointer;position:relative;margin:0 0 .5em .5em}.more .toggle:hover{background:#b0bec5;color:#1d1f21}.more .toggle:active{background:#78909c}.more .toggle:focus{outline:0}.more .toggle:first-child{margin-left:0}.more .toggle.is-on{background:#1d1f21;color:#c5c8c6;margin-bottom:0;padding:.75em 1em 1.25em;border-radius:.5rem .5rem 0 0}.more .toggle.is-on:after,.more .toggle.is-on:before{display:block;content:"";position:absolute;bottom:0;width:2rem;height:2rem;border-radius:1rem;background:0 0}.more .toggle.is-on:before{right:100%;-webkit-box-shadow:1rem 1rem #1d1f21;box-shadow:1rem 1rem #1d1f21}.more .toggle.is-on:after{left:100%;-webkit-box-shadow:-1rem 1rem #1d1f21;box-shadow:-1rem 1rem #1d1f21}.more pre{margin:0 0 .25em}.more .tab{display:none}.more .tab.is-on{display:block}.more .preview{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:2.75em 1em 1em;-ms-flex-item-align:start;align-self:flex-start}.more .pause{background:0 0;position:absolute;top:.5rem;right:.5rem;cursor:default;pointer-events:none;border:0;color:#9e9e9e;padding:.75em 1em;border-radius:.5rem}.more .pause:before{width:1em;height:1.2em;content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="12" preserveAspectRatio="none" viewBox="0 0 10 10"%3E%3Cpath d="M.5 .5 3.5 .5 L 3.5 9.5 L .5 9.5 Z M 6.5 .5 L 9.5 .5 L 9.5 9.5 L 6.5 9.5 Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"%3E%3C/path%3E%3C/svg%3E');margin-right:.5em;opacity:.25}.more .pause.is-on{pointer-events:auto;cursor:pointer;color:#616161}.more .pause.is-on:hover{background:#cfd8dc}.more .pause.is-on:before{opacity:.5}.more .z-layer{-webkit-filter:brightness(.7);filter:brightness(.7)}.more .z-layer:first-child{-webkit-filter:brightness(1);filter:brightness(1)}.more .emoji-code-example,.more .img-code-example,.more .svg-code-example{-webkit-box-flex:1;-ms-flex:1 0 6em;flex:1 0 6em}.more .emoji-code-example .z-text,.more .img-code-example .z-text,.more .svg-code-example .z-text{-webkit-animation:wobble 6s ease-in-out paused infinite;animation:wobble 6s ease-in-out paused infinite}.more .emoji-code-example.is-on .z-text,.more .img-code-example.is-on .z-text,.more .svg-code-example.is-on .z-text{-webkit-animation-play-state:running;animation-play-state:running}.more .svg-code-example svg{width:100%;height:auto}.more .svg-code-example .z-text{-webkit-animation-delay:-1s;animation-delay:-1s}.more .img-code-example img{width:100%;padding:.5em;height:auto}.more .img-code-example .z-text{-webkit-animation-delay:-2s;animation-delay:-2s}.more .emoji-code-example{text-align:center;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;font-size:5em;line-height:1.2;letter-spacing:.2em;padding:.2em 0}.more .emoji-code-example .z-text{-webkit-animation-delay:-.5s;animation-delay:-.5s}.options .split{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.options .split p:last-child{margin:0}.options .split-item .option{margin:1.5em 0}.options .z-text{-webkit-transform:rotateX(30deg) rotateY(30deg);transform:rotateX(30deg) rotateY(30deg);-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}.options .preview{-ms-flex-item-align:stretch;align-self:stretch;padding:1.5em;margin:0}.options .preview:hover .z-text{-webkit-transform:rotateX(-30deg) rotateY(-30deg);transform:rotateX(-30deg) rotateY(-30deg)}.options .static{-ms-touch-action:none;touch-action:none}.options .static .z-text,.options .static:hover .z-text{-webkit-transform:none;transform:none}.depth-option .preview{color:#ffc107}.depth-option .preview .z-layer:not(:first-child){color:#bf9105}.layers-option .preview{color:#009688}.layers-option .preview .z-layer:not(:first-child){color:#007166}.perspective-option .preview{color:#ff9800}.perspective-option .preview .z-layer:not(:first-child){color:#bf7200}.fade-option .preview{color:#03a9f4}.fade-option .preview .z-layer:not(:first-child){color:#027fb7}.direction-option .preview{color:#fdd835}.direction-option .preview .z-layer:not(:first-child){color:#bea228}.direction-option .z-text{background:rgba(96,125,139,.5);padding:0 .5em;border-radius:.25rem}.direction-option [data-z-direction=backwards] .z-layer:first-child{-webkit-transform:translateZ(-1px)!important;transform:translateZ(-1px)!important}.event-option .preview{color:#8bc34a}.event-option .preview .z-layer:not(:first-child){color:#689238}.event-rotation-option .preview{color:#ff7043}.event-rotation-option .preview .z-layer:not(:first-child){color:#bf5432}.event-direction-option .preview{color:#5c6bc0}.event-direction-option .preview .z-layer:not(:first-child){color:#455090}.param{font-weight:400;opacity:.7}.param:before{content:" : "}