.theme-preview {
  --pv-paper: #f5f3ef;
  --pv-ink: #191a1a;
  --pv-line: rgba(25, 26, 26, .16);
  --pv-accent: #672f35;
  --pv-surface: #fffdfa;
  --pv-muted: #e7dfd2;
  --pv-copy: rgba(25, 26, 26, .63);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--pv-paper);
  color: var(--pv-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  transition: background .2s, color .2s
}

.theme-preview[data-preview-theme=dark] {
  --pv-paper: #111513;
  --pv-ink: #f2eee5;
  --pv-line: rgba(242, 238, 229, .17);
  --pv-accent: #d2b477;
  --pv-surface: #1a201d;
  --pv-muted: #26302b;
  --pv-copy: rgba(242, 238, 229, .63)
}

.theme-preview[data-preview-theme=photographic] {
  --pv-paper: #e8dfd0;
  --pv-ink: #1d201c;
  --pv-line: rgba(29, 32, 28, .19);
  --pv-accent: #884433;
  --pv-surface: #f7f1e7;
  --pv-muted: #d8c8b4;
  --pv-copy: rgba(29, 32, 28, .63)
}

.theme-preview[data-preview-theme=classic] {
  --pv-paper: #f7f3eb;
  --pv-ink: #272114;
  --pv-line: rgba(39, 33, 20, .17);
  --pv-accent: #294661;
  --pv-surface: #fffdf8;
  --pv-muted: #ece0c9;
  --pv-copy: rgba(39, 33, 20, .62)
}

.theme-preview[data-preview-theme=future] {
  --pv-paper: #08101b;
  --pv-ink: #e9f6ff;
  --pv-line: rgba(141, 219, 255, .22);
  --pv-accent: #4ee9bd;
  --pv-surface: #101d2c;
  --pv-muted: #172a3d;
  --pv-copy: rgba(233, 246, 255, .65)
}

.theme-preview[data-preview-heading=editorial] h3 {
  font-family: 'Playfair Display', serif
}

.theme-preview[data-preview-heading=modern] h3 {
  font-family: Manrope, sans-serif
}

.theme-preview[data-preview-heading=classic] h3 {
  font-family: 'Libre Baskerville', serif
}

.theme-preview[data-preview-heading=geometric] h3 {
  font-family: 'Space Grotesk', sans-serif
}

.theme-preview[data-preview-subheading=editorial] .preview-note {
  font-family: 'Playfair Display', serif
}

.theme-preview[data-preview-subheading=modern] .preview-note {
  font-family: Manrope, sans-serif
}

.theme-preview[data-preview-subheading=classic] .preview-note {
  font-family: 'Libre Baskerville', serif
}

.theme-preview[data-preview-subheading=geometric] .preview-note {
  font-family: 'Space Grotesk', sans-serif
}

.theme-preview__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-line);
  font: 600 10px var(--mono);
  letter-spacing: .08em
}

.theme-preview__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pv-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pv-accent) 18%, transparent)
}

.theme-preview__canvas {
  padding: 25px;
  background: linear-gradient(135deg, var(--pv-paper), var(--pv-muted))
}

.theme-preview h3 {
  max-width: 280px;
  margin: 0 0 9px;
  font-size: 35px;
  line-height: .93;
  letter-spacing: -.04em
}

.theme-preview p {
  margin: 0;
  color: var(--pv-copy);
  font-size: 12px
}

.preview-note {
  font-size: 12px
}

.theme-preview__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px
}

.theme-preview__button {
  border: 1px solid var(--pv-ink);
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--pv-ink);
  color: var(--pv-paper);
  font: 600 10px var(--mono)
}

.theme-preview__rule {
  height: 1px;
  flex: 1;
  background: var(--pv-line)
}

.theme-preview__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--pv-line);
  background: var(--pv-surface);
  color: var(--pv-copy);
  font-size: 10px
}

.preview-reset {
  margin-top: 10px;
  width: 100%
}

.preview-state {
  color: var(--copy);
  font-size: 11px;
  margin: 10px 0 0
}