@media (max-width: 900px) {
  .vis-dot { width: 26px; height: 26px; }
  .vis-shelf { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
.bg-layer {
  position: fixed; inset: 0; z-index: 0;
  background-color: var(--ink-0);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.bg-layer.on { opacity: 1; }
.bg-warp {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none;
}
.bg-warp.live { opacity: 1; }
body:has(.bg-layer.on) .fx.vignette { box-shadow: inset 0 0 260px 90px rgba(var(--seal-scrim-rgb), .96); }
.vis-card { width: min(616px, 94vw); padding: 24.2px 26.4px 22px; }
.vis-block { margin-bottom: 15.4px; }
.vis-colour { display: flex; align-items: center; gap: 11px; }
.vis-colour input[type="color"] {
  width: 46.2px; height: 33px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line);
}
.vis-swatches { display: flex; gap: 6.6px; flex: 1; flex-wrap: wrap; }
.vis-dot {
  width: 24.2px; height: 24.2px; padding: 0; cursor: pointer;
  border: 1px solid rgba(var(--seal-fg-rgb), .22);
  transition: transform .14s, box-shadow .14s;
}
.vis-dot:hover { transform: translateY(-2px); }
.vis-dot.on { box-shadow: 0 0 0 1px var(--ink-1), 0 0 0 2px var(--bone); }
.vis-shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92.4px, 1fr)); gap: 7.7px;
  border: 1px solid var(--line); background: rgba(var(--seal-bg-0-rgb), .45);
  padding: 7.7px; min-height: 68.2px; margin-bottom: 8.8px;
  max-height: 220px; overflow-y: auto;
}
.vis-thumb {
  position: relative; aspect-ratio: 16 / 10; cursor: pointer;
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}
.vis-thumb:hover { transform: translateY(-2px); border-color: var(--line-hot); }
.vis-thumb.on { border-color: var(--vermilion); box-shadow: 0 0 0 1px var(--vermilion); }
.vis-drop {
  position: absolute; top: 2.2px; right: 2.2px;
  width: 18.7px; height: 18.7px; padding: 0; line-height: 1; font-size: 12.1px;
  color: var(--bone); background: rgba(var(--seal-bg-0-rgb), .78);
  border: 1px solid var(--line); cursor: pointer;
}
.vis-drop:hover { background: var(--crimson); border-color: var(--vermilion); }
.vis-add { text-align: center; cursor: pointer; }