.pmp-brief-preview {
  --brief-surface: var(--pmp-surface, #fff);
  --brief-panel-ink: var(--pmp-ink, #17152b);
  --brief-muted: var(--pmp-muted, #57556b);
  --brief-line: var(--pmp-line, #e1dfee);
  --brief-control-accent: var(--pmp-accent, #6542d0);
  --brief-control-tint: #f1ebff;
  --brief-stage: #eeebf8;
  --brief-stage-glow: #d9cdf8;
  --brief-a: #6845ef;
  --brief-b: #3976f6;
  --brief-paper: #f5f5fa;
  --brief-ink: #000;
  --brief-on-a: #fff;
  --brief-on-b: #000;
  --brief-font: Manrope, sans-serif;
  --mock-a: #6845ef;
  --mock-b: #3976f6;
  --mock-paper: #f5f5fa;
  --mock-ink: #000;
  --mock-on-a: #fff;
  --mock-on-b: #000;
  --mock-font: Manrope, sans-serif;
  box-sizing: border-box;
  align-self: start;
  min-width: 0;
  border: 1px solid var(--brief-line);
  border-radius: 20px;
  background: var(--brief-surface);
  color: var(--brief-panel-ink);
}

[data-theme="dark"] .pmp-brief-preview {
  --brief-control-tint: #2c2242;
  --brief-stage: #201b32;
  --brief-stage-glow: #3c2d59;
}

.pmp-brief-preview *, .pmp-brief-preview *::before, .pmp-brief-preview *::after { box-sizing: border-box; }
.pmp-brief-preview [hidden] { display: none !important; }
.pmp-brief-preview :is(p, ul, dl, dd, dt, li) { margin: 0; }
.pmp-brief-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px 13px;
  padding: 15px 17px;
}
.pmp-brief-preview-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.pmp-brief-preview-head small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brief-muted);
  font-size: .66rem;
  font-weight: 780;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pmp-brief-preview-head small i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--brief-control-accent);
}
.pmp-brief-preview-head strong { font-size: .95rem; font-weight: 790; line-height: 1.35; }
.pmp-brief-preview-devices {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--brief-line);
  border-radius: 10px;
  background: var(--brief-surface);
}
.pmp-brief-preview-devices button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--brief-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 710;
  line-height: 1.25;
  cursor: pointer;
}
.pmp-brief-preview-devices button[aria-pressed="true"] {
  border-color: var(--brief-line);
  background: var(--brief-control-tint);
  color: var(--brief-panel-ink);
}
.pmp-brief-preview-devices button:focus-visible { outline: 2px solid var(--brief-control-accent); outline-offset: 2px; }
.pmp-brief-preview-devices svg { display: block; flex: none; }

.pmp-brief-preview-stage {
  min-width: 0;
  border-block: 1px solid var(--brief-line);
  background: radial-gradient(ellipse at 89% 0, var(--brief-stage-glow), transparent 70%), var(--brief-stage);
}
.pmp-brief-preview-stage--site {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(11px, 2vw, 25px);
}
.pmp-brief-browser {
  container-type: inline-size;
  width: min(100%, 37rem);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c9c3dc;
  border-radius: 12px;
  background: var(--brief-paper);
  box-shadow: 0 17px 31px -23px #1d103dba, 0 2px 5px #302d4719;
}
.pmp-brief-browser-chrome {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 6px 9px;
  border-bottom: 1px solid #e3dfec;
  background: #fcfbff;
  color: #4a4660;
}
.pmp-brief-browser-lights { display: flex; gap: 3px; flex: none; }
.pmp-brief-browser-lights i { width: 5px; height: 5px; border-radius: 50%; background: #b8aecb; }
.pmp-brief-browser-lights i:first-child { background: #ad8bdc; }
.pmp-brief-browser-address {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #efedf5;
  color: #4a4660;
  font: 650 .63rem/1.22 Manrope, Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmp-brief-site {
  min-width: 0;
  padding: 4.2cqw;
  background: var(--brief-paper);
  color: var(--brief-ink);
  font-family: var(--brief-font);
}
.pmp-brief-site-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-bottom: 3.2cqw;
}
.pmp-brief-site-brand { display: flex; gap: 5px; align-items: center; min-width: 0; }
.pmp-brief-site-brand i { width: 10px; aspect-ratio: 1; flex: none; border-radius: 3px 3px 8px 3px; background: var(--brief-a); }
.pmp-brief-site-brand strong { font-size: clamp(.61rem, 3.1cqw, .91rem); line-height: 1.25; font-weight: 780; overflow-wrap: anywhere; }
.pmp-brief-site-nav-shapes { display: flex; gap: 4px; flex: none; }
.pmp-brief-site-nav-shapes i { width: 4.8cqw; height: 3px; border-radius: 3px; background: currentColor; opacity: .24; }
.pmp-brief-site-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 4cqw;
  padding: 5cqw;
  border-radius: clamp(7px, 3cqw, 15px);
  background: var(--brief-a);
  color: var(--brief-on-a);
}
.pmp-brief-site-copy { display: grid; gap: clamp(4px, 1.5cqw, 8px); min-width: 0; }
.pmp-brief-site-copy > span {
  font-size: clamp(.56rem, 2.45cqw, .75rem);
  font-weight: 720;
  line-height: 1.36;
  overflow-wrap: anywhere;
}
.pmp-brief-site-copy > strong {
  font-size: clamp(.94rem, 6.1cqw, 2.1rem);
  font-weight: 780;
  line-height: 1.03;
  letter-spacing: -.043em;
  overflow-wrap: anywhere;
}
.pmp-brief-site-copy > p {
  color: inherit;
  font-size: clamp(.58rem, 2.7cqw, .81rem);
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.pmp-brief-site-action { display: block; width: 38%; min-width: 22px; height: clamp(4px, 2cqw, 9px); border-radius: 3px; background: currentColor; }
.pmp-brief-site-art {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.16;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--brief-on-a) 29%, transparent);
  border-radius: clamp(6px, 2cqw, 11px);
  background: radial-gradient(ellipse at 40% 35%, color-mix(in srgb, var(--brief-paper) 32%, transparent), transparent 75%), var(--brief-b);
}
.pmp-brief-site-art i { position: absolute; display: block; border-radius: 9%; }
.pmp-brief-site-art i:nth-child(1) { inset: 15% 32% 25% 14%; transform: rotate(-12deg); background: var(--brief-paper); opacity: .9; }
.pmp-brief-site-art i:nth-child(2) { inset: 29% 12% 12% 34%; transform: rotate(12deg); background: var(--brief-a); box-shadow: 0 5px 13px #0002; border: 1px solid #ffffff54; }
.pmp-brief-site-art i:nth-child(3) { top: 16%; right: 13%; width: 15%; aspect-ratio: 1; border: 1px solid var(--brief-on-b); border-radius: 50%; }
.pmp-brief-site-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  list-style: none;
  padding: 0;
  margin-top: 2.8cqw !important;
}
.pmp-brief-site-sections li {
  display: flex;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--brief-ink) 18%, transparent);
  border-radius: 5px;
  font-size: clamp(.55rem, 2.3cqw, .72rem);
  font-weight: 690;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pmp-brief-site-sections li::before { content: ''; width: 4px; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--brief-a); }

.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-browser { width: min(81%, 13rem); border: 5px solid #292436; border-radius: 17px; }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-browser-lights { display: none; }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-site { padding: 6cqw; }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-site-hero { grid-template-columns: minmax(0, 1fr); }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-site-art { aspect-ratio: 1.8; }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-site-copy > strong { font-size: clamp(.89rem, 8.5cqw, 1.26rem); }
.pmp-brief-preview[data-brief-device-view="phone"] .pmp-brief-site-nav-shapes i:not(:first-child) { display: none; }

.pmp-brief-preview-stage--art .pmp-mock-stage { margin: 0; }
.pmp-brief-preview-stage--fallback {
  display: grid;
  place-items: center;
  padding: clamp(15px, 4vw, 36px);
}
.pmp-brief-preview-stage--fallback > span {
  display: grid;
  width: min(100%, 22rem);
  min-height: 130px;
  place-items: center;
  padding: 20px;
  border-radius: 12px;
  background: var(--brief-a);
  color: var(--brief-on-a);
  font-family: var(--brief-font);
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 750;
  text-align: center;
  overflow-wrap: anywhere;
}

.pmp-brief-preview-caption {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 12px 17px 3px;
}
.pmp-brief-preview-caption > div { min-width: 0; display: grid; gap: 2px; }
.pmp-brief-preview-caption strong { font-size: .88rem; font-weight: 770; line-height: 1.3; overflow-wrap: anywhere; }
.pmp-brief-preview-caption small { color: var(--brief-muted); font-size: .73rem; line-height: 1.3; }
.pmp-brief-preview-swatches { display: inline-flex; flex: none; align-items: center; gap: 3px; }
.pmp-brief-preview-swatches i { display: block; width: 15px; height: 15px; border: 1px solid var(--brief-line); border-radius: 50%; }
.pmp-brief-preview-footer { padding: 12px 17px 16px; }
.pmp-brief-preview-progress { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pmp-brief-preview-progress progress { flex: 1 1 0; width: 100%; min-width: 0; height: 6px; accent-color: var(--brief-control-accent); }
.pmp-brief-preview-progress span, .pmp-brief-preview-footer p { color: var(--brief-muted); font-size: .71rem; line-height: 1.45; }
.pmp-brief-preview-progress span { flex: none; font-weight: 730; }
.pmp-brief-preview-footer p { margin-top: 8px; }

.pmp-brief-preview-scope { padding: 15px 17px; border-block: 1px solid var(--brief-line); }
.pmp-brief-preview-scope-intro { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pmp-brief-preview-scope-mark {
  display: grid;
  width: 35px;
  height: 35px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: var(--brief-control-tint);
  color: var(--brief-control-accent);
}
.pmp-brief-preview-scope-intro > div { display: grid; gap: 2px; min-width: 0; }
.pmp-brief-preview-scope-intro > div > span { color: var(--brief-muted); font-size: .73rem; line-height: 1.3; overflow-wrap: anywhere; }
.pmp-brief-preview-scope-intro strong { font-size: .94rem; line-height: 1.35; overflow-wrap: anywhere; }
.pmp-brief-preview-empty { margin-top: 14px !important; color: var(--brief-muted); font-size: .79rem; line-height: 1.48; }
.pmp-brief-preview-values { display: grid; gap: 8px; margin-top: 13px !important; }
.pmp-brief-preview-values > div { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--brief-line); min-width: 0; }
.pmp-brief-preview-values dt { color: var(--brief-muted); font-size: .74rem; line-height: 1.35; }
.pmp-brief-preview-values dd { color: var(--brief-panel-ink); font-size: .83rem; font-weight: 740; line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 400px) {
  .pmp-brief-preview-head, .pmp-brief-preview-caption, .pmp-brief-preview-footer, .pmp-brief-preview-scope { padding-inline: 12px; }
}