/* Paint the whole canvas, including the space above the rounded workspace. */
@media screen {
  html:has(body[data-view="workspace"]) {
    min-height: 100%;
    background-color: #edb88f;
    background-image:
      radial-gradient(ellipse 95% 135% at 0% 100%, #cf773c 0%, #dd965e99 36%, #dd965e00 76%),
      radial-gradient(ellipse 95% 135% at 100% 100%, #cf773c 0%, #dd965e99 36%, #dd965e00 76%),
      radial-gradient(ellipse 110% 75% at 50% 0%, #e6a36c 0%, #edb88f99 48%, #edb88f00 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }

  html body[data-view="workspace"] {
    display: flow-root;
    min-height: 100vh;
    margin: 0;
    background: transparent;
  }

  html[data-theme="dark"]:has(body[data-view="workspace"]) {
    background-color: #251a13;
    background-image:
      radial-gradient(ellipse 95% 135% at 0% 100%, #713b20 0%, #60351e99 36%, #60351e00 76%),
      radial-gradient(ellipse 95% 135% at 100% 100%, #713b20 0%, #60351e99 36%, #60351e00 76%),
      radial-gradient(ellipse 110% 75% at 50% 0%, #51301d 0%, #35221799 48%, #35221700 100%);
  }

  html[data-theme="dark"] body[data-view="workspace"] {
    background: transparent;
  }
}