/* Current Figma app examples: real selectable type, never a screenshot of text. */
.site-preview {
  position: relative;
  width: 402px;
  height: 720px;
  flex: 0 0 402px;
  overflow: hidden;
  border-radius: 44px 44px 0 0;
  background: #f6f6f6 url('/assets/site/paper-light.webp') left top / 3276.8px 1843.2px;
  color: #201e1b;
  font:
    400 16px/24px 'Instrument Sans',
    sans-serif;
  font-synthesis: none;
  text-align: left;
  letter-spacing: 0;
}
.site-preview *,
.site-preview *::before,
.site-preview *::after {
  box-sizing: border-box;
}
.site-preview p,
.site-preview h3,
.site-preview h4 {
  margin: 0;
  color: inherit;
}
.site-preview h3 {
  font:
    400 28px/1.2 'Source Serif 4',
    serif;
  letter-spacing: 0;
}
.site-preview h4 {
  font:
    600 16px/24px 'Instrument Sans',
    sans-serif;
  letter-spacing: 0;
}
.site-preview section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.site-preview img {
  display: block;
  object-fit: contain;
}
.site-preview__me-content {
  position: absolute;
  top: 80px;
  left: 16px;
  width: 370px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.site-preview__me-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.site-preview__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.site-preview .site-preview__mark {
  width: 80px;
  height: 80px;
}
.site-preview .site-preview__identity-name {
  font:
    400 20px/24px 'Source Serif 4',
    serif;
}
.site-preview__me-title h3 {
  width: 370px;
}
.site-preview__me-reading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-preview .site-preview__me-intro {
  gap: 24px;
}
.site-preview--today {
  border-radius: 44px;
}
.site-preview__today-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 422px;
  padding: 170px 16px 100px;
  background: url('/assets/site/paper-today-head.webp') left top / 402px 422px no-repeat;
  text-align: center;
}
.site-preview__today-head h3 {
  font:
    400 32px/1.2 'Source Serif 4',
    serif;
}
.site-preview__today-reading {
  position: absolute;
  top: 423px;
  left: 16px;
  width: 370px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-preview .site-preview__today-move {
  margin-top: 24px;
  font:
    400 24px/30px 'Source Serif 4',
    serif;
  text-align: center;
}
.site-preview .site-preview__us-heading {
  position: absolute;
  top: 79px;
  left: 16px;
  width: 370px;
  text-align: center;
  font:
    400 24px/30px 'Source Serif 4',
    serif;
}
.site-preview__us-content {
  position: absolute;
  top: 166px;
  left: 16px;
  width: 370px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.site-preview__pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.site-preview__person {
  width: 80px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.site-preview__person img {
  width: 64px;
  height: 64px;
}
.site-preview__person p {
  font:
    400 20px/24px 'Source Serif 4',
    serif;
}
.site-preview__person small {
  display: block;
  font:
    400 12px/16px 'Instrument Sans',
    sans-serif;
}
.site-preview__pair-divider {
  width: 66px;
  height: 48px;
}
.site-preview__pair-divider img {
  width: 66px;
  height: 1px;
}
.site-preview__us-reading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-preview__us-reading p {
  line-height: 1.3;
  letter-spacing: 0.16px;
}
.site-preview .site-preview__together {
  padding: 16px;
  gap: 16px;
  background: url('/assets/site/paper-us-together.webp') left top / 370px 122px no-repeat;
}
.site-preview__together header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-preview__together header span {
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 40px;
  font:
    600 16px/20px 'Source Serif 4',
    serif;
}
.site-preview--ask {
  background: #000 url('/textures/find-starfield.webp') left top / 466px 349px;
  color: #f5f5f5;
}
.site-preview .site-preview__ask-question {
  position: absolute;
  left: 16px;
  top: 176px;
  transform: translateY(-50%);
  width: 370px;
  font:
    400 32px/1.2 'Source Serif 4',
    serif;
}
.site-preview__ask-content {
  position: absolute;
  top: 274px;
  left: 16px;
  width: 370px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.site-preview__ask-answer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-preview .site-preview__ask-logo {
  width: 20px;
  height: 26.667px;
  filter: brightness(0) invert(1);
}
.site-preview__ask-copy {
  height: 242.667px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.site-preview__ask-copy p {
  flex: none;
}
.site-preview__ask-chips {
  display: flex;
  gap: 8px;
  width: max-content;
}
.site-preview__ask-chips span {
  display: block;
  padding: 9px 16px;
  height: 40px;
  border: 1px solid #f5f5f5;
  white-space: nowrap;
  font:
    500 16px/20px 'Source Serif 4',
    serif;
}