%3C/svg>');background-repeat:no-repeat;background-position:center;}h1, p{ -webkit-user-select:none;user-select:none;cursor:default;}h1{ font-size:30px;line-height:1;font-weight:600;margin-top:20px;}h1 span{ font-weight:200;color:rgba(0, 0, 0, 0.4);}a{ color:inherit;}label a{ color:#666;font-weight:500;}label a:hover{ opacity:0.75;}label{ font-size:13px;line-height:1.5;color:rgba(0, 0, 0, 0.6);}strong{ font-weight:500;color:black;}p{ color:rgba(0, 0, 0, 0.6);font-size:13px;line-height:1.5;}h1 + p{ margin-top:16px;}p.subtitle{ color:#111;font-size:16px;}form{ display:flex;justify-content:center;margin-top:25px;}form input{ max-width:300px;height:50px;font-size:16px;line-height:1.5;border-radius:4px;background:#fff;color:#111;border:none;box-shadow:inset 0 0 0 1px #f0f0f0;padding:12px 14px;margin:0;flex-grow:1;transition:all 0.2s;}input + input{ margin-left:10px;}form input:focus{ outline:0;box-shadow:inset 0 0 0 1px #05f;}form input::-webkit-input-placeholder{ color:rgba(0, 0, 0, 0.3);}form .invalid, form .invalid:focus{ color:#f55;box-shadow:inset 0 0 0 1px #f44;}form .invalid::-webkit-input-placeholder{ color:#f55;}form .firstname, form .lastname{ width:140px;}.button{ position:relative;width:auto;height:40px;padding:10px 20px;font-size:14px;line-height:1;border-radius:4px;font-weight:500;outline:none;border:none;color:#fff;background:#05f;transition:opacity 0.2s;opacity:1;pointer-events:all;}.button:active{ background:#0050f0;}.button div.spinner{ display:none;}.locked .button{ pointer-events:none;opacity:0.4;}.loading .button div.spinner{ display:block;}.loading .button{ text-indent:-9999px;}.checks{ display:flex;margin-top:25px;}.checkbox:first-child{ flex-grow:1;}.checkbox{ display:flex;justify-content:flex-start;}.checkbox label{ font-size:11px;line-height:1.6;text-align:left;margin-left:5px;}input[type="checkbox"]{ display:inline-block;position:relative;width:12px;height:12px;border-radius:2px;border:1px solid #ddd;background-color:#fff;-webkit-appearance:none;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;}input[type="checkbox"]:checked{ background-color:#05f;border-color:#0050f0;background-image:url('data:image/svg+xml;utf8,%3Csvg width=%228%22 height=%228%22 viewBox=%220 0 8 8%22 xmlns=%22http://www.w3.org/2000/svg%22>%3Ctitle>icon-checkmark%3C/title>%3Cpath d=%22M1 3l2 2 4-4v2L3 7 1 5z%22 fill=%22%23FFF%22 fill-rule=%22evenodd%22/>%3C/svg>');transition:all 0.2s ease;}.disabled input{ opacity:0.5;}.spinner{ position:absolute;top:50%;left:50%;width:18px;height:18px;margin:0 auto;border-radius:50%;background:#fff;background:linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 60%);animation:load 0.8s infinite linear;transform:translateZ(0);margin-left:-9px;margin-top:-9px;}.spinner:before{ content:"";position:absolute;top:0;left:0;width:50%;height:50%;background:#fff;border-radius:100% 0 0 0;}.spinner:after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:14px;height:14px;background:#05f;border-radius:50%;margin:auto;}.create.showRequired #agree ~ label, .create.showRequired #agree ~ label a{ color:#f44 !important;}.create .step-top > div{ width:400px;}.check .step-top > div{ width:450px;flex-grow:0;}.check .button{ display:none;}.wait .button{ display:none;}.wait p{ max-width:380px;}.no-connection p{ max-width:280px;margin:16px auto 30px;}.no-connection .error{ margin-top:16px;}.sketch .step-top > div{ width:340px;}.sketch .shortcuts{ display:flex;margin-top:30px;justify-content:center;align-items:center;cursor:default;}.sketch .shortcuts .key{ width:40px;height:40px;color:#777;font-size:20px;border-radius:4px;box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.1);padding:10px;animation-fill-mode:forwards;opacity:0;cursor:default;}.sketch .shortcuts .key + .key{ margin-left:5px;}.sketch .shortcuts .arrow{ padding:0 20px;opacity:0;animation:dash 1s 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}.sketch .shortcuts .key:nth-child(1){ animation:keypress 0.4s 0.2s forwards;}.sketch .shortcuts .key:nth-child(2){ animation:keypress 0.4s 0.3s forwards;}.sketch .shortcuts .key:nth-child(4){ animation:keypress 0.4s 0.9s forwards;}.sketch .shortcuts .key:nth-child(5){ animation:keypress 0.4s 1s forwards;}.tutorial .subtitle{ max-width:355px;margin:16px auto 0;}.tutorial .animation span{ width:54px;height:54px;background:#05f;display:inline-block;border-radius:50%;margin-bottom:16px;animation:appear 0.8s 1.6s ease-in-out forwards;}.tutorial .animation span:first-child{ margin-right:14px;border-radius:4px;animation:rotate 1s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;}.skip{ display:none;}.tutorial .skip{ color:#999;display:inline-block;margin-right:5px;background:#fff;box-shadow:inset 0 0 0 1px #eee;}.tutorial .skip:active{ color:rgba(0, 0, 0, 0.6);}@keyframes load{ 0%{ transform:rotate(0deg);}100%{ transform:rotate(360deg);}}@keyframes dash{ 0%{ opacity:0;transform:translateX(-10px);}100%{ opacity:1;transform:translateX(0);}}@keyframes keypress{ 0%{ opacity:0;transform:translateY(-2px);}100%{ opacity:1;transform:translateY(0);}}@keyframes rotate{ 0%{ transform:rotate(0);}100%{ transform:rotate(360deg);}}@keyframes appear{ 0%{ transform:scale(1);}50%{ transform:scale(1.2);}100%{ transform:scale(1);}}
Copy and paste artboards, groups, shapes, text, paths, and symbols directly from Sketch.