.tw-artwork-layer {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2147482000;
  overflow: visible;
  display: none;
}

body.tw-artwork-preview .tw-artwork-layer,
body.tw-artwork-live .tw-artwork-layer { display: block; }

/* The page shell carries the same paper colour as the body.  Making only that
   shell transparent lets the artwork sit behind the copy without being hidden
   by an otherwise opaque full-page background.  Individual coloured panels
   keep their own backgrounds and continue to mask artwork naturally. */
body.tw-artwork-preview,
body.tw-artwork-live { background: #f7f3ec; }

body.tw-artwork-preview > main.talkwise-site,
body.tw-artwork-live > main.talkwise-site {
  background-color: transparent;
  z-index: 2;
}

.tw-layout-grid {
  position: absolute;
  inset: 0;
  height: var(--grid-height, 100%);
  z-index: 2147483000;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(176, 128, 46, .10) 0 1px, transparent 1px 8px);
}

.tw-layout-grid__columns {
  position: absolute;
  inset: 0 auto 0 50%;
  width: min(1200px, calc(100% - 64px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  border-inline: 1px solid rgba(13, 88, 80, .42);
}

.tw-layout-grid__column {
  background: rgba(13, 88, 80, .035);
  border-inline: 1px solid rgba(13, 88, 80, .18);
}

.tw-layout-grid__label {
  position: fixed;
  z-index: 2147483001;
  top: 84px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #0b3b35;
  color: #fff;
  font: 600 11px/1.2 system-ui, sans-serif;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.tw-artwork-preview.tw-grid-on .tw-artwork-piece {
  outline: 1px dashed rgba(152, 43, 86, .42);
  outline-offset: 2px;
}

.tw-artwork-preview.tw-grid-on .tw-artwork-piece::after { content: ''; }

@media (max-width: 767px) {
  .tw-layout-grid__columns {
    width: calc(100% - 32px);
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .tw-layout-grid__column:nth-child(n+5) { display: none; }
  .tw-layout-grid__label { top: 70px; }
}

.tw-artwork-piece {
  position: absolute;
  display: block;
  width: var(--art-width);
  height: var(--art-height, var(--art-width));
  left: calc(50% + var(--art-x));
  top: var(--art-y);
  opacity: var(--art-opacity, .66);
  transform: translate(calc(-50% + var(--art-dx, 0px)), calc(-50% + var(--art-dy, 0px))) rotate(var(--art-rotate, 0deg)) scaleX(var(--art-mirror, 1));
  transform-origin: center;
  background: var(--art-image) center / contain no-repeat;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(.94);
}

.tw-artwork-anchor {
  position: relative;
  isolation: isolate;
}

.tw-artwork-anchor > :not(.tw-section-artwork) {
  position: relative;
  z-index: 1;
}

.tw-section-artwork {
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--slot-width);
  aspect-ratio: var(--slot-ratio, 1 / 1);
  pointer-events: none;
  background: var(--art-image) center / contain no-repeat;
  opacity: .66;
  transform: rotate(var(--slot-rotate, 0deg)) scaleX(var(--slot-mirror, 1));
  transform-origin: center;
  filter: saturate(.94);
}

.tw-artwork-preview.tw-grid-on .tw-section-artwork {
  outline: 1px dashed rgba(152, 43, 86, .42);
  outline-offset: 2px;
}

@media (max-width: 1279px) {
  .tw-artwork-layer { display: none; }
  .tw-section-artwork { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-artwork-piece { animation: none !important; }
}