/* Side strands follow the window; the surface and weave share a soft edge. */
.app-window {
  --cer-window-border-size: 8px;
  --cer-window-border-corner: 32px;
  --cer-window-radius: 30px;
  --cer-window-feather: 6px;
  --cer-window-weave-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2212%22%20viewBox%3D%220%200%20240%2012%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%206.000C6.667%207.204%2013.333%208.300%2020.000%208.300C26.667%208.300%2033.333%207.204%2040.000%206.000C46.667%204.796%2053.333%203.700%2060.000%203.700C66.667%203.700%2073.333%204.796%2080.000%206.000C86.667%207.204%2093.333%208.300%20100.000%208.300C106.667%208.300%20113.333%207.204%20120.000%206.000C126.667%204.796%20133.333%203.700%20140.000%203.700C146.667%203.700%20153.333%204.796%20160.000%206.000C166.667%207.204%20173.333%208.300%20180.000%208.300C186.667%208.300%20193.333%207.204%20200.000%206.000C206.667%204.796%20213.333%203.700%20220.000%203.700C226.667%203.700%20233.333%204.796%20240.000%206.000%22%20stroke%3D%22%23420078%22%20stroke-width%3D%220.75%22%20opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M0%209.030C10.000%209.838%2020.000%209.129%2030.000%207.542C40.000%205.956%2050.000%203.777%2060.000%202.970C70.000%202.162%2080.000%202.871%2090.000%204.458C100.000%206.044%20110.000%208.223%20120.000%209.030C130.000%209.838%20140.000%209.129%20150.000%207.542C160.000%205.956%20170.000%203.777%20180.000%202.970C190.000%202.162%20200.000%202.871%20210.000%204.458C220.000%206.044%20230.000%208.223%20240.000%209.030%22%20stroke%3D%22%237000ef%22%20stroke-width%3D%220.65%22%20opacity%3D%220.66%22%2F%3E%3Cpath%20d%3D%22M0%207.216C4.000%206.521%208.000%205.309%2012.000%204.673C16.000%204.036%2020.000%204.089%2024.000%204.784C28.000%205.479%2032.000%206.691%2036.000%207.327C40.000%207.964%2044.000%207.911%2048.000%207.216C52.000%206.521%2056.000%205.309%2060.000%204.673C64.000%204.036%2068.000%204.089%2072.000%204.784C76.000%205.479%2080.000%206.691%2084.000%207.327C88.000%207.964%2092.000%207.911%2096.000%207.216C100.000%206.521%20104.000%205.309%20108.000%204.673C112.000%204.036%20116.000%204.089%20120.000%204.784C124.000%205.479%20128.000%206.691%20132.000%207.327C136.000%207.964%20140.000%207.911%20144.000%207.216C148.000%206.521%20152.000%205.309%20156.000%204.673C160.000%204.036%20164.000%204.089%20168.000%204.784C172.000%205.479%20176.000%206.691%20180.000%207.327C184.000%207.964%20188.000%207.911%20192.000%207.216C196.000%206.521%20200.000%205.309%20204.000%204.673C208.000%204.036%20212.000%204.089%20216.000%204.784C220.000%205.479%20224.000%206.691%20228.000%207.327C232.000%207.964%20236.000%207.911%20240.000%207.216%22%20stroke%3D%22%235c1d92%22%20stroke-width%3D%220.6%22%20opacity%3D%220.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --cer-window-weave-y: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%22240%22%20viewBox%3D%220%200%2012%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20transform%3D%22matrix(0%201%201%200%200%200)%22%3E%3Cpath%20d%3D%22M0%206.000C6.667%207.204%2013.333%208.300%2020.000%208.300C26.667%208.300%2033.333%207.204%2040.000%206.000C46.667%204.796%2053.333%203.700%2060.000%203.700C66.667%203.700%2073.333%204.796%2080.000%206.000C86.667%207.204%2093.333%208.300%20100.000%208.300C106.667%208.300%20113.333%207.204%20120.000%206.000C126.667%204.796%20133.333%203.700%20140.000%203.700C146.667%203.700%20153.333%204.796%20160.000%206.000C166.667%207.204%20173.333%208.300%20180.000%208.300C186.667%208.300%20193.333%207.204%20200.000%206.000C206.667%204.796%20213.333%203.700%20220.000%203.700C226.667%203.700%20233.333%204.796%20240.000%206.000%22%20stroke%3D%22%23420078%22%20stroke-width%3D%220.75%22%20opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M0%209.030C10.000%209.838%2020.000%209.129%2030.000%207.542C40.000%205.956%2050.000%203.777%2060.000%202.970C70.000%202.162%2080.000%202.871%2090.000%204.458C100.000%206.044%20110.000%208.223%20120.000%209.030C130.000%209.838%20140.000%209.129%20150.000%207.542C160.000%205.956%20170.000%203.777%20180.000%202.970C190.000%202.162%20200.000%202.871%20210.000%204.458C220.000%206.044%20230.000%208.223%20240.000%209.030%22%20stroke%3D%22%237000ef%22%20stroke-width%3D%220.65%22%20opacity%3D%220.66%22%2F%3E%3Cpath%20d%3D%22M0%207.216C4.000%206.521%208.000%205.309%2012.000%204.673C16.000%204.036%2020.000%204.089%2024.000%204.784C28.000%205.479%2032.000%206.691%2036.000%207.327C40.000%207.964%2044.000%207.911%2048.000%207.216C52.000%206.521%2056.000%205.309%2060.000%204.673C64.000%204.036%2068.000%204.089%2072.000%204.784C76.000%205.479%2080.000%206.691%2084.000%207.327C88.000%207.964%2092.000%207.911%2096.000%207.216C100.000%206.521%20104.000%205.309%20108.000%204.673C112.000%204.036%20116.000%204.089%20120.000%204.784C124.000%205.479%20128.000%206.691%20132.000%207.327C136.000%207.964%20140.000%207.911%20144.000%207.216C148.000%206.521%20152.000%205.309%20156.000%204.673C160.000%204.036%20164.000%204.089%20168.000%204.784C172.000%205.479%20176.000%206.691%20180.000%207.327C184.000%207.964%20188.000%207.911%20192.000%207.216C196.000%206.521%20200.000%205.309%20204.000%204.673C208.000%204.036%20212.000%204.089%20216.000%204.784C220.000%205.479%20224.000%206.691%20228.000%207.327C232.000%207.964%20236.000%207.911%20240.000%207.216%22%20stroke%3D%22%235c1d92%22%20stroke-width%3D%220.6%22%20opacity%3D%220.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .app-window {
    position: relative;
    border-color: transparent;
    box-shadow: none;
    /* Feather the actual surface, including its rounded corners, not just the ink. */
    --cer-window-surface-mask:
      linear-gradient(#000 0 0) center / calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) no-repeat,
      linear-gradient(to bottom, transparent, #000 var(--cer-window-feather)) top center / calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) var(--cer-window-radius) no-repeat,
      linear-gradient(to top, transparent, #000 var(--cer-window-feather)) bottom center / calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) var(--cer-window-radius) no-repeat,
      linear-gradient(to right, transparent, #000 var(--cer-window-feather)) left center / var(--cer-window-radius) calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) no-repeat,
      linear-gradient(to left, transparent, #000 var(--cer-window-feather)) right center / var(--cer-window-radius) calc(100% - var(--cer-window-radius) - var(--cer-window-radius)) no-repeat,
      radial-gradient(circle var(--cer-window-radius) at right bottom, #000 calc(var(--cer-window-radius) - var(--cer-window-feather)), transparent var(--cer-window-radius)) left top / var(--cer-window-radius) var(--cer-window-radius) no-repeat,
      radial-gradient(circle var(--cer-window-radius) at left bottom, #000 calc(var(--cer-window-radius) - var(--cer-window-feather)), transparent var(--cer-window-radius)) right top / var(--cer-window-radius) var(--cer-window-radius) no-repeat,
      radial-gradient(circle var(--cer-window-radius) at right top, #000 calc(var(--cer-window-radius) - var(--cer-window-feather)), transparent var(--cer-window-radius)) left bottom / var(--cer-window-radius) var(--cer-window-radius) no-repeat,
      radial-gradient(circle var(--cer-window-radius) at left top, #000 calc(var(--cer-window-radius) - var(--cer-window-feather)), transparent var(--cer-window-radius)) right bottom / var(--cer-window-radius) var(--cer-window-radius) no-repeat;
    -webkit-mask: var(--cer-window-surface-mask);
    mask: var(--cer-window-surface-mask);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .app-window::before,
  .app-window::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: -1px;
    box-sizing: border-box;
    padding: var(--cer-window-border-size);
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
    opacity: .46;
    background-position: 0 0;
    background-repeat: repeat;
    background-attachment: fixed;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  /* Match each weave to its edge; combine them only at the rounded turns. */
  .app-window::before {
    background-image: var(--cer-window-weave-x);
    background-size: 240px 12px;
    clip-path: polygon(0 0, 100% 0, 100% var(--cer-window-border-corner), 0 var(--cer-window-border-corner), 0 calc(100% - var(--cer-window-border-corner)), 100% calc(100% - var(--cer-window-border-corner)), 100% 100%, 0 100%);
  }

  .app-window::after {
    background-image: var(--cer-window-weave-y), var(--cer-window-weave-y);
    background-size: 12px 240px, 12px 240px;
    background-repeat: repeat-y;
    background-position: left -2px top 0, right -2px top 0;
    background-attachment: scroll;
    clip-path: polygon(0 0, var(--cer-window-border-corner) 0, var(--cer-window-border-corner) 100%, calc(100% - var(--cer-window-border-corner)) 100%, calc(100% - var(--cer-window-border-corner)) 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 520px) {
  .app-window { --cer-window-radius: 23px; }
}