:root{--input-color: #99A3BA;--input-border: #CDD9ED;--input-background: #fff;--input-placeholder: #CBD1DC;--input-border-focus: #275EFE;--group-color: var(--input-color);--group-border: var(--input-border);--group-background: #EEF4FF;--group-color-focus: #fff;--group-border-focus: var(--input-border-focus);--group-background-focus: #678EFE}.form-control{display:block;width:100%;height:100%;margin-right:0;padding:8px 16px;line-height:25px;font-size:14px;font-weight:500;font-family:inherit;border-radius:6px;-webkit-appearance:none;color:var(--input-color);border:1px solid var(--input-border);background:var(--input-background);transition:border .3s ease}.form-control::placeholder{color:var(--input-placeholder)}.form-control:focus{outline:none;border-color:var(--input-border-focus)}.input-group{position:relative;display:flex;width:100%}.input-group>span,.input-group .form-control{white-space:nowrap;display:block}.input-group>span:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group>span:first-child,.input-group .form-control:first-child{border-radius:6px 0 0 6px}.input-group>span:last-child,.input-group .form-control:last-child{border-radius:0 6px 6px 0}.input-group>span:not(:first-child),.input-group .form-control:not(:first-child){margin-left:-1px}.input-group .form-control{position:relative;z-index:1;margin-top:0;margin-bottom:0}.input-group>span{text-align:center;padding:8px 12px;font-size:14px;line-height:25px;color:var(--group-color);background:var(--group-background);border:1px solid var(--group-border);transition:background .3s ease, border .3s ease, color .3s ease}.input-group:focus-within>span{color:var(--group-color-focus);background:var(--group-background-focus);border-color:var(--group-border-focus)}body{min-height:100vh}body .input-group{max-width:360px}body .input-group:not(:last-child){margin-bottom:15px}#download,#download-ios{margin-top:10px;display:block;position:relative;width:160px;padding:0.8em;margin-left:auto;text-align:center;text-decoration:none;color:#fff;background:#795548}#download:hover,#download-ios:hover{opacity:0.8;cursor:pointer;text-decoration:none}#download-ios{display:none}input[type="range"]{-webkit-appearance:none;appearance:none;cursor:pointer;outline:none;background:#8acdff;width:100%;border-radius:10px}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;background:#53aeff;width:12px;height:12px;border-radius:50%;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.15)}input[type="range"]::-moz-range-thumb{background:#53aeff;width:12px;height:12px;border-radius:50%;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.15);border:none}input[type="range"]::-moz-focus-outer{border:0}input[type="range"]:active::-webkit-slider-thumb{box-shadow:0px 5px 10px -2px rgba(0,0,0,0.3)}.generator .setting,.generator .viewer{padding:10px}.generator .setting{display:block;background-color:#f1f1f1}.generator .setting .input-group{display:flex}.generator .setting .input-group .sub,.generator .setting .input-group .size,.generator .setting .input-group .form{height:40px}.generator .setting .input-group .sub,.generator .setting .input-group .size{width:20%;text-align:center}.generator .setting .input-group .form{width:60%}.generator .setting .input-group.tall .sub,.generator .setting .input-group.tall .size,.generator .setting .input-group.tall .form{height:120px}.generator .setting .setting-child{padding:5px}@media (min-width: 768px){.generator .viewer{position:fixed;top:0px;z-index:1}.generator .setting{right:0 !important}}.generator .viewer canvas{border:4px solid #000 !important}.generator .viewer div#canvas div.konvajs-content{margin-left:auto;margin-right:auto}.iphone #download{display:none}.iphone #download-ios{display:block}