*{box-sizing:border-box}body{color:#333;margin:0;padding:0;height:100%;font:16px/1.5 sans-serif}header h4:before{display:inline-block;content:'';background:transparent url('../../media/dino.svg') 0 0 no-repeat;margin-right:.6em;width:45px;height:45px;vertical-align:middle}header h4{display:inline-block;margin:0;font-size:.9rem;font-weight:700}.user-message{display:none;position:absolute;top:30px;left:50%;background-color:#333;color:#fff;padding:.5em;border-radius:4px;font-size:14px;opacity:1;transition:opacity .5s;z-index:4}.fade-in{animation:fadein .5s}.fade-out{animation:fadeout .5s}.hide{opacity:0}.hidden{display:none}.show{display:block}.visually-hidden{position:absolute!important;height:1px;width:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;border:0}@media screen and (min-width:47.9375em){header h4{font-size:1.1rem}}@media screen and (min-width:63.9375em){header h4{font-size:1.4rem}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}pre[class*=language-]{background-image:none;margin:0;border:0;box-shadow:none;overflow:auto}pre[class*=language-]>code{background:0 0;border:none;box-shadow:none}pre[class*=language-]:after,pre[class*=language-]:before{width:0}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:transparent}code[class*=language-]{max-height:240px;overflow:auto}.line-numbers .line-numbers-rows{background-color:#f5f9fa;border-right:0}.line-numbers-rows>span:before{color:#333}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#58636d}.token.attr-name,.token.builtin,.token.char,.token.function,.token.inserted,.token.selector,.token.string{color:#2545a7}.example-choice-list{padding:0}.editor-wrapper{width:100%;overflow:hidden}.example-choice-list.large.live,.example-choice-list.live{float:left;padding:0 2em 0 0;width:60%;text-align:right;overflow:auto}.example-choice-list.live{height:300px;max-height:300px}.example-choice-list,.example-choice-list.large{float:none;width:auto}.output{height:300px;overflow:hidden}.output-header{margin:0;padding:0 0 .5em 0}.output{position:relative;float:right;background-color:#fff;width:40%;overflow:hidden;box-shadow:2px 2px 5px -2px rgba(0,0,0,.2);padding:1em}.output section{height:100%;text-align:center}.live .example-choice{position:relative;z-index:1;display:block;margin:.2em 0;width:100%;border:2px solid #d6dee0;border-left:5px solid #d6dee0;font-size:14px;cursor:pointer;transition:background-color .2s ease-out,border .2s ease-out}.live .example-choice{background-color:#fff}.live .example-choice pre{padding:0 10px}.live .example-choice.selected pre{padding:0 40px 0 10px}.live .example-choice code{padding:10px 0}.example-choice-list .example-choice:first-child{margin-top:0}.example-choice:hover{border-color:#666;border-left-color:#666}.example-choice:hover .copy{display:block}.live .example-choice:before{content:'';position:absolute;top:50%;right:-10px;z-index:1;opacity:0;transition:all .2s ease-out;transform:translateY(-50%);border-left:10px solid #1b76c4;border-top:10px solid transparent;border-bottom:10px solid transparent}.example-choice.selected:before{opacity:1;right:-1.5em}.example-choice.selected{border-color:#1b76c4;border-left-color:#1b76c4;box-shadow:inset 0 2px 2px -2px rgba(0,0,0,.2);transition:height .5s;cursor:text}.example-choice.invalid:before{right:-1.8em;background:transparent url('../media/warning.svg') 0 0 no-repeat;background-size:20px;border:none;width:20px;height:20px}.example-choice.invalid{border-color:#ffb800;border-left-color:#ffb800}.example-choice>code{display:inline-block;width:90%}.reset{float:right;background-color:#53caff;color:#333;margin:0 0 .5em;padding:.7em .9em;border:none;max-width:100px;font-size:16px;font-weight:700;line-height:1;cursor:pointer}.reset:hover{background-color:#333;color:#fff}.copy{position:absolute;top:0;right:0;background:#eee url('../media/clippy.svg') 50% 50% no-repeat;background-size:15px;padding:6px 12px;border:1px solid #d5d5d5;border-top:0;border-right:0;width:30px;height:30px;vertical-align:middle;cursor:pointer;display:none}.transition-all{transition:all .3s ease-in}[contenteditable]:focus{outline:0 solid transparent}.example-choice.selected:focus{outline:0 solid transparent}.small-desktop-and-below .example-choice-list,.small-desktop-and-below .example-choice-list.large.live,.small-desktop-and-below .example-choice-list.live,.small-desktop-and-below .output{float:none;padding:0;width:100%;height:auto}.small-desktop-and-below .example-choice-list.live{max-height:225px;overflow:auto}.small-desktop-and-below .output,.small-desktop-and-below .output.large{position:relative;height:225px}.small-desktop-and-below .example-choice-list{padding-right:.7em;margin-bottom:1em}.small-desktop-and-below .example-choice:before{content:none}.small-desktop-and-below .live .example-choice{min-height:40px}.small-desktop-and-below .copy{display:none}@supports (display:flex){.example-choice-list.live{display:flex;flex-direction:column}.live .example-choice{display:flex;align-items:center;flex-grow:1}.live .example-choice pre{flex-grow:1}.reset{align-self:flex-end}.output section{display:flex;align-items:center;justify-content:center}.output section.flex-column{flex-direction:column;align-items:initial}.output section.display-block{display:block}.output section img{flex-grow:0}.output section.hidden{display:none}}