.board-artwork {
  --art-canvas: #e7e7ec;
  --art-0: #cbd0dc;
  --art-1: #d8ced5;
  --art-2: #ded5c7;
  --art-line: #aeb9c9;
  display: block;
  width: 100%;
  height: 100%;
}
.board-artwork[data-art-palette="1"] {
  --art-canvas: #e9e6e2;
  --art-0: #d5c8bf;
  --art-1: #d3ceda;
  --art-2: #cbd1d7;
  --art-line: #b4aeba;
}
.board-artwork[data-art-palette="2"] {
  --art-canvas: #e5e8ec;
  --art-0: #c3d0da;
  --art-1: #d1ccdc;
  --art-2: #d9d4cf;
  --art-line: #acb6c9;
}
.board-artwork[data-art-palette="3"] {
  --art-canvas: #eae5e9;
  --art-0: #d5c6d2;
  --art-1: #c8ccd9;
  --art-2: #ded0c5;
  --art-line: #b5acc1;
}
:root[data-theme="dark"] .board-artwork {
  --art-canvas: #1e222b;
  --art-0: #323b4c;
  --art-1: #3c3444;
  --art-2: #3d3935;
  --art-line: #59647a;
}
:root[data-theme="dark"] .board-artwork[data-art-palette="1"] {
  --art-canvas: #242329;
  --art-0: #403832;
  --art-1: #383447;
  --art-2: #303b46;
  --art-line: #655e71;
}
:root[data-theme="dark"] .board-artwork[data-art-palette="2"] {
  --art-canvas: #1d232d;
  --art-0: #2e3c4c;
  --art-1: #393547;
  --art-2: #3c3a39;
  --art-line: #52627b;
}
:root[data-theme="dark"] .board-artwork[data-art-palette="3"] {
  --art-canvas: #252129;
  --art-0: #413344;
  --art-1: #30384b;
  --art-2: #433932;
  --art-line: #655876;
}
.board-workspace.has-board-artwork {
  position: relative;
  isolation: isolate;
}
.board-artwork[data-art-colorway="grey"] {
  --art-canvas: #e7e7e7;
  --art-0: #cccccc;
  --art-1: #d4d4d4;
  --art-2: #dddddd;
  --art-line: #aeaeae;
}
.board-artwork[data-art-colorway="blue"] {
  --art-canvas: #e6eaf0;
  --art-0: #c4cedc;
  --art-1: #d1d8e2;
  --art-2: #bfcbd9;
  --art-line: #a2b0c4;
}
.board-artwork[data-art-colorway="dusk"] {
  --art-canvas: #ebe6ee;
  --art-0: #d0c5db;
  --art-1: #dbcbd6;
  --art-2: #c9c7dc;
  --art-line: #afa1bb;
}
.board-artwork[data-art-colorway="sand"] {
  --art-canvas: #eee8e1;
  --art-0: #dbcbbd;
  --art-1: #d6c4c3;
  --art-2: #ded6c9;
  --art-line: #b6a598;
}
:root[data-theme="dark"] .board-artwork[data-art-colorway="grey"] {
  --art-canvas: #232323;
  --art-0: #383838;
  --art-1: #414141;
  --art-2: #303030;
  --art-line: #626262;
}
:root[data-theme="dark"] .board-artwork[data-art-colorway="blue"] {
  --art-canvas: #202530;
  --art-0: #303e52;
  --art-1: #3c4656;
  --art-2: #2b3544;
  --art-line: #586b86;
}
:root[data-theme="dark"] .board-artwork[data-art-colorway="dusk"] {
  --art-canvas: #27232e;
  --art-0: #403549;
  --art-1: #493a45;
  --art-2: #36374a;
  --art-line: #70617f;
}
:root[data-theme="dark"] .board-artwork[data-art-colorway="sand"] {
  --art-canvas: #292521;
  --art-0: #443a31;
  --art-1: #483a3a;
  --art-2: #3b3730;
  --art-line: #776758;
}
.board-artwork[data-art-style="neon"] {
  --art-neon-0: color-mix(in srgb, var(--art-0) 35%, var(--art-line));
  --art-neon-1: color-mix(in srgb, var(--art-1) 35%, var(--art-line));
  --art-neon-2: color-mix(in srgb, var(--art-2) 35%, var(--art-line));
  --art-neon-core: color-mix(in srgb, var(--art-line) 80%, var(--art-canvas));
}
:root[data-theme="dark"] .board-artwork[data-art-style="neon"] {
  --art-neon-0: color-mix(in srgb, var(--art-0) 55%, white);
  --art-neon-1: color-mix(in srgb, var(--art-1) 55%, white);
  --art-neon-2: color-mix(in srgb, var(--art-2) 55%, white);
  --art-neon-core: color-mix(in srgb, var(--art-line) 45%, white);
}
.artwork-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .artwork-options {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.board-artwork-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.has-board-artwork > :not(.board-artwork-layer, .board-menu) {
  z-index: 1;
}
.board-tile-cover.has-board-artwork .mini-board {
  position: relative;
}
.has-board-artwork :is(.board-header, .board-subheader, .board-footer) {
  color: var(--ink);
  background: transparent;
}
.has-board-artwork
  :is(.board-privacy, .board-back, .board-search .icon, .board-footer p) {
  color: var(--muted);
}
.has-board-artwork :is(.board-filter-button, .board-search) {
  color: var(--ink);
  background: #ffffff75;
  border-color: #ffffff70;
}
.has-board-artwork .board-filter-button:hover {
  background: #ffffffb0;
}
.has-board-artwork .board-search input {
  color: var(--ink);
}
.has-board-artwork .board-search input::placeholder {
  color: var(--muted);
}
.has-board-artwork .tile-role {
  color: var(--ink);
}
.has-board-artwork .mini-list {
  background: #ffffff60;
}
.has-board-artwork .mini-list i {
  background: #8e98ae70;
}
:root[data-theme="dark"]
  .has-board-artwork
  :is(.board-filter-button, .board-search) {
  background: #171b2480;
  border-color: #ffffff16;
}
:root[data-theme="dark"] .has-board-artwork .board-filter-button:hover {
  background: #252c3c;
}
:root[data-theme="dark"] .has-board-artwork .mini-list {
  background: #151a2550;
}
.artwork-preview {
  height: 190px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.artwork-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.artwork-actions > .button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}
.artwork-status {
  margin: 12px 0 0;
}
.background-controls {
  margin: 18px 0;
}
.artwork-seed-info {
  margin: 14px 0;
}
.artwork-seed-info code {
  display: block;
  overflow-wrap: anywhere;
  margin: 8px 0;
  color: var(--muted);
}
.has-board-artwork :is(.add-list, .board-key, .role-badge) {
  color: var(--ink);
  background: #ffffff60;
  border-color: #ffffff80;
}
.has-board-artwork .add-list:hover {
  color: var(--ink);
  background: #ffffff95;
}
.has-board-artwork :is(.board-bottom, .empty-board) {
  color: var(--muted);
}
.has-board-artwork .empty-board h2 {
  color: var(--ink);
}
:root[data-theme="dark"]
  .has-board-artwork
  :is(.add-list, .board-key, .role-badge) {
  background: #ffffff12;
  border-color: #ffffff18;
}
:root[data-theme="dark"] .has-board-artwork .add-list:hover {
  background: #ffffff20;
}