.project-typingweb .project-panel::after {
  content: "";
  position: absolute;
  inset: auto 20px 16px auto;
  width: 280px;
  height: 130px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(86, 153, 255, 0.06) 50%, rgba(86, 153, 255, 0.16) 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  background-size: 22px 100%, 100% 100%;
  border: 1px solid rgba(71, 118, 196, 0.16);
}

.project-typingweb .project-side {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.74), transparent 18%),
    linear-gradient(145deg, rgba(238, 247, 255, 0.98), rgba(126, 177, 234, 0.58) 44%, rgba(68, 100, 145, 0.84));
}

html[data-theme="dark"] .project-typingweb .project-side {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.12), transparent 18%),
    linear-gradient(145deg, rgba(16, 26, 46, 0.98), rgba(43, 77, 131, 0.84) 44%, rgba(26, 73, 90, 0.88));
}

.project-typingweb .notes-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    rgba(238, 247, 255, 0.56);
}

html[data-theme="dark"] .project-typingweb .notes-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(18, 29, 49, 0.58);
}