/* Shared ornamental information surface from design guide example 41. */
.worldbuilder-ornamental-box {
    position:relative;
    isolation:isolate;
    border:0;
    background:linear-gradient(to right,#212529,rgba(33,37,41,0)),url('https://worldanvil-static.sfo2.cdn.digitaloceanspaces.com/images/unthemed_desktop_widget_background_texture.png') repeat;
    background-color:#212529;
    box-shadow:0 10px 24px -12px #0009,0 2px 4px #0005,inset 0 1px 0 #fff1;
}
.worldbuilder-ornamental-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(
    135deg,
    #bac5cf 0%,
    #505b65 16%,
    #12171d 33%,
    #606d79 49%,
    #dae3ea 51%,
    #303a44 70%,
    #090d12 87%,
    #788793 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}
.worldbuilder-ornamental-box::after {
  --interim-widget-corners:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20transform%3D%22rotate%28180%2012%2012%29%22%20d%3D%22M1%2023H23V1C22%2018%2018%2022%201%2023Z%22%2F%3E%3C%2Fsvg%3E")
      top left / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20transform%3D%22rotate%28270%2012%2012%29%22%20d%3D%22M1%2023H23V1C22%2018%2018%2022%201%2023Z%22%2F%3E%3C%2Fsvg%3E")
      top right / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20transform%3D%22rotate%2890%2012%2012%29%22%20d%3D%22M1%2023H23V1C22%2018%2018%2022%201%2023Z%22%2F%3E%3C%2Fsvg%3E")
      bottom left / 24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20transform%3D%22%22%20d%3D%22M1%2023H23V1C22%2018%2018%2022%201%2023Z%22%2F%3E%3C%2Fsvg%3E")
      bottom right / 24px 24px no-repeat;
  content: "";
  position: absolute;
  inset: 5px;
  background: linear-gradient(
    135deg,
    #9aa9b6 0%,
    #303a44 22%,
    #687885 48%,
    #bac7d1 51%,
    #27313a 75%,
    #768794 100%
  );
  -webkit-mask: var(--interim-widget-corners);
  mask: var(--interim-widget-corners);
  pointer-events: none;
  z-index: 10;
}
.worldbuilder-ornamental-box {padding:28px;color:#ebeef5;}
@media(max-width:600px){.worldbuilder-ornamental-box{padding:20px}}