<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.moz-text-html .mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
.intro {
font-size: 16px;
}
.spark-item {
margin-bottom: 100px;
}
.spark-title {
font-weight: bold;
color: #505050;
padding: 5px 0 5px 0;
font-size: 18px;
}
.spark-item-type {
opacity: 0.5;
text-transform: uppercase;
margin: 0;
font-size: 11px;
}
.spark-desc {
padding-top: 4px;
font-size: 15px;
line-height: 1.5;
}
.spark-thumb {
border: 0;
display: block;
height: auto;
width: 100%;
outline: none;
text-decoration: none;
margin: 0 0 10px 0;
}
.sponsor-bg {
background: #333;
color: white;
border-top: 4px solid rgb(255, 116, 10);
border-radius: 14px;
}
.sponsor-bg h2 {
font-size: 2rem;
margin: 0;
line-height: 1.2;
}
.sponsor-bg h2,
.sponsor-bg p {
color: white;
}
.corner-header {
margin-bottom: 10px;
font-size: 24px;
}
.corner-intro {
opacity: 0.5;
margin: 0 0 15px 0;
border-bottom: 2px solid black;
padding-bottom: 15px;
}
hr {
border: 0;
border-top: 1px solid #999;
margin: 30px 0;
}
p {
margin: 0 0 15px 0;
}
</style>
</head>
<body style="word-spacing:normal;">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="https://go.sparkpostmail2.com/q/1TwwDSe2AcaWG9xeuK8HEQ~~/AABEfhA~/UfWV0jE4YB01MzgUVo_Qpkh4yjBoP_TBsOCIOP7mm4EykTdpc0f2nFpZCasdbRzexj4_wpYiPyRZHLFFCgjtFA~~" alt=""/></div>
<div style="">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=1200,quality=90,format=auto/codepen-spark/codepen-spark-header-2025.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#000000;"><a href="https://go.sparkpostmail2.com/f/a/L3B2S_Vcht58XE6Gie7tig~~/AABEfhA~/4cUp_3CBb1UK9eT0MEHSyP5Obxx8FlgJPaFwgXTsSLhGSi2b-Rz68s54LlnvgAwYX-bsKE39XAqKvvkAkSPot6CkMBJqGi5IbfbVsDR2HSYZ60DMu5RL7loBYrbpkuHz" class="view-on-web-link">View this issue on CodePen</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;">
<h1 style="margin: 0; font-size: 24px;">CSS random(), Scoped View Transitions, and Typographic Scales</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#000000;"><p>This week's CodePen community highlights include some truly brilliant demonstrations of the near future of CSS. Chris Bolson and Stuart Robson bring us two great reasons to pop open Safari Tech Preview: a look at CSS <code>random()</code>, and a masterclass on typographic scales harnessing the <code>:heading</code> pseudo-class. And in the Chrome corner, Bramus van Damme gives us a glimpse of element scoped view transitions, and Temani Afif turns a select menu into a mini-game with just CSS.</p></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/6xt18RsiLHcvaQqYYbcXSQ~~/AABEfhA~/YBxRfeAF5e6Yt3GcTQoWHpofEi23G3oUSJkzdvh4O9HTnFljG94B8lyd7erz9wNpmJHODkBPRixppzewCDTHa0Ljvv7pVYeVTAjX3TwkJGkvguywT2L8KNpAgUU0e_-6T9pNc1DwqHOPSwV8oLNzkg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-new-color-col.png" alt="CodePen Challenge: New Colors" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/6xt18RsiLHcvaQqYYbcXSQ~~/AABEfhA~/YBxRfeAF5e6Yt3GcTQoWHpofEi23G3oUSJkzdvh4O9HTnFljG94B8lyd7erz9wNpmJHODkBPRixppzewCDTHa0Ljvv7pVYeVTAjX3TwkJGkvguywT2L8KNpAgUU0e_-6T9pNc1DwqHOPSwV8oLNzkg~~">CodePen Challenge: New Colors</a></div>
<div class="spark-desc">In the final week of the February challenge, we worked with new color spaces and functions. See the whole spectrum in our week 4 collection, including Pens by <a href="https://go.sparkpostmail2.com/f/a/oKbLf5fWMqjqqzdOcO9r6Q~~/AABEfhA~/lwS2M7f0999y7BRjACr_O1NiePYzweBEoZaUn6GgOYCUEZf55P66R8ye9MvT-Durq8dqQ9FVvGbfdz0PY6zbX2BHhuCAryX5Jsy84zU2g2DZx_Q1KMiNv0xIvuG3ZDZHyrNjQIHu432VThKxYiECSg~~">ccprog</a>, <a href="https://go.sparkpostmail2.com/f/a/B4ys0FGOgmwjUK2QSSKaPA~~/AABEfhA~/YzcYDv5FgEHVlAgynYRH3K8-za5E9CQt3xLMShfXMBdaajvW4sbozkh1ZhRdf20ILAxuHpN3QOPL_dn7_9fWdnkRIg1JLeEoYAlOBAjLMN4TFd2MMekG8cMwjQthtB_t98FG7wBHFX_ZpwcN0T9unw~~">Peter Benoit</a>, <a href="https://go.sparkpostmail2.com/f/a/bTJQdW9UJYffKMxK7cRoow~~/AABEfhA~/443bQxXHzJMtEV-lA0aSoIPxdIAPTvl0UN4p2dEXiEP2OcdoOTD7clNx3SMx5yiIBcKErEiIE_k7Wht5aoxKj5iZbnc9pHEmU7xNzyaUr1ye-FVGTWGozFgPovq6IcqL3uq0cuf0VjnLJ6fDeCXMuw~~">Mads Stoumann</a>, and <a href="https://go.sparkpostmail2.com/f/a/xIvreQgoBVrAKOmpzQHGpw~~/AABEfhA~/e28pQfurvRLxiXY5uWYMmyNUyQTKi31QC0wiDGf5OYKbzHwjW4i46oM3yeB--B7PH1jT1hUd7aJBbol4Ip38cMru7AVJ7CKhNxbOeK-pbk3NllO4QysOjD9tL89EuIyQekVZa3bNPcvHNbbBPS8q4Q~~">Gemma Croad</a>. Ready for your next challenge? March is all about <a href="https://go.sparkpostmail2.com/f/a/zfhpSQ8MunB8RvKzuJSEDA~~/AABEfhA~/YzcYDv5FgEHVlAgynYRH3BwOpgF8xf59LF7DEM2X00Ch3g9pqrj_gvSJpHl8UrRDbtxJyM1XGbv10xz8Q2jeNSaettzSfHB1-rYDaUuNDajorWi-8V3kq0OsmtjcqdtbnfZ-S8-PG554MqwSc9PkjA~~">Front-End Opposites</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/BboW25PVDlnLS-a_h59aTg~~/AABEfhA~/yAxi5tNquDfYjcVLkmnrgLYOVNwcteDPO3gN9Iv9pqxmeNVmkL1xQV0nlEpnP_g_424oMg4Mhfl4QXIC5PnSg2WVPSWF9ddp_pUFRIIM5RnYClWEIc27U-tLC12pl4g0ZwJaK4HZtBBAt30O73LBYQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/jelly-text-variable-font-physics.png" alt="Jelly Text" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/BboW25PVDlnLS-a_h59aTg~~/AABEfhA~/yAxi5tNquDfYjcVLkmnrgLYOVNwcteDPO3gN9Iv9pqxmeNVmkL1xQV0nlEpnP_g_424oMg4Mhfl4QXIC5PnSg2WVPSWF9ddp_pUFRIIM5RnYClWEIc27U-tLC12pl4g0ZwJaK4HZtBBAt30O73LBYQ~~">Jelly Text</a></div>
<div class="spark-desc">mike-at-redspace brings us another fun demonstration of variable font physics with this retro-cartoony text animation. Open up the settings panel to play around with the timing, font weight, squash, stretch, and overshoot.</div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/jGFJZjEFYeR6sqHPBZPaQA~~/AABEfhA~/6veVr4hte6iKhE1Dia9NO3ym8t46F8cL6cLIb0RjW_WKLdv9GWY-ZjSX0f4y_sRztFjjxGBz8QYV-9TIDTLU38SopW1rChB-tiSxSE_B8LhtsBi34hThVJDfZzE2v1WPZzMz6xVXCW94TPlNUqaQdJxO8Y0nScdVcTJx0p_-dbLOPvNGuDVOrcj8IAv1GXiu9MWyfrSeDVmLeI5WFxRj7fTiQ6fxOg1TuEsdhNsO8qYSwVnEmBrwdmqcK4KNpGCVPg6J440WIesq7u63n9bPrw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/tempo_mar0226.png" alt="Manage projects and portfolios better in Jira" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/jGFJZjEFYeR6sqHPBZPaQA~~/AABEfhA~/6veVr4hte6iKhE1Dia9NO3ym8t46F8cL6cLIb0RjW_WKLdv9GWY-ZjSX0f4y_sRztFjjxGBz8QYV-9TIDTLU38SopW1rChB-tiSxSE_B8LhtsBi34hThVJDfZzE2v1WPZzMz6xVXCW94TPlNUqaQdJxO8Y0nScdVcTJx0p_-dbLOPvNGuDVOrcj8IAv1GXiu9MWyfrSeDVmLeI5WFxRj7fTiQ6fxOg1TuEsdhNsO8qYSwVnEmBrwdmqcK4KNpGCVPg6J440WIesq7u63n9bPrw~~">Manage projects and portfolios better in Jira</a></div>
<div class="spark-desc">Advance your portfolio management journey with an integrated Jira toolkit. Tempo Collections combine our most powerful tools to meet organizations at any stage of the SPM journey. Reach out today to learn more about the toolkit your team needs. Book a demo now!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/P_lCHF92WiAV3ellW03lzQ~~/AABEfhA~/lwS2M7f0999y7BRjACr_O-qfmQB55f5hLKZ4jiyl5ijT2ymPWWbjokxXotolM4Ftnv7koJPlRcYAaAdzZ4Nla5UiFJByfKvAEGWbcNu7Be2jnzFg5V3t3HjKqfM0bIl5Q9plA37ZFJ9n-u52uYX46g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/select-your-fruit.png" alt="Select your Fruit!" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/P_lCHF92WiAV3ellW03lzQ~~/AABEfhA~/lwS2M7f0999y7BRjACr_O-qfmQB55f5hLKZ4jiyl5ijT2ymPWWbjokxXotolM4Ftnv7koJPlRcYAaAdzZ4Nla5UiFJByfKvAEGWbcNu7Be2jnzFg5V3t3HjKqfM0bIl5Q9plA37ZFJ9n-u52uYX46g~~">Select your Fruit!</a></div>
<div class="spark-desc">Temani Afif transforms a select menu into a FPS game, demonstrating the unexpected potential of the newly <a href="https://go.sparkpostmail2.com/f/a/WEJPehSxxHaTkyd70K-O-A~~/AABEfhA~/4dOzPjiA39AtZnsHhYp48e9J1QObZcQL9S1bxyWA1NPwYphbe-iqM94rbMmGdnPwVX5PwN2pOi_f3y9H3rSR2GVt3EwO926PXNmvQLF4qCQv1rxqfRDhtgg6Ukkg0mBol8S-V1E6I4coZ46pkyaPnOOU7LcvXpLb3uDqw6RSItYzL3aFPfbjSZLiJUyD3Rmzq8fWI4I4TJho6XlRbKsLYPx4K3WwxpSzm_egoKcR63A~">customizable select elements</a>. Temani's game mode is Chrome only for now; the menu falls back to a very innocent-looking select in other browsers.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/yjmUx3jp6PIACivHjsHszA~~/AABEfhA~/lwS2M7f0999y7BRjACr_O1yPMlbM-iqpVmVLB7lXNSfMhvJGiYNrH37MHB0j2l0K54XyY3jrv5GhgmoU4xWphtnybyVEAVkQv4Pb0HXt1YyX-coZZFrbXw6kg-sEItcVKXZHJvR9c0sq7zUrupdTEw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/inner-outer-view-transitions.png" alt="Inner and Outer Scoped View Transitions" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/yjmUx3jp6PIACivHjsHszA~~/AABEfhA~/lwS2M7f0999y7BRjACr_O1yPMlbM-iqpVmVLB7lXNSfMhvJGiYNrH37MHB0j2l0K54XyY3jrv5GhgmoU4xWphtnybyVEAVkQv4Pb0HXt1YyX-coZZFrbXw6kg-sEItcVKXZHJvR9c0sq7zUrupdTEw~~">Inner and Outer Scoped View Transitions</a></div>
<div class="spark-desc">Element-scoped view transitions are coming in Chrome 147! Bramus van Damme gives us a sneak peek in this Pen. Check out Bramus' <a href="https://go.sparkpostmail2.com/f/a/e-4Yt3yE8w5YfYZ0OkexEw~~/AABEfhA~/VLK4rGWmjtA4WTFE_FsiuKF3hab-kPxqNJiS89I2kba_qHtAt0pLLH7Y8jOsDKCmYwJ2KuuA-wQA87vcXrMGEybKPcSKCwn4ydHeTwnLflueikw4EcxTwspWlzJIe68hgq4T6vlOsjdgJM8bJ4QSyqQIy7xbDbaTSX5njVlo5eg~">Bluesky thread</a> for more detail on how it works.</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/XZ9lZO5FysGwExAaXsAZKw~~/AABEfhA~/6veVr4hte6iKhE1Dia9NO3ym8t46F8cL6cLIb0RjW_WKLdv9GWY-ZjSX0f4y_sRz6PeeJE0uYtODzvk0wlw5vRDelXHZRVzPPX_VW5hhuZqxNqBkyx3eOVepXuIgtBG7OEihX9X1auwAMPxI5GGHomCKlZUoHy6weSG2mGFSi3l8a8WnIIMroiXuUQhWBjbWuL0FAGLROj7xvq1oPgNVk54m6sB3M8DW1KFhfLyrwp-utrODa6fzT-2y_BmObXMubVhDcTUS7p4rNHi_iLUrkA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/jam_mar0226.png" alt="One shot, once." height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/XZ9lZO5FysGwExAaXsAZKw~~/AABEfhA~/6veVr4hte6iKhE1Dia9NO3ym8t46F8cL6cLIb0RjW_WKLdv9GWY-ZjSX0f4y_sRz6PeeJE0uYtODzvk0wlw5vRDelXHZRVzPPX_VW5hhuZqxNqBkyx3eOVepXuIgtBG7OEihX9X1auwAMPxI5GGHomCKlZUoHy6weSG2mGFSi3l8a8WnIIMroiXuUQhWBjbWuL0FAGLROj7xvq1oPgNVk54m6sB3M8DW1KFhfLyrwp-utrODa6fzT-2y_BmObXMubVhDcTUS7p4rNHi_iLUrkA~~">One shot, once.</a></div>
<div class="spark-desc">Collect logs, network, video - in two clicks. Record your screen & Jam captures it all. Paste the link in your coding agent and you’re done. Build new things faster w/ automatic debugging context.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/s26_DPHQi7q6mxRtaRUvCA~~/AABEfhA~/443bQxXHzJMtEV-lA0aSoDKGwEJsrD1REPveZigaYgjX-8NWF2XkDvM4A1Vup2VrnGV3jp_l4XDQsKbR5nMLR23W1pw-lo0yOanh2iQmiVdubxVrMpZO-vYqwQFNjGuQL-OeehYxiA2NwAUq_OH7rw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/crt-effect-cat.png" alt="CRT Effect" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/s26_DPHQi7q6mxRtaRUvCA~~/AABEfhA~/443bQxXHzJMtEV-lA0aSoDKGwEJsrD1REPveZigaYgjX-8NWF2XkDvM4A1Vup2VrnGV3jp_l4XDQsKbR5nMLR23W1pw-lo0yOanh2iQmiVdubxVrMpZO-vYqwQFNjGuQL-OeehYxiA2NwAUq_OH7rw~~">CRT Effect</a></div>
<div class="spark-desc">Sage Fennel Mock gives an ASCII cat that classic CRT glow with some clever <code>text-shadow</code> layering. See the HTML panel for links to the ASCII inspiration and a discussion of the <code>text-shadow</code> colors.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/2edoeSrsyghRi89-eWBjzg~~/AABEfhA~/Jr42hxSm7ftPVUPlz0deNzEEAhm2dih4X5i2DPpuaNn4P56wiZVO7hqyO7QLVNvV3ZicENB_q6otVLcvfxTAs0yJdW1Ia9EF1nyhvsekfLpwnr9cKJhkqB-k8yNw6an5TlPycvSG-pEKQBBMhsyvB5wJNduK2FVY8TR8Zw3Xdhw1Y5YRjhVnmih9LmmhchVBW31hWZ2sd-R70ifzvyv0_EyEIgpGBUZxNdf6xeUaGW0~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/building-typographic-scales-css-robson.png" alt="Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/2edoeSrsyghRi89-eWBjzg~~/AABEfhA~/Jr42hxSm7ftPVUPlz0deNzEEAhm2dih4X5i2DPpuaNn4P56wiZVO7hqyO7QLVNvV3ZicENB_q6otVLcvfxTAs0yJdW1Ia9EF1nyhvsekfLpwnr9cKJhkqB-k8yNw6an5TlPycvSG-pEKQBBMhsyvB5wJNduK2FVY8TR8Zw3Xdhw1Y5YRjhVnmih9LmmhchVBW31hWZ2sd-R70ifzvyv0_EyEIgpGBUZxNdf6xeUaGW0~">Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()</a></div>
<div class="spark-desc">Stuart Robson continues a series on the cutting edge of web typography with this exploration of <a href="https://go.sparkpostmail2.com/f/a/hVQ2dP0rJ0hiRLl0HKhZnQ~~/AABEfhA~/keOJrC6HxZnM71uP3KvOzNAxEfmdNszh5_Ssf3pYDCVouGzwy4W0JeSCpqsBOPv5s0rqgjAyVFuePQgB7rcQ3Hl6QSkBdowdCUsJmZJ8dU51adQsAjvegJlEiFrLlrP_jrBc9a9hQFVXRB98D4rVHMkf-lMuoKHqEQIJObn2q8AQASn0LCVNKvtxSJufEBur"><code>:heading()</code></a>, <code>sibling-index()</code>, and <code>pow()</code>. Pop open Safari Tech Preview to try out the embedded interactive Pen.</div>
</div>
<div class="spark-item" data-type="video">
<a href="https://go.sparkpostmail2.com/f/a/jbPAx8ZVjqVWrqveDLzhsg~~/AABEfhA~/C04mZjXHn7wwUwEXDJQ9i56_lMiFoqaNqlJ0Y8KcqPOg_QF02di4Kivx8D0AGpB8cXfLKIHt0RfC4PLCCAJzMHbppV_I_JMC6XhLvQbXp42QTUJAnh5aZ_oCsejL0Pn6D8AvpaqD__Qh53mqdLg9ogpRMqiYNjEaxk6jK0rDAeA~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/aim-gallery-chris-bluesky.png" alt="AIM (Anchor Interpolated Morph) Popover Gallery" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/jbPAx8ZVjqVWrqveDLzhsg~~/AABEfhA~/C04mZjXHn7wwUwEXDJQ9i56_lMiFoqaNqlJ0Y8KcqPOg_QF02di4Kivx8D0AGpB8cXfLKIHt0RfC4PLCCAJzMHbppV_I_JMC6XhLvQbXp42QTUJAnh5aZ_oCsejL0Pn6D8AvpaqD__Qh53mqdLg9ogpRMqiYNjEaxk6jK0rDAeA~">AIM (Anchor Interpolated Morph) Popover Gallery</a></div>
<div class="spark-desc">On Bluesky, watch CodePen co-founder Chris Coyier tinker with Adam Argyle's <a href="https://go.sparkpostmail2.com/f/a/3oduDzT_KAATOrulQa_5lw~~/AABEfhA~/yAxi5tNquDfYjcVLkmnrgB4nwuxJxc_yJg8jTdYzzsMHkF-lwqbepo8zG8EQa020RKmE5YzFnCMjtQ2blVetbH-mf6HvU-XvK0j1qW7OLyRU06SCHuPjJizXPLAwfEypz0p5p3O8afYGAsQRlHHzSA~~">Anchor Interpolated Morph (AIM)</a> concept to create a [popover]-powered image gallery where the thumbnails open full-size images.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/bHFxYGdO0uKrpeRsLK8fiw~~/AABEfhA~/f0mzwANhaezh-aPSPm-W2RzDm7pdMgqINpvVKlAsepIFW8o3iBYEqLFe1k0SgJ7Lhtq6-FdwOD-G-QnDMPqq6ALqUmLdDG_orkqPRRbbBbVDPzbCTDspPanz8o0zVR4KS4WS4UmVPix0EsVd1h_hiw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/wheel-with-css-random.png" alt="Wheel with CSS random()" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/bHFxYGdO0uKrpeRsLK8fiw~~/AABEfhA~/f0mzwANhaezh-aPSPm-W2RzDm7pdMgqINpvVKlAsepIFW8o3iBYEqLFe1k0SgJ7Lhtq6-FdwOD-G-QnDMPqq6ALqUmLdDG_orkqPRRbbBbVDPzbCTDspPanz8o0zVR4KS4WS4UmVPix0EsVd1h_hiw~~">Wheel with CSS random()</a></div>
<div class="spark-desc">The <a href="https://go.sparkpostmail2.com/f/a/UEsNvotvfdMdCA1sJ8f_Xg~~/AABEfhA~/tt3UH_Bwygj-hBJn1uW9FP-cYaVB-vJjT2d1FRvBwBHIv9UV5X8Yt44PxW8G8HKSG4KOsv2VM3MLbMdbqyuqWxutPGiOWbJyVknJvXXRkvKjR2R12uei32ZyvDW9vHAW2JpL2eF6sejwiwrlhbWWFyR9OWrlA_8O_8BCck86xL8~">CSS random() function</a> has landed in Safari 26, and you can give it a whirl in this Pen from Chris Bolson. If you're curious to learn more, check out Alvaro Montoro's new post looking ahead to <a href="https://go.sparkpostmail2.com/f/a/pDmcBzw4z1_Rx-wcaf7W0A~~/AABEfhA~/MeH9n8PBcMec_9JhrFEDEWNQLROKrz8MBlT4zAxsBo7MfccFH-rXztU2CJ7vpY1RQvW-oF6SwOMOTaom1aXc1qW86QL343aSiLPuqG6CGWr69URXETYYksPvKyOHaY3hhzjt8o7zOV7yn9ZlCB0naOHHaOgUhah2oNNuNaReGK2iQAMqcCRmdLqSmFcvufzQ">Native Random Values in CSS</a>.</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<h2 class="corner-header">
<img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px; border-radius: 4px;" /> Chris’ Corner
</h2>
<p class="corner-intro">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
</mj-raw>
<p><a href="https://go.sparkpostmail2.com/f/a/dksyTfejHxlYQhmPgFhy9A~~/AABEfhA~/5k1DI9Bg3aH6TZo1VLp4o02ARHsFiqexAyYMw22A1VCC1rJfcyKJf1MBTzIE0bsVDB5y1yqeN-kF1gPVdPGqd4WMCFeoiykhGAQL9DNGiB-eyNOXkGZwd06vwBxnNoRt">Dave</a> has this classic idea for a <a href="https://go.sparkpostmail2.com/f/a/xtK46OvXwk9oZ4CsgSgKlw~~/AABEfhA~/lwS2M7f0999y7BRjACr_O0AmnuvSVVwcyek8J6eSAsbJ2LsDr6r9SqszorITyC7IzKHSedZClJklMEh7piHnzucVEAzsLolcS_yaI8fH8yY0UXdt4NKsaAWiFZFXnZg9yPbToXZE6LmwCg2gPR2WUA~~">Web Components Sommelier</a>. Like many of Dave’s ideas, it’s equal parts joke and brilliance. The idea is a person with deep knowledge of an absolute ton of different Web Components who can suggest ones that do just the right thing in any situation. Like a wine sommelier who can suggest the perfect wine to pair with a meal and meet the diner’s tastes.</p>
<p>Need to compare two images? <a href="https://go.sparkpostmail2.com/f/a/J_cRIqAOrZOEM3V0mdS9dg~~/AABEfhA~/2rVFmm9-mEqkO35f-nCFRII1vk3a6KX5b06XOwLDNj-fBCuvjnH0DsMBYUfP6kzch5LRkhefLAt8C6c1mwE4m1XrOf2kdb4hDl3GW54cMbR7FONzDAvf8_EcBTLuba9RKFeB3FS1jrosfC8SDzn0VQ~~">Of course, ma’am</a>, <a href="https://go.sparkpostmail2.com/f/a/rJDhyQnMX9BG5V5p_yg_eA~~/AABEfhA~/J2HnjY6yR60mmRRlQop2mxOVlNIpet1dWmLDORfQdlbxzD74LEwGKE_yx30v094jd0C8TkUl3X66y6iKchSnEe7l3WvBMVS-VbHgZ4JozTBX-wDrQaODsscehE-ABIernKCbxXcvo-eXNExoaxu5kucXUGvsWNOc1Ye-_NRcIDaak56gx_E-Z5Ko13zjvZh_">here you go</a>. Need pinch-and-zoom support on any element? <a href="https://go.sparkpostmail2.com/f/a/dACQp744ucJrhqFC1p2naQ~~/AABEfhA~/0Q4kgAPptoInLi4IqkgDCR3fRT9TrCoO7zMeeI-vWHN53UJxlOosQWYH3bhTp-y2FBxiR6wJgQlp7iyUlksatelMvbQFIzTtkzHdW4cNk9ukWKZz8TQMoxFX3KCgCrlXvZQgeOXwOVoZsmxR4PHW0r6dMPQH4_iilYab38KswIacu8G2YG5VY2UF8v8fm5yj">Right away</a>, <a href="https://go.sparkpostmail2.com/f/a/Cv_NL0ldEM1k3rgBF6f7FQ~~/AABEfhA~/J2HnjY6yR60mmRRlQop2mxOVlNIpet1dWmLDORfQdlbxzD74LEwGKE_yx30v094jt5QFe_OqnZ5qCPx8CIRgjk0rTOyksSRVyq96kAAFRaoTBDRbLPpHBoWMjy447f_9D7OHJflJw1DpHsRpOMlecjg2ZSifOgo_oGxY4E-gT_Ux8SPw8qHY5h3d2mGJVfdf">here you go</a>. Need to render some Markdown? <a href="https://go.sparkpostmail2.com/f/a/0mKFzYDBuLMBQSKSPDhwSg~~/AABEfhA~/hFaR3Ff8oX2Ri1QSvu8n548eOaIpt5Xq3dZrSus6c4ab_YVrB2zQJ5KGla7z9QS9h24Eg9pQKBeuDb9uihEApylS0TR7pRrWI9oSDDKTnLOfN1mSyiU_pa92H8mAXzjElIwNZHWLUt2MAT4mLlo9LQ~~">As you wish</a>, <a href="https://go.sparkpostmail2.com/f/a/qc1p-dcpzue-BTYcQmSsMQ~~/AABEfhA~/J2HnjY6yR60mmRRlQop2mxOVlNIpet1dWmLDORfQdlbxzD74LEwGKE_yx30v094j2zMAsYS7zee-W9xhPzqtv2b8UF2Rf8OoWFcIZ6i0KM2NSJNt0eyGlEZ0j0_nm0i_zjw2GeGqn3Dgw6mLxSpwZ8Zt3jMbDG1VoMYtT3W0wSS12nGeU5guX87TMK6k01t_">here you are</a>.</p>
<p>I think of the sommelier thing every time I see a new cool web component, especially if it’s got that “stand-alone” quality where you can just link it up and use it immediately. Here’s an example! <a href="https://go.sparkpostmail2.com/f/a/wzq7ChS2gpiKlK4Z-G4IqA~~/AABEfhA~/4cUp_3CBb1UK9eT0MEHSyOy3rpjjZhy8ZsEfOfZoiKfRr8ocQfGDdKk6Fi4KH_JTQXH67c5Jz7c1YSXKDzXCXhFaNdVg9vVjI8eUY2jipM58w3Kgq2oR5dDuEZIZw2rP">spoilerjs</a>. All you do is:</p>
<p><code>import 'spoilerjs/spoiler-span'; </code></p>
<p>Then you can use the web component to wrap whatever, which hides it with these cool particles.</p>
<pre><code class="html"><spoiler-span>It's a sled.</spoiler-span>
</code></pre>
<p>Click it, and the particles disperse, <a href="https://go.sparkpostmail2.com/f/a/u90EHHa4wM5ocoOX-j8gCA~~/AABEfhA~/J2HnjY6yR60mmRRlQop2mxOVlNIpet1dWmLDORfQdlbxzD74LEwGKE_yx30v094jZ5KCR-tbNkQ5zHMCanTArIy6A7jdhkrs1vaioWTu1YVp2hI5LunawKpLPDauQebYp_5Vj_0u1_wJFg6UdF3UKp0vo0FIqP-6ZdG4VTZKYfbJYF_DoJMPfA1ZIxji7JhK">revealing the spoiler</a>.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/rosebud_spoiler.png" alt="A particle spoiler indicator, overlaid over repetitions of the word 'Rosebud'. " width="250"/>
<hr />
<p>I’ve seen TWO games that:</p>
<ul>
<li>Involve horses.</li>
<li>Use the .horse TLD</li>
</ul>
<p>I dunno, just seems notable.</p>
<p>The game at <a href="https://go.sparkpostmail2.com/f/a/9eIw-V1-SrJzoa7pnm1XLw~~/AABEfhA~/FTPUey1CqJTtf9vElFgViVodv_KG39idUhSXj_Z0KeFuFw_5IGbk7v1bbNEg-I-aeI1ACkzz-UF_ypADft90om6pVMkJi2VRYmJF07q6Ow1Rge_CZNeRsxFDKtIXjNV5">enclose.horse</a> has you building walls to enclose areas that yield the most area/points. The “game” at <a href="https://go.sparkpostmail2.com/f/a/gz-pzYXkr3r-GJPu-iIuyw~~/AABEfhA~/5k1DI9Bg3aH6TZo1VLp4ozKc452gxKRfy8DhE-M0CCXdcKr4zZBYhQDlfcfZ_AbRiN_0kOCiUwHQlweStVSSxAkZ5MUHfodyWxKu1gqptlwZlThHwwA9Qo9LybrIoMEF">gradient.horse</a> has you drawing your own horse (and horse parts) that then goes to join a parade of other rather happy horses.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/gradient_horse.png" alt="Screenshot from the game gradient horse showing Chris' ok drawing of a horse." width="300"/>
<hr />
<p>I’m honestly not sure if liquid glass is still interesting or not (I suspect interest has waned), but I do quite like this generator thingy: <a href="https://go.sparkpostmail2.com/f/a/2VljCRHjOFn3XOdpBxb6LA~~/AABEfhA~/Z9sXLKbS-Mc1WowjZK03kv2WwKS_wmYFmezNGcFvd1QbW29YaZfZTp7AcCfJbNfC516klEUR5RFJHDeNpb_Em5zHKeB2QQRjU3v6v4gVjD3dc2Umk8QsIIow5iztjDjD">Aether CSS</a>. I like it because there are lots of options for the final look. Sometimes it’s frosted, and sometimes it’s not. Sometimes there is a lot of distortion; sometimes, a little. Sometimes the light hits harder than in other examples. There is no right or wrong (until you can’t read the text, then it’s wrong).</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/liquid-glass-comp.png" alt="Side-by-side comparison of frosted vs. liquid glass effects. " width="500"/>
<hr />
<p>The Web Audio API remains extremely cool. But sometimes you just need a little audio file of a neat little sound. <a href="https://go.sparkpostmail2.com/f/a/9YlgGmxwCVPNNbx3y0lPhw~~/AABEfhA~/Lzu4rZsBqMDQPRSwJrrj-Tuy3meQD5E5TxHRNGXoLDgEvT58e45RxzdJDLMvkK1pl7CSBlX_G8LMxoqnkOR_luzn3R6fXebuJDlronYBboneDMmlAQ3Uw9JYSxdUUaMy">jsfxr</a> is kinda both.</p>
<blockquote><p>Jsfxr is an online 8 bit sound maker and sfx generator. All you need to make retro sound effects with jsfxr is a web browser. It’s a JavaScript port of the original <a href="https://go.sparkpostmail2.com/f/a/XrGk4IyzyjFp_CTx3TCpFA~~/AABEfhA~/-uMNiaNidpUoDTBnsNsibVMthoNgToeX2sEbufzg9F4DFsKY-r61y8A1sXaJZEtl2tw0oYFe1f1Yj6BotozcWZYEVYrAMXHYkdV3cTP1OiwXgBE1YX2AC3Pgzb8sC_lXg4mSEZgK4eedwUPKMOvrLQ~~">sfxr</a> by DrPetter. You can also use it as a <a href="https://go.sparkpostmail2.com/f/a/E7Nq62wmqAFSjSSDfmWFGg~~/AABEfhA~/hFaR3Ff8oX2Ri1QSvu8n5w5ArAqxUZreTgEjWKQTETtL3hjHzXNoXQnwTV9wPWXi4DDjC_8XzkJjR0bIcRNtQYvaW_qyTu7Fhf3kSk4GVhCQCDHWhKY3UNp96KZOEXRAboRZh5vRTgd1Be_1ETGQFQ~~">JavaScript library</a> for playing and rendering sfxr sound effects in your games.</p></blockquote>
<p>You adjust all these levers to make small sounds, then can output the sound to use without any API or library usage. The <strong>random</strong> button is very fun.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/jsfxr.png" alt="Screenshot of the jsfxr sound generator interface displaying various options for sound creation including settings for waveform selection, envelope adjustments, frequency modulation, and effects like flanger and filters" width="500"/>
<hr/>
<p>Weird aside: remember when we used to have the term <em>adaptive</em>, as an alternative to <em>responsive</em>? As best I can remember, it meant a site that had <code>@media</code> query breakpoints that changed layout, but the layouts were rather fixed after that, as opposed to the fluid grids of <em>responsive design</em>. The jsfxr site is adaptive.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;">
<p class="subscription-details"> You can adjust your <a href="https://go.sparkpostmail2.com/f/a/DTEHrDX_VJ7EWwn-MA5Zlw~~/AABEfhA~/e28pQfurvRLxiXY5uWYMm6jn1yAPEpJ_Q2DxCal9xb63P2gyAxVBarNF2VXyWtd_4_ZGBgj711fODyPhHMFyOZkLTNN46BkuCLy1CT-jWeCy1J-jcBVSj6yFlWbVgUVd8HIowgBwVpQMO4Vjed2BFg~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/FtJ2CsNVbhHP8Vg0X8hqzg~~/AABEfhA~/EY6CKLKNSBP_fuKSt_TA3jdCKZ5AeqiJcmxFjkNRembatG6Cj7OpCmKv5Z8E-gEPkOx-Q6EoxPFJIirqVIEZ1e5PLFkc0oo29ngVrE80MFyLB_vHXxVrTc5GvOGwtI8DPnojgscLotueeGFvAicqLLpyGKKvhLMeaPuX_fCMd9jHkBLN6TlReC_1UcufOI1XvpOV7696OPkHZvNnNhRIZfqq_7py3bDVAlZLQEG7QRlNQFeaY3_PpaHTz7avQsjYrCuK4ChdIdFWess1WHkAPa7Alv53Xh6GE66FJAfhcGvK7wYwSct3UiVCIxFwR9J-LnXW8kjjVHMR4DOHCAL4qMCFTS39FXAQU6277OCyJVA~"> instantly unsubscribe </a> to emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/atgZhW738w3WPw2bNo5_HQ~~/AABEfhA~/rthhjzncBNDjTfqzVlKKpYrVHtU8mKQOE-m0yX-o4ni-gpkAj5DNYbIv4mL_EBEvQvfHEMuU46Xu747a_ivpdv4Y2ssTY4JxIPWhLAW0nDTX6hfGFrcQx2BR4QnpnlOM">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/obMe1bRJbYulGEVRbB4LSQ~~/AABEfhA~/4cUp_3CBb1UK9eT0MEHSyD3qnUtWinS1mj-iA6klgUEBsQFqZyVkdeFfrl6HfLEAMM5WUpx0X_7gnl1xH1cPlMd08Hv-9hrg6kaYf23kYVlUGaPCcoA4UoBOzqK_G2o-">sponsorship info</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/CuJBLxGYz314vnfSNciaCw~~/AABEfhA~/xvMurtDnaZc3BnKvtqywawBy1q_5t75fRpWhyjcYjCHdH-5iwSHK7tIxOG0wqOz6bTG2o1Plb9E-EnyXOchWtw~~">
</body>
</html>
