.app{--app-fz-large: 1.25rem;--app-fz-small: 0.75rem;--app-bdc: #DDD;--app-inp-brd: 1px solid #DDD;--app-inp-bdrs: 0.25rem;--app-inp-ff: monospace;--app-inp-fz: 1rem;--app-inp-h: 1.75rem;--app-inp-p: 0.25rem 0;--app-lbl-c: #606060;--app-lbl-m: 0.5rem 0.1rem 0 0.1rem;--app-m-unit: 1rem;--app-maw: 64rem;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;margin:var(--app-m-unit) auto;max-width:var(--app-maw);padding:0 calc(var(--app-m-unit)/2)}.app *{box-sizing:border-box}.app input:focus{outline:1px solid #4d90fe}.app .c-rng{--rng-h: 0.25rem;--rng-m: 1rem 0;--rng-thumb-h: 1.5rem;--rng-thumb-w: 1.5rem}.app .c-rng__output{--rng-output-bgc: transparent;--rng-output-c: #444;float:right;left:auto;position:relative!important;text-align:right;top:1em!important}.app .c-rng--output{margin-bottom:0}.app__button{background:#eee;border:1px solid #ccc;border-radius:.25rem;margin-top:calc(var(--app-m-unit)/2);padding:.35rem;width:100%}.app__button-group button{flex:0 0 calc(50% - (var(--app-m-unit)/2))}.app__code{background-color:#1e1e1e;border:var(--app-inp-brd);border-radius:var(--app-inp-bdrs);color:#b5cea8;flex:0 0 100%;font-family:monospace;font-size:small;min-height:4rem;padding:.5rem;resize:none;tab-size:2;width:100%;word-break:break-all}.code--boolean{color:#00bfff}.code--key{color:#add8e6}.code--null{color:#f08080}.code--number{color:#90ee90}.code--string{color:#ffa07a;white-space:initial}.app__controls,.app__preview{flex:1 1 100%}@media screen and (min-width:767px){.app__controls,.app__preview{flex:0 1 calc(50% - (var(--app-m-unit)/2))}}.app__edit{display:flex;flex-wrap:wrap;justify-content:space-between}.app__fieldset{display:flex;flex:0 0 100%;justify-content:space-between;width:100%}.app__fieldset--topspace{margin-top:calc(var(--app-m-unit) * 2)}.app__file-drop{bottom:0;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:-1}.app__file-drop::after{color:#fff;content:'DROP';font-size:6rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.app__header{align-items:center;color:#222;display:flex;font-size:2rem;margin-bottom:.75rem}.app__header code,.app__subheader code{background-color:#ddd;margin:0 .5ch;padding:0 .5ch}.app__icon{stroke-width:1.5;stroke:#2c3e50;fill:none;stroke-linecap:round;stroke-linejoin:round;height:2.5rem;width:2.5rem}.app__img{bottom:0;height:100%;left:0;object-fit:cover;position:absolute;right:0;top:0;width:100%}.app__img-wrapper{margin:0;padding:0;position:relative}.app__img-wrapper::after{content:'';display:block;padding-bottom:56.25%}.app__img--drag+.app__file-drop,.app__img--drag .app__file-drop{background-color:rgba(0,0,0,.5);opacity:1;z-index:2}.app__label{color:var(--app-lbl-c);display:flex;flex:1;flex-flow:column;font-size:var(--app-fz-small);margin:var(--app-lbl-m);text-align:center}.app__label button,.app__label input:not([type=range]),.app__label select,.app__label textarea{border:var(--app-inp-brd);border-radius:var(--app-inp-bdrs);font-family:var(--app-inp-ff);font-size:var(--app-inp-fz);height:var(--app-inp-h);padding:var(--app-inp-p);text-align:center;width:100%}.app__label input[type=text],.app__label textarea{-webkit-appearance:none}.app__label select{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDdsLTQtNC00IDR6TTQgMTBsNCA0IDQtNHoiLz48L3N2Zz4=);background-position:calc(100% - 0.5rem) 50%;background-repeat:no-repeat;background-size:1rem;padding:0 1rem;text-align:center;text-align-last:center;-webkit-appearance:none}.app__label textarea{min-height:4rem;resize:vertical;text-align:left}.app__label button{font-size:x-small}.app__label--del{flex:0 0 2rem}.app__label--del button,.app__button--reset{background-color:crimson;color:#fff}.app__label--checkbox{flex:0}.app__label--checkbox span{display:block;height:100%;position:relative}.app__label--checkbox span::before{border:var(--app-inp-brd);border-radius:var(--app-inp-bdrs);bottom:0;color:#ccc;content:"✓";display:block;font-family:var(--app-inp-ff);font-size:var(--app-inp-fz);height:auto;left:50%;margin:0 auto;padding:var(--app-inp-p);position:absolute;top:0;transform:translateX(-50%);width:1.5rem}.app__label--checkbox input:checked+span::before{background-color:#606060;color:#fff}.app__label--checkbox input:focus+span::before{box-shadow:0 0 0 1px #4d90fe}.app__label--radio>input+span,.app__preset{background-color:#ddd;border:0;border-radius:.25rem;display:inline-block;font-family:monospace;margin:.5rem .25rem 0 0;padding:.25rem .45rem;user-select:none;white-space:nowrap}.app__label--radio>input:checked+span{background-color:#606060;color:#fff}.app__label--range{display:block;position:relative}.app__label--range span{top:.5rem;color:gray;font-size:x-small;position:absolute}.app__label--auto{flex:1 0 auto}.app__label-group{align-items:center;border-color:#404040;border-style:solid;border-width:1px 1px 1px 0;flex:1;font-size:var(--app-fz-small);margin:0 0 calc(var(--app-m-unit,1rem)/4) 0;padding:.35em .75em;text-align:center;user-select:none}.app__label-group:first-of-type{border-left-width:1px;border-radius:var(--app-inp-bdrs) 0 0 var(--app-inp-bdrs)}.app__label-group:last-of-type{border-radius:0 var(--app-inp-bdrs) var(--app-inp-bdrs) 0}.app__subheader,.app__subheader--mt{align-items:center;color:#222;display:flex;font-size:1.25rem}.app__subheader--mt{margin-top:1rem}.app__text{font-size:.75rem;margin:0 0 .75rem}.app__details{border-top:1px solid #ddd;margin-top:var(--app-m-unit)}.app__summary{font-size:var(--app-fz-large);margin:calc(var(--app-m-unit)/2) 0;outline:none}.app__summary:focus span{text-decoration:underline}.app kbd{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;box-shadow:0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7) inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;position:relative;top:-2px;white-space:nowrap}.app__theme-btn{align-items:center;background-color:#eee;border-radius:.25rem;color:#333;display:flex;font-family:ui-monospace,monospace;margin:0 0 .5rem;padding:.25rem .5rem;text-decoration:none}.app__theme-btn:hover{background-color:#ccc}.app__theme-btn svg{margin-right:.25rem}.u-hidden,[hidden]{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:inset(1px);display:block;height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}