.preview {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 245px;
  border-radius: 18px;
  container-type: inline-size;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.35px;
  isolation: isolate;
}

.preview *,
.preview *::before,
.preview *::after {
  box-sizing: border-box;
}

.preview--notice { background: var(--preview-wheat); }
.preview--bylaw { background: var(--preview-sage); }
.preview--rnr,
.preview--small-rnr { background: var(--preview-lavender); }
.preview--nametag,
.preview--groups { background: var(--preview-oat); }

.preview__scene {
  position: absolute;
  top: 0;
  left: 50%;
  width: 600px;
  height: 245px;
  transform: translateX(-50%);
}

.preview__paper {
  position: absolute;
  background: var(--white);
  box-shadow: 0 8px 20px rgb(35 37 29 / 13%);
}

.preview__heading {
  display: block;
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -.75px;
}

.preview__pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
}

.preview__line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--cream, #f0ebdd);
}

.preview-notice__circle {
  position: absolute;
  top: 24px;
  left: 30px;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  background: var(--preview-wheat-soft);
}

.preview-notice__band {
  position: absolute;
  top: 60px;
  left: 8px;
  width: 211px;
  height: 32px;
  border-radius: 16px;
  background: var(--preview-wheat-deep);
  transform: rotate(-24deg);
}

.preview-notice__megaphone {
  position: absolute;
  top: 47px;
  left: 50px;
  width: 150px;
  height: 150px;
  color: var(--preview-wheat-ink);
}

.preview-notice__bell,
.preview-notice__mouth,
.preview-notice__handle,
.preview-notice__ray {
  position: absolute;
}

.preview-notice__bell {
  top: 54px;
  left: 19px;
  width: 29px;
  height: 34px;
  border: 4px solid currentColor;
  border-radius: 11px 0 0 11px;
  background: var(--preview-wheat-soft);
}

.preview-notice__mouth {
  top: 32px;
  left: 42px;
  width: 59px;
  height: 78px;
  background: currentColor;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.preview-notice__mouth::after {
  position: absolute;
  inset: 5px 4px;
  background: var(--preview-wheat-soft);
  clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 69%);
  content: "";
}

.preview-notice__handle {
  top: 83px;
  left: 36px;
  width: 31px;
  height: 35px;
  background: currentColor;
  clip-path: polygon(0 0, 55% 0, 100% 100%, 31% 100%);
}

.preview-notice__handle::after {
  position: absolute;
  inset: 4px 5px;
  background: var(--preview-wheat-soft);
  clip-path: polygon(0 0, 48% 0, 100% 100%, 35% 100%);
  content: "";
}

.preview-notice__ray,
.preview-notice__ray::before,
.preview-notice__ray::after {
  width: 19px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
}

.preview-notice__ray {
  top: 68px;
  left: 112px;
}

.preview-notice__ray::before,
.preview-notice__ray::after {
  position: absolute;
  left: -3px;
  content: "";
}

.preview-notice__ray::before { top: -23px; transform: rotate(-39deg); }
.preview-notice__ray::after { top: 23px; transform: rotate(39deg); }

.preview-notice__paper {
  top: 38px;
  left: 215px;
  width: 333px;
  height: 175px;
  padding: 22px 26px;
  border-radius: 15px;
}

.preview-notice__pill {
  margin-bottom: 11px;
  background: var(--preview-wheat-soft);
  color: var(--preview-wheat-ink);
}

.preview-notice__line { width: 237px; margin-top: 16px; }
.preview-notice__line--short { width: 180px; margin-top: 10px; }

.preview-bylaw__circle,
.preview-bylaw__shelf {
  position: absolute;
  background: var(--preview-sage-deep);
}

.preview-bylaw__circle {
  top: -21px;
  left: 401px;
  width: 228px;
  height: 228px;
  border-radius: 50%;
}

.preview-bylaw__shelf {
  top: 192px;
  left: 38px;
  width: 509px;
  height: 23px;
  border-radius: 11px;
}

.preview-bylaw__sheet {
  top: 38px;
  width: 215px;
  height: 169px;
  padding: 18px 21px;
  border-radius: 12px;
}

.preview-bylaw__sheet--current { left: 68px; }
.preview-bylaw__sheet--revision { left: 301px; width: 229px; }
.preview-bylaw__label { display: block; margin-bottom: 5px; color: var(--preview-sage-ink); }
.preview-bylaw__clause { display: block; margin-top: 4px; color: var(--muted); }

.preview-bylaw__sheet--revision .preview-bylaw__clause {
  width: 176px;
  margin-left: -2px;
  padding: 1px 8px 3px;
  border-radius: 6px;
  background: var(--preview-sage-soft);
  color: var(--preview-sage-ink);
}

.preview-bylaw__sheet .preview__line { position: absolute; top: 133px; left: 21px; width: 148px; }
.preview-bylaw__sheet--revision .preview__line { width: 155px; }

.preview-schedule__circle,
.preview-schedule__band {
  position: absolute;
  background: var(--preview-lavender-deep);
}

.preview-schedule__circle {
  top: 38px;
  left: 14px;
  width: 174px;
  height: 174px;
  border-radius: 50%;
}

.preview-schedule__band {
  top: 28px;
  left: 437px;
  width: 186px;
  height: 181px;
  border-radius: 86px;
}

.preview-schedule__paper {
  top: 34px;
  left: 81px;
  width: 438px;
  height: 177px;
  padding: 16px 22px;
  border-radius: 14px;
}

.preview-schedule__slots {
  display: grid;
  grid-template-columns: 73px 138px 155px;
  align-items: center;
  gap: 5px 12px;
  margin-top: 9px;
  padding: 7px 2px 0;
  border-top: 1px solid var(--border);
  color: var(--preview-lavender-ink);
}

.preview-schedule__slot--lavender { background: var(--preview-lavender-soft); }
.preview-schedule__slot--sage { background: var(--preview-sage-soft); color: var(--preview-sage-ink); }

.preview-namecard__circle {
  position: absolute;
  top: 16px;
  left: 395px;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: var(--preview-oat-deep);
}

.preview-namecard__back {
  top: 44px;
  left: 122px;
  width: 246px;
  height: 154px;
  border-radius: 12px;
  background: var(--preview-oat-deep);
  transform: rotate(-10deg);
  transform-origin: 50% 50%;
}

.preview-namecard__back span,
.preview-namecard__slot {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 48px;
  height: 9px;
  border-radius: 4px;
  background: var(--preview-oat-deep);
  transform: translateX(-50%);
}

.preview-namecard__back span { width: 52px; background: var(--preview-oat-ink); }

.preview-namecard__front {
  top: 70px;
  left: 212px;
  width: 260px;
  height: 156px;
  padding: 35px 24px 0;
  border-radius: 12px 12px 4px 4px;
  overflow: hidden;
  transform: rotate(7deg);
}

.preview-namecard__label { display: block; color: var(--preview-oat-ink); }
.preview-namecard__front strong { display: block; font-size: 40px; font-weight: 900; line-height: 52px; letter-spacing: -1.1px; }

.preview-namecard__stripe {
  position: absolute;
  inset: auto 0 0;
  height: 23px;
  background: var(--preview-oat-stripe);
}

@container (max-width: 520px) {
  .preview__scene { transform: translateX(-50%) scale(.88); }
}

@container (max-width: 440px) {
  .preview__scene { transform: translateX(-50%) scale(.72); }
}

@container (max-width: 360px) {
  .preview__scene { transform: translateX(-50%) scale(.60); }
}