@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap);*{padding:0;margin:0;border:0}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{height:100%;min-width:320px}body{color:#1b1818;line-height:1;font-family:Roboto;font-size:.875rem;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font-family:Roboto;font-size:inherit;line-height:inherit}button{cursor:pointer;color:inherit;background-color:transparent}a{color:inherit;text-decoration:none}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}body{background-color:#97b8dd}.lock body{overflow:hidden;-ms-touch-action:none;touch-action:none;-ms-scroll-chaining:none;overscroll-behavior:none}.wrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}@supports (overflow:clip){.wrapper{overflow:clip}}.wrapper>main{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.wrapper>*{min-width:0}[class*=__container]{max-width:120rem;margin:0 auto;padding:0 1.25rem}.checkbox{position:relative}.checkbox__input{position:absolute;width:0;height:0;opacity:0}.checkbox__input:focus-visible+.checkbox__label:before{-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}.checkbox__input:checked+.checkbox__label:before{background:#000}.checkbox__input:hover+.checkbox__label{color:#797979}.checkbox__input:hover+.checkbox__label:before{background-color:#848484}.checkbox__label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:10px;-webkit-transition:all .3s;transition:all .3s}.checkbox__label:before{-webkit-transition:all .3s;transition:all .3s;content:"";-ms-flex-item-align:start;align-self:flex-start;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;width:20px;height:20px;border:1px solid #181919}.checkbox__text{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}[class*=-ibg]{position:relative}[class*=-ibg] img{position:absolute;width:100%;height:100%;top:0;left:0;-o-object-fit:cover;object-fit:cover}[class*=-ibg--contain] img{-o-object-fit:contain;object-fit:contain}.header{position:relative;z-index:100}.header__wrapper{position:relative;min-height:3.4375rem;margin:1.25rem 0;display:-webkit-box;display:-ms-flexbox;display:flex;gap:1.25rem;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__wrapper::before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background-color:#97b8dd;z-index:1}.header__title{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;z-index:2;color:#f0f;font-size:3rem;font-weight:700;text-shadow:0 0 5px #000}.header__title span{color:#00cca2}.header__controls{position:relative;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.9375rem 1.25rem}.header__checkbox{font-size:1.5rem}.plane{margin-bottom:1.25rem}.plane__wrapper{position:relative;overflow:hidden;border-radius:2.5rem;margin:1.25rem 0}.plane__wrapper>svg{background-color:#b2c7de;width:100%;min-height:90vh;resize:vertical}.plane__wrapper>svg>text{fill:#fff;text-shadow:0 0 10px #000;font-weight:700;font-size:1.125rem;pointer-events:none;-webkit-transition:opacity .3s;transition:opacity .3s}.plane__wrapper>svg>circle{cursor:move;fill:#e30613;-webkit-transition:fill .3s;transition:fill .3s}.plane__wrapper>svg>circle.highlight{fill:#8a2be2!important}.plane__wrapper>svg>circle.highlight-hover{fill:#8b008b!important}.plane__wrapper>svg>line{stroke:#777;stroke-width:3;-webkit-transition:all .3s;transition:all .3s}.plane__wrapper>svg>line.highlight{stroke-width:5;stroke:#8a2be2!important}.plane__wrapper>svg>line.highlight-hover{stroke-width:5;stroke:#8b008b!important}.plane__animation-controls{position:absolute;bottom:0;right:50%;-webkit-transform:translate(50%,0);-ms-transform:translate(50%,0);transform:translate(50%,0)}.plane__items{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;gap:1.25rem 2.5rem}.plane__item.animationSpeed{-ms-grid-column-span:2;grid-column:span 2;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;align-items:center}.plane__item.animationSpeed>.plane__range{width:100%;max-width:48.125rem}.plane__name{font-size:1.5rem;margin-bottom:.625rem}.plane__range{cursor:pointer}.plane-checkboxes{display:-ms-grid;display:grid;-ms-grid-column-span:2;grid-column:span 2;grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr))}.plane-checkboxes__name{font-size:1.5rem;margin-bottom:.625rem}.animation-controls{background-color:#b4b4b4;padding:.625rem .9375rem;border-radius:.625rem;-webkit-transition:all .3s;transition:all .3s}.animation-controls.hidden{opacity:0;pointer-events:none}.animation-controls__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.9375rem}.animation-controls__button{display:inline-block;border-radius:.625rem;font-size:1.125rem;font-weight:700;min-width:5rem;padding:.3125rem .625rem;border:4px solid #00cca2;background-color:#353030;color:#fff;-webkit-transition:all .3s;transition:all .3s}.example{margin:1.875rem 0 4.375rem 0}.example__title{text-align:center;font-size:2.25rem;font-weight:700;color:#f0f;margin-bottom:1.25rem}.example__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.625rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.example__link{font-size:1.25rem;color:#353030;-webkit-transition:all .3s;transition:all .3s}.ioput__body{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;gap:1.25rem}.ioput__wrapper{overflow:hidden;margin-bottom:1.25rem}.ioput__input>.ioput__wrapper{border-radius:1.875rem 0 0 1.875rem}.ioput__input>.ioput__wrapper .input{border-radius:1.875rem 0 0 1.875rem;padding:.9375rem .625rem .625rem 2.1875rem}.ioput__output>.ioput__wrapper{border-radius:0 1.875rem 1.875rem 0}.ioput__output>.ioput__wrapper .output{border-radius:0 1.875rem 1.875rem 0;padding:.9375rem .9375rem .625rem .625rem}.input,.output{background-color:#b2c7de;color:#000;overflow-x:hidden;overflow-y:auto;display:block;width:100%;resize:none;height:15.625rem;outline:0;font-size:1.25rem}.output{font-size:1.625rem}.output #resultText{margin-bottom:.625rem}.output .hints>*{font-size:1.5rem;list-style:square;list-style-position:inside}.output .hints>:not(:last-child){margin-bottom:.5rem}.output .path{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.625rem}.output .path>*{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:.4375rem;font-size:1.5rem;list-style:none;-webkit-transition:all .3s;transition:all .3s}.output .path>.highlight{color:#a853a8;-webkit-transition:color .3s;transition:color .3s}.output .path>.highlight-hover{color:#8b008b!important}.output .path>:first-child{margin-right:0}.output .path>:first-child::before{display:none}.output .path>::before{content:"=>";display:inline-block}.btn{font-size:1.5rem;font-weight:700;color:gray;background-color:#353030;border-radius:25px;cursor:default;padding:.9375rem 1.875rem;-webkit-transition:all .3s;transition:all .3s}.input-tool{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1.25rem}.output-tool{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:1.25rem}.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;-webkit-transform-style:flat;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border-radius:4px;border:1px solid #d3d3d3;-webkit-box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #d9d9d9;border-radius:3px;background:#fff;cursor:default;-webkit-box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb}.noUi-active{-webkit-box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#e8e7e6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-webkit-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#ccc}.noUi-marker-sub{background:#aaa}.noUi-marker-large{background:#aaa}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);-ms-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);-ms-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);-ms-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);-ms-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}@media (min-height:56.25rem){.plane__wrapper>svg{min-height:56.25rem}}@media (any-hover:hover){.animation-controls__button:hover{color:#f0f}.example__link:hover{color:#7f7f7f}.output .path>:hover{color:#f0f}.btn:not(:disabled){cursor:pointer;color:#353030;background-color:#00cca2}.btn:not(:disabled):hover{color:#f0f}}