#alerts > .aspect-square { align-items: center; padding: 26px; background: radial-gradient(ellipse at 50% 42%, #ffffff04, transparent 68%), #101010; }
.apop { position: relative; width: 100%; min-width: 0; margin: auto; container-type: inline-size; }
.apop-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #dedede; font-size: 13px; }
.apop-badge { border: 1px solid #363636; border-radius: 5px; padding: 4px 8px; font-size: 10px; color: #999; }
.apop-scale { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.apop-scale strong { font-size: 44px; font-weight: 500; letter-spacing: -.065em; line-height: 1.1; color: #f4f4f4; }
.apop-scale > span { font-size: 16px; letter-spacing: -.02em; color: #c0c0c0; }
.apop-subtitle { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: #999; }
.apop-population { position: relative; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 3px 4px; align-items: center; justify-items: center; margin: 0 -3px; padding: 4px 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.apop-person { display: block; width: 100%; max-width: 16px; height: 17px; }
.apop-tone-0 { color: #464646; }
.apop-tone-1 { color: #6f6f6f; }
.apop-tone-2 { color: #a3a3a3; }
.apop-tone-3 { color: #d5d5d5; }
.apop-population::after { content: ''; pointer-events: none; position: absolute; inset: -35% 0 auto; height: 35%; background: linear-gradient(transparent, #ffffff0a, transparent); animation: apop-survey-sweep 7s ease-in-out infinite; }
.apop-connector { display: flex; flex-direction: column; align-items: center; height: 18px; color: #686868; }
.apop-connector > span { width: 1px; height: 12px; background: linear-gradient(#292929, #707070); }
.apop-connector svg { width: 10px; height: 6px; margin-top: -2px; }
.apop-question { display: flex; align-items: center; gap: 12px; min-height: 45px; margin-top: 21px; padding: 11px 14px; border: 1px solid #414141; border-radius: 10px; background: linear-gradient(135deg, #242424, #171717); box-shadow: 0 8px 24px #0003, inset 0 1px 0 #ffffff06; color: #e4e4e4; font-size: 12px; line-height: 1.45; }
.apop-question svg { width: 17px; height: 17px; flex: none; color: #bababa; }
.apop-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apop-theme { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 4px; border: 1px solid #2e2e2e; border-radius: 6px; background: #151515; color: #b9b9b9; font-size: 10px; line-height: 1.3; }
.apop-theme-marker { width: 4px; height: 4px; flex: none; border-radius: 50%; background: #b5b5b5; }
.apop-theme:nth-child(2) .apop-theme-marker { background: #898989; }
.apop-theme:nth-child(3) .apop-theme-marker { background: #616161; }
.apop-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #292929; font-size: 9px; line-height: 1.5; color: #929292; }
@container (max-width: 350px) {
  .apop-caption { font-size: 12px; }
  .apop-scale { gap: 10px; margin-top: 21px; }
  .apop-scale strong { font-size: 37px; }
  .apop-scale > span { font-size: 12px; }
  .apop-subtitle { font-size: 11px; }
  .apop-population { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px 3px; }
  .apop-person { height: 13px; max-width: 12px; }
  .apop-question { font-size: 11px; gap: 9px; padding: 10px; }
  .apop-themes { gap: 5px; }
  .apop-theme { font-size: 9px; gap: 4px; }
  .apop-note { font-size: 9px; }
}
@media (max-width: 639px) { #alerts > .aspect-square { aspect-ratio: auto; padding: 23px 16px; } }
@keyframes apop-survey-sweep { 0%, 10% { transform: translateY(0); opacity: 0; } 20%, 75% { opacity: 1; } 90%, 100% { transform: translateY(390%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .apop-population::after { animation: none; display: none; } }