html {
  background: #111019;
  color-scheme: dark;
}

html[data-theme="light"] {
  background: #f3e7de;
  color-scheme: light;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at -11% 42%, rgba(93, 60, 86, 0.42) 0 16rem, transparent 48rem),
    radial-gradient(ellipse at 106% 22%, rgba(86, 65, 111, 0.34) 0 18rem, transparent 54rem),
    radial-gradient(ellipse at 100% 92%, rgba(111, 53, 88, 0.28) 0 20rem, transparent 64rem),
    radial-gradient(ellipse at 6% 82%, rgba(69, 55, 86, 0.34) 0 18rem, transparent 58rem),
    radial-gradient(ellipse at 50% 40%, rgba(255, 214, 190, 0.05) 0 30rem, transparent 84rem),
    linear-gradient(135deg, #101019 0%, #171522 38%, #241b2b 70%, #12101a 100%),
    #111019;
}

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at -10% 17%, rgba(255, 247, 234, 0.64) 0 18rem, transparent 54rem),
    radial-gradient(ellipse at 105% 4%, rgba(245, 210, 229, 0.5) 0 20rem, transparent 58rem),
    radial-gradient(ellipse at 8% 84%, rgba(255, 230, 205, 0.48) 0 19rem, transparent 58rem),
    radial-gradient(ellipse at 92% 86%, rgba(232, 201, 230, 0.34) 0 16rem, transparent 66rem),
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 241, 0.58) 0 34rem, transparent 86rem),
    linear-gradient(135deg, #fbf4ed 0%, #f2dfd8 42%, #eadbe7 70%, #f7ece4 100%),
    #f3e7de;
}

.ds-frame,
.ds-card,
.ds-glass {
  background: rgba(28, 24, 31, 0.86);
  border-color: rgba(255, 218, 198, 0.24);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="light"] .ds-frame,
html[data-theme="light"] .ds-card,
html[data-theme="light"] .ds-glass {
  background: rgba(255, 248, 242, 0.88);
  border-color: rgba(246, 211, 196, 0.68);
}