recreate the svg editor from this html code as a standalone page: Recreate the editor in the html code provided without restrictions so the user can export svg files and use all the other options without upgrading: <html lang="en" class="read-only"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cake Topper Generator</title>
    <meta name="description" content="Quickly customize a cake topper with your own text in any font. The text is automatically connected, including dots on i's. You can also customize the size and positioning of the skewer. 🥳">
    <meta property="og:title" content="Cake Topper Generator">
    <meta property="og:description" content="Quickly customize a cake topper with your own text in any font. The text is automatically connected, including dots on i's. You can also customize the size and positioning of the skewer. 🥳">
    <meta property="og:image" content="https://api.cuttle.xyz/social/project-image/Lq1sMetUmSul">
    <meta property="og:url" content="">
    <meta name="twitter:card" content="summary_large_image">

    <base href="/">
    <link rel="icon" type="image/png" href="/editor/favicon.png">

    <!-- Clicky analytics -->
    <script>
      var clicky_site_ids = clicky_site_ids || [];
      clicky_site_ids.push(101284442);
    </script>
    <script async="" src="//static.getclicky.com/js"></script>

    <!-- Posthog analytics -->
    <script>
      // prettier-ignore
      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    </script>

    <!-- Google Sign In Client Library-->
    <script src="https://accounts.google.com/gsi/client" async="" defer=""></script>

    <!-- Rewardful -->
    <script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
    <script async="" src="https://partners.cuttle.xyz/rw.js" data-rewardful="eeb660"></script>

    <!-- Cuttle Page Load Monitor -->
    <script>
      window.cuttle_pageLoadData = {
        url: window.location.href,
        userAgent: window.navigator.userAgent,
        startTime: Date.now(),
        checkpoints: [],
        errors: [],
      };
      const apiBaseUrl = "https://api.cuttle.xyz";
      const logEvent = (eventName, metadata) => {
        const data = new Blob([JSON.stringify({ eventName, metadata })], { type: "application/json; charset=utf-8" });
        navigator.sendBeacon(apiBaseUrl + "/api/v1/logEvent", data);
      }
      const logPageLoadError = (event) => {
        const data = window.cuttle_pageLoadData;
        if (typeof data === "object" && Array.isArray(data.errors)) {
          const error = { time: Date.now() };
          if (event instanceof ErrorEvent) {
            // There was an error in a script.
            error.message = event.message;
            error.filename = event.filename;
            error.line = event.lineno;
          } else if (event instanceof PromiseRejectionEvent) {
            // A error happened inside of an async function.
            error.message = event.reason;
          } else if (event.target instanceof HTMLScriptElement) {
            // A script failed to load.
            error.filename = event.target.src;
          }
          data.errors.push(error);
        }
      };
      const isAppInteractive = () => window.cuttle_pageLoadData.checkpoints.some(checkpoint => checkpoint.name === "mount app");
      const onVisibilityChange = () => {
        if (document.visibilityState !== "hidden") return;
        if (window.cuttle_pageLoadData.sessionDuration) return;
        const endTime = Date.now();
        const sessionDuration = endTime - window.cuttle_pageLoadData.startTime;
        if (sessionDuration < 10000) return;
        window.cuttle_pageLoadData.sessionDuration = sessionDuration;
        if (!isAppInteractive()) {
          // The page still wasn't interactive after 10s..
          logEvent("slow page load", window.cuttle_pageLoadData);
        }
      };
      window.addEventListener("error", logPageLoadError, true);
      window.addEventListener("unhandledrejection", logPageLoadError);
      window.addEventListener("visibilitychange", onVisibilityChange);
    </script>

    <style>
      body {
        background-color: #f6f6f6;
      }
      #loading-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        margin-left: -20px;
        height: 40px;
        margin-top: -20px;
      }
      #loading-indicator {
        position: absolute;
        box-sizing: border-box;
        top: 50%;
        left: 50%;
        width: 64px;
        margin-left: -32px;
        height: 64px;
        margin-top: -32px;
        border-radius: 50%;
        border: 4px solid #ddd;
        border-top-color: #aaa;
        animation: loading-indicator 1s linear infinite;
      }
      @keyframes loading-indicator {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  <style id="googleidentityservice_button_styles">.qJTHM{-webkit-user-select:none;color:#202124;direction:ltr;-webkit-touch-callout:none;font-family:"Roboto-Regular",arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;overflow:hidden;-webkit-text-size-adjust:100%}.ynRLnc{left:-9999px;position:absolute;top:-9999px}.L6cTce{display:none}.bltWBb{word-break:break-all}.hSRGPd{color:#1a73e8;cursor:pointer;font-weight:500;text-decoration:none}.Bz112c-W3lGp{height:16px;width:16px}.Bz112c-E3DyYd{height:20px;width:20px}.Bz112c-r9oPif{height:24px;width:24px}.Bz112c-uaxL4e{-webkit-border-radius:10px;border-radius:10px}.LgbsSe-Bz112c{display:block}.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf *{border:none;margin:0;padding:0}.fFW7wc-ibnC6b>.aZ2wEe>div{border-color:#4285f4}.P1ekSe-ZMv3u>div:nth-child(1){background-color:#1a73e8!important}.P1ekSe-ZMv3u>div:nth-child(2),.P1ekSe-ZMv3u>div:nth-child(3){background-image:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#1a73e8,#1a73e8)!important}.haAclf{display:inline-block}.nsm7Bb-HzV7m-LgbsSe{-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color .218s,border-color .218s;transition:background-color .218s,border-color .218s;-webkit-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #dadce0;color:#3c4043;cursor:pointer;font-family:"Google Sans",arial,sans-serif;font-size:14px;height:40px;letter-spacing:0.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}@media screen and (-ms-high-contrast:active){.nsm7Bb-HzV7m-LgbsSe{border:2px solid windowText;color:windowText}}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe{font-size:14px;height:32px;letter-spacing:0.25px;padding:0 10px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe{font-size:11px;height:20px;letter-spacing:0.3px;padding:0 8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe{padding:0;width:40px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe{width:32px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe{width:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK{-webkit-border-radius:20px;border-radius:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.pSzOP-SxQuSe{-webkit-border-radius:16px;border-radius:16px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.purZT-SxQuSe{-webkit-border-radius:10px;border-radius:10px}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc{border:none;color:#fff}.nsm7Bb-HzV7m-LgbsSe.MFS4be-v3pZbf-Ia7Qfc{background-color:#1a73e8}.nsm7Bb-HzV7m-LgbsSe.MFS4be-JaPV2b-Ia7Qfc{background-color:#202124;color:#e8eaed}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:18px;margin-right:8px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:14px;min-width:14px;width:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:10px;min-width:10px;width:10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin-left:8px;margin-right:-4px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:10px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:4px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;display:-webkit-box;display:-webkit-flex;display:flex;justify-content:center;-webkit-align-items:center;align-items:center;background-color:#fff;height:36px;margin-left:-10px;margin-right:12px;min-width:36px;width:36px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c,.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:28px;margin-left:-8px;margin-right:10px;min-width:28px;width:28px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:16px;margin-left:-6px;margin-right:8px;min-width:16px;width:16px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-radius:3px;border-radius:3px;margin-left:2px;margin-right:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-radius:18px;border-radius:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-radius:14px;border-radius:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-radius:8px;border-radius:8px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-direction:row;flex-direction:row;justify-content:space-between;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;position:relative;width:100%}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX{justify-content:center}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{-webkit-flex-grow:1;flex-grow:1;font-family:"Google Sans",arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-weight:300}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX .nsm7Bb-HzV7m-LgbsSe-BPrWId{-webkit-flex-grow:0;flex-grow:0}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe{-webkit-transition:background-color .218s;transition:background-color .218s;bottom:0;left:0;position:absolute;right:0;top:0}.nsm7Bb-HzV7m-LgbsSe:hover,.nsm7Bb-HzV7m-LgbsSe:focus{-webkit-box-shadow:none;box-shadow:none;border-color:#d2e3fc;outline:none}.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.04)}.nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.1)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.24)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.32)}.nsm7Bb-HzV7m-LgbsSe .n1UuX-DkfjY{-webkit-border-radius:50%;border-radius:50%;display:-webkit-box;display:-webkit-flex;display:flex;height:20px;margin-left:-4px;margin-right:8px;min-width:20px;width:20px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-family:"Roboto";font-size:12px;text-align:left}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .ssJRIf,.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .fmcmS{overflow:hidden;text-overflow:ellipsis}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;color:#5f6368;fill:#5f6368;font-size:11px;font-weight:400}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.MFS4be-Ia7Qfc .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{color:#e8eaed;fill:#e8eaed}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .Bz112c{height:18px;margin:-3px -3px -3px 2px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;margin-left:12px;margin-right:-10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{-webkit-border-radius:18px;border-radius:18px}.L5Fo6c-sM5MNb{border:0;display:block;left:0;position:relative;top:0}.L5Fo6c-bF1uUb{-webkit-border-radius:4px;border-radius:4px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.L5Fo6c-bF1uUb:focus{border:none;outline:none}sentinel{}</style><style type="text/css">@media only screen and (max-width: 767px) {
  .account-modal {
    max-width: 100%;
  }
  .account-modal .form-wrapper {
    width: 275px;
    padding: 0;
  }
}
.account-modal .form-wrapper {
  width: 360px;
  padding: 16px;
}
.account-modal form input,
.account-modal form button {
  display: block;
}
.account-modal form input {
  margin-bottom: 4px;
}
.account-modal input,
.account-modal button,
.account-modal [role="button"] {
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}
.account-modal input {
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.account-modal .label {
  color: rgba(0, 0, 0, 0.42);
  font-size: 12px;
}
.account-modal button,
.account-modal [role="button"] {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0px;
  background-color: hsl(200, 100%, 53%);
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.account-modal button:hover,
.account-modal [role="button"]:hover {
  background-color: hsl(200, 100%, 63%);
}
.account-modal button:active,
.account-modal [role="button"]:active {
  background-color: hsl(200, 100%, 53%);
}
.account-modal input:focus,
.account-modal button:focus {
  outline-color: hsl(200, 100%, 53%);
}
.account-modal .google-sign-in-button {
  height: 44px;
}
.account-modal .google-sign-in-button [role="button"] {
  margin-top: 0;
}
.account-modal .google-sign-in-button iframe {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.account-modal .reset-password-sent {
  width: 360px;
  padding: 16px;
  height: 50px;
}
.account-modal .account-error {
  margin: 16px 0;
  font-size: 14px;
  line-height: 20px;
  color: hsl(12, 68%, 47%);
}
.account-modal p {
  font-size: 14px;
  line-height: 20px;
}
.account-modal .account-modal-or {
  margin: 24px 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
}
.account-modal .account-modal-or::before,
.account-modal .account-modal-or::after {
  content: "";
  height: 1px;
  background-color: hsl(0, 0%, 80%);
  flex-grow: 1;
}
.account-modal .account-modal-or::before {
  margin-right: 12px;
}
.account-modal .account-modal-or::after {
  margin-left: 12px;
}
.google-sign-in-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.google-sign-in-loading .loading-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #ddd;
  border-top-color: #aaa;
  animation: loading-indicator 1s linear infinite;
}
@keyframes loading-indicator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
  grid-gap: 24px;
  margin-bottom: 32px;
}
.card-cover {
  position: relative;
  background-color: white;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px -1px;
}
.card-cover .card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.15s;
}
.card-cover:hover .card-image {
  transform: scale(1.11);
}
.card-info {
  margin: 12px 0;
}
.card-title-row {
  margin: 8px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title-row a {
  color: rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-title-row a:hover {
  color: hsl(200, 100%, 53%);
}
.feature-tag.card-price-pro {
  color: hsl(200, 100%, 53%);
  border-color: hsl(200, 100%, 53%);
}
.feature-tag.card-price-free {
  color: rgba(0, 0, 0, 0.42);
  border-color: rgba(0, 0, 0, 0.42);
}
.card-owner-date-row {
  margin: 8px 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card-owner-date-row .card-owner-date-right-side {
  margin-left: 12px;
}
.card-owner-date-row .card-owner a {
  color: rgba(0, 0, 0, 0.6);
}
.card-owner-date-row .card-owner a:hover {
  color: hsl(200, 100%, 53%);
}
.card-owner-date-row .card-date {
  color: rgba(0, 0, 0, 0.42);
}
.card-description {
  margin: 8px 0;
  color: rgba(0, 0, 0, 0.5);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 96%);
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}
h1.title {
  font-size: 42px;
  line-height: 48px;
  font-weight: 700;
  margin: 32px 0 32px 0;
}
h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  margin: 32px 0 16px 0;
}
h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin: 24px 0 16px 0;
}
h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 20px 0 16px 0;
}
h1:first-child,
h2:first-child,
h3:first-child {
  margin-top: 0;
}
p {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 16px 0;
}
ol,
ul {
  margin: 0 0 16px 0;
  padding: 0 0 0 32px;
}
li {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 8px 0;
}
li p {
  margin-bottom: 8px;
}
ul > li {
  list-style-type: disc;
}
a,
[role="link"] {
  color: hsl(200, 100%, 43%);
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  cursor: pointer;
}
a:hover,
[role="link"]:hover {
  color: hsl(200, 100%, 53%);
}
code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 14px;
  color: hsl(0, 0%, 50%);
  background-color: hsl(0, 0%, 96%);
  border-radius: 4px;
  padding: 3px 4px;
}
p > code {
  line-height: 0;
}
pre > code {
  background: none;
  padding: 0;
}
pre {
  background-color: hsl(0, 0%, 96%);
  border-radius: 8px;
  padding: 16px;
  white-space: pre-wrap;
}
::-moz-selection {
  background-color: hsl(200, 100%, 83%);
}
::selection {
  background-color: hsl(200, 100%, 83%);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 30px hsl(0, 0%, 100%) inset !important;
}
.play-button-overlayed {
  position: relative;
}
.play-button-overlayed .play-button-overlay-container {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.play-button-overlayed .play-button-overlay-container .play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.play-button-overlayed .play-button-overlay-container .play-button-overlay svg {
  width: 100%;
  height: 100%;
}
.play-button-overlayed .play-button-overlay-container:hover .play-button-overlay .play-button-hover-circle {
  fill: hsl(200, 100%, 43%);
}
.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  /* Chrome, Safari */
}
.scrollable:hover {
  scrollbar-color: hsl(0, 0%, 80%) transparent;
}
.scrollable::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  -webkit-appearance: none;
  cursor: pointer;
}
.scrollable:hover::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background-color: hsl(0, 0%, 70%);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 5px;
}
.icon14,
.icon14 svg {
  width: 14px;
  height: 14px;
}
.icon16,
.icon16 svg {
  width: 16px;
  height: 16px;
}
.icon20,
.icon20 svg {
  width: 20px;
  height: 20px;
}
.icon14 svg,
.icon16 svg,
.icon20 svg {
  display: block;
  pointer-events: none;
  background: none;
}
.editable-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editable-text.single-click {
  cursor: text;
}
.editable-text-contenteditable {
  outline: none;
  padding: 8px;
  word-break: break-all;
}
*[contenteditable] {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
  cursor: text;
}
*[contenteditable="false"] {
  cursor: default;
}
.feature-tag {
  color: rgba(0, 0, 0, 0.85);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 14px;
  display: inline-block;
  margin: 0 0 0 4px;
  padding: 0 3px;
  border: 1px solid rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.pro-feature-tag {
  color: hsl(200, 100%, 53%);
  border-color: hsl(200, 100%, 53%);
}
button .pro-feature-tag {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
button.secondary .pro-feature-tag {
  color: hsl(200, 100%, 53%);
  border-color: hsl(200, 100%, 53%);
}
.cuttle-pro {
  white-space: nowrap;
}
.cuttle-pro .pro-feature-tag {
  margin: 0;
  padding: 0 0.25em;
  font-size: 0.55em;
  line-height: 1.2em;
  border-width: 2px;
  border-radius: 6px;
  vertical-align: middle;
  transform: translate(0px, -0.2em);
}
.container-16-by-9 {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3000;
}
.modal-container .modal-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: hsl(0, 0%, 96%);
  padding: 32px;
  border-radius: 12px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.modal-x {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
}
.modal-x svg * {
  fill: rgba(0, 0, 0, 0.6);
}
.modal-x:hover svg * {
  fill: hsl(200, 100%, 53%);
}
.popup-background-overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.popup-background-overlay.fade {
  background-color: rgba(0, 0, 0, 0.6);
}
.popup {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
}
.popup-menu {
  cursor: default;
  padding: 6px 0;
}
.popup-menu .popup-menu-item {
  white-space: nowrap;
  padding: 1px 8px 1px 8px;
  display: flex;
  cursor: pointer;
}
.popup-menu .popup-menu-item.disabled {
  opacity: 0.25;
  cursor: default;
}
.popup-menu .popup-menu-item:not(.disabled):hover {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.popup-menu .popup-menu-item:not(.disabled):hover .popup-menu-item-accelerator {
  color: hsl(0, 0%, 100%);
}
.popup-menu .popup-menu-item:not(.disabled):hover .icon20 svg * {
  fill: hsl(0, 0%, 100%);
}
.popup-menu .popup-menu-item:not(.disabled):hover .feature-tag {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
.popup-menu .popup-menu-item-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.popup-menu .icon20 svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.popup-menu .popup-menu-item-label {
  margin: 1px 32px 0 4px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.popup-menu .popup-menu-item-accelerator {
  color: rgba(0, 0, 0, 0.42);
  margin-top: 1px;
}
.popup-menu .popup-menu-separator {
  border-bottom: 1px solid hsl(0, 0%, 91%);
  margin: 6px 0;
}
.tooltip {
  padding: 2px 5px;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  border-radius: 4px;
  background-color: hsl(0, 0%, 24%);
  font-size: 13px;
  line-height: 20px;
  pointer-events: none;
  max-width: 384px;
}
.tooltip.arrow-top-start {
  overflow: visible;
}
.tooltip.arrow-top-start:after {
  position: absolute;
  content: "";
  bottom: 100%;
  left: 8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent hsl(0, 0%, 24%) transparent;
}
.tooltip p,
.tooltip li,
.tooltip ul {
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}
.tooltip-accelerator {
  color: rgba(255, 255, 255, 0.65);
  margin-left: 6px;
}
.prompt {
  padding: 8px;
}
.prompt form,
.prompt label {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.prompt .prompt-input {
  border-radius: 4px;
  border-width: 0;
  background-color: hsl(0, 0%, 94%);
}
.prompt .prompt-input:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.prompt textarea {
  width: 240px;
  height: 6em;
  resize: none;
}
.prompt .prompt-note {
  color: rgba(0, 0, 0, 0.6);
}
.prompt input[type="submit"] {
  line-height: 1;
  padding: 2px 4px;
}
.nav {
  padding: 12px 32px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px -1px;
}
@media only screen and (max-width: 767px) {
  .nav {
    padding: 12px 16px;
  }
}
.nav .nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.nav .search-bar {
  flex-grow: 1;
  margin: 0 48px 0 24px;
}
.nav .search-bar input {
  margin: 0;
  padding: 12px;
  font-size: 16px;
  width: 100%;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.nav-logo {
  display: flex;
  align-items: center;
}
.left-nav {
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 991px) {
  .left-nav {
    display: none;
  }
}
.nav-logo:hover {
  cursor: pointer;
}
.nav-logo-image svg {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: block;
}
.nav-logo-image svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.nav-menu-dropdown-icon svg {
  width: 20px;
  height: 20px;
}
.nav-menu-dropdown-icon svg * {
  fill: rgba(0, 0, 0, 0.6);
}
.nav-menu:hover {
  cursor: pointer;
}
.nav-menu:hover .username {
  color: hsl(200, 100%, 53%);
}
.nav-menu:hover .nav-menu-dropdown-icon svg * {
  fill: hsl(200, 100%, 53%);
}
.nav-menu {
  display: flex;
  align-items: center;
}
.nav-menu svg {
  display: inline;
  vertical-align: middle;
  margin-left: 2px;
}
.right-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.username {
  padding-right: 8px;
}
.nav a {
  text-decoration: none;
}
.nav-logged-in-user {
  padding: 1px 32px;
  color: rgba(0, 0, 0, 0.42);
  font-weight: 600;
}
.nav-links-container {
  display: flex;
  align-items: center;
}
.nav-link {
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  cursor: pointer;
}
.nav-link:hover {
  background-color: hsl(0, 0%, 94%);
}
.nav-with-dropdown .nav-dropdown {
  display: none;
  position: absolute;
  z-index: 1;
  padding-top: 12px;
}
.nav-with-dropdown .nav-dropdown a {
  display: block;
  padding: 12px;
  color: rgba(0, 0, 0, 0.85);
}
.nav-with-dropdown .nav-dropdown a:hover {
  background-color: hsl(0, 0%, 94%);
}
.nav-with-dropdown .nav-dropdown .nav-dropdown-items {
  background-color: white;
  margin-left: -12px;
  border-radius: 8px;
  box-shadow: rgba(15, 15, 15, 0.2) 0px 4px 12px;
  overflow: hidden;
}
.nav-with-dropdown:hover .nav-dropdown {
  display: block;
}
a.nav-link {
  color: rgba(0, 0, 0, 0.85);
}
.nav-signup-button {
  padding: 10px;
  width: 100px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  background-color: hsl(200, 100%, 53%);
  color: hsl(0, 0%, 100%);
}
.nav-signup-button:hover {
  cursor: pointer;
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.nav-signup-button:active {
  background-color: hsl(200, 100%, 53%);
}
.hamburger-nav {
  display: none;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .hamburger-nav {
    display: flex;
  }
}
.hamburger-nav .nav-logo-image svg {
  margin-right: 5px;
}
.hamburger-nav .hamburger-icon {
  padding-top: 4px;
  cursor: pointer;
  margin-right: 16px;
}
.hamburger-nav .hamburger-icon svg {
  width: 20px;
  height: 20px;
}
.hamburger-nav .hamburger-menu-contents {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
  background-color: hsl(0, 0%, 96%);
  z-index: 1;
  padding: 16px;
}
.hamburger-nav .hamburger-menu-contents .nav-link {
  display: block;
  padding: 4px 0;
}
.hamburger-nav .hamburger-menu-contents .sidebar {
  margin: 8px 0 0 0;
  padding: 0;
  width: auto;
  height: auto;
  position: static;
}
.hamburger-nav .hamburger-menu-contents .hamburger-links {
  margin-top: 16px;
}
.hamburger-nav .hamburger-menu-contents .hamburger-nav-open {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
}
.hamburger-nav .hamburger-menu-contents .modal-x svg {
  position: relative;
  transform: none;
}
.hamburger-nav .hamburger-menu-contents .hamburger-menu-separator {
  margin: 12px 0;
  height: 1px;
  background-color: hsl(0, 0%, 91%);
}
.avatar {
  border-radius: 50%;
}
.avatar-letter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 0%, 96%);
  border-radius: 50%;
  font-weight: 500;
  color: hsl(200, 100%, 53%);
}
footer {
  background-color: hsl(0, 0%, 24%);
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  line-height: 28px;
  padding: 32px;
}
@media only screen and (max-width: 767px) {
  footer {
    padding: 32px 16px;
  }
}
footer a {
  color: rgba(255, 255, 255, 0.95);
}
footer a:hover {
  color: hsl(200, 100%, 63%);
}
footer h2 {
  margin-top: 0;
}
footer .footer-inner {
  margin: 0 auto;
  max-width: 1200px;
}
footer .left-footer-columns {
  display: flex;
  justify-content: flex-start;
  gap: 128px;
}
@media only screen and (max-width: 991px) {
  footer .left-footer-columns {
    gap: 64px;
  }
}
footer .footer-columns {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  footer .footer-columns {
    display: block;
  }
}
footer .footer-links-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
footer .social-icons svg {
  width: 32px;
  height: 32px;
  fill: rgba(255, 255, 255, 0.95);
}
footer .social-icons svg:hover {
  fill: hsl(200, 100%, 63%);
  cursor: pointer;
}
footer .social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
footer .social-container {
  display: flex;
  flex-direction: column;
}
footer .contact-container .contact {
  margin-top: 16px;
}
footer .contact-container a {
  color: hsl(200, 100%, 53%);
}
footer .contact-container a:hover {
  color: hsl(200, 100%, 63%);
}
footer .legal-container {
  font-size: 14px;
  line-height: 20px;
}
footer .legal-container a {
  color: rgba(255, 255, 255, 0.95);
  padding-right: 16px;
}
footer .legal-container a:hover {
  color: hsl(200, 100%, 63%);
}
@media only screen and (max-width: 767px) {
  footer .legal-container {
    padding-top: 16px;
  }
  footer .legal-container a {
    display: block;
  }
}
footer .second-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-layout main {
  flex-grow: 1;
}
.main-inner {
  padding: 32px;
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .main-inner {
    padding: 32px 16px;
  }
}
.main-inner.full-width {
  max-width: none;
}
.upgrade-modal {
  width: 720px;
  max-width: 100%;
  padding: 32px;
  display: grid;
  gap: 32px 10px;
  grid-template-columns: 1fr 1fr;
}
.upgrade-modal h1 {
  margin: 0;
}
.upgrade-modal .modal-x {
  background-color: hsl(0, 0%, 100%);
  border-radius: 50%;
  padding: 2px;
  width: 24px;
  height: 24px;
}
.upgrade-modal .tagline {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 300;
}
.upgrade-modal .tagline:last-of-type {
  margin-bottom: 0;
}
.upgrade-modal button,
.upgrade-modal [role="button"] {
  display: block;
  width: 100%;
  text-align: center;
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  padding: 12px;
  background-color: hsl(200, 100%, 53%);
  cursor: pointer;
}
.upgrade-modal button:hover,
.upgrade-modal [role="button"]:hover {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.upgrade-modal button:active,
.upgrade-modal [role="button"]:active {
  background-color: hsl(200, 100%, 53%);
}
.upgrade-modal button.secondary,
.upgrade-modal [role="button"].secondary {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 91%);
  font-weight: 400;
}
.upgrade-modal button.secondary:hover,
.upgrade-modal [role="button"].secondary:hover {
  background-color: hsl(0, 0%, 94%);
}
.upgrade-modal-top {
  grid-column: 1 / span 2;
}
.upgrade-modal-left,
.upgrade-modal-right {
  display: flex;
  flex-direction: column;
}
.upgrade-modal-left {
  text-align: center;
  gap: 24px;
}
.upgrade-modal-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.upgrade-plans {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.upgrade-plans .discount {
  color: #c00;
  margin-bottom: 8px;
}
.upgrade-plan {
  display: grid;
  grid-template-columns: 40px auto auto;
  grid-template-rows: auto auto;
  gap: 4px;
  border: 2px solid hsl(0, 0%, 80%);
  border-radius: 8px;
  padding: 8px 8px 8px 0;
  margin-bottom: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.upgrade-plan:hover:not(.selected) {
  border-color: hsl(0, 0%, 70%);
}
.upgrade-plan.selected {
  border-color: hsl(200, 100%, 63%);
}
.upgrade-plan h3 {
  margin: 0;
}
.upgrade-plan .right {
  text-align: right;
}
.upgrade-plan s {
  color: hsl(0, 0%, 70%);
}
.upgrade-plan-checkbox {
  justify-self: center;
  align-self: center;
  grid-row-start: 1;
  grid-row-end: 3;
  width: 24px;
  height: 24px;
}
.pricing-feature {
  display: flex;
  align-items: top;
}
.pricing-feature:not(:last-child) {
  margin-bottom: 12px;
}
.pricing-feature svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-feature svg * {
  fill: rgba(0, 0, 0, 0.2);
}
.pricing-feature-description {
  font-size: 16px;
  line-height: 24px;
  margin-left: 8px;
  text-align: left;
  flex: 0 1 auto;
}
@media screen and (max-device-width: 585px) {
  .upgrade-modal {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
  }
  .upgrade-modal .upgrade-modal-left {
    grid-column: 1;
    grid-row: 2;
  }
  .upgrade-modal .upgrade-modal-right {
    grid-column: 1;
    grid-row: 3;
  }
}
.filename-input {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.filename-input input[type="text"] {
  flex: 1 1 auto;
}
.filename-input select {
  flex: 0 0 90px;
}
input[type="text"] {
  cursor: text;
  border: 1px solid hsl(0, 0%, 80%);
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}
input[type="text"]:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
input[type="checkbox"] {
  cursor: pointer;
  margin: 3px;
  width: 14px;
  height: 14px;
}
input[type="checkbox"]:disabled {
  cursor: default;
}
.select,
select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  color: rgba(0, 0, 0, 0.85);
  padding: 1px 22px 1px 8px;
  border-radius: 99px;
  border: none;
  background: hsl(0, 0%, 91%) url(/editor/images/chevron-down.svg);
  background-position: right 2px center;
  background-repeat: no-repeat;
}
.select.disabled,
select.disabled,
.select:disabled,
select:disabled {
  cursor: default;
  opacity: 1;
}
.select:focus,
select:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.viewport-main {
  position: relative;
  width: 100%;
  height: 100%;
}
.viewport-main .canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.viewport-main .html,
.viewport-main .html-ruler-mask,
.viewport-main .html-ruler-offset {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.viewport-main .html {
  pointer-events: none;
}
.viewport-main .html-ruler-mask {
  top: 20px;
  left: 20px;
  overflow: hidden;
}
.viewport-main .html-ruler-offset {
  top: -20px;
  left: -20px;
}
.viewport-main .ruler-grab-h,
.viewport-main .ruler-grab-v {
  position: absolute;
  pointer-events: auto;
  cursor: url("/editor/cursors/grab-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
}
.viewport-main .ruler-grab-h {
  top: 0;
  right: 0;
  left: 0;
  height: 20px;
}
.viewport-main .ruler-grab-v {
  left: 0;
  bottom: 0;
  top: 20px;
  width: 20px;
}
.viewport-main.cursor-pen {
  cursor: url("/editor/cursors/pen-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/pen-cursor-2x.png") 2x, url("/editor/cursors/pen-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/pen-cursor-2x.png") 2x, url("/editor/cursors/pen-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-pen-add {
  cursor: url("/editor/cursors/pen-add-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/pen-add-cursor-2x.png") 2x, url("/editor/cursors/pen-add-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/pen-add-cursor-2x.png") 2x, url("/editor/cursors/pen-add-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-pen-close {
  cursor: url("/editor/cursors/pen-close-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/pen-close-cursor-2x.png") 2x, url("/editor/cursors/pen-close-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/pen-close-cursor-2x.png") 2x, url("/editor/cursors/pen-close-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select {
  cursor: url("/editor/cursors/select-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-cursor-2x.png") 2x, url("/editor/cursors/select-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-cursor-2x.png") 2x, url("/editor/cursors/select-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-contains {
  cursor: url("/editor/cursors/select-contains-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-contains-cursor-2x.png") 2x, url("/editor/cursors/select-contains-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-contains-cursor-2x.png") 2x, url("/editor/cursors/select-contains-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-split-handles {
  cursor: url("/editor/cursors/select-split-handles-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-split-handles-cursor-2x.png") 2x, url("/editor/cursors/select-split-handles-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-split-handles-cursor-2x.png") 2x, url("/editor/cursors/select-split-handles-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-join-handles {
  cursor: url("/editor/cursors/select-join-handles-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-join-handles-cursor-2x.png") 2x, url("/editor/cursors/select-join-handles-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-join-handles-cursor-2x.png") 2x, url("/editor/cursors/select-join-handles-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-bend {
  cursor: url("/editor/cursors/select-bend-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-bend-cursor-2x.png") 2x, url("/editor/cursors/select-bend-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-bend-cursor-2x.png") 2x, url("/editor/cursors/select-bend-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-bend-split {
  cursor: url("/editor/cursors/select-bend-split-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-bend-split-cursor-2x.png") 2x, url("/editor/cursors/select-bend-split-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-bend-split-cursor-2x.png") 2x, url("/editor/cursors/select-bend-split-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-select-locked {
  cursor: url("/editor/cursors/select-locked-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-locked-cursor-2x.png") 2x, url("/editor/cursors/select-locked-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-locked-cursor-2x.png") 2x, url("/editor/cursors/select-locked-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-duplicate {
  cursor: url("/editor/cursors/duplicate-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/duplicate-cursor-2x.png") 2x, url("/editor/cursors/duplicate-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/duplicate-cursor-2x.png") 2x, url("/editor/cursors/duplicate-cursor-1x.png") 1x) 4 4, default;
}
.viewport-main.cursor-precise {
  cursor: url("/editor/cursors/precise-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/precise-cursor-2x.png") 2x, url("/editor/cursors/precise-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/precise-cursor-2x.png") 2x, url("/editor/cursors/precise-cursor-1x.png") 1x) 13 13, default;
}
.viewport-main.cursor-grab {
  cursor: url("/editor/cursors/grab-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
}
.viewport-main.cursor-grabbing {
  cursor: url("/editor/cursors/grabbing-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default;
}
.viewport-main.cursor-resize-arrows-0 {
  cursor: url("/editor/cursors/resize-arrows-cursor-0-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-1 {
  cursor: url("/editor/cursors/resize-arrows-cursor-1-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-1-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-1-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-1-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-1-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-2 {
  cursor: url("/editor/cursors/resize-arrows-cursor-2-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-2-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-2-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-2-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-2-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-3 {
  cursor: url("/editor/cursors/resize-arrows-cursor-3-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-3-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-3-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-3-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-3-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-4 {
  cursor: url("/editor/cursors/resize-arrows-cursor-4-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-4-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-4-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-4-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-4-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-5 {
  cursor: url("/editor/cursors/resize-arrows-cursor-5-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-5-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-5-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-5-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-5-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-6 {
  cursor: url("/editor/cursors/resize-arrows-cursor-6-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-6-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-6-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-7 {
  cursor: url("/editor/cursors/resize-arrows-cursor-7-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-7-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-7-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-7-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-7-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-8 {
  cursor: url("/editor/cursors/resize-arrows-cursor-8-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-8-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-8-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-8-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-8-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-9 {
  cursor: url("/editor/cursors/resize-arrows-cursor-9-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-9-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-9-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-9-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-9-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-10 {
  cursor: url("/editor/cursors/resize-arrows-cursor-10-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-10-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-10-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-10-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-10-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-resize-arrows-11 {
  cursor: url("/editor/cursors/resize-arrows-cursor-11-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-11-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-11-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-11-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-11-1x.png") 1x) 14 14, default;
}
.viewport-main.cursor-rotate-arrows-0 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-0-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-0-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-0-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-1 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-1-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-1-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-1-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-1-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-1-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-2 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-2-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-2-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-2-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-2-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-2-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-3 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-3-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-3-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-3-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-3-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-3-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-4 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-4-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-4-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-4-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-4-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-4-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-5 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-5-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-5-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-5-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-5-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-5-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-6 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-6-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-6-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-6-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-7 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-7-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-7-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-7-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-7-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-7-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-8 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-8-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-8-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-8-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-8-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-8-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-9 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-9-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-9-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-9-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-9-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-9-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-10 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-10-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-10-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-10-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-10-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-10-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-11 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-11-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-11-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-11-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-11-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-11-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-12 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-12-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-12-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-12-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-12-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-12-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-13 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-13-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-13-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-13-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-13-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-13-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-14 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-14-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-14-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-14-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-14-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-14-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-15 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-15-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-15-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-15-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-15-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-15-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-16 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-16-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-16-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-16-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-16-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-16-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-17 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-17-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-17-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-17-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-17-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-17-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-18 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-18-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-18-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-18-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-18-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-18-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-19 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-19-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-19-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-19-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-19-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-19-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-20 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-20-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-20-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-20-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-20-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-20-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-21 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-21-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-21-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-21-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-21-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-21-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-22 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-22-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-22-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-22-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-22-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-22-1x.png") 1x) 15 15, default;
}
.viewport-main.cursor-rotate-arrows-23 {
  cursor: url("/editor/cursors/rotate-arrows-cursor-23-1x.png") 15 15, default;
  cursor: -webkit-image-set(url("/editor/cursors/rotate-arrows-cursor-23-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-23-1x.png") 1x) 15 15, default;
  cursor: image-set(url("/editor/cursors/rotate-arrows-cursor-23-2x.png") 2x, url("/editor/cursors/rotate-arrows-cursor-23-1x.png") 1x) 15 15, default;
}
.transform-box-label {
  position: absolute;
  color: hsl(200, 100%, 63%);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 1px 12px;
  border-radius: 99px;
  pointer-events: auto;
}
.transform-box-label:hover {
  padding: 0 11px;
  border: 1px solid hsl(200, 100%, 63%);
}
.dimension-editor {
  cursor: text;
}
.dimension-editor.locked {
  cursor: url("/editor/cursors/select-locked-cursor-1x.png") 4 4, default;
  cursor: -webkit-image-set(url("/editor/cursors/select-locked-cursor-2x.png") 2x, url("/editor/cursors/select-locked-cursor-1x.png") 1x) 4 4, default;
  cursor: image-set(url("/editor/cursors/select-locked-cursor-2x.png") 2x, url("/editor/cursors/select-locked-cursor-1x.png") 1x) 4 4, default;
}
.dimension-editor .number-ellipsis,
.dimension-editor .number-unit {
  color: hsl(200, 100%, 63%);
}
.dimension-editor .number-unit {
  margin-left: 4px;
}
.transform-box-tools {
  position: absolute;
  display: flex;
  justify-content: center;
}
.transform-box-tools.left {
  flex-direction: column;
}
.align-tools {
  position: absolute;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
}
.align-tools.horizontal {
  bottom: 40px;
  padding: 2px 4px;
}
.align-tools.vertical {
  right: 40px;
  padding: 4px 2px;
  flex-direction: column;
}
.align-tools .icon-button {
  margin: 4px;
  pointer-events: auto;
}
.color-picker-popup {
  padding: 8px;
}
.color-picker-swatch {
  width: 20px;
  height: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  border-radius: 2px;
  cursor: pointer;
}
.color-picker-swatch.none {
  background: linear-gradient(45deg, #fff 45%, #f00 50%, #f00 50%, #fff 55%);
}
.color-picker-palette {
  display: flex;
  margin-bottom: 8px;
}
.color-picker-palette > :not(:last-child) {
  margin-right: 4px;
}
.color-picker-value-saturation {
  position: relative;
  width: 260px;
  height: 260px;
}
.color-picker-value-saturation-indicator {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  margin-left: -6px;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}
.color-picker-hue {
  position: relative;
  width: 20px;
  height: 260px;
  background: linear-gradient(0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.color-picker-hue-indicator,
.color-picker-alpha-indicator {
  pointer-events: none;
  position: absolute;
  margin-top: -1px;
  width: 20px;
  height: 2px;
  border: 1px solid #fff;
  border-radius: 1px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}
.color-picker-alpha {
  position: relative;
  width: 20px;
  height: 260px;
}
.color-picker-swatches {
  display: flex;
  flex-wrap: wrap;
  width: 308px;
}
.color-picker-swatches > * {
  margin-right: 4px;
}
.color-picker-swatches-category-name {
  margin: 12px 0 8px -1px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 12px;
  line-height: 10px;
}
.component-dimensions {
  font-size: 16px;
  line-height: 24px;
  display: inline-flex;
  padding: 2px 12px;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  cursor: text;
}
.component-dimensions .dimension {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.component-dimensions .number {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.component-dimensions .spacing {
  flex: 0 9999 auto;
  width: 8px;
}
.component-dimensions .icon20 svg * {
  fill: rgba(0, 0, 0, 0.5);
}
.component-dimensions .number-unit {
  color: rgba(0, 0, 0, 0.5);
  margin-left: 4px;
}
.component-dimensions .times {
  margin: 0 8px;
}
@media only screen and (max-width: 400px) {
  .component-dimensions {
    flex-direction: column;
    align-items: flex-start;
    line-height: 20px;
  }
}
@media only screen and (max-width: 300px) {
  .component-dimensions {
    display: none;
  }
}
.component-embed {
  display: grid;
  grid-template-areas: "a" "b" "c";
  grid-template-columns: 100%;
  gap: 0 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin-bottom: 24px;
}
.component-embed .component-embed-canvas {
  grid-area: a;
}
.component-embed .component-embed-under {
  grid-area: b;
}
.component-embed .component-embed-meta {
  grid-area: c;
}
.component-embed .ProseMirror {
  padding: 0;
}
.component-embed-narrow-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}
.component-embed-canvas {
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
  border-radius: 8px;
}
.component-embed-canvas .svg-preview-canvas-autosize {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 700px;
  max-height: 50vh;
  overflow: hidden;
}
.component-embed-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  flex: 1 1 auto;
  margin-top: 24px;
}
.component-embed-inspector {
  flex: 0 0 auto;
}
.component-embed-inspector .inspector {
  gap: 24px;
  border: none;
}
.component-embed-inspector .inspector-section {
  background-color: hsl(0, 0%, 96%);
  border: none;
  border-radius: 8px;
  padding: 12px 8px;
}
.component-embed-inspector .inspector-section.new-context {
  background-color: hsl(0, 0%, 96%);
}
.component-embed-inspector .parameter-name {
  cursor: default !important;
}
.component-embed-inspector .parameter-name:hover {
  color: rgba(0, 0, 0, 0.85);
}
.component-embed-warnings {
  margin: 0 16px;
}
.component-embed-dimensions {
  flex: 1 1 auto;
  margin-right: 8px;
  overflow: hidden;
}
.component-embed-actions {
  display: flex;
  align-items: center;
  max-height: 90px;
  position: absolute;
  bottom: 12px;
  right: 12px;
  left: 20px;
}
.component-embed-actions button,
.component-embed-actions .button {
  font-size: 16px;
  line-height: 40px;
  border-width: 2px;
}
.component-embed-actions button svg *,
.component-embed-actions .button svg * {
  fill: rgba(255, 255, 255, 0.85);
}
.component-embed-actions-left-spacer {
  flex: 0 9999 16px;
}
.component-embed-download-primary .icon20 {
  margin: 0 4px 0 -4px;
}
.component-embed-download-primary.has-next-button {
  padding-right: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
.component-embed-download-primary:disabled {
  opacity: 1;
  color: hsl(0, 0%, 70%);
}
.component-embed-download-primary:disabled .icon20 {
  display: none;
}
.component-embed-file-type .icon-button {
  opacity: 1;
  height: 44px;
}
.component-embed-file-type .icon-button.secondary svg path {
  fill: hsl(0, 0%, 50%);
}
.component-embed-file-type .icon-button.has-previous-button {
  padding: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
.add-component-to-gallery {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  align-self: center;
}
.add-component-to-gallery .icon-button {
  width: 28px;
  height: 28px;
}
/*
  CustomizeHint tooltip and animation.
*/
.customize-hint {
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  top: -24px;
  left: 140px;
  background-color: hsl(200, 100%, 53%);
  color: hsl(0, 0%, 100%);
  border-radius: 12px;
  padding: 2px 10px;
  overflow: visible;
  animation: 0.75s ease-in-out 0s infinite alternate both running hint-genie;
}
.customize-hint:after {
  position: absolute;
  content: "";
  top: calc(100% - 1px);
  left: calc(50% - 8px);
  border-width: 8px;
  border-style: solid;
  border-color: hsl(200, 100%, 53%) transparent transparent transparent;
}
@keyframes hint-genie {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion) {
  .customize-hint {
    animation-play-state: paused;
  }
}
.component-embed-meta.show-hint .inspector-section:first-child .parameter:first-child .parameter-value {
  box-shadow: 0 0 0px 3px hsl(200, 100%, 63%);
  border-radius: 4px;
}
/*
  Smaller windows / mobile
*/
@media screen and (min-width: 1250px) {
  .component-embed {
    grid-template-areas: "a c" "b c";
    grid-template-columns: 700px calc(1200px - 700px - 24px);
    grid-template-rows: auto 1fr;
  }
  .component-embed-narrow-sticky {
    position: initial;
  }
  .component-embed-wide-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .component-embed-meta {
    margin: 0;
  }
  .component-embed-canvas .svg-preview-canvas-autosize {
    max-height: unset;
  }
}
@media screen and (orientation: landscape) and (min-width: 1000px) {
  .component-embed {
    grid-template-areas: "a c" "b c";
    grid-template-columns: 700px calc(1200px - 700px - 24px);
    grid-template-rows: auto 1fr;
  }
  .component-embed-narrow-sticky {
    position: initial;
  }
  .component-embed-wide-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .component-embed-meta {
    margin: 0;
  }
  .component-embed-canvas .svg-preview-canvas-autosize {
    max-height: unset;
  }
}
@media screen and (orientation: landscape) and (min-width: 1000px) and (max-width: 1250px) {
  .doc-editor .ProseMirror > figure[data-cuttle-component-id] {
    max-width: 100%;
  }
  .component-embed {
    grid-template-columns: 60% calc(40% - 24px);
  }
}
@media screen and (orientation: portrait) and (max-width: 640px) {
  .component-embed-canvas .svg-preview-canvas-autosize {
    aspect-ratio: 8 / 7;
  }
}
.app-embed {
  width: 100vw;
  height: 100vh;
}
.app-embed .component-embed {
  flex-direction: column;
}
.app-embed .component-embed-canvas {
  box-shadow: none;
  border-radius: 0;
}
.app-embed .svg-preview-canvas-autosize {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}
.component-gallery-thumbnails {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: 12px;
  padding: 24px 12px 12px 12px;
  margin-top: -12px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 96%);
}
.component-gallery-thumbnail {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.component-gallery-thumbnail.focused {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.component-gallery-thumbnail.selected {
  box-shadow: inset 0 0 0 2px hsl(200, 100%, 63%);
}
.component-gallery-thumbnail.error {
  width: 120px;
  height: 90px;
  box-shadow: inset 0 0 0 1px hsl(12, 68%, 47%);
}
.component-gallery-thumbnail:hover .component-gallery-icon-background {
  visibility: visible;
}
.component-gallery-thumbnail .icon16 {
  position: absolute;
  right: 2px;
  bottom: 2px;
}
.component-gallery-remove {
  position: absolute;
  top: -8px;
  right: -8px;
}
.component-gallery-remove:hover .component-gallery-icon-background {
  visibility: visible;
}
.component-gallery-remove .icon-button {
  width: 24px;
  height: 24px;
}
.component-gallery-icon-background {
  visibility: hidden;
  background-color: hsl(0, 0%, 100%);
  border-radius: 50%;
  border: 1px solid hsl(0, 0%, 80%);
}
.component-gallery-download-all {
  margin: 16px;
  display: flex;
  justify-content: flex-end;
}
.component-gallery-download-all button {
  font-size: 16px;
  line-height: 36px;
  border-width: 2px;
}
.components {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.components .disabled {
  pointer-events: none;
  opacity: 0.33;
}
.component-category {
  margin-bottom: 10px;
}
.component-category.basic-shapes {
  margin-top: 10px;
}
.component-category-components {
  position: relative;
}
.component-category-builtins {
  margin: 10px 0;
}
.component-category-header {
  display: flex;
  align-items: center;
  margin: 12px 6px 4px 12px;
}
.component-category-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.42);
}
.component {
  cursor: url("/editor/cursors/grab-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
}
.component.dragging,
.component:hover {
  border-color: hsl(200, 100%, 83%);
  background-color: hsl(0, 0%, 100%);
}
.component.focused {
  border-color: hsl(200, 100%, 53%);
  background-color: hsl(0, 0%, 100%);
  outline: 2px solid transparent;
}
.component.focused .component-name {
  color: hsl(200, 100%, 53%);
}
.component .extra-hidden {
  display: none;
  visibility: visible;
}
.component:hover .extra-hidden {
  display: block;
}
.component.message {
  border-color: hsl(12, 68%, 47%);
}
.component .feature-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.thumbnail-icon {
  width: 36px;
  height: 24px;
}
.thumbnail-icon svg {
  width: 36px;
  height: 24px;
}
.thumbnail-icon path {
  fill: hsl(0, 0%, 70%);
}
.thumbnail-icon.hover path {
  fill: hsla(200, 100%, 63%, 0.8);
}
.component-name {
  padding: 3px 4px 3px 0;
  color: rgba(0, 0, 0, 0.85);
  flex: 1 1 auto;
  overflow: hidden;
  align-self: middle;
}
.component-thumbnail {
  padding: 3px 8px 3px 4px;
  align-self: center;
  flex-shrink: 0;
  position: relative;
}
.component .extra {
  flex-shrink: 0;
  padding: 6px;
}
.new-component {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new-component .icon-button {
  width: 28px;
  height: 28px;
}
.new-component .new-component-button {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  margin-left: 28px;
}
.thumbnail {
  width: 36px;
  height: 36px;
}
.component-reorder-hit-target {
  position: absolute;
  z-index: 3;
  height: 40px;
  margin-top: -20px;
  width: calc(100%);
}
.component-reorder-hit-target.hovered::after {
  content: "";
  position: absolute;
  top: 18px;
  height: 4px;
  left: 0;
  right: 0;
  background-color: hsl(200, 100%, 63%);
}
.component-message {
  position: absolute;
  top: -100%;
  left: 0;
}
.code-component-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
}
.code-component-badge path {
  stroke: none;
  stroke-width: 0;
  fill: black;
}
.components-separator {
  margin: 12px 0;
  height: 1px;
  background-color: hsl(0, 0%, 91%);
  border: none;
}
.components-custom-item {
  min-height: 32px;
  cursor: pointer;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.components-custom-item svg {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  margin-right: 18px;
}
.components-custom-item path {
  fill: rgba(0, 0, 0, 0.5);
}
.components-custom-item:hover {
  border-color: hsl(200, 100%, 83%);
  background-color: hsl(0, 0%, 100%);
}
.components-custom-item:hover path {
  fill: hsl(200, 100%, 63%);
}
.components-custom-item.focused {
  border-color: hsl(200, 100%, 53%);
  background-color: hsl(0, 0%, 100%);
  color: hsl(200, 100%, 53%);
}
.components-custom-item.focused path {
  fill: hsl(200, 100%, 53%);
}
.components-custom-item-name {
  flex: 1 1 auto;
}
.creation-panel-search {
  background-color: hsl(0, 0%, 94%);
  margin: 4px 4px 0 4px;
  padding: 5px;
  display: flex;
  gap: 4px;
  border-radius: 99px;
  cursor: text;
}
.creation-panel-search:focus-within {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  background-color: hsl(0, 0%, 98%);
}
.creation-panel-search .icon20 svg * {
  fill: hsl(0, 0%, 70%);
}
.creation-panel-search input {
  font-size: 14px;
  line-height: 20px;
  width: 130px;
  border-width: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}
.creation-panel-search input:focus {
  box-shadow: none;
  outline: 0px solid transparent;
}
.creation-panel-search input::-moz-placeholder {
  text-align: center;
  opacity: 1;
  color: rgba(0, 0, 0, 0.42);
}
.creation-panel-search input:-ms-input-placeholder {
  text-align: center;
  opacity: 1;
  color: rgba(0, 0, 0, 0.42);
}
.creation-panel-search input::placeholder {
  text-align: center;
  opacity: 1;
  color: rgba(0, 0, 0, 0.42);
}
.creation-panel {
  position: relative;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
}
.creation-panel-pages {
  position: absolute;
  height: 100%;
  display: flex;
  flex-direction: row;
  transform: translateX(0px);
  transition: transform 200ms ease-out;
}
.creation-panel-page {
  display: flex;
  flex-direction: column;
  flex: 0 0 199px;
  width: 199px;
  height: 100%;
}
.creation-panel-page > * {
  flex-shrink: 0;
}
.creation-panel-page button {
  font-weight: 500;
  border-radius: 999px;
  border: none;
  margin: 4px;
  padding: 0 5px;
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 91%);
}
.creation-panel-page button:hover {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 80%);
}
.creation-panel-page button:hover:disabled {
  background-color: hsl(0, 0%, 91%);
}
.creation-panel-page button .icon20 svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.creation-panel-page button .label {
  flex-grow: 1;
}
.query-results {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
  flex-shrink: 1;
}
.query-category {
  display: flex;
  flex-direction: column;
  margin: 8px 0;
}
.query-category.has-category-heading .query-category-components {
  border-radius: 0 0 6px 6px;
}
.query-loading {
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.42);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
button.query-category-title,
.query-category-title {
  line-height: 30px;
  font-weight: 500;
  background-color: hsl(0, 0%, 91%);
  margin: 0;
  padding-left: 10px;
  border-radius: 15px 15px 0 0;
  z-index: 10;
}
button.query-category-title .label,
.query-category-title .label {
  text-align: left;
}
button.query-category-title .more,
.query-category-title .more {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.query-category-components {
  padding: 2px;
  background-color: hsl(0, 0%, 94%);
  border-radius: 6px;
}
.query-category-components.one-up,
.query-category-components.one-up-compact {
  display: flex;
  flex-direction: column;
}
.query-category-components.one-up .component svg path,
.query-category-components.one-up-compact .component svg path {
  fill: rgba(0, 0, 0, 0.5);
  stroke: none;
}
.query-category-components.one-up .component:hover svg path,
.query-category-components.one-up-compact .component:hover svg path {
  fill: hsl(200, 100%, 63%);
}
.query-category-components.one-up .thumbnail,
.query-category-components.one-up svg {
  width: 36px;
  height: 36px;
}
.query-category-components.one-up-compact .thumbnail,
.query-category-components.one-up-compact svg {
  width: 36px;
  height: 24px;
}
.query-category-components.two-up,
.query-category-components.four-up {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  row-gap: 4px;
}
.query-category-components.two-up .component {
  grid-column-start: auto;
  grid-column-end: span 2;
  flex-direction: column;
  padding: 8px;
  margin: 0;
  justify-self: center;
}
.query-category-components.two-up .component .component-thumbnail {
  padding: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
}
.query-category-components.two-up .component .component-thumbnail span {
  display: block;
  height: 72px;
}
.query-category-components.two-up .component .thumbnail,
.query-category-components.two-up .component svg {
  width: 72px;
  height: 72px;
  overflow: visible;
}
.query-category-components.two-up .component .component-name {
  text-align: center;
}
.query-category-components.two-up .component img,
.query-category-components.two-up .component svg {
  opacity: 0.8;
  pointer-events: none;
}
.query-category-components.two-up .component:hover img,
.query-category-components.two-up .component:hover svg {
  opacity: 1;
}
.query-category-components.four-up .component {
  padding: 3px;
  margin: 0;
  grid-column-start: auto;
  grid-column-end: auto;
  justify-self: center;
}
.query-category-components.four-up .component .component-thumbnail span,
.query-category-components.four-up .component span {
  display: block;
  height: 36px;
}
.query-category-components.four-up .component .component-thumbnail {
  padding: 0;
}
.query-category-components.four-up .component .thumbnail {
  width: 36px;
  height: 36px;
}
.query-category-components.four-up .component img,
.query-category-components.four-up .component svg {
  width: 36px;
  height: 36px;
}
.query-category-components.four-up .component svg path {
  fill: rgba(0, 0, 0, 0.5);
  stroke: none;
}
.query-category-components.four-up .component:hover svg path {
  fill: hsl(200, 100%, 63%);
}
.query-category .component img,
.component.example img,
.query-category .component svg,
.component.example svg {
  opacity: 0.5;
  pointer-events: none;
}
.query-category .component:hover img,
.component.example:hover img,
.query-category .component:hover svg,
.component.example:hover svg {
  opacity: 0.8;
}
.component.emoji img {
  opacity: 0.4;
}
.component.emoji:hover img {
  opacity: 0.7;
}
.query-results-none {
  padding: 10px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  word-break: break-word;
  overflow-x: hidden;
}
.query-results-none p {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}
button.query-results-none-send-suggestion {
  padding-left: 16px;
  padding-right: 16px;
  margin: 8px auto;
}
.components.creation-panel-advertise button.creation-panel-browse-all {
  position: relative;
}
.components.creation-panel-advertise button.creation-panel-browse-all::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0% 30%, hsl(200, 100%, 53%) 50%, transparent 70% 100%);
  background-position: right center;
  background-size: 400% auto;
}
.components.creation-panel-advertise:hover button.creation-panel-browse-all::before {
  background-position: left center;
  transition: background-position 1200ms ease-in-out;
}
figure[data-cuttle-project-id] .loading-message {
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.03);
}
figure[data-cuttle-project-id] .card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
figure[data-cuttle-project-id] .card-info {
  margin: 0;
}
figure[data-cuttle-project-id] .card-title-row a {
  white-space: normal;
}
@media screen and (min-width: 480px) {
  figure[data-cuttle-project-id] .card {
    flex-direction: row;
    gap: 16px;
  }
  figure[data-cuttle-project-id] .card-cover {
    width: 320px;
    height: 180px;
  }
}
.doc-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: hsl(0, 0%, 98%);
  display: flex;
  flex-direction: column;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  padding: 0 32px;
}
.doc-editor-wrap {
  flex: 1 1 auto;
}
.doc-editor-wrap .ProseMirror {
  min-height: 100%;
  padding-top: 32px;
  padding-bottom: 96px;
}
.doc-editor-wrap .ProseMirror:not(.ProseMirror-focused) p.is-empty.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: rgba(0, 0, 0, 0.42);
  pointer-events: none;
  height: 0;
}
.doc-editor-wrap[data-selection-changing="true"] .doc-editor-menu-selection {
  visibility: hidden;
  position: absolute;
  top: -1000px;
}
.doc-editor .avatar-letter-container {
  background-color: hsl(0, 0%, 100%);
}
.doc-editor .ProseMirror {
  outline: none;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /** Image upload placeholder */
}
.doc-editor .ProseMirror > * {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.doc-editor .ProseMirror[contenteditable="true"].ProseMirror-focused figure.ProseMirror-selectednode.doc-image img,
.doc-editor .ProseMirror[contenteditable="true"] .ProseMirror-selectednode {
  box-shadow: 0 0 0 2px hsl(200, 100%, 63%);
}
.doc-editor .ProseMirror[contenteditable="true"] figure.ProseMirror-selectednode.doc-image {
  box-shadow: none;
}
.doc-editor .ProseMirror[contenteditable="true"] figure.doc-video-player figcaption {
  cursor: default;
}
.doc-editor .ProseMirror placeholder {
  max-width: 700px;
  display: block;
  border: 1px solid hsl(0, 0%, 91%);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px;
  padding: 64px;
  text-align: center;
}
.doc-editor-menu {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px;
}
.doc-editor-menu button.secondary {
  border: none;
  background-color: transparent;
  padding: 4px 8px;
  line-height: 1;
}
.doc-editor-menu button.secondary.active {
  color: hsl(200, 100%, 43%);
  outline: 2px solid transparent;
}
.doc-editor-menu-line {
  background-color: hsl(0, 0%, 100%);
  opacity: 0.5;
  max-width: calc(100% - 72px);
}
.doc-editor-menu-line:focus-within,
.doc-editor-menu-line:hover {
  opacity: 1;
}
@media screen and (min-width: 1080px) {
  .doc-editor-menu-line {
    max-width: 100%;
  }
}
.doc-editor.is-empty .doc-editor-menu-line {
  opacity: 1;
}
.doc-editor-menu-seperator {
  border-right: 1px solid hsl(0, 0%, 80%);
  height: 24px;
  margin: 0 4px;
}
.doc-editor-line-menu-components .popup-menu-item-label {
  margin-right: 16px;
}
.doc-editor-line-menu-components .thumbnail svg * {
  fill: none;
  stroke: rgba(0, 0, 0, 0.6);
}
.doc-editor-line-menu-components .popup-menu-item:hover .popup-menu-item-icon .thumbnail svg * {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
}
.doc-editor-project-tags,
.doc-editor-status,
.doc-editor-forked {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.doc-editor-project-tags .icon20 svg *,
.doc-editor-status .icon20 svg *,
.doc-editor-forked .icon20 svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.doc-editor-project-tags .icon-status,
.doc-editor-status .icon-status,
.doc-editor-forked .icon-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-editor-project-tags .icon-status.is-behind svg *,
.doc-editor-status .icon-status.is-behind svg *,
.doc-editor-forked .icon-status.is-behind svg * {
  fill: hsl(200, 100%, 53%);
}
.doc-editor-meta {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.doc-editor-meta > * {
  max-width: 700px;
}
.doc-editor-meta button {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 100%);
}
.doc-editor-meta button:hover {
  color: rgba(0, 0, 0, 0.85);
}
.doc-editor-meta-top {
  display: flex;
  align-items: center;
}
button.secondary.doc-editor-meta-edit-toggle {
  background-color: hsl(0, 0%, 100%);
  margin-left: auto;
}
button.secondary.doc-editor-meta-edit-toggle .icon20 svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.doc-editor-project-tags button {
  margin: 0 4px;
  display: inline-flex;
  line-height: 1;
  padding: 4px 8px;
}
.doc-editor-project-tags .feature-tag {
  margin: 0 4px;
}
.edit-project-tags-modal label {
  display: flex;
  gap: 2px;
}
.doc-editor-title .ProseMirror {
  padding: 0;
  outline: none;
}
.doc-editor-title h1 {
  font-size: 42px;
  line-height: 48px;
  font-weight: 700;
  margin: 32px 0 32px 0;
}
.doc-editor-title h1.is-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(0, 0%, 91%);
  pointer-events: none;
  height: 0;
}
.doc-editor-by a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-editor-license {
  display: none;
  z-index: 1;
  background-color: hsl(0, 0%, 94%);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
}
.doc-editor-license p {
  font-size: 14px;
  line-height: 20px;
}
.doc-editor-license .license-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-right: 20px;
}
.doc-editor-license .license-header {
  display: flex;
  color: rgba(0, 0, 0, 0.42);
  margin-bottom: 8px;
}
.doc-editor-license .license-footer {
  margin-top: 16px;
}
.doc-editor-license .license-bullets {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}
.doc-editor-license .license-bullet-icon {
  flex: 0 0 32px;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.doc-editor-license .license-bullet-icon .feature-tag {
  margin: 2px 0 0 0;
}
.doc-editor-text {
  position: relative;
  width: 100%;
}
.doc-editor-text p.is-empty:first-child::before {
  content: attr(data-placeholder);
  color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  position: absolute;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-editor-text .ProseMirror-focused {
  border-radius: 4px;
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
/* Styles to eventually be shared when documentation is visible in a (static)
 * doc view. (Now only used in doc-editor.)
 */
.doc-editor .ProseMirror {
  /** Embed errors that are shown in edit mode and hidden in packaged mode. */
}
.doc-editor .ProseMirror figure {
  margin: 0 auto 16px auto;
}
.doc-editor .ProseMirror figure.doc-image img {
  display: block;
  max-width: 100%;
  cursor: default;
}
.doc-editor .ProseMirror figcaption {
  padding: 6px 0;
  text-align: right;
}
.doc-editor .ProseMirror figcaption a {
  text-decoration: none;
}
.doc-editor .ProseMirror .expression-message-group {
  display: none;
}
.doc-editor .ProseMirror[contenteditable="true"] .error {
  display: block;
  padding: 8px 12px;
  max-width: 700px;
  border: 1px red solid;
  text-align: start;
}
/* 
  responsive iframe with a 16:9 aspect ratio
  ref https://css-tricks.com/responsive-iframes/
*/
.doc-video-player-iframe-wrapper {
  position: relative;
}
.doc-video-player-iframe-wrapper::after {
  content: "";
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}
.doc-video-player-iframe-wrapper > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}
/* Wide screens can show component embed with params on side. Internal layout
 * rules are in component-embed.less.
 */
@media screen and (min-width: 1250px) {
  .doc-editor-license {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    left: 724px;
    margin: 32px 0 0 0;
  }
  .doc-editor-meta {
    position: relative;
    max-width: 1200px;
  }
  .doc-editor .ProseMirror {
    max-width: 1200px;
  }
  .doc-editor .ProseMirror > *,
  .doc-editor .ProseMirror figure {
    margin-left: 0;
  }
  .doc-editor .ProseMirror > figure[data-cuttle-component-ids],
  .doc-editor .ProseMirror > figure[data-cuttle-component-id] {
    max-width: 1200px;
  }
}
.doc-editor .ProseMirror[contenteditable="true"] figure[data-has-drag-handle="true"] {
  position: relative;
}
.doc-editor .ProseMirror[contenteditable="true"] .drag-handle {
  position: absolute;
  top: 0;
  left: -28px;
  width: 22px;
  height: 100%;
  background-color: hsl(0, 0%, 91%);
  border-radius: 4px;
  opacity: 0;
  cursor: url("/editor/cursors/grab-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default;
}
.doc-editor .ProseMirror[contenteditable="true"] figure:hover .drag-handle,
.doc-editor .ProseMirror[contenteditable="true"] .ProseMirror-selectednode .drag-handle {
  opacity: 0.5;
}
.doc-editor .ProseMirror[contenteditable="true"] figure:hover .drag-handle:hover,
.doc-editor .ProseMirror[contenteditable="true"] .ProseMirror-selectednode .drag-handle:hover {
  opacity: 0.85;
}
.doc-editor .ProseMirror[contenteditable="true"] .ProseMirror-selectednode .drag-handle {
  background-color: hsl(200, 100%, 83%);
}
.doc-editor .ProseMirror[contenteditable="true"] .ProseMirror-selectednode .drag-handle:active {
  cursor: url("/editor/cursors/grabbing-cursor-1x.png") 13 13, default;
  cursor: -webkit-image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default;
  cursor: image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default;
}
.doc-editor .ProseMirror[contenteditable="false"] .drag-handle {
  display: none;
}
.doc-editor-rich {
  font-size: 20px;
  line-height: 28px;
  position: relative;
  width: 100%;
}
.doc-editor-rich .ProseMirror {
  padding: 4px 32px 4px 4px;
  border-radius: 4px;
}
.doc-editor-rich .ProseMirror-focused {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.doc-editor-rich p {
  font-size: 20px;
  line-height: 28px;
  margin: 0;
}
.doc-editor-rich p img {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: text;
  color: black;
}
.doc-editor-rich p img[data-glyph-index] {
  padding: 0 4px;
  color: hsl(12, 68%, 47%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px hsl(12, 68%, 47%);
  background-color: hsl(0, 55%, 85%);
  border-radius: 2px;
}
.doc-editor-rich p img[data-glyph-index]::before {
  vertical-align: 4px;
  line-height: 1;
  font-size: 11px;
}
.doc-editor-rich .ProseMirror-selectednode {
  background-color: hsl(200, 100%, 83%);
}
.doc-editor-rich [draggable][contenteditable="false"] {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.doc-editor-rich img.ProseMirror-separator {
  width: 0 !important;
  height: 0 !important;
}
.rich-text-symbols-menu-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rich-text-symbols-menu-button * {
  pointer-events: all;
}
.rich-text-symbols-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  row-gap: 4px;
  background-color: hsl(0, 0%, 100%);
  padding: 8px;
}
.rich-text-symbols-menu button {
  margin: 0;
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  border-radius: 4px;
}
.rich-text-symbols-menu button:hover {
  border-color: hsl(200, 100%, 83%);
  background-color: hsl(0, 0%, 100%);
}
.rich-text-symbols-menu button:hover img {
  opacity: 0.7;
}
.rich-text-symbols-menu img {
  width: 36px;
  height: 36px;
  opacity: 0.4;
}
.download-count-modal {
  text-align: center;
}
.download-count-modal button,
.download-count-modal [role="button"] {
  display: block;
  width: 100%;
  text-align: center;
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  padding: 12px;
  background-color: hsl(200, 100%, 53%);
  cursor: pointer;
}
.download-count-modal button:hover,
.download-count-modal [role="button"]:hover {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.download-count-modal button:active,
.download-count-modal [role="button"]:active {
  background-color: hsl(200, 100%, 53%);
}
.download-count-modal button.secondary,
.download-count-modal [role="button"].secondary {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 91%);
  font-weight: 400;
}
.download-count-modal button.secondary:hover,
.download-count-modal [role="button"].secondary:hover {
  background-color: hsl(0, 0%, 94%);
}
.download-count-modal .downloads-remaining {
  margin: 24px 0 30px 0;
}
button.emoji-picker {
  background-color: hsl(0, 0%, 91%);
  padding: 2px 4px;
  line-height: 1;
  border: none;
}
button.emoji-picker img {
  opacity: 0.85;
  pointer-events: none;
}
.emoji-popup {
  min-width: 352px;
  min-height: 435px;
}
em-emoji-picker {
  --border-radius: 0px;
  --shadow: none;
}
.font-picker.select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font-picker-popup {
  width: 416px;
  max-width: 100vw;
}
.font-picker-popup .categories {
  text-transform: capitalize;
}
.font-picker-popup .categories > [data-value="My Fonts"],
.font-picker-popup .categories > [data-value="monospace"] {
  box-shadow: 0 1px 0 0 hsl(0, 0%, 91%);
}
.font-picker-popup .select-list .item {
  position: relative;
}
.font-picker-popup .select-list .item .feature-tag {
  align-self: center;
}
.font-picker-popup .select-list .item[aria-selected="true"] .feature-tag {
  color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
}
.font-picker-popup .select-list .item[aria-selected="true"] .extra {
  background-color: hsl(200, 100%, 63%);
}
.font-picker-popup .select-list .item[aria-selected="true"] .extra svg * {
  fill: hsl(0, 0%, 100%);
}
.font-picker-popup .select-list .item .extra {
  opacity: 0;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
}
.font-picker-popup .select-list .item:hover .extra {
  opacity: 1;
}
.font-uploader .button,
.font-uploader button,
.font-uploader a[role="button"] {
  padding: 0 12px;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}
.font-uploader .button svg path,
.font-uploader button svg path,
.font-uploader a[role="button"] svg path {
  fill: rgba(255, 255, 255, 0.85);
}
.font-uploader .button.secondary svg path,
.font-uploader button.secondary svg path,
.font-uploader a[role="button"].secondary svg path {
  fill: rgba(0, 0, 0, 0.5);
}
.font-uploader .note {
  margin: 0px 8px;
  text-align: center;
}
.my-fonts-empty {
  align-self: center;
  text-align: center;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: -1;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-empty {
  align-self: center;
  text-align: center;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: -1;
  padding: 16px;
  color: rgba(0, 0, 0, 0.42);
}
.recommended {
  grid-column-start: 2;
  grid-column-end: -1;
}
.select-list.recommended,
.select-list.variants {
  border-right-width: 0 !important;
}
.editor-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
}
.editor-form select,
.editor-form input[type="text"] {
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}
.editor-form-key-values {
  display: grid;
  grid-template-columns: 1fr minmax(30%, auto);
  gap: 16px;
  align-items: center;
}
.editor-form-key {
  grid-column: 1;
  display: flex;
  align-items: center;
}
.editor-form-value {
  grid-column: 2;
}
.editor-form-comment {
  grid-column: 1 / span 2;
  color: hsl(0, 0%, 50%);
  font-size: 14px;
  line-height: 20px;
}
.editor-form-comment ol,
.editor-form-comment ul {
  padding-left: 32px;
  margin: 4px 0;
}
.editor-form-comment li {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.getting-started .editor-modal-box {
  width: 1360px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 20px 40px;
  gap: 25px;
  text-align: center;
  justify-items: center;
  justify-content: stretch;
}
.getting-started .lesson-ratio {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  width: auto;
  height: auto;
}
.getting-started .lesson {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  width: 100%;
  height: 100%;
  position: relative;
}
.getting-started .lesson .play-button-overlayed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
}
.getting-started .lesson video {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
  border-radius: 0;
}
.getting-started .lesson-transcript {
  max-width: 600px;
}
.getting-started .step-counter {
  position: absolute;
  margin-left: 20px;
  color: hsl(0, 0%, 80%);
  font-weight: normal;
  letter-spacing: 0.05em;
}
.getting-started button:not(.secondary) {
  font-size: 18px;
}
.getting-started .step-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.getting-started .try {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
  background-color: hsl(0, 0%, 100%);
  position: absolute;
  bottom: 48px;
  left: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 360px;
  padding: 10px;
  text-align: center;
}
.getting-started .try .step-video-thumb {
  width: 100%;
  border-radius: 0;
  outline: 1px solid hsl(0, 0%, 91%);
}
.getting-started .pips {
  display: flex;
  font-size: 32px;
  line-height: 0.8;
}
.getting-started .pip {
  color: rgba(0, 0, 0, 0.2);
}
.getting-started .pip.done {
  color: rgba(0, 0, 0, 0.85);
}
.getting-started .pip::before {
  content: "•";
}
.codemirror-widget-container {
  cursor: auto;
}
.code-editor .CodeMirror,
.text-editor .CodeMirror {
  background: transparent;
  height: auto;
  min-height: 24px;
}
.code-editor .CodeMirror.CodeMirror-focused,
.text-editor .CodeMirror.CodeMirror-focused {
  border-radius: 4px;
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.code-editor .CodeMirror .CodeMirror-selected,
.text-editor .CodeMirror .CodeMirror-selected {
  opacity: 0;
}
.code-editor .CodeMirror.CodeMirror-focused .CodeMirror-selected,
.text-editor .CodeMirror.CodeMirror-focused .CodeMirror-selected {
  opacity: 1;
}
.code-editor .CodeMirror {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 18px;
}
.code-editor .CodeMirror.CodeMirror-wrap pre.CodeMirror-line,
.code-editor .CodeMirror.CodeMirror-wrap pre.CodeMirror-line-like {
  word-break: break-all;
}
.code-editor:not(.readonly) .cm-number {
  cursor: url("/editor/cursors/resize-arrows-cursor-0-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
}
.expression-editor {
  position: relative;
}
.expression-editor .code-editor {
  isolation: isolate;
}
.expression-editor.changed .CodeMirror.CodeMirror-focused {
  box-shadow: 0 0 0 2px hsl(150, 73%, 60%);
}
.expression-editor.changed .CodeMirror-linewidget {
  opacity: 0.5;
}
.expression-editor-commit {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background-color: hsla(150, 73%, 60%, 0.6);
  border-radius: 0 0 0 6px;
  padding: 3px;
}
.expression-editor-commit:hover {
  background-color: hsl(150, 73%, 60%);
}
.canvas-text-parameter-popup {
  min-width: 32px;
  max-width: 300px;
  padding: 4px;
  min-height: 34px;
}
.canvas-text-parameter-popup .CodeMirror.CodeMirror-focused {
  box-shadow: none;
}
.canvas-text-parameter-popup .CodeMirror-selected {
  background-color: hsl(200, 100%, 83%);
}
.text-editor .CodeMirror {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 14px;
  line-height: 18px;
}
.text-editor .CodeMirror.CodeMirror-wrap pre.CodeMirror-line,
.text-editor .CodeMirror.CodeMirror-wrap pre.CodeMirror-line-like {
  word-break: break-word;
}
.text-editor .CodeMirror-line * {
  color: rgba(0, 0, 0, 0.85);
}
.text-editor .cm-comment {
  color: rgba(92, 114, 103, 0.91);
}
.CodeMirror-hints {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  margin: 0px 0 0 -4px;
  padding: 0;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
}
.CodeMirror-hints .CodeMirror-hint {
  font-size: 14px;
  line-height: 18px;
  border-radius: 0;
  padding: 0 4px;
}
.CodeMirror-hints .code-hint-my {
  color: rgba(0, 0, 0, 0.85);
}
.CodeMirror-hints .code-hint-builtin {
  color: rgba(0, 0, 0, 0.5);
}
.CodeMirror-hints .CodeMirror-hint-active {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.CodeMirror-dialog {
  position: absolute;
  left: 0;
  right: 0;
  background: inherit;
  z-index: 15;
  padding: 0.1em 0.8em;
  overflow: hidden;
  color: inherit;
}
.CodeMirror-dialog-bottom {
  bottom: 0;
}
.CodeMirror-dialog-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
  background: hsl(0, 0%, 96%);
  border-color: hsl(0, 0%, 80%);
  border-width: 0;
  max-width: calc(100% - 8px);
  left: auto;
  top: 4px;
  right: 4px;
  padding: 4px 4px 4px 8px;
}
.CodeMirror-dialog input {
  width: 20em;
  color: inherit;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  border-radius: 4px;
  border-width: 0;
  background-color: hsl(0, 0%, 94%);
}
.CodeMirror-dialog input:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.CodeMirror-search-label {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.CodeMirror-search-hint {
  display: none;
}
.CodeMirror-dialog button {
  font-size: 70%;
}
.inspector {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  border-top: 1px solid hsl(0, 0%, 91%);
}
.inspector-section {
  display: flex;
  flex-direction: column;
}
.inspector-section:not(:first-of-type) {
  border-top: 1px solid hsl(0, 0%, 91%);
}
.inspector-section.editing-definition {
  background-color: hsl(0, 0%, 94%);
}
.component-embed .inspector-section {
  border-top: none;
  background-color: hsl(0, 0%, 96%);
}
.component-embed .inspector-row:last-child {
  margin-bottom: 0;
}
.inspector-row {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  padding: 0 8px;
  margin-bottom: 6px;
}
.inspector-row.comment {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  cursor: text;
}
.inspector-indent {
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 18px;
}
.inspector-indent.hovered {
  background-color: hsl(200, 100%, 83%);
}
.inspector-header {
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  gap: 4px;
  align-items: center;
  padding-top: 6px;
}
.inspector-header:hover .extra-hidden {
  visibility: visible;
}
.inspector-header-label {
  display: flex;
  gap: 2px;
}
.inspector-header-space {
  flex-grow: 1;
}
.inspector-header-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: rgba(0, 0, 0, 0.5);
}
.inspector-header-icon * {
  fill: rgba(0, 0, 0, 0.5);
}
.inspector-header-icon .alpha-background {
  fill: none;
}
.inspector-header-name,
.parameter-folder-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}
.inspector-header-name.editable,
.parameter-folder-name.editable {
  font-weight: 600;
}
.inspector-header-enabled input[type="checkbox"] {
  display: block;
  margin: 3px 6px 3px 0;
}
.inspector-header-extra {
  display: flex;
}
.inspector-header-extra div {
  margin-left: 12px;
}
.inspector-header-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.42);
  cursor: pointer;
}
.inspector-header-title:hover {
  color: rgba(0, 0, 0, 0.6);
}
.parameter-row {
  flex-direction: column;
}
.parameter,
.parameter-folder {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  gap: 4px;
}
.parameter .extra,
.parameter-folder .extra {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.parameter:hover .extra-hidden,
.parameter-folder:hover .extra-hidden {
  visibility: visible;
}
.parameter {
  align-items: top;
  min-height: 26px;
}
.parameter .text-editor {
  flex-grow: 1;
}
.parameter .number-scrubber,
.parameter .font-picker.select,
.parameter select {
  color: rgba(0, 0, 0, 0.42);
}
.parameter .select,
.parameter select {
  text-overflow: ellipsis;
}
.parameter.overridden .number-scrubber,
.parameter.overridden .expression-input,
.parameter.overridden .select-input > select,
.parameter.overridden .font-picker.select,
.parameter.overridden .unit-select,
.parameter.overridden .text-literal-input {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(150, 61%, 85%);
}
.parameter.longname,
.parameter.multiline {
  position: relative;
  flex-direction: column;
}
.parameter.longname .parameter-name,
.parameter.multiline .parameter-name {
  width: auto;
  max-width: calc(100% - 22px);
}
.parameter.longname .parameter-value,
.parameter.multiline .parameter-value {
  margin-left: 24px;
  width: calc(100% - 24px);
}
.parameter.longname .extra,
.parameter.multiline .extra {
  position: absolute;
  top: 0;
  right: 0;
}
.parameter.selectable .parameter-name {
  cursor: pointer;
}
.parameter.hovered .parameter-name {
  color: hsl(200, 100%, 53%);
}
.parameter.hidden .parameter-name {
  color: rgba(0, 0, 0, 0.42);
}
.parameter.selected .parameter-name {
  color: hsl(200, 100%, 63%);
}
.parameter-folder {
  cursor: pointer;
  align-items: center;
  background-color: hsl(0, 0%, 91%);
  margin-top: 6px;
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
}
.parameter-folder.hovered {
  background-color: hsl(200, 100%, 83%);
}
.parameter-folder-name {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 600;
}
.parameter-name,
.parameter-folder-name,
.instance-setting-name {
  flex-shrink: 0;
  padding: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parameter-name,
.instance-setting-name {
  width: 120px;
}
.parameter-value,
.instance-setting-value {
  min-width: 50px;
  flex: 1 1 auto;
}
.comment {
  display: block;
  color: hsl(0, 0%, 70%);
  margin-bottom: 12px;
  width: calc(100% - 26px);
}
.comment p {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.comment p + p {
  margin: 8px 0 0 0;
}
.comment .ProseMirror.ProseMirror-focused {
  color: rgba(0, 0, 0, 0.6);
  background-color: hsl(0, 0%, 94%);
  padding: 4px;
  margin: -4px;
}
.parameter-code-note {
  color: rgba(0, 0, 0, 0.42);
  white-space: pre-wrap;
}
.parameter-reorder-hit-target {
  position: relative;
  top: 1px;
  left: -6px;
  right: -6px;
  z-index: 3;
  background-color: red;
}
.parameter-reorder-hit-target:last-child {
  transform: translate(0, 6px);
}
.parameter-reorder-hit-target::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -12px;
  width: calc(100% - 24px);
}
.parameter-reorder-hit-target.hovered::after {
  content: "";
  position: absolute;
  bottom: 2px;
  height: 4px;
  left: 0;
  right: -12px;
  background-color: hsl(200, 100%, 63%);
}
.instance-settings-category {
  color: rgba(0, 0, 0, 0.6);
  gap: 4px;
}
.instance-settings-category-name {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 12px;
  line-height: 20px;
}
.instance-setting {
  display: flex;
  gap: 4px;
  background-color: hsl(0, 0%, 94%);
}
.instance-setting-value {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 3px 0;
}
.evaluation-result,
.expression-message-group {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.evaluation-result,
.expression-error {
  padding: 4px 4px 0 4px;
}
.evaluation-result {
  color: hsl(0, 0%, 70%);
}
.expression-error {
  color: red;
}
.expression-message-group {
  position: relative;
  z-index: 2;
}
.expression-message {
  padding: 4px;
}
.expression-message.log,
.expression-message.info,
.expression-message.geometry,
.expression-message.guide {
  background-color: hsl(0, 0%, 87%);
}
.expression-message.warn {
  background-color: hsl(42, 100%, 88%);
}
.expression-message.error {
  background-color: hsl(0, 55%, 85%);
}
.evaluation-result,
.expression-message {
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.expression-input {
  background-color: hsl(0, 0%, 91%);
  border-radius: 4px;
  flex: 1 1 auto;
  width: 100%;
}
.mixed-hint {
  margin: 8px 0;
  padding: 2px 6px;
  line-height: 1;
}
.literal-input {
  display: flex;
  align-items: center;
  white-space: pre;
  gap: 4px;
}
.literal-input .number-scrubber,
.literal-input select {
  flex: 0 1 120px;
}
.literal-input select {
  max-width: 100%;
}
.literal-input select.unit-select {
  width: 64px;
  flex: 0 1 64px;
}
.literal-input .mixed-hint {
  margin: 0 8px;
}
.literal-input .edit-expression {
  cursor: text;
  flex: 1 1 0px;
  height: 20px;
  font-size: 10px;
}
.number-scrubber {
  touch-action: none;
  display: inline-flex;
  height: 20px;
  padding: 1px 7px;
  border-radius: 99px;
  background-color: hsl(0, 0%, 91%);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 18px;
  outline: none;
  cursor: url("/editor/cursors/resize-arrows-cursor-0-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
}
.number-scrubber.disabled {
  cursor: default;
}
.number-scrubber .prefix,
.number-scrubber .suffix {
  color: rgba(0, 0, 0, 0.42);
  flex: 1 1 50%;
}
.number-unit,
.number-ellipsis {
  color: rgba(0, 0, 0, 0.42);
  flex: 0 0 auto;
}
.number-value {
  flex: 0 0 auto;
  text-align: center;
}
.text-literal-input {
  border-radius: 4px;
  background-color: hsl(0, 0%, 91%);
}
.text-literal-input .text-editor {
  flex: 1 0 100%;
}
.color-input,
.number-scrubber,
.select-input,
.font-picker,
.boolean-input,
.literal-input .icon-button {
  margin: 3px 0;
}
.oi-item {
  display: flex;
  align-items: center;
}
.oi-item:hover .oi-expander {
  border-left-color: rgba(0, 0, 0, 0.2);
}
.oi-expander {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.05s;
  margin: 0px 6px 0 0;
}
.oi-expander.expanded {
  transform: rotate(90deg);
}
.oi-expander.childless {
  visibility: hidden;
}
.oi-name::after {
  content: ": ";
}
.oi-children {
  margin-left: 16px;
}
.oi-item-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.oi-name {
  color: purple;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.oi-type-number {
  color: hsl(158, 87%, 28%);
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  cursor: text;
}
.oi-type-string {
  color: hsl(0, 77%, 36%);
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  cursor: text;
}
.oi-type-object-class {
  color: hsl(180, 100%, 25%);
}
.oi-type-object-entries::before {
  content: " {";
}
.oi-type-object-entries::after {
  content: "}";
}
.oi-type-object-key::after {
  content: ": ";
}
.oi-type-object-entry:not(:last-child)::after {
  content: ", ";
}
.oi-type-array::before {
  content: "[";
}
.oi-type-array::after {
  content: "]";
}
.oi-type-array-item:not(:last-child)::after {
  content: ", ";
}
.oi-detailed .oi-detail-number {
  display: none;
}
.oi-detailed:hover .oi-detail-number {
  display: inline;
}
.oi-detailed:hover .oi-short-number {
  display: none;
}
.oi-short-number::after {
  content: "…";
}
.oi-number-units {
  color: hsl(0, 0%, 70%);
}
.markdown {
  line-height: 20px;
  font-size: 14px;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  line-height: normal;
  margin: 0;
}
.markdown h1:not(:first-child),
.markdown h2:not(:first-child),
.markdown h3:not(:first-child),
.markdown h4:not(:first-child),
.markdown h5:not(:first-child),
.markdown h6:not(:first-child) {
  margin-top: 0.5em;
}
.markdown h1:not(:last-child),
.markdown h2:not(:last-child),
.markdown h3:not(:last-child),
.markdown h4:not(:last-child),
.markdown h5:not(:last-child),
.markdown h6:not(:last-child) {
  margin-bottom: 0.5em;
}
.markdown p,
.markdown ol,
.markdown ul {
  margin: 0;
}
.markdown p:not(:first-child),
.markdown ol:not(:first-child),
.markdown ul:not(:first-child) {
  margin-top: 0.8em;
}
.markdown p:not(:last-child),
.markdown ol:not(:last-child),
.markdown ul:not(:last-child) {
  margin-bottom: 0.8em;
}
.markdown ol,
.markdown ul {
  padding-left: 2em;
}
.markdown code {
  line-height: 18px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  border-radius: 4px;
  background-color: hsl(0, 0%, 94%);
}
.markdown code:not(.inline) {
  display: block;
  padding: 10px 14px;
  white-space: pre;
  overflow-x: scroll;
}
.markdown code.inline {
  display: inline;
  padding: 2px 4px;
  margin: -2px 0;
  overflow-x: scroll;
}
.instance-inspector-messages {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-direction: column;
  gap: 6px;
}
.instance-inspector-message-info,
.instance-inspector-message-error,
.instance-inspector-message-warning {
  padding: 8px 16px 8px 8px;
  border-radius: 4px;
  display: flex;
  align-items: top;
  gap: 8px;
}
.instance-inspector-message-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.instance-inspector-message-text {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  white-space: pre-line;
  word-break: break-word;
  cursor: text;
}
.instance-inspector-message-info {
  background-color: hsl(150, 61%, 85%);
}
.instance-inspector-message-error {
  background-color: hsl(0, 55%, 85%);
}
.instance-inspector-message-warning {
  background-color: hsl(42, 100%, 88%);
}
.repetitions-sequence {
  display: flex;
  white-space: pre;
}
.repetitions-sequence .first-repetitions {
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-parameters-summary {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.42);
  align-items: center;
  height: 26px;
  gap: 8px;
}
.inspector-parameters-summary-comment {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.inspector-parameters-summary-names {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.image-input:not(:hover) button.hidden {
  display: none;
}
.image-input svg * {
  fill: rgba(0, 0, 0, 0.5);
}
.image-input-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;
  height: 128px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  overflow: hidden;
}
.top-menu {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 28px;
  background-color: hsl(0, 0%, 91%);
  overflow: hidden;
}
.top-menu-left {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.top-menu-right {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-menu-popup {
  border-radius: 0 0 4px 4px;
}
.top-menu-project {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  overflow: hidden;
  justify-content: center;
}
.top-menu-project-title {
  padding: 0 8px;
  flex: 0 1 auto;
  display: flex;
  gap: 6px;
}
.top-menu-project-title a {
  color: rgba(0, 0, 0, 0.5);
}
.top-menu-project-title a:hover {
  color: rgba(0, 0, 0, 0.85);
}
.top-menu-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  font-weight: 600;
}
.top-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  z-index: 1001;
  padding: 0 8px;
  color: rgba(0, 0, 0, 0.85);
}
.top-menu-item.open {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.top-menu-item.open .icon20 svg * {
  fill: hsl(0, 0%, 100%);
}
.top-menu-item.has-icon {
  font-weight: 600;
}
.top-menu-biglink-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 16px;
}
.top-menu-biglink-item:hover {
  background-color: hsl(200, 100%, 63%);
}
.top-menu-biglink-item:hover .top-menu-biglink-title {
  color: rgba(255, 255, 255, 0.95);
}
.top-menu-biglink-item:hover .top-menu-biglink-description {
  color: rgba(255, 255, 255, 0.85);
}
.top-menu-biglink-item:hover .icon20 svg * {
  fill: rgba(255, 255, 255, 0.85);
}
.top-menu-biglink-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  line-height: 20px;
  display: flex;
  gap: 8px;
}
.top-menu-biglink-description {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
  max-width: 196px;
}
.top-menu-item-icon {
  width: 20px;
  height: 20px;
}
.top-menu-item-icon * {
  fill: rgba(0, 0, 0, 0.85);
}
.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 50px;
}
.editor-modal-box {
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-radius: 12px;
  background-color: hsl(0, 0%, 96%);
  width: 1000px;
  max-height: 100%;
  min-height: 200px;
}
.editor-modal-box.width-auto {
  width: auto;
}
.editor-modal-box h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
}
.editor-modal-box h2 {
  margin: 8px 0;
  font-size: 16px;
  line-height: 1;
}
.editor-modal-contents {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 16px 0;
  border-bottom: 1px solid hsl(0, 0%, 91%);
  border-top: 1px solid hsl(0, 0%, 91%);
}
.editor-modal-actions,
.editor-modal-title {
  align-self: center;
}
.editor-modal-actions {
  display: flex;
  gap: 8px;
}
.calibrate-real-size {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  overflow: hidden;
  padding-top: 16px;
}
.calibrate-real-size p {
  margin: 0;
}
.calibrate-real-size-preview {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  height: 500px;
  margin-top: 16px;
}
.calibrate-real-size-preview .ruler-bg {
  fill: hsl(45, 86%, 62%);
  stroke: hsl(28, 87%, 62%);
}
.calibrate-real-size-preview .tick-marks {
  stroke: hsl(284, 59%, 64%);
  fill: none;
}
.calibrate-real-size-preview .major {
  stroke: hsla(0, 0%, 0%, 0.75);
}
.calibrate-real-size-preview .minor {
  stroke: hsla(0, 0%, 0%, 0.25);
}
.calibrate-real-size-preview .labels {
  font-weight: bold;
  fill: hsla(0, 0%, 0%, 0.4);
}
.calibrate-real-size-controls {
  flex: 0 0 auto;
}
.calibrate-real-size-controls .input-range {
  width: 550px;
  max-width: 100%;
}
.calibrate-real-size-controls .input-number {
  font-size: 14px;
  max-width: 12ch;
}
.import-project {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.import-project label {
  cursor: pointer;
  height: 32px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  background-color: hsl(0, 0%, 100%);
}
.import-project label:hover {
  border-color: hsl(200, 100%, 83%);
}
.import-project label.selected {
  border-color: hsl(200, 100%, 53%);
  color: hsl(200, 100%, 53%);
}
.import-project label.locked {
  border-color: hsl(0, 0%, 70%);
  color: hsl(0, 0%, 70%);
}
.import-project label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.import-project input[type="checkbox"] {
  margin: 8px 6px;
  flex: 0 0 auto;
}
.import-project-categories {
  display: flex;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.import-project-category {
  flex: 0 1 250px;
  overflow: hidden;
}
.import-project-category h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-project-selectall {
  text-align: center;
  margin-top: 16px;
}
.pointer-init-modal-contents {
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pointer-init-modal-contents .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 8px 16px;
}
.pointer-init-modal-contents button {
  display: flex;
  gap: 16px;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
  padding: 8px 16px;
}
.save-confirm-modal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.save-confirm-modal ul {
  margin-bottom: 8px;
  padding-left: 16px;
  overflow: hidden;
}
.save-confirm-modal li {
  list-style: none;
  font-size: 14px;
  line-height: 20px;
}
.save-confirm-modal .save-confirm-modal-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.save-confirm-modal .save-confirm-modal-actions button {
  flex: 1 1 auto;
}
.create-account-to-download-modal {
  width: 424px;
  padding: 48px 48px 32px 48px;
}
.create-account-to-download-modal .create-account-to-download-message {
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  text-align: center;
  margin: 0 0 32px 0;
}
.select-options-modal-contents {
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select-options-modal-contents textarea {
  font-size: 14px;
  line-height: 20px;
  width: 18em;
  height: auto;
  min-height: 12em;
  padding: 4px;
  border-radius: 4px;
  overflow: auto;
  white-space: pre;
}
.select-options-modal-contents p {
  font-size: 14px;
  line-height: 20px;
  margin: 8px 0 0 0;
  color: rgba(0, 0, 0, 0.5);
}
.simple-modal-box {
  z-index: 1;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: hsl(0, 0%, 96%);
  overflow: hidden;
  width: 500px;
}
.simple-modal-contents {
  padding: 24px 24px 8px 24px;
  overflow-x: hidden;
  overflow-y: auto;
}
.simple-modal-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 24px 24px 24px;
}
.outline {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  overflow: auto;
}
.outline-node {
  /* This position allows outline-reorder-hit-target's to be position absolute.
  */
  position: relative;
}
.outline-node.reorder-parent {
  background-color: hsl(200, 100%, 83%);
}
.outline-children {
  margin-left: 24px;
  /* This position allows outline-reorder-hit-target's to be position absolute.
  */
  position: relative;
  /* This z-index creates a stacking context which makes nested trees go on top
  of their parents. This is important for making outline-reorder-hit-target's
  z-order correctly. */
  z-index: 4;
}
.outline-children.new-context {
  background-color: rgba(0, 0, 0, 0.05);
}
.outline > .outline-children {
  margin: 0;
}
.outline-item {
  position: relative;
  color: rgba(0, 0, 0, 0.42);
  line-height: 22px;
  font-size: 14px;
  padding: 0 4px 0 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
}
.outline-item.hovered {
  border-color: hsl(200, 100%, 83%);
  background-color: hsl(200, 100%, 83%);
}
.outline-item.error {
  border-color: hsl(0, 55%, 85%);
  background-color: hsl(0, 55%, 85%);
}
.outline-item.selected {
  border-color: hsl(200, 100%, 63%);
  background-color: hsl(200, 100%, 63%);
}
.outline-item.selected-indirect {
  border-color: hsl(200, 100%, 83%);
  background-color: hsl(200, 100%, 83%);
}
.outline-item.focused {
  border-radius: 4px;
  color: hsl(200, 100%, 53%);
  border-color: hsl(200, 100%, 53%);
  background-color: hsl(0, 0%, 100%);
}
.outline-item.dragging {
  border-color: hsl(200, 100%, 63%);
  background-color: transparent;
}
.outline-item.hides-selection .expander svg * {
  fill: hsl(200, 100%, 63%);
}
.outline-item .extra {
  flex: 1 0 auto;
  justify-content: flex-end;
  margin-left: 2px;
}
.outline-item:hover .extra-hidden {
  visibility: visible;
}
.within-focus .outline-item {
  color: rgba(0, 0, 0, 0.85);
}
.outline-item.hide-expander .expander,
.outline-item.childless .expander {
  visibility: hidden;
}
.outline-item-main {
  flex: 0 1 auto;
  display: flex;
  overflow: hidden;
}
.outline-item-name {
  flex: 0 1 auto;
  overflow: hidden;
  min-width: 20px;
  margin-right: 6px;
}
.outline-reorder-hit-target {
  position: absolute;
  left: 0;
  right: 0;
}
.outline-reorder-hit-target.before {
  top: -12px;
  height: 24px;
  z-index: 3;
}
.outline-reorder-hit-target.after {
  bottom: -12px;
  height: 24px;
  z-index: 3;
}
.outline-reorder-hit-target.inside {
  top: 4px;
  height: 16px;
  z-index: 4;
}
.outline-reorder-hit-target.hovered:not(.inside)::after {
  content: "";
  position: absolute;
  top: 11px;
  height: 4px;
  left: 0;
  right: 0;
  background-color: hsl(200, 100%, 63%);
}
.outline-modifier-reorder-hit-target {
  position: absolute;
  top: 0;
  bottom: 0;
}
.outline-modifier-reorder-hit-target.before {
  left: 0;
  right: 50%;
}
.outline-modifier-reorder-hit-target.before.hovered::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 4px;
  background-color: hsl(200, 100%, 63%);
}
.outline-modifier-reorder-hit-target.after {
  left: 50%;
  right: 0;
}
.outline-modifier-reorder-hit-target.after.hovered::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 4px;
  background-color: hsl(200, 100%, 63%);
}
.outline-modifier-reorder-hit-target.inside {
  left: 0;
  right: 0;
}
.badge {
  position: relative;
  flex: 0 0 auto;
}
.badge.transform svg {
  opacity: 0.5;
}
.badge.hovered {
  background-color: hsl(150, 72%, 75%) !important;
}
.badge.selected-indirect {
  background-color: hsl(150, 72%, 75%) !important;
}
.badge.selected {
  background-color: hsl(150, 73%, 60%) !important;
}
.badge.error {
  background-color: hsl(0, 55%, 85%) !important;
}
.badge svg {
  opacity: 0.3;
  width: 20px;
  height: 20px;
}
.badge .image-fill {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  background-position: center;
  background-size: cover;
  border-radius: 99px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
}
.badge,
.modifier-badge {
  margin: 0 1px;
}
.badge,
.modifier-badge-pill {
  color: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 99px;
  background-color: hsl(0, 0%, 100%);
  height: 22px;
}
.modifier-badge {
  position: relative;
  min-width: 34px;
  flex: 0 1000 auto;
}
.modifier-badge.hovered .modifier-badge-pill {
  background-color: hsl(150, 72%, 75%) !important;
}
.modifier-badge.selected-indirect .modifier-badge-pill {
  background-color: hsl(150, 72%, 75%) !important;
}
.modifier-badge.selected .modifier-badge-pill {
  background-color: hsl(150, 73%, 60%) !important;
}
.modifier-badge.disabled .modifier-badge-name {
  text-decoration: line-through;
}
.modifier-badge.error .modifier-badge-pill {
  background-color: hsl(0, 55%, 85%) !important;
}
.within-focus .badge svg {
  opacity: 1;
}
.within-focus .badge,
.within-focus .modifier-badge-pill {
  color: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.25);
}
.within-focus .badge.transform,
.within-focus .modifier-badge-pill.transform {
  color: rgba(0, 0, 0, 0.5);
}
.within-focus .modifier-badge-name {
  color: rgba(0, 0, 0, 0.85);
}
.within-focus .modifier-badge-icon * {
  fill: rgba(0, 0, 0, 0.85);
}
.modifier-badge-pill {
  color: rgba(0, 0, 0, 0.42);
  display: flex;
  padding: 0 7px;
}
.modifier-badge-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 2px 0 -1px;
}
.modifier-badge-icon * {
  fill: rgba(0, 0, 0, 0.42);
}
.modifier-badge-name {
  line-height: 20px;
  color: rgba(0, 0, 0, 0.42);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.project-settings {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px;
  background-color: hsl(0, 0%, 100%);
}
.project-settings .doc-editor-title,
.project-settings .editor-form {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
html.read-only,
body.read-only {
  overflow: unset;
}
.read-only .doc-editor {
  position: relative;
  overflow: unset;
  min-width: 288px;
}
.select-list-group-with-query-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid hsl(0, 0%, 91%);
}
.select-list-group-with-query-header .divider {
  width: 1px;
  height: 16px;
  margin: 0 8px;
  flex: 0 0 auto;
  background-color: hsl(0, 0%, 91%);
}
.select-list-group-with-query-header a[role="button"].help-link {
  border-radius: 99px;
  padding: 0 0;
  width: 24px;
  height: 24px;
}
.query-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 75px;
  flex: 1 1 auto;
}
.query-label .icon20 svg * {
  fill: hsl(0, 0%, 70%);
}
.query-label .query {
  min-width: 50px;
  flex: 1 1 auto;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid hsl(0, 0%, 91%);
  height: 24px;
}
.select-list-group {
  height: 340px;
  max-height: calc(100vh - 30px);
  display: grid;
  grid-template-columns: 3fr 4fr 2fr;
  grid-template-rows: auto;
}
.select-list {
  border-right: 1px solid hsl(0, 0%, 91%);
}
.select-list:first-of-type {
  grid-row-start: 1;
  grid-row-end: -1;
}
.select-list .item {
  padding: 2px 8px 2px 8px;
  cursor: pointer;
  display: flex;
}
.select-list .item .label {
  flex: 1 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-list .item:focus {
  outline-width: 1px;
}
.select-list .item:focus:not(:focus-visible) {
  outline: none;
}
.select-list .item:focus-visible {
  outline-width: 1px;
}
.select-list .item[aria-selected="true"] {
  background-color: hsl(200, 100%, 63%);
  color: hsl(0, 0%, 100%);
}
.select-list .item[aria-selected="true"] svg path {
  fill: rgba(255, 255, 255, 0.85);
}
.select-list img {
  pointer-events: none;
}
@media screen and (orientation: portrait) and (max-height: 720px) {
  .select-list-group {
    height: calc(40vh - 30px);
  }
}
.shape-picker-popup {
  width: 400px;
  max-width: 100vw;
}
.shape-picker-popup .select-list-group {
  grid-template-columns: 1fr max-content;
}
.shape-picker-popup .select-list[data-key="shape"] {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-auto-rows: 50px;
  overflow-y: scroll;
  padding: 4px;
  gap: 2px;
  border-right-width: 0 !important;
}
.shape-picker-popup .item.shape-tile {
  padding: 3px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background-color: hsl(0, 0%, 100%);
}
.shape-picker-popup .item.shape-tile span {
  display: block;
  width: 100%;
  height: 100%;
}
.shape-picker-popup .item.shape-tile img {
  width: 44px;
  height: 44px;
  opacity: 85%;
}
.shape-picker-popup .item.shape-tile:hover {
  background-color: hsl(0, 0%, 94%);
}
.shape-picker-popup .item.shape-tile:focus-visible {
  outline: none;
}
.shape-picker-popup .item.shape-tile[aria-selected="true"] {
  background-color: hsl(200, 100%, 83%);
}
/*
Note: The class .share-menu is sometimes blocked by ad blockers (!) so we're
using .cuttle-share-menu everywhere here.
*/
.published-status {
  display: none;
}
.published-status.is-shared {
  display: block;
}
.published-status.is-behind svg * {
  fill: hsl(200, 100%, 53%);
}
.open .cuttle-share-menu-icon svg * {
  fill: hsl(0, 0%, 100%);
}
.cuttle-share-menu {
  max-width: 340px;
  padding: 0px 16px;
}
.cuttle-share-menu-option {
  display: flex;
  margin: 4px 0;
}
.cuttle-share-menu-option input {
  margin-top: 5px;
  margin-right: 8px;
}
.cuttle-share-menu-option .cuttle-share-menu-label-title {
  font-size: 14px;
  line-height: 24px;
}
.cuttle-share-menu-option .cuttle-share-menu-label-description {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
}
.cuttle-share-menu-published-button {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: hsl(200, 100%, 43%);
  color: hsl(0, 0%, 100%);
}
.cuttle-share-menu-published-button:hover {
  background-color: hsl(200, 100%, 53%);
}
.cuttle-share-menu-published-button:active {
  background-color: hsl(200, 100%, 43%);
}
.cuttle-share-menu-published-description p {
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0;
}
.cuttle-share-menu-copy-link {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: hsl(200, 100%, 63%);
}
.cuttle-share-menu-copy-link .icon20 svg path {
  fill: hsl(200, 100%, 63%);
}
.cuttle-share-menu-copy-link:hover {
  color: hsl(200, 100%, 53%);
}
.cuttle-share-menu-copy-link:hover svg path {
  fill: hsl(200, 100%, 53%);
}
@keyframes toastMessageUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.toast-container {
  z-index: 2000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}
.toast-message {
  width: -moz-fit-content;
  width: fit-content;
  padding: 16px 24px;
  margin: 0 auto 16px auto;
  background-color: hsl(0, 0%, 100%);
  border-radius: 4px;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  pointer-events: auto;
  border: 1px solid hsl(0, 0%, 50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  animation: 0.25s ease-in 0s 1 toastMessageUp;
}
.toast-message .message {
  font-size: 16px;
  line-height: 24px;
}
.toast-message .next-step {
  font-size: 14px;
  line-height: 20px;
  margin: 4px 0 2px 0;
}
.toast-message .next-step-icon {
  margin-right: 10px;
}
.toast-message.warning {
  border-color: hsl(12, 68%, 47%);
}
.toast-message.error {
  border-color: hsl(12, 68%, 47%);
}
.copy-project-toast {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.viewport-top-bar {
  position: absolute;
  top: 24px;
  left: 20px;
  right: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.toolbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  padding: 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
}
.toolbar .divider {
  width: 1px;
  height: calc(100% - 22px);
  margin: 0 8px;
  flex: 0 0 auto;
  background-color: hsl(0, 0%, 91%);
}
.toolbar .icon-button.menu {
  margin-right: 9px;
}
.tool-button {
  width: 38px;
  height: 38px;
  padding: 9px;
  flex: 0 0 auto;
  cursor: pointer;
}
.tool-button:hover path {
  fill: rgba(0, 0, 0, 0.85);
}
.tool-button.active path {
  fill: hsl(200, 100%, 53%);
}
.tool-button path {
  fill: rgba(0, 0, 0, 0.5);
}
.tool-button.disabled {
  cursor: default;
}
.tool-button.disabled path {
  fill: rgba(0, 0, 0, 0.2);
}
.tool-button.has-menu {
  width: 29px;
  padding-right: 0;
}
.toolbar-left,
.toolbar-right {
  flex: 0 1 50%;
  padding: 0 4px;
}
.panel-top-small {
  height: 32px;
  background-color: hsl(0, 0%, 91%);
}
.panel-top-small .menu-button {
  color: rgba(0, 0, 0, 0.85);
  border-radius: 0;
  display: flex;
  align-items: center;
  border: none;
  background-color: hsl(0, 0%, 91%);
  margin: 0;
  padding: 1px 16px 1px 4px;
}
.panel-top-small .menu-button.active {
  color: hsl(0, 0%, 100%);
  background-color: hsl(200, 100%, 53%);
}
.panel-top-small .menu-button-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}
.panel-top-small .menu-button-icon svg * {
  fill: currentColor;
}
.panel-top-small .menu-button-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 30px;
}
.top-menu-small-popup {
  border-radius: 0 0 4px 4px;
  max-width: 100%;
}
.menu-small-item {
  cursor: pointer;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 16px 16px 16px 4px;
}
.menu-small-item svg * {
  fill: currentColor;
}
.menu-small-item:not(.active):hover {
  color: hsl(0, 0%, 100%);
  background-color: hsl(200, 100%, 53%);
}
.menu-small-item:not(.active):hover .thumbnail path {
  stroke: hsl(0, 0%, 100%);
}
.menu-small-item.active {
  color: hsl(200, 100%, 53%);
  outline: 2px solid transparent;
}
.menu-small-item-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}
.menu-small-item-icon .thumbnail svg,
.menu-small-item-icon svg {
  width: 20px;
  height: 20px;
}
.menu-small-item-icon .thumbnail path {
  fill: none;
  stroke: rgba(0, 0, 0, 0.85);
}
.menu-small-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-small-separator {
  border-bottom: 1px solid hsl(0, 0%, 91%);
  margin: 4px 0;
}
a.menu-small-item {
  color: rgba(0, 0, 0, 0.85);
}
.version-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  line-height: 20px;
}
.version-history-header {
  display: flex;
  padding: 12px;
}
.version-history-header-name {
  flex-grow: 1;
  font-weight: 600;
}
.version-history-scroller {
  overflow-y: auto;
  padding: 12px;
  flex-grow: 1;
}
.version-history-section {
  margin-bottom: 32px;
}
.version-history-section-name {
  font-weight: 600;
}
.version-history-section-description {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.42);
  font-style: italic;
}
img.version-history-preview {
  width: 100%;
  background-color: white;
}
.version-history-snapshot {
  margin-bottom: 32px;
}
.version-history-snapshot.version-history-current .version-history-preview {
  outline: hsl(200, 100%, 53%) 1px solid;
}
.version-history-name {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.42);
}
.version-history-badge {
  display: inline;
  background-color: hsl(150, 72%, 75%);
  color: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  margin: 0 8px;
  border-radius: 4px;
}
.version-history-description {
  color: rgba(0, 0, 0, 0.85);
}
.version-history-date {
  color: rgba(0, 0, 0, 0.42);
}
.version-history-snapshot {
  position: relative;
}
.version-history-snapshot .version-history-extra {
  display: none;
}
.version-history-snapshot:hover .version-history-extra {
  display: flex;
}
.version-history-extra {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  top: 8px;
  right: 8px;
  left: 8px;
  align-items: center;
}
.version-history-extra .button {
  margin-right: 8px;
}
.editable-comment .text-editor {
  background-color: hsl(0, 0%, 100%);
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 4px;
}
.editable-comment .editable-comment-value {
  white-space: pre-wrap;
}
.editable-comment .editable-comment-edit {
  cursor: pointer;
  font-style: italic;
  color: rgba(0, 0, 0, 0.42);
}
.editable-comment .editable-comment-edit:hover {
  color: hsl(200, 100%, 53%);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 14px;
  line-height: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 98%);
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}
/* Loading indicator */
.loading-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #ddd;
  border-top-color: #aaa;
  animation: loading-indicator 1s linear infinite;
}
@keyframes loading-indicator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Some reusable button styles */
.button,
button,
input[type="submit"],
a[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background-color: hsl(200, 100%, 53%);
  color: hsl(0, 0%, 100%);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button svg *,
button svg *,
input[type="submit"] svg *,
a[role="button"] svg * {
  fill: hsl(0, 0%, 100%);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
a[role="button"]:hover {
  color: hsl(0, 0%, 100%);
  background-color: hsl(200, 100%, 63%);
}
.button:focus,
button:focus,
input[type="submit"]:focus,
a[role="button"]:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.button.secondary,
button.secondary,
input[type="submit"].secondary,
a[role="button"].secondary {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 94%);
}
.button.secondary:hover,
button.secondary:hover,
input[type="submit"].secondary:hover,
a[role="button"].secondary:hover {
  background-color: hsl(0, 0%, 98%);
}
.button.secondary:disabled,
button.secondary:disabled,
input[type="submit"].secondary:disabled,
a[role="button"].secondary:disabled {
  background-color: hsl(0, 0%, 94%);
}
.button.secondary svg *,
button.secondary svg *,
input[type="submit"].secondary svg *,
a[role="button"].secondary svg * {
  fill: rgba(0, 0, 0, 0.85);
}
.button:disabled,
button:disabled,
input[type="submit"]:disabled,
a[role="button"]:disabled {
  opacity: 0.5;
  cursor: default;
}
.button.small-pill,
button.small-pill,
input[type="submit"].small-pill,
a[role="button"].small-pill {
  line-height: 20px;
  border-radius: 999px;
  border: none;
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 91%);
}
.button.small-pill:hover,
button.small-pill:hover,
input[type="submit"].small-pill:hover,
a[role="button"].small-pill:hover {
  color: rgba(0, 0, 0, 0.85);
  background-color: hsl(0, 0%, 80%);
}
.button.small-pill:hover:disabled,
button.small-pill:hover:disabled,
input[type="submit"].small-pill:hover:disabled,
a[role="button"].small-pill:hover:disabled {
  background-color: hsl(0, 0%, 91%);
}
/* Some elements */
body[data-css-cursor="ew-resize"] * {
  cursor: url("/editor/cursors/resize-arrows-cursor-0-1x.png") 14 14, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default !important;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default !important;
}
body[data-css-cursor="grab"] * {
  cursor: url("/editor/cursors/grab-cursor-1x.png") 13 13, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default !important;
  cursor: image-set(url("/editor/cursors/grab-cursor-2x.png") 2x, url("/editor/cursors/grab-cursor-1x.png") 1x) 13 13, default !important;
}
body[data-css-cursor="grabbing"] * {
  cursor: url("/editor/cursors/grabbing-cursor-1x.png") 13 13, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default !important;
  cursor: image-set(url("/editor/cursors/grabbing-cursor-2x.png") 2x, url("/editor/cursors/grabbing-cursor-1x.png") 1x) 13 13, default !important;
}
body[data-css-cursor="select"] * {
  cursor: url("/editor/cursors/select-cursor-1x.png") 4 4, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/select-cursor-2x.png") 2x, url("/editor/cursors/select-cursor-1x.png") 1x) 4 4, default !important;
  cursor: image-set(url("/editor/cursors/select-cursor-2x.png") 2x, url("/editor/cursors/select-cursor-1x.png") 1x) 4 4, default !important;
}
body[data-css-cursor="select-split-handles"] * {
  cursor: url("/editor/cursors/select-split-handles-cursor-1x.png") 4 4, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/select-split-handles-cursor-2x.png") 2x, url("/editor/cursors/select-split-handles-cursor-1x.png") 1x) 4 4, default !important;
  cursor: image-set(url("/editor/cursors/select-split-handles-cursor-2x.png") 2x, url("/editor/cursors/select-split-handles-cursor-1x.png") 1x) 4 4, default !important;
}
body[data-css-cursor="duplicate"] * {
  cursor: url("/editor/cursors/duplicate-cursor-1x.png") 4 4, default !important;
  cursor: -webkit-image-set(url("/editor/cursors/duplicate-cursor-2x.png") 2x, url("/editor/cursors/duplicate-cursor-1x.png") 1x) 4 4, default !important;
  cursor: image-set(url("/editor/cursors/duplicate-cursor-2x.png") 2x, url("/editor/cursors/duplicate-cursor-1x.png") 1x) 4 4, default !important;
}
svg {
  width: 100%;
  height: 100%;
}
/* Components */
.file-drop-zone {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 4000;
  background-color: rgba(255, 255, 255, 0.8);
  border: 12px dashed #ddd;
}
.icon-label-button {
  display: flex;
  height: 20px;
  line-height: 20px;
  padding-right: 4px;
}
.icon-label-button .icon20 {
  flex: 0 0 20px;
  margin-right: 4px;
}
.icon-button,
.icon-label-button {
  cursor: pointer;
}
.icon-button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  overflow: hidden;
}
.icon-button:hover {
  opacity: 0.85;
}
.icon-button:disabled {
  opacity: 0.5;
}
.icon-button.active * {
  fill: hsl(200, 100%, 53%);
}
.icon-button svg {
  flex: 0 0 20px;
}
.extra {
  display: flex;
}
.extra > *:not(:last-child) {
  margin-right: 4px;
}
.extra-hidden {
  visibility: hidden;
}
.app,
.app-rect-watcher {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-top {
  flex-basis: 24px;
  flex-shrink: 0;
  background-color: hsl(0, 0%, 91%);
}
.main {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.panel-left {
  max-width: 200px;
  flex-basis: 200px;
  flex-shrink: 0;
  border-right: 1px solid hsl(0, 0%, 91%);
  background-color: hsl(0, 0%, 96%);
}
.viewport {
  position: relative;
  flex-grow: 1;
}
.panel-right {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid hsl(0, 0%, 91%);
  background-color: hsl(0, 0%, 96%);
}
.panel-right-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 16px;
  z-index: 11;
  cursor: url("/editor/cursors/resize-arrows-cursor-0-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-0-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-0-1x.png") 1x) 14 14, default;
}
.zoom-hint {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(255, 255, 255, 0.65);
  color: rgba(0, 0, 0, 0.85);
  border: none;
  border-radius: 8px;
  padding: 4px 4px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zoom-hint .zoom-hint-thumbnail {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  outline: 1px solid transparent;
  background-color: hsl(0, 0%, 100%);
  border: 2px solid hsl(200, 100%, 43%);
  width: 100px;
  height: 100px;
}
.outline-inspector {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}
.outline-inspector-divider {
  position: relative;
}
.outline-inspector-resizer {
  position: absolute;
  top: -8px;
  height: 16px;
  width: 100%;
  z-index: 10;
  cursor: url("/editor/cursors/resize-arrows-cursor-6-1x.png") 14 14, default;
  cursor: -webkit-image-set(url("/editor/cursors/resize-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-6-1x.png") 1x) 14 14, default;
  cursor: image-set(url("/editor/cursors/resize-arrows-cursor-6-2x.png") 2x, url("/editor/cursors/resize-arrows-cursor-6-1x.png") 1x) 14 14, default;
}
.snapping-point-tooltip {
  position: fixed;
  padding: 1px 3px;
  color: hsl(12, 68%, 47%);
  border: 1px solid hsl(12, 68%, 47%);
  margin-top: 30px;
  font-size: 13px;
  z-index: 900;
  pointer-events: none;
  transform: translate(-50%, 0);
  border-radius: 4px;
  background-color: hsl(0, 0%, 100%);
}
.user-defined-name:before {
  content: open-quote;
}
.user-defined-name:after {
  content: close-quote;
}
.debug-inspector {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: auto auto;
  padding: 8px;
  gap: 0 12px;
  border-radius: 8px;
  z-index: 9999;
  color: hsl(0, 0%, 100%);
  background-color: rgba(0, 0, 0, 0.85);
}
.debug-inspector .icon-button svg * {
  fill: hsl(0, 0%, 100%);
}
.debug-inspector-value {
  justify-self: right;
  font-weight: bold;
}
.editable-value-popup .code-editor {
  min-width: 160px;
}
.editable-value-popup .code-editor .CodeMirror.CodeMirror-focused {
  box-shadow: none;
}
.editable-value-popup .code-editor .CodeMirror-lines {
  padding: 8px 4px;
  text-align: center;
}
.checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 2px;
}
.checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  opacity: 0.0001;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.checkbox:focus-within {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.project-error-message-private {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.project-error-message-private p {
  max-width: 60ch;
  text-align: center;
}
.expander {
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.05s;
}
.expander svg * {
  fill: rgba(0, 0, 0, 0.1);
}
.expander.hidden {
  visibility: hidden;
}
.expander.expanded {
  transform: rotate(90deg);
}
.expander:hover svg * {
  fill: rgba(0, 0, 0, 0.2);
}
</style><style type="text/css">.CodeMirror-hints {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  list-style: none;

  margin: 0;
  padding: 2px;

  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: 3px;
  border: 1px solid silver;

  background: white;
  font-size: 90%;
  font-family: monospace;

  max-height: 20em;
  overflow-y: auto;
}

.CodeMirror-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  white-space: pre;
  color: black;
  cursor: pointer;
}

li.CodeMirror-hint-active {
  background: #08f;
  color: white;
}
</style><style type="text/css">/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
  width: auto;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
</style><link id="googleidentityservice" type="text/css" media="all" href="https://accounts.google.com/gsi/style" rel="stylesheet"><style data-tiptap-style="">.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror [contenteditable="false"] {
  white-space: normal;
}

.ProseMirror [contenteditable="false"] [contenteditable="true"] {
  white-space: pre-wrap;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
  width: 1px !important;
  height: 1px !important;
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
  margin: 0;
}

.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection * {
  caret-color: transparent;
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0
}</style></head>
  <body class="read-only"><div class="site-layout read-only"><div class="nav"><div class="nav-inner"><div class="left-nav"><div class="nav-links-container"><div class="nav-logo"><a href="/" aria-label="Cuttle home"><div aria-hidden="true" class="nav-logo-image"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8624 7.35746L8.96098 8.93627C8.58099 9.03827 8.1806 9.0367 7.80143 8.9317C7.42226 8.8267 7.07817 8.62211 6.80494 8.33922C6.76609 8.29859 6.71684 8.26937 6.66254 8.25472C6.60825 8.24007 6.55097 8.24055 6.49694 8.25612L3.38608 9.09323C2.9768 9.20242 2.59314 9.39134 2.25714 9.64914C1.92115 9.90694 1.63945 10.2285 1.42823 10.5955C1.21701 10.9624 1.08042 11.3674 1.02633 11.7872C0.97223 12.207 1.00169 12.6334 1.113 13.0418C1.1335 13.1206 1.18445 13.1881 1.25468 13.2295C1.28976 13.2498 1.32849 13.2629 1.36866 13.2682C1.40883 13.2735 1.44964 13.2708 1.48877 13.2603L12.577 10.2904C12.5437 10.8313 12.6497 11.3717 12.885 11.86C13.1521 12.4006 13.5656 12.8556 14.0784 13.1732C14.5913 13.4909 15.183 13.6586 15.7864 13.6573C15.9451 13.6566 16.1035 13.6453 16.2607 13.6234C16.7238 13.5538 17.1661 13.3839 17.5568 13.1258C17.9474 12.8676 18.277 12.5274 18.5225 12.1289C18.7679 11.7303 18.9234 11.2831 18.978 10.8183C19.0327 10.3535 18.9851 9.88244 18.8387 9.43792C18.5665 8.64981 18.0032 7.99544 17.264 7.60869C16.5248 7.22195 15.6657 7.13208 14.8624 7.35746ZM16.2114 11.9923C15.9031 12.0745 15.5773 12.0636 15.2752 11.9608C14.9731 11.8581 14.7082 11.6681 14.5141 11.415C14.32 11.1619 14.2054 10.857 14.1847 10.5388C14.164 10.2206 14.2382 9.9034 14.3979 9.62731C14.5575 9.35122 14.7955 9.12863 15.0818 8.98767C15.368 8.84671 15.6897 8.7937 16.0061 8.83536C16.3225 8.87701 16.6194 9.01145 16.8593 9.22169C17.0993 9.43192 17.2715 9.70851 17.3541 10.0165C17.4085 10.2218 17.4218 10.4358 17.3933 10.6463C17.3648 10.8567 17.2951 11.0595 17.1881 11.243C17.0811 11.4265 16.939 11.5872 16.7698 11.7157C16.6006 11.8443 16.4077 11.9383 16.2022 11.9923H16.2114Z" fill="black"></path>
<path d="M12.0102 7.48057L12.6262 5.14467C12.8557 4.3439 12.7706 3.48578 12.3882 2.74562C12.0058 2.00546 11.355 1.43911 10.5688 1.16227C10.1204 1.01422 9.64494 0.966657 9.17611 1.02296C8.70729 1.07925 8.25662 1.23803 7.85615 1.48801C7.45567 1.73799 7.1152 2.07303 6.85894 2.46932C6.60268 2.86562 6.43692 3.31345 6.37342 3.78098C6.30993 4.24852 6.35027 4.72429 6.49158 5.17449C6.63288 5.62469 6.87168 6.03827 7.19101 6.38585C7.51034 6.73342 7.90236 7.00645 8.33922 7.18555C8.77608 7.36464 9.24705 7.44541 9.71867 7.42209L9.52155 8.14841L12.0102 7.48057ZM9.13962 5.7725C8.83169 5.68939 8.55532 5.51696 8.34539 5.27701C8.13547 5.03705 8.00141 4.74032 7.96014 4.42429C7.91887 4.10826 7.97225 3.78709 8.11353 3.50135C8.25481 3.21561 8.47766 2.9781 8.75393 2.81882C9.03021 2.65954 9.34753 2.58563 9.66581 2.60642C9.9841 2.62722 10.2891 2.74178 10.5423 2.93564C10.7954 3.12951 10.9854 3.39399 11.0883 3.69568C11.1911 3.99737 11.2022 4.32274 11.1201 4.63072C11.0089 5.04451 10.7379 5.39725 10.3665 5.61137C9.99508 5.82548 9.55378 5.88344 9.13962 5.7725Z" fill="black"></path>
<path d="M8.48666 12.0077L6.74642 18.4984C6.73383 18.5384 6.72954 18.5805 6.73383 18.6222C6.73812 18.6639 6.7509 18.7043 6.77138 18.7409C6.79186 18.7775 6.8196 18.8096 6.85292 18.8351C6.88623 18.8606 6.92441 18.879 6.96511 18.8892C7.23834 18.9625 7.51998 18.9997 7.80288 19C8.50981 18.998 9.19644 18.7637 9.75694 18.3332C10.3174 17.9027 10.7207 17.3 10.9045 16.6179L11.7392 13.5003C11.7548 13.4463 11.7553 13.3891 11.7406 13.3349C11.7259 13.2806 11.6967 13.2314 11.656 13.1926C11.4123 12.9556 11.2264 12.6659 11.1126 12.3457C10.9989 12.0255 10.9603 11.6835 11 11.346L8.48666 12.0077Z" fill="black"></path>
</svg>
</div></a></div><a href="/templates" class="nav-link">Templates</a><a href="/explore" class="nav-link">Explore</a><a href="/learn/video-tutorials" class="nav-link">Learn</a><a href="https://blog.cuttle.xyz" class="nav-link">Blog</a><a href="/pricing" class="nav-link">Pricing</a><div class="nav-link nav-with-dropdown"><div style="display: flex;"><div>Community</div><div><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29286 8.29289C6.68339 7.90237 7.31655 7.90237 7.70708 8.29289L9.99997 10.5858L12.2929 8.29289C12.6834 7.90237 13.3166 7.90237 13.7071 8.2929C14.0976 8.68342 14.0976 9.31659 13.7071 9.70711L10.7071 12.7071C10.3165 13.0976 9.68339 13.0976 9.29286 12.7071L6.29286 9.70711C5.90234 9.31658 5.90234 8.68342 6.29286 8.29289Z" fill="black"></path>
</svg>
</div></div></div><div class="nav-dropdown"><div class="nav-dropdown-items"><a href="https://www.facebook.com/groups/cuttle" target="_blank">Facebook Group</a><a href="/discord" target="_blank">Discord Server</a></div></div></div></div></div><div class="hamburger-nav"><div class="nav-links-container"><div class="hamburger-icon"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 6H2V4H18V6ZM18 11H2V9H18V11ZM2 16H18V14H2V16Z" fill="black"></path>
</svg>
</div></div></div></div><div class="search-bar"><form><input aria-label="Search" placeholder="Search" type="text" enterkeyhint="search" class="query"></form></div><div class="right-nav"><div class="login nav-link">Log In</div><div class="nav-signup-button nav-link">Sign Up</div></div></div></div><main><div class="viewport"><div class="doc-editor"><div class="doc-editor-meta"><div class="doc-editor-title"><div contenteditable="false" translate="no" class="tiptap ProseMirror"><h1>Cake Topper Generator</h1></div></div><div class="doc-editor-meta-top"><div class="doc-editor-by"><a href="/@cuttle"><img src="https://cuttle-bucket.s3.us-west-1.amazonaws.com/users/56/avatar.jpg?AWSAccessKeyId=AKIARBJT5Z2AGL5DTFS6&amp;Expires=1732824745&amp;Signature=VjCOmLwBOvr%2BzJk1sQOiqWzPcKg%3D" width="32" height="32" alt="cuttle" class="avatar">Cuttle Labs</a></div><button class="secondary doc-editor-meta-edit-toggle"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8132 4.01525C14.3641 3.56615 13.6359 3.56615 13.1868 4.01525L12.543 4.6591L15.3409 7.45701L15.9847 6.81317C16.4338 6.36407 16.4338 5.63593 15.9847 5.18682L14.8132 4.01525ZM5.32168 11.8804L11.6591 5.54298L14.457 8.3409L8.11961 14.6783C7.86091 14.1868 7.47962 13.5957 6.94193 13.0581C6.40424 12.5204 5.81314 12.1391 5.32168 11.8804ZM4.5502 12.891C4.32335 13.5082 3.98372 14.6436 3.8807 16.1193C5.3564 16.0163 6.49182 15.6766 7.10902 15.4498C7.10731 15.4463 7.1056 15.4427 7.10388 15.4392C6.88729 14.9935 6.54887 14.4327 6.05806 13.9419C5.56724 13.4511 5.00651 13.1127 4.5608 12.8961C4.55726 12.8944 4.55373 12.8927 4.5502 12.891ZM11.9847 2.81317C13.0977 1.70018 14.9023 1.70017 16.0152 2.81317L17.1868 3.98474C18.2998 5.09774 18.2998 6.90226 17.1868 8.01525L8.71578 16.4863C8.57637 16.6257 8.40316 16.7545 8.19395 16.8461C7.61348 17.1004 5.67821 17.85 2.99999 17.85C2.53055 17.85 2.14999 17.4694 2.14999 17C2.14999 14.3218 2.8996 12.3865 3.15386 11.806C3.24551 11.5968 3.37429 11.4236 3.5137 11.2842L11.9847 2.81317Z" fill="black"></path>
</svg>
</div>Open in Cuttle Editor<div class="feature-tag pro-feature-tag">PRO</div></button></div><div class="doc-editor-status"><span><div class="icon-status"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1912_328)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.50004 18.0003L9.51165 18C9.96745 17.9894 10.273 17.9725 10.4282 17.9493C10.4679 17.9433 10.5046 17.939 10.5383 17.9361L10.5485 17.9352L10.5587 17.9339C10.7028 17.9158 10.8468 17.8939 10.9906 17.8684C11.1923 17.8323 11.3927 17.7891 11.5918 17.7387C11.8695 17.6678 12.1433 17.5833 12.4134 17.4853C12.7858 17.3486 13.1477 17.1871 13.499 17.0007C13.973 16.7463 14.4204 16.4501 14.8413 16.1123C15.3864 15.6683 15.8721 15.1649 16.2986 14.6021C16.6038 14.1901 16.8619 13.7772 17.0729 13.3635C17.2293 13.0569 17.3758 12.7147 17.5126 12.3371C17.7065 11.7734 17.8407 11.2321 17.9154 10.7132C17.9664 10.3586 17.9946 9.95627 18 9.50613L18.0001 9.50014L18 9.49414C17.9946 9.044 17.9664 8.64163 17.9154 8.28704C17.8407 7.76814 17.7074 7.22943 17.5153 6.67091C17.3767 6.28811 17.2293 5.94341 17.0729 5.63682C16.8619 5.22307 16.6049 4.81163 16.3018 4.40252C15.8732 3.83685 15.3873 3.33277 14.8442 2.89027C14.4214 2.5509 13.9737 2.2544 13.5012 2.00076C13.1484 1.81359 12.7863 1.65187 12.415 1.5156C12.1439 1.41712 11.8699 1.33253 11.593 1.26183C11.393 1.21129 11.1925 1.16801 10.9914 1.132C10.8471 1.10639 10.7028 1.0845 10.5587 1.06632L10.5485 1.06504L10.5383 1.06417C10.5046 1.06132 10.4679 1.05693 10.4282 1.05099C10.273 1.02777 9.96746 1.01086 9.51165 1.00027L9.50004 1L9.48842 1.00027C9.03261 1.01086 8.72709 1.02777 8.57186 1.05099C8.53217 1.05693 8.49547 1.06132 8.46176 1.06417L8.45154 1.06504L8.44136 1.06632C8.29723 1.0845 8.15326 1.10634 8.00946 1.13185C7.8078 1.16797 7.6074 1.2112 7.40826 1.26154C7.1306 1.33243 6.85672 1.41693 6.58664 1.51502C6.2143 1.65168 5.85243 1.81321 5.50103 1.99961C5.02706 2.25401 4.57962 2.55014 4.15873 2.88799C3.61369 3.33201 3.12795 3.8354 2.70152 4.39816C2.39629 4.81019 2.13818 5.22307 1.92718 5.63682C1.77082 5.94341 1.62425 6.28554 1.48745 6.66318C1.29362 7.22686 1.15936 7.76815 1.0847 8.28704C1.03367 8.64163 1.00547 9.044 1.00007 9.49414L1 9.50014L1.00007 9.50613C1.00547 9.95628 1.03367 10.3586 1.0847 10.7132C1.15936 11.2321 1.29271 11.7708 1.48473 12.3294C1.62334 12.7122 1.77082 13.0569 1.92718 13.3635C2.13818 13.7772 2.3952 14.1886 2.69826 14.5978C3.12686 15.1634 3.61275 15.6675 4.15592 16.11C4.57869 16.4494 5.02634 16.7459 5.49886 16.9995C5.8517 17.1867 6.21376 17.3484 6.58504 17.4847C6.85619 17.5832 7.13022 17.6677 7.40711 17.7384C7.60701 17.789 7.80752 17.8323 8.00864 17.8683C8.15299 17.8939 8.29723 17.9158 8.44135 17.9339L8.45154 17.9352L8.46176 17.9361C8.49546 17.939 8.53217 17.9433 8.57187 17.9493C8.7271 17.9725 9.03262 17.9894 9.48842 18L9.50004 18.0003ZM5.01365 9.00014C5.04548 8.36409 5.13258 7.73506 5.27498 7.11306C5.34791 6.80568 5.4336 6.50296 5.53204 6.20492C4.72323 6.04561 3.91442 5.83759 3.10561 5.58086C3.00077 5.75066 2.90491 5.92074 2.81802 6.09113C2.68048 6.36083 2.55036 6.66504 2.42767 7.00375C2.25793 7.49763 2.14021 7.97286 2.0745 8.42947C2.0493 8.60464 2.03041 8.79486 2.01785 9.00014H5.01365ZM3.71917 4.72402C4.44564 4.94305 5.17114 5.12094 5.89567 5.25769C6.06497 4.87648 6.25499 4.50702 6.46572 4.14933C6.65105 3.83781 6.8508 3.53709 7.06497 3.24717C7.22888 3.0267 7.40044 2.81326 7.57964 2.60686C7.71423 2.45252 7.85274 2.30244 7.99518 2.15662L7.9999 2.15181C7.88415 2.17549 7.76864 2.20189 7.65335 2.23104C7.40903 2.29342 7.16724 2.36806 6.928 2.45495C6.6004 2.5752 6.28094 2.71788 5.96963 2.88302C5.55267 3.10683 5.1577 3.36843 4.78471 3.66783C4.39632 3.98425 4.04114 4.33632 3.71917 4.72402ZM6.52948 6.37669C6.41987 6.69247 6.32604 7.01488 6.24796 7.34393C6.12333 7.8884 6.04567 8.44047 6.01497 9.00014H9.00004V6.5895C8.17652 6.56906 7.353 6.49812 6.52948 6.37669ZM9.00004 5.59201C8.30756 5.57378 7.61418 5.51767 6.91991 5.42369C7.04428 5.16242 7.17935 4.90806 7.32513 4.66062C7.49348 4.37764 7.67427 4.10537 7.86748 3.84381C8.01634 3.64358 8.17162 3.45035 8.33332 3.2641C8.45552 3.12397 8.5809 2.9881 8.70944 2.8565C8.80302 2.761 8.89816 2.66776 8.99486 2.5768C8.99658 2.57529 8.99831 2.57377 9.00004 2.57225V5.59201ZM13.9864 9.00014C13.9546 8.36409 13.8675 7.73507 13.7251 7.11306C13.6522 6.80568 13.5665 6.50296 13.468 6.20492C14.2768 6.04562 15.0856 5.83761 15.8944 5.5809C15.9994 5.751 16.0953 5.92107 16.1821 6.09113C16.3196 6.36084 16.4488 6.66247 16.5697 6.99603C16.7412 7.49505 16.8599 7.97286 16.9256 8.42947C16.9508 8.60464 16.9697 8.79486 16.9822 9.00014H13.9864ZM15.2811 4.72397C14.9596 4.3368 14.6034 3.984 14.2125 3.66556C13.8414 3.36767 13.4467 3.10644 13.0283 2.88186C12.7184 2.7175 12.3991 2.575 12.0705 2.45437C11.8323 2.36787 11.5907 2.29333 11.3456 2.23075C11.2309 2.20177 11.1158 2.17546 11.0002 2.15182L11.0049 2.15662C11.1473 2.30243 11.2858 2.45251 11.4204 2.60686C11.5996 2.81326 11.7712 3.0267 11.9351 3.24717C12.1493 3.53709 12.349 3.83781 12.5344 4.14933C12.7451 4.50702 12.9351 4.87647 13.1044 5.25769C13.829 5.12093 14.5545 4.94302 15.2811 4.72397ZM12.0802 5.42369C11.9558 5.16242 11.8207 4.90806 11.6749 4.66062C11.5066 4.37764 11.3258 4.10537 11.1326 3.84381C10.9837 3.64358 10.8285 3.45035 10.6668 3.2641C10.5446 3.12397 10.4192 2.9881 10.2906 2.8565C10.197 2.76099 10.1019 2.66776 10.0052 2.5768C10.0035 2.57527 10.0017 2.57376 10 2.57225V5.59201C10.6925 5.57378 11.3859 5.51767 12.0802 5.42369ZM10 6.5895V9.00014H12.9851C12.9544 8.44047 12.8767 7.88841 12.7521 7.34393C12.674 7.01488 12.5802 6.69247 12.4706 6.37669C11.6471 6.49812 10.8236 6.56906 10 6.5895ZM5.01377 10.0001C5.04563 10.6367 5.1324 11.2644 5.27408 11.8833C5.34746 12.1926 5.43345 12.4966 5.53205 12.7953C4.72327 12.9547 3.91449 13.1627 3.10571 13.4194C3.00064 13.2493 2.90474 13.0792 2.81802 12.9091C2.68048 12.6394 2.55127 12.3378 2.4304 12.0042C2.25884 11.5052 2.14021 11.0274 2.0745 10.5708C2.0493 10.3956 2.03041 10.2054 2.01785 10.0001H5.01377ZM6.52949 12.6236C7.35301 12.5021 8.17652 12.4312 9.00004 12.4108V10.0001H6.01485C6.04554 10.5594 6.12354 11.1128 6.24886 11.6602C6.32644 11.9871 6.41998 12.3082 6.52949 12.6236ZM12.9852 10.0001H10V12.4108C10.8236 12.4312 11.6471 12.5021 12.4706 12.6236C12.5801 12.3082 12.6736 11.9871 12.7512 11.6602C12.8765 11.1127 12.9545 10.5594 12.9852 10.0001ZM16.1821 12.9091C16.0952 13.0795 15.9993 13.2496 15.8945 13.4194C15.0857 13.1627 14.2768 12.9547 13.468 12.7953C13.5666 12.4966 13.6526 12.1926 13.726 11.8833C13.8677 11.2644 13.9544 10.6367 13.9863 10.0001H16.9822C16.9697 10.2054 16.9508 10.3956 16.9256 10.5708C16.8599 11.0274 16.7421 11.5027 16.5724 11.9965C16.4497 12.3352 16.3196 12.6394 16.1821 12.9091ZM9.00004 13.4083C8.30755 13.4265 7.61416 13.4826 6.91987 13.5766C7.04423 13.8378 7.17968 14.0928 7.32622 14.3415C7.49385 14.6233 7.67457 14.8953 7.8684 15.1577C8.01664 15.3571 8.17185 15.5502 8.33403 15.737C8.45576 15.8766 8.58108 16.0124 8.70999 16.1443C8.8032 16.2395 8.89816 16.3325 8.99484 16.4235C8.99652 16.4249 8.99825 16.4264 9.00004 16.428V13.4083ZM10 16.428V13.4083C10.6925 13.4265 11.3859 13.4826 12.0802 13.5766C11.9558 13.8378 11.8204 14.0928 11.6738 14.3415C11.5062 14.6232 11.3255 14.8953 11.1317 15.1577C10.9834 15.3571 10.8282 15.5502 10.666 15.737C10.5443 15.8766 10.419 16.0124 10.2901 16.1443C10.1969 16.2395 10.1019 16.3325 10.0052 16.4235C10.0036 16.4249 10.0019 16.4264 10 16.428ZM3.71901 14.2763C4.44555 14.0572 5.17111 13.8793 5.89571 13.7426C6.06529 14.1243 6.25493 14.4932 6.46463 14.8491C6.65069 15.1618 6.8505 15.4628 7.06405 15.7519C7.22857 15.9732 7.4002 16.1867 7.57892 16.3926C7.71397 16.5475 7.85255 16.6976 7.99464 16.8431L7.9999 16.8485C7.88425 16.8248 7.76912 16.7985 7.6545 16.7695C7.40942 16.7069 7.16778 16.6324 6.9296 16.5459C6.60093 16.4253 6.28166 16.2828 5.9718 16.1184C5.5534 15.8938 5.15864 15.6326 4.78752 15.3347C4.39663 15.0163 4.04046 14.6635 3.71901 14.2763ZM12.5354 14.8491C12.7451 14.4932 12.9348 14.1243 13.1044 13.7426C13.8289 13.8793 14.5544 14.0572 15.2809 14.2763C14.9589 14.664 14.6038 15.016 14.2154 15.3324C13.8424 15.6318 13.4474 15.8934 13.0304 16.1173C12.7191 16.2824 12.3997 16.4251 12.0721 16.5453C11.8328 16.6322 11.591 16.7068 11.3467 16.7692C11.2314 16.7984 11.1159 16.8248 11.0002 16.8485L11.0054 16.8431C11.1475 16.6976 11.2861 16.5475 11.4212 16.3926C11.5999 16.1867 11.7715 15.9732 11.936 15.7519C12.1496 15.4628 12.3494 15.1619 12.5354 14.8491Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_1912_328">
<rect width="17.0001" height="17.0003" fill="white" transform="translate(1 1)"></rect>
</clipPath>
</defs>
</svg>
</div><div class="label">Public</div></div></span><div class="icon-status"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.954 3.70952C18.0352 3.53351 18.0074 3.3264 17.8826 3.17807C17.7578 3.02974 17.5585 2.96692 17.3712 3.01687L2.37118 7.01687C2.19848 7.06293 2.06349 7.19767 2.01713 7.37029C1.97076 7.54291 2.02007 7.72715 2.14646 7.85354L5.00001 10.7071V15.5C5.00001 15.7203 5.14424 15.9147 5.35512 15.9785C5.5355 16.0332 5.72828 15.9813 5.85676 15.8504L8.00002 13.7071L11.1465 16.8535C11.2621 16.9691 11.4269 17.0209 11.5878 16.9922C11.7487 16.9635 11.8855 16.858 11.954 16.7095L17.954 3.70952ZM6.00001 13.8486V10.7872L13.5478 6.3843L7.16553 12.1283C7.13452 12.1562 7.10713 12.1879 7.08399 12.2226L6.00001 13.8486ZM3.46678 7.75966L14.0379 4.94068L5.58101 9.87389L3.46678 7.75966ZM8.22622 12.5191L16.027 5.49839L11.3465 15.6394L8.22622 12.5191Z" fill="black"></path>
</svg>
</div><div class="label">Apr 19, 2023 (updated Nov 9, 2023)</div></div></div><div class="doc-editor-license"><div class="license-header"><div class="license-title">LICENSE</div><a href="/learn/common-questions/licensing" target="_blank">Learn more</a></div><div class="license-description"><p>To make or sell physical items <a href="/pricing" target="_blank">upgrade to Cuttle Pro</a>.</p></div><div class="license-bullets"><div class="license-bullet-icon"><div class="feature-tag pro-feature-tag">PRO</div></div><div class="license-bullet-text">Create physical items for personal use.</div><div class="license-bullet-icon"><div class="feature-tag pro-feature-tag">PRO</div></div><div class="license-bullet-text">Sell physical items derived from this template.</div><div class="license-bullet-icon"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#C94726"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L10 8.58579L13.2929 5.29289C13.6834 4.90237 14.3166 4.90237 14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.4142 10L14.7071 13.2929C15.0976 13.6834 15.0976 14.3166 14.7071 14.7071C14.3166 15.0976 13.6834 15.0976 13.2929 14.7071L10 11.4142L6.70711 14.7071C6.31658 15.0976 5.68342 15.0976 5.29289 14.7071C4.90237 14.3166 4.90237 13.6834 5.29289 13.2929L8.58579 10L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"></path>
</svg>
</div></div><div class="license-bullet-text">Sell or give away digital items (like SVGs) derived from this template. We sometimes allow this on a case-by-case basis. <a href="/learn/common-questions/licensing" target="_blank">Learn more</a>.</div></div></div></div><div class="doc-editor-wrap"><div contenteditable="false" translate="no" class="tiptap ProseMirror"><figure class="doc-image" contenteditable="false"><img path="56/5ef2ba3e38de09c557ddd402d122ff71af8b5c98d308f87c6473314a9d74ba04.jpg" src="https://cuttle-uploads.imgix.net/56/5ef2ba3e38de09c557ddd402d122ff71af8b5c98d308f87c6473314a9d74ba04.jpg?auto=compress,format&amp;q=80&amp;fit=max&amp;width=700&amp;height=1280&amp;dpr=1" srcset="https://cuttle-uploads.imgix.net/56/5ef2ba3e38de09c557ddd402d122ff71af8b5c98d308f87c6473314a9d74ba04.jpg?auto=compress,format&amp;q=80&amp;fit=max&amp;width=700&amp;height=1280&amp;dpr=1 1x, https://cuttle-uploads.imgix.net/56/5ef2ba3e38de09c557ddd402d122ff71af8b5c98d308f87c6473314a9d74ba04.jpg?auto=compress,format&amp;q=60&amp;fit=max&amp;width=700&amp;height=1280&amp;dpr=2 2x"></figure><p>Quickly customize a cake topper with your own text in any font. The text is automatically connected, including dots on i's. You can also customize the size and positioning of the skewer. 🥳</p><figure data-cuttle-component-id="7e19bc75-9fcd-4d35-988-be9b5e923b0" data-has-drag-handle="true" tabindex="0" contenteditable="false" class="ProseMirror-selectednode"><div data-drag-handle="true"><div class="drag-handle icon-button"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5C5 4.44772 5.44772 4 6 4H14C14.5523 4 15 4.44772 15 5C15 5.55228 14.5523 6 14 6H6C5.44772 6 5 5.55228 5 5ZM5 10C5 9.44772 5.44772 9 6 9H14C14.5523 9 15 9.44772 15 10C15 10.5523 14.5523 11 14 11H6C5.44772 11 5 10.5523 5 10ZM6 14C5.44772 14 5 14.4477 5 15C5 15.5523 5.44772 16 6 16H14C14.5523 16 15 15.5523 15 15C15 14.4477 14.5523 14 14 14H6Z" fill="black"></path>
</svg>
</div></div></div><div class="component-embed has-parameters"><div class="component-embed-wide-sticky"><div class="component-embed-narrow-sticky"><div class="component-embed-canvas"><div class="svg-preview-canvas-autosize"><div class="viewport-main"><canvas width="566" height="342.5" style="width: 566px; height: 342.5px;"></canvas></div></div><div class="component-embed-actions"><div class="component-embed-actions-left-spacer"></div><div class="component-embed-dimensions"><div class="component-dimensions"><span class="dimension"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.79291 9.50002L4.14646 9.14646L6.14646 7.14646L6.50001 6.79291L7.20712 7.50002L6.85357 7.85357L5.70712 9.00002L14.2929 9.00001L13.1465 7.85357L12.7929 7.50001L13.5 6.79291L13.8536 7.14646L15.8536 9.14646L16.2071 9.50001L15.8536 9.85357L13.8536 11.8536L13.5 12.2071L12.7929 11.5L13.1465 11.1465L14.2929 10L5.70712 10L6.85357 11.1465L7.20712 11.5L6.50001 12.2071L6.14646 11.8536L4.14646 9.85357L3.79291 9.50002Z" fill="black"></path>
</svg>
</div><span class="number"><span class="number-value">7.69</span><span class="number-unit">in</span></span></span><span class="spacing"></span><span class="dimension"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.50001 3.79291L9.85357 4.14646L11.8536 6.14646L12.2071 6.50001L11.5 7.20712L11.1465 6.85357L10 5.70712V14.2929L11.1465 13.1465L11.5 12.7929L12.2071 13.5L11.8536 13.8536L9.85357 15.8536L9.50001 16.2071L9.14646 15.8536L7.14646 13.8536L6.79291 13.5L7.50001 12.7929L7.85357 13.1465L9.00001 14.2929V5.70712L7.85357 6.85357L7.50001 7.20712L6.79291 6.50001L7.14646 6.14646L9.14646 4.14646L9.50001 3.79291Z" fill="black"></path>
</svg>
</div><span class="number"><span class="number-value">5.28</span><span class="number-unit">in</span></span></span></div></div><div class="component-embed-download"><button class="component-embed-download-primary"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 14C5 13.4477 4.55228 13 4 13C3.44771 13 3 13.4477 3 14C3 15.4113 4.11805 16.4197 5.31015 17.0157C6.56205 17.6417 8.22156 18 10 18C11.7784 18 13.4379 17.6417 14.6899 17.0157C15.8819 16.4197 17 15.4113 17 14C17 13.4477 16.5523 13 16 13C15.4477 13 15 13.4477 15 14C15 14.2456 14.7749 14.7372 13.7954 15.2269C12.8758 15.6867 11.5353 16 10 16C8.46473 16 7.12424 15.6867 6.20457 15.2269C5.22509 14.7372 5 14.2456 5 14ZM11 3C11 2.44771 10.5523 2 10 2C9.44771 2 9 2.44771 9 3L9 10.5858L7.2071 8.79289C6.81658 8.40237 6.18342 8.40237 5.79289 8.79289C5.40237 9.18342 5.40237 9.81658 5.79289 10.2071L9.29289 13.7071C9.68342 14.0976 10.3166 14.0976 10.7071 13.7071L14.2071 10.2071C14.5976 9.81658 14.5976 9.18342 14.2071 8.79289C13.8166 8.40237 13.1834 8.40237 12.7929 8.79289L11 10.5858L11 3Z" fill="black"></path>
</svg>
</div>Download SVG<div class="feature-tag pro-feature-tag">PRO</div></button></div></div></div></div></div><div class="component-embed-meta"><div class="component-embed-inspector"><div class="inspector" style=""><div class="inspector-section editing-definition"><div class="inspector-row parameter selectable"><div class="parameter-name">font</div><div class="parameter-value"><div tabindex="0" class="font-picker select">Rochester (regular)</div></div><div class="extra"></div></div><div class="inspector-row comment"><p>Font Recommendations: Courgette, Grand Hotel, Great Vibes, Itim, Lakki Reddy, Leckerli One, Niconne, Rochester, Style Script</p></div><div class="inspector-row parameter overridden selectable"><div class="parameter-name">text</div><div class="parameter-value"><div class="literal-input text-literal-input"><div class="doc-editor-rich"><div class="doc-editor-rich-wrap"><div contenteditable="true" spellcheck="false" translate="no" class="tiptap ProseMirror" tabindex="0"><p>GJHendricks</p><p>      Confirmation</p></div></div><div class="rich-text-symbols-menu-button"><span><div class="icon-button" role="button" aria-label="Insert Symbol"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 17.9548C11.3252 17.9548 12.3018 18.5215 13.4702 18.5011C15.873 18.4593 16.8068 16.763 16.8068 15.5485C16.8068 13.6735 15.9476 12.6952 14.4231 11.2834C13.159 10.1128 12.4208 7.74903 10 7.74903C7.5792 7.74903 6.84097 10.1128 5.57693 11.2834C4.05238 12.6952 3.19316 13.6735 3.19316 15.5485C3.19316 16.763 4.12704 18.4593 6.52984 18.5011C7.69824 18.5215 8.67484 17.9548 10 17.9548ZM9.53619 3.60369C9.89651 5.29888 9.11334 6.90381 7.78836 7.18544C6.46339 7.46707 5.09514 6.31944 4.73481 4.62425C4.37449 2.92907 5.15766 1.32414 6.48264 1.04251C7.80761 0.760873 9.17586 1.9085 9.53619 3.60369ZM5.28537 7.19306C5.9968 8.58932 5.70112 10.1679 4.6255 10.7159C3.54987 11.264 2.09901 10.5753 1.38758 9.17909C0.67615 7.78283 0.97183 6.20429 2.04746 5.65623C3.12308 5.10817 4.57394 5.79681 5.28537 7.19306ZM10.4638 3.60369C10.1035 5.29888 10.8867 6.90381 12.2116 7.18544C13.5366 7.46707 14.9049 6.31944 15.2652 4.62425C15.6255 2.92907 14.8423 1.32414 13.5174 1.04251C12.1924 0.760873 10.8241 1.9085 10.4638 3.60369ZM14.7146 7.19306C14.0032 8.58932 14.2989 10.1679 15.3745 10.7159C16.4501 11.264 17.901 10.5753 18.6124 9.17909C19.3239 7.78283 19.0282 6.20429 17.9525 5.65623C16.8769 5.10817 15.4261 5.79681 14.7146 7.19306Z" fill="black"></path>
</svg>
</div></div></span></div></div></div></div><div class="extra"><span><div class="icon-button" role="button"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C8.7908 15 7.68304 14.5714 6.81839 13.8573C6.60547 13.6815 6.29032 13.7115 6.11448 13.9244C5.93863 14.1374 5.96869 14.4525 6.18161 14.6284C7.21884 15.485 8.54994 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10V10.2929L3.99957 10.2925L3.99508 10.288L3.99058 10.2835L3.98607 10.279L3.98157 10.2745L3.97706 10.27L3.97255 10.2654L3.96804 10.2609L3.96352 10.2564L3.95901 10.2519L3.95449 10.2474L3.94997 10.2429L3.94545 10.2383L3.94092 10.2338L3.9364 10.2293L3.93187 10.2248L3.92734 10.2202L3.92281 10.2157L3.91828 10.2112L3.91374 10.2066L3.90921 10.2021L3.90467 10.1976L3.90013 10.193L3.89559 10.1885L3.89105 10.1839L3.88651 10.1794L3.88197 10.1749L3.87743 10.1703L3.87288 10.1658L3.86834 10.1612L3.86379 10.1567L3.85924 10.1521L3.85469 10.1476L3.85014 10.143L3.8456 10.1385L3.84105 10.1339L3.8365 10.1294L3.83194 10.1248L3.82739 10.1203L3.82284 10.1157L3.81829 10.1112L3.81374 10.1066L3.80919 10.1021L3.80463 10.0975L3.80008 10.093L3.79553 10.0884L3.79098 10.0839L3.78643 10.0793L3.78187 10.0748L3.77732 10.0702L3.77277 10.0657L3.76822 10.0611L3.76367 10.0566L3.75912 10.052L3.75457 10.0475L3.75002 10.0429L3.74547 10.0384L3.74092 10.0338L3.73638 10.0293L3.73183 10.0247L3.72729 10.0202L3.72274 10.0156L3.7182 10.0111L3.71366 10.0066L3.70912 10.002L3.70458 9.99747L3.70004 9.99293L3.6955 9.9884L3.69097 9.98386L3.68643 9.97932L3.6819 9.97479L3.67737 9.97026L3.67284 9.96573L3.66831 9.9612L3.66378 9.95668L3.65926 9.95215L3.65474 9.94763L3.65021 9.94311L3.6457 9.93859L3.64118 9.93407L3.63666 9.92956L3.63215 9.92504L3.62764 9.92053L3.62313 9.91602L3.61862 9.91152L3.61412 9.90701L3.60962 9.90251L3.60512 9.89801L3.60062 9.89352L3.59613 9.88902L3.59164 9.88453L3.58715 9.88004L3.58266 9.87556L3.57818 9.87107L3.5737 9.86659L3.56922 9.86212L3.56475 9.85764L3.56028 9.85317L3.55581 9.8487L3.55134 9.84424L3.54688 9.83978L3.54242 9.83532L3.53797 9.83086L3.53352 9.82641L3.52907 9.82196L3.52462 9.81752L3.52018 9.81308L3.51575 9.80864L3.51131 9.8042L3.50688 9.79977L3.50245 9.79535L3.49803 9.79093L3.49361 9.78651L3.4892 9.78209L3.48479 9.77768L3.48038 9.77327L3.47598 9.76887L3.47158 9.76447L3.46719 9.76008L3.4628 9.75569L3.45841 9.75131L3.45403 9.74692L3.44965 9.74255L3.44528 9.73818L3.44092 9.73381L3.43655 9.72945L3.4322 9.72509L3.42784 9.72074L3.42349 9.71639L3.41915 9.71204L3.41481 9.70771L3.41048 9.70337L3.40615 9.69904L3.40183 9.69472L3.39751 9.6904L3.3932 9.68609L3.38889 9.68178L3.38459 9.67748L3.38029 9.67318L3.376 9.66889L3.37171 9.66461L3.36743 9.66033L3.36316 9.65605L3.35889 9.65178L3.35463 9.64752L3.35037 9.64326L3.34612 9.63901L3.34188 9.63477L3.33764 9.63053L3.3334 9.6263L3.32918 9.62207L3.32496 9.61785L3.32074 9.61363L3.31653 9.60943L3.31233 9.60522L3.30814 9.60103L3.30395 9.59684L3.29976 9.59266L3.29559 9.58848L3.29142 9.58431L3.28726 9.58015L3.2831 9.57599L3.27895 9.57184L3.27481 9.5677L3.27067 9.56357L3.26655 9.55944L3.26242 9.55532L3.25831 9.5512L3.2542 9.5471L3.2501 9.543L3.24601 9.5389L3.24193 9.53482L3.23785 9.53074L3.23378 9.52667L3.22972 9.52261L3.22566 9.51855L3.22161 9.51451L3.21757 9.51047L3.21354 9.50643L3.20952 9.50241L3.2055 9.49839L3.20149 9.49439L3.19749 9.49039L3.1935 9.48639L3.18952 9.48241L3.18554 9.47843L3.18157 9.47446L3.17761 9.4705L3.17366 9.46655L3.16972 9.46261L3.16578 9.45868L3.16186 9.45475L3.15794 9.45083L3.15403 9.44692L3.15013 9.44302L3.14624 9.43913L3.14236 9.43525L3.13848 9.43138L3.13462 9.42751L3.13076 9.42365L3.12691 9.41981L3.12308 9.41597L3.11925 9.41214L3.11543 9.40832L3.11162 9.40451L3.10782 9.40071L3.10403 9.39692L3.10024 9.39314L3.09647 9.38936L3.09271 9.3856L3.08895 9.38185L3.08521 9.3781L3.08148 9.37437L3.07775 9.37065L3.07404 9.36693L3.07033 9.36323L3.06664 9.35953L3.06295 9.35585L3.05928 9.35217L3.05562 9.34851L3.05196 9.34485L3.04832 9.34121L3.04468 9.33758L3.04106 9.33395L3.03745 9.33034L3.03385 9.32674L3.03025 9.32315L3.02667 9.31957L3.0231 9.316L3.01954 9.31244L3.01599 9.30889L3.01245 9.30535L3.00893 9.30182L3.00541 9.2983L3.00191 9.2948L2.99841 9.2913L2.99493 9.28782L2.99146 9.28435L2.988 9.28089L2.98455 9.27744L2.98111 9.274L2.97768 9.27057L2.97427 9.26716L2.97086 9.26375L2.96747 9.26036L2.96409 9.25698L2.96072 9.25361L2.95736 9.25026L2.95402 9.24691L2.95068 9.24358L2.94736 9.24026L2.94405 9.23695L2.94076 9.23365L2.93747 9.23036L2.9342 9.22709L2.93094 9.22383L2.92769 9.22058L2.92445 9.21734L2.92123 9.21412L2.91802 9.21091L2.91482 9.20771L2.91163 9.20452L2.90846 9.20135L2.90529 9.19819L2.90215 9.19504L2.89901 9.1919L2.89589 9.18878L2.89278 9.18567L2.88968 9.18257L2.8866 9.17949L2.88353 9.17642L2.88047 9.17336L2.87743 9.17032L2.87439 9.16729L2.87138 9.16427L2.86837 9.16127L2.86538 9.15827L2.8624 9.1553L2.85944 9.15233L2.85649 9.14938L2.85355 9.14645C2.65829 8.95118 2.34171 8.95118 2.14645 9.14645C1.95118 9.34171 1.95118 9.65829 2.14645 9.85355L2.14938 9.85649L2.15233 9.85944L2.1553 9.8624L2.15827 9.86538L2.16127 9.86837L2.16427 9.87138L2.16729 9.87439L2.17032 9.87743L2.17336 9.88047L2.17642 9.88353L2.17949 9.8866L2.18257 9.88968L2.18567 9.89278L2.18878 9.89589L2.1919 9.89901L2.19504 9.90215L2.19819 9.90529L2.20135 9.90846L2.20452 9.91163L2.20771 9.91482L2.21091 9.91802L2.21412 9.92123L2.21734 9.92445L2.22058 9.92769L2.22383 9.93094L2.22709 9.9342L2.23036 9.93747L2.23365 9.94076L2.23695 9.94405L2.24026 9.94736L2.24358 9.95068L2.24691 9.95402L2.25026 9.95736L2.25361 9.96072L2.25698 9.96409L2.26036 9.96747L2.26375 9.97086L2.26716 9.97427L2.27057 9.97768L2.274 9.98111L2.27744 9.98455L2.28089 9.988L2.28435 9.99146L2.28782 9.99493L2.2913 9.99841L2.2948 10.0019L2.2983 10.0054L2.30182 10.0089L2.30535 10.0125L2.30889 10.016L2.31244 10.0195L2.316 10.0231L2.31957 10.0267L2.32315 10.0303L2.32674 10.0338L2.33034 10.0374L2.33395 10.0411L2.33758 10.0447L2.34121 10.0483L2.34485 10.052L2.34851 10.0556L2.35217 10.0593L2.35585 10.063L2.35953 10.0666L2.36323 10.0703L2.36693 10.074L2.37065 10.0778L2.37437 10.0815L2.3781 10.0852L2.38185 10.089L2.3856 10.0927L2.38936 10.0965L2.39314 10.1002L2.39692 10.104L2.40071 10.1078L2.40451 10.1116L2.40832 10.1154L2.41214 10.1192L2.41597 10.1231L2.41981 10.1269L2.42365 10.1308L2.42751 10.1346L2.43138 10.1385L2.43525 10.1424L2.43913 10.1462L2.44302 10.1501L2.44692 10.154L2.45083 10.1579L2.45475 10.1619L2.45868 10.1658L2.46261 10.1697L2.46655 10.1737L2.4705 10.1776L2.47446 10.1816L2.47843 10.1855L2.48241 10.1895L2.48639 10.1935L2.49039 10.1975L2.49439 10.2015L2.49839 10.2055L2.50241 10.2095L2.50643 10.2135L2.51047 10.2176L2.51451 10.2216L2.51855 10.2257L2.52261 10.2297L2.52667 10.2338L2.53074 10.2378L2.53482 10.2419L2.5389 10.246L2.543 10.2501L2.5471 10.2542L2.5512 10.2583L2.55532 10.2624L2.55944 10.2665L2.56357 10.2707L2.5677 10.2748L2.57184 10.279L2.57599 10.2831L2.58015 10.2873L2.58431 10.2914L2.58848 10.2956L2.59266 10.2998L2.59684 10.3039L2.60103 10.3081L2.60522 10.3123L2.60943 10.3165L2.61363 10.3207L2.61785 10.325L2.62207 10.3292L2.6263 10.3334L2.63053 10.3376L2.63477 10.3419L2.63901 10.3461L2.64326 10.3504L2.64752 10.3546L2.65178 10.3589L2.65605 10.3632L2.66033 10.3674L2.66461 10.3717L2.66889 10.376L2.67318 10.3803L2.67748 10.3846L2.68178 10.3889L2.68609 10.3932L2.6904 10.3975L2.69472 10.4018L2.69904 10.4062L2.70337 10.4105L2.70771 10.4148L2.71204 10.4192L2.71639 10.4235L2.72074 10.4278L2.72509 10.4322L2.72945 10.4366L2.73381 10.4409L2.73818 10.4453L2.74255 10.4497L2.74692 10.454L2.7513 10.4584L2.75569 10.4628L2.76008 10.4672L2.76447 10.4716L2.76887 10.476L2.77327 10.4804L2.77768 10.4848L2.78209 10.4892L2.78651 10.4936L2.79093 10.498L2.79535 10.5025L2.79977 10.5069L2.8042 10.5113L2.80864 10.5157L2.81308 10.5202L2.81752 10.5246L2.82196 10.5291L2.82641 10.5335L2.83086 10.538L2.83532 10.5424L2.83978 10.5469L2.84424 10.5513L2.8487 10.5558L2.85317 10.5603L2.85764 10.5647L2.86212 10.5692L2.86659 10.5737L2.87107 10.5782L2.87556 10.5827L2.88004 10.5871L2.88453 10.5916L2.88902 10.5961L2.89352 10.6006L2.89801 10.6051L2.90251 10.6096L2.90701 10.6141L2.91152 10.6186L2.91602 10.6231L2.92053 10.6276L2.92504 10.6322L2.92956 10.6367L2.93407 10.6412L2.93859 10.6457L2.94311 10.6502L2.94763 10.6547L2.95215 10.6593L2.95668 10.6638L2.9612 10.6683L2.96573 10.6728L2.97026 10.6774L2.97479 10.6819L2.97932 10.6864L2.98386 10.691L2.98839 10.6955L2.99293 10.7L2.99747 10.7046L3.00201 10.7091L3.00655 10.7137L3.01109 10.7182L3.01564 10.7227L3.02018 10.7273L3.02473 10.7318L3.02927 10.7364L3.03382 10.7409L3.03837 10.7455L3.04291 10.75L3.04746 10.7546L3.05201 10.7591L3.05656 10.7637L3.06111 10.7682L3.06566 10.7728L3.07021 10.7773L3.07477 10.7819L3.07932 10.7864L3.08387 10.791L3.08842 10.7955L3.09297 10.8001L3.09753 10.8046L3.10208 10.8092L3.10663 10.8137L3.11118 10.8183L3.11574 10.8228L3.12029 10.8274L3.12484 10.8319L3.12939 10.8365L3.13394 10.841L3.13849 10.8456L3.14304 10.8501L3.14759 10.8547L3.15213 10.8592L3.15668 10.8638L3.16123 10.8683L3.16577 10.8729L3.17032 10.8774L3.17486 10.882L3.1794 10.8865L3.18395 10.8911L3.18849 10.8956L3.19303 10.9001L3.19756 10.9047L3.2021 10.9092L3.20664 10.9137L3.21117 10.9183L3.2157 10.9228L3.22023 10.9273L3.22476 10.9319L3.22929 10.9364L3.23382 10.9409L3.23834 10.9454L3.24286 10.95L3.24738 10.9545L3.2519 10.959L3.25642 10.9635L3.26093 10.968L3.26544 10.9725L3.26995 10.9771L3.27446 10.9816L3.27897 10.9861L3.28347 10.9906L3.28797 10.9951L3.29247 10.9996L3.29696 11.0041L3.30146 11.0086L3.30595 11.0131L3.31043 11.0175L3.31492 11.022L3.3194 11.0265L3.32388 11.031L3.32836 11.0355L3.33283 11.0399L3.3373 11.0444L3.34177 11.0489L3.34623 11.0533L3.35069 11.0578L3.35515 11.0623L3.3596 11.0667L3.36405 11.0712L3.3685 11.0756L3.37294 11.08L3.37738 11.0845L3.38182 11.0889L3.38625 11.0934L3.39068 11.0978L3.3951 11.1022L3.39953 11.1066L3.40394 11.111L3.40836 11.1155L3.41277 11.1199L3.41717 11.1243L3.42157 11.1287L3.42597 11.1331L3.43036 11.1375L3.43475 11.1419L3.43913 11.1462L3.44351 11.1506L3.44789 11.155L3.45226 11.1594L3.45662 11.1637L3.46098 11.1681L3.46534 11.1724L3.46969 11.1768L3.47404 11.1811L3.47838 11.1855L3.48271 11.1898L3.48704 11.1942L3.49137 11.1985L3.49569 11.2028L3.50001 11.2071L3.50432 11.2114L3.50862 11.2157L3.51292 11.22L3.51722 11.2243L3.52151 11.2286L3.52579 11.2329L3.53007 11.2372L3.53434 11.2414L3.53861 11.2457L3.54287 11.25L3.54712 11.2542L3.55137 11.2585L3.55561 11.2627L3.55985 11.267L3.56408 11.2712L3.56831 11.2754L3.57252 11.2796L3.57674 11.2838L3.58094 11.288L3.58514 11.2922L3.58933 11.2964L3.59352 11.3006L3.5977 11.3048L3.60187 11.309L3.60604 11.3131L3.6102 11.3173L3.61435 11.3215L3.6185 11.3256L3.62264 11.3297L3.62677 11.3339L3.6309 11.338L3.63502 11.3421L3.63913 11.3462L3.64323 11.3503L3.64733 11.3544L3.65142 11.3585L3.6555 11.3626L3.65958 11.3667L3.66364 11.3707L3.6677 11.3748L3.67175 11.3789L3.6758 11.3829L3.67984 11.3869L3.68387 11.391L3.68789 11.395L3.6919 11.399L3.6959 11.403L3.6999 11.407L3.70389 11.411L3.70787 11.415L3.71185 11.419L3.71581 11.4229L3.71977 11.4269L3.72372 11.4308L3.72765 11.4348L3.73159 11.4387L3.73551 11.4426L3.73942 11.4465L3.74333 11.4504L3.74723 11.4543L3.75111 11.4582L3.75499 11.4621L3.75886 11.466L3.76272 11.4698L3.76658 11.4737L3.77042 11.4775L3.77425 11.4814L3.77808 11.4852L3.7819 11.489L3.7857 11.4928L3.7895 11.4966L3.79329 11.5004L3.79707 11.5042L3.80083 11.5079L3.80459 11.5117L3.80834 11.5155L3.81208 11.5192L3.81581 11.5229L3.81953 11.5266L3.82325 11.5304L3.82695 11.5341L3.83064 11.5377L3.83432 11.5414L3.83799 11.5451L3.84165 11.5488L3.8453 11.5524L3.84894 11.556L3.85257 11.5597L3.85619 11.5633L3.8598 11.5669L3.86339 11.5705L3.86698 11.5741L3.87056 11.5777L3.87413 11.5812L3.87768 11.5848L3.88123 11.5883L3.88476 11.5919L3.88828 11.5954L3.8918 11.5989L3.8953 11.6024L3.89879 11.6059L3.90227 11.6094L3.90573 11.6128L3.90919 11.6163L3.91264 11.6197L3.91607 11.6232L3.91949 11.6266L3.9229 11.63L3.9263 11.6334L3.92969 11.6368L3.93307 11.6402L3.93643 11.6435L3.93978 11.6469L3.94312 11.6502L3.94645 11.6536L3.94977 11.6569L3.95307 11.6602L3.95637 11.6635L3.95965 11.6668L3.96292 11.67L3.96617 11.6733L3.96942 11.6765L3.97265 11.6798L3.97587 11.683L3.97907 11.6862L3.98227 11.6894L3.98545 11.6926L3.98862 11.6957L3.99178 11.6989L3.99492 11.702L3.99805 11.7052L4.00117 11.7083L4.00427 11.7114L4.00736 11.7145L4.01044 11.7175L4.01351 11.7206L4.01656 11.7237L4.0196 11.7267L4.02263 11.7297L4.02564 11.7327L4.02864 11.7357L4.03162 11.7387L4.0346 11.7417L4.03755 11.7447L4.0405 11.7476L4.04343 11.7505L4.04635 11.7535L4.04925 11.7564L4.05214 11.7592L4.05502 11.7621L4.05788 11.765L4.06073 11.7678L4.06356 11.7707L4.06638 11.7735L4.06919 11.7763L4.07198 11.7791L4.07475 11.7819L4.07752 11.7846L4.08026 11.7874L4.083 11.7901L4.08572 11.7928L4.08842 11.7955L4.09111 11.7982L4.09378 11.8009L4.09644 11.8036L4.09909 11.8062L4.10172 11.8088L4.10434 11.8114L4.10694 11.814L4.10952 11.8166L4.11209 11.8192L4.11465 11.8218L4.11718 11.8243L4.11971 11.8268L4.12222 11.8293L4.12471 11.8318L4.12719 11.8343L4.12965 11.8368L4.1321 11.8392L4.13453 11.8416L4.13694 11.8441L4.13934 11.8465L4.14173 11.8488L4.14409 11.8512L4.14645 11.8536C4.34171 12.0488 4.65829 12.0488 4.85355 11.8536L6.85355 9.85355C7.04882 9.65829 7.04882 9.34171 6.85355 9.14645C6.65829 8.95118 6.34171 8.95118 6.14645 9.14645L5 10.2929V10Z" fill="black"></path>
</svg>
</div></div></span></div></div><div class="inspector-row comment"><p>Tip: add spaces to line things up the way you like.</p></div><div class="inspector-row parameter selectable"><div class="parameter-name">lineHeight</div><div class="parameter-value"><div class="literal-input"><span class="number-scrubber" tabindex="0"><span class="prefix"></span><span class="number-value">72.4</span><span class="suffix">%</span></span><div tabindex="-1" class="edit-expression"></div></div></div><div class="extra"></div></div><div class="inspector-row comment"><p>Adjust this so that each line overlaps the way you like.</p></div><div class="inspector-row parameter selectable"><div class="parameter-name">fontSize</div><div class="parameter-value"><div class="literal-input"><span class="number-scrubber" tabindex="0"><span class="prefix"></span><span class="number-value">108</span><span class="suffix"></span></span><select class="unit-select"><option value="in">in</option><option value="ft">ft</option><option value="mm">mm</option><option value="cm">cm</option><option value="m">m</option><option value="px">px</option><option value="pc">pc</option><option value="pt">pt</option></select><div tabindex="-1" class="edit-expression"></div></div><div class="evaluation-result"><span class="oi-type-number"><span class="oi-detail-number">1.5</span><span class="oi-number-units"> in</span></span></div></div><div class="extra"></div></div><div class="inspector-row parameter selectable"><div class="parameter-name">thicken</div><div class="parameter-value"><div class="literal-input"><span class="number-scrubber" tabindex="0"><span class="prefix"></span><span class="number-value">1.0</span><span class="suffix">%</span></span><div tabindex="-1" class="edit-expression"></div></div></div><div class="extra"></div></div><div class="inspector-row comment"><p>Enlarge the letters by this amount. Useful for making the font just a tad thicker.</p></div><div class="inspector-row parameter-folder"><div class="expander " aria-expanded="false"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 10L6 4V16L16 10Z" fill="black"></path>
</svg>
</div></div><div class="parameter-folder-name">Skewer Sizing &amp; Placement</div><div class="inspector-header-space"></div></div></div></div></div><div class="component-embed-warnings"><div class="instance-inspector-messages"></div></div></div></div></figure><p>Want two stakes on your cake topper? Check out <a target="_blank" rel="noopener noreferrer nofollow" href="https://cuttle.xyz/@cuttle/Cake-Topper-with-Two-Stakes-C0NAnTv1clo0">this variation</a>:</p><figure data-cuttle-project-id="C0NAnTv1clo0" data-has-drag-handle="true" tabindex="0" contenteditable="false"><div data-drag-handle="true"><div class="drag-handle icon-button"><div aria-hidden="true" class="icon20"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5C5 4.44772 5.44772 4 6 4H14C14.5523 4 15 4.44772 15 5C15 5.55228 14.5523 6 14 6H6C5.44772 6 5 5.55228 5 5ZM5 10C5 9.44772 5.44772 9 6 9H14C14.5523 9 15 9.44772 15 10C15 10.5523 14.5523 11 14 11H6C5.44772 11 5 10.5523 5 10ZM6 14C5.44772 14 5 14.4477 5 15C5 15.5523 5.44772 16 6 16H14C14.5523 16 15 15.5523 15 15C15 14.4477 14.5523 14 14 14H6Z" fill="black"></path>
</svg>
</div></div></div><div class="card"><a href="/@cuttle/Cake-Topper-with-Two-Stakes-C0NAnTv1clo0"><div class="container-16-by-9 card-cover"><img alt="Cake Topper with Two Stakes" src="https://cuttle-uploads.imgix.net/56/2f90e8b7b84634ed35ac6b2830ff750212940f2aed979ad905a98a34be07dddd.jpg?auto=compress,format&amp;q=80&amp;fit=fill&amp;fill=blur&amp;width=400&amp;height=225&amp;dpr=1" srcset="https://cuttle-uploads.imgix.net/56/2f90e8b7b84634ed35ac6b2830ff750212940f2aed979ad905a98a34be07dddd.jpg?auto=compress,format&amp;q=80&amp;fit=fill&amp;fill=blur&amp;width=400&amp;height=225&amp;dpr=1 1x, https://cuttle-uploads.imgix.net/56/2f90e8b7b84634ed35ac6b2830ff750212940f2aed979ad905a98a34be07dddd.jpg?auto=compress,format&amp;q=60&amp;fit=fill&amp;fill=blur&amp;width=400&amp;height=225&amp;dpr=2 2x" class="card-image"></div></a><div class="card-info"><div class="card-title-row"><a href="/@cuttle/Cake-Topper-with-Two-Stakes-C0NAnTv1clo0">Cake Topper with Two Stakes</a></div><div class="card-description">This variation of the Cake Topper has two stakes which helps stabilize larger toppers. Customize it with your own text in any font. The text is automatically connected, including dots on i's. You can also customize the size and positioning of the skewers. 🥳</div><div class="card-owner-date-row"><a href="/@cuttle" aria-hidden="true"><img src="https://cuttle-bucket.s3.us-west-1.amazonaws.com/users/56/avatar.jpg?AWSAccessKeyId=AKIARBJT5Z2AGL5DTFS6&amp;Expires=1732824747&amp;Signature=2RIM3mk%2B9%2FsISYBHhmD28kMJbvk%3D" width="35" height="35" alt="cuttle" class="avatar"></a><div class="card-owner-date-right-side"><div class="card-owner"><a href="/@cuttle">Cuttle Labs</a></div><div class="card-date">Jul 14, 2023 (updated Nov 9, 2023)</div></div></div></div></div></figure><h1>Demo</h1><figure class="doc-image" contenteditable="false"><img path="56/fed9a64c2071f2e364df54e41a447b3aae737e7b78507efe71cb08b309e916a4.gif" src="https://cuttle-uploads.s3.us-west-1.amazonaws.com/56/fed9a64c2071f2e364df54e41a447b3aae737e7b78507efe71cb08b309e916a4.gif"></figure><h1>Tips</h1><ul><li><p>Adjust the <code>lineHeight</code> so that each line just overlaps.</p></li><li><p>You can add spaces on the left or right side of a line to adjust horizontal alignment.</p></li><li><p>For clean results, cut from cast acrylic.</p></li><li><p>Gently wash the skewer with soap and water before use. Can be reused!</p></li></ul><h1>Troubleshooting</h1><ul><li><p>Occasionally a text and font combination will glitch. Try slightly adjusting the "thicken" parameter if this happens.</p></li></ul></div></div></div></div></main><footer><div class="footer-inner"><div class="footer-content"><div class="footer-columns"><div class="left-footer-columns"><div class="footer-links-container"><a href="/templates" class="footer-link">Templates</a><a href="/explore" class="footer-link">Explore</a><a href="/learn/video-tutorials" class="footer-link">Learn</a><a href="https://blog.cuttle.xyz" class="footer-link">Blog</a><a href="/pricing" class="footer-link">Pricing</a><a href="https://www.facebook.com/groups/cuttle" target="_blank" class="footer-link">Facebook Group</a><a href="/discord" target="_blank" class="footer-link">Discord Server</a><a href="/affiliate" target="_blank" class="footer-link">Affiliate Program</a></div><div class="second-column"><div class="social-container"><div class="social-icons"><a href="https://twitter.com/CuttleXYZ" target="_blank" aria-label="Twitter: @CuttleXYZ"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Twitter icon</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg></a><a href="https://www.youtube.com/@Cuttle" target="_blank" aria-label="YouTube: @Cuttle"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>YouTube icon</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg></a><a href="https://www.instagram.com/cuttlexyz/" target="_blank" aria-label="Instagram: @CuttleXYZ"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram icon</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg></a></div><div class="contact-container"><div class="contact">Need help?</div>Email <a href="mailto: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>" class="footer-link"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a></div></div><div class="legal-container"><div>© 2024 - Cuttle Labs, Inc.</div><a href="/legal/terms-of-service" class="footer-link">Terms of Service</a><a href="/legal/privacy-policy" class="footer-link">Privacy Policy</a></div></div></div></div></div></div></footer></div><div class="toast-container"></div></body></html>